.blur {
    filter: blur(5px);
    pointer-events: none; /* Disable interactions */
}
.loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--ssbond-m-h2);
    font-weight: bold;
    color: #555;
}
.hidden {
    display: none;
}
.textHide{
    display: -webkit-box !important;         /* Enables the multiline truncation */
    -webkit-line-clamp: 3 !important;       /* Limits the text to 2 lines */
    -webkit-box-orient: vertical !important; /* Sets the box orientation to vertical */
    overflow: hidden !important;            /* Hides overflow content */
    text-overflow: ellipsis !important;  
}
/* Common Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Common Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* padding: 12px 24px; */
    /* border-radius: 4px; */
    /* font-size: 16px; */
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;

    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-family: var(--ssbond-family);
    font-size: var(--ssbond-d-btn);
}

.btn-primary {
    background: var(--ssbond-red);
    color: var(--ssbond-white);
    border: none;
}
a{
    text-decoration: none;
    color: var(--ssbond-blue);
}
.btn-primary:hover {
    background: var(--ssbond-red);
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--ssbond-secondaryLinear);
    color: var(--ssbond-white);
    border: none;
}

.btn-secondary:hover {
    background: var(--ssbond-secondaryLinear);
    transform: translateY(-2px);
}
.learn-more{
    background: var(--ssbond-white);
    border: 1px solid var(--ssbond-blue);
    color: var(--ssbond-black);
    font-size: 10px;
    padding: 4px 16px;
    border-radius: 20px;
    cursor: pointer;
    margin: 0 auto; 
    width: 50px; 
    white-space: nowrap; 
    transition: all 0.2s ease;
    font-weight: 500;
    height: 22px;
    min-width: 70px;
    display: inline-flex;
    align-items: center; 
    justify-content: center; 
    font-family: var(--ssbond-family);
}

.download-btn{
    background: var(--ssbond-white) !important;
    border: 1px solid var(--ssbond-blue);
    color: var(--ssbond-black);
    font-size: var(--ssbond-d-btn-card);
    padding: 4px 16px;
    border-radius: 20px;
    cursor: pointer;
    margin: 0; 
    width: auto; 
    white-space: nowrap; 
    transition: all 0.2s ease;
    font-weight: 500;
    height: 32px;
    min-width: 70px;
    display: inline-flex;
    align-items: center; 
    justify-content: center; 
    font-family: var(--ssbond-family);
}
i{
    margin-right: 10px !important;
}
.learn-more:hover {
    background: var(--ssbond-primaryLinear);
    color: var(--ssbond-white);
}
.download-btn:hover {
    background: var(--ssbond-primaryLinear);
    color: var(--ssbond-white);
}
/* Common Media Queries */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    .learn-more{
        height: 30px;
        min-width: 100px;
        font-size: var(--ssbond-m-btn-card);
    }
    .download-btn{
        height: 30px;
        min-width: 100px;
        font-size: var(--ssbond-m-btn-card);
    }
}
@media (max-width: 576px) {
     .learn-more {
        padding: 0px 0px;
        font-size: 10px;
        height: 20px;
        min-width: 65px;
    }
     .learn-download-btn {
        padding: 0px 0px; 
        font-size: var(--sf-text-sm);
        height: 30px;
        min-width: 80px; 
    }
    .btn{
        font-size: var(--ssbond-m-btn-card);
        padding: 6px 12px;
    }
}
.switch-content-video.hidden {
    display: none !important; /* Hide all cards by default */
}

.switch-content-video.active {
    display: grid; /* Show the active card */
}
.play-icon {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the icon */
    width: 60px; /* Set the desired width */
    height: 60px; /* Set the desired height */
    cursor: pointer;
    opacity: 1;
}
