/* ==============================================
   COMPLETE KIOSK WEBSITE CSS - NO DUPLICATES
   End-to-End Stylesheet - Production Ready
   Version 3.3 - CLEAN & OPTIMIZED + BLOG POSTS + ACTION BUTTONS FIX
   Last Updated: December 15, 2025
   ============================================== */

/* ==============================================
   1. PAGE TITLE AREA
   ============================================== */
.page-title-area {
    background-size: cover;
    background-position: center;
    width: 100%;
    background-repeat: no-repeat;
    min-height: 350px !important;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    background-image: url('../img/page-title-bg1.webp');
}

    .page-title-area::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }

    .page-title-area::after {
        content: "";
        position: absolute;
        background: #e2b923;
        width: 140px !important;
        height: 250px !important;
        border-radius: 150px 0 0 0 !important;
        right: 0;
        bottom: 0;
        z-index: -1;
    }

    .page-title-area .right-shape {
        position: absolute;
        right: 80px !important;
        bottom: 80px !important;
        z-index: 2;
        animation: float-bob-y 3s linear infinite;
        max-width: 100% !important;
    }

.page-title-wrapper {
    position: relative;
    z-index: 2;
    padding: 30px 0;
}

    .page-title-wrapper .page-title {
        color: #fff;
        font-size: 36px;
        z-index: 1;
        font-weight: 500;
        margin: 0 0 10px 0;
    }

/* Breadcrumb */
ul.breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

    ul.breadcrumb li {
        display: inline-flex;
        align-items: center;
        color: #c4cfd2;
        font-size: 15px;
    }

        ul.breadcrumb li a {
            color: #c4cfd2;
            font-size: 15px;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            transition: color 0.3s ease;
        }

            ul.breadcrumb li a:hover {
                color: #e2b923;
            }

            ul.breadcrumb li a i.fa-angle-right,
            ul.breadcrumb li i.fa-angle-right {
                margin-left: 8px !important;
                margin-right: 8px !important;
                font-size: 14px;
                opacity: 0.7;
                transition: all 0.3s ease;
            }

            ul.breadcrumb li a:hover i.fa-angle-right {
                opacity: 1;
                color: #e2b923;
            }

        ul.breadcrumb li.active {
            color: #e2b923;
            font-weight: 600;
        }

/* ==============================================
   2. SECTION TITLES (Global - Single Definition)
   ============================================== */
.section-title {
    margin-bottom: 30px;
}

.semi-title {
    display: inline-flex;
    align-items: center;
    padding: 4px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
/*    letter-spacing: 0.18em;*/
    position: relative;
    overflow: hidden;
    /* base gold glass */
    background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.6), transparent 55%), radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.35), transparent 60%), linear-gradient(135deg, #fbe9a7, #f2cf54, #e2b923, #c8951b);
    border: 1px solid rgba(255, 255, 255, 0.7);
    
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #3b2a00;
    margin-bottom: 10px;
    /* liquid movement */
    background-size: 200% 200%;
    animation: semiTitleLiquid 10s ease-in-out infinite;
}

    /* subtle inner liquid highlight layer */
    .semi-title::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.45), transparent 55%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.25), transparent 60%);
        mix-blend-mode: screen;
        opacity: 0.9;
        pointer-events: none;
        animation: semiTitleLiquidHighlight 12s ease-in-out infinite;
    }

/* liquid background movement */
@keyframes semiTitleLiquid {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* inner highlight drift */
@keyframes semiTitleLiquidHighlight {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(4px, -3px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}


.sect-title {
    font-size: 30px;
    line-height: 42px;
    color: #1d1d1f;
    font-weight: 700;
    margin-bottom: 25px;
}

.paragraph-title {
    font-size: 16px;
    line-height: 28px;
    color: #1d1d1f;
    margin-bottom: 40px;
}

    .paragraph-title strong,
    .paragraph-title b {
        color: #083d59;
        font-weight: 700;
    }

/* ==============================================
   3. INTRO CONTENT SECTION
   ============================================== */
.intro-content {
    position: relative;
    padding: 60px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #ffffff 100%);
    overflow: hidden;
}

    .intro-content::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(108, 117, 125, 0.08) 0%, transparent 70%);
        border-radius: 50%;
        top: -150px;
        right: -100px;
        z-index: 0;
        animation: float-orb 10s ease-in-out infinite;
    }

    .intro-content > * {
        position: relative;
        z-index: 1;
    }

.core-wrapper2 {
    padding: 0;
}

/* ==============================================
   4. INTERACTIVE TRAINING SECTION
   ============================================== */
.interactive-training-section {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 50%, #f5f9ff 100%);
    overflow: hidden;
}

    .interactive-training-section::before {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(33, 150, 243, 0.12) 0%, transparent 70%);
        border-radius: 50%;
        top: -200px;
        right: -150px;
        z-index: 0;
        animation: float-orb 8s ease-in-out infinite;
    }

    .interactive-training-section::after {
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(8, 61, 89, 0.1) 0%, transparent 70%);
        border-radius: 50%;
        bottom: -100px;
        left: -100px;
        z-index: 0;
        animation: float-orb 10s ease-in-out infinite reverse;
    }

    .interactive-training-section > * {
        position: relative;
        z-index: 1;
    }

    .interactive-training-section .row {
        position: relative;
        z-index: 1;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 100%);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        border-radius: 30px;
        padding: 60px 40px;
        border: 1px solid rgba(255, 255, 255, 0.6);
        box-shadow: 0 20px 60px rgba(31, 38, 135, 0.15), 0 10px 30px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(226, 185, 35, 0.1);
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

        .interactive-training-section .row::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(226, 185, 35, 0.05) 0%, transparent 50%, rgba(8, 61, 89, 0.05) 100%);
            border-radius: 30px;
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
            z-index: -1;
        }

        .interactive-training-section .row:hover {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.6) 100%);
            box-shadow: 0 30px 80px rgba(31, 38, 135, 0.2), 0 15px 40px rgba(226, 185, 35, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(226, 185, 35, 0.2);
            transform: translateY(-5px);
        }

            .interactive-training-section .row:hover::before {
                opacity: 1;
            }

    /* Section-specific title overrides */
    .interactive-training-section .section-title {
        margin: 0;
    }

    .interactive-training-section .semi-title {
        letter-spacing: 1px;
        display: inline-block;
        position: relative;
    }

        .interactive-training-section .semi-title::after {
            content: "";
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 40px;
            height: 2px;
            background: linear-gradient(90deg, #e2b923, transparent);
        }

    .interactive-training-section .sect-title {
        font-size: 32px;
        line-height: 1.3;
        color: #083d59;
        margin: 20px 0;
        background: linear-gradient(135deg, #083d59, #0d5a84);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

        .interactive-training-section .sect-title.uppercase {
            text-transform: uppercase;
        }

    .interactive-training-section .paragraph-title {
        margin-bottom: 20px;
    }

        .interactive-training-section .paragraph-title:last-of-type {
            margin-bottom: 30px;
        }

.training-content {
    position: relative;
    z-index: 2;
}

.training-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 30px;
}

/* Section-specific button styles */
.interactive-training-section .preview-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

    .interactive-training-section .preview-more::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.6s ease;
    }

    .interactive-training-section .preview-more:hover {
        background: linear-gradient(135deg, #f5c842, #e2b923);
        box-shadow: 0 6px 25px rgba(226, 185, 35, 0.5);
        transform: translateY(-3px) scale(1.02);
    }

        .interactive-training-section .preview-more:hover::before {
            left: 100%;
        }

    .interactive-training-section .preview-more.gbtn {
        background: linear-gradient(135deg, #083d59, #0d5a84);
        box-shadow: 0 4px 15px rgba(8, 61, 89, 0.3);
    }

        .interactive-training-section .preview-more.gbtn:hover {
            background: linear-gradient(135deg, #0d5a84, #083d59);
            box-shadow: 0 6px 25px rgba(8, 61, 89, 0.5);
        }

.training-image {
    position: relative;
    z-index: 2;
}

    .training-image img {
        width: 100%;
        height: auto;
    }

/* ==============================================
   5. SMART SAFETY SHOWCASE
   ============================================== */
.smart-safety-showcase {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}

    .smart-safety-showcase::before {
        content: "";
        position: absolute;
        width: 800px;
        height: 800px;
        background: radial-gradient(circle, rgba(255, 193, 7, 0.15) 0%, transparent 70%);
        border-radius: 50%;
        top: -300px;
        right: -200px;
        z-index: 0;
        animation: float-orb 12s ease-in-out infinite;
    }

    .smart-safety-showcase::after {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(226, 185, 35, 0.1) 0%, transparent 70%);
        border-radius: 50%;
        bottom: -200px;
        left: -150px;
        z-index: 0;
        animation: float-orb 15s ease-in-out infinite reverse;
    }

    .smart-safety-showcase > * {
        position: relative;
        z-index: 1;
    }

/* Liquid Glass Hero */
.liquid-glass-hero {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.5) 100%);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 35px;
    padding: 60px;
    margin-bottom: 50px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 25px 70px rgba(31, 38, 135, 0.12), 0 12px 35px rgba(0, 0, 0, 0.04), inset 0 2px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(226, 185, 35, 0.08);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

    .liquid-glass-hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(226, 185, 35, 0.03) 0%, transparent 50%, rgba(8, 61, 89, 0.03) 100%);
        border-radius: 35px;
        opacity: 0;
        transition: opacity 0.5s ease;
        pointer-events: none;
    }

    .liquid-glass-hero:hover {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.65) 100%);
        box-shadow: 0 35px 90px rgba(31, 38, 135, 0.18), 0 18px 50px rgba(226, 185, 35, 0.08), inset 0 2px 0 rgba(255, 255, 255, 1), inset 0 -2px 0 rgba(226, 185, 35, 0.12);
        transform: translateY(-8px);
    }

        .liquid-glass-hero:hover::before {
            opacity: 1;
        }

.hero-content {
    position: relative;
    z-index: 2;
}

    .hero-content .section-title h6.semi-title {
        color: #b8b8b8;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 15px;
        display: inline-block;
        position: relative;
        padding-bottom: 8px;
    }

        .hero-content .section-title h6.semi-title::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: linear-gradient(90deg, #e2b923, transparent);
            border-radius: 2px;
        }

    .hero-content .section-title h2 {
        font-size: 34px;
        line-height: 1.3;
        color: #083d59;
        font-weight: 700;
        margin-bottom: 20px;
        background: linear-gradient(135deg, #083d59, #0d5a84);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hero-content .section-title p {
        font-size: 16px;
        line-height: 28px;
        color: #1d1d1f;
        margin-bottom: 30px;
    }

.hero-image {
    position: relative;
    z-index: 2;
}

    .hero-image img {
        width: 100%;
        height: auto;
    }

/* ========================================
   STK TABS - UNIQUE SAFETY TRAINING KIOSK CLASSES
   Safety Training Kiosk Tab Section
   ======================================== */

/* Main Wrapper */
.stk-tabs-wrapper {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.45) 100%);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 35px;
    padding: 50px 40px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 20px 60px rgba(31, 38, 135, 0.1), 0 10px 30px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Navigation Tabs Container */
.stk-nav-tabs {
    border: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

    .stk-nav-tabs .nav-item {
        margin: 0;
    }

/* Tab Buttons */
.stk-tab-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(226, 185, 35, 0.15);
    border-radius: 15px;
    padding: 16px 28px;
    color: #083d59;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(31, 38, 135, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: block;
}

    /* Shimmer Effect */
    .stk-tab-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(226, 185, 35, 0.1), transparent);
        transition: left 0.6s ease;
    }

    /* Active and Hover States */
    .stk-tab-btn.active,
    .stk-tab-btn:hover {
        background: linear-gradient(135deg, #e2b923, #f5c842);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 8px 25px rgba(226, 185, 35, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        transform: translateY(-3px);
    }

        .stk-tab-btn:hover::before {
            left: 100%;
        }

/* Tab Content Container */
.stk-tab-content {
    position: relative;
    z-index: 2;
}

/* ========================================
   INDUSTRY GRID
   ======================================== */

.stk-industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

/* Industry Item */
.stk-industry-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.75));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px rgba(31, 38, 135, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    position: relative;
    overflow: hidden;
}

    /* Radial Glow Effect */
    .stk-industry-item::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(226, 185, 35, 0.1) 0%, transparent 70%);
        opacity: 0;
        transition: all 0.6s ease;
    }

    .stk-industry-item:hover {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
        border-color: rgba(226, 185, 35, 0.3);
        box-shadow: 0 15px 45px rgba(31, 38, 135, 0.15), 0 8px 20px rgba(226, 185, 35, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1);
        transform: translateY(-8px) scale(1.02);
    }

        .stk-industry-item:hover::before {
            opacity: 1;
            transform: rotate(45deg);
        }

    .stk-industry-item img {
        max-width: 70px;
        height: auto;
        margin-bottom: 20px;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
        transition: all 0.3s ease;
    }

    .stk-industry-item:hover img {
        filter: drop-shadow(0 6px 12px rgba(226, 185, 35, 0.3));
        transform: scale(1.1);
    }

    .stk-industry-item h5 {
        font-size: 15px;
        color: #083d59;
        font-weight: 600;
        margin: 0;
        line-height: 1.4;
        transition: color 0.3s ease;
    }

    .stk-industry-item:hover h5 {
        color: #e2b923;
    }

/* ========================================
   TECH SPECS GRID
   ======================================== */

.stk-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 30px;
}

.stk-specs-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Spec Box */
.stk-spec-box {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.7));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 30px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px rgba(31, 38, 135, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

    .stk-spec-box:hover {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
        border-color: rgba(226, 185, 35, 0.3);
        box-shadow: 0 15px 40px rgba(31, 38, 135, 0.12), 0 8px 20px rgba(226, 185, 35, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
        transform: translateY(-5px);
    }

    .stk-spec-box h3 {
        color: #083d59;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: linear-gradient(135deg, #083d59, #0d5a84);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

        .stk-spec-box h3 i {
            color: #e2b923;
            background: none;
            -webkit-text-fill-color: initial;
        }

    .stk-spec-box h4 {
        color: #083d59;
        font-size: 16px;
        font-weight: 600;
        margin: 20px 0 12px 0;
    }

    .stk-spec-box ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .stk-spec-box ul li {
            padding: 10px 0 10px 28px;
            position: relative;
            color: #1d1d1f;
            line-height: 1.6;
            transition: all 0.3s ease;
        }

            .stk-spec-box ul li::before {
                content: '✓';
                position: absolute;
                left: 0;
                top: 10px;
                color: #e2b923;
                font-size: 16px;
                font-weight: bold;
            }

            .stk-spec-box ul li:hover {
                color: #083d59;
                padding-left: 33px;
            }

/* Spec Line */
.stk-spec-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(226, 185, 35, 0.3), transparent);
    margin: 20px 0;
}

/* ========================================
   ACTION BUTTONS
   ======================================== */

.stk-action-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.stk-action-btn {
    background: linear-gradient(135deg, rgba(226, 185, 35, 0.15), rgba(245, 200, 66, 0.1));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 185, 35, 0.3);
    border-radius: 18px;
    padding: 30px 20px;
    text-align: center;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(226, 185, 35, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

    .stk-action-btn:hover {
        background: linear-gradient(135deg, #e2b923, #f5c842);
        border-color: transparent;
        box-shadow: 0 12px 35px rgba(226, 185, 35, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
        transform: translateY(-8px) scale(1.05);
    }

    .stk-action-btn i {
        font-size: 40px;
        color: #e2b923;
        transition: all 0.3s ease;
    }

    .stk-action-btn:hover i {
        color: #fff;
        transform: scale(1.15);
    }

    .stk-action-btn span {
        color: #083d59;
        font-size: 14px;
        font-weight: 600;
        transition: color 0.3s ease;
    }

    .stk-action-btn:hover span {
        color: #fff;
    }

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet - 992px and below */
@media (max-width: 991px) {
    .stk-tabs-wrapper {
        padding: 40px 30px;
        border-radius: 25px;
    }

    .stk-specs-grid {
        grid-template-columns: 1fr;
    }

    .stk-industry-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .stk-action-btns {
        grid-template-columns: 1fr;
    }
}

/* Mobile - 767px and below */
@media (max-width: 767px) {
    .stk-tabs-wrapper {
        padding: 30px 20px;
        border-radius: 20px;
    }

    .stk-nav-tabs {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .stk-tab-btn {
        flex: 0 1 auto;
        padding: 14px 20px;
        font-size: 12px;
    }

    .stk-industry-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }

    .stk-spec-box {
        padding: 25px 20px;
    }
}

/* Extra Small - 480px and below */
@media (max-width: 480px) {
    .stk-tabs-wrapper {
        padding: 25px 15px;
    }

    .stk-industry-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}


.tab-content {
    position: relative;
    z-index: 2;
}

/* Industry Grid */
.industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
   .ig-w {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    }
    .industry-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.75));
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 20px;
        padding: 30px 20px;
        text-align: center;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 8px 25px rgba(31, 38, 135, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        position: relative;
        overflow: hidden;
    }

    .industry-card::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(226, 185, 35, 0.1) 0%, transparent 70%);
        opacity: 0;
        transition: all 0.6s ease;
    }

    .industry-card:hover {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
        border-color: rgba(226, 185, 35, 0.3);
        box-shadow: 0 15px 45px rgba(31, 38, 135, 0.15), 0 8px 20px rgba(226, 185, 35, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1);
        transform: translateY(-8px) scale(1.02);
    }

        .industry-card:hover::before {
            opacity: 1;
            transform: rotate(45deg);
        }

    .industry-card img {
        max-width: 70px;
        height: auto;
        margin-bottom: 20px;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
        transition: all 0.3s ease;
    }

    .industry-card:hover img {
        filter: drop-shadow(0 6px 12px rgba(226, 185, 35, 0.3));
        transform: scale(1.1);
    }

    .industry-card h5 {
        font-size: 15px;
        color: #083d59;
        font-weight: 600;
        margin: 0;
        line-height: 1.4;
        transition: color 0.3s ease;
    }

    .industry-card:hover h5 {
        color: #e2b923;
    }
.industry-last-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
}
/* Tech Specs Grid */
.tech-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 30px;
}

.specs-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.spec-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.7));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 30px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px rgba(31, 38, 135, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

    .spec-card:hover {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
        border-color: rgba(226, 185, 35, 0.3);
        box-shadow: 0 15px 40px rgba(31, 38, 135, 0.12), 0 8px 20px rgba(226, 185, 35, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
        transform: translateY(-5px);
    }

    .spec-card h3 {
        color: #083d59;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: linear-gradient(135deg, #083d59, #0d5a84);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

        .spec-card h3 i {
            color: #e2b923;
            background: none;
            -webkit-text-fill-color: initial;
        }

    .spec-card h4 {
        color: #083d59;
        font-size: 16px;
        font-weight: 600;
        margin: 20px 0 12px 0;
    }

    .spec-card ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .spec-card ul li {
            padding: 10px 0 10px 28px;
            position: relative;
            color: #1d1d1f;
            line-height: 1.6;
            transition: all 0.3s ease;
        }

            .spec-card ul li::before {
                content: "✓";
                position: absolute;
                left: 0;
                top: 10px;
                color: #e2b923;
                font-size: 16px;
                font-weight: bold;
            }

            .spec-card ul li:hover {
                color: #083d59;
                padding-left: 33px;
            }

.spec-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(226, 185, 35, 0.3), transparent);
    margin: 20px 0;
}

/* Action Cards */
.action-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.action-card {
    background: linear-gradient(135deg, rgba(226, 185, 35, 0.15), rgba(245, 200, 66, 0.1));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 185, 35, 0.3);
    border-radius: 18px;
    padding: 30px 20px;
    text-align: center;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(226, 185, 35, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

    .action-card:hover {
        background: linear-gradient(135deg, #e2b923, #f5c842);
        border-color: transparent;
        box-shadow: 0 12px 35px rgba(226, 185, 35, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
        transform: translateY(-8px) scale(1.05);
    }

    .action-card i {
        font-size: 40px;
        color: #e2b923;
        transition: all 0.3s ease;
    }

    .action-card:hover i {
        color: #fff;
        transform: scale(1.15);
    }

    .action-card span {
        color: #083d59;
        font-size: 14px;
        font-weight: 600;
        transition: color 0.3s ease;
    }

    .action-card:hover span {
        color: #fff;
    }

/* ==============================================
   6. ACTION BUTTONS - RESPONSIVE FIX
   ============================================== */

/* Desktop & Tablet: Side by side */
.action-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

    /* Global button styles */
    .action-buttons .preview-more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 16px 32px;
        background: linear-gradient(135deg, #e2b923, #f5c842);
        color: #fff;
        font-weight: 700;
        font-size: 14px;
        border-radius: 50px;
        text-decoration: none;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border: 2px solid transparent;
        box-shadow: 0 4px 15px rgba(226, 185, 35, 0.3);
        position: relative;
        overflow: hidden;
        white-space: nowrap;
    }

        .action-buttons .preview-more::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.6s ease;
        }

        .action-buttons .preview-more:hover {
            background: linear-gradient(135deg, #f5c842, #e2b923);
            box-shadow: 0 6px 25px rgba(226, 185, 35, 0.5);
            transform: translateY(-3px) scale(1.02);
        }

            .action-buttons .preview-more:hover::before {
                left: 100%;
            }

        /* Secondary button style */
        .action-buttons .preview-more.gbtn {
            background: linear-gradient(135deg, #083d59, #0d5a84);
            box-shadow: 0 4px 15px rgba(8, 61, 89, 0.3);
        }

            .action-buttons .preview-more.gbtn:hover {
                color: #e2b923;
                background: linear-gradient(135deg, #0d5a84, #083d59);
                box-shadow: 0 6px 25px rgba(8, 61, 89, 0.5);
            }

/* ==============================================
   7. KIOSK CONTENT SECTION
   ============================================== */
.kiosk-content-section {
    position: relative;
    padding: 60px 0;
    background: #fff;
    background-attachment: fixed;
    overflow: hidden;
}

    .kiosk-content-section::before {
        content: "";
        position: absolute;
        width: 550px;
        height: 550px;
        background: radial-gradient(circle, rgba(0, 188, 212, 0.12) 0%, transparent 70%);
        border-radius: 50%;
        top: -180px;
        left: -120px;
        z-index: 0;
        animation: float-orb 11s ease-in-out infinite;
    }

    .kiosk-content-section > * {
        position: relative;
        z-index: 1;
    }

    .kiosk-content-section h3.teams-title {
        color: #083d59;
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 40px 0 20px 0;
    }

    .kiosk-content-section h4 {
        color: #083d59;
        font-size: 22px;
        font-weight: 700;
        margin: 0px 0 10px 0;
    }

    .kiosk-content-section h5 {
        color: #083d59;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.4;
        margin: 0 0 15px 0;
    }

    .kiosk-content-section h6 {
        color: #1d1d1f;
        font-size: 16px;
        font-weight: 500;
        line-height: 30px;
        margin: 20px 0 30px 0;
    }

    .kiosk-content-section p {
        color: #1d1d1f;
        font-size: 16px;
        line-height: 28px;
        margin-bottom: 20px;
    }

        .kiosk-content-section p:last-child {
            margin-bottom: 0;
        }

    .kiosk-content-section .kiosk-image {
        margin: 30px 0;
    }

    .kiosk-content-section .img-fluid {
        max-width: 100%;
        height: auto;
        border-radius: 30px;
        padding: 15px;
        background: #fff;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    }

    .kiosk-content-section .img-fluid1 {
        max-width: 100%;
        height: auto;
    }

    .kiosk-content-section hr {
        border: 0;
        border-top: 2px solid rgba(226, 185, 35, 0.3);
        margin: 40px 0;
    }

    /* Widget override for kiosk section */
    .kiosk-content-section .widget {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        margin-bottom: 30px;
    }

        .kiosk-content-section .widget:hover {
            background: rgba(255, 255, 255, 0.95);
        }

/* ==============================================
   8. FEATURE LIST
   ============================================== */
.feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 30px 0 20px 0;
    list-style: none;
    padding: 0;
}

    .feature-list li:first-child,
    .feature-list li:nth-child(3) {
        margin-top: -20px;
    }

/* ==============================================
   9. LIQUID GLASS SINGLE-FEATURE2
   ============================================== */
.single-feature2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(238, 242, 255, 0.85) 0%, rgba(255, 255, 255, 0.75) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 25px 35px 27px 30px;
    position: relative;
    z-index: 1;
    border-radius: 16px;
    border: 1px solid rgba(226, 185, 35, 0.15);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12), 0 2px 10px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

    .single-feature2::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(226, 185, 35, 0.1), rgba(238, 242, 255, 0.3) 50%, transparent);
        opacity: 0;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: -1;
        border-radius: 16px;
    }

    .single-feature2::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 3px;
        background: linear-gradient(90deg, #e2b923, #f5c842, #e2b923);
        box-shadow: 0 2px 8px rgba(226, 185, 35, 0.5);
        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 0 0 16px 16px;
        z-index: 2;
    }

    .single-feature2 h2 {
        font-size: 40px;
        font-weight: 800;
        margin: 0;
        margin-right: 20px;
        background: linear-gradient(135deg, rgba(196, 205, 210, 0.7), rgba(196, 205, 210, 0.5));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .single-feature2 h6 {
        color: #083d59;
        margin: 0;
        line-height: 1.4;
        max-width: 180px;
        text-align: right;
        transition: all 0.3s ease;
    }

    .single-feature2:hover {
        background: linear-gradient(135deg, rgba(238, 242, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
        border-color: rgba(226, 185, 35, 0.3);
        box-shadow: 0 15px 50px 0 rgba(31, 38, 135, 0.2), 0 5px 20px rgba(226, 185, 35, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        transform: translateY(-5px) scale(1.02);
    }

        .single-feature2:hover::before {
            opacity: 1;
        }

        .single-feature2:hover::after {
            width: 100%;
        }

        .single-feature2:hover h2 {
            background: linear-gradient(135deg, #e2b923, #f5c842);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            transform: scale(1.05);
        }

        .single-feature2:hover h6 {
            color: #e2b923;
            transform: translateX(5px);
        }

/* ==============================================
   10. WIDGET STYLES (Single Definition)
   ============================================== */
.widget {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.75));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 185, 35, 0.15);
    border-radius: 20px;
    padding: 35px 30px;
    margin-bottom: 40px;
    box-shadow: 0 10px 40px rgba(31, 38, 135, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .widget::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(226, 185, 35, 0.15), transparent);
        transition: left 0.6s ease;
        z-index: -1;
    }

    .widget:hover {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
        box-shadow: 0 15px 50px rgba(31, 38, 135, 0.15), 0 8px 25px rgba(226, 185, 35, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1);
        transform: translateY(-5px);
    }

        .widget:hover::before {
            left: 100%;
        }

.widget-title-box {
    position: relative;
    z-index: 1;
    margin-bottom: 25px;
    padding-bottom: 15px;
}

    .widget-title-box::after {
        content: "";
        position: absolute;
        background: linear-gradient(90deg, #e2b923, #f5c842, #e2b923);
        width: 60px;
        height: 3px;
        left: 0;
        bottom: 0;
        z-index: 2;
        border-radius: 2px;
        box-shadow: 0 2px 8px rgba(226, 185, 35, 0.4);
        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

.widget:hover .widget-title-box::after {
    width: 100%;
}

.widget-sub-title2 {
    font-size: 18px;
    color: #083d59;
    font-weight: 700;
    margin-bottom: 0;
    text-transform: uppercase;
}

.widget a,
.widget a:hover,
.widget ul li a,
.widget ul li a:hover {
    text-decoration: none !important;
    border-bottom: none !important;
}

.widget-categories-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .widget-categories-list ul li {
        margin-bottom: 10px;
    }

        .widget-categories-list ul li a {
            background: linear-gradient(135deg, rgba(248, 248, 248, 0.8), rgba(255, 255, 255, 0.9));
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 20px;
            font-size: 16px;
            font-weight: 600;
            color: #083d59;
            position: relative;
            border-radius: 12px;
            border: 1px solid rgba(226, 185, 35, 0.1);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
            text-decoration: none !important;
        }

            .widget-categories-list ul li a::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 3px;
                height: 100%;
                background: linear-gradient(180deg, #e2b923, #f5c842);
                transform: scaleY(0);
                transform-origin: bottom;
                transition: transform 0.4s ease;
            }

            .widget-categories-list ul li a span {
                font-size: 14px;
                font-weight: 700;
                background: linear-gradient(135deg, #efefef, #f8f8f8);
                color: #083d59;
                padding: 8px 16px;
                border-radius: 8px;
                min-width: 40px;
                text-align: center;
                transition: all 0.3s ease;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            }

            .widget-categories-list ul li a:hover {
                background: linear-gradient(135deg, rgba(226, 185, 35, 0.15), rgba(245, 200, 66, 0.1));
                border-color: rgba(226, 185, 35, 0.3);
                box-shadow: 0 4px 12px rgba(226, 185, 35, 0.2);
                transform: translateX(8px);
                padding-left: 28px;
            }

                .widget-categories-list ul li a:hover::before {
                    transform: scaleY(1);
                }

                .widget-categories-list ul li a:hover span {
                    background: linear-gradient(135deg, #e2b923, #f5c842);
                    color: #fff;
                    box-shadow: 0 4px 8px rgba(226, 185, 35, 0.3);
                    transform: scale(1.05);
                }

            /* Active/Current page state */
            .widget-categories-list ul li a.active {
                background: linear-gradient(135deg, rgba(226, 185, 35, 0.2), rgba(245, 200, 66, 0.15));
                border-color: rgba(226, 185, 35, 0.4);
                box-shadow: 0 4px 12px rgba(226, 185, 35, 0.25);
                color: #083d59;
                font-weight: 700;
                padding-left: 28px;
            }

                .widget-categories-list ul li a.active::before {
                    transform: scaleY(1);
                }

                .widget-categories-list ul li a.active span {
                    background: linear-gradient(135deg, #e2b923, #f5c842);
                    color: #fff;
                    box-shadow: 0 4px 8px rgba(226, 185, 35, 0.3);
                }

            /* Click effect */
            .widget-categories-list ul li a:active {
                transform: translateX(8px) scale(0.98);
            }

/* ==============================================
   11. BUTTONS & CTAs (Global Definition)
   ============================================== */
.preview-more {
    display: inline-block;
    padding: 15px 35px;
    background: #e2b923;
    color: #1d1d1f;
    font-weight: 700;
    font-size: 14px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid #e2b923;
}

    .preview-more:hover {
        background: #083d59;
        color: #fff;
        border-color: #083d59;
    }

    .preview-more.gbtn {
        background: #083d59;
        color: #fff;
        border-color: #083d59;
    }

        .preview-more.gbtn:hover {
            color: #e2b923;
            border-color: #e2b923;
        }

/* ==============================================
   12. FAQ & BLOG SECTION - WITH FIXED ACCORDION & HEIGHT MATCHING
   ============================================== */
.faq-blog-section {
    position: relative;
    padding: 60px 0;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 50%, #fafafa 100%);
    overflow: hidden;
}


    .faq-blog-section::before {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(156, 39, 176, 0.1) 0%, transparent 70%);
        border-radius: 50%;
        top: -200px;
        right: -150px;
        z-index: 0;
        animation: float-orb 9s ease-in-out infinite;
    }

    .faq-blog-section::after {
        content: "";
        position: absolute;
        width: 450px;
        height: 450px;
        background: radial-gradient(circle, rgba(186, 104, 200, 0.08) 0%, transparent 70%);
        border-radius: 50%;
        bottom: -150px;
        left: -120px;
        z-index: 0;
        animation: float-orb 11s ease-in-out infinite reverse;
    }

    .faq-blog-section > * {
        position: relative;
        z-index: 1;
    }

    /* Make both cards equal height */
    .faq-blog-section .row {
        display: flex;
        flex-wrap: wrap;
    }

        .faq-blog-section .row > [class*='col-'] {
            display: flex;
            flex-direction: column;
        }

/* Both cards stretch to fill their container */
.liquid-glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.7));
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 25px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 20px 60px rgba(31, 38, 135, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    height: 100%; /* Fill parent height */
}

    .liquid-glass-card:hover {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
        box-shadow: 0 25px 70px rgba(31, 38, 135, 0.18), inset 0 1px 0 rgba(255, 255, 255, 1);
        transform: translateY(-5px);
    }

    .liquid-glass-card .card-header {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 2px solid rgba(226, 185, 35, 0.2);
    }

        .liquid-glass-card .card-header i {
            font-size: 28px;
            color: #e2b923;
        }

        .liquid-glass-card .card-header h4 {
            font-size: 22px;
            font-weight: 700;
            color: #083d59;
            margin: 0;
        }

.faq-main-title {
    font-size: 18px;
    line-height: 1.4;
    color: #083d59;
    font-weight: 700;
    margin-bottom: 20px;
}

/* FAQ card specific */
.liquid-glass-card.faq-card {
    height: 100%;
}

/* Blog card specific */
.liquid-glass-card.blog-card {
    height: 100%;
}

/* Make blog container fill remaining space - NO TOP GAP */
.liquid-glass-card .blog-container {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    flex: 1; /* Grow to fill available space */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Changed from center to flex-start */
}

/* Ensure first blog post has no top padding */
.blog-post-item:first-child {
    padding-top: 0;
}

.marquee {
    height: 320px; /* visible area */
    overflow: hidden;
    position: relative;
    width: 100%;
}

#posts {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    animation: scrollUp 35s linear infinite; /* faster */
}

/* Pause on hover */
.marquee:hover #posts {
    animation-play-state: paused;
}

.posts-set {
    display: flex;
    flex-direction: column;
}

@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

/* Optional spacing */
.blog-post-item {
    cursor: pointer;
}

    .blog-post-item:hover {
        background: #f8f9fa;
    }

/* BLOG POST ITEMS - WITH LIGHT BORDER */
.blog-post-item {
    padding: 20px 0;
    border-bottom: 1px solid rgba(226, 185, 35, 0.2);
    transition: all 0.3s ease;
}

    .blog-post-item:last-child {
        border-bottom: none;
    }

    .blog-post-item:hover {
        background: rgba(226, 185, 35, 0.05);
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 12px;
    }

.blog-post-image {
    width: 100%;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(248, 248, 248, 0.8), rgba(255, 255, 255, 0.9));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

    .blog-post-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

.blog-post-item:hover .blog-post-image {
    box-shadow: 0 6px 18px rgba(226, 185, 35, 0.2);
}

    .blog-post-item:hover .blog-post-image img {
        transform: scale(1.1);
    }

.blog-post-content {
    padding-left: 10px;
}

.blog-post-title {
    font-size: 15px;
    font-weight: 700;
    color: #083d59;
    margin: 0 0 8px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
    /* Text wrapping properties */
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}


.blog-post-item:hover .blog-post-title {
    color: #e2b923;
}

.blog-post-meta {
    font-size: 12px;
    color: #b8b8b8;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .blog-post-meta i {
        font-size: 11px;
    }

.blog-post-excerpt {
    font-size: 13px;
    line-height: 1.6;
    color: #1d1d1f;
    margin: 0 0 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #e2b923;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .blog-read-more i {
        font-size: 11px;
        transition: transform 0.3s ease;
    }

    .blog-read-more:hover {
        color: #083d59;
        gap: 10px;
    }

        .blog-read-more:hover i {
            transform: translateX(4px);
        }

/* ACCORDION STYLES - FIXED ARROWS (No Duplicates) */
.liquid-glass-card .accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.liquid-glass-card .accordion-item {
    background: linear-gradient(135deg, rgba(248, 248, 248, 0.8), rgba(255, 255, 255, 0.9));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 185, 35, 0.15);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}

    .liquid-glass-card .accordion-item:hover {
        border-color: rgba(226, 185, 35, 0.3);
        box-shadow: 0 4px 15px rgba(226, 185, 35, 0.15);
    }

.liquid-glass-card .accordion-button {
    background: transparent;
    border: none;
    padding: 18px 40px 18px 20px;
    color: #083d59;
    font-size: 15px;
    line-height:20px;
    font-weight: 600;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    box-shadow: none !important;
}

    /* REMOVE BOOTSTRAP'S DEFAULT ARROW */
    .liquid-glass-card .accordion-button::after {
        display: none !important;
    }

    /* ADD CUSTOM ARROW WITH ::before */
    .liquid-glass-card .accordion-button::before {
        content: "\f078";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s ease;
        color: #e2b923;
        font-size: 14px;
    }

    .liquid-glass-card .accordion-button:not(.collapsed)::before {
        transform: translateY(-50%) rotate(180deg);
        color: #fff;
    }

    .liquid-glass-card .accordion-button:not(.collapsed) {
        background: linear-gradient(135deg, #e2b923, #f5c842);
        color: #fff;
        box-shadow: 0 4px 12px rgba(226, 185, 35, 0.3) !important;
    }

        .liquid-glass-card .accordion-button:not(.collapsed) .faq-number {
            color: #fff;
        }

    .liquid-glass-card .accordion-button .faq-number {
        font-size: 16px;
        font-weight: 700;
        color: #e2b923;
        min-width: 35px;
        flex-shrink: 0;
        transition: color 0.3s ease;
    }

    .liquid-glass-card .accordion-button:focus {
        outline: none;
        box-shadow: none !important;
    }

    .liquid-glass-card .accordion-button:focus-visible {
        box-shadow: none !important;
    }

.liquid-glass-card .accordion-collapse {
    transition: all 0.3s ease;
}

.liquid-glass-card .accordion-body {
    padding: 18px 20px 18px 15px;
    background: rgba(255, 255, 255, 0.5);
}

    .liquid-glass-card .accordion-body p {
        font-size: 14px;
        line-height: 1.7;
        color: #1d1d1f;
        margin: 0;
    }

/* ==============================================
   13. KIOSK NAVIGATION SECTION
   ============================================== */
.kiosk-navigation-section {
    position: relative;
    padding: 40px 0;
    background: transparent;
    overflow: hidden;
}

    .kiosk-navigation-section > * {
        position: relative;
        z-index: 1;
    }

.nav-link-wrapper {
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
}

    .nav-link-wrapper:hover {
        text-decoration: none;
    }

.nav-card {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.7));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 30px rgba(31, 38, 135, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    overflow: hidden;
}

    .nav-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(226, 185, 35, 0.1), transparent);
        transition: left 0.6s ease;
        z-index: 0;
    }

    .nav-card:hover {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
        border-color: rgba(226, 185, 35, 0.4);
        box-shadow: 0 12px 40px rgba(31, 38, 135, 0.15), 0 6px 20px rgba(226, 185, 35, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1);
        transform: translateY(-5px);
    }

        .nav-card:hover::before {
            left: 100%;
        }

.prev-card {
    justify-content: flex-start;
}

.next-card {
    justify-content: flex-end;
}

.nav-image {
    position: relative;
    z-index: 2;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid #dededf;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f8;
    padding: 8px;
    transition: all 0.4s ease;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

    .nav-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: all 0.4s ease;
    }

.nav-card:hover .nav-image {
    box-shadow: 0 6px 20px rgba(226, 185, 35, 0.2);
}

    .nav-card:hover .nav-image img {
        transform: scale(1.1);
    }

.nav-content {
    position: relative;
    z-index: 2;
    flex: 1;
}

.nav-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #b8b8b8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.nav-card:hover .nav-label {
    color: #e2b923;
}

.nav-title {
    font-size: 16px;
    font-weight: 700;
    color: #083d59;
    margin: 0;
    line-height: 1.3;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #083d59, #0d5a84);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-card:hover .nav-title {
    background: linear-gradient(135deg, #e2b923, #f5c842);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.center-nav-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

    .center-nav-icon a {
        display: block;
        text-decoration: none;
    }

.dots-wrapper {
    position: relative;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.75));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(226, 185, 35, 0.3);
    border-radius: 50%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 10px;
    box-shadow: 0 6px 20px rgba(31, 38, 135, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .dots-wrapper:hover {
        background: linear-gradient(135deg, #e2b923, #f5c842);
        border-color: transparent;
        box-shadow: 0 10px 30px rgba(226, 185, 35, 0.3);
        transform: scale(1.1) rotate(90deg);
    }

    .dots-wrapper .dot {
        width: 6px;
        height: 6px;
        background: #083d59;
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .dots-wrapper:hover .dot {
        background: #fff;
        animation: pulse-dot 0.6s ease infinite alternate;
    }

        .dots-wrapper:hover .dot:nth-child(1) {
            animation-delay: 0s;
        }

        .dots-wrapper:hover .dot:nth-child(2) {
            animation-delay: 0.1s;
        }

        .dots-wrapper:hover .dot:nth-child(3) {
            animation-delay: 0.2s;
        }

        .dots-wrapper:hover .dot:nth-child(4) {
            animation-delay: 0.3s;
        }

        .dots-wrapper:hover .dot:nth-child(5) {
            animation-delay: 0.4s;
        }

        .dots-wrapper:hover .dot:nth-child(6) {
            animation-delay: 0.5s;
        }

        .dots-wrapper:hover .dot:nth-child(7) {
            animation-delay: 0.6s;
        }

        .dots-wrapper:hover .dot:nth-child(8) {
            animation-delay: 0.7s;
        }

        .dots-wrapper:hover .dot:nth-child(9) {
            animation-delay: 0.8s;
        }

/* ==============================================
   14. BRAND AREA
   ============================================== */
.brand-bg-light {
    background-color: #d8d8e2;
    padding: 60px 0;
}

.brand-heading {
    color: #333;
    margin-bottom: 30px;
}

.brand-item {
    text-align: center;
}

    .brand-item img {
        max-width: 150px;
        height: auto;
        border: 2px solid rgba(226, 185, 35, 0.1);
        transition: all 0.3s ease;
    }

        .brand-item img:hover {
            border: 2px solid rgba(226, 185, 35, 0.3);
            transform: translateX(-5px);
        }

/* ==============================================
   15. KIOSK SHOWCASE SECTION
   ============================================== */
.kiosk-showcase-section {
    background-color: #e8e9ed;
    padding: 60px 0;
    margin-bottom: -38px;
}

.kiosk-main-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #1a3d5c;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kiosk-card-item {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 350px;
}

    .kiosk-card-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    }

    .kiosk-card-item img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

/* ==============================================
   16. UTILITY CLASSES
   ============================================== */
.w-100 {
    width: 100% !important;
}

.text-center {
    text-align: center;
}

.list-none {
    list-style: none;
}

.f-right {
    float: right;
}

.uppercase {
    text-transform: uppercase;
}

.team-img {
    margin-bottom: 30px;
}

    .team-img img {
        width: 100%;
        border-radius: 10px;
    }

/* ==============================================
   17. ANIMATIONS (Single Definition)
   ============================================== */
@keyframes float-bob-y {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes float-orb {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(30px, -30px) scale(1.1);
    }
}

@keyframes pulse-dot {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

/* ==============================================
   18. RESPONSIVE DESIGN (Consolidated)
   ============================================== */
@media (max-width: 991px) {
    .page-title-area {
        min-height: 280px !important;
    }

    .page-title-wrapper .page-title {
        font-size: 28px;
    }

    .sect-title {
        font-size: 26px;
        line-height: 36px;
    }

    .liquid-glass-hero,
    .liquid-glass-tabs {
        padding: 40px 30px;
        border-radius: 25px;
    }

    .tech-specs-grid {
        grid-template-columns: 1fr;
    }

    .feature-list {
        grid-template-columns: 1fr;
    }

    .action-cards {
        grid-template-columns: 1fr;
    }

    .industry-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .nav-card {
        margin-bottom: 15px;
    }

    .kiosk-main-title {
        font-size: 26px;
    }

    /* Tablet: Action buttons */
    .action-buttons {
        gap: 12px;
    }

        .action-buttons .preview-more {
            padding: 14px 28px;
            font-size: 13px;
        }
}

@media (max-width: 767px) {
    .page-title-area {
        min-height: 220px !important;
    }

        .page-title-area::after,
        .page-title-area .right-shape {
            display: none;
        }

    .page-title-wrapper .page-title {
        font-size: 22px;
    }

    ul.breadcrumb li,
    ul.breadcrumb li a {
        font-size: 13px;
    }

    .sect-title {
        font-size: 22px;
        line-height: 32px;
    }

    .paragraph-title {
        font-size: 15px;
        line-height: 26px;
    }

    .liquid-glass-hero,
    .liquid-glass-tabs {
        padding: 30px 20px;
        border-radius: 20px;
    }

        /* Mobile: Smart nav-tabs layout - side by side for short labels, full width for long */
        .liquid-glass-tabs .nav-tabs {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
        }

            .liquid-glass-tabs .nav-tabs .nav-link {
                flex: 0 1 auto;
                padding: 14px 20px;
                font-size: 12px;
            }

    .industry-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }

    .spec-card {
        padding: 25px 20px;
    }

    .training-actions,
    .action-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

        .interactive-training-section .preview-more,
        .action-buttons .preview-more {
            width: 100%;
            padding: 12px 16px;
            font-size: 12px;
            white-space: nowrap;
        }

    .feature-list {
        grid-template-columns: 1fr;
        gap: 15px;
    }

        .feature-list li:first-child,
        .feature-list li:nth-child(3) {
            margin-top: 0;
        }

    .kiosk-main-title {
        font-size: 22px;
    }

    .faq-main-title {
        font-size: 17px;
    }

    .liquid-glass-card .accordion-body {
        padding: 15px 20px 15px 15px;
    }

    .nav-card {
        padding: 16px;
        gap: 12px;
    }

    .nav-image {
        width: 55px;
        height: 55px;
    }

    .center-nav-icon {
        margin-bottom: 20px;
    }

    /* Mobile: Add spacing above blog card */
    .liquid-glass-card.blog-card {
        margin-top: 30px;
    }

    /* Mobile: Action buttons full width stacked */
    .action-buttons {
        display: flex;
        flex-direction: row;
        gap: 10px;
        width: 100%;
        flex-wrap: wrap;
    }

        .action-buttons .preview-more {
            flex: 1;
            min-width: 0;
            padding: 14px 16px;
            font-size: 13px;
            text-align: center;
        }


    /* Mobile: Blog posts */
    .blog-post-item .row {
        align-items: flex-start !important;
    }

    .blog-post-image {
        height: 70px;
    }

    .blog-post-content {
        padding-left: 5px;
    }

    .blog-post-title {
        font-size: 14px;
    }

    .blog-post-excerpt {
        font-size: 12px;
        -webkit-line-clamp: 1;
    }
}

@media (max-width: 480px) {
    .page-title-area {
        min-height: 200px !important;
    }

    .page-title-wrapper .page-title {
        font-size: 20px;
    }

    .sect-title {
        font-size: 20px;
        line-height: 30px;
    }

    .liquid-glass-hero,
    .liquid-glass-tabs {
        padding: 25px 15px;
    }

    .industry-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .kiosk-main-title {
        font-size: 20px;
    }

    .liquid-glass-card .accordion-button {
        padding: 15px 45px 15px 18px;
        font-size: 14px;
    }

        .liquid-glass-card .accordion-button .faq-number {
            font-size: 14px;
            min-width: 30px;
        }

    /* Reduce blog card margin on very small screens */
    .liquid-glass-card.blog-card {
        margin-top: 25px;
    }

    /* Very small mobile: Action buttons */
    .action-buttons {
        gap: 10px;
    }

        .action-buttons .preview-more {
            padding: 12px 20px;
            font-size: 13px;
        }

    /* Very small mobile: Blog posts */
    .blog-post-item {
        padding: 15px 0;
    }

    .blog-post-image {
        height: 60px;
    }

    .blog-post-title {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .blog-post-meta {
        font-size: 11px;
        margin-bottom: 8px;
    }

    .blog-post-excerpt {
        display: none;
    }
}

/* Focus states for accessibility */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #e2b923;
    outline-offset: 2px;
}
/* Text List Styles */
.text-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

    .text-list li {
        color: #1d1d1f;
        font-size: 16px;
        font-weight: 500;
        line-height: 31px;
        padding-left: 60px;
        margin-bottom: 20px;
        position: relative;
        z-index: 1;
    }

        .text-list li:last-child {
            margin-bottom: 0;
        }

        .text-list li::before {
            content: "\f00c";
            position: absolute;
            font-family: "Font Awesome 6 Free"; /* For FA6 */
            font-size: 16px;
            font-weight: 900; /* CRITICAL */
            color: #e2b923;
            left: 0;
            top: -2px;
            z-index: 1;
            width: 40px;
            height: 40px;
            line-height: 40px;
            background: #fff0e1;
            border-radius: 50%;
            text-align: center;
            display: inline-block;
            font-style: normal;
        }


        .text-list li:hover::before {
            background: #e2b923;
            color: #fff;
            transform: scale(1.1);
        }

/* White Text Variant */
.text-list1 li {
    color: #fff !important;
}

    .text-list1 li::before {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
    }

    .text-list1 li:hover::before {
        background: rgba(255, 255, 255, 0.25);
    }

/* ==============================================
   PRODUCT IMAGE GALLERY - FULLY RESPONSIVE
   ============================================== */

/* Main Card Container */
.card1 {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.75));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 185, 35, 0.15);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(31, 38, 135, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 0;
}

    .card1:hover {
        box-shadow: 0 15px 50px rgba(31, 38, 135, 0.15), 0 8px 25px rgba(226, 185, 35, 0.1);
        transform: translateY(-5px);
    }

.main-image {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    border-radius: 15px;
    transition: opacity 0.3s ease;
    display: block;
}

/* Thumbnail Gallery - Desktop */
.thumbnail-gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.thumbnail-item {
    position: relative;
    width: 100%;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.sub-image {
    width: 100%;
    height: auto;
    max-height: 90px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid rgba(226, 185, 35, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: block;
    background: #fff;
    padding: 8px;
}

    .sub-image:hover {
        border-color: #e2b923;
        transform: scale(1.05);
        box-shadow: 0 4px 15px rgba(226, 185, 35, 0.3);
    }

    .sub-image.active {
        border-color: #e2b923;
        border-width: 3px;
        box-shadow: 0 6px 20px rgba(226, 185, 35, 0.5);
        transform: scale(1.02);
    }

/* Utility classes */
.mb-20 {
    margin-bottom: 20px;
}

/* ==============================================
   RESPONSIVE BREAKPOINTS
   ============================================== */

/* Large Tablets and Small Desktops (992px - 1199px) */
@media (max-width: 1199px) {
    .card1 {
        padding: 15px;
    }

    .main-image {
        max-height: 450px;
    }

    .sub-image {
        max-height: 80px;
        padding: 6px;
    }
}

/* Tablets and Mobile - Thumbnails Below Main Image (768px and below) */
@media (max-width: 991px) {
    /* Change column order for mobile */
    .col-md-10.order-sm-1 {
        order: 1;
    }

    .col-md-2 {
        order: 2;
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        margin-top: 20px;
    }

    .card1 {
        margin-bottom: 0;
    }

    .main-image {
        max-height: 400px;
    }

    .thumbnail-gallery {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        padding-top: 0;
        margin-top: 0;
    }

    .thumbnail-item {
        width: calc(20% - 10px);
        min-width: 85px;
        flex-shrink: 0;
    }

    .sub-image {
        max-height: 100px;
        height: 100px;
        object-fit: cover;
    }
}

/* Mobile Landscape and Small Tablets (576px - 767px) */
@media (max-width: 767px) {
    .col-md-10.order-sm-1 {
        order: 1;
    }

    .col-md-2 {
        order: 2;
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        margin-top: 15px;
    }

    .card1 {
        padding: 12px;
        border-radius: 15px;
        margin-bottom: 0;
    }

    .main-image {
        max-height: 350px;
        border-radius: 12px;
    }

    .thumbnail-gallery {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .thumbnail-item {
        width: calc(20% - 8px);
        min-width: 70px;
    }

    .sub-image {
        max-height: 85px;
        height: 85px;
        padding: 5px;
        border-radius: 10px;
    }

    .mb-20 {
        margin-bottom: 20px;
    }
}

/* Mobile Portrait (up to 575px) */
@media (max-width: 575px) {
    .col-md-10.order-sm-1 {
        order: 1;
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .col-md-2 {
        order: 2;
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        margin-top: 15px;
    }

    .card1 {
        padding: 10px;
        border-radius: 12px;
        margin-bottom: 0;
    }

    .main-image {
        max-height: 300px;
        border-radius: 10px;
    }

    .thumbnail-gallery {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 8px;
    }

    .thumbnail-item {
        width: calc(20% - 6px);
        min-width: 58px;
        max-width: none;
    }

    .sub-image {
        max-height: 70px;
        height: 70px;
        padding: 4px;
        border-radius: 8px;
        border-width: 2px;
    }

        .sub-image.active {
            border-width: 2px;
        }

        .sub-image:hover {
            transform: scale(1.03);
        }

    .mb-20 {
        margin-bottom: 15px;
    }
}

/* Extra Small Mobile (up to 375px) */
@media (max-width: 375px) {
    .card1 {
        padding: 8px;
    }

    .main-image {
        max-height: 250px;
    }

    .thumbnail-gallery {
        gap: 6px;
    }

    .thumbnail-item {
        width: calc(20% - 5px);
        min-width: 54px;
    }

    .sub-image {
        max-height: 60px;
        height: 60px;
        padding: 3px;
    }

    .col-md-2 {
        margin-top: 12px;
    }
}

/* Very Small Screens - 3 columns layout */
@media (max-width: 320px) {
    .thumbnail-item {
        width: calc(33.333% - 4px);
        min-width: 50px;
    }

    .sub-image {
        max-height: 55px;
        height: 55px;
    }
}

/* Landscape Mode for Mobile Devices */
@media (max-height: 500px) and (orientation: landscape) {
    .main-image {
        max-height: 250px;
    }

    .thumbnail-gallery {
        gap: 6px;
    }

    .thumbnail-item {
        width: calc(20% - 5px);
        min-width: 55px;
    }

    .sub-image {
        max-height: 60px;
        height: 60px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .sub-image:hover {
        transform: none;
        box-shadow: none;
    }

    .sub-image:active {
        transform: scale(0.98);
        border-color: #e2b923;
    }

    .card1:hover {
        transform: none;
    }
}
/* ==============================================
   FOOD HARDWARE SECTION - HYBRID DESIGN
   ============================================== */

.food-hardware {
    padding: 0px 0px 80px;
    background-color: #f8f9fa;
    background-image: url(../img/bg/fluent_web_light.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



/* Title Section - ORIGINAL LIQUID GLASS STYLE */
.food-hard-title1 {
    position: relative;
    background: linear-gradient(135deg, rgba(226, 185, 35, 0.45), rgba(245, 200, 66, 0.35));
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    padding: 15px 30px;
    border-radius: 20px;
    color: #083d59;
    text-align: center;
    border: 1px solid rgba(226, 185, 35, 0.4);
    box-shadow: 0 15px 45px rgba(226, 185, 35, 0.25), 0 8px 20px rgba(31, 38, 135, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(226, 185, 35, 0.2);
    overflow: hidden;
    margin-top: -35px;
}

    .food-hard-title1::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(226, 185, 35, 0.1) 50%, transparent 100%);
        border-radius: 20px;
        pointer-events: none;
        z-index: 0;
    }

    .food-hard-title1 h2 {
        font-size: 28px;
        font-weight: 700;
        margin: 0;
        line-height: 1.4;
        background: linear-gradient(135deg, #083d59, #0d5a84);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        position: relative;
        z-index: 1;
    }

/* Introduction Box - Minimal Style */
.food-intro-box {
    text-align: center;
}

    .food-intro-box .lead-text {
        font-size: 28px;
        font-weight: 600;
        color: #083d59;
        margin-bottom: 25px;
        line-height: 1.6;
    }

    .food-intro-box p {
        font-size: 16px;
        line-height: 1.8;
        color: #5a5a5a;
        margin-bottom: 15px;
    }

        .food-intro-box p:last-child {
            margin-bottom: 0;
        }

/* Feature Cards - Simple Clean Design */
.feature-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    height: 100%;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

    .feature-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
        border-color: rgba(226, 185, 35, 0.3);
    }

/* Icon Circle - Simplified */
.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #083d59, #0d5a84);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: all 0.3s ease;
}

    .feature-icon i {
        font-size: 32px;
        color: #e2b923;
        font-style: normal;
    }

.feature-card:hover .feature-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, #e2b923, #f5c842);
}

    .feature-card:hover .feature-icon i {
        color: #083d59;
    }

/* Card Title */
.feature-card h4 {
    font-size: 22px;
    font-weight: 700;
    color: #083d59;
    margin: 0 0 15px;
}

/* Card Description */
.feature-card p {
    line-height: 1.7;
    color: #1d1d1f;
    margin: 0;
}

/* Utility Classes */
.mb-50 {
    margin-bottom: 50px;
}

/* ==============================================
   RESPONSIVE DESIGN
   ============================================== */

@media (max-width: 991px) {
    .food-hardware {
        padding: 60px 0;
    }

    .food-hard-title1 {
        padding: 18px 35px;
    }

        .food-hard-title1 h2 {
            font-size: 28px;
        }

    .food-intro-box .lead-text {
        font-size: 18px;
    }

    .feature-card {
        padding: 35px 25px;
    }
}

@media (max-width: 767px) {
    .food-hardware {
        padding: 50px 0;
    }

    .food-hard-title1 {
        padding: 15px 25px;
        border-radius: 15px;
    }

        .food-hard-title1 h2 {
            font-size: 22px;
        }

    .food-intro-box .lead-text {
        font-size: 18px;
    }

    .food-intro-box p {
        font-size: 15px;
    }

    .feature-card {
        padding: 30px 20px;
    }

    .feature-icon {
        width: 70px;
        height: 70px;
    }

        .feature-icon i {
            font-size: 28px;
        }

    .feature-card h4 {
        font-size: 20px;
    }

    .mb-50 {
        margin-bottom: 30px;
    }
}

@media (max-width: 575px) {
    .food-hard-title1 h2 {
        font-size: 19px;
    }

    .food-intro-box .lead-text {
        font-size: 17px;
    }

    .feature-card h4 {
        font-size: 19px;
    }

    .feature-card p {
        font-size: 14px;
    }
}
.btmp-9{padding-bottom:100px;}

/* Desktop - Default styles */
.foh-Customer {
    padding: 40px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

    /* Animated liquid background */
    .foh-Customer::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 10%, transparent 10%), radial-gradient(circle, rgba(255,255,255,0.1) 10%, transparent 10%);
        background-size: 80px 80px;
        background-position: 0 0, 40px 40px;
        animation: liquidMove 20s linear infinite;
        z-index: 1;
    }

@keyframes liquidMove {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(50px, 50px) rotate(360deg);
    }
}

.foh-Customer .container {
    position: relative;
    z-index: 2;
}

.foh-Customer .teams-title-1 {
    font-size: 42px;
    margin-bottom: 60px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
    letter-spacing: -0.5px;
}

/* Glass card containers */
.foh-Customer .col-lg-3 {
    margin-bottom: 30px;
}

    .foh-Customer .col-lg-3 > div {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        padding: 40px 20px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: relative;
        overflow: hidden;
    }

        /* Circular Badge with Glow - Applied to All Cards */
        .foh-Customer .col-lg-3 > div .circle-wrapper {
            width: 120px;
            height: 120px;
            margin: 0 auto 20px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.25);
            border: 3px solid rgba(255, 255, 255, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
        }

            .foh-Customer .col-lg-3 > div .circle-wrapper::before {
                content: '';
                position: absolute;
                width: 140px;
                height: 140px;
                border-radius: 50%;
                border: 2px solid rgba(255, 255, 255, 0.2);
                animation: pulse1 3s ease-in-out infinite;
            }

    /* Different animation delays for each card */
    .foh-Customer .col-lg-3:nth-child(1) > div .circle-wrapper::before {
        animation-delay: 0s;
    }

    .foh-Customer .col-lg-3:nth-child(2) > div .circle-wrapper::before {
        animation-delay: 0.5s;
    }

    .foh-Customer .col-lg-3:nth-child(3) > div .circle-wrapper::before {
        animation-delay: 1s;
    }

    .foh-Customer .col-lg-3:nth-child(4) > div .circle-wrapper::before {
        animation-delay: 1.5s;
    }

@keyframes pulse1 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0;
    }
}

/* Glass shimmer effect */
.foh-Customer .col-lg-3 > div::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.foh-Customer .col-lg-3:hover > div::before {
    left: 100%;
}

.foh-Customer .col-lg-3:hover > div {
    transform: translateY(-15px) scale(1.05);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

.foh-Customer h4 {
    font-size: 35px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
}

.foh-Customer h5 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    margin-top: 10px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
}

.foh-Customer p {
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    padding: 0 15px;
    position: relative;
    z-index: 2;
    text-align:center;
}

/* Tablet - Medium devices (max-width: 991px) */
@media (max-width: 991px) {
    .foh-Customer {
        padding: 70px 0;
    }

        .foh-Customer .teams-title-1 {
            font-size: 36px;
            margin-bottom: 50px;
        }

        .foh-Customer .col-lg-3 > div .circle-wrapper {
            width: 100px;
            height: 100px;
        }

            .foh-Customer .col-lg-3 > div .circle-wrapper::before {
                width: 120px;
                height: 120px;
            }

        .foh-Customer h4 {
            font-size: 48px;
        }

        .foh-Customer h5 {
            font-size: 20px;
        }

        .foh-Customer .col-lg-3 > div {
            padding: 35px 20px;
        }

        .foh-Customer .col-md-6 {
            margin-bottom: 30px;
        }
}

/* Mobile - Small devices (max-width: 767px) */
@media (max-width: 767px) {
    .foh-Customer {
        padding: 50px 0;
    }

        .foh-Customer .teams-title-1 {
            font-size: 21px;
            margin-bottom: 40px;
            padding: 0 15px;
        }

        .foh-Customer .col-lg-3 > div .circle-wrapper {
            width: 90px;
            height: 90px;
        }

            .foh-Customer .col-lg-3 > div .circle-wrapper::before {
                width: 110px;
                height: 110px;
            }

        .foh-Customer .col-lg-3 > div {
            padding: 30px 15px;
            border-radius: 15px;
        }

        .foh-Customer h4 {
            font-size: 27px;
        }

        .foh-Customer h5 {
            font-size: 18px;
        }

        .foh-Customer p {
            padding: 0 10px;
        }
}

/* Extra small devices (max-width: 575px) */
@media (max-width: 575px) {
    .foh-Customer {
        padding: 40px 0;
    }

        .foh-Customer .teams-title-1 {
            font-size: 24px;
            line-height: 1.3;
        }

        .foh-Customer .col-lg-3 > div .circle-wrapper {
            width: 80px;
            height: 80px;
        }

            .foh-Customer .col-lg-3 > div .circle-wrapper::before {
                width: 100px;
                height: 100px;
            }

        .foh-Customer .col-lg-3 > div {
            padding: 25px 15px;
        }

        .foh-Customer h4 {
            font-size: 38px;
        }

        .foh-Customer h5 {
            font-size: 16px;
            letter-spacing: 0.5px;
        }

        .foh-Customer p {
            font-size: 13px;
            line-height: 1.6;
        }
}




.hardware-features {
    padding: 80px 0;
    background: linear-gradient(135deg, #ffffff 0%, #f0f4f8 50%, #e6f0fa 100%);
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
    position: relative;
    overflow: hidden;
}

/* Animated gradient background */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Liquid Glass List Items */
.hardware-features ul li {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 4px solid #667eea;
    padding: 16px 30px;
    margin: 10px 0px;
    font-weight: 600;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    color: #2d3748;
}

    /* Top glossy reflection */
    .hardware-features ul li::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 100%);
        pointer-events: none;
        border-radius: 14px 14px 0 0;
        z-index: 1;
    }

    /* Shimmer effect on hover */
    .hardware-features ul li::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -60%;
        width: 50%;
        height: 200%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
        transform: skewX(-25deg);
        transition: left 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        z-index: 2;
    }

    .hardware-features ul li:hover::after {
        left: 150%;
    }

    .hardware-features ul li:hover {
        background: rgba(255, 255, 255, 0.45);
        border-color: rgba(255, 255, 255, 0.7);
        border-left-color: #667eea;
        box-shadow: 0 16px 48px rgba(102, 126, 234, 0.2), 0 8px 24px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 40px rgba(102, 126, 234, 0.15);
        transform: translateX(12px) scale(1.02);
    }

.hardware-features h4 {
    color: #2d3748;
    font-weight: 700;
    margin-bottom: 30px;
}

/* Tablet */
@media (max-width: 991px) {
    .hardware-features {
        padding: 60px 0;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .hardware-features {
        padding: 50px 0;
    }

        .hardware-features ul li {
            padding: 14px 20px;
            font-size: 14px;
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
        }
}

/* Extra small */
@media (max-width: 575px) {
    .hardware-features {
        padding: 40px 0;
    }
}
.highlights-section {
    padding: 80px 0;
    background: #083d59;
    position: relative;
    overflow: hidden;
}

    /* Animated background blobs */
    .highlights-section::before {
        content: '';
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(139, 92, 246, 0.4), transparent 70%);
        border-radius: 50%;
        top: -200px;
        right: 10%;
        animation: blobFloat1 20s ease-in-out infinite;
        filter: blur(80px);
        z-index: 1;
    }

    .highlights-section::after {
        content: '';
        position: absolute;
        width: 450px;
        height: 450px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.35), transparent 70%);
        border-radius: 50%;
        bottom: -180px;
        left: 15%;
        animation: blobFloat2 25s ease-in-out infinite;
        filter: blur(90px);
        z-index: 1;
    }

@keyframes blobFloat1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-100px, 80px) scale(1.15);
    }

    66% {
        transform: translate(-50px, 150px) scale(0.9);
    }
}

@keyframes blobFloat2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(120px, -70px) scale(1.1);
    }

    66% {
        transform: translate(60px, -120px) scale(0.95);
    }
}

.highlights-section .container {
    position: relative;
    z-index: 2;
}

.highlights-wrapper {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 60px 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

    /* Top glossy reflection */
    .highlights-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 40%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
        pointer-events: none;
        border-radius: 25px 25px 0 0;
        z-index: 1;
    }

    /* Animated shimmer */
    .highlights-wrapper::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient( 45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70% );
        animation: shimmerMove 8s linear infinite;
        pointer-events: none;
        z-index: 1;
    }

@keyframes shimmerMove {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(50%, 50%) rotate(360deg);
    }
}

.highlights-wrapper > .row {
    position: relative;
    z-index: 2;
}

.highlights-wrapper h3 {
    color: #fbbf24;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
}

.highlights-wrapper .row {
    row-gap: 30px;
}

.single-services3 {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    height: 100%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

    .single-services3:hover {
        transform: translateY(-8px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
        background: rgba(255, 255, 255, 1);
    }

    .single-services3 .icon {
        width: 80px;
        height: 80px;
        margin: 0 auto 25px;
        display: block;
    }

    .single-services3 h4 {
        font-size: 20px;
        font-weight: 700;
        color: #1a202c;
        margin-bottom: 18px;
        line-height: 1.3;
    }

    .single-services3 p {
        font-size: 15px;
        line-height: 1.7;
        color: #4a5568;
        margin: 0;
        text-align: justify;
    }

/* Tablet */
@media (max-width: 991px) {
    .highlights-section {
        padding: 60px 0;
    }

        .highlights-section::before,
        .highlights-section::after {
            width: 400px;
            height: 400px;
        }

    .highlights-wrapper {
        padding: 50px 30px;
        backdrop-filter: blur(25px) saturate(180%);
        -webkit-backdrop-filter: blur(25px) saturate(180%);
    }

        .highlights-wrapper h3 {
            font-size: 32px;
            margin-bottom: 40px;
        }

    .single-services3 {
        padding: 35px 25px;
    }

        .single-services3 .icon {
            width: 70px;
            height: 70px;
        }

        .single-services3 h4 {
            font-size: 19px;
        }
}

/* Mobile */
@media (max-width: 767px) {
    .highlights-section {
        padding: 50px 0;
    }

        .highlights-section::before,
        .highlights-section::after {
            width: 300px;
            height: 300px;
            filter: blur(60px);
        }

    .highlights-wrapper {
        padding: 40px 25px;
        border-radius: 20px;
        backdrop-filter: blur(20px) saturate(170%);
        -webkit-backdrop-filter: blur(20px) saturate(170%);
    }

        .highlights-wrapper h3 {
            font-size: 26px;
            margin-bottom: 35px;
        }

        .highlights-wrapper .row {
            row-gap: 25px;
        }

    .single-services3 {
        padding: 30px 20px;
    }

        .single-services3 .icon {
            width: 65px;
            height: 65px;
            margin-bottom: 20px;
        }

        .single-services3 h4 {
            font-size: 18px;
            margin-bottom: 15px;
        }

        .single-services3 p {
            font-size: 14px;
            text-align: center;
        }
}

/* Extra small */
@media (max-width: 575px) {
    .highlights-section {
        padding: 40px 0;
    }

    .highlights-wrapper {
        padding: 35px 20px;
        border-radius: 15px;
    }

        .highlights-wrapper h3 {
            font-size: 22px;
            margin-bottom: 30px;
        }

    .single-services3 {
        padding: 25px 18px;
    }

        .single-services3 .icon {
            width: 60px;
            height: 60px;
        }

        .single-services3 h4 {
            font-size: 17px;
        }

        .single-services3 p {
            font-size: 13px;
        }
}


.rest-bg {
    background: #e6edf4;
    padding: 80px 0;
}

    .rest-bg .teams-title {
        font-size: 36px;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 20px;
    }

.rest-subtitle {
    line-height: 1.8;
    margin-bottom: 30px;
    color: #4a5568;
    font-size: 16px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.rest-cards-row {
    margin-top: 50px;
    align-items: center;
}

.stg-bg {
    background: #fff;
    border-radius: 30px;
    padding: 30px 20px;
    box-shadow: 17px 20px 40px rgba(0, 0, 0, 0.21);
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
}

    .stg-bg:hover {
        transform: translateY(-8px);
        box-shadow: 20px 25px 50px rgba(0, 0, 0, 0.25);
    }

    .stg-bg img {
        width: 70px;
        height: 70px;
        margin-bottom: 20px;
    }

    .stg-bg h6 {
        font-size: 19px;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 15px;
    }

    .stg-bg p {
        font-size: 14px;
        line-height: 1.7;
        color: #4a5568;
        margin: 0;
    }

/* Offset cards for staggered effect */
.rest-card-offset {
    margin-top: 70px;
}

.rest-card-offset-2 {
    margin-top: 80px;
}

.rest-cards-row .col-lg-3,
.rest-cards-row .col-md-6 {
    margin-bottom: 30px;
}

/* Tablet */
@media (max-width: 991px) {
    .rest-bg {
        padding: 60px 0;
    }

        .rest-bg .teams-title {
            font-size: 32px;
        }

    .rest-subtitle {
        font-size: 15px;
        margin-bottom: 25px;
    }

    .rest-cards-row {
        margin-top: 40px;
    }

    .rest-card-offset,
    .rest-card-offset-2 {
        margin-top: 0;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .rest-bg {
        padding: 50px 0;
    }

        .rest-bg .teams-title {
            font-size: 26px;
            padding: 0 15px;
        }

    .rest-subtitle {
        font-size: 14px;
        padding: 0 15px;
        line-height: 1.6;
    }

    .rest-cards-row {
        margin-top: 35px;
    }

    .stg-bg {
        padding: 25px 20px;
        border-radius: 25px;
    }

        .stg-bg img {
            width: 60px;
            height: 60px;
            margin-bottom: 18px;
        }

        .stg-bg h6 {
            font-size: 18px;
        }

        .stg-bg p {
            font-size: 13px;
        }

    .rest-cards-row .col-lg-3,
    .rest-cards-row .col-md-6 {
        margin-bottom: 25px;
    }
}

/* Extra small */
@media (max-width: 575px) {
    .rest-bg {
        padding: 40px 0;
    }

        .rest-bg .teams-title {
            font-size: 22px;
        }

    .rest-subtitle {
        font-size: 13px;
    }

    .stg-bg {
        padding: 22px 18px;
        border-radius: 20px;
    }

        .stg-bg img {
            width: 55px;
            height: 55px;
        }

        .stg-bg h6 {
            font-size: 17px;
            margin-bottom: 12px;
        }
}
.gold-cta-section {
    background: linear-gradient(135deg, #e2b923 0%, #f5d042 100%);
    padding: 40px 0;
}

    .gold-cta-section .row {
        gap: 20px 0;
    }

    .gold-cta-section h4 {
        font-weight: 600;
        line-height: 1.4;
        color: #1d1d1f;
        font-size: 28px;
        margin: 0;
    }

    .gold-cta-section .theme_btn {
        display: inline-block;
        background: #877227;
        border: 2px solid #877227;
        color: #f5f5f7;
        border-radius: 8px;
        font-weight: 600;
        font-size: 16px;
        text-decoration: none;
        padding: 16px 35px;
        transition: all 0.3s ease;
        text-transform: capitalize;
    }

        .gold-cta-section .theme_btn:hover {
            background: transparent;
            color: #877227;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(135, 114, 39, 0.3);
        }

/* Tablet */
@media (max-width: 991px) {
    .gold-cta-section {
        padding: 35px 0;
    }

        .gold-cta-section h4 {
            font-size: 26px;
            text-align: center;
            margin-bottom: 20px;
        }

        .gold-cta-section .col-lg-3 {
            text-align: center !important;
        }
}

/* Mobile */
@media (max-width: 767px) {
    .gold-cta-section {
        padding: 30px 0;
    }

        .gold-cta-section h4 {
            font-size: 22px;
            padding: 0 15px;
        }

        .gold-cta-section .theme_btn {
            padding: 14px 30px;
            font-size: 15px;
        }
}

/* Extra small */
@media (max-width: 575px) {
    .gold-cta-section {
        padding: 25px 0;
    }

        .gold-cta-section h4 {
            font-size: 20px;
            line-height: 1.5;
        }

        .gold-cta-section .theme_btn {
            padding: 12px 25px;
            font-size: 14px;
        }
}
.three-step {
    padding: 80px 0;
    background: #f5f5f7;
    position: relative;
    overflow: hidden;
}

    /* Subtle animated patterns */
    .three-step::before {
        content: '';
        position: absolute;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(102, 126, 234, 0.08), transparent 70%);
        border-radius: 50%;
        top: -150px;
        left: 10%;
        animation: blobFloat1 20s ease-in-out infinite;
        filter: blur(60px);
        z-index: 1;
    }

    .three-step::after {
        content: '';
        position: absolute;
        width: 350px;
        height: 350px;
        background: radial-gradient(circle, rgba(118, 75, 162, 0.06), transparent 70%);
        border-radius: 50%;
        bottom: -150px;
        right: 15%;
        animation: blobFloat2 25s ease-in-out infinite;
        filter: blur(70px);
        z-index: 1;
    }

@keyframes blobFloat1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(100px, 80px) scale(1.15);
    }

    66% {
        transform: translate(50px, 150px) scale(0.9);
    }
}

@keyframes blobFloat2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-120px, -70px) scale(1.1);
    }

    66% {
        transform: translate(-60px, -120px) scale(0.95);
    }
}

.three-step .container {
    position: relative;
    z-index: 2;
}

.three-step .content-box {
    text-align: center;
}

.three-step h3 {
    font-size: 36px;
    font-weight: 700;
    color: #0d3d54;
    margin-bottom: 15px;
}

.three-step-subtitle {
    font-size: 17px;
    color: #2d3748;
    margin-bottom: 60px;
    font-weight: 400;
    text-align:center;
}

.three-step .row {
    row-gap: 30px;
}

/* Liquid Glass Cards */
.details-box {
/*    background: rgba(255, 255, 255, 0.7);*/
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 50px 30px;
    text-align: center;
    height: 100%;
/*    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);*/
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

    /* Top glossy reflection */
    .details-box::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, transparent 100%);
        pointer-events: none;
        border-radius: 20px 20px 0 0;
        z-index: 1;
    }

    /* Shimmer effect on hover */
    .details-box::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -60%;
        width: 50%;
        height: 200%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
        transform: skewX(-25deg);
        transition: left 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        z-index: 2;
    }

    .details-box:hover::after {
        left: 150%;
    }

    .details-box:hover {
        background: rgba(255, 255, 255, 0.85);
        border-color: rgba(255, 255, 255, 1);
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 16px 48px rgba(102, 126, 234, 0.2), 0 8px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1), 0 0 30px rgba(102, 126, 234, 0.15);
    }

    .details-box img {
        width: 90px;
        height: 90px;
        margin-bottom: 30px;
        position: relative;
        z-index: 3;
    }

    .details-box h5 {
        font-size: 22px;
        font-weight: 700;
        color: #0d3d54;
        margin-bottom: 20px;
        position: relative;
        z-index: 3;
    }

    .details-box p {
        font-size: 15px;
        line-height: 1.7;
        color: #4a5568;
        margin: 0;
        text-align: left;
        position: relative;
        z-index: 3;
    }

/* Tablet */
@media (max-width: 991px) {
    .three-step {
        padding: 60px 0;
    }

        .three-step::before,
        .three-step::after {
            width: 300px;
            height: 300px;
        }

        .three-step h3 {
            font-size: 32px;
        }

    .three-step-subtitle {
        font-size: 16px;
        margin-bottom: 50px;
        padding: 0 20px;
        text-align:center !important;
    }

    .details-box {
        padding: 40px 25px;
        backdrop-filter: blur(15px) saturate(180%);
        -webkit-backdrop-filter: blur(15px) saturate(180%);
    }

        .details-box img {
            width: 80px;
            height: 80px;
            margin-bottom: 25px;
        }

        .details-box h5 {
            font-size: 20px;
        }
}

/* Mobile */
@media (max-width: 767px) {
    .three-step {
        padding: 50px 0;
    }

        .three-step::before,
        .three-step::after {
            width: 250px;
            height: 250px;
            filter: blur(50px);
        }

        .three-step h3 {
            font-size: 26px;
            padding: 0 15px;
        }

    .three-step-subtitle {
        font-size: 15px;
        margin-bottom: 40px;
        padding: 0 15px;
    }

    .three-step .row {
        row-gap: 25px;
    }

    .details-box {
        padding: 35px 25px;
        border-radius: 15px;
        backdrop-filter: blur(12px) saturate(170%);
        -webkit-backdrop-filter: blur(12px) saturate(170%);
    }

        .details-box img {
            width: 70px;
            height: 70px;
            margin-bottom: 22px;
        }

        .details-box h5 {
            font-size: 19px;
            margin-bottom: 15px;
        }

        .details-box p {
            font-size: 14px;
            text-align: center;
        }
}

/* Extra small */
@media (max-width: 575px) {
    .three-step {
        padding: 40px 0;
    }

        .three-step h3 {
            font-size: 22px;
            line-height: 1.3;
        }

    .three-step-subtitle {
        font-size: 14px;
    }

    .details-box {
        padding: 30px 20px;
    }

        .details-box img {
            width: 65px;
            height: 65px;
            margin-bottom: 20px;
        }

        .details-box h5 {
            font-size: 18px;
        }
}
.feature-bg {
    background: linear-gradient(0deg, #f3f5f8 0%, #4a9fd8 50%, #1e5f8f 100%) !important;
}
.bg-none{
    background:none !important;
}

/* ==============================================
       HEALTHCARE BENEFITS LIQUID GLASS BLOCK
       ============================================== */

.healthcare-ui {
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: #212529 !important;
}

    .healthcare-ui .services-list {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

        .healthcare-ui .services-list li {
            display: flex !important;
            align-items: center !important;
            margin-bottom: 26px !important;
        }

    /* liquid, water‑like circular icons for light bg */
    .healthcare-ui .service-icon {
        position: relative !important;
        min-width: 74px !important;
        min-height: 74px !important;
        border-radius: 999px !important;
        background: radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.95), transparent 55%), radial-gradient(circle at 80% 35%, rgba(255, 255, 255, 0.55), transparent 60%), radial-gradient(circle at 25% 80%, rgba(230, 236, 248, 0.8), transparent 55%), linear-gradient(135deg, #f5f7fb, #dfe4f2) !important;
        border: 1px solid rgba(255, 255, 255, 0.9) !important;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.45) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #4b5563 !important;
        font-size: 26px !important;
        margin-right: 22px !important;
        backdrop-filter: blur(18px) saturate(170%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(170%) !important;
        overflow: hidden !important;
    }

        /* glossy top streak */
        .healthcare-ui .service-icon::before {
            content: "" !important;
            position: absolute !important;
            inset: 3px 10px auto 10px !important;
            height: 38% !important;
            border-radius: 999px !important;
            background: linear-gradient( to bottom, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.25) ) !important;
            opacity: 0.95 !important;
        }

        /* inner refraction at bottom */
        .healthcare-ui .service-icon::after {
            content: "" !important;
            position: absolute !important;
            bottom: 6px !important;
            left: 18% !important;
            right: 18% !important;
            height: 34% !important;
            border-radius: 999px !important;
            background: radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) ) !important;
            opacity: 0.7 !important;
        }

        .healthcare-ui .service-icon i {
            position: relative !important;
            z-index: 1 !important;
        }

    .healthcare-ui .service-text {
        font-size: 17px !important;
        color: #212529 !important;
        white-space: nowrap !important;
    }
@media (min-width: 992px) {
    .healthcare-ui .service-icon-size {
        min-width: 55px !important;
        min-height: 55px !important;
    }
}
    /* tablet text wrapping */
    @media (max-width: 768px) {
        .healthcare-ui .service-text {
            white-space: normal !important;
        }
    }

    /* mobile tweaks: shrink icons & remove mb-4 only inside healthcare */
    @media (max-width: 576px) {
        .healthcare-ui .service-icon {
            min-width: 64px !important;
            min-height: 64px !important;
            font-size: 22px !important;
        }

        .healthcare-ui .service-text {
            font-size: 15px !important;
        }
        /* override Bootstrap mb-4 only here */
        .healthcare-ui .col-md-6.mb-4 {
            margin-bottom: 0 !important;
        }
    }

    /* END OF STYLESHEET */

/* ========== ADVENTURE BANNER START ========== */
.adventure-title {
    font-size: 2rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.2;
    margin: 0;
}

.adventure-description {
    font-size: 0.95rem;
    color: #6b6b6b;
    line-height: 1.6;
    margin: 0 0 1.2rem 0;
}

/* ===== LIQUID GLASS BUTTON - GOLD ===== */
.adventure-button {
    background: linear-gradient( 135deg, rgba(226, 185, 35, 0.85) 0%, rgba(255, 215, 77, 0.75) 50%, rgba(226, 185, 35, 0.8) 100% );
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    color: #1a1a1a;
    padding: 0.85rem 2rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 215, 77, 0.4);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(226, 185, 35, 0.3), inset 0 1px 0 rgba(255, 235, 150, 0.6), inset 0 -1px 0 rgba(226, 185, 35, 0.4);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .adventure-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 90deg, transparent 0%, rgba(255, 235, 150, 0.5) 50%, transparent 100% );
        transition: left 0.6s ease;
    }

    .adventure-button::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient( circle at 30% 40%, rgba(255, 235, 150, 0.4) 0%, transparent 60% );
        pointer-events: none;
    }

    .adventure-button:hover {
        background: linear-gradient( 135deg, rgba(226, 185, 35, 0.95) 0%, rgba(255, 215, 77, 0.85) 50%, rgba(226, 185, 35, 0.9) 100% );
        box-shadow: 0 8px 24px rgba(226, 185, 35, 0.4), inset 0 1px 0 rgba(255, 235, 150, 0.7), inset 0 -1px 0 rgba(226, 185, 35, 0.5);
        transform: translateY(-2px);
        border-color: rgba(255, 215, 77, 0.5);
    }

        .adventure-button:hover::before {
            left: 100%;
        }

    .adventure-button:active {
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(226, 185, 35, 0.35), inset 0 1px 0 rgba(255, 235, 150, 0.5), inset 0 -1px 0 rgba(226, 185, 35, 0.6);
    }
/* ===== END LIQUID GLASS BUTTON - GOLD ===== */
/* ========== ADVENTURE BANNER END ========== */

/* ========== MEASUREMENT BANNER START ========== */
.measurement-section {
    background: #e5c039;
    padding: 2rem 0 4rem;
    position: relative;
}

.measurement-scroll-wrapper {
    text-align: center;
    margin-bottom: -2rem;
    position: relative;
    z-index: 10;
}

.measurement-scroll-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient( 135deg, rgba(226, 185, 35, 0.85) 0%, rgba(255, 215, 77, 0.75) 50%, rgba(226, 185, 35, 0.8) 100% );
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-radius: 50%;
    border: 3px solid rgb(173 144 38);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(226, 185, 35, 0.35), inset 0 2px 0 rgba(255, 235, 150, 0.6), inset 0 -2px 0 rgba(226, 185, 35, 0.4);
    animation: bounce 2s infinite;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

    .measurement-scroll-icon::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient( circle at 30% 30%, rgba(255, 235, 150, 0.4) 0%, transparent 60% );
        pointer-events: none;
    }

    .measurement-scroll-icon::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient( 45deg, transparent 30%, rgba(255, 235, 150, 0.3) 50%, transparent 70% );
        animation: shimmer 3s infinite;
    }

@keyframes shimmer {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.measurement-scroll-icon i {
    color: #624d03;
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.measurement-container {
    /*    background: linear-gradient( 135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0.75) 100% );*/
    background: #fff;
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.5);
    border: 5px solid rgb(173 144 38);
    border-radius: 30px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.measurement-content {
    position: relative;
    z-index: 2;
}

.measurement-title {
    font-size: 2.2rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 2.5rem;
    line-height: 1.3;
}

.measurement-button {
    background: linear-gradient(135deg, #083d59 0%, #0a4c6e 100%);
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    border: none;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(8, 61, 89, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .measurement-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100% );
        transition: left 0.6s ease;
    }

    .measurement-button:hover {
        background: linear-gradient(135deg, #0a4c6e 0%, #0d5f8a 100%);
        box-shadow: 0 8px 28px rgba(8, 61, 89, 0.4);
        transform: translateY(-2px);
    }

        .measurement-button:hover::before {
            left: 100%;
        }

.measurement-image {
    position: relative;
    z-index: 1;
}

    .measurement-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 20px;
/*        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);*/
    }

/* ========== MEASUREMENT BANNER END ========== */

/* ========== TEMPLE BENEFIT SECTION START ========== */
.temple-benefit-wrapper {
    background: rgba(0, 120, 215, 0.08);
    padding: 4rem 2.5rem;
}

.temple-benefit-tag-top {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 2rem;
}

/* ===== ANIMATED DEVOTIONAL DOT ===== */
.temple-blue-dot {
    width: 10px;
    height: 10px;
    background: #e2b923;
    border-radius: 50%;
    position: relative;
    animation: dotPulse 2.2s infinite ease-in-out;
}

    .temple-blue-dot::before {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        background: rgba(226, 185, 35, 0.35);
        animation: dotRipple 2.2s infinite ease-out;
    }

@keyframes dotPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(226, 185, 35, 0.6);
    }

    50% {
        transform: scale(1.2);
        box-shadow: 0 0 12px rgba(226, 185, 35, 0.9);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(226, 185, 35, 0.6);
    }
}

@keyframes dotRipple {
    0% {
        transform: scale(0.6);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}
/* ===== END DOT ANIMATION ===== */

.temple-main-heading {
    font-size: 2.2rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.15;
    margin-bottom: 2rem;
}

.temple-tag-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

/* ===== LIQUID GLASS TAG ITEMS ===== */
.temple-tag-item {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a1a;
    padding: 0.85rem 1.4rem;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 0 1 auto;
    min-width: fit-content;
    width: auto;
}

    /* Light Gold Liquid Glass - First Item */
    .temple-tag-item:first-child {
        background: linear-gradient( 135deg, rgba(226, 185, 35, 0.25) 0%, rgba(255, 215, 77, 0.15) 50%, rgba(226, 185, 35, 0.2) 100% );
        box-shadow: 0 4px 16px rgba(226, 185, 35, 0.15), inset 0 1px 0 rgba(255, 215, 77, 0.4), inset 0 -1px 0 rgba(226, 185, 35, 0.2);
        border: 1px solid rgba(226, 185, 35, 0.3);
    }

        .temple-tag-item:first-child::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient( 90deg, transparent 0%, rgba(255, 215, 77, 0.4) 50%, transparent 100% );
            transition: left 0.6s ease;
        }

        .temple-tag-item:first-child::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient( circle at 30% 40%, rgba(255, 215, 77, 0.3) 0%, transparent 60% );
            pointer-events: none;
        }

        .temple-tag-item:first-child:hover {
            background: linear-gradient( 135deg, rgba(226, 185, 35, 0.35) 0%, rgba(255, 215, 77, 0.2) 50%, rgba(226, 185, 35, 0.3) 100% );
            box-shadow: 0 8px 24px rgba(226, 185, 35, 0.25), inset 0 1px 0 rgba(255, 215, 77, 0.5), inset 0 -1px 0 rgba(226, 185, 35, 0.3);
            transform: translateY(-2px);
        }

            .temple-tag-item:first-child:hover::before {
                left: 100%;
            }

    /* Silver Liquid Glass - Second Item */
    .temple-tag-item:last-child {
        background: linear-gradient( 135deg, rgba(192, 192, 192, 0.25) 0%, rgba(220, 220, 220, 0.15) 50%, rgba(192, 192, 192, 0.2) 100% );
        box-shadow: 0 4px 16px rgba(192, 192, 192, 0.15), inset 0 1px 0 rgba(220, 220, 220, 0.4), inset 0 -1px 0 rgba(192, 192, 192, 0.2);
        border: 1px solid rgba(192, 192, 192, 0.3);
    }

        .temple-tag-item:last-child::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient( 90deg, transparent 0%, rgba(220, 220, 220, 0.4) 50%, transparent 100% );
            transition: left 0.6s ease;
        }

        .temple-tag-item:last-child::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient( circle at 30% 40%, rgba(220, 220, 220, 0.3) 0%, transparent 60% );
            pointer-events: none;
        }

        .temple-tag-item:last-child:hover {
            background: linear-gradient( 135deg, rgba(192, 192, 192, 0.35) 0%, rgba(220, 220, 220, 0.2) 50%, rgba(192, 192, 192, 0.3) 100% );
            box-shadow: 0 8px 24px rgba(192, 192, 192, 0.25), inset 0 1px 0 rgba(220, 220, 220, 0.5), inset 0 -1px 0 rgba(192, 192, 192, 0.3);
            transform: translateY(-2px);
        }

            .temple-tag-item:last-child:hover::before {
                left: 100%;
            }

.temple-tag-icon {
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
}
/* ===== END LIQUID GLASS TAG ITEMS ===== */

/* ===== EQUAL HEIGHT WRAPPER ===== */
.temple-left-column {
    display: flex;
    flex-direction: column;
}

.temple-white-box {
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 100% );
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 22px;
    padding: 2rem 2.2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.temple-box-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
}

.temple-box-content {
    margin-top: 1.3rem;
    font-size: 1rem;
    color: #6b6b6b;
    line-height: 1.7;
    flex-grow: 1;
}

/* ===== ACTION BUTTONS ===== */
.temple-action-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.temple-enquire-button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a1a;
    padding: 0.85rem 1.6rem;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient( 135deg, rgba(33, 150, 243, 0.25) 0%, rgba(66, 165, 245, 0.15) 50%, rgba(33, 150, 243, 0.2) 100% );
    box-shadow: 0 4px 16px rgba(33, 150, 243, 0.15), inset 0 1px 0 rgba(66, 165, 245, 0.4), inset 0 -1px 0 rgba(33, 150, 243, 0.2);
    border: 1px solid rgba(33, 150, 243, 0.3);
    flex: 1 1 auto;
    min-width: fit-content;
    justify-content: center;
}

    .temple-enquire-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 90deg, transparent 0%, rgba(66, 165, 245, 0.4) 50%, transparent 100% );
        transition: left 0.6s ease;
    }

    .temple-enquire-button::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient( circle at 30% 40%, rgba(66, 165, 245, 0.3) 0%, transparent 60% );
        pointer-events: none;
    }

    .temple-enquire-button:hover {
        background: linear-gradient( 135deg, rgba(33, 150, 243, 0.35) 0%, rgba(66, 165, 245, 0.2) 50%, rgba(33, 150, 243, 0.3) 100% );
        box-shadow: 0 8px 24px rgba(33, 150, 243, 0.25), inset 0 1px 0 rgba(66, 165, 245, 0.5), inset 0 -1px 0 rgba(33, 150, 243, 0.3);
        transform: translateY(-2px);
    }

        .temple-enquire-button:hover::before {
            left: 100%;
        }

.temple-quote-button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a1a;
    padding: 0.85rem 1.6rem;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient( 135deg, rgba(76, 175, 80, 0.25) 0%, rgba(129, 199, 132, 0.15) 50%, rgba(76, 175, 80, 0.2) 100% );
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.15), inset 0 1px 0 rgba(129, 199, 132, 0.4), inset 0 -1px 0 rgba(76, 175, 80, 0.2);
    border: 1px solid rgba(76, 175, 80, 0.3);
    flex: 1 1 auto;
    min-width: fit-content;
    justify-content: center;
}

    .temple-quote-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 90deg, transparent 0%, rgba(129, 199, 132, 0.4) 50%, transparent 100% );
        transition: left 0.6s ease;
    }

    .temple-quote-button::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient( circle at 30% 40%, rgba(129, 199, 132, 0.3) 0%, transparent 60% );
        pointer-events: none;
    }

    .temple-quote-button:hover {
        background: linear-gradient( 135deg, rgba(76, 175, 80, 0.35) 0%, rgba(129, 199, 132, 0.2) 50%, rgba(76, 175, 80, 0.3) 100% );
        box-shadow: 0 8px 24px rgba(76, 175, 80, 0.25), inset 0 1px 0 rgba(129, 199, 132, 0.5), inset 0 -1px 0 rgba(76, 175, 80, 0.3);
        transform: translateY(-2px);
    }

        .temple-quote-button:hover::before {
            left: 100%;
        }

.temple-button-icon {
    font-size: 0.85rem;
    position: relative;
    z-index: 1;
}
/* ===== END ACTION BUTTONS ===== */

.temple-content-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.temple-est-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
}

.temple-star-circle {
    width: 32px;
    height: 32px;
    background: #ff8a3d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.85rem;
}

.temple-description-text {
    color: #6b6b6b;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.temple-visionary-title {
    font-size: 1.7rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    margin-top: auto;
}

.temple-black-button {
    background: #1a1a1a;
    color: white;
    padding: 1rem 2.2rem;
    border-radius: 60px;
    border: none;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    width: fit-content;
}

    .temple-black-button:hover {
        background: #333;
        transform: translateX(8px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }

.temple-button-arrow {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.temple-black-button:hover .temple-button-arrow {
    transform: translateX(5px);
}

.temple-court-card {
/*    background: linear-gradient(135deg, #d84a3b 0%, #c43e2f 100%);*/
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    height: 100%;
    min-height: 450px;
    width: 100%;
}

.temple-court-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 0;
}

.temple-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
/*    background: linear-gradient(to bottom, rgba(216, 74, 59, 0.25) 0%, rgba(196, 62, 47, 0.15) 100%);*/
    z-index: 1;
}

.temple-february-badge {
    position: absolute;
    top: 25px;
    right: 25px;
    background: white;
    padding: 0.75rem 1.4rem;
    border-radius: 60px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.temple-gift-icon {
    font-size: 1rem;
}

.temple-info-card {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    padding: 1.8rem 2rem;
    border-radius: 25px;
    z-index: 10;
    background: linear-gradient( 135deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) );
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -8px 18px rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition: all 0.4s ease;
}

    .temple-info-card:hover {
        transform: translateX(-50%) translateY(-6px);
        box-shadow: 0 30px 65px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -10px 22px rgba(255, 255, 255, 0.35);
    }

.temple-outdoor-text {
    font-size: 0.85rem;
    color: #6b6b6b;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.temple-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.temple-percentage-number {
    font-size: 3rem;
    font-weight: 900;
    color: #1a1a1a;
    line-height: 1;
}

.temple-member-text {
    font-size: 0.9rem;
    color: #6b6b6b;
    font-weight: 600;
    margin-left: 0.8rem;
}

.temple-blue-button {
    background: linear-gradient(135deg, #29b6f6 0%, #0288d1 100%);
    color: white;
    padding: 0.7rem 1.4rem;
    border-radius: 18px;
    border: none;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

    .temple-blue-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(41, 182, 246, 0.4);
    }

.temple-lightning-icon {
    font-size: 0.9rem;
}

.temple-equal-height-row {
    display: flex;
    align-items: stretch;
    padding: 2.5rem;
    border-radius: 35px;
    position: relative;
    overflow: hidden;
    height: 100%;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 100% );
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .temple-equal-height-row::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient( circle at 20% 50%, rgba(255, 255, 255, 0.3) 0%, transparent 50% );
        pointer-events: none;
    }

    .temple-equal-height-row::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.9) 50%, transparent 100% );
    }

    .temple-equal-height-row:hover {
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0.55) 100% );
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.5);
        transform: translateY(-2px);
    }
/* ========== TEMPLE BENEFIT SECTION END ========== */

/* ========== TEMPLE RESPONSIVE START ========== */

/* ========== TEMPLE RESPONSIVE END ========== */
.temple-feature-bg {
    background: rgba(226, 185, 35, 0.78);
}

.temple-section {
    background: url(../img/bg/temple-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom; /* Changed from center to center bottom */
    margin: 30px auto;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

    /* Overlay to reduce background opacity */
    .temple-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(244, 246, 248, 0.7);
        z-index: 0;
        pointer-events: none;
    }

    /* Ensure content is above overlay */
    .temple-section > * {
        position: relative;
        z-index: 1;
    }
/* ========== TRUSTED SECTION START ========== */
.trusted-section {
    background: #ffffff;
    padding: 3rem;
    border-radius: 30px;
}

.trusted-left {
    position: relative;
}

.trusted-main-title {
    font-size: 1.8rem;
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.trusted-highlight {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a1a1a;
    display: block;
    margin-bottom: 1rem;
}

.trusted-highlight-number {
    color: #6b6b6b;
    font-weight: 400;
}

.trusted-description {
    font-size: 0.9rem;
    color: #6b6b6b;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 300px;
}

.trusted-divider {
    width: 1px;
    height: 100px;
    background: #e0e0e0;
    margin: 2rem 0;
}

.trusted-stats {
    display: flex;
    align-items: flex-end;
    gap: 3rem;
    margin-top: 2rem;
}

.trusted-avatars {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    height: 40px;
}

.trusted-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid white;
    margin-left: -12px;
    object-fit: cover;
}

    .trusted-avatar:first-child {
        margin-left: 0;
    }

.trusted-stat-item {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.trusted-stat-number {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1a1a1a;
    display: block;
    line-height: 1;
    margin-bottom: 0.3rem;
}

.trusted-stat-label {
    font-size: 0.85rem;
    color: #6b6b6b;
}

/* ===== FEATURE ITEMS ===== */
.trusted-feature-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.trusted-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1.5rem;
    background: rgba(226, 185, 35, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(226, 185, 35, 0.1);
    transition: all 0.3s ease;
}

    .trusted-feature-item:hover {
        background: rgba(226, 185, 35, 0.08);
        border-color: rgba(226, 185, 35, 0.2);
        transform: translateX(5px);
    }

/* ===== LIQUID GLASS ICON CIRCLE ===== */
.trusted-icon-circle {
    width: 70px;
    height: 70px;
    min-width: 70px;
    background: linear-gradient( 135deg, rgba(226, 185, 35, 0.85) 0%, rgba(255, 215, 77, 0.75) 50%, rgba(226, 185, 35, 0.8) 100% );
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 77, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(226, 185, 35, 0.3), inset 0 2px 0 rgba(255, 235, 150, 0.6), inset 0 -2px 0 rgba(226, 185, 35, 0.4);
    position: relative;
    overflow: hidden;
}

    .trusted-icon-circle::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient( circle at 30% 30%, rgba(255, 235, 150, 0.4) 0%, transparent 60% );
        pointer-events: none;
    }

    .trusted-icon-circle::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient( 45deg, transparent 30%, rgba(255, 235, 150, 0.3) 50%, transparent 70% );
        animation: shimmer 3s infinite;
    }

@keyframes shimmer {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.trusted-icon-circle i {
    color: #1a1a1a;
    font-size: 1.3rem;
    position: relative;
    z-index: 1;
}
/* ===== END LIQUID GLASS ICON CIRCLE ===== */

.trusted-feature-content {
    flex: 1;
}

.trusted-feature-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.trusted-feature-description {
    font-size: 0.85rem;
    color: #6b6b6b;
    line-height: 1.6;
    margin-bottom: 0rem;
}

.trusted-feature-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b6b6b;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .trusted-feature-link:hover {
        color: #e2b923;
        gap: 0.8rem;
    }

    .trusted-feature-link i {
        font-size: 0.75rem;
    }
/* ===== END FEATURE ITEMS ===== */

/* ========== TRUSTED SECTION END ========== */

/* Floating Audio Control Button - Left Side */
.audio-control-btn {
    position: fixed;
    left: 20px;
    bottom: 100px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #e2b923 0%, #d4a817 100%);
    color: #083d59;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(226, 185, 35, 0.4);
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
}

    .audio-control-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(226, 185, 35, 0.6);
    }

    .audio-control-btn:active {
        transform: scale(0.95);
    }

    .audio-control-btn.muted {
        background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
        color: #fff;
    }

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(226, 185, 35, 0.4);
    }

    50% {
        box-shadow: 0 4px 25px rgba(226, 185, 35, 0.7);
    }
}

/* Responsive */

/* Floating Audio Control Button - Left Side */
.audio-control-btn {
    position: fixed;
    left: 20px;
    bottom: 100px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #e2b923 0%, #d4a817 100%);
    color: #083d59;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(226, 185, 35, 0.4);
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
}

    .audio-control-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(226, 185, 35, 0.6);
    }

    .audio-control-btn:active {
        transform: scale(0.95);
    }

    .audio-control-btn.muted {
        background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
        color: #fff;
    }

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(226, 185, 35, 0.4);
    }

    50% {
        box-shadow: 0 4px 25px rgba(226, 185, 35, 0.7);
    }
}

/* Responsive */

/* ========== MEASUREMENT HEADER ROW START ========== */
.measurement-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
}

    .measurement-header-row .measurement-title {
        margin: 0;
        flex: 1;
        min-width: 250px;
    }

    .measurement-header-row .measurement-button {
        white-space: nowrap;
        margin: 0;
        flex-shrink: 0;
    }
/* ========== MEASUREMENT HEADER ROW END ========== */

/* ========== HARDWARE SPECIFICATIONS GRID START ========== */
.hardware-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 0;
}

.spec-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(244, 246, 248, 0.95) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 185, 35, 0.2);
    border-radius: 15px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .spec-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(226, 185, 35, 0.1), transparent);
        transition: left 0.5s ease;
    }

    .spec-card:hover::before {
        left: 100%;
    }

    .spec-card:hover {
        transform: translateY(-5px);
        border-color: #e2b923;
        box-shadow: 0 8px 25px rgba(226, 185, 35, 0.2);
    }

.spec-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #e2b923 0%, #d4a817 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.spec-card:hover .spec-icon {
    transform: rotate(360deg);
    box-shadow: 0 4px 15px rgba(226, 185, 35, 0.5);
}

.spec-icon i {
    font-size: 26px;
    color: #083d59;
}

.spec-details h5 {
    font-size: 14px;
    font-weight: 700;
    color: #083d59;
    margin-bottom: 5px;
    line-height: 1.2;
}

.spec-details p {
    font-size: 12px;
    color: #6c757d;
    margin: 0;
    line-height: 1.3;
}

/* Kiosk Hardware Visual Enhancements */
.kiosk-hardware-visual {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

    .kiosk-hardware-visual img {
        border-radius: 20px;
    }

/* Liquid Glass Badges */
/* ========================================
   Circular Floating Badge
   ======================================== */

.floating-badge {
    position: absolute;
    background: rgba(226, 185, 35, 0.15);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(226, 185, 35, 0.3);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 8px 32px rgba(226, 185, 35, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.3);
    animation: float 3s ease-in-out infinite;
    z-index: 2;
    transition: all 0.3s ease;
}

    .floating-badge:hover {
        background: rgba(226, 185, 35, 0.25);
        border-color: rgba(226, 185, 35, 0.5);
        transform: translateY(-5px);
        box-shadow: 0 12px 40px rgba(226, 185, 35, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.4);
    }

    .floating-badge i {
        font-size: 24px;
        color: #fff;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }

    .floating-badge span {
        font-size: 14px;
        font-weight: 700;
        color: #FFF;
        text-align: center;
        line-height: 1.1;
/*        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);*/
        max-width: 100%;
        word-wrap: break-word;
    }

/* Float Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Responsive Sizes */

/* ========================================
   END: Circular Floating Badge
   ======================================== */

/* Badge Positions */
.badge-1 {
    top: 20px;
    right: 20px;
    animation-delay: 0s;
}

.badge-2 {
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    animation-delay: 1s;
}

    .badge-2:hover {
        transform: translateY(calc(-50% - 5px));
    }

.badge-3 {
    bottom: 20px;
    right: 30px;
    animation-delay: 2s;
}

/* Float Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Responsive Design */

/* ========== HARDWARE SPECIFICATIONS GRID END ========== */

/* ========================================
   RESPONSIVE STYLES - ALL MEDIA QUERIES
   ======================================== */

/* ========== @media (max-width: 1200px) ========== */
@media (max-width: 1200px) {
    .temple-main-heading {
        font-size: 2.5rem;
    }

    .temple-visionary-title {
        font-size: 1.5rem;
    }

    .temple-equal-height-row {
        padding: 2rem;
    }
}

/* ========== @media (max-width: 992px) ========== */
@media (max-width: 992px) {
    .adventure-title {
        font-size: 1.75rem;
    }

    .adventure-description {
        font-size: 0.9rem;
    }

    .measurement-title {
        font-size: 1.9rem;
        margin-bottom: 2rem;
    }

    .measurement-container {
        padding: 4.5rem 2.5rem 2.5rem 2.5rem;
    }

    .temple-benefit-wrapper {
        padding: 3rem 1.5rem;
    }

    .temple-main-heading {
        font-size: 2.2rem;
    }

    .temple-visionary-title {
        font-size: 1.4rem;
    }

    .temple-court-card {
        min-height: 400px;
    }

    .temple-equal-height-row {
        margin-top: 20px;
        padding: 1.8rem;
    }

    .trusted-main-title {
        font-size: 1.6rem;
    }

    .trusted-highlight {
        font-size: 2.2rem;
    }

    .trusted-stats {
        gap: 2rem;
    }
}

/* ========== @media (max-width: 768px) ========== */
@media (max-width: 768px) {
    .adventure-title {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    .adventure-description {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    .adventure-button {
        width: 100%;
        justify-content: center;
    }

    .measurement-section {
        padding: 3rem 0;
    }

    .measurement-scroll-wrapper {
        margin-bottom: -2.5rem;
    }

    .measurement-scroll-icon {
        width: 50px;
        height: 50px;
    }

        .measurement-scroll-icon i {
            font-size: 1.2rem;
        }

    .measurement-container {
        padding: 4rem 2rem 2rem 2rem;
    }

    .measurement-title {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }

    .measurement-button {
        width: 100%;
        justify-content: center;
        padding: 0.9rem 2rem;
        font-size: 0.95rem;
    }

    .measurement-image {
        margin-top: 2rem;
    }

        .measurement-image img {
            max-width: 100%;
        }

    .temple-benefit-wrapper {
        padding: 2rem 1rem;
    }

    .temple-main-heading {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }

    .temple-benefit-tag-top {
        font-size: 13px;
        margin-bottom: 1.5rem;
    }

    /* Keep tag items side by side in mobile */
    .temple-tag-row {
        flex-direction: row;
        gap: 0.8rem;
        margin-bottom: 1.5rem;
    }

    .temple-tag-item {
        flex: 1;
        justify-content: center;
        font-size: 0.85rem;
        padding: 0.8rem 1rem;
        white-space: nowrap;
    }

    .temple-tag-icon {
        font-size: 1rem;
    }

    .temple-white-box {
        padding: 1.5rem 1.8rem;
    }

    .temple-box-title {
        font-size: 1.3rem;
    }

    .temple-box-content {
        margin-top: 1rem;
    }

    /* Keep buttons side by side in mobile */
    .temple-action-buttons {
        flex-direction: row;
        gap: 0.8rem;
        margin-top: 1.5rem;
    }

    .temple-enquire-button,
    .temple-quote-button {
        flex: 1;
        padding: 0.85rem 1.2rem;
        font-size: 0.85rem;
    }

    .temple-button-icon {
        font-size: 0.8rem;
    }

    /* Add gap above right column */
    .col-lg-6:last-child {
        margin-top: 2rem;
    }

    .temple-visionary-title {
        font-size: 1.3rem;
        margin-bottom: 1.2rem;
    }

    .temple-description-text {
        margin-bottom: 1.2rem;
    }

    .temple-percentage-number {
        font-size: 2.5rem;
    }

    .temple-member-text {
        font-size: 0.85rem;
    }

    /* FIX: Image display in mobile */
    .temple-court-card {
        min-height: 400px !important;
        display: block !important;
        width: 100% !important;
        position: relative !important;
        overflow: hidden;
    }

    .temple-court-bg {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 0 !important;
    }

    .temple-gradient-overlay {
        position: absolute !important;
        z-index: 1 !important;
    }

    .temple-equal-height-row {
        flex-direction: column;
        padding: 1.5rem;
        gap: 1.5rem;
    }

    .temple-february-badge {
        top: 15px;
        right: 15px;
        padding: 0.6rem 1.2rem;
        font-size: 0.75rem;
    }

    .temple-info-card {
        bottom: 15px;
        width: 92%;
        padding: 1.5rem 1.8rem;
    }

    .temple-stats-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .temple-blue-button {
        width: 100%;
        justify-content: center;
    }

    .trusted-section {
        padding: 2rem;
    }

    .trusted-main-title {
        font-size: 1.4rem;
    }

    .trusted-highlight {
        font-size: 2rem;
    }

    .trusted-divider {
        width: 100%;
        height: 1px;
        margin: 1.5rem 0;
    }

    .trusted-stats {
        flex-wrap: wrap;
        gap: 1.5rem;
        align-items: flex-start;
    }

    .trusted-feature-list {
        gap: 1.5rem;
        margin-top: 2rem;
    }

    .trusted-feature-item {
        padding: 1.2rem;
    }

    .trusted-icon-circle {
        width: 60px;
        height: 60px;
        min-width: 60px;
    }

        .trusted-icon-circle i {
            font-size: 1.1rem;
        }

    .trusted-feature-title {
        font-size: 1rem;
    }

    .audio-control-btn {
        width: 45px;
        height: 45px;
        font-size: 18px;
        left: 15px;
        bottom: 80px;
    }

    .audio-control-btn {
        width: 45px;
        height: 45px;
        font-size: 18px;
        left: 15px;
        bottom: 80px;
    }
}

/* ========== @media (max-width: 576px) ========== */
@media (max-width: 576px) {
    .adventure-title {
        font-size: 1.4rem;
    }

    .adventure-description {
        font-size: 0.8rem;
        margin-bottom: 0.8rem;
    }

    .adventure-button {
        padding: 0.75rem 1.5rem;
        font-size: 0.85rem;
    }

    .measurement-scroll-wrapper {
        margin-bottom: -2rem;
    }

    .measurement-scroll-icon {
        width: 45px;
        height: 45px;
    }

    .measurement-container {
        padding: 3.5rem 1.5rem 1.5rem 1.5rem;
    }

    .measurement-title {
        font-size: 1.4rem;
    }

    .measurement-button {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }

    .temple-main-heading {
        font-size: 1.6rem;
    }

    .temple-box-title {
        font-size: 1.2rem;
    }

    .temple-visionary-title {
        font-size: 1.2rem;
    }

    .temple-court-card {
        min-height: 380px !important;
    }

    .temple-percentage-number {
        font-size: 2.2rem;
    }

    .trusted-section {
        padding: 1.5rem;
    }

    .trusted-main-title {
        font-size: 1.3rem;
    }

    .trusted-highlight {
        font-size: 1.8rem;
    }

    .trusted-description {
        font-size: 0.85rem;
    }

    .trusted-stat-number {
        font-size: 1.5rem;
    }

    .trusted-avatar {
        width: 35px;
        height: 35px;
    }

    .trusted-avatars {
        height: 35px;
    }

    .trusted-icon-circle {
        width: 50px;
        height: 50px;
        min-width: 50px;
    }

        .trusted-icon-circle i {
            font-size: 1rem;
        }
}

/* ========== @media (max-width: 430px) ========== */
@media (max-width: 430px) {
    /* Stack tags if text is too long */
    .temple-tag-row {
        flex-wrap: wrap;
    }

    .temple-tag-item {
        min-width: calc(50% - 0.4rem);
        white-space: normal;
        text-align: center;
    }

    /* Stack buttons if needed */
    .temple-action-buttons {
        flex-wrap: wrap;
    }

    .temple-enquire-button,
    .temple-quote-button {
        min-width: calc(50% - 0.4rem);
    }

    /* FIX: Force image display on 430px screens */
    .temple-court-card {
        min-height: 380px !important;
        height: 380px;
        display: block !important;
        position: relative !important;
        overflow: hidden;
        width: 100% !important;
    }

    .temple-court-bg {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 0 !important;
    }

    .temple-gradient-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1 !important;
    }

    .temple-february-badge {
        top: 12px !important;
        right: 12px !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.7rem !important;
        z-index: 10 !important;
    }

    .temple-info-card {
        bottom: 12px !important;
        width: 94% !important;
        padding: 1.2rem 1.5rem !important;
        z-index: 10 !important;
    }
}

/* ========== @media (max-width: 360px) ========== */
@media (max-width: 360px) {
    /* FIX: Extra small devices - 360px */
    .temple-court-card {
        min-height: 350px !important;
        height: 350px;
    }

    .temple-main-heading {
        font-size: 1.5rem !important;
    }

    .temple-percentage-number {
        font-size: 2rem !important;
    }

    .temple-visionary-title {
        font-size: 1.1rem !important;
    }

    .temple-box-title {
        font-size: 1.1rem !important;
    }
}

/* ========== RESPONSIVE END ========== */

/* ========================================
   START: Client Relationships Section
   ======================================== */

.clients {
    background: #f5f5f7;
    padding: 60px 0;
}

    .clients .relationships .row {
        margin-left: -12px;
        margin-right: -12px;
    }

    .clients .relationships [class*="col-"] {
        padding-left: 12px;
        padding-right: 12px;
        margin-bottom: 24px;
    }

    .clients .relationships img {
        background: #fff;
        padding: 20px;
        border-radius: 15px;
        box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
        transition: all 0.3s cubic-bezier(0, 0, 0.5, 1);
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
        border: 2px solid transparent;
    }

        .clients .relationships img:hover {
            box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.16);
            transform: scale3d(1.02, 1.02, 1.02);
            border: 2px solid #e2b923;
        }

/* ========================================
   Tablet: 3-4 columns (768px - 991px)
   ======================================== */
@media only screen and (max-width: 991px) and (min-width: 768px) {
    .clients {
        padding: 50px 0;
    }

        .clients .relationships img {
            padding: 15px;
            max-height: 100px;
        }
}

/* ========================================
   Mobile: 2 columns (481px - 767px)
   ======================================== */
@media only screen and (max-width: 767px) {
    .clients {
        padding: 40px 0;
    }

        .clients .relationships [class*="col-"] {
            margin-bottom: 20px;
        }

        .clients .relationships img {
            padding: 15px;
            max-height: 90px;
        }
}

/* ========================================
   Small Mobile: 2 columns (320px - 480px)
   ======================================== */
@media only screen and (max-width: 480px) {
    .clients {
        padding: 30px 0;
    }

        .clients .relationships .row {
            margin-left: -8px;
            margin-right: -8px;
        }

        .clients .relationships [class*="col-"] {
            padding-left: 8px;
            padding-right: 8px;
            margin-bottom: 16px;
        }

        .clients .relationships img {
            padding: 12px;
            max-height: 80px;
            border-radius: 12px;
        }
}

/* ========================================
   END: Client Relationships Section
   ======================================== */
/* ========================================
   Establishment Section - With Liquid Glass Effect
   ======================================== */

.establishment-section-simple {
    background: #f5f5f7;
    padding: 80px 0 60px;
    position: relative;
    overflow: hidden;
}

    /* Animated background blur circles */
    .establishment-section-simple::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -100px;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(226, 185, 35, 0.15) 0%, transparent 70%);
        border-radius: 50%;
        filter: blur(60px);
        animation: floatBlur 20s ease-in-out infinite;
    }

    .establishment-section-simple::after {
        content: '';
        position: absolute;
        bottom: -80px;
        left: -80px;
        width: 350px;
        height: 350px;
        background: radial-gradient(circle, rgba(8, 61, 89, 0.1) 0%, transparent 70%);
        border-radius: 50%;
        filter: blur(60px);
        animation: floatBlur 25s ease-in-out infinite reverse;
    }

@keyframes floatBlur {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, -30px);
    }
}

.establishment-content-simple {
    padding-right: 30px;
    position: relative;
    z-index: 1;
}

.simple-badge {
    font-size: 13px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.simple-heading {
    font-size: 42px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 30px;
}

.simple-content p {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    text-align: justify;
    margin-bottom: 20px;
}

.simple-content strong {
    font-weight: 700;
    color: #1a1a1a;
}

/* Image Column - iOS STYLE LIQUID GLASS EFFECT */
.establishment-image-simple {
    position: relative;
    z-index: 1;
}

.simple-image {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    position: relative;
    z-index: 1;
}

/* iOS Style Liquid Glass Container */
.establishment-image-simple::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(226, 185, 35, 0.15) 100%);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    z-index: 0;
    animation: liquidGlowIOS 6s ease-in-out infinite;
}

/* iOS Style Glass Reflection */
.establishment-image-simple::after {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, transparent 30%, transparent 70%, rgba(226, 185, 35, 0.2) 100%);
    background-size: 200% 200%;
    pointer-events: none;
    z-index: 2;
    opacity: 0.6;
    animation: liquidShineIOS 8s ease-in-out infinite;
}

@keyframes liquidGlowIOS {
    0%, 100% {
        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 0 40px rgba(226, 185, 35, 0.15);
    }

    50% {
        box-shadow: 0 12px 48px rgba(31, 38, 135, 0.2), inset 0 2px 0 rgba(255, 255, 255, 1), inset 0 -2px 0 rgba(0, 0, 0, 0.08), 0 0 60px rgba(226, 185, 35, 0.3);
    }
}

@keyframes liquidShineIOS {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

/* Establishment Badge - Two Line Layout */
.establishment-badge {
    position: absolute;
    bottom: -20px;
    right: 30px;
    z-index: 3;
    animation: floatBadge 4s ease-in-out infinite;
}

.badge-circle {
    min-width: 240px;
    padding: 20px 30px;
    border-radius: 25px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid #e2b923;
    box-shadow: 0 10px 30px rgba(226, 185, 35, 0.3), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(226, 185, 35, 0.15);
}

.badge-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* First Line: EST. 2002 */
.badge-year {
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1;
}

.est-text {
    font-size: 14px;
    font-weight: 700;
    color: #999;
    letter-spacing: 1px;
}

.year-text {
    font-size: 36px;
    font-weight: 900;
    background: linear-gradient(135deg, #e2b923 0%, #c9a31f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Second Line: Mr. Rohit Kumar */
.badge-text {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

@keyframes floatBadge {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(1deg);
    }
}

/* Logo Circle - iOS Style Liquid Glass */
.logo-circle {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: 2px solid #e2b923;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    z-index: 3;
    animation: floatLogo 5s ease-in-out infinite;
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

@keyframes floatLogo {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-8px) scale(1.05);
    }
}

/* ========================================
   Why Choose Us Section - LIQUID GLASS CARDS
   ======================================== */

.why-choose-section-simple {
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
    padding: 80px 0;
    position: relative;
}

.simple-header {
    text-align: center;
    margin-bottom: 60px;
}

.simple-semi-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 14px;
    font-weight: 700;
    color: #999;
    text-transform: capitalize;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.header-line {
    height: 2px;
    width: 60px;
}

.simple-sect-title {
    font-size: 42px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0;
}

/* Features Grid */
.simple-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    perspective: 1000px;
}

/* LIQUID GLASS EFFECT CARDS - LEFT ALIGNED */
.simple-feature-card {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid #e7e7e7;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: left;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

    /* Liquid Glass Gradient Overlay */
    .simple-feature-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(226, 185, 35, 0.05) 0%, transparent 50%, rgba(8, 61, 89, 0.05) 100%);
        opacity: 0;
        transition: opacity 0.4s ease;
        border-radius: 20px;
        pointer-events: none;
    }

    /* Liquid Shine Effect */
    .simple-feature-card::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.3) 45%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.3) 55%, transparent 100%);
        transform: rotate(45deg) translateX(-100%);
        transition: transform 0.8s ease;
        pointer-events: none;
    }

    /* HOVER STATE - GOLD COLOR & REDUCED SHADOW */
    .simple-feature-card:hover {
        transform: translateY(-10px) scale(1.02);
        background: linear-gradient(135deg, rgba(226, 185, 35, 0.15) 0%, rgba(201, 163, 31, 0.1) 100%);
        border: 1px solid rgba(226, 185, 35, 0.5);
        border-radius: 20px;
        box-shadow: 0 12px 40px rgba(226, 185, 35, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(226, 185, 35, 0.2);
    }

        .simple-feature-card:hover::before {
            opacity: 1;
            background: linear-gradient(135deg, rgba(226, 185, 35, 0.1) 0%, transparent 50%, rgba(226, 185, 35, 0.05) 100%);
        }

        .simple-feature-card:hover::after {
            transform: rotate(45deg) translateX(100%);
        }

/* Shadow Number - EQUAL ALIGNMENT WITH ICON */
.feature-shadow-text {
    position: absolute;
    top: 40px;
    right: 30px;
    font-size: 80px;
    font-weight: 600;
    color: #f7f7f7;
    line-height: 1;
    margin: 0;
    transition: all 0.4s ease;
    transform-origin: center center;
}

.simple-feature-card:hover .feature-shadow-text {
    color: rgba(226, 185, 35, 0.2);
    transform: scale(1.05) rotate(-8deg);
}

/* Icon with Glass Effect - LEFT ALIGNED & BIGGER */
.feature-icon-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 25px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
    display: block;
}

.simple-feature-card:hover .feature-icon-img {
    transform: scale(1.15) translateY(-5px);
    filter: drop-shadow(0 8px 16px rgba(226, 185, 35, 0.4));
}

.simple-feature-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
    line-height: 1.3;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.simple-feature-card:hover h4 {
    color: #e2b923;
}

.simple-feature-card p {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin: 0;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.simple-feature-card:hover p {
    color: #444;
}

/* ========================================
   Responsive Design
   ======================================== */

@media only screen and (max-width: 1200px) {
    .simple-heading,
    .simple-sect-title {
        font-size: 36px;
    }

    .simple-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media only screen and (max-width: 991px) {
    .establishment-section-simple,
    .why-choose-section-simple {
        padding: 60px 0;
    }

    .establishment-content-simple {
        padding-right: 0;
        margin-top: 40px;
    }

    .simple-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 768px) {
    .establishment-section-simple,
    .why-choose-section-simple {
        padding: 40px 0;
    }

    .simple-heading,
    .simple-sect-title {
        font-size: 28px;
    }

    .simple-features {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .simple-feature-card {
        padding: 30px 20px;
    }

    .establishment-image-simple::before,
    .establishment-image-simple::after {
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        border-radius: 24px;
    }

    /* Responsive badge */
    .badge-circle {
        min-width: 200px;
        padding: 16px 24px;
    }

    .est-text {
        font-size: 12px;
    }

    .year-text {
        font-size: 28px;
    }

    .badge-text {
        font-size: 14px;
    }

    .logo-circle {
        width: 70px;
        height: 70px;
        top: 20px;
        right: 20px;
    }

    /* Aligned shadow number for tablet */
    .feature-shadow-text {
        top: 30px;
        right: 20px;
    }

    /* Smaller tilt on mobile */
    .simple-feature-card:hover .feature-shadow-text {
        transform: scale(1.03) rotate(-5deg);
    }

    /* Responsive icon size */
    .feature-icon-img {
        width: 70px;
        height: 70px;
    }
}

@media only screen and (max-width: 480px) {
    .simple-heading,
    .simple-sect-title {
        font-size: 24px;
    }

    .feature-shadow-text {
        font-size: 60px;
        top: 25px;
        right: 15px;
    }

    .simple-content p {
        font-size: 14px;
        line-height: 1.7;
    }

    .simple-feature-card {
        padding: 25px 15px;
    }

    .feature-icon-img {
        width: 60px;
        height: 60px;
    }

    /* Smaller badge on mobile */
    .badge-circle {
        min-width: 180px;
        padding: 14px 20px;
    }

    .est-text {
        font-size: 11px;
    }

    .year-text {
        font-size: 24px;
    }

    .badge-text {
        font-size: 13px;
    }

    .logo-circle {
        width: 60px;
        height: 60px;
        top: 15px;
        right: 15px;
        padding: 12px;
    }

    /* Minimal tilt on small mobile */
    .simple-feature-card:hover .feature-shadow-text {
        transform: scale(1.02) rotate(-3deg);
    }
}

/* ========================================
   END: Liquid Glass Effect - Complete CSS
   ======================================== */
/* ===== ABOUT XIPHIAS SECTION - START ===== */

/* Base styles (Mobile First - 320px+) */
.about-xiphias {
    padding: 40px 0;
    background-color: #fff;
}

/* Sidebar Navigation with Liquid Glass Effect */
.about-xiphias__sidebar {
    position: relative;
}

/* Liquid Glass Container */
.about-xiphias__liquid-glass {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.98) 50%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-radius: 20px;
    border: 1px solid rgba(226, 185, 35, 0.3);
    overflow: hidden;
    height: 100%;
    animation: liquidWave 8s ease-in-out infinite;
}

/* Glass Shine Effect */
.about-xiphias__glass-shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient( 45deg, transparent 30%, rgba(226, 185, 35, 0.1) 50%, transparent 70% );
    animation: glassShine 6s linear infinite;
    pointer-events: none;
    z-index: 0;
}

/* Liquid Wave Animation */
@keyframes liquidWave {
    0%, 100% {
        border-radius: 20px 20px 20px 20px;
        border-color: rgba(226, 185, 35, 0.3);
    }

    25% {
        border-radius: 25px 15px 25px 15px;
        border-color: rgba(252, 98, 47, 0.3);
    }

    50% {
        border-radius: 15px 25px 15px 25px;
        border-color: rgba(8, 61, 89, 0.3);
    }

    75% {
        border-radius: 20px 18px 22px 18px;
        border-color: rgba(226, 185, 35, 0.3);
    }
}

/* Glass Shine Animation */
@keyframes glassShine {
    0% {
        transform: translate(-100%, -100%) rotate(45deg);
    }

    100% {
        transform: translate(100%, 100%) rotate(45deg);
    }
}

/* Widget Container */
.about-xiphias__widget {
    padding: 20px;
    position: relative;
    z-index: 1;
}

.about-xiphias__widget-header {
    margin-bottom: 20px;
    padding: 12px 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(226, 185, 35, 0.4);
    background: linear-gradient(90deg, rgba(226, 185, 35, 0.1) 0%, transparent 100%);
    border-radius: 10px;
}

.about-xiphias__widget-title {
    font-size: 20px;
    font-weight: 700;
    color: #083d59;
    margin: 0;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Navigation List */
.about-xiphias__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-xiphias__nav-item {
    border-bottom: 1px solid rgba(226, 185, 35, 0.2);
    transition: all 0.3s ease;
}

    .about-xiphias__nav-item:last-child {
        border-bottom: none;
    }

    .about-xiphias__nav-item:hover {
        background: linear-gradient(90deg, rgba(226, 185, 35, 0.15) 0%, transparent 100%);
        border-radius: 8px;
    }

    /* Active State for Navigation Item */
    .about-xiphias__nav-item.active {
        background: linear-gradient(90deg, rgba(226, 185, 35, 0.2) 0%, rgba(252, 98, 47, 0.1) 100%);
        border-radius: 8px;
        border-left: 4px solid #e2b923;
    }

.about-xiphias__nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 10px;
    color: #083d59;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

    .about-xiphias__nav-link::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 60%;
        background: linear-gradient(90deg, #e2b923 0%, transparent 100%);
        border-radius: 0 4px 4px 0;
        transition: width 0.4s ease;
    }

    .about-xiphias__nav-link:hover {
        color: #e2b923;
        padding-left: 18px;
        text-shadow: 0 0 8px rgba(226, 185, 35, 0.3);
    }

        .about-xiphias__nav-link:hover::before {
            width: 4px;
        }

/* Active State for Navigation Link */
.about-xiphias__nav-item.active .about-xiphias__nav-link {
    color: #e2b923;
    padding-left: 14px;
    font-weight: 700;
}

    .about-xiphias__nav-item.active .about-xiphias__nav-link::before {
        width: 0;
    }

.about-xiphias__nav-arrow {
    color: #083d59;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(226, 185, 35, 0.1);
}

.about-xiphias__nav-link:hover .about-xiphias__nav-arrow {
    transform: translateX(5px) rotate(360deg);
    color: #e2b923;
    background: rgba(226, 185, 35, 0.25);
    box-shadow: 0 0 12px rgba(226, 185, 35, 0.4);
}

/* Active State for Navigation Arrow */
.about-xiphias__nav-item.active .about-xiphias__nav-arrow {
    color: #e2b923;
    background: rgba(226, 185, 35, 0.3);
    box-shadow: 0 0 8px rgba(226, 185, 35, 0.3);
}

/* Content Sections */
.about-xiphias__section-title {
    font-size: 24px;
    font-weight: 700;
    color: #083d59;
    margin-bottom: 15px;
    position: relative;
}

    .about-xiphias__section-title::after {
        content: '';
        display: block;
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #e2b923 0%, #fc622f 100%);
        margin-top: 8px;
    }

.about-xiphias__section-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #083d59;
    margin: 20px 0 15px;
}

.about-xiphias__section-text {
    font-size: 15px;
    line-height: 1.7;
    color: #555555;
    margin-bottom: 15px;
}

.about-xiphias__section-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Divider */
.about-xiphias__divider {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #e2b923 50%, transparent 100%);
    margin: 30px 0;
}

/* Content Box & Lists */
.about-xiphias__content-box {
    margin-top: 15px;
}

.about-xiphias__text-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-xiphias__list-item {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.6;
    color: #555555;
}

    .about-xiphias__list-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 8px;
        width: 8px;
        height: 8px;
        background: #e2b923;
        border-radius: 50%;
    }

/* Business Outlook Section */
.about-xiphias__business-outlook {
    margin-top: 0;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .about-xiphias {
        padding: 50px 0;
    }

    .about-xiphias__widget {
        padding: 25px;
    }

    .about-xiphias__widget-title {
        font-size: 22px;
    }

    .about-xiphias__nav-link {
        font-size: 16px;
        padding: 16px 12px;
    }

    .about-xiphias__nav-item.active .about-xiphias__nav-link {
        padding-left: 16px;
    }

    .about-xiphias__section-title {
        font-size: 26px;
    }

    .about-xiphias__section-text {
        font-size: 16px;
    }

    .about-xiphias__list-item {
        font-size: 16px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .about-xiphias {
        padding: 60px 0;
    }

    .about-xiphias__widget {
        padding: 30px;
    }

    .about-xiphias__widget-title {
        font-size: 24px;
    }

    .about-xiphias__liquid-glass {
        backdrop-filter: blur(14px) saturate(190%);
        -webkit-backdrop-filter: blur(14px) saturate(190%);
    }

    .about-xiphias__section-title {
        font-size: 28px;
    }

        .about-xiphias__section-title::after {
            width: 70px;
            height: 4px;
        }

    .about-xiphias__section-subtitle {
        font-size: 18px;
    }

    .about-xiphias__divider {
        margin: 35px 0;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .about-xiphias {
        padding: 80px 0;
    }

    .about-xiphias__widget {
        padding: 35px;
    }

    .about-xiphias__liquid-glass {
        backdrop-filter: blur(16px) saturate(200%);
        -webkit-backdrop-filter: blur(16px) saturate(200%);
    }

    .about-xiphias__widget-title {
        font-size: 26px;
    }

    .about-xiphias__nav-link {
        padding: 18px 12px;
    }

    .about-xiphias__nav-item.active .about-xiphias__nav-link {
        padding-left: 18px;
    }

    .about-xiphias__section-title {
        font-size: 32px;
    }

    .about-xiphias__divider {
        margin: 40px 0;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .about-xiphias {
        padding: 100px 0;
    }

    .about-xiphias__widget {
        padding: 40px;
    }

    .about-xiphias__section-title {
        font-size: 25px;
    }

    .about-xiphias__section-text {
        font-size: 17px;
        line-height: 1.8;
    }

    .about-xiphias__list-item {
        font-size: 17px;
        margin-bottom: 14px;
    }
}

/* Extra extra large devices (TV/Projector screens, 1920px and up) */
@media (min-width: 1920px) {
    .about-xiphias {
        padding: 120px 0;
    }

    .about-xiphias__widget {
        padding: 45px;
    }

    .about-xiphias__liquid-glass {
        border-radius: 24px;
    }

    .about-xiphias__widget-title {
        font-size: 30px;
    }

    .about-xiphias__nav-link {
        font-size: 18px;
        padding: 20px 15px;
    }

    .about-xiphias__nav-item.active .about-xiphias__nav-link {
        padding-left: 20px;
    }

    .about-xiphias__nav-arrow {
        width: 28px;
        height: 28px;
    }

    .about-xiphias__section-title {
        font-size: 42px;
    }

        .about-xiphias__section-title::after {
            width: 80px;
            height: 5px;
        }

    .about-xiphias__section-subtitle {
        font-size: 20px;
    }

    .about-xiphias__section-text {
        font-size: 18px;
        line-height: 1.9;
    }

    .about-xiphias__list-item {
        font-size: 18px;
        margin-bottom: 16px;
        padding-left: 30px;
    }

        .about-xiphias__list-item::before {
            width: 10px;
            height: 10px;
            top: 10px;
        }

    .about-xiphias__divider {
        margin: 50px 0;
    }
}

/* ===== ABOUT XIPHIAS SECTION - END ===== */



/* ========== REVOLUTIONARY TIMELINE DESIGN - CARD GRID ========== */

.timeline-modern {
    position: relative;
    padding: 30px 0;
    background-image: repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(8, 61, 89, 0.02) 50px, rgba(8, 61, 89, 0.02) 51px), repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(8, 61, 89, 0.02) 50px, rgba(8, 61, 89, 0.02) 51px);
    overflow: hidden;
}

    .timeline-modern::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(8, 61, 89, 0.02) 50px, rgba(8, 61, 89, 0.02) 51px), repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(8, 61, 89, 0.02) 50px, rgba(8, 61, 89, 0.02) 51px);
        pointer-events: none;
    }

/* Header Section */
.timeline-modern__header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 10;
}

.timeline-modern__header-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #e2b923 0%, #d4a91e 100%);
    border-radius: 30px;
    margin-bottom: 30px;
    box-shadow: 0 15px 50px rgba(226, 185, 35, 0.5), inset 0 -3px 10px rgba(0, 0, 0, 0.2), inset 0 3px 10px rgba(255, 255, 255, 0.5);
    animation: float 4s ease-in-out infinite;
    transform-style: preserve-3d;
}

    .timeline-modern__header-icon i {
        font-size: 50px;
        color: #013876;
        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
    }

.timeline-modern__header-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(226, 185, 35, 0.4) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    animation: pulse-glow 3s ease-in-out infinite;
    border-radius: 30px;
    z-index: -1;
}

@keyframes pulse-glow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotateX(0deg);
    }

    50% {
        transform: translateY(-15px) rotateX(5deg);
    }
}

.timeline-modern__title {
    font-size: 35px;
    font-weight: 800;
    color: #013876;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #013876 0%, #083d59 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.timeline-modern__subtitle {
    font-size: 18px;
    color: #666;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
}

/* Timeline Grid */
.timeline-modern__grid {
    position: relative;
}

/* Year Block */
.timeline-modern__year-block {
    margin-bottom: 80px;
    position: relative;
}

.timeline-modern__year-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

.timeline-modern__year-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: slideInDown 0.8s ease-out;
}

@keyframes slideInDown {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Liquid Water Glass Effect for Year Badge */
.timeline-modern__year-badge span {
    position: relative;
    display: inline-block;
    padding: 20px 50px;
    /* Liquid glass water background */
    background: linear-gradient(135deg, rgba(226, 185, 35, 0.25) 0%, rgba(226, 185, 35, 0.4) 50%, rgba(226, 185, 35, 0.25) 100%) border-box, linear-gradient(to right, transparent, transparent) padding-box;
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 2.5px solid rgba(226, 185, 35, 0.5);
    border-radius: 60px;
    color: #013876;
    font-size: 32px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    box-shadow: 0 8px 32px rgba(8, 61, 89, 0.15), inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(255, 255, 255, 0.2), 0 0 40px rgba(226, 185, 35, 0.25);
    z-index: 2;
    overflow: hidden;
}

    /* Flowing liquid shine animation */
    .timeline-modern__year-badge span::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -150%;
        width: 200%;
        height: 200%;
        background: linear-gradient( 115deg, transparent 0%, transparent 35%, rgba(255, 255, 255, 0.2) 45%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.2) 55%, transparent 65%, transparent 100% );
        animation: liquidFlow 5s ease-in-out infinite;
        transform: rotate(25deg);
    }

@keyframes liquidFlow {
    0% {
        left: -150%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: 150%;
        opacity: 0;
    }
}

/* Floating water bubbles effect */
.timeline-modern__year-badge span::after {
    content: '';
    position: absolute;
    top: 15%;
    right: 20%;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 100%);
    border-radius: 50%;
    box-shadow: -25px 12px 0 -1px rgba(255, 255, 255, 0.7), 18px 20px 0 -2px rgba(255, 255, 255, 0.6), -40px 28px 0 -2px rgba(255, 255, 255, 0.5), 30px 8px 0 -1px rgba(255, 255, 255, 0.65), -15px 35px 0 -3px rgba(255, 255, 255, 0.4);
    animation: floatingBubbles 4s ease-in-out infinite;
}

@keyframes floatingBubbles {
    0%, 100% {
        opacity: 0.7;
        transform: translateY(0px) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateY(-4px) scale(1.1);
    }
}

/* Liquid glass reflection highlight */
.timeline-modern__year-badge span .glass-highlight {
    position: absolute;
    top: 5%;
    left: 10%;
    width: 30%;
    height: 40%;
    background: linear-gradient( 135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100% );
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    filter: blur(8px);
    pointer-events: none;
}


/* Award Card */
.timeline-modern__card {
    position: relative;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100% );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(226, 185, 35, 0.2);
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(8, 61, 89, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .timeline-modern__card::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient( 45deg, transparent 30%, rgba(226, 185, 35, 0.1) 50%, transparent 70% );
        transform: rotate(0deg);
        transition: transform 0.8s ease;
    }

    .timeline-modern__card:hover::before {
        transform: rotate(180deg);
    }

    .timeline-modern__card:hover {
        transform: translateY(-15px) scale(1.02);
        box-shadow: 0 30px 80px rgba(8, 61, 89, 0.25), inset 0 2px 0 rgba(255, 255, 255, 1), 0 0 0 3px rgba(226, 185, 35, 0.5);
        border-color: rgba(226, 185, 35, 0.6);
    }

/* Card Header */
.timeline-modern__card-header {
    padding: 25px 25px 15px;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.timeline-modern__card-icon {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, rgba(226, 185, 35, 0.25) 0%, rgba(226, 185, 35, 0.35) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(226, 185, 35, 0.3), inset 0 2px 5px rgba(255, 255, 255, 0.5);
    transition: all 0.4s ease;
}

.timeline-modern__card:hover .timeline-modern__card-icon {
    transform: rotateY(360deg);
    background: linear-gradient(135deg, rgba(226, 185, 35, 0.4) 0%, rgba(226, 185, 35, 0.5) 100%);
}

.timeline-modern__card-icon i {
    font-size: 26px;
    color: #013876;
}

.timeline-modern__card-date {
    position: relative;
    padding: 8px 18px;
    /* Liquid glass background with same blue tones */
    background: linear-gradient(135deg, rgba(8, 61, 89, 0.12) 0%, rgba(8, 61, 89, 0.18) 50%, rgba(8, 61, 89, 0.12) 100% );
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1.5px solid rgba(8, 61, 89, 0.3);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #013876;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(8, 61, 89, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.2);
    overflow: hidden;
    transition: all 0.3s ease;
}

    /* Liquid shine flow effect */
    .timeline-modern__card-date::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -100%;
        width: 100%;
        height: 200%;
        background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100% );
        animation: dateShine 3s ease-in-out infinite;
        transform: skewX(-20deg);
    }

@keyframes dateShine {
    0% {
        left: -100%;
    }

    50%, 100% {
        left: 200%;
    }
}

/* Water droplet decoration */
.timeline-modern__card-date::after {
    content: '';
    position: absolute;
    top: 20%;
    right: 12%;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 100%);
    border-radius: 50%;
    box-shadow: -12px 6px 0 -1px rgba(255, 255, 255, 0.6), 8px 10px 0 -1px rgba(255, 255, 255, 0.5), -20px 15px 0 -2px rgba(255, 255, 255, 0.4);
    animation: dateDroplets 2.5s ease-in-out infinite;
}

@keyframes dateDroplets {
    0%, 100% {
        opacity: 0.7;
        transform: translateY(0px);
    }

    50% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

/* Hover effect - enhance liquid appearance */
.timeline-modern__card-date:hover {
    background: linear-gradient(135deg, rgba(8, 61, 89, 0.18) 0%, rgba(8, 61, 89, 0.25) 50%, rgba(8, 61, 89, 0.18) 100% );
    border-color: rgba(8, 61, 89, 0.5);
    box-shadow: 0 6px 20px rgba(8, 61, 89, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}


/* Card Body */
.timeline-modern__card-body {
    padding: 0 25px 25px;
    position: relative;
    z-index: 2;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.timeline-modern__card-title {
    font-size: 16px;
    font-weight: 700;
    color: #013876;
    margin-bottom: 20px;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-height: 50px;
}

.timeline-modern__card-image {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(8, 61, 89, 0.15);
    margin-bottom: 15px;
}

    .timeline-modern__card-image img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

.timeline-modern__card:hover .timeline-modern__card-image img {
    transform: scale(1.1);
}

.timeline-modern__card-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-top: auto;
}

/* Footer */
.timeline-modern__footer {
    text-align: center;
    margin-top: 80px;
    position: relative;
}

.timeline-modern__footer-line {
    width: 200px;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, #e2b923 50%, transparent 100%);
    margin: 0 auto 30px;
    border-radius: 2px;
    box-shadow: 0 2px 10px rgba(226, 185, 35, 0.5);
}

.timeline-modern__footer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #e2b923 0%, #d4a91e 100%);
    border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 0 10px 40px rgba(226, 185, 35, 0.5), inset 0 2px 10px rgba(255, 255, 255, 0.4);
    animation: spin 20s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.timeline-modern__footer-badge i {
    font-size: 32px;
    color: #013876;
}

.timeline-modern__footer-text {
    font-size: 20px;
    font-weight: 700;
    text-align:center;
    color: #013876;
    font-style: italic;
    letter-spacing: 1px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .timeline-modern__title {
        font-size: 32px;
    }

    .timeline-modern__year-badge span {
        font-size: 24px;
        padding: 15px 35px;
    }

    .timeline-modern__card-title {
        font-size: 14px;
        min-height: auto;
    }
}

/* ========== END REVOLUTIONARY TIMELINE DESIGN ========== */

/* ========== PREMIUM LEADERSHIP SECTION ========== */

.leadership {
    position: relative;
    background: #f5f5f7;
    padding: 100px 0;
    overflow: hidden;
}

   

/* Content Wrapper */
.leadership__content-wrapper {
    position: relative;
    z-index: 2;
    animation: slideInLeft 1s ease-out;
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Subtitle with Lines */
.leadership__subtitle-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.leadership__subtitle-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #e2b923 50%, transparent 100%);
    max-width: 80px;
    animation: lineExpand 2s ease-out;
}

@keyframes lineExpand {
    0% {
        max-width: 0;
        opacity: 0;
    }

    100% {
        max-width: 80px;
        opacity: 1;
    }
}

.leadership__subtitle {
    font-size: 13px;
    font-weight: 700;
    color: #e2b923;
    text-transform: uppercase;
    letter-spacing: 3px;
    white-space: nowrap;
    position: relative;
    animation: fadeIn 1.5s ease-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Premium Title with Glow Effect */
.leadership__title {
    position: relative;
    font-size: 35px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    display: inline-block;
}

.leadership__title-text {
    position: relative;
    display: inline-block;
    background: linear-gradient(135deg, #013876 0%, #083d59 50%, #e2b923 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 5s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.leadership__title-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(226, 185, 35, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    animation: pulse 3s ease-in-out infinite;
    z-index: -1;
    filter: blur(30px);
}

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }
}

/* Description */
.leadership__description {
    font-size: 16px;
    line-height: 1.9;
    color: #555;
    margin-bottom: 15px;
    text-align: justify;
    animation: slideUp 1.2s ease-out 0.3s both;
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Advanced Social Media Links */
.leadership__social-media {
    display: flex;
    gap: 18px;
    margin-top: 30px;
    animation: slideUp 1.4s ease-out 0.6s both;
}

.leadership__social-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid rgba(226, 185, 35, 0.3);
    border-radius: 50%;
    color: #013876;
    font-size: 20px;
    box-shadow: 0 8px 25px rgba(8, 61, 89, 0.12), inset 0 2px 5px rgba(255, 255, 255, 0.8);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    overflow: hidden;
}

.leadership__social-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: linear-gradient(135deg, #e2b923 0%, #d4a91e 100%);
    border-radius: 50%;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: translate(-50%, -50%);
    z-index: -1;
}

.leadership__social-link:hover .leadership__social-bg {
    width: 150%;
    height: 150%;
}

.leadership__social-link:hover {
    transform: translateY(-8px) rotate(360deg) scale(1.15);
    border-color: #e2b923;
    box-shadow: 0 15px 40px rgba(226, 185, 35, 0.4), inset 0 2px 10px rgba(255, 255, 255, 1), 0 0 30px rgba(226, 185, 35, 0.6);
    color: #fff;
}

.leadership__social-link i {
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.leadership__social-link:hover i {
    transform: scale(1.2);
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

/* Premium Image Card */
.leadership__image-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    animation: slideInRight 1.2s ease-out;
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.leadership__image-wrapper {
    position: relative;
    width: 100%;
    max-width: 380px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(8, 61, 89, 0.2), 0 0 0 1px rgba(255, 255, 255, 1), 0 0 60px rgba(226, 185, 35, 0.15);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 3px solid rgba(226, 185, 35, 0.25);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.leadership__image-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient( from 0deg, transparent 0%, rgba(226, 185, 35, 0.3) 10%, transparent 20%, transparent 80%, rgba(226, 185, 35, 0.3) 90%, transparent 100% );
    animation: rotateGlow 8s linear infinite;
    opacity: 0;
    transition: opacity 0.6s ease;
}

@keyframes rotateGlow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.leadership__image-wrapper:hover .leadership__image-glow {
    opacity: 1;
}

.leadership__image-wrapper:hover {
    transform: translateY(-15px) scale(1.03);
    box-shadow: 0 35px 100px rgba(8, 61, 89, 0.3), 0 0 0 4px rgba(226, 185, 35, 0.6), 0 0 80px rgba(226, 185, 35, 0.4);
    border-color: rgba(226, 185, 35, 0.8);
}

.leadership__image {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    z-index: 2;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.leadership__image-wrapper:hover .leadership__image {
    transform: scale(1.08);
}

/* Liquid Glass Shine Effect */
.leadership__image-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 100% );
    animation: shine 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
}

@keyframes shine {
    0% {
        left: -100%;
    }

    20%, 100% {
        left: 200%;
    }
}

/* Premium Animated Badge */
.leadership__badge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -60px;
    padding: 22px 40px;
    background: #e2b923;
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    border: 2.5px solid rgba(226, 185, 35, 0.5);
    border-radius: 25px;
    box-shadow: 0 10px 40px rgba(8, 61, 89, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(255, 255, 255, 0.3), 0 0 50px rgba(226, 185, 35, 0.2);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: badgeFloat 4s ease-in-out infinite;
}

@keyframes badgeFloat {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Animated Particles */
.leadership__badge-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.6) 2px, transparent 2px), radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 0.5) 1.5px, transparent 1.5px), radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.4) 1px, transparent 1px), radial-gradient(circle at 85% 25%, rgba(255, 255, 255, 0.7) 2.5px, transparent 2.5px);
    background-size: 100% 100%;
    animation: particleFloat 8s ease-in-out infinite;
    opacity: 0.8;
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.8;
    }

    50% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

.leadership__badge:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 20px 60px rgba(8, 61, 89, 0.3), inset 0 3px 0 rgba(255, 255, 255, 0.8), inset 0 -3px 0 rgba(255, 255, 255, 0.4), 0 0 80px rgba(226, 185, 35, 0.5);
    border-color: rgba(226, 185, 35, 0.8);
}

.leadership__badge-name {
    font-size: 22px;
    font-weight: 800;
    color: #013876;
    text-align: center;
    margin-bottom: 5px;
    position: relative;
    z-index: 2;
    letter-spacing: 0.5px;
}

.leadership__badge-title {
    font-size: 14px;
    font-weight: 700;
    color: #666;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    z-index: 2;
}

/* Responsive Design */
@media (max-width: 991px) {
    .leadership {
        padding: 70px 0;
    }

    .leadership__title {
        font-size: 40px;
    }

    .leadership__image-card {
        margin-top: 50px;
    }
}

@media (max-width: 768px) {
    .leadership {
        padding: 60px 0;
    }

    .leadership__title {
        font-size: 36px;
    }

    .leadership__description {
        font-size: 15px;
        text-align: left;
    }

    .leadership__social-media {
        justify-content: center;
        flex-wrap: wrap;
    }

    .leadership__social-link {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .leadership__image-wrapper {
        max-width: 300px;
    }

    .leadership__badge {
        padding: 20px 35px;
    }

    .leadership__subtitle-wrapper {
        flex-direction: column;
        gap: 8px;
    }

    .leadership__subtitle-line {
        max-width: 50px;
    }
}

@media (max-width: 576px) {
    .leadership {
        padding: 50px 0;
    }

    .leadership__title {
        font-size: 30px;
    }

    .leadership__subtitle {
        font-size: 11px;
    }

    .leadership__description {
        font-size: 14px;
        line-height: 1.7;
    }

    .leadership__social-link {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .leadership__image-wrapper {
        max-width: 260px;
    }

    .leadership__badge {
        padding: 18px 30px;
    }

    .leadership__badge-name {
        font-size: 18px;
    }

    .leadership__badge-title {
        font-size: 12px;
    }
}

/* ========== END PREMIUM LEADERSHIP SECTION ========== */

/* ========== TEAM MODERN WITH GLASS OVERLAY ========== */

.team-modern {
    padding: 5px 0 80px 0;
}

.team-modern__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

/* Card Container */
.team-modern__card {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 30px;
    cursor: pointer;
    transition: transform 0.4s ease;
}

    .team-modern__card:hover {
        transform: scale(1.02);
    }

/* Full-size Image */
.team-modern__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.team-modern__card:hover .team-modern__image {
    transform: scale(1.05);
}

/* Glass Overlay Effect */
.team-modern__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.85) 100% );
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: all 0.5s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 40px 30px;
}

.team-modern__card:hover .team-modern__overlay {
    background: linear-gradient( 180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.9) 100% );
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
}
/* Split Header Design (2025 Trend) */
.team-section__header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 80px;
    position: relative;
}

    .team-section__header::after {
        content: '';
        position: absolute;
        bottom: -40px;
        left: 0;
        width: 150px;
        height: 4px;
        background: linear-gradient(90deg, #e2b923 0%, transparent 100%);
        border-radius: 2px;
    }

.team-section__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(226, 185, 35, 0.15) 0%, rgba(226, 185, 35, 0.08) 100%);
    border: 1.5px solid rgba(226, 185, 35, 0.3);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    color: #e2b923;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

    .team-section__badge i {
        font-size: 14px;
    }

.team-section__title {
    font-size: 35px;
    font-weight: 600;
    line-height: 1.1;
    color: #013876;
    margin: 0;
}

.team-section__title-accent {
    background: linear-gradient(135deg, #e2b923 0%, #d4a91e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}

.team-section__description {
    font-size: 17px;
    line-height: 1.8;
    color: #666;
    margin: 0;
    max-width: 500px;
}

/* Responsive Breakpoints */

/* Large Tablets and Small Desktops (1024px and below) */
@media (max-width: 1024px) {
    .team-section__header {
        gap: 40px;
        margin-bottom: 60px;
    }

        .team-section__header::after {
            bottom: -30px;
            width: 120px;
        }

    .team-section__title {
        font-size: 42px;
    }

    .team-section__description {
        font-size: 16px;
        line-height: 1.7;
    }
}

/* Tablets (768px and below) */
@media (max-width: 768px) {
    .team-section__header {
        grid-template-columns: 1fr;
        gap: 30px;
        align-items: start;
        margin-bottom: 50px;
    }

        .team-section__header::after {
            bottom: -25px;
            width: 100px;
            left: 50%;
            transform: translateX(-50%);
        }

    .team-section__header-left,
    .team-section__header-right {
        text-align: center;
    }

    .team-section__badge {
        font-size: 12px;
        padding: 8px 16px;
        gap: 8px;
        margin-bottom: 15px;
    }

        .team-section__badge i {
            font-size: 13px;
        }

    .team-section__title {
        font-size: 36px;
    }

    .team-section__description {
        font-size: 15px;
        line-height: 1.7;
        max-width: 100%;
        margin: 0 auto;
    }
}

/* Mobile (576px and below) */
@media (max-width: 576px) {
    .team-section__header {
        gap: 25px;
        margin-bottom: 40px;
    }

        .team-section__header::after {
            bottom: -20px;
            width: 80px;
            height: 3px;
        }

    .team-section__badge {
        font-size: 11px;
        padding: 7px 14px;
        letter-spacing: 1px;
        margin-bottom: 12px;
    }

        .team-section__badge i {
            font-size: 12px;
        }

    .team-section__title {
        font-size: 28px;
        line-height: 1.2;
    }

        .team-section__title br {
            display: none;
        }

    .team-section__description {
        font-size: 14px;
        line-height: 1.6;
    }
}

/* Extra Small Mobile (400px and below) */
@media (max-width: 400px) {
    .team-section__header {
        gap: 20px;
        margin-bottom: 35px;
    }

    .team-section__badge {
        font-size: 10px;
        padding: 6px 12px;
    }

    .team-section__title {
        font-size: 24px;
    }

    .team-section__description {
        font-size: 13px;
    }
}

/* Content Container */
.team-modern__content {
    text-align: center;
    color: #ffffff;
    z-index: 2;
    width: 100%;
}

.team-modern__role {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    text-transform: capitalize;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.team-modern__name {
    font-size: 32px;
    font-weight: 600;
    color: #e5c039;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9);
    transition: margin 0.4s ease;
}

/* Add margin when hovering to make space for social icons */
.team-modern__card:hover .team-modern__name {
    margin-bottom: 20px;
}

/* Social Icons - Hidden by default, visible on hover */
.team-modern__social {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;
    height: 0;
}

.team-modern__card:hover .team-modern__social {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    height: auto;
}

.team-modern__social a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

    .team-modern__social a:hover {
        color: #e2b923;
        background: rgba(255, 255, 255, 0.25);
        border-color: #e2b923;
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    }

    .team-modern__social a i {
        z-index: 2;
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .team-modern__grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 25px;
    }

    .team-modern__name {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .team-modern {
        padding: 60px 0;
    }

    .team-modern__grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }

    .team-modern__overlay {
        padding: 30px 20px;
    }

    .team-modern__role {
        font-size: 13px;
    }

    .team-modern__name {
        font-size: 24px;
    }

    .team-modern__card:hover .team-modern__name {
        margin-bottom: 15px;
    }

    .team-modern__social {
        gap: 12px;
    }

        .team-modern__social a {
            width: 42px;
            height: 42px;
            font-size: 16px;
        }
}

@media (max-width: 576px) {
    .team-modern__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .team-modern__card {
        aspect-ratio: 3 / 4;
    }

    .team-modern__overlay {
        padding: 35px 20px;
    }

    .team-modern__name {
        font-size: 22px;
    }

    .team-modern__card:hover .team-modern__name {
        margin-bottom: 12px;
    }

    .team-modern__social {
        gap: 10px;
    }

        .team-modern__social a {
            width: 40px;
            height: 40px;
            font-size: 15px;
        }
}

/* ========== END TEAM MODERN ========== */
/* ========== CREATIVE CERTIFICATIONS SHOWCASE - EQUAL SIZE ========== */

.certifications-showcase {
    position: relative;
    padding: 20px 0;
}

/* Floating Badge */
.certifications-showcase__badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 25px;
    background: linear-gradient( 135deg, rgba(226, 185, 35, 0.2) 0%, rgba(226, 185, 35, 0.35) 50%, rgba(226, 185, 35, 0.2) 100% );
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 2px solid rgba(226, 185, 35, 0.4);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    color: #013876;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 30px;
    box-shadow: 0 8px 30px rgba(226, 185, 35, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    animation: floatBadge 3s ease-in-out infinite;
}

@keyframes floatBadge {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}

.certifications-showcase__badge i {
    font-size: 16px;
    color: #e2b923;
}

/* Decorative Floating Orbs */
.certifications-showcase__decorative-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.certifications-showcase__decorative-orb--1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(226, 185, 35, 0.15) 0%, transparent 70%);
    top: 10%;
    right: -10%;
    animation: float1 12s ease-in-out infinite;
}

.certifications-showcase__decorative-orb--2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(8, 61, 89, 0.1) 0%, transparent 70%);
    bottom: 5%;
    left: -8%;
    animation: float2 15s ease-in-out infinite;
}

@keyframes float1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-30px, 40px) scale(1.1);
    }
}

@keyframes float2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(40px, -30px) scale(1.15);
    }
}

/* Equal Size Grid - 2x2 Layout */
.certifications-showcase__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    position: relative;
    z-index: 1;
}

/* Certificate Card Base - Equal Sizes */
.cert-card {
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100% );
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 30px;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    animation: cardAppear 0.8s ease-out backwards;
}

    .cert-card:nth-child(1) {
        animation-delay: 0.1s;
    }

    .cert-card:nth-child(2) {
        animation-delay: 0.2s;
    }

    .cert-card:nth-child(3) {
        animation-delay: 0.3s;
    }

    .cert-card:nth-child(4) {
        animation-delay: 0.4s;
    }

@keyframes cardAppear {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(-5deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Animated Conic Glow */
.cert-card__glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient( from 0deg, transparent, rgba(226, 185, 35, 0.2), transparent, rgba(8, 61, 89, 0.15), transparent );
    animation: rotateGlow 10s linear infinite;
    opacity: 0;
    transition: opacity 0.6s ease;
}

@keyframes rotateGlow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.cert-card:hover .cert-card__glow {
    opacity: 1;
}

.cert-card:hover {
    transform: translateY(-15px) rotate(2deg);
    box-shadow: 0 30px 80px rgba(8, 61, 89, 0.25), 0 0 0 1px rgba(226, 185, 35, 0.5), inset 0 1px 0 rgba(255, 255, 255, 1);
    border-color: rgba(226, 185, 35, 0.4);
}

/* Card Inner Content */
.cert-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Floating Label */
.cert-card__label {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(226, 185, 35, 0.15) 0%, rgba(226, 185, 35, 0.08) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 185, 35, 0.25);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #e2b923;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s ease;
    z-index: 3;
}

.cert-card:hover .cert-card__label {
    opacity: 1;
    transform: translateY(0);
}

/* Image - Full Size Display */
.cert-card__image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15));
}

.cert-card:hover .cert-card__image {
    transform: scale(1.08);
    filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.25));
}

/* Liquid Glass Shine */
.cert-card__shine {
    position: absolute;
    top: -100%;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient( 135deg, transparent 0%, rgba(255, 255, 255, 0.3) 45%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.3) 55%, transparent 100% );
    animation: shine 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shine {
    0% {
        top: -100%;
        left: -100%;
    }

    50%, 100% {
        top: 100%;
        left: 100%;
    }
}

/* Responsive Design */
@media (max-width: 991px) {
    .certifications-showcase__grid {
        gap: 20px;
    }

    .cert-card__inner {
        padding: 25px;
    }
}

@media (max-width: 768px) {
    .certifications-showcase__badge {
        font-size: 12px;
        padding: 10px 20px;
        margin-bottom: 25px;
    }

    .certifications-showcase__grid {
        gap: 15px;
    }

    .cert-card__inner {
        padding: 20px;
    }

    .cert-card__label {
        font-size: 10px;
        padding: 6px 14px;
        top: 15px;
        left: 15px;
    }
}

@media (max-width: 576px) {
    .certifications-showcase__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cert-card {
        aspect-ratio: 4 / 3;
    }

    .cert-card__inner {
        padding: 25px 20px;
    }

    .cert-card:hover {
        transform: translateY(-10px) rotate(0deg);
    }

    .certifications-showcase__decorative-orb {
        display: none;
    }
}

/* ========== END CREATIVE CERTIFICATIONS SHOWCASE ========== */

/* ===================================
   LIFE AT XIPHIAS - GLASSMORPHISM
   =================================== */

/* ===================================
   LIFE AT XIPHIAS - GLASSMORPHISM
   Naming Convention: lax-[block]__[element]--[modifier]
   =================================== */

/* ========== ANIMATED BACKGROUND ========== */
.lax-page-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 50%, #f0f4f8 100%);
    z-index: -2;
    overflow: hidden;
}

.lax-page-bg__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: laxFloat 20s ease-in-out infinite;
}

.lax-page-bg__orb--gold {
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, #e2b923, #d4a91f);
    top: -10%;
    left: -5%;
    animation-delay: 0s;
}

.lax-page-bg__orb--pink {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #083d59, #0a5073);
    top: 50%;
    right: -10%;
    animation-delay: 7s;
}

.lax-page-bg__orb--blue {
    width: 350px;
    height: 350px;
    background: linear-gradient(135deg, #083d59, #e2b923);
    bottom: -10%;
    left: 30%;
    animation-delay: 14s;
}

@keyframes laxFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(50px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-30px, 30px) scale(0.9);
    }
}

/* ========== GLASS CONTAINER COMPONENT ========== */
.lax-glass {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 2rem;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(8, 61, 89, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    position: relative;
}

.lax-glass--large {
    padding: 2.5rem;
}

@media (max-width: 767px) {
    .lax-glass {
        padding: 1.5rem;
    }

    .lax-glass--large {
        padding: 1.5rem;
    }
}

/* ========== BADGE COMPONENT ========== */
.lax-badge {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    background: rgba(226, 185, 35, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 185, 35, 0.3);
    border-radius: 2rem;
    color: #c99c1a;
    font-size: 0.813rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

.lax-badge--gradient {
    background: linear-gradient(135deg, rgba(226, 185, 35, 0.2), rgba(8, 61, 89, 0.2));
    border: 1px solid rgba(226, 185, 35, 0.4);
    color: #083d59;
}

/* ========== ABOUT SECTION ========== */
.lax-about {
    padding: 3rem 0;
    position: relative;
}

@media (max-width: 767px) {
    .lax-about {
        padding: 2rem 0;
    }
}

.lax-section-header {
    margin-bottom: 2rem;
}

.lax-section-header--centered {
    text-align: center;
    margin-bottom: 2rem;
}

.lax-section-header__subtitle {
    font-size: 0.938rem;
    font-weight: 600;
    color: #083d59;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.lax-section-header__title {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #083d59, #0a5073);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
}

@media (max-width: 767px) {
    .lax-section-header__title {
        font-size: 1.75rem;
    }
}

.lax-about__content {
    align-items: center;
}

/* ========== GLASS CARD COMPONENT ========== */
.lax-card {
    padding: 1.5rem;
    position: relative;
}

.lax-card__text {
    font-size: 0.938rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 1.5rem;
}

/* ========== BUTTON COMPONENT ========== */
.lax-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 2rem;
    background: rgba(226, 185, 35, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 185, 35, 0.4);
    border-radius: 3rem;
    color: #083d59;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(226, 185, 35, 0.2);
    position: relative;
    overflow: hidden;
    font-size: 0.938rem;
}

    .lax-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transition: left 0.5s;
    }

    .lax-btn:hover::before {
        left: 100%;
    }

    .lax-btn:hover {
        background: rgba(226, 185, 35, 0.35);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(226, 185, 35, 0.35);
        color: #083d59;
    }

.lax-btn__icon {
    transition: transform 0.3s ease;
}

.lax-btn:hover .lax-btn__icon {
    transform: translateX(5px);
}

.lax-btn--secondary {
    padding: 0.75rem 1.5rem;
    background: rgba(8, 61, 89, 0.15);
    border: 1px solid rgba(8, 61, 89, 0.25);
    font-weight: 600;
    font-size: 0.875rem;
}

    .lax-btn--secondary::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(226, 185, 35, 0.2);
        transform: translate(-50%, -50%);
        transition: width 0.4s ease, height 0.4s ease;
        z-index: 0;
    }

    .lax-btn--secondary:hover::after {
        width: 300px;
        height: 300px;
    }

    .lax-btn--secondary:hover {
        background: rgba(226, 185, 35, 0.25);
        border-color: rgba(226, 185, 35, 0.4);
        transform: translateX(5px);
    }

    .lax-btn--secondary span,
    .lax-btn--secondary i {
        position: relative;
        z-index: 1;
    }

/* ========== IMAGE FRAME COMPONENT ========== */
.lax-image-frame {
    position: relative;
    border-radius: 1.5rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 15px 50px rgba(8, 61, 89, 0.1);
}

.lax-image-frame__img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    display: block;
}

.lax-image-frame__badge {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 0.625rem 1.25rem;
    background: rgba(226, 185, 35, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2rem;
    color: #fff;
    font-weight: 700;
    font-size: 0.813rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    box-shadow: 0 8px 25px rgba(226, 185, 35, 0.4);
    animation: laxFloatBadge 3s ease-in-out infinite;
}

@keyframes laxFloatBadge {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* ========== JOBS SECTION ========== */
.lax-jobs {
    padding: 3rem 0 2rem;
    position: relative;
}

@media (max-width: 767px) {
    .lax-jobs {
        padding: 2rem 0 1.5rem;
    }
}

.lax-jobs__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 767px) {
    .lax-jobs__header {
        flex-direction: column;
        margin-bottom: 2rem;
    }
}

.lax-jobs__icon-wrapper {
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(8, 61, 89, 0.08);
    animation: laxPulse 2s ease-in-out infinite;
}

@keyframes laxPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(8, 61, 89, 0.08);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(226, 185, 35, 0.2);
    }
}

.lax-jobs__icon {
    width: 60%;
    height: auto;
}

.lax-jobs__title-wrapper {
    text-align: center;
}

.lax-jobs__title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #083d59;
    margin: 0.75rem 0;
}

@media (max-width: 767px) {
    .lax-jobs__title {
        font-size: 1.625rem;
    }
}

.lax-jobs__title-highlight {
    background: linear-gradient(135deg, #e2b923, #d4a91f, #083d59);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: laxGradientShift 5s ease infinite;
    background-size: 200% 200%;
}

@keyframes laxGradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.lax-jobs__subtitle {
    font-size: 1rem;
    color: #555;
    margin: 0;
}

/* ========== JOB GRID - Bootstrap handles columns ========== */
.lax-job-grid {
    /* No grid styles - Bootstrap g-3 handles gaps */
}

/* ========== JOB CARD COMPONENT ========== */
.lax-job-card {
    position: relative;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1.5rem;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(8, 61, 89, 0.06);
    height: 100%;
}

    .lax-job-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.6s;
    }

    .lax-job-card:hover::before {
        left: 100%;
    }

    .lax-job-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 20px 50px rgba(8, 61, 89, 0.15);
        border-color: rgba(226, 185, 35, 0.4);
        background: rgba(255, 255, 255, 0.3);
    }

.lax-job-card__glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(226, 185, 35, 0.15), transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.lax-job-card:hover .lax-job-card__glow {
    opacity: 1;
}

.lax-job-card__inner {
    padding: 1.75rem 1.5rem;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lax-job-card__icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(226, 185, 35, 0.2), rgba(8, 61, 89, 0.2));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 185, 35, 0.3);
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transition: all 0.4s ease;
}

.lax-job-card:hover .lax-job-card__icon {
    background: linear-gradient(135deg, rgba(226, 185, 35, 0.35), rgba(8, 61, 89, 0.25));
    transform: rotate(5deg) scale(1.1);
    box-shadow: 0 10px 30px rgba(226, 185, 35, 0.3);
}

.lax-job-card__icon i {
    font-size: 2.25rem;
    background: linear-gradient(135deg, #e2b923, #083d59);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lax-job-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #083d59;
    margin-bottom: 0.875rem;
    line-height: 1.3;
}

.lax-job-card__line {
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #e2b923, #d4a91f, #083d59);
    background-size: 200% 100%;
    margin: 0.875rem 0;
    border-radius: 2px;
    animation: laxLineGradient 3s ease infinite;
    transition: width 0.4s ease;
}

@keyframes laxLineGradient {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.lax-job-card:hover .lax-job-card__line {
    width: 80px;
}

.lax-job-card__desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.lax-job-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.lax-job-card__number {
    font-size: 2.75rem;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(8, 61, 89, 0.05), rgba(226, 185, 35, 0.08));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.4s ease;
    line-height: 1;
}

.lax-job-card:hover .lax-job-card__number {
    background: linear-gradient(135deg, rgba(226, 185, 35, 0.2), rgba(8, 61, 89, 0.15));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: scale(1.2);
}

/* ========== BENEFITS SECTION ========== */
.lax-benefits {
    padding: 3rem 0;
    position: relative;
}

@media (max-width: 767px) {
    .lax-benefits {
        padding: 2rem 0;
    }
}

.lax-section-header__main-title {
    font-size: 2.25rem;
    font-weight: 800;
    background: linear-gradient(135deg, #083d59, #0a5073);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.25rem;
}

@media (max-width: 767px) {
    .lax-section-header__main-title {
        font-size: 1.625rem;
    }
}

.lax-section-header__desc {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 2.5rem;
}

/* ========== BENEFITS GRID - Bootstrap handles columns ========== */
.lax-benefits-grid {
    /* No grid styles - Bootstrap g-3 handles gaps */
}

/* ========== BENEFIT CARD COMPONENT ========== */
.lax-benefit-card {
    position: relative;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 1.5rem;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(8, 61, 89, 0.06);
    height: 100%;
}

    .lax-benefit-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(226, 185, 35, 0.1), rgba(8, 61, 89, 0.1));
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .lax-benefit-card:hover::before {
        opacity: 1;
    }

    .lax-benefit-card:hover {
        transform: translateY(-10px) scale(1.03);
        box-shadow: 0 20px 50px rgba(8, 61, 89, 0.12);
        border-color: rgba(226, 185, 35, 0.5);
        background: rgba(255, 255, 255, 0.35);
    }

.lax-benefit-card__shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: rotate(45deg);
    opacity: 0;
    transition: all 0.6s ease;
}

.lax-benefit-card:hover .lax-benefit-card__shine {
    opacity: 1;
    top: 100%;
    left: 100%;
}

.lax-benefit-card__icon {
    width: 90px;
    height: 90px;
    background: rgba(226, 185, 35, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 185, 35, 0.25);
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.lax-benefit-card:hover .lax-benefit-card__icon {
    background: rgba(226, 185, 35, 0.25);
    transform: scale(1.15) rotate(-5deg);
    box-shadow: 0 15px 40px rgba(226, 185, 35, 0.3);
}

.lax-benefit-card__icon img {
    width: 55px;
    height: 55px;
    object-fit: contain;
}

.lax-benefit-card__title {
    font-size: 1.063rem;
    font-weight: 700;
    color: #083d59;
    margin: 0;
    position: relative;
    z-index: 1;
    line-height: 1.5;
}

.lax-benefit-card__number {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: 2.25rem;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(8, 61, 89, 0.05), rgba(226, 185, 35, 0.1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.4s ease;
}

.lax-benefit-card:hover .lax-benefit-card__number {
    background: linear-gradient(135deg, rgba(226, 185, 35, 0.3), rgba(8, 61, 89, 0.2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: scale(1.3);
}

/* ========== ACCESSIBILITY ========== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===================================
   NEWS & EVENTS ACCORDION - PROFESSIONAL GLASS
   =================================== */

/* ========== ACCORDION WRAPPER ========== */
.nevents-accordion-wrapper {
    position: relative;
}

    /* ========== ACCORDION ITEM ========== */
    .nevents-accordion-wrapper .accordion-item {
        background: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 1.25rem;
        margin-bottom: 1rem;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(8, 61, 89, 0.04);
        transition: all 0.3s ease;
    }

        .nevents-accordion-wrapper .accordion-item:last-child {
            margin-bottom: 0;
        }

        .nevents-accordion-wrapper .accordion-item:hover {
            box-shadow: 0 8px 24px rgba(8, 61, 89, 0.08);
            border-color: rgba(226, 185, 35, 0.3);
        }

    /* ========== ACCORDION HEADER ========== */
    .nevents-accordion-wrapper .accordion-header {
        margin-bottom: 0;
    }

    /* ========== ACCORDION BUTTON ========== */
    .nevents-accordion-wrapper .accordion-button {
        background: transparent;
        border: none;
        color: #083d59;
        font-weight: 600;
        font-size: 1rem;
        padding: 1.25rem 1.5rem;
        border-radius: 1.25rem;
        transition: all 0.3s ease;
        box-shadow: none;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

        .nevents-accordion-wrapper .accordion-button:not(.collapsed) {
            background: rgba(226, 185, 35, 0.08);
            color: #083d59;
            box-shadow: none;
        }

        .nevents-accordion-wrapper .accordion-button:hover {
            background: rgba(226, 185, 35, 0.05);
        }

        .nevents-accordion-wrapper .accordion-button:focus {
            box-shadow: none;
            outline: none;
        }

        /* ========== NUMBER BADGE ========== */
        .nevents-accordion-wrapper .accordion-button span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 38px;
            height: 38px;
            background: linear-gradient(135deg, rgba(226, 185, 35, 0.15), rgba(8, 61, 89, 0.1));
            border: 1px solid rgba(226, 185, 35, 0.25);
            border-radius: 0.625rem;
            font-size: 0.875rem;
            font-weight: 700;
            color: #083d59;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        .nevents-accordion-wrapper .accordion-button:not(.collapsed) span {
            background: linear-gradient(135deg, #e2b923, #d4a91f);
            border-color: #e2b923;
            color: #fff;
        }

        /* ========== ACCORDION ICON ========== */
        .nevents-accordion-wrapper .accordion-button::after {
            width: 32px;
            height: 32px;
            background: rgba(8, 61, 89, 0.08);
            border: 1px solid rgba(8, 61, 89, 0.15);
            border-radius: 0.5rem;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23083d59'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 0.875rem;
            transition: all 0.3s ease;
            margin-left: auto;
            flex-shrink: 0;
        }

        .nevents-accordion-wrapper .accordion-button:not(.collapsed)::after {
            background-color: rgba(226, 185, 35, 0.12);
            border-color: rgba(226, 185, 35, 0.25);
            transform: rotate(-180deg);
        }

    /* ========== ACCORDION COLLAPSE ========== */
    .nevents-accordion-wrapper .accordion-collapse {
        background: transparent;
    }

    /* ========== ACCORDION BODY ========== */
    .nevents-accordion-wrapper .accordion-body {
        padding: 0 1.5rem 1.5rem;
        color: #555;
        font-size: 0.938rem;
        line-height: 1.7;
    }

        .nevents-accordion-wrapper .accordion-body p {
            margin-bottom: 1.25rem;
        }

            .nevents-accordion-wrapper .accordion-body p:last-child {
                margin-bottom: 0;
            }

        /* ========== ACCORDION BODY IMAGES - RESPONSIVE SIZING ========== */
        .nevents-accordion-wrapper .accordion-body img {
            width: 100%;
            max-width: 100%;
            height: auto;
            display: block;
            border-radius: 0.875rem;
            box-shadow: 0 4px 16px rgba(8, 61, 89, 0.1);
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.5);
            object-fit: contain;
            background: #fff;
        }

            .nevents-accordion-wrapper .accordion-body img:hover {
                box-shadow: 0 8px 24px rgba(8, 61, 89, 0.15);
                transform: scale(1.02);
            }

/* Desktop - larger images */
@media (min-width: 1200px) {
    .nevents-accordion-wrapper .accordion-body img {
        max-height: 600px;
    }
}

/* Laptop */
@media (min-width: 992px) and (max-width: 1199px) {
    .nevents-accordion-wrapper .accordion-body img {
        max-height: 500px;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .nevents-accordion-wrapper .accordion-body img {
        max-height: 400px;
    }
}

/* ========== TAB WRAPPER ========== */
.nevents-accordion-wrapper .tab-wrapper2 {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border-radius: 0.875rem;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ========== NAV TABS ========== */
.nevents-accordion-wrapper .nav-tabs {
    border: none;
    background: transparent;
    padding: 0;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

    /* ========== NAV LINK INACTIVE ========== */
    .nevents-accordion-wrapper .nav-tabs .nav-link {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(248, 249, 250, 0.4));
        backdrop-filter: blur(8px);
        border: 1px solid rgba(8, 61, 89, 0.12);
        border-radius: 0.625rem;
        color: #555;
        font-weight: 500;
        font-size: 0.875rem;
        padding: 0.75rem 2.5rem 0.75rem 0.875rem;
        transition: all 0.3s ease;
        text-align: left;
        margin-bottom: 0;
        position: relative;
        box-shadow: 0 2px 8px rgba(8, 61, 89, 0.03);
    }

        .nevents-accordion-wrapper .nav-tabs .nav-link::after {
            content: '';
            position: absolute;
            right: 0.875rem;
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23999'%3e%3cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            opacity: 0;
            transition: all 0.3s ease;
        }

        .nevents-accordion-wrapper .nav-tabs .nav-link::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 0;
            background: linear-gradient(180deg, #e2b923, #083d59);
            border-radius: 0 2px 2px 0;
            transition: height 0.3s ease;
        }

        /* ========== NAV LINK HOVER ========== */
        .nevents-accordion-wrapper .nav-tabs .nav-link:hover {
            background: linear-gradient(135deg, rgba(226, 185, 35, 0.1), rgba(226, 185, 35, 0.06));
            border-color: rgba(226, 185, 35, 0.25);
            color: #083d59;
            box-shadow: 0 4px 12px rgba(226, 185, 35, 0.08);
            transform: translateX(3px);
        }

            .nevents-accordion-wrapper .nav-tabs .nav-link:hover::before {
                height: 60%;
            }

            .nevents-accordion-wrapper .nav-tabs .nav-link:hover::after {
                opacity: 1;
                right: 0.75rem;
            }

        /* ========== NAV LINK ACTIVE ========== */
        .nevents-accordion-wrapper .nav-tabs .nav-link.active {
            background: linear-gradient(135deg, rgba(226, 185, 35, 0.15), rgba(8, 61, 89, 0.08));
            border-color: rgba(226, 185, 35, 0.35);
            color: #083d59;
            font-weight: 600;
            box-shadow: 0 4px 16px rgba(226, 185, 35, 0.12);
            padding-right: 2.5rem;
        }

            .nevents-accordion-wrapper .nav-tabs .nav-link.active::before {
                height: 100%;
            }

            .nevents-accordion-wrapper .nav-tabs .nav-link.active::after {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e2b923'%3e%3cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3e%3c/svg%3e");
                opacity: 1;
                right: 0.875rem;
            }

/* ========== TAB CONTENT ========== */
.nevents-accordion-wrapper .tab-content {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    border-radius: 0.75rem;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    min-height: 250px;
}

.nevents-accordion-wrapper .tab-pane {
    animation: neventsSlideUp 0.4s ease;
}

@keyframes neventsSlideUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== GALLERY ITEM - CLICKABLE ========== */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 0.5rem;
    box-shadow: 0 4px 16px rgba(8, 61, 89, 0.08);
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

    .gallery-item:hover {
        box-shadow: 0 8px 24px rgba(8, 61, 89, 0.15);
        border-color: rgba(226, 185, 35, 0.4);
        transform: translateY(-4px);
    }

    .gallery-item:active {
        transform: translateY(-2px);
    }

    .gallery-item img {
        width: 100%;
        max-height: 400px;
        height: auto;
        display: block;
        border-radius: 0.5rem;
        transition: all 0.3s ease;
        object-fit: contain;
        background: #fff;
        pointer-events: none;
    }

    .gallery-item:hover img {
        transform: scale(1.05);
        filter: brightness(0.9);
    }

/* ========== GALLERY OVERLAY ========== */
.gallery-overlay {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(1px);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay i {
    font-size: 3rem;
    color: #e2b923;
    animation: zoomPulse 1.5s ease-in-out infinite;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

@keyframes zoomPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* ========== UNIQUE ACCENT LINE ========== */
.nevents-accordion-wrapper .accordion-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, #e2b923, #083d59);
    border-radius: 1.25rem 0 0 1.25rem;
    transition: height 0.3s ease;
}

.nevents-accordion-wrapper .accordion-item:hover::before {
    height: 100%;
}

/* ===================================
   CUSTOM IMAGE MODAL POPUP
   =================================== */

/* ========== MODAL DIALOG ========== */
.nevents-image-modal .modal-dialog {
    max-width: 90vw;
}

/* ========== MODAL CONTENT ========== */
.nevents-image-modal .modal-content {
    background: #fff;
    border-radius: 1.5rem;
    overflow: hidden;
    border: none;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(30px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ========== MODAL HEADER ========== */
.nevents-image-modal .modal-header {
    background: linear-gradient(135deg, #083d59 0%, #0a4d6e 100%);
    border-bottom: 3px solid #e2b923;
    padding: 1.25rem 1.5rem;
    position: relative;
    overflow: hidden;
}

    .nevents-image-modal .modal-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(226, 185, 35, 0.05) 10px, rgba(226, 185, 35, 0.05) 20px);
        pointer-events: none;
    }

.nevents-image-modal .modal-title {
    color: #fff;
    font-weight: 600;
    font-size: 1.125rem;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

/* ========== CLOSE BUTTON - FIXED WITH GOLD COLOR ========== */
.nevents-image-modal .btn-close {
    background: linear-gradient(135deg, #e2b923, #d4a91f);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    opacity: 1;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(226, 185, 35, 0.3);
    background-image: none !important;
    padding: 0;
}

    /* Remove default Bootstrap close icon */
    .nevents-image-modal .btn-close::before {
        content: '×';
        color: #fff;
        font-size: 32px;
        font-weight: 300;
        line-height: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .nevents-image-modal .btn-close:hover {
        background: linear-gradient(135deg, #d4a91f, #c89b1c);
        transform: scale(1.15) rotate(90deg);
        box-shadow: 0 6px 20px rgba(226, 185, 35, 0.5);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .nevents-image-modal .btn-close:focus {
        box-shadow: 0 0 0 0.25rem rgba(226, 185, 35, 0.25);
        outline: none;
    }


/* ========== MODAL BODY ========== */
.nevents-image-modal .modal-body {
    padding: 1.5rem;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .nevents-image-modal .modal-body img {
        max-width: 100%;
        height: auto;
        max-height: 75vh;
        border-radius: 0.75rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }

/* ========== MODAL BACKDROP ========== */
.modal-backdrop.show {
    opacity: 0.85;
}

/* ========== RESPONSIVE - TABLET ========== */
@media (max-width: 991px) {
    .nevents-accordion-wrapper .nav-tabs {
        margin-bottom: 1.25rem;
    }

    .nevents-accordion-wrapper .accordion-button {
        font-size: 0.938rem;
        padding: 1rem 1.25rem;
    }
}

/* ========== RESPONSIVE - MOBILE ========== */
@media (max-width: 767px) {
    .nevents-accordion-wrapper .accordion-button {
        font-size: 0.875rem;
        padding: 1rem;
    }

        .nevents-accordion-wrapper .accordion-button span {
            min-width: 34px;
            height: 34px;
            font-size: 0.813rem;
        }

        .nevents-accordion-wrapper .accordion-button::after {
            width: 28px;
            height: 28px;
        }

    .nevents-accordion-wrapper .accordion-body {
        padding: 0 1rem 1.25rem;
    }

        .nevents-accordion-wrapper .accordion-body img {
            max-height: 300px;
            border-radius: 0.625rem;
        }

    .nevents-accordion-wrapper .tab-wrapper2 {
        padding: 1rem;
    }

    .nevents-accordion-wrapper .tab-content {
        padding: 1rem;
    }

    .gallery-item img {
        max-height: 300px;
    }

    .nevents-image-modal .modal-dialog {
        max-width: 95vw;
        margin: 1rem;
    }

    .nevents-image-modal .modal-header {
        padding: 1rem 1.25rem;
    }

    .nevents-image-modal .modal-title {
        font-size: 0.938rem;
    }

    .nevents-image-modal .btn-close {
        width: 36px;
        height: 36px;
    }

    .nevents-image-modal .modal-body {
        padding: 1rem;
    }

        .nevents-image-modal .modal-body img {
            max-height: 70vh;
        }

    .gallery-overlay i {
        font-size: 2rem;
    }
}

/* ========== ACCESSIBILITY ========== */
@media (prefers-reduced-motion: reduce) {
    .nevents-accordion-wrapper *,
    .nevents-accordion-wrapper *::before,
    .nevents-accordion-wrapper *::after,
    .nevents-image-modal .modal-content,
    .gallery-overlay i {
        animation: none !important;
        transition: none !important;
    }
}
/* ---------- ANIMATED BACKGROUND ---------- */
.xip-tech-contact-section {
    position: relative;
    padding: 100px 0 80px;
    background: #f5f5f7;
    overflow: hidden;
}

.xip-tech-animated-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

/* ---------- SECTION HEADER ---------- */
.xip-tech-section-header {
    position: relative;
    z-index: 1;
}

.xip-tech-contact-badge {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, rgba(226,185,35,0.15), rgba(252,98,47,0.15));
    border: 1px solid rgba(226,185,35,0.3);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #083d59;
    margin-bottom: 15px;
}

.xip-tech-header-subtitle {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e2b923;
    margin-bottom: 12px;
}

.xip-tech-header-title {
    font-size: 35px;
    font-weight: 600;
    color: #083d59;
    margin-bottom: 15px;
    line-height: 1.2;
}

.xip-tech-header-desc {
    font-size: 18px;
    color: #6b7280;
    text-align:center;
    font-weight: 400;
    margin-bottom:40px;
}

/* ---------- GLASS EFFECT CARDS ---------- */
.xip-tech-glass-effect {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-radius: 28px;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px rgba(8, 61, 89, 0.08), 0 2px 8px rgba(8, 61, 89, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .xip-tech-glass-effect::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1.5px;
        background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(226,185,35,0.3) 50%, rgba(252,98,47,0.3) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .xip-tech-glass-effect:hover::before {
        opacity: 1;
    }

    .xip-tech-glass-effect:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 60px rgba(8, 61, 89, 0.15), 0 4px 12px rgba(8, 61, 89, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.95);
    }

/* ---------- INFO CARD ---------- */
.xip-tech-info-card {
    padding: 40px 35px;
}

.xip-tech-card-top {
    text-align: center;
    margin-bottom: 35px;
}

.xip-tech-location-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #e2b923, #fc622f);
    border-radius: 50px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(226, 185, 35, 0.4);
    margin-bottom: 20px;
}

.xip-tech-company-name {
    font-size: 20px;
    font-weight: 600;
    color: #083d59;
    margin-bottom: 5px;
    line-height: 1.3;
}

/* ---------- ADDRESS BOX ---------- */
.xip-tech-address-box {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 25px;
    background: linear-gradient(135deg, rgba(226,185,35,0.08), rgba(252,98,47,0.05));
    border-radius: 20px;
    margin-bottom: 30px;
    border: 1px solid rgba(226,185,35,0.15);
}

.xip-tech-address-icon-wrap {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #083d59, #0a5278);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 8px 20px rgba(8, 61, 89, 0.25);
}

.xip-tech-address-text {
    flex: 1;
    font-size: 15px;
    line-height: 1.7;
    color: #374151;
    margin: 0;
}

/* ---------- CONTACT LIST ---------- */
.xip-tech-contact-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.xip-tech-contact-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

    .xip-tech-contact-row:hover {
        background: rgba(255, 255, 255, 0.85);
        transform: translateX(8px);
        box-shadow: 0 8px 24px rgba(8, 61, 89, 0.12);
    }

.xip-tech-contact-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #e2b923, #fc622f);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 6px 18px rgba(252, 98, 47, 0.35);
    transition: transform 0.3s ease;
}

.xip-tech-contact-row:hover .xip-tech-contact-icon {
    transform: rotate(10deg) scale(1.1);
}

.xip-tech-contact-info {
    flex: 1;
    min-width: 0;
}

.xip-tech-inline-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.xip-tech-contact-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
    flex-shrink: 0;
}

.xip-tech-contact-link {
    font-size: 15px;
    font-weight: 700;
    color: #083d59;
    text-decoration: none;
    transition: color 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xip-tech-contact-row:hover .xip-tech-contact-link {
    color: #c82a5f;
}

.xip-tech-arrow-indicator {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: rgba(226, 185, 35, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e2b923;
    font-size: 14px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.xip-tech-contact-row:hover .xip-tech-arrow-indicator {
    opacity: 1;
    transform: translateX(0);
}

/* ---------- FORM CARD ---------- */
.xip-tech-form-card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.xip-tech-form-top {
    padding: 35px 35px 25px;
    background: linear-gradient(135deg, rgba(8,61,89,0.08), rgba(8,61,89,0.04));
    border-bottom: 1px solid rgba(8, 61, 89, 0.08);
    flex-shrink: 0;
}

.xip-tech-form-heading {
    font-size: 25px;
    font-weight: 600;
    color: #083d59;
    margin-bottom: 8px;
}

.xip-tech-form-desc {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
}

.xip-tech-iframe-container {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
}

    .xip-tech-iframe-container iframe {
        width: 90%;
        flex: 1;
        height: 100%;
        border: 0;
        display: block;
        margin: 0 auto;
    }


/* ---------- MAP SECTION ---------- */
.xip-tech-map-section {
    padding: 0;
    margin: 0;
    position: relative;
    margin-bottom:-40px;
}

.xip-tech-map-container {
    display: block;
    line-height: 0;
    position: relative;
}

.xip-tech-map-badge {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
}

.xip-tech-badge-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    padding: 25px 40px;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(8, 61, 89, 0.2);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

    .xip-tech-badge-content i {
        font-size: 32px;
        color: #e2b923;
        margin-bottom: 12px;
        display: block;
    }

    .xip-tech-badge-content h4 {
        font-size: 22px;
        font-weight: 800;
        color: #083d59;
        margin-bottom: 6px;
    }

    .xip-tech-badge-content p {
        font-size: 15px;
        color: #6b7280;
        margin: 0;
    }

.xip-tech-map-container iframe {
    width: 100%;
    min-height: 650px;
    border: 0;
    margin: 0;
    display: block;
    filter: grayscale(20%) contrast(1.1);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1199px) {
    .xip-tech-inline-content {
        flex-wrap: wrap;
    }

    .xip-tech-contact-label {
        flex-basis: 100%;
    }
}

@media (max-width: 991px) {
    .xip-tech-contact-section {
        padding: 70px 0 50px;
    }

    .xip-tech-header-title {
        font-size: 34px;
    }

    .xip-tech-info-card,
    .xip-tech-form-card {
        margin-bottom: 30px;
    }

    .xip-tech-glass-effect {
        height: auto;
    }

    .xip-tech-iframe-container iframe {
        min-height: 620px;
    }

    .xip-tech-map-container iframe {
        min-height: 500px;
    }
}

@media (max-width: 767px) {
    .xip-tech-contact-section {
        padding: 50px 0 40px;
    }

    .xip-tech-header-title {
        font-size: 28px;
    }

    .xip-tech-header-desc {
        font-size: 16px;
    }

    .xip-tech-info-card {
        padding: 30px 25px;
    }

    .xip-tech-company-name {
        font-size: 20px;
    }

    .xip-tech-address-box {
        padding: 20px;
    }

    .xip-tech-contact-row {
        padding: 15px;
        gap: 12px;
    }

    .xip-tech-contact-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .xip-tech-inline-content {
        flex-wrap: wrap;
    }

    .xip-tech-contact-label {
        flex-basis: 100%;
        margin-bottom: 4px;
    }

    .xip-tech-contact-link {
        font-size: 14px;
    }

    .xip-tech-form-top {
        padding: 30px 25px 20px;
    }

    .xip-tech-form-heading {
        font-size: 22px;
    }

    .xip-tech-iframe-container iframe {
        min-height: 580px;
    }

    .xip-tech-map-container iframe {
        min-height: 400px;
    }

    .xip-tech-badge-content {
        padding: 20px 30px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .xip-tech-map-container iframe {
        min-height: 550px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .xip-tech-map-container iframe {
        min-height: 450px;
    }
}


/* Blog marquee container */
.blog-container {
    overflow: hidden;
}

/* Visible area (controls how many posts show) */
.blog-marquee {
    height: 260px; /* adjust for 2–3 posts */
    overflow: hidden;
    position: relative;
}

    /* Wrapper */
    .blog-marquee .marquee {
        display: block;
    }

    /* Scrolling content */
    .blog-marquee .marquee-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        animation: blog-marquee-vertical 15s linear infinite;
        will-change: transform;
    }

    /* Pause on hover */
    .blog-marquee:hover .marquee-content {
        animation-play-state: paused;
    }

/* Vertical animation */
@keyframes blog-marquee-vertical {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}