.therapeutic-range-section {
            background: linear-gradient(135deg, #f9fbff 60%, #e0e7ff 100%);
            padding: 25px 0 40px 0;
        }
        .therapeutic-range-section h2 {
            text-align: center;
            margin-bottom: 40px;
            color: #2b1055;
            font-size: 2rem;
            font-weight: 700;
            letter-spacing: 1px;
        }
        .therapeutic-range-flexgrid {
            display: grid;
            grid-template-columns: repeat(auto-fill, 250px);
            justify-content: center;
            gap: 25px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .therapeutic-range-card {
            position: relative;
            width: 250px;
            height: 180px;
            padding: 24px 15px 15px 15px;
            margin: 0;
            background: #ffffff;
            border-radius: 36px 8px 36px 36px;
            border: 2px solid transparent;
            background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #7f53ac, #ff6ec4);
            background-origin: border-box;
            background-clip: padding-box, border-box;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            box-shadow: 0 8px 24px rgba(127, 83, 172, 0.06);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            z-index: 1;
            box-sizing: border-box;
        }

        /* Dotted orbital meshes rotating in opposite directions */
        .therapeutic-range-card::before {
            content: '';
            position: absolute;
            top: -30px;
            right: -30px;
            width: 120px;
            height: 120px;
            border: 1px dashed rgba(127, 83, 172, 0.08);
            border-radius: 50%;
            pointer-events: none;
            z-index: -1;
            animation: rotateMesh 20s linear infinite;
        }
        .therapeutic-range-card::after {
            content: '';
            position: absolute;
            bottom: -40px;
            left: -40px;
            width: 100px;
            height: 100px;
            border: 1px dashed rgba(255, 110, 196, 0.06);
            border-radius: 50%;
            pointer-events: none;
            z-index: -1;
            animation: rotateMeshRev 15s linear infinite;
        }

        .therapeutic-range-card:hover {
            transform: translateY(-8px);
            background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #ff6ec4, #f5af19);
            box-shadow: 0 20px 40px rgba(255, 110, 196, 0.15);
        }

        /* Circular icon container badge */
        .therapeutic-range-card .icon {
            font-size: 2rem;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(127, 83, 172, 0.08) 0%, rgba(255, 110, 196, 0.08) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            color: #7f53ac;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 2;
            box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.5);
        }

        .therapeutic-range-card:hover .icon {
            background: linear-gradient(135deg, #7f53ac 0%, #ff6ec4 100%);
            color: #ffffff;
            transform: scale(1.1) rotate(10deg);
            box-shadow: 0 8px 20px rgba(127, 83, 172, 0.3);
        }

        .therapeutic-range-card .card-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: #2b1055;
            text-align: center;
            margin: 0;
            z-index: 2;
            transition: color 0.3s;
            line-height: 1.4;
        }

        .therapeutic-range-card:hover .card-title {
            color: #111;
        }

        .therapeutic-range-divider {
            width: 80%;
            margin: 32px auto;
            border-top: 2px dashed #bdbdbd;
        }

        /* Custom icon vector-like animations on card hover */

        /* DNA spin */
        .therapeutic-range-card:hover .icon .fa-dna {
            animation: spinDNA 2s linear infinite;
        }
        @keyframes spinDNA {
            0% { transform: rotateY(0deg); }
            100% { transform: rotateY(360deg); }
        }

        /* Heart pulse */
        .therapeutic-range-card:hover .icon .fa-heartbeat,
        .therapeutic-range-card:hover .icon .fa-heart {
            animation: heartPulse 1s ease-in-out infinite;
        }
        @keyframes heartPulse {
            0% { transform: scale(1); }
            30% { transform: scale(1.2); }
            60% { transform: scale(1.1); }
            80% { transform: scale(1.25); }
            100% { transform: scale(1); }
        }

        /* Brain glow */
        .therapeutic-range-card:hover .icon .fa-brain {
            animation: brainGlow 1.5s ease-in-out infinite;
        }
        @keyframes brainGlow {
            0% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 2px rgba(127, 83, 172, 0.5)); }
            50% { opacity: 0.8; transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(127, 83, 172, 0.8)); }
            100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 2px rgba(127, 83, 172, 0.5)); }
        }

        /* Capsule/Pill floating */
        .therapeutic-range-card:hover .icon .fa-capsules,
        .therapeutic-range-card:hover .icon .fa-pills,
        .therapeutic-range-card:hover .icon .fa-tablets {
            animation: floatPills 1.8s ease-in-out infinite;
        }
        @keyframes floatPills {
            0% { transform: translateY(0); }
            50% { transform: translateY(-6px) rotate(5deg); }
            100% { transform: translateY(0); }
        }

        /* Flask tilt/slosh */
        .therapeutic-range-card:hover .icon .fa-flask,
        .therapeutic-range-card:hover .icon .fa-vial,
        .therapeutic-range-card:hover .icon .fa-vials {
            animation: sloshFlask 1.5s ease-in-out infinite;
        }
        @keyframes sloshFlask {
            0% { transform: rotate(0deg); }
            33% { transform: rotate(-12deg); }
            66% { transform: rotate(12deg); }
            100% { transform: rotate(0deg); }
        }

        /* Syringe squeeze */
        .therapeutic-range-card:hover .icon .fa-syringe {
            animation: squeezeSyringe 1.2s ease-in-out infinite;
        }
        @keyframes squeezeSyringe {
            0% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-4px) scale(0.95, 1.05); }
            100% { transform: translateY(0) scale(1); }
        }

        /* Lungs breathing */
        .therapeutic-range-card:hover .icon .fa-lungs {
            animation: breatheLungs 2s ease-in-out infinite;
        }
        @keyframes breatheLungs {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }

        /* Virus/Bug wiggle */
        .therapeutic-range-card:hover .icon .fa-virus,
        .therapeutic-range-card:hover .icon .fa-bacteria,
        .therapeutic-range-card:hover .icon .fa-bug,
        .therapeutic-range-card:hover .icon .fa-biohazard {
            animation: wiggleVirus 0.8s ease-in-out infinite;
        }
        @keyframes wiggleVirus {
            0% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(-2px, 1px) rotate(-3deg); }
            50% { transform: translate(1px, -2px) rotate(3deg); }
            75% { transform: translate(-1px, -1px) rotate(-1deg); }
            100% { transform: translate(0, 0) rotate(0deg); }
        }

        /* Tint/Water drop bounce */
        .therapeutic-range-card:hover .icon .fa-tint,
        .therapeutic-range-card:hover .icon .fa-water {
            animation: bounceDrop 1.2s ease-in-out infinite;
        }
        @keyframes bounceDrop {
            0% { transform: translateY(0) scale(1); }
            30% { transform: translateY(-5px) scale(0.9, 1.1); }
            50% { transform: translateY(2px) scale(1.1, 0.9); }
            100% { transform: translateY(0) scale(1); }
        }

        /* Bolt flash */
        .therapeutic-range-card:hover .icon .fa-bolt {
            animation: flashBolt 0.8s ease-in-out infinite;
        }
        @keyframes flashBolt {
            0% { opacity: 1; transform: scale(1); }
            40% { opacity: 0.5; transform: scale(0.9); }
            50% { opacity: 1; transform: scale(1.2); }
            100% { opacity: 1; transform: scale(1); }
        }

        /* Wind blow */
        .therapeutic-range-card:hover .icon .fa-wind {
            animation: blowWind 1.5s ease-in-out infinite;
        }
        @keyframes blowWind {
            0% { transform: translateX(0); opacity: 1; }
            50% { transform: translateX(4px); opacity: 0.8; }
            100% { transform: translateX(0); opacity: 1; }
        }

        /* General hover scale for other icons */
        .therapeutic-range-card:hover .icon i:not([class*="fa-dna"]):not([class*="fa-heart"]):not([class*="fa-brain"]):not([class*="fa-capsules"]):not([class*="fa-pills"]):not([class*="fa-tablets"]):not([class*="fa-flask"]):not([class*="fa-vial"]):not([class*="fa-vials"]):not([class*="fa-syringe"]):not([class*="fa-lungs"]):not([class*="fa-virus"]):not([class*="fa-bacteria"]):not([class*="fa-bug"]):not([class*="fa-biohazard"]):not([class*="fa-tint"]):not([class*="fa-water"]):not([class*="fa-bolt"]):not([class*="fa-wind"]) {
            animation: pulseIcon 1.5s ease-in-out infinite;
        }
        @keyframes pulseIcon {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }

        /* Rotating meshes keyframes */
        @keyframes rotateMesh {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        @keyframes rotateMeshRev {
            from { transform: rotate(0deg); }
            to { transform: rotate(-360deg); }
        }

        @media (max-width: 900px) {
            .therapeutic-range-flexgrid {
                gap: 20px;
            }
            .therapeutic-range-section h2 {
                font-size: 1.3rem;
            }
        }
        /* Consolidated mobile layout overrides inside 767px query */
        .container.border-pink {
            border: 1.5px dashed rgba(127, 83, 172, 0.2) !important;
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(10px);
            border-radius: 28px !important;
            padding: 35px 25px !important;
            box-shadow: 0 15px 40px rgba(127, 83, 172, 0.03);
            margin-bottom: 50px !important;
            transition: all 0.3s ease;
        }
        .container.border-pink:hover {
            border-color: rgba(255, 110, 196, 0.3) !important;
            box-shadow: 0 20px 50px rgba(127, 83, 172, 0.05);
        }

.expertise-card {
        position: relative;
        border: none;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, box-shadow 0.3s;
        background: linear-gradient(135deg, #f9f9f9, #ffffff);
        margin: 15px 0;
        overflow: hidden;
        height: 180px;
    }
    .expertise-card .card-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 20px;
    }
    .expertise-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 15px;
        background: linear-gradient(45deg, #ff6ec4, #7873f5, #42e695, #3bb2b8);
        background-size: 300% 300%;
        animation: gradient-border 6s ease infinite;
        z-index: -1;
    }
    .expertise-card:hover::before {
        animation: gradient-border-hover 3s ease infinite;
    }
    .expertise-card .csr_icon {
        font-size: 50px;
        color: #D4145A;
        margin-bottom: 15px;
    }
    .expertise-card .card-title {
        font-size: 20px;
        font-weight: bold;
        color: #333;
    }
    @media (max-width: 768px) {
        .expertise-card {
            margin-bottom: 20px;
        }
    }
    @keyframes gradient-border {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    @keyframes gradient-border-hover {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    .international-brands {
        padding: 40px 0 20px 0;
        background: #f9f9f9;
    }
    /* .international-brands .btn:hover {
        background: #b0124a;
    } */

/* --- Element Custom Styles --- */

.ibs-custom-1 {
    position: relative; overflow: hidden;
}

.ibs-custom-2 {
    background-size: cover; background-position: center; padding: 98px 0; position: relative;
}

.ibs-custom-3 {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1;
}

.ibs-custom-4 {
    position: relative; z-index: 2; text-align: left;
}

.ibs-custom-5 {
    color: #fff;
}

.ibs-custom-6 {
    color: #fff; margin-top: 10px;
}

.ibs-custom-7 {
    border-radius: 10px; margin-top: 29px; object-fit: cover;height: 501px;
}

.ibs-custom-8 {
    margin-top: 47px;
}

.ibs-custom-9 {
    margin-top: 40px;
}

.ibs-custom-10 {
    margin-top: 40px;
}

.ibs-custom-11 {
    margin-top: 12px;
}

.ibs-custom-12 {
    background: linear-gradient(45deg, #D4145A, #d28c1f);-webkit-background-clip: text;-webkit-text-fill-color: transparent;
}

.ibs-custom-13 {
    background: linear-gradient(45deg, #D4145A, #d28c1f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 20px;
}

/* Fix background-clip text rendering/wrapping bug on subtitles */
.ibs-custom-6 {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: #ffffff !important;
    display: block !important;
    font-size: 1.8rem !important;
    line-height: 1.4 !important;
}

/* ═══════════════════════════════════════
   MOBILE & TABLET RESPONSIVENESS OVERRIDES
   ═══════════════════════════════════════ */

/* Tablets & Mobiles (< 991px) */
@media (max-width: 991px) {
    .ibs-custom-6 {
        font-size: 1.5rem !important;
    }
}

/* Mobile Screens (< 767px) */
@media (max-width: 767px) {
    /* Reset banner text container margin & padding */
    .banner-text {
        margin-left: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        text-align: center !important;
    }

    .ibs-custom-6 {
        font-size: 1.3rem !important;
        line-height: 1.4 !important;
    }

    .ibs-custom-5 {
        font-size: 2.2rem !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    /* About Section Image Height Override */
    .ibs-custom-7 {
        height: auto !important;
        max-height: 320px !important;
        width: 100% !important;
    }
    
    .ibs-custom-8 {
        margin-top: 25px !important;
    }
    
    .about-two__list {
        margin-top: 15px !important;
    }

    /* Expertise Card layout (2 per row) */
    .expertise-card {
        margin: 10px 0 !important;
        border-radius: 12px !important;
        height: 140px !important;
    }
    
    .expertise-card .card-body {
        padding: 15px 10px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        height: 100% !important;
    }
    
    .expertise-card .csr_icon {
        font-size: 36px !important;
        margin-bottom: 8px !important;
    }
    
    .expertise-card .card-title {
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    /* Therapeutic Range Card Grid Spacing */
    .container.border-pink {
        padding: 20px 15px !important;
        border-radius: 20px !important;
        margin-bottom: 30px !important;
    }
    
    .therapeutic-range-section h2 {
        font-size: 1.5rem !important;
        margin-bottom: 25px !important;
        line-height: 1.4 !important;
    }
    
    .therapeutic-range-divider {
        margin: 20px auto !important;
    }

    .international-brands {
        padding: 20px 0 10px 0 !important;
    }
    
    .ibs-custom-13 {
        margin-bottom: 10px !important;
    }

    .therapeutic-range-section {
        padding: 15px 0 25px 0 !important;
    }

    .therapeutic-range-flexgrid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .therapeutic-range-card {
        width: 100% !important;
        height: auto !important;
        min-height: 150px !important;
        padding: 16px 8px 16px 8px !important;
        border-radius: 20px 8px 20px 20px !important;
    }

    .therapeutic-range-card::before {
        top: -20px !important;
        right: -20px !important;
        width: 80px !important;
        height: 80px !important;
    }

    .therapeutic-range-card::after {
        bottom: -25px !important;
        left: -25px !important;
        width: 70px !important;
        height: 70px !important;
    }

    .therapeutic-range-card:hover {
        transform: translateY(-4px) !important;
    }
    
    .therapeutic-range-card .icon {
        font-size: 1.35rem !important;
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 10px !important;
    }
    
    .therapeutic-range-card .card-title {
        font-size: 0.8rem !important;
        line-height: 1.35 !important;
    }

    #readMoreBtn,
    #readLessBtn {
        display: block;
        margin: 20px auto 0 auto !important;
        width: fit-content !important;
    }
}

/* Small Mobile Screens (< 575px) */
@media (max-width: 575px) {
    /* Page Header Banner subtitle font-size */
    .ibs-custom-6 {
        font-size: 1.15rem !important;
        line-height: 1.5 !important;
        white-space: normal !important;
    }
}
