/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Description: Child theme for Twenty Twenty-Five with preserved Cancer Care custom code, page template, assets, fonts, and custom CSS.
Author: Arpit Porwal
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Text Domain: twentytwentyfive-child

/* ==================================================
   00. Reset / Box Sizing
   ================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

/* Accessibility */

.skip-link {
    position: absolute;
    top: -60px;
    left: 0;
    background: var(--teal-500);
    color: #fff;
    padding: 10px 20px;
    z-index: 10000;
    font-size: 14px;
    font-weight: 600;
    transition: top .2s;
    text-decoration: none;
    border-radius: 0 0 8px 0
}

.skip-link:focus {
    top: 0
}

main {
    display: contents
}

/* ==================================================
   00. Design Tokens / CSS Variables
   ================================================== */

:root {
    --white: #fff;
    --offwhite: #F7FAFE;
    --blue-50: #EFF6FF;
    --blue-100: #DBEAFE;
    --blue-200: #BFDBFE;
    --blue-400: #60A5FA;
    --blue-500: #3B82F6;
    --blue-600: #2563EB;
    --blue-700: #1D4ED8;
    --blue-800: #1E3A5F;
    --blue-900: #0F2440;
    --teal-400: #2DD4BF;
    --teal-500: #14B8A6;
    --teal-600: #0D9488;
    --cyan-400: #22D3EE;
    --cyan-500: #00bcd4;
    --navy-900: #2C5FD6;
    --navy-800: #1a2e4d;
    --heartbeat-red: #ff6b6b;
    --violet-500: #8B5CF6;
    --rose-500: #F43F5E;
    --rose-400: #FB7185;
    --amber-400: #FBBF24;
    --amber-500: #F59E0B;
    --green-400: #4ADE80;
    --green-500: #22C55E;
    --green-600: #16A34A;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .07), 0 2px 4px -2px rgba(0, 0, 0, .05);
    --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04);
    --shadow-xl: 0 20px 50px -12px rgba(0, 0, 0, .12);
    --r: 12px;
    --rl: 20px;
    --rf: 9999px;
    --fd: 'DM Serif Display', Georgia, serif;
    --fb: 'Plus Jakarta Sans', system-ui, sans-serif;
    --t: .3s cubic-bezier(.4, 0, .2, 1);

}

/* Base Elements */

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--fb);
    color: var(--gray-800);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

/* Layout Helpers */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px
}

.section {
    padding: 80px 0
}

@media(max-width:768px) {
    .section {
        padding: 48px 0
    }

    .container {
        padding: 0 16px
    }

    .stitle {
        font-size: clamp(26px, 6vw, 36px)
    }

    .eyebrow {
        font-size: 11px;
        letter-spacing: 2px;
        margin-bottom: 10px
    }

}

@media(max-width:480px) {
    .section {
        padding: 40px 0
    }

    .container {
        padding: 0 14px
    }

}

/* ==================================================
   01. Parallax Background Elements
   ================================================== */

.plx-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0
}

.plx-shape {
    position: absolute;
    border-radius: 50%;
    will-change: transform
}

.plx-s1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(20, 184, 166, .12), transparent 65%);
    top: 5%;
    left: -10%
}

.plx-s2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(37, 99, 235, .10), transparent 65%);
    top: 50%;
    right: -15%
}

.plx-s3 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(139, 92, 246, .12), transparent 65%);
    top: 20%;
    right: 5%
}

.plx-s4 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(244, 63, 94, .10), transparent 65%);
    bottom: 5%;
    left: 0
}

.plx-s5 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(6, 182, 212, .14), transparent 65%);
    top: 10%;
    left: 30%
}

.plx-s6 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(245, 158, 11, .10), transparent 65%);
    bottom: 10%;
    right: 10%
}

.plx-geo {
    position: absolute;
    border: 2px solid rgba(20, 184, 166, .12);
    border-radius: 16px;
    will-change: transform
}

.plx-geo.g1 {
    width: 80px;
    height: 80px;
    top: 15%;
    left: 8%;
    transform: rotate(30deg)
}

.plx-geo.g2 {
    width: 60px;
    height: 60px;
    top: 60%;
    right: 12%;
    border-color: rgba(37, 99, 235, .12);
    border-radius: 50%
}

.plx-geo.g3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 15%;
    border-color: rgba(139, 92, 246, .1);
    transform: rotate(45deg)
}

.plx-geo.g4 {
    width: 50px;
    height: 50px;
    top: 35%;
    right: 25%;
    border-color: rgba(244, 63, 94, .12)
}

.plx-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(20, 184, 166, .08);
    will-change: transform
}

.plx-ring.r1 {
    width: 200px;
    height: 200px;
    top: 10%;
    right: 5%
}

.plx-ring.r2 {
    width: 300px;
    height: 300px;
    bottom: 15%;
    left: -5%;
    border-color: rgba(37, 99, 235, .06)
}

.plx-cross {
    position: absolute;
    width: 20px;
    height: 20px;
    will-change: transform
}

.plx-cross::before,
.plx-cross::after {
    content: '';
    position: absolute;
    background: rgba(20, 184, 166, .18);
    border-radius: 2px
}

.plx-cross::before {
    width: 20px;
    height: 3px;
    top: 50%;
    left: 0;
    transform: translateY(-50%)
}

.plx-cross::after {
    width: 3px;
    height: 20px;
    left: 50%;
    top: 0;
    transform: translateX(-50%)
}

.plx-cross.c1 {
    top: 25%;
    left: 12%
}

.plx-cross.c2 {
    top: 55%;
    right: 10%
}

.plx-cross.c3 {
    bottom: 25%;
    left: 40%
}

.plx-cross.c2::before,
.plx-cross.c2::after {
    background: rgba(37, 99, 235, .18)
}

.plx-cross.c3::before,
.plx-cross.c3::after {
    background: rgba(139, 92, 246, .18)
}

@media(max-width:768px) {
    .plx-shape {
        transform: scale(.5) !important
    }

    .plx-geo,
    .plx-ring {
        display: none
    }

    .plx-cross {
        display: none
    }

}

/* ==================================================
   02. Navigation / Header
   ================================================== */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--navy-900);
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: var(--t)
}

.nav.scrolled {
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08)
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 32px;
    max-width: 1400px;
    margin: 0 auto;
    gap: 20px;

}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none
}

.nav-logo {
    display: flex;
    align-items: center;
    justify-content: center;

}

.nav-btext {
    display: flex;
    flex-direction: column;
    line-height: 1.1;

}

.nav-bname {
    font-family: var(--fb);
    font-size: 20px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.5px;

}

.nav-bsub {
    font-size: 14px;
    color: var(--gray-200);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;

}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0
}

.nav-links li {
    list-style: none
}

.nav-links a:not(.nav-cta) {
    text-decoration: none;
    color: var(--white);
    font-size: 14.5px;
    font-weight: 600;
    transition: var(--t);
    padding: 4px 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;

}

.nav-links a:not(.nav-cta) .plus {
    color: var(--cyan-500);
    font-size: 14px;
    font-weight: 700;

}

.nav-links a:not(.nav-cta):hover {
    color: var(--cyan-500);

}

.nav-links a:not(.nav-cta)::after {
    display: none;

}

.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;

}

.nav-cta {
    background: white;
    color: var(--navy-900) !important;
    padding: 12px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: var(--t);
    display: inline-flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
    border: none
}

.nav-cta:hover {
    background: var(--white);
    color: var(--navy-900) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);

}

.nav-cta-mobile {
    display: none;
    background: white;
    color: var(--navy-900) !important;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none !important;
    transition: var(--t);
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

}

.nav-cta-mobile:hover {
    background: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);

}

.mob-tog {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--white);
    border: none;
    cursor: pointer;
    padding: 10px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    position: relative;
    gap: 4px;

}

.mob-tog span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--navy-900);
    border-radius: 2px;
    transition: all .3s ease;
    position: static;

}

.mob-tog span:nth-child(1) {
    transform-origin: center;

}

.mob-tog span:nth-child(2) {
    opacity: 1;

}

.mob-tog span:nth-child(3) {
    transform-origin: center;

}

.mob-tog.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);

}

.mob-tog.active span:nth-child(2) {
    opacity: 0;

}

.mob-tog.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);

}

@media(max-width:900px) {
    .nav-links {
        display: none
    }

    .nav-cta {
        display: none !important;

    }

    .nav-cta-mobile {
        display: inline-flex !important;

    }

    .nav-links.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--navy-900);
        padding: 20px 24px;
        gap: 16px;
        box-shadow: var(--shadow-lg)
    }

    .nav-links.open a {
        font-size: 15px;
        padding: 8px 0;
        color: var(--white);

    }

}

/* ==================================================
   03. Hero Section
   ================================================== */

.hero {
    position: relative;
    padding: 120px 0 80px;
    background: linear-gradient(to bottom, white, #f0f4f8);
    overflow: hidden;
    display: flex;
    align-items: center;

}

.hero-badge {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    color: var(--blue-900);
    margin-bottom: 10px;
    font-family: var(--fb);
    background-color: rgba(37, 99, 235, 0.16);
    padding: 6px 16px;
    border-radius: 50px;
    letter-spacing: 1.9px;

}

.hero-badge .pulse {
    display: none;

    /* Hide if not needed for this style */

}

.hero-sidebar {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

}

.hero-vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 12px;
    font-weight: 800;
    color: #0A1D37;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 10px;

}

.hero-vertical-text::before {
    content: '';
    width: 1px;
    height: 40px;
    background: #0A1D37;
    display: block;

}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;

}

.hero-title {
    font-family: var(--fd);
    font-size: clamp(40px, 5vw, 72px);
    color: #1E2A4A;
    line-height: 1.1;
    font-weight: 500;
    margin-bottom: 20px;
    position: relative;

}

.hero-title span {
    color: #2C5FD6;
    background: none;
    -webkit-text-fill-color: initial;

}

.heartbeat-line {
    width: 100px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;

}

.hero-tag {
    font-size: 18px;
    color: #4B5563;
    margin-bottom: 30px;
    line-height: 1.6;
    max-width: 500px;

}

.hero-doc-info {
    margin-bottom: 35px;
    display: flex;
    flex-direction: column;
    gap: 4px;

}

.hd-role {
    font-size: 20px;
    font-weight: 700;
    color: var(--blue-900);

}

.hd-degree {
    font-size: 16px;
    color: var(--gray-500);
    font-weight: 600;

}

.hero-ctas {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;

}

.hero-stats {
    display: flex;
    gap: 40px;
    align-items: center;

}

.h-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;

}

.h-stat-num {
    font-family: var(--fb);
    font-size: 32px;
    font-weight: 800;
    color: var(--navy-900);
    line-height: 1;

}

.h-stat-label {
    font-size: 12px;
    color: var(--gray-500);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;

}

.btn-appointment,
.btn-contact-us {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 32px;
    border-radius: 9999px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
    border: 1px solid transparent;

}

.btn-appointment {
    background: #3D7EFF;
    color: #fff;
    border-color: #3D7EFF;
    box-shadow: none;

}

.btn-contact-us {
    background: #fff;
    color: var(--navy-900);
    border-color: var(--navy-900);
    box-shadow: none;

}

.btn-icon-circle {
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

}

.btn-appointment .btn-icon-circle,
.btn-contact-us .btn-icon-circle {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    display: inline-flex;
    margin-left: 4px;

}

.btn-appointment .btn-icon-circle {
    color: #fff;

}

.btn-contact-us .btn-icon-circle {
    color: var(--navy-900);

}

.btn-appointment:hover {
    background: #0443fb;
    border-color: #0443fb;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(44, 95, 214, 0.2);

}

.btn-contact-us:hover {
    background: var(--blue-50);
    color: var(--navy-900);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(44, 95, 214, 0.1);

}

.btn-modern-solid {
    border: none !important;
    border-radius: 15px !important;
    padding: 10px 65px 10px 25px !important;
    background: linear-gradient(135deg, var(--navy-900), var(--cyan-500)) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
    box-shadow: 0 12px 28px rgba(10, 29, 55, 0.25) !important;
    cursor: pointer;
    transition: all 0.25s ease !important;
    position: relative !important;
    height: 64px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;

}

.btn-modern-solid:after {
    content: '→';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: #fff;
    color: var(--cyan-500);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;

}

.btn-modern-solid:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(10, 29, 55, 0.32) !important;
    color: #ffffff !important;

}

.btn-modern-solid .btn-icon-circle {
    display: none !important;

}

.hero-bottom-info {
    display: flex;
    align-items: center;

}

.info-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    padding: 15px 25px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

}

.info-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #F0F9FF;

}

.info-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.info-text {
    display: flex;
    flex-direction: column;

}

.info-label {
    font-size: 12px;
    color: #6B7280;
    font-weight: 600;

}

.info-value {
    font-size: 14px;
    color: var(--cyan-500);
    font-weight: 700;
    text-decoration: none;

}

/* ==================================================
   03.1 Hero Image & Floating Elements
   ================================================== */

.hero-img-wrap {
    position: relative;

}

.hero-img-main {
    position: relative;
    z-index: 2;

}

.hero-circle-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
    background: radial-gradient(circle, rgba(0, 194, 224, 0.1) 0%, transparent 70%);
    z-index: -1;
    border-radius: 50%;
    border: 1px solid rgba(0, 194, 224, 0.1);

}

.hero-doc-img {
    width: 100%;
    display: block;
    object-fit: contain;
    border-radius: 40px;

}

.hf-card {
    position: absolute;
    background: #fff;
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    z-index: 3;
    animation: float 4s ease-in-out infinite;

}

.hf-card-dynamic {
    display: flex;
    align-items: center;
    gap: 15px;
    left: auto;
}

.hf-card-idx-0 {
    top: 10%;
    right: -25%;
}

.hf-card-idx-1 {
    bottom: 5%;
    right: -5%;
}

.hf-card-dynamic:not(.hf-card-idx-0):not(.hf-card-idx-1) {
    right: -10%;
    top: calc(20% + var(--card-idx) * 15%);
}


@keyframes float {

    0%,
    100% {
        transform: translateY(0);

    }

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

    }

}

.hf-diagnosis {
    top: 10%;
    right: -10%;
    width: 180px;
    display: flex;
    flex-direction: column;
    gap: 10px;

}

.circular-chart {
    display: block;
    margin: 0 auto;
    max-width: 80%;
    max-height: 80px;

}

.circle-bg {
    fill: none;
    stroke: #F3F4F6;
    stroke-width: 3.8;

}

.circle {
    fill: none;
    stroke: var(--cyan-500);
    stroke-width: 2.8;
    stroke-linecap: round;

}

.percentage {
    fill: var(--navy-900);
    font-family: var(--fb);
    font-size: 0.5em;
    text-anchor: middle;
    font-weight: 800;

}

.hf-content {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.hf-label {
    font-size: 12px;
    color: #6B7280;
    font-weight: 600;
    line-height: 1.2;

}

.hf-arrow {
    width: 24px;
    height: 24px;
    border: 1px solid #E5E7EB;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--cyan-500);

}

.hf-recovers {
    bottom: 5%;
    right: -5%;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    animation-delay: 1s;

}

.hf-avatars {
    display: flex;
    align-items: center;

}

.hf-avatars img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -10px;

}

.hf-avatars img:first-child {
    margin-left: 0;

}

.hf-value {
    font-size: 18px;
    font-weight: 800;
    color: #0A1D37;

}

.hf-heart {
    top: 40%;
    left: -5%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    animation-delay: 2s;

}

.hf-icon-wrap {
    font-size: 24px;
    color: var(--heartbeat-red);

}

@media (max-width: 1024px) {
    .hero-sidebar {
        display: none;

    }

    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;

    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;

    }

    .hero-tag {
        margin-left: auto;
        margin-right: auto;

    }

    .hero-ctas {
        justify-content: center;

    }

    .hero-bottom-info {
        justify-content: center;

    }

    .hero-img-wrap {
        max-width: 500px;
        margin: 40px auto 0;

    }

}

@media (max-width: 480px) {
    .hero-ctas {
        flex-direction: column;
        width: 100%;

    }

    .btn-appointment,
    .btn-contact-us {
        width: 100%;
        justify-content: space-between;

    }

}

.hf-icon {
    font-size: 24px;
    margin-bottom: 2px
}

.hf-label {
    font-size: 10px;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700
}

.hf-value {
    font-size: 14px;
    color: var(--gray-800);
    font-weight: 700
}

@media(max-width:900px) {
    .hero {
        padding: 60px 0 60px;
        min-height: auto;

    }

    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 28px;

    }

    .hero-doc-info {
        align-items: center;

    }

    .hero-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;

    }

    .hf-card {
        transform: scale(0.85);
        transform-origin: center;

    }

    .hero-content {
        padding-bottom: 0;
        order: 1
    }

    .hero-img-wrap {
        order: 2;
        margin-bottom: 0
    }

    .hero-img-card {
        max-width: 100%;
        margin: 0 auto
    }

    .hfloat {
        padding: 10px 14px
    }

    .hf-icon {
        font-size: 20px
    }

    .hf-label {
        font-size: 9px
    }

    .hf-value {
        font-size: 13px;
        font-weight: 700
    }

    .hfloat.f1 {
        bottom: 80px;
        left: 10px
    }

    .hfloat.f2 {
        top: 20px;
        right: 10px
    }

    .hero-badge {
        font-size: 13px;
        padding: 12px 24px;
        margin-bottom: 28px;
        letter-spacing: 2px;
        background-color: rgba(37, 99, 235, 0.16);

    }

    .hero-title {
        font-size: 52px;
        margin-bottom: 14px
    }

    .hero-deg {
        font-size: 16px;
        margin-bottom: 8px
    }

    .hero-desig {
        font-size: 19px;
        margin-bottom: 24px
    }

    .hero-tag {
        font-size: 19px;
        margin: 0 auto 40px;
        max-width: 400px;
        line-height: 1.7
    }

    .hero-ctas {
        justify-content: center;
        gap: 14px;
        margin-bottom: 36px
    }

    .btn-glow,
    .btn-glass {
        padding: 18px 36px;
        font-size: 18px;
        gap: 12px
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        max-width: 400px;
        margin: 0 auto;
        width: 100%
    }

    .hstat {
        padding: 18px 12px
    }

    .hstat-n {
        font-size: 28px
    }

    .hstat-l {
        font-size: 10px;
        letter-spacing: 1px
    }

}

@media(max-width:480px) {
    .hero {
        padding: 90px 0 48px
    }

    .hero-badge {
        font-size: 11px;
        padding: 10px 20px;
        margin-bottom: 22px;
        letter-spacing: 1.5px
    }

    .hero-title {
        font-size: 44px
    }

    .hero-deg {
        font-size: 15px
    }

    .hero-desig {
        font-size: 17px;
        margin-bottom: 20px
    }

    .hero-tag {
        font-size: 17px;
        max-width: 340px;
        margin-bottom: 32px
    }

    .hero-ctas {
        flex-direction: column;
        align-items: center;
        gap: 10px
    }

    .btn-glow,
    .btn-glass {
        width: 100%;
        max-width: 300px;
        justify-content: center;
        padding: 16px 28px;
        font-size: 17px
    }

    .hero-stats {
        max-width: 340px;
        gap: 10px
    }

    .hstat {
        padding: 14px 8px
    }

    .hstat-n {
        font-size: 22px
    }

    .hstat-l {
        font-size: 8px
    }

}

@media (max-width: 600px) {

    .hf-card-idx-0 {
        top: -7%;
        right: -2%;
    }

    .hf-card-idx-1 {
        bottom: -5%;
        right: 4%;
    }

    .hf-heart {
        left: 3%;
    }

}

/* ==================================================
   04. Trust Bar
   ================================================== */

.trust {
    background: #00216E;
    overflow: hidden
}

.trust-scroll {
    display: flex;
    animation: ts 15s linear infinite;
    white-space: nowrap;
    align-content: center;
    align-items: center;

}

@keyframes ts {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }

}

.trust-i {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    color: rgba(255, 255, 255, .9);
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0
}

.trust-i svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0
}

.tdot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    flex-shrink: 0
}

/* ==================================================
   05. About Section
   ================================================== */

.about {
    background: var(--white);
    overflow: hidden
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center
}

.about-vis {
    position: relative
}

.about-img {
    width: 100%;
    border-radius: var(--rl);
    box-shadow: var(--shadow-xl);
    object-fit: cover;
    aspect-ratio: 5/4
}

.about-accent {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, var(--cyan-500), var(--navy-900));
    border-radius: var(--rl);
    z-index: -1
}

.about-badge {
    position: absolute;
    bottom: 24px;
    left: 24px;
    background: #fff;
    border-radius: var(--r);
    padding: 16px 20px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 12px
}

.about-badge-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--amber-500), #EF6C00);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px
}

.about-badge-t {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-800)
}

.about-badge-s {
    font-size: 11px;
    color: var(--gray-400);
    font-weight: 600
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #4C5D7A;
    margin-bottom: 14px
}

.eyebrow::before {
    content: '';
    width: 28px;
    height: 3px;
    background: var(--navy-900);
    border-radius: 2px
}

.stitle {
    font-family: var(--fd);
    font-size: clamp(32px, 4vw, 48px);
    color: #1E2A4A;
    line-height: 1.1;
    font-weight: 500;
    margin-bottom: 12px
}

.about-text {
    color: var(--gray-600);
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 24px
}

.quals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px
}

.qual {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--r);
    background: linear-gradient(135deg, var(--blue-50), rgba(0, 188, 212, .03));
    border: 1px solid var(--blue-100)
}

.qual-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    color: #fff
}

.qi1 {
    background: linear-gradient(135deg, #2563EB, #0EA5E9)
}

.qi2 {
    background: linear-gradient(135deg, #0D9488, #06B6D4)
}

.qi3 {
    background: linear-gradient(135deg, #8B5CF6, #6366F1)
}

.qi4 {
    background: linear-gradient(135deg, #F59E0B, #F43F5E)
}

.qual strong {
    display: block;
    font-size: 13px;
    color: var(--gray-800)
}

.qual span {
    display: block;
    font-size: 11px;
    color: var(--gray-400)
}

.qual>div:last-child {
    min-width: 0;
    flex: 1
}

@media(max-width:900px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .about-vis {
        display: block;
        overflow: visible
    }

    .about-img {
        aspect-ratio: 16/9;
        max-height: 280px;
        border-radius: var(--rl)
    }

    .about-accent {
        width: 120px;
        height: 120px;
        bottom: -10px;
        right: -10px
    }

    .about-badge {
        position: relative;
        display: inline-flex;
        padding: 10px 14px;
        gap: 8px;
        z-index: 2;
    }

    .about-badge-icon {
        width: 36px;
        height: 36px;
        font-size: 18px
    }

    .about-badge-t {
        font-size: 12px
    }

    .about-badge-s {
        font-size: 10px
    }

    .quals {
        grid-template-columns: 1fr
    }

}

/* ==================================================
   06. Services Section
   ================================================== */

.services {
    background: #f8fafc;
    position: relative;
    overflow: hidden;

}

.svc-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
    gap: 20px;

}

.svc-view-all {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: var(--navy-900);
    color: #fff !important;
    padding: 12px 12px 12px 28px;
    border-radius: 18px;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 14px;
    transition: var(--t);
    box-shadow: 0 10px 25px rgba(10, 29, 55, 0.15);

}

.svc-view-all-icon {
    width: 44px;
    height: 44px;
    background: #fff;
    color: var(--navy-900);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: var(--t);

}

.svc-view-all:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(10, 29, 55, 0.25);

}

.svc-view-all:hover .svc-view-all-icon {
    transform: rotate(-45deg);

}

.svc-grid-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;

}

.svc-card-modern {
    background: #fff;
    border-radius: 30px;
    padding: 40px 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 188, 212, 0.05);
    display: flex;
    flex-direction: column;
    min-height: 320px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    z-index: 1;

}

.svc-card-modern.active {
    background: var(--navy-900);
    border-color: var(--navy-900);

}

.svc-card-icon {
    width: 60px;
    height: 60px;
    color: var(--navy-900);
    font-size: 38px;
    margin-bottom: 30px;
    position: relative;
    z-index: 3;
    transition: var(--t);

}

.svc-card-modern.active .svc-card-icon {
    color: #fff;

}

.svc-card-watermark {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 120px;
    color: rgba(44, 95, 214, 0.03);
    pointer-events: none;
    z-index: 2;
    transform: translate(20%, -20%) rotate(-15deg);
    transition: all 0.6s ease;

}

.svc-card-modern.active .svc-card-watermark {
    color: rgba(44, 95, 214, 0.3);

}

.svc-card-content {
    position: relative;
    z-index: 3;
    margin-bottom: 30px;

}

.svc-card-content h3 {
    font-size: 22px;
    font-weight: 800;
    color: #1E2A4A;
    margin-bottom: 18px;
    transition: var(--t);

}

.svc-card-modern.active .svc-card-content h3 {
    color: #fff;

}

.svc-card-content p {
    font-size: 16px;
    color: var(--gray-600);
    line-height: 1.6;
    transition: var(--t);

}

.svc-card-modern.active .svc-card-content p {
    color: rgba(255, 255, 255, 0.85);

}

.svc-card-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 3;
    padding-top: 25px;
    border-top: 1px dashed var(--gray-200);

}

.svc-card-modern.active .svc-card-footer {
    border-top-color: rgba(255, 255, 255, 0.2);

}

.svc-doctor-count {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 8px;

}

.svc-card-modern.active .svc-doctor-count {
    color: #fff;

}

.svc-doctor-count .dot {
    width: 8px;
    height: 8px;
    background: var(--cyan-500);
    border-radius: 50%;

}

.svc-card-modern.active .svc-doctor-count .dot {
    background: #fff;

}

.svc-card-arrow {
    width: 44px;
    height: 44px;
    background: var(--cyan-500);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    bottom: -5px;
    right: -10px;
    box-shadow: 0 5px 15px rgba(0, 188, 212, 0.2);

}

.svc-card-modern.active .svc-card-arrow {
    background: #fff;
    color: var(--cyan-500);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

}

.svc-card-modern:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 60px rgba(0, 188, 212, 0.12);
    border-color: var(--navy-900);

}

.svc-card-modern:hover .svc-card-arrow {
    transform: scale(1.1) rotate(45deg);
    bottom: 0;
    right: 0;

}

.svc-card-modern:hover .svc-card-watermark {
    transform: translate(15%, -15%) rotate(0deg) scale(1.1);

}

@media(max-width: 1200px) {
    .svc-grid-modern {
        grid-template-columns: repeat(3, 1fr);

    }

}

@media(max-width: 900px) {
    .svc-grid-modern {
        grid-template-columns: repeat(2, 1fr);

    }

    .svc-header-modern {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;

    }

}

@media(max-width: 600px) {
    .svc-grid-modern {
        grid-template-columns: 1fr;

    }

    .svc-card-modern {
        min-height: auto;

    }

}

/* ==================================================
   07. Why Choose Us Section
   ================================================== */

.why {
    background: var(--white);
    position: relative;
    overflow: hidden
}

.why::before {
    content: '';
    position: absolute;
    top: 20%;
    left: -15%;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 188, 212, .06), transparent 50%);
    z-index: 0;
    pointer-events: none;

}

.why::after {
    content: '';
    position: absolute;
    top: 10%;
    right: -10%;
    width: 450px;
    height: 450px;
    border: 1px solid rgba(0, 188, 212, .15);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;

}

.why-header {
    text-align: center;
    margin-bottom: 48px
}

.why-header p {
    color: var(--gray-500);
    font-size: 15px;
    max-width: 480px;
    margin: 8px auto 0
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

.wcard {
    border-radius: var(--rl);
    padding: 32px 24px;
    text-align: center;
    transition: var(--t);
    background: white;
    border: 1px solid var(--gray-200);
    position: relative;
    overflow: hidden
}

.wcard:hover,
.fade-up.visible.wcard:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--navy-900);
    z-index: 10;

}

.wcard::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: var(--t)
}

.wcard:hover::before {
    opacity: 1
}

.wcard:nth-child(1)::before {
    background: linear-gradient(135deg, rgba(10, 29, 55, .04), rgba(0, 188, 212, .04))
}

.wcard:nth-child(1) .wicon {
    background: linear-gradient(135deg, #00216E 0%, #3D7EFF 100%);

}

.wcard:nth-child(2)::before {
    background: linear-gradient(135deg, rgba(0, 188, 212, .04), rgba(10, 29, 55, .04))
}

.wcard:nth-child(2) .wicon {
    background: linear-gradient(135deg, #00216E 0%, #3D7EFF 100%);

}

.wcard:nth-child(3)::before {
    background: linear-gradient(135deg, rgba(10, 29, 55, .04), rgba(0, 188, 212, .04))
}

.wcard:nth-child(3) .wicon {
    background: linear-gradient(135deg, #00216E 0%, #3D7EFF 100%);

}

.wcard:nth-child(4)::before {
    background: linear-gradient(135deg, rgba(0, 188, 212, .04), rgba(10, 29, 55, .04))
}

.wcard:nth-child(4) .wicon {
    background: linear-gradient(135deg, #00216E 0%, #3D7EFF 100%);

}

.wicon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1
}

.wicon svg {
    width: 32px;
    height: 32px;
    color: #fff
}

.wi0 {
    background: linear-gradient(135deg, #F59E0B, #F97316)
}

.wi1 {
    background: linear-gradient(135deg, var(--blue-500), var(--cyan-500))
}

.wi2 {
    background: linear-gradient(135deg, var(--violet-500), #6366F1)
}

.wi3 {
    background: linear-gradient(135deg, var(--teal-500), var(--green-500))
}

.wi4 {
    background: linear-gradient(135deg, var(--rose-500), #EC4899)
}

.wcard h3 {
    font-size: 16px;
    color: var(--gray-900);
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
    font-weight: 700
}

.wcard p {
    font-size: 14px;
    color: var(--gray-500);
    line-height: 1.7;
    position: relative;
    z-index: 1
}

@media(max-width:900px) {
    .why-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px
    }

    .wcard {
        padding: 24px 16px
    }

    .wicon {
        width: 56px;
        height: 56px;
        border-radius: 14px
    }

    .wicon svg {
        width: 24px;
        height: 24px
    }

    .wcard h3 {
        font-size: 15px
    }

    .wcard p {
        font-size: 13px
    }

}

@media(max-width:480px) {
    .why-grid {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .wcard {
        padding: 20px 14px
    }

}

/* ==================================================
   08. Consultation / Appointment Section
   ================================================== */

.consult {
    background: #00216E;
    color: #fff;
    position: relative;
    overflow: hidden
}

.consult::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: radial-gradient(ellipse at 80% 50%, rgba(0, 188, 212, .08), transparent 60%)
}

.ct-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 1
}

.ct-header .eyebrow {
    color: var(--cyan-400)
}

.ct-header .eyebrow::before {
    background: var(--cyan-400)
}

.ct-header .stitle {
    color: #fff
}

.ct-header>p {
    color: rgba(255, 255, 255, .7);
    font-size: 16px;
    line-height: 1.6;
    max-width: 520px;
    margin: 0 auto 28px
}

.ct-tabs {
    display: inline-flex;
    gap: 4px;
    background: rgba(255, 255, 255, .06);
    border-radius: var(--rf);
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .08)
}

.ct-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--rf);
    border: none;
    cursor: pointer;
    font-family: var(--fb);
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, .5);
    background: transparent;
    transition: var(--t)
}

.ct-tab:hover {
    color: rgba(255, 255, 255, .8)
}

.ct-tab.active {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2)
}

.ct-tab svg {
    flex-shrink: 0
}

.cpanel {
    display: none;
    animation: fi .4s ease
}

.cpanel.active {
    display: block
}

@keyframes fi {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }

}

.cgrid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 48px;
    align-items: start;
    position: relative;
    z-index: 1
}

.cleft {
    position: sticky;
    top: 120px
}

.cmode {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--rf);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px
}

.cmode-h {
    background: rgba(0, 188, 212, 0.15);
    color: white;
    border: 1px solid rgba(0, 188, 212, 0.2)
}

.cmode-p {
    background: rgba(0, 188, 212, 0.15);
    color: white;
    border: 1px solid rgba(0, 188, 212, 0.2)
}

.cleft .stitle {
    color: #fff;
    font-size: clamp(26px, 3vw, 36px)
}

.cleft p {
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 24px
}

.clist {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin: 36px 0;

}

.clist-item {
    display: flex;
    align-items: center;
    gap: 20px;
    transition: var(--t)
}

.clist-icon {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: all .4s cubic-bezier(.175, .885, .32, 1.275);
    color: white
}

.clist-item:hover .clist-icon {
    transform: rotate(-5deg) scale(1.1);
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .2)
}

.clist-item.cl-hospital .clist-icon {
    color: white
}

.clist-item.cl-personal .clist-icon {
    color: white
}

.clist-content {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.clist-content label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.7)
}

.clist-content span {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3
}

.clist-content a {
    color: white !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 17px
}

/* .clist-item.cl-hospital .clist-content a {
    color: var(--navy-900) !important
} */

.stags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px
}

.stag {
    padding: 6px 12px;
    border-radius: var(--rf);
    font-size: 11px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .03)
}

.cform {
    background: #fff;
    border-radius: var(--rl);
    padding: 36px;
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
    color: var(--gray-800)
}

/* .cform::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--navy-900), var(--cyan-500), var(--cyan-400))
} */

#panel-p .cform::before {
    background: linear-gradient(90deg, var(--cyan-500), var(--cyan-400), var(--navy-900))
}

.fmi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: var(--rf)
}

.fmi-h {
    background: rgba(37, 99, 235, .08);
    color: var(--blue-600)
}

.fmi-p {
    background: rgba(20, 184, 166, .08);
    color: var(--teal-600)
}

.ft {
    font-family: var(--fd);
    font-size: 22px;
    color: var(--blue-900);
    margin-bottom: 4px
}

.fst {
    font-size: 13px;
    color: var(--gray-400);
    margin-bottom: 24px
}

.frow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.fg {
    margin-bottom: 14px
}

.fg label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-600);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .5px
}

.fg label .req {
    color: var(--rose-500)
}

.fg input,
.fg select,
.fg textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    font-family: var(--fb);
    font-size: 14px;
    color: var(--gray-800);
    background: var(--gray-50);
    transition: var(--t);
    outline: none
}

.fg input:focus,
.fg select:focus,
.fg textarea:focus {
    border-color: var(--blue-500);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .1)
}

.fg textarea {
    resize: vertical;
    min-height: 70px
}

.fbtn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--navy-900), var(--cyan-500));
    color: #fff;
    border: none;
    border-radius: var(--r);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--t);
    font-family: var(--fb);
    box-shadow: 0 4px 15px rgba(10, 29, 55, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.fbtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, .4)
}

.fbtn-p {
    background: linear-gradient(135deg, var(--teal-500), var(--green-500)) !important;
    box-shadow: 0 4px 15px rgba(20, 184, 166, .35) !important
}

.fpriv {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 11px;
    color: var(--gray-400)
}

.fpriv svg {
    width: 14px;
    height: 14px;
    color: var(--green-600);
    flex-shrink: 0
}

@media(max-width:900px) {
    .cgrid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .cleft {
        position: static
    }

    .cleft .stitle {
        font-size: 24px
    }

    .cform {
        padding: 20px 16px
    }

    .frow {
        grid-template-columns: 1fr
    }

    .clist {
        gap: 20px;
        margin: 24px 0
    }

    .clist-icon {
        width: 44px;
        height: 44px;
        font-size: 16px;
        border-radius: 12px
    }

    .clist-content span,
    .clist-content a {
        font-size: 15px
    }

    .fg {
        margin-bottom: 10px
    }

    .fg label {
        font-size: 11px
    }

    .fg input,
    .fg select,
    .fg textarea {
        padding: 10px 12px;
        font-size: 13px
    }

    .fbtn {
        padding: 12px;
        font-size: 14px
    }

    .stags {
        gap: 4px
    }

    .stag {
        padding: 4px 10px;
        font-size: 10px
    }

}

@media(max-width:600px) {
    .ct-tabs {
        border-radius: var(--r);
        width: auto
    }

    .ct-tab {
        justify-content: center;
        border-radius: 10px;
        padding: 10px 16px;
        font-size: 12px
    }

    .clist {
        gap: 16px
    }

}

/* ==================================================
   09. Testimonials Section
   ================================================== */

.testi {
    background: var(--offwhite);
    overflow: hidden;
    position: relative
}

.testi-header {
    text-align: center;
    margin-bottom: 48px
}

.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

.tcard {
    background: #fff;
    border-radius: var(--rl);
    padding: 28px;
    border: 1px solid var(--gray-200);
    transition: var(--t);
    position: relative;
    overflow: hidden
}

.tcard:hover,
.fade-up.visible.tcard:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    z-index: 10;

}

.tcard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px
}

.tcard:nth-child(6n+1)::before {
    background: linear-gradient(90deg, var(--navy-900), var(--navy-900))
}

.tcard:nth-child(6n+2)::before {
    background: linear-gradient(90deg, var(--teal-500), var(--green-500))
}

.tcard:nth-child(6n+3)::before {
    background: linear-gradient(90deg, var(--violet-500), var(--rose-400))
}

.tcard:nth-child(6n+4)::before {
    background: linear-gradient(90deg, var(--amber-500), #EF4444)
}

.tcard:nth-child(6n+5)::before {
    background: linear-gradient(90deg, #EC4899, var(--violet-500))
}

.tcard:nth-child(6n+6)::before {
    background: linear-gradient(90deg, var(--green-500), var(--teal-500))
}

.tstars {
    display: flex;
    gap: 3px;
    margin-bottom: 14px
}

.tstars svg {
    width: 16px;
    height: 16px;
    fill: var(--amber-400);
    color: var(--amber-400)
}

.ttext {
    font-size: 15px;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 18px
}

.tauthor {
    display: flex;
    align-items: center;
    gap: 12px
}

.tav {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 17px;
    color: #fff
}

.tav1 {
    background: linear-gradient(135deg, var(--blue-500), var(--cyan-500))
}

.tav2 {
    background: linear-gradient(135deg, var(--teal-500), var(--green-500))
}

.tav3 {
    background: linear-gradient(135deg, var(--violet-500), var(--rose-400))
}

.tav4 {
    background: linear-gradient(135deg, var(--amber-500), #EF4444)
}

.tav5 {
    background: linear-gradient(135deg, #EC4899, var(--violet-500))
}

.tav6 {
    background: linear-gradient(135deg, var(--green-500), var(--teal-500))
}

.tname {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-800)
}

.tinfo {
    font-size: 11px;
    color: var(--gray-400);
    font-weight: 600
}

.tbadge {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 10px;
    color: var(--green-600);
    padding: 4px 10px;
    border-radius: var(--rf);
    font-weight: 700;
    background: rgba(34, 197, 94, .1)
}

@media(max-width:900px) {
    .testi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px
    }

}

@media(max-width:600px) {
    .testi-grid {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .tcard {
        padding: 22px
    }

}

/* ==================================================
   10. FAQ Section
   ================================================== */

.faq {
    background: #ffffff;
    padding: 80px 0;

}

.faq-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: flex-start;

}

.faq-header {
    text-align: left;
    margin-bottom: 20px;

}

.faq-header .stitle {
    color: #1E2A4A;

}

.faq-intro {
    color: var(--gray-500);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 40px;

}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;

}

.faq-item {
    border: 1px solid #e2f2f9;
    border-radius: 8px;
    overflow: hidden;
    transition: var(--t);
    background: #f0f9ff;

}

.faq-item.active {
    background: #ffffff;
    border-color: var(--navy-900);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    cursor: pointer;
    gap: 16px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: var(--fb);

}

.faq-q h3 {
    font-size: 16px;
    color: #1E2A4A;
    font-weight: 700;

}

.faq-t {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: #1E2A4A;
    font-size: 14px;

}

.faq-item.active .faq-t {
    transform: rotate(90deg);

}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;

}

.faq-a-inner {
    padding: 0 24px 24px;
    font-size: 15px;
    color: var(--gray-600);
    line-height: 1.7;
    background: #ffffff;

}

.faq-img-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

}

.faq-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

}

.faq-contact-card {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

}

.faq-cc-left {
    display: flex;
    align-items: center;
    gap: 15px;

}

.faq-cc-icon {
    color: var(--navy-900);
    font-size: 24px;

}

.faq-cc-info {
    display: flex;
    flex-direction: column;

}

.faq-cc-label {
    font-size: 12px;
    color: var(--gray-500);
    font-weight: 600;
    text-transform: uppercase;

}

.faq-cc-phone {
    font-size: 16px;
    color: var(--navy-900);
    font-weight: 800;
    text-decoration: none;

}

@media(max-width: 900px) {
    .faq-grid {
        grid-template-columns: 1fr;

    }

}

@media(max-width: 600px) {
    .faq-contact-card {
        flex-direction: column;
        gap: 15px;
        bottom: 10px;
        left: 10px;
        right: 10px;
        margin-top: 15px;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

    }

    .faq-img-wrapper {
        box-shadow: none;
        overflow: visible;

    }

    .faq-img {
        border-radius: 20px;

    }

}

/* FINAL CTA */

.fcta {
    background: #ffffff;
    padding: 100px 0;
    position: relative;
    overflow: hidden;

}

.fcta-c {
    background: linear-gradient(135deg, rgba(50, 88, 149, 0.7) 0%, rgba(36, 64, 110, 0.7) 100%), url('/wp-content/uploads/2026/05/WhatsApp-Image-2026-05-18-at-11.31.23-AM.jpeg') top/cover no-repeat, #325895;
    border-radius: 30px;
    padding: 50px;
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
    box-shadow: 0 20px 50px rgba(50, 88, 149, 0.15);
    border: none;

}

.fcta-c::before {
    display: none;

}

.fcta .eyebrow {
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;

}

.fcta .eyebrow::before {
    content: '';
    display: inline-block;
    width: 35px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;

}

.fcta .stitle {
    color: #ffffff;
    font-size: clamp(36px, 5vw, 48px);
    margin-bottom: 20px;

}

.fcta p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 20px;
    line-height: 1.6;
    margin: 0 auto 40px;
    max-width: 650px;
    font-weight: 400;

}

.fcta-btns {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0;

}

.finfo {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 32px;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    font-weight: 600
}

.finfo-i {
    display: flex;
    align-items: center;
    gap: 8px
}

.finfo-i svg {
    width: 17px;
    height: 17px;
    opacity: .7
}

.btn-w {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: var(--blue-700);
    padding: 16px 36px;
    border-radius: var(--rf);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--t);
    box-shadow: 0 4px 15px rgba(0, 0, 0, .15)
}

.btn-w:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .25)
}

.btn-ow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: #fff;
    padding: 16px 36px;
    border-radius: var(--rf);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--t);
    border: 2px solid rgba(255, 255, 255, .25)
}

.btn-ow:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .5)
}

.finfo {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 32px;
    flex-wrap: wrap
}

.finfo-i {
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600
}

.finfo-i svg {
    width: 17px;
    height: 17px
}

/* PREMIUM FOOTER */

.footer {
    background: #012A74;
    position: relative;
    color: rgba(255, 255, 255, 0.7);
    padding: 80px 0 20px;
    overflow: hidden;
    border-top: 2px solid var(--navy-900);

}

.footer-top-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--cyan-500), var(--blue-600), var(--navy-900));

}

.footer::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 188, 212, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;

}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;

}

.foot-brand-col {
    max-width: 400px;

}

.foot-bn {
    font-family: var(--fb);
    font-size: 28px;
    color: #fff;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1.2;
    margin: 0;
}

.foot-role {
    font-size: 13px;
    color: var(--gray-200);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    display: inline-block;

}

.foot-bs {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 16px;
    display: flex;
    gap: 10px;
    color: rgba(255, 255, 255, 0.6);

}

.foot-bs i {
    color: white;
    margin-top: 4px;

}

.foot-phone-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 24px;
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: var(--t);
    font-size: 15px;

}

.foot-phone-btn i {
    color: white;

}

.foot-phone-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
    transform: translateY(-2px);

}

.foot-col-title {
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;

}

.foot-col-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: white;
    border-radius: 2px;

}

.foot-links {
    display: flex;
    flex-direction: column;
    gap: 15px;

}

.foot-links a,
.foot-contact-list a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: var(--t);
    display: flex;
    align-items: center;
    gap: 10px;

}

.foot-links a:hover,
.foot-contact-list a:hover {
    color: white;
    transform: translateX(5px);

}

.foot-contact-list {
    display: flex;
    flex-direction: column;
    gap: 15px;

}

.foot-bot {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;

}

.foot-bot-left p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;

}

.foot-disc-text {
    font-size: 11px !important;
    line-height: 1.6;
    max-width: 700px;
    color: rgba(255, 255, 255, 0.3) !important;

}

.foot-bot-right p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);

}

.foot-bot-right a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: var(--t);

}

.foot-bot-right a:hover {
    color: #fff;

}

@media(max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;

    }

    .foot-brand-col {
        grid-column: 1 / -1;
        max-width: 100%;

    }

}

@media(max-width: 600px) {
    .footer {
        padding: 40px 0px 20px;

    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        margin-bottom: 20px;

    }

    .foot-bot {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 8px;

    }

    .foot-disc-text {
        text-align: center;
        margin: 0 auto;

    }

}

@media(max-width:768px) {

    /* Handled globally via flex-col */

    .fcta {
        padding: 48px 0
    }

    .fcta h2 {
        font-size: 26px
    }

    .fcta p {
        font-size: 14px;
        margin-bottom: 24px
    }

    .fcta-btns {
        flex-direction: column;
        align-items: center;
        gap: 10px
    }

    .btn-w,
    .btn-ow {
        width: 100%;
        max-width: 260px;
        justify-content: center;
        padding: 12px 20px;
        font-size: 14px
    }

    .finfo {
        flex-direction: column;
        gap: 8px;
        align-items: center
    }

    .finfo-i {
        font-size: 13px
    }

    .tcard {
        padding: 20px
    }

    .faq-q {
        padding: 14px 16px
    }

    .faq-q h3 {
        font-size: 15px
    }

    .faq-a-inner {
        padding: 0 16px 14px;
        font-size: 14px
    }

}

/* AWARDS */

.awards {
    background: var(--offwhite);
    position: relative;
    overflow: hidden
}

.awards-header {
    text-align: center;
    margin-bottom: 48px
}

.awards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.award-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: #fff;
    border-radius: var(--r);
    border: 1px solid var(--gray-200);
    transition: var(--t)
}

.award-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--navy-900)
}

.award-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid
}

.ai-teal {
    border-color: var(--teal-500);
    color: var(--teal-600)
}

.ai-blue {
    border-color: var(--blue-500);
    color: var(--blue-600)
}

.ai-violet {
    border-color: var(--violet-500);
    color: var(--violet-500)
}

.ai-rose {
    border-color: var(--rose-500);
    color: var(--rose-500)
}

.cert-gallery {
    margin-top: 56px;
    padding-top: 48px;
    border-top: 1px solid var(--gray-200)
}

.cert-gallery-header {
    text-align: center;
    margin-bottom: 36px
}

.cert-gallery-header .eyebrow {
    color: #4C5D7A;

}

.cert-gallery-header .eyebrow::before {
    background: var(--blue-600)
}

.cert-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

.cert-card {
    cursor: pointer;
    background: #fff;
    border-radius: var(--rl);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: var(--t);
    position: relative;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation
}

.cert-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, .1);
    transform: translateY(-4px);
    border-color: var(--navy-900)
}

.cert-card::after {
    content: '\1F50D';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, .5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0;
    transition: var(--t)
}

.cert-card:hover::after {
    opacity: 1
}

.cert-card .cert-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: var(--t);

}

.cert-card .cert-img:hover {
    opacity: 0.85;

}

.cert-lightbox {
    display: none;
    position: fixed;
    z-index: 99999;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;

}

.cert-lightbox.show {
    display: block;
    opacity: 1;

}

.cert-lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80vh;
    border-radius: var(--r);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

.cert-lightbox.show .cert-lightbox-content {
    transform: scale(1);

}

.cert-lightbox-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 15px 0;
    font-size: 16px;

}

.cert-lightbox-close {
    position: absolute;
    top: 25px;
    right: 40px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 2;

}

.cert-lightbox-close:hover,
.cert-lightbox-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;

}

.cert-card p {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--gray-600);
    font-weight: 600;
    text-align: center;
    background: var(--offwhite)
}

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
    -webkit-tap-highlight-color: transparent
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.lightbox img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5)
}

.cert-lightbox.show {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: cent
}

.cert-lightbox.show .cert-lightbox-content {
    margin: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.lb-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, .1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--t);
    z-index: 10
}

.lb-close:hover {
    background: rgba(255, 255, 255, .25)
}

.lb-close svg {
    width: 22px;
    height: 22px;
    color: #fff
}

.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, .1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--t);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent
}

.lb-nav:hover {
    background: rgba(255, 255, 255, .25)
}

.lb-nav svg {
    width: 24px;
    height: 24px;
    color: #fff
}

.lb-prev {
    left: 16px
}

.lb-next {
    right: 16px
}

.lb-caption {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    max-width: 80vw
}

.lb-counter {
    position: absolute;
    top: 24px;
    left: 24px;
    color: rgba(255, 255, 255, .4);
    font-size: 13px;
    font-weight: 600
}

@media(max-width:768px) {
    .cert-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px
    }

    .cert-card p {
        font-size: 12px;
        padding: 10px
    }

}

.award-icon svg {
    width: 18px;
    height: 18px
}

.award-card p {
    font-size: 15px;
    color: var(--gray-700);
    font-weight: 500;
    line-height: 1.5
}

@media(max-width:768px) {
    .awards-grid {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .award-card {
        padding: 16px
    }

    .award-card p {
        font-size: 14px
    }

}

/* SYMPTOMS */

.symptoms {
    background: #fdfdfd;

}

.symp-header {
    text-align: center;
    margin-bottom: 50px;

}

.symp-header .stitle {
    color: #1E2A4A;

}

.symp-sub {
    color: var(--gray-600);
    font-size: 16px;
    max-width: 600px;
    margin: 15px auto 0;
    line-height: 1.7;

}

.symp-grid-new {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 60px;

}

.symp-card {
    background: #fff;
    padding: 22px 25px;
    border-radius: 15px;
    border: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);

}

.symp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 188, 212, 0.08);
    border-color: var(--navy-900);

}

.symp-icon {
    color: #FF1F1F;
    font-size: 22px;
    flex-shrink: 0;

}

.symp-card span {
    font-size: 15px;
    color: #1E2A4A;
    font-weight: 600;

}

.symp-cta-wrap {
    display: flex;
    justify-content: center;

}

@media(max-width:1100px) {
    .symp-grid-new {
        grid-template-columns: repeat(3, 1fr);

    }

}

@media(max-width:900px) {
    .symp-grid-new {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;

    }

    .symp-card {
        padding: 18px 20px;

    }

}

@media(max-width:600px) {
    .symp-grid-new {
        grid-template-columns: 1fr;

    }

    .symp-header {
        margin-bottom: 35px;

    }

}

/* ANIM */

.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s ease
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0)
}

.fade-up.d1 {
    transition-delay: .1s
}

.fade-up.d2 {
    transition-delay: .2s
}

.fade-up.d3 {
    transition-delay: .3s
}

.fade-up.d4 {
    transition-delay: .4s
}

/* FLOAT */

.wa {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(37, 211, 102, .4);
    transition: var(--t);
    text-decoration: none
}

.wa:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(37, 211, 102, .5)
}

.wa svg {
    width: 28px;
    height: 28px;
    color: #fff
}

.btt {
    position: fixed;
    bottom: 90px;
    right: 24px;
    z-index: 999;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--t);
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none
}

.btt.visible {
    opacity: 1;
    pointer-events: auto
}

.btt:hover {
    background: var(--blue-50);
    border-color: var(--blue-300)
}

.btt svg {
    width: 16px;
    height: 16px;
    color: var(--blue-600)
}

.forminator-ui {
    max-width: 900px;
    margin: 0 auto;

}

.forminator-ui .forminator-row {
    margin-bottom: 22px !important;

}

.forminator-ui label,
.forminator-ui .forminator-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;

}

.forminator-ui input,
.forminator-ui select,
.forminator-ui textarea {
    width: 100% !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    color: #0f172a !important;
    background: #f8fafc !important;
    transition: all 0.25s ease !important;
    box-shadow: none !important;

}

.forminator-ui select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 16px !important;
    padding-right: 44px !important;
    cursor: pointer;

}

/* Ensure Forminator select wrapper doesn't conflict */

.forminator-ui .forminator-select,
.forminator-ui .forminator-select-container {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;

}

.forminator-ui input:focus,
.forminator-ui select:focus,
.forminator-ui textarea:focus {
    border-color: var(--cyan-500) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(0, 188, 212, 0.14) !important;
    outline: none !important;

}

/* Fix for icons in fields (like Datepicker) */

.forminator-ui .forminator-input-with-icon {
    position: relative;

}

.forminator-ui .forminator-input-with-icon input {
    padding-left: 46px !important;

}

.forminator-ui .forminator-input-with-icon i,
.forminator-ui .forminator-input-with-icon .forminator-icon {
    position: absolute;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #64748b !important;
    font-size: 16px !important;
    pointer-events: none;

}

.forminator-ui textarea {
    min-height: 140px !important;
    resize: vertical;

}

.forminator-ui .forminator-button-submit {
    border: 1px solid transparent !important;
    border-radius: 9999px !important;
    padding: 12px 32px !important;
    background: #3D7EFF !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

}

.forminator-ui .forminator-button-submit:after {
    content: '→';
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: normal !important;
    margin-left: 4px !important;

}

.forminator-ui .forminator-button-submit:hover {
    transform: translateY(-2px) !important;
    background: #0443fb !important;
    border-color: #0443fb !important;
    box-shadow: 0 4px 12px rgba(44, 95, 214, 0.2) !important;
    color: #ffffff !important;

}

.forminator-ui .forminator-required {
    color: #ef4444 !important;

}

.forminator-ui .forminator-description,
.forminator-ui ::placeholder {
    color: #94a3b8 !important;

}

@media (max-width: 768px) {
    .forminator-ui {
        padding: 22px;
        border-radius: 18px;

    }

    .forminator-ui .forminator-row {
        margin-bottom: 18px !important;

    }

    .forminator-ui input,
    .forminator-ui select,
    .forminator-ui textarea {
        padding: 13px 14px !important;

    }

}

/* Force Select2 to match the Forminator input design */

.select2-container.forminator-select .select2-selection--single {
    background-color: rgb(248, 250, 252) !important;
    border: 0.8px solid rgb(219, 227, 238) !important;
    border-radius: 14px !important;
    height: 49.1px !important;
    display: flex !important;
    align-items: center !important;

}

.select2-container.forminator-select .select2-selection__rendered {
    padding: 0 16px !important;
    font-size: 15px !important;
    color: rgb(15, 23, 42) !important;
    line-height: 49.1px !important;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;

}

.select2-container.forminator-select .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 10px !important;
    display: flex !important;
    align-items: center !important;
    position: absolute !important;

}

a.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    background: #31ca31;
    color: white;
    bottom: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 100%;
    font-size: 32px;
    z-index: 99999;
}