/* ===================================================================
   ibhama.COM
   MASTER STYLESHEET
 
   =================================================================== */

/* =========================
   CSS RESET
========================= */

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

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

body{
    margin:0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section{
    display:block;
}

ol,
ul{
    list-style:none;
}

blockquote,
q{
    quotes:none;
}

blockquote::before,
blockquote::after,
q::before,
q::after{
    content:"";
}

table{
    border-collapse:collapse;
    border-spacing:0;
}

img,
picture,
video,
canvas,
svg{
    display:block;
    max-width:100%;
    height:auto;
}

img{
    border:none;
}

iframe{
    border:0;
}

a{
    color:inherit;
    text-decoration:none;
    transition:.3s ease;
}

button,
input,
textarea,
select{
    font:inherit;
    color:inherit;
}

button{
    cursor:pointer;
    border:none;
    background:none;
}

textarea{
    resize:vertical;
}

input:focus,
textarea:focus,
select:focus,
button:focus{
    outline:none;
}

:focus-visible{
    outline:3px solid #2f80ed;
    outline-offset:3px;
}

::selection{
    background:#0d6efd;
    color:#ffffff;
}

/* =========================
   ROOT VARIABLES
========================= */

:root{

    /* Brand */

    --primary:#0c6cf2;
    --primary-dark:#0956c8;
    --primary-light:#dcecff;

    --secondary:#0ea5a5;
    --secondary-dark:#0a8a8a;

    --accent:#1fb6ff;

    /* Medical */

    --medical-blue:#0d6efd;
    --medical-teal:#13b8b8;
    --medical-green:#28b463;

    /* Neutral */

    --white:#ffffff;

    --gray-50:#fafbfd;
    --gray-100:#f5f8fb;
    --gray-200:#edf2f7;
    --gray-300:#d8e0e8;
    --gray-400:#b7c3cf;
    --gray-500:#94a3b8;
    --gray-600:#64748b;
    --gray-700:#475569;
    --gray-800:#334155;
    --gray-900:#1e293b;

    --black:#111827;

    /* Background */

    --body-bg:#f8fbfd;

    --section-bg:#ffffff;

    --section-alt:#f4f8fb;

    /* Text */

    --heading:#12314f;

    --text:#475569;

    --text-light:#6b7280;

    /* Border */

    --border:#dfe8ef;

    /* Radius */

    --radius-xs:6px;
    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:24px;
    --radius-xl:34px;
    --radius-round:999px;

    /* Shadow */

    --shadow-xs:
        0 2px 8px rgba(0,0,0,.04);

    --shadow-sm:
        0 6px 18px rgba(0,0,0,.06);

    --shadow-md:
        0 14px 35px rgba(0,0,0,.08);

    --shadow-lg:
        0 25px 60px rgba(0,0,0,.12);

    /* Transition */

    --transition-fast:.2s ease;

    --transition:.35s ease;

    --transition-slow:.55s ease;

    /* Layout */

    --container:1280px;

    --container-wide:1440px;

    --header-height:88px;

    --section-space:90px;

    /* Fonts */

    --font-heading:
        "Poppins",
        "Segoe UI",
        sans-serif;

    --font-body:
        "Inter",
        "Segoe UI",
        sans-serif;

}

/* =========================
   HTML + BODY
========================= */

html,
body{
    width:100%;
    min-height:100%;
}

body{

    background:var(--body-bg);

    color:var(--text);

    font-family:var(--font-body);

    font-size:16px;

    line-height:1.75;

    font-weight:400;

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

/* =========================
   TYPOGRAPHY
========================= */

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--heading);

    font-family:var(--font-heading);

    font-weight:700;

    line-height:1.2;

    margin-bottom:20px;

}

h1{

    font-size:clamp(2.8rem,5vw,4.8rem);

    letter-spacing:-1px;

}

h2{

    font-size:clamp(2.1rem,4vw,3.5rem);

}

h3{

    font-size:2rem;

}

h4{

    font-size:1.5rem;

}

h5{

    font-size:1.2rem;

}

h6{

    font-size:1rem;

}

p{

    margin-bottom:18px;

    color:var(--text);

}

strong{

    font-weight:700;

    color:var(--heading);

}

small{

    font-size:.9rem;

}

mark{

    background:#eaf4ff;

    color:var(--primary);

    padding:2px 5px;

    border-radius:4px;

}

hr{

    border:none;

    border-top:1px solid var(--border);

    margin:50px 0;

}

/* ==========================================================
   PART 1B
   LAYOUT SYSTEM • CONTAINERS • SECTIONS • UTILITIES
   ========================================================== */


/*==========================================================
    LAYOUT CONTAINERS
==========================================================*/

.container{
    width:100%;
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:20px;
}

.container-wide{
    width:100%;
    max-width:1440px;
    margin-inline:auto;
    padding-inline:24px;
}

.container-fluid{
    width:100%;
    padding-inline:24px;
}

.container-small{
    width:100%;
    max-width:980px;
    margin-inline:auto;
    padding-inline:20px;
}


/*==========================================================
    SECTION SPACING
==========================================================*/

section{
    position:relative;
}

.section{

    padding:
        var(--section-space)
        0;

}

.section-large{

    padding:
        120px
        0;

}

.section-small{

    padding:
        60px
        0;

}

.section-white{

    background:#ffffff;

}

.section-light{

    background:var(--section-alt);

}

.section-dark{

    background:#0f2744;

    color:#ffffff;

}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5{

    color:#ffffff;

}

.section-dark p{

    color:#dbe7f2;

}


/*==========================================================
    DISPLAY HELPERS
==========================================================*/

.d-none{

    display:none;

}

.d-block{

    display:block;

}

.d-inline{

    display:inline;

}

.d-inline-block{

    display:inline-block;

}

.d-flex{

    display:flex;

}

.d-grid{

    display:grid;

}


/*==========================================================
    FLEX HELPERS
==========================================================*/

.flex-row{

    flex-direction:row;

}

.flex-column{

    flex-direction:column;

}

.flex-wrap{

    flex-wrap:wrap;

}

.align-start{

    align-items:flex-start;

}

.align-center{

    align-items:center;

}

.align-end{

    align-items:flex-end;

}

.justify-start{

    justify-content:flex-start;

}

.justify-center{

    justify-content:center;

}

.justify-end{

    justify-content:flex-end;

}

.justify-between{

    justify-content:space-between;

}

.justify-around{

    justify-content:space-around;

}

.justify-evenly{

    justify-content:space-evenly;

}

.flex-1{

    flex:1;

}


/*==========================================================
    GRID HELPERS
==========================================================*/

.grid{

    display:grid;

}

.grid-2{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:40px;

}

.grid-3{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:35px;

}

.grid-4{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:30px;

}

.grid-auto{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

}


/*==========================================================
    WIDTH HELPERS
==========================================================*/

.w-100{

    width:100%;

}

.w-auto{

    width:auto;

}

.max-100{

    max-width:100%;

}

.h-100{

    height:100%;

}

.min-vh{

    min-height:100vh;

}


/*==========================================================
    SPACING UTILITIES
==========================================================*/

.mt-0{margin-top:0;}
.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-50{margin-top:50px;}
.mt-60{margin-top:60px;}

.mb-0{margin-bottom:0;}
.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-50{margin-bottom:50px;}
.mb-60{margin-bottom:60px;}

.pt-0{padding-top:0;}
.pt-20{padding-top:20px;}
.pt-40{padding-top:40px;}
.pt-60{padding-top:60px;}

.pb-0{padding-bottom:0;}
.pb-20{padding-bottom:20px;}
.pb-40{padding-bottom:40px;}
.pb-60{padding-bottom:60px;}

.mx-auto{

    margin-inline:auto;

}


/*==========================================================
    POSITION
==========================================================*/

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}

.fixed{

    position:fixed;

}

.sticky{

    position:sticky;

}

.top-0{

    top:0;

}

.left-0{

    left:0;

}

.right-0{

    right:0;

}

.bottom-0{

    bottom:0;

}


/*==========================================================
    OVERFLOW
==========================================================*/

.overflow-hidden{

    overflow:hidden;

}

.overflow-auto{

    overflow:auto;

}

.overflow-visible{

    overflow:visible;

}


/*==========================================================
    BORDER RADIUS
==========================================================*/

.radius-xs{

    border-radius:var(--radius-xs);

}

.radius-sm{

    border-radius:var(--radius-sm);

}

.radius-md{

    border-radius:var(--radius-md);

}

.radius-lg{

    border-radius:var(--radius-lg);

}

.radius-xl{

    border-radius:var(--radius-xl);

}

.radius-round{

    border-radius:999px;

}


/*==========================================================
    SHADOW HELPERS
==========================================================*/

.shadow-xs{

    box-shadow:var(--shadow-xs);

}

.shadow-sm{

    box-shadow:var(--shadow-sm);

}

.shadow-md{

    box-shadow:var(--shadow-md);

}

.shadow-lg{

    box-shadow:var(--shadow-lg);

}


/*==========================================================
    TRANSITIONS
==========================================================*/

.transition{

    transition:
        all
        var(--transition);

}

.transition-fast{

    transition:
        all
        var(--transition-fast);

}

.transition-slow{

    transition:
        all
        var(--transition-slow);

}


/*==========================================================
    PREMIUM CARD SYSTEM
==========================================================*/

.card{

    position:relative;

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

    border-color:rgba(12,108,242,.18);

}

.card-header{

    padding:28px 32px 20px;

}

.card-body{

    padding:30px 32px;

}

.card-footer{

    padding:24px 32px;

    border-top:1px solid var(--border);

}

.card-flat{

    box-shadow:none;

}

.card-bordered{

    border:1px solid var(--border);

}

.card-hover:hover{

    transform:translateY(-6px);

}


/*==========================================================
    GLASS EFFECTS
==========================================================*/

.glass{

    background:
        rgba(255,255,255,.82);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.45);

}

.glass-dark{

    background:
        rgba(17,24,39,.78);

    backdrop-filter:blur(14px);

    color:#ffffff;

}


/*==========================================================
    BACKGROUND UTILITIES
==========================================================*/

.bg-primary{

    background:var(--primary);

    color:#ffffff;

}

.bg-secondary{

    background:var(--secondary);

    color:#ffffff;

}

.bg-light{

    background:var(--section-alt);

}

.bg-white{

    background:#ffffff;

}

.bg-dark{

    background:#102c47;

    color:#ffffff;

}

.bg-gradient-primary{

    background:
    linear-gradient(
        135deg,
        #0d6efd,
        #13b8b8
    );

    color:#ffffff;

}

.bg-gradient-soft{

    background:
    linear-gradient(
        180deg,
        #ffffff,
        #f3f9fd
    );

}

.bg-gradient-medical{

    background:
    linear-gradient(
        135deg,
        #e8f5ff,
        #ffffff,
        #f4ffff
    );

}


/*==========================================================
    TEXT COLORS
==========================================================*/

.text-primary{

    color:var(--primary);

}

.text-secondary{

    color:var(--secondary);

}

.text-dark{

    color:var(--heading);

}

.text-light{

    color:var(--text-light);

}

.text-white{

    color:#ffffff;

}

.text-success{

    color:#16a34a;

}

.text-danger{

    color:#dc2626;

}

.text-warning{

    color:#f59e0b;

}


/*==========================================================
    FONT WEIGHTS
==========================================================*/

.fw-300{

    font-weight:300;

}

.fw-400{

    font-weight:400;

}

.fw-500{

    font-weight:500;

}

.fw-600{

    font-weight:600;

}

.fw-700{

    font-weight:700;

}

.fw-800{

    font-weight:800;

}


/*==========================================================
    TEXT ALIGNMENT
==========================================================*/

.text-left{

    text-align:left;

}

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}


/*==========================================================
    IMAGE HELPERS
==========================================================*/

.img-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

.img-contain{

    width:100%;

    height:100%;

    object-fit:contain;

}

.img-rounded{

    border-radius:var(--radius-md);

}

.img-circle{

    border-radius:50%;

}

.img-shadow{

    box-shadow:var(--shadow-md);

}


/*==========================================================
    MEDICAL ICON HOLDER
==========================================================*/

.icon-box{

    width:72px;

    height:72px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    linear-gradient(
        135deg,
        #0d6efd,
        #13b8b8
    );

    color:#ffffff;

    font-size:30px;

    box-shadow:0 18px 35px rgba(13,108,242,.18);

}

.icon-box-sm{

    width:54px;

    height:54px;

    border-radius:18px;

    font-size:22px;

}

.icon-box-lg{

    width:90px;

    height:90px;

    border-radius:28px;

    font-size:38px;

}


/*==========================================================
    BADGES
==========================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

}

.badge-primary{

    background:#e6f1ff;

    color:var(--primary);

}

.badge-success{

    background:#e8f9ef;

    color:#16a34a;

}

.badge-warning{

    background:#fff6dd;

    color:#d97706;

}


/*==========================================================
    DIVIDERS
==========================================================*/

.divider{

    width:100%;

    height:1px;

    background:var(--border);

}

.divider-gradient{

    width:120px;

    height:4px;

    border-radius:999px;

    background:
    linear-gradient(
        90deg,
        #0d6efd,
        #13b8b8
    );

}


/*==========================================================
    Z-INDEX SYSTEM
==========================================================*/

.z-1{z-index:1;}
.z-5{z-index:5;}
.z-10{z-index:10;}
.z-20{z-index:20;}
.z-30{z-index:30;}
.z-40{z-index:40;}
.z-50{z-index:50;}
.z-100{z-index:100;}
.z-999{z-index:999;}
.z-modal{z-index:9999;}


/*==========================================================
    POINTER & CURSOR
==========================================================*/

.cursor-pointer{

    cursor:pointer;

}

.user-select-none{

    user-select:none;

}

.pe-none{

    pointer-events:none;

}


/*==========================================================
    PREMIUM HOVER EFFECTS
==========================================================*/

.hover-lift{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.hover-lift:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.hover-scale{

    transition:transform .35s ease;

}

.hover-scale:hover{

    transform:scale(1.03);

}

/*==========================================================
    PREMIUM BUTTON SYSTEM
==========================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-height:56px;

    padding:0 34px;

    border-radius:var(--radius-round);

    border:none;

    font-family:var(--font-heading);

    font-size:15px;

    font-weight:600;

    letter-spacing:.2px;

    cursor:pointer;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;

    position:relative;

    overflow:hidden;

    white-space:nowrap;

}

.btn:disabled{

    opacity:.55;

    cursor:not-allowed;

}

.btn i{

    font-size:1rem;

}

.btn:hover{

    transform:translateY(-3px);

}

.btn:active{

    transform:translateY(0);

}


/*==========================================================
    PRIMARY BUTTON
==========================================================*/

.btn-primary{

    background:
        linear-gradient(
            135deg,
            #0d6efd,
            #147ce5
        );

    color:#ffffff;

    box-shadow:
        0 18px 35px rgba(13,108,242,.22);

}

.btn-primary:hover{

    background:
        linear-gradient(
            135deg,
            #095cd2,
            #0d6efd
        );

    box-shadow:
        0 25px 45px rgba(13,108,242,.30);

}


/*==========================================================
    SECONDARY BUTTON
==========================================================*/

.btn-secondary{

    background:
        linear-gradient(
            135deg,
            #13b8b8,
            #0fa3a3
        );

    color:#ffffff;

}

.btn-secondary:hover{

    background:
        linear-gradient(
            135deg,
            #0ea0a0,
            #0b8d8d
        );

}


/*==========================================================
    OUTLINE BUTTON
==========================================================*/

.btn-outline{

    background:#ffffff;

    color:var(--primary);

    border:2px solid var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:#ffffff;

}


/*==========================================================
    WHITE BUTTON
==========================================================*/

.btn-white{

    background:#ffffff;

    color:var(--heading);

    box-shadow:var(--shadow-sm);

}

.btn-white:hover{

    background:#f8fbfd;

}


/*==========================================================
    GHOST BUTTON
==========================================================*/

.btn-ghost{

    background:transparent;

    border:1px solid rgba(255,255,255,.25);

    color:#ffffff;

}

.btn-ghost:hover{

    background:rgba(255,255,255,.10);

}


/*==========================================================
    SUCCESS BUTTON
==========================================================*/

.btn-success{

    background:#22c55e;

    color:#ffffff;

}

.btn-success:hover{

    background:#16a34a;

}


/*==========================================================
    DANGER BUTTON
==========================================================*/

.btn-danger{

    background:#dc2626;

    color:#ffffff;

}

.btn-danger:hover{

    background:#b91c1c;

}


/*==========================================================
    WHATSAPP BUTTON
==========================================================*/

.btn-whatsapp{

    background:#25D366;

    color:#ffffff;

    box-shadow:
        0 18px 38px rgba(37,211,102,.25);

}

.btn-whatsapp:hover{

    background:#1fb857;

}


/*==========================================================
    CALL BUTTON
==========================================================*/

.btn-call{

    background:#0d6efd;

    color:#ffffff;

}

.btn-call:hover{

    background:#0859d0;

}


/*==========================================================
    BUTTON SIZES
==========================================================*/

.btn-sm{

    min-height:42px;

    padding:0 22px;

    font-size:13px;

}

.btn-md{

    min-height:52px;

}

.btn-lg{

    min-height:64px;

    padding:0 42px;

    font-size:16px;

}

.btn-xl{

    min-height:72px;

    padding:0 54px;

    font-size:17px;

}


/*==========================================================
    BUTTON WIDTHS
==========================================================*/

.btn-block{

    width:100%;

}

.btn-auto{

    width:auto;

}


/*==========================================================
    RIPPLE EFFECT BASE
==========================================================*/

.btn::before{

    content:"";

    position:absolute;

    width:0;

    height:0;

    border-radius:50%;

    background:rgba(255,255,255,.25);

    transform:translate(-50%,-50%);

    transition:width .6s,height .6s;

    pointer-events:none;

}

.btn:active::before{

    width:320px;

    height:320px;

}


/*==========================================================
    SECTION HEADINGS
==========================================================*/

.section-title{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.section-title.left{

    margin-left:0;

    text-align:left;

}

.section-title .eyebrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-weight:600;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:18px;

}

.section-title h2{

    margin-bottom:18px;

}

.section-title p{

    font-size:1.05rem;

    color:var(--text-light);

    max-width:720px;

    margin-inline:auto;

}

.section-title.left p{

    margin-left:0;

}


/*==========================================================
    PREMIUM UNDERLINE
==========================================================*/

.title-divider{

    width:110px;

    height:5px;

    border-radius:999px;

    margin:24px auto 0;

    background:
        linear-gradient(
            90deg,
            #0d6efd,
            #13b8b8
        );

}

.section-title.left .title-divider{

    margin-left:0;

}


/*==========================================================
    SUBTITLE
==========================================================*/

.subtitle{

    font-size:1.15rem;

    color:var(--text-light);

    line-height:1.8;

}

/*==========================================================
    PREMIUM LINK SYSTEM
==========================================================*/

.link{

    color:var(--primary);

    font-weight:600;

    position:relative;

    transition:color .3s ease;

}

.link:hover{

    color:var(--secondary);

}

.link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:width .35s ease;

}

.link:hover::after{

    width:100%;

}

.link-arrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-weight:600;

}

.link-arrow i{

    transition:transform .35s ease;

}

.link-arrow:hover i{

    transform:translateX(8px);

}


/*==========================================================
    FEATURE LISTS
==========================================================*/

.feature-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.feature-list li{

    display:flex;

    align-items:flex-start;

    gap:16px;

    color:var(--text);

    line-height:1.7;

}

.feature-list li i{

    width:26px;

    height:26px;

    border-radius:50%;

    background:#eaf5ff;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

    flex-shrink:0;

    margin-top:3px;

}


/*==========================================================
    CHECK LIST
==========================================================*/

.check-list{

    display:grid;

    gap:18px;

}

.check-list li{

    display:flex;

    gap:15px;

    align-items:flex-start;

}

.check-list li::before{

    content:"✓";

    width:28px;

    height:28px;

    border-radius:50%;

    background:#22c55e;

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    flex-shrink:0;

}


/*==========================================================
    MEDICAL INFO BOX
==========================================================*/

.info-box{

    padding:36px;

    background:#ffffff;

    border-radius:var(--radius-lg);

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

}

.info-box h3{

    margin-bottom:18px;

}

.info-box p:last-child{

    margin-bottom:0;

}


/*==========================================================
    INFO GRID
==========================================================*/

.info-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

}


/*==========================================================
    ALERT BOXES
==========================================================*/

.alert{

    display:flex;

    gap:18px;

    padding:22px 28px;

    border-radius:18px;

    border-left:5px solid;

}

.alert-success{

    background:#ecfdf5;

    border-color:#16a34a;

}

.alert-warning{

    background:#fffbeb;

    border-color:#f59e0b;

}

.alert-danger{

    background:#fef2f2;

    border-color:#dc2626;

}

.alert-info{

    background:#eef7ff;

    border-color:#0d6efd;

}


/*==========================================================
    HIGHLIGHT PANEL
==========================================================*/

.highlight-panel{

    position:relative;

    overflow:hidden;

    padding:50px;

    border-radius:28px;

    background:

        linear-gradient(

            135deg,

            #0d6efd,

            #13b8b8

        );

    color:#ffffff;

}

.highlight-panel h2,

.highlight-panel h3,

.highlight-panel p{

    color:#ffffff;

}


/*==========================================================
    CTA STRIP
==========================================================*/

.cta-strip{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    padding:50px;

    border-radius:30px;

    background:#102c47;

}

.cta-strip h2{

    color:#ffffff;

    margin-bottom:12px;

}

.cta-strip p{

    color:#d7e5f2;

    margin-bottom:0;

}


/*==========================================================
    RIBBON BADGE
==========================================================*/

.ribbon{

    position:absolute;

    top:25px;

    right:-40px;

    width:170px;

    text-align:center;

    background:#0d6efd;

    color:#ffffff;

    padding:10px;

    transform:rotate(45deg);

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

}


/*==========================================================
    IMAGE FRAME
==========================================================*/

.image-frame{

    position:relative;

    border-radius:30px;

    overflow:hidden;

    box-shadow:var(--shadow-lg);

}

.image-frame img{

    transition:transform .7s ease;

}

.image-frame:hover img{

    transform:scale(1.08);

}


/*==========================================================
    OVERLAYS
==========================================================*/

.overlay-dark{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            rgba(8,24,42,.65),

            rgba(8,24,42,.75)

        );

}

.overlay-light{

    position:absolute;

    inset:0;

    background:

        rgba(255,255,255,.55);

}


/*==========================================================
    DECORATIVE SHAPES
==========================================================*/

.shape-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(8px);

    opacity:.12;

}

.shape-primary{

    background:#0d6efd;

}

.shape-secondary{

    background:#13b8b8;

}


/*==========================================================
    OBJECT POSITION
==========================================================*/

.object-cover{

    object-fit:cover;

}

.object-contain{

    object-fit:contain;

}

.object-top{

    object-position:top;

}

.object-center{

    object-position:center;

}


/*==========================================================
    OPACITY
==========================================================*/

.opacity-0{opacity:0;}
.opacity-25{opacity:.25;}
.opacity-50{opacity:.5;}
.opacity-75{opacity:.75;}
.opacity-100{opacity:1;}


/*==========================================================
    BORDER HELPERS
==========================================================*/

.border{

    border:1px solid var(--border);

}

.border-top{

    border-top:1px solid var(--border);

}

.border-bottom{

    border-bottom:1px solid var(--border);

}

.border-left{

    border-left:1px solid var(--border);

}

.border-right{

    border-right:1px solid var(--border);

}


/*==========================================================
    PREMIUM DIVIDER
==========================================================*/

.wave-divider{

    position:relative;

    width:100%;

    overflow:hidden;

    line-height:0;

}

/*==========================================================
    PREMIUM FORM FOUNDATION
==========================================================*/

.form-group{

    position:relative;

    margin-bottom:28px;

}

.form-row{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

}

.form-full{

    grid-column:1 / -1;

}

label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

    color:var(--heading);

    font-size:.95rem;

}

.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
select,
textarea{

    width:100%;

    min-height:58px;

    padding:16px 22px;

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:16px;

    color:var(--heading);

    font-size:15px;

    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;

}

textarea{

    min-height:180px;

    resize:vertical;

}

.form-control::placeholder,
textarea::placeholder{

    color:#94a3b8;

}

.form-control:hover,
textarea:hover,
select:hover{

    border-color:#bfd6eb;

}

.form-control:focus,
textarea:focus,
select:focus{

    border-color:var(--primary);

    background:#ffffff;

    box-shadow:

        0 0 0 5px

        rgba(13,108,242,.10);

}


/*==========================================================
    INPUT GROUP
==========================================================*/

.input-group{

    position:relative;

}

.input-group i{

    position:absolute;

    top:50%;

    left:20px;

    transform:translateY(-50%);

    color:#94a3b8;

}

.input-group input{

    padding-left:56px;

}


/*==========================================================
    SEARCH FIELD
==========================================================*/

.search-box{

    position:relative;

}

.search-box input{

    padding-right:60px;

}

.search-box button{

    position:absolute;

    right:8px;

    top:8px;

    width:42px;

    height:42px;

    border-radius:50%;

    background:var(--primary);

    color:#ffffff;

}


/*==========================================================
    CHECKBOX
==========================================================*/

.checkbox{

    display:flex;

    align-items:center;

    gap:12px;

}

.checkbox input{

    width:18px;

    height:18px;

}


/*==========================================================
    RADIO
==========================================================*/

.radio{

    display:flex;

    align-items:center;

    gap:12px;

}

.radio input{

    width:18px;

    height:18px;

}


/*==========================================================
    TABLE FOUNDATION
==========================================================*/

.table{

    width:100%;

    border-collapse:collapse;

}

.table th{

    background:#f3f8fd;

    color:var(--heading);

    font-weight:600;

    padding:18px;

    border:1px solid var(--border);

}

.table td{

    padding:18px;

    border:1px solid var(--border);

}

.table tbody tr:hover{

    background:#fbfdff;

}


/*==========================================================
    HORIZONTAL SCROLL
==========================================================*/

.table-responsive{

    overflow-x:auto;

}


/*==========================================================
    CUSTOM SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-track{

    background:#eef4f8;

}

::-webkit-scrollbar-thumb{

    background:#b9cad8;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#8ca6bb;

}


/*==========================================================
    LOADER
==========================================================*/

.loader{

    width:54px;

    height:54px;

    border-radius:50%;

    border:4px solid #e8eef4;

    border-top-color:var(--primary);

    animation:loader-spin 1s linear infinite;

}


/*==========================================================
    SKELETON LOADER
==========================================================*/

.skeleton{

    position:relative;

    overflow:hidden;

    background:#edf3f7;

}

.skeleton::before{

    content:"";

    position:absolute;

    inset:0;

    transform:translateX(-100%);

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.6),

            transparent

        );

    animation:skeleton-loading 1.4s infinite;

}


/*==========================================================
    VISIBILITY
==========================================================*/

.hidden{

    display:none;

}

.invisible{

    visibility:hidden;

}

.visible{

    visibility:visible;

}


/*==========================================================
    ACCESSIBILITY
==========================================================*/

.sr-only{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}


/*==========================================================
    BASE ANIMATIONS
==========================================================*/

.fade-up{

    opacity:0;

    transform:translateY(40px);

}

.fade-down{

    opacity:0;

    transform:translateY(-40px);

}

.fade-left{

    opacity:0;

    transform:translateX(-40px);

}

.fade-right{

    opacity:0;

    transform:translateX(40px);

}

.zoom-in{

    opacity:0;

    transform:scale(.9);

}


/*==========================================================
    KEYFRAMES
==========================================================*/

@keyframes loader-spin{

    to{

        transform:rotate(360deg);

    }

}

@keyframes skeleton-loading{

    100%{

        transform:translateX(100%);

    }

}

/*==========================================================
    HEADER FOUNDATION
==========================================================*/

.site-header{

    position:relative;

    width:100%;

    z-index:1000;

    background:#ffffff;

    transition:
        background .35s ease,
        box-shadow .35s ease,
        transform .35s ease;

}

.site-header.is-sticky{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    box-shadow:0 18px 45px rgba(15,23,42,.08);

    animation:header-slide .45s ease;

}

.site-header.hide{

    transform:translateY(-100%);

}

.site-header.show{

    transform:translateY(0);

}


/*==========================================================
    TOP BAR
==========================================================*/

.header-top{

    background:#0f2942;

    color:#dbe8f5;

    font-size:14px;

}

.header-top .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:46px;

    gap:24px;

}

.header-top-left,

.header-top-right{

    display:flex;

    align-items:center;

    gap:22px;

}

.header-top a{

    color:#dbe8f5;

    transition:color .3s ease;

}

.header-top a:hover{

    color:#ffffff;

}

.header-top i{

    color:#4fd2d2;

    margin-right:8px;

}


/*==========================================================
    MAIN HEADER
==========================================================*/

.header-main{

    position:relative;

    background:#ffffff;

}

.header-main .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:94px;

    gap:40px;

}


/*==========================================================
    LOGO
==========================================================*/

.site-logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.site-logo img{

    display:block;

    max-height:72px;

    width:auto;

}

.logo-text{

    display:flex;

    flex-direction:column;

    margin-left:14px;

}

.logo-title{

    font-size:1.55rem;

    font-weight:700;

    color:var(--heading);

    line-height:1.2;

}

.logo-subtitle{

    font-size:.82rem;

    color:var(--text-light);

    letter-spacing:.3px;

}


/*==========================================================
    PRIMARY NAVIGATION
==========================================================*/

.main-navigation{

    margin-left:auto;

}

.main-navigation > ul{

    display:flex;

    align-items:center;

    gap:6px;

}

.main-navigation > ul > li{

    position:relative;

}

.main-navigation > ul > li > a{

    display:flex;

    align-items:center;

    min-height:94px;

    padding:0 18px;

    font-size:15px;

    font-weight:600;

    color:var(--heading);

    transition:

        color .3s ease,

        background .3s ease;

}

.main-navigation > ul > li:hover > a{

    color:var(--primary);

}

.main-navigation > ul > li.current-menu-item > a{

    color:var(--primary);

}

.main-navigation > ul > li.current-menu-item > a::after{

    content:"";

    position:absolute;

    left:18px;

    right:18px;

    bottom:22px;

    height:3px;

    border-radius:999px;

    background:var(--primary);

}


/*==========================================================
    DROPDOWN INDICATOR
==========================================================*/

.menu-item-has-children > a{

    gap:8px;

}

.menu-item-has-children > a i{

    font-size:11px;

    transition:transform .3s ease;

}

.menu-item-has-children:hover > a i{

    transform:rotate(180deg);

}


/*==========================================================
    HEADER ACTIONS
==========================================================*/

.header-actions{

    display:flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

}

.header-phone{

    display:flex;

    align-items:center;

    gap:14px;

}

.header-phone-icon{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#eef7ff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    font-size:18px;

}

.header-phone-text{

    display:flex;

    flex-direction:column;

}

.header-phone-text span{

    font-size:13px;

    color:var(--text-light);

}

.header-phone-text strong{

    font-size:16px;

    color:var(--heading);

}


/*==========================================================
    HEADER BUTTON
==========================================================*/

.header-appointment{

    margin-left:8px;

}


/*==========================================================
    MOBILE TOGGLE
==========================================================*/

.mobile-toggle{

    width:54px;

    height:54px;

    display:none;

    align-items:center;

    justify-content:center;

    background:#f3f8fc;

    border-radius:16px;

    cursor:pointer;

    transition:

        background .3s ease,

        transform .3s ease;

}

.mobile-toggle:hover{

    background:#e6f1ff;

}

.mobile-toggle span{

    position:relative;

    width:24px;

    height:2px;

    background:var(--heading);

    transition:.35s;

}

.mobile-toggle span::before,

.mobile-toggle span::after{

    content:"";

    position:absolute;

    left:0;

    width:24px;

    height:2px;

    background:var(--heading);

    transition:.35s;

}

.mobile-toggle span::before{

    top:-8px;

}

.mobile-toggle span::after{

    top:8px;

}

.mobile-toggle.active span{

    background:transparent;

}

.mobile-toggle.active span::before{

    transform:rotate(45deg);

    top:0;

}

.mobile-toggle.active span::after{

    transform:rotate(-45deg);

    top:0;

}


/*==========================================================
    HEADER ANIMATION
==========================================================*/

@keyframes header-slide{

    from{

        opacity:0;

        transform:translateY(-100%);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================================
    LEVEL 1 DROPDOWN MENU
==========================================================*/

.main-navigation ul li{

    position:relative;

}

.main-navigation ul li > ul{

    position:absolute;

    top:100%;

    left:0;

    min-width:285px;

    padding:18px 0;

    background:#ffffff;

    border-radius:22px;

    border:1px solid rgba(15,23,42,.06);

    box-shadow:

        0 25px 70px rgba(15,23,42,.12);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:

        opacity .35s ease,

        transform .35s ease,

        visibility .35s ease;

    z-index:999;

}

.main-navigation li:hover > ul{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.main-navigation ul li > ul > li{

    display:block;

}

.main-navigation ul li > ul > li > a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:14px 28px;

    font-size:15px;

    font-weight:500;

    color:var(--heading);

    transition:

        background .30s ease,

        color .30s ease,

        padding-left .30s ease;

}

.main-navigation ul li > ul > li:hover > a{

    color:var(--primary);

    background:#f6fbff;

    padding-left:36px;

}

.main-navigation ul li > ul > li:not(:last-child){

    border-bottom:1px solid rgba(15,23,42,.05);

}


/*==========================================================
    SECOND LEVEL FLYOUT
==========================================================*/

.main-navigation ul li ul li{

    position:relative;

}

.main-navigation ul li ul li ul{

    position:absolute;

    top:-18px;

    left:100%;

    min-width:280px;

    background:#ffffff;

    border-radius:22px;

    padding:18px 0;

    border:1px solid rgba(15,23,42,.06);

    box-shadow:

        0 25px 70px rgba(15,23,42,.12);

    opacity:0;

    visibility:hidden;

    transform:translateX(18px);

    transition:

        opacity .35s ease,

        transform .35s ease;

}

.main-navigation ul li ul li:hover > ul{

    opacity:1;

    visibility:visible;

    transform:translateX(0);

}


/*==========================================================
    MENU ICONS
==========================================================*/

.menu-icon{

    width:42px;

    height:42px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef6ff;

    color:var(--primary);

    flex-shrink:0;

    transition:

        background .35s ease,

        color .35s ease,

        transform .35s ease;

}

.main-navigation li:hover .menu-icon{

    background:var(--primary);

    color:#ffffff;

    transform:rotate(-8deg);

}


/*==========================================================
    MENU DESCRIPTION
==========================================================*/

.menu-content{

    display:flex;

    flex-direction:column;

    gap:3px;

    flex:1;

}

.menu-title{

    font-weight:600;

    color:var(--heading);

    transition:color .3s ease;

}

.menu-description{

    font-size:12px;

    color:var(--text-light);

    line-height:1.5;

}

.main-navigation li:hover .menu-title{

    color:var(--primary);

}


/*==========================================================
    MENU BADGES
==========================================================*/

.menu-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:52px;

    height:22px;

    padding:0 8px;

    border-radius:999px;

    font-size:10px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

}

.badge-new{

    background:#dcfce7;

    color:#15803d;

}

.badge-hot{

    background:#fee2e2;

    color:#b91c1c;

}

.badge-popular{

    background:#dbeafe;

    color:#1d4ed8;

}


/*==========================================================
    DROPDOWN DIVIDER
==========================================================*/

.dropdown-divider{

    width:100%;

    height:1px;

    background:#edf3f7;

    margin:10px 0;

}


/*==========================================================
    DROPDOWN HEADING
==========================================================*/

.dropdown-heading{

    padding:10px 28px 18px;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:1px;

    font-weight:700;

    color:#64748b;

}


/*==========================================================
    MEGA MENU FOUNDATION
==========================================================*/

.mega-menu{

    position:absolute;

    left:50%;

    top:100%;

    width:1320px;

    max-width:calc(100vw - 40px);

    transform:

        translateX(-50%)

        translateY(20px);

    background:#ffffff;

    border-radius:28px;

    overflow:hidden;

    border:1px solid rgba(15,23,42,.06);

    box-shadow:

        0 30px 80px rgba(15,23,42,.12);

    opacity:0;

    visibility:hidden;

    transition:

        opacity .35s ease,

        transform .35s ease;

    z-index:999;

}

.has-mega-menu:hover .mega-menu{

    opacity:1;

    visibility:visible;

    transform:

        translateX(-50%)

        translateY(0);

}

.mega-menu-inner{

    display:grid;

    grid-template-columns:

        280px

        repeat(3,1fr);

}

.mega-sidebar{

    background:#f5f9fc;

    padding:42px;

}

.mega-content{

    padding:42px;

}

.mega-column{

    display:flex;

    flex-direction:column;

    gap:18px;

}


/*==========================================================
    MEGA MENU TITLES
==========================================================*/

.mega-title{

    font-size:17px;

    font-weight:700;

    color:var(--heading);

    margin-bottom:18px;

}

.mega-column ul{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.mega-column li a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px 0;

    color:var(--text);

    transition:

        color .3s ease,

        transform .3s ease;

}

.mega-column li a:hover{

    color:var(--primary);

    transform:translateX(8px);

}


/*==========================================================
    MEGA MENU FEATURE CARD
==========================================================*/

.mega-feature{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    padding:34px;

    min-height:340px;

    background:

        linear-gradient(

            135deg,

            #0d6efd,

            #13b8b8

        );

    color:#ffffff;

}

.mega-feature h3{

    color:#ffffff;

    margin-bottom:16px;

}

.mega-feature p{

    color:rgba(255,255,255,.92);

}

.mega-feature .btn{

    margin-top:28px;
}

.mega-feature::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

        rgba(255,255,255,.08);

    right:-70px;

    top:-70px;

}

.mega-feature::after{

    content:"";

    position:absolute;

    width:150px;

    height:150px;

    border-radius:50%;

    background:

        rgba(255,255,255,.05);

    bottom:-40px;

    left:-40px;

}


/*==========================================================
    MENU HOVER BAR
==========================================================*/

.main-navigation>ul>li>a::before{

    content:"";

    position:absolute;

    left:50%;

    bottom:14px;

    width:0;

    height:3px;

    transform:translateX(-50%);

    border-radius:999px;

    background:

        linear-gradient(

            90deg,

            #0d6efd,

            #13b8b8

        );

    transition:width .35s ease;

}

.main-navigation>ul>li:hover>a::before{

    width:70%;

}

/*==========================================================
    MOBILE NAVIGATION FOUNDATION
==========================================================*/

.mobile-nav-overlay{

    position:fixed;

    inset:0;

    background:rgba(10,22,40,.65);

    backdrop-filter:blur(4px);

    -webkit-backdrop-filter:blur(4px);

    opacity:0;

    visibility:hidden;

    transition:

        opacity .35s ease,

        visibility .35s ease;

    z-index:9998;

}

.mobile-nav-overlay.active{

    opacity:1;

    visibility:visible;

}


/*==========================================================
    OFFCANVAS MENU
==========================================================*/

.mobile-navigation{

    position:fixed;

    top:0;

    left:0;

    width:360px;

    max-width:92vw;

    height:100vh;

    background:#ffffff;

    transform:translateX(-100%);

    transition:transform .40s ease;

    z-index:9999;

    overflow-y:auto;

    overflow-x:hidden;

    display:flex;

    flex-direction:column;

}

.mobile-navigation.active{

    transform:translateX(0);

}


/*==========================================================
    MOBILE HEADER
==========================================================*/

.mobile-nav-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:24px;

    border-bottom:1px solid var(--border);

}

.mobile-nav-logo img{

    max-height:62px;

    width:auto;

}

.mobile-nav-close{

    width:46px;

    height:46px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f3f8fd;

    cursor:pointer;

    transition:

        background .30s ease,

        transform .30s ease;

}

.mobile-nav-close:hover{

    background:#e7f2ff;

    transform:rotate(90deg);

}


/*==========================================================
    MOBILE BODY
==========================================================*/

.mobile-nav-body{

    flex:1;

    padding:12px 0;

}


/*==========================================================
    MOBILE MENU
==========================================================*/

.mobile-menu{

    display:flex;

    flex-direction:column;

}

.mobile-menu>li{

    border-bottom:1px solid rgba(15,23,42,.05);

}

.mobile-menu>li>a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:62px;

    padding:0 24px;

    font-weight:600;

    color:var(--heading);

    transition:

        background .30s ease,

        color .30s ease,

        padding-left .30s ease;

}

.mobile-menu>li>a:hover{

    background:#f8fbfe;

    color:var(--primary);

    padding-left:30px;

}


/*==========================================================
    MOBILE DROPDOWN TOGGLE
==========================================================*/

.mobile-sub-toggle{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    transition:

        background .30s ease,

        transform .30s ease;

}

.mobile-sub-toggle:hover{

    background:#eef7ff;

}

.mobile-sub-toggle.active{

    transform:rotate(180deg);

}


/*==========================================================
    MOBILE SUB MENU
==========================================================*/

.mobile-menu ul{

    display:none;

    background:#fbfdff;

}

.mobile-menu ul li a{

    display:flex;

    align-items:center;

    min-height:52px;

    padding:0 42px;

    color:var(--text);

    font-size:14px;

    border-top:1px solid rgba(15,23,42,.04);

    transition:

        color .30s ease,

        background .30s ease,

        padding-left .30s ease;

}

.mobile-menu ul li a:hover{

    background:#eef7ff;

    color:var(--primary);

    padding-left:50px;

}

.mobile-menu ul ul li a{

    padding-left:60px;

    font-size:13px;

}

.mobile-menu ul ul li a:hover{

    padding-left:70px;

}


/*==========================================================
    MOBILE CONTACT CARD
==========================================================*/

.mobile-contact{

    margin:24px;

    padding:28px;

    border-radius:24px;

    background:

        linear-gradient(

            135deg,

            #0d6efd,

            #13b8b8

        );

    color:#ffffff;

}

.mobile-contact h4{

    color:#ffffff;

    margin-bottom:14px;

}

.mobile-contact p{

    color:rgba(255,255,255,.92);

    margin-bottom:18px;

}

.mobile-contact .btn{

    width:100%;

}


/*==========================================================
    MOBILE SOCIAL
==========================================================*/

.mobile-social{

    display:flex;

    gap:14px;

    margin-top:20px;

}

.mobile-social a{

    width:44px;

    height:44px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.18);

    color:#ffffff;

    transition:

        background .30s ease,

        transform .30s ease;

}

.mobile-social a:hover{

    background:#ffffff;

    color:var(--primary);

    transform:translateY(-4px);

}


/*==========================================================
    MOBILE FOOTER
==========================================================*/

.mobile-nav-footer{

    padding:24px;

    border-top:1px solid var(--border);

}

.mobile-nav-footer small{

    color:var(--text-light);

    display:block;

    text-align:center;

}


/*==========================================================
    HEADER SEARCH BUTTON
==========================================================*/

.header-search{

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f4f8fc;

    color:var(--heading);

    transition:

        background .30s ease,

        color .30s ease,

        transform .30s ease;

}

.header-search:hover{

    background:var(--primary);

    color:#ffffff;

    transform:translateY(-3px);

}


/*==========================================================
    SEARCH POPUP
==========================================================*/

.search-popup{

    position:fixed;

    inset:0;

    background:rgba(8,18,34,.92);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:

        opacity .35s ease,

        visibility .35s ease;

    z-index:10000;

}

.search-popup.active{

    opacity:1;

    visibility:visible;

}

.search-popup-inner{

    width:min(760px,92vw);

}

.search-popup form{

    position:relative;

}

.search-popup input{

    width:100%;

    height:74px;

    border:none;

    border-radius:999px;

    padding:0 82px 0 34px;

    font-size:18px;

    box-shadow:0 20px 60px rgba(0,0,0,.18);

}

.search-popup button{

    position:absolute;

    right:10px;

    top:10px;

    width:54px;

    height:54px;

    border-radius:50%;

    background:var(--primary);

    color:#ffffff;

}

.search-popup-close{

    position:absolute;

    top:42px;

    right:42px;

    width:54px;

    height:54px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.12);

    color:#ffffff;

    cursor:pointer;

    transition:

        background .30s ease,

        transform .30s ease;

}

.search-popup-close:hover{

    background:#ffffff;

    color:var(--primary);

    transform:rotate(90deg);

}


/*==========================================================
    HEADER CTA GROUP
==========================================================*/

.header-cta-group{

    display:flex;

    align-items:center;

    gap:14px;

}


/*==========================================================
    HEADER NOTIFICATION DOT
==========================================================*/

.notify-dot{

    position:absolute;

    top:8px;

    right:8px;

    width:10px;

    height:10px;

    border-radius:50%;

    background:#ef4444;

    box-shadow:0 0 0 4px rgba(239,68,68,.18);

}

/*==========================================================
    HERO SECTION FOUNDATION
==========================================================*/

.hero{

    position:relative;

    overflow:hidden;

    min-height:860px;

    display:flex;

    align-items:center;

    background:#f7fbff;

}

.hero-fullscreen{

    min-height:100vh;

}

.hero-medium{

    min-height:760px;

}

.hero-small{

    min-height:620px;

}


/*==========================================================
    HERO BACKGROUND
==========================================================*/

.hero-background{

    position:absolute;

    inset:0;

    z-index:1;

}

.hero-background img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            90deg,

            rgba(7,35,74,.30) 0%,

            rgba(7,35,74,.18) 35%,

            rgba(7,35,74,.08) 65%,

            rgba(7,35,74,.02) 100%

        );

}

.hero-overlay-light{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.92),

            rgba(247,251,255,.80)

        );

}


/*==========================================================
    HERO CONTAINER
==========================================================*/

.hero .container{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:

        minmax(0,620px)

        1fr;

    align-items:center;

    gap:70px;

}


/*==========================================================
    HERO CONTENT
==========================================================*/

.hero-content{

    position:relative;

    z-index:5;

}

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 22px;

    margin-bottom:28px;

    border-radius:999px;

    background:

        rgba(13,110,253,.08);

    border:1px solid rgba(13,110,253,.12);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:.4px;

}

.hero-tag i{

    font-size:16px;

}

.hero-content h1{

    font-size:clamp(2.8rem,5vw,4.8rem);

    line-height:1.08;

    margin-bottom:28px;

}

.hero-content p{

    max-width:640px;

    font-size:1.12rem;

    color:var(--text-light);

    line-height:1.9;

    margin-bottom:40px;

}


/*==========================================================
    HERO CTA
==========================================================*/

.hero-actions{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:48px;

}


/*==========================================================
    HERO FEATURES
==========================================================*/

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:28px;

}

.hero-feature{

    display:flex;

    align-items:center;

    gap:14px;

}

.hero-feature-icon{

    width:56px;

    height:56px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef7ff;

    color:var(--primary);

    font-size:22px;

}

.hero-feature-text{

    display:flex;

    flex-direction:column;

}

.hero-feature-text strong{

    color:var(--heading);

    font-size:15px;

}

.hero-feature-text span{

    color:var(--text-light);

    font-size:13px;

}


/*==========================================================
    HERO IMAGE
==========================================================*/

.hero-media{

    position:relative;

    display:flex;

    align-items:flex-end;

    justify-content:center;

    z-index:5;

}

.hero-doctor{

    position:relative;

    max-width:620px;

    width:100%;

    z-index:5;

}

.hero-doctor img{

    display:block;

    width:100%;

    height:auto;

}


/*==========================================================
    EXPERIENCE CARD
==========================================================*/

.hero-experience{

    position:absolute;

    top:90px;

    left:-40px;

    width:230px;

    padding:28px;

    background:#ffffff;

    border-radius:24px;

    box-shadow:

        0 24px 70px rgba(15,23,42,.12);

}

.hero-experience h3{

    font-size:2.5rem;

    color:var(--primary);

    margin-bottom:6px;

}

.hero-experience span{

    color:var(--text-light);

}


/*==========================================================
    RATING CARD
==========================================================*/

.hero-rating{

    position:absolute;

    bottom:70px;

    right:-20px;

    width:260px;

    padding:28px;

    border-radius:24px;

    background:#ffffff;

    box-shadow:

        0 24px 70px rgba(15,23,42,.12);

}

.hero-rating-stars{

    display:flex;

    gap:4px;

    margin-bottom:16px;

    color:#f59e0b;

}

.hero-rating strong{

    display:block;

    font-size:1.35rem;

    color:var(--heading);

}

.hero-rating span{

    color:var(--text-light);

    font-size:14px;

}


/*==========================================================
    FLOATING SHAPES
==========================================================*/

.hero-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.hero-shape-1{

    width:360px;

    height:360px;

    top:-120px;

    right:-120px;

    background:

        rgba(19,184,184,.08);

}

.hero-shape-2{

    width:180px;

    height:180px;

    bottom:80px;

    left:-60px;

    background:

        rgba(13,110,253,.08);

}

.hero-shape-3{

    width:90px;

    height:90px;

    top:42%;

    right:12%;

    background:

        rgba(13,110,253,.10);

}


/*==========================================================
    HERO SCROLL INDICATOR
==========================================================*/

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:36px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    z-index:6;

}

.hero-scroll span{

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#ffffff;

}

.hero-scroll-mouse{

    width:30px;

    height:50px;

    border:2px solid rgba(255,255,255,.8);

    border-radius:20px;

    position:relative;

}

.hero-scroll-mouse::before{

    content:"";

    position:absolute;

    left:50%;

    top:8px;

    width:6px;

    height:10px;

    border-radius:999px;

    background:#ffffff;

    transform:translateX(-50%);

    animation:hero-scroll-wheel 2s infinite;

}


/*==========================================================
    HERO DECORATIVE LINES
==========================================================*/

.hero-grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),

        linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);

    background-size:60px 60px;

    opacity:.25;

    pointer-events:none;

}


/*==========================================================
    HERO KEYFRAMES
==========================================================*/

@keyframes hero-scroll-wheel{

    0%{

        opacity:0;

        transform:

            translate(-50%,0);

    }

    40%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:

            translate(-50%,18px);

    }

}

/*==========================================================
    HERO SLIDER FOUNDATION
==========================================================*/

.hero-slider{

    position:relative;

    width:100%;

    overflow:hidden;

}

.hero-slider .swiper,

.hero-slider .splide,

.hero-slider .slick-slider{

    width:100%;

    height:100%;

}

.hero-slide{

    position:relative;

    min-height:860px;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.hero-slide > .container{

    position:relative;

    z-index:10;

}


/*==========================================================
    HERO BACKGROUND PARALLAX
==========================================================*/

.hero-slide-image{

    position:absolute;

    inset:0;

    overflow:hidden;

}

.hero-slide-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.08);

    transition:

        transform 8s linear;

}

.swiper-slide-active

.hero-slide-image img,

.splide__slide.is-active

.hero-slide-image img{

    transform:scale(1);

}


/*==========================================================
    SLIDE CONTENT ANIMATION
==========================================================*/

.hero-slide

.hero-tag,

.hero-slide

h1,

.hero-slide

p,

.hero-slide

.hero-actions,

.hero-slide

.hero-features{

    opacity:0;

    transform:

        translateY(45px);

}

.swiper-slide-active

.hero-tag,

.splide__slide.is-active

.hero-tag{

    animation:

        heroFadeUp

        .8s

        .15s

        forwards;

}

.swiper-slide-active

h1,

.splide__slide.is-active

h1{

    animation:

        heroFadeUp

        .9s

        .35s

        forwards;

}

.swiper-slide-active

p,

.splide__slide.is-active

p{

    animation:

        heroFadeUp

        .9s

        .55s

        forwards;

}

.swiper-slide-active

.hero-actions,

.splide__slide.is-active

.hero-actions{

    animation:

        heroFadeUp

        .9s

        .75s

        forwards;

}

.swiper-slide-active

.hero-features,

.splide__slide.is-active

.hero-features{

    animation:

        heroFadeUp

        .9s

        .95s

        forwards;

}


/*==========================================================
    DOCTOR IMAGE ANIMATION
==========================================================*/

.hero-doctor{

    opacity:0;

    transform:

        translateX(80px)

        scale(.96);

}

.swiper-slide-active

.hero-doctor,

.splide__slide.is-active

.hero-doctor{

    animation:

        heroDoctor

        1.2s

        .45s

        forwards;

}


/*==========================================================
    FLOATING CARDS
==========================================================*/

.hero-experience,

.hero-rating{

    opacity:0;

}

.swiper-slide-active

.hero-experience{

    animation:

        heroCard

        .8s

        .8s

        forwards;

}

.swiper-slide-active

.hero-rating{

    animation:

        heroCard

        .8s

        1s

        forwards;

}


/*==========================================================
    HERO NAVIGATION
==========================================================*/

.hero-prev,

.hero-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:68px;

    height:68px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        rgba(255,255,255,.14);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    color:#ffffff;

    border:1px solid

        rgba(255,255,255,.25);

    cursor:pointer;

    transition:

        background .35s ease,

        transform .35s ease,

        box-shadow .35s ease;

    z-index:50;

}

.hero-prev{

    left:40px;

}

.hero-next{

    right:40px;

}

.hero-prev:hover,

.hero-next:hover{

    background:#ffffff;

    color:var(--primary);

    transform:

        translateY(-50%)

        scale(1.08);

    box-shadow:

        0 18px 45px

        rgba(15,23,42,.18);

}


/*==========================================================
    HERO PAGINATION
==========================================================*/

.hero-pagination{

    position:absolute;

    left:50%;

    bottom:34px;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:12px;

    z-index:60;

}

.hero-pagination

.swiper-pagination-bullet,

.hero-pagination

.splide__pagination__page{

    width:14px;

    height:14px;

    border-radius:50%;

    background:

        rgba(255,255,255,.45);

    opacity:1;

    transition:

        transform .35s ease,

        background .35s ease;

}

.hero-pagination

.swiper-pagination-bullet-active,

.hero-pagination

.splide__pagination__page.is-active{

    background:#ffffff;

    transform:scale(1.45);

}


/*==========================================================
    AUTOPLAY PROGRESS
==========================================================*/

.hero-progress{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:4px;

    background:

        rgba(255,255,255,.18);

    overflow:hidden;

    z-index:60;

}

.hero-progress span{

    display:block;

    width:0;

    height:100%;

    background:

        linear-gradient(

            90deg,

            #13b8b8,

            #ffffff

        );

}

.swiper-slide-active

.hero-progress span{

    animation:

        heroProgress

        5s

        linear;

}


/*==========================================================
    HERO BACKGROUND SHAPES
==========================================================*/

.hero-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(12px);

    animation:

        heroFloat

        8s

        ease-in-out

        infinite;

}

.hero-circle.one{

    width:420px;

    height:420px;

    top:-160px;

    right:-120px;

    background:

        rgba(19,184,184,.08);

}

.hero-circle.two{

    width:220px;

    height:220px;

    left:-80px;

    bottom:40px;

    background:

        rgba(13,110,253,.08);

}

.hero-circle.three{

    width:100px;

    height:100px;

    right:14%;

    top:28%;

    background:

        rgba(255,255,255,.16);

}


/*==========================================================
    HERO KEYFRAMES
==========================================================*/

@keyframes heroFadeUp{

    from{

        opacity:0;

        transform:

            translateY(45px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

@keyframes heroDoctor{

    from{

        opacity:0;

        transform:

            translateX(80px)

            scale(.96);

    }

    to{

        opacity:1;

        transform:

            translateX(0)

            scale(1);

    }

}

@keyframes heroCard{

    from{

        opacity:0;

        transform:

            translateY(40px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

@keyframes heroFloat{

    0%{

        transform:

            translateY(0);

    }

    50%{

        transform:

            translateY(-18px);

    }

    100%{

        transform:

            translateY(0);

    }

}

@keyframes heroProgress{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

/*==========================================================
    SERVICES SECTION
==========================================================*/

.services{

    position:relative;

    overflow:hidden;

    background:#ffffff;

}

.services.bg-soft{

    background:linear-gradient(
        180deg,
        #f7fbff,
        #ffffff
    );

}

.services .container{

    position:relative;

    z-index:2;

}


/*==========================================================
    SERVICES GRID
==========================================================*/

.services-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:32px;

}

.services-grid.two{

    grid-template-columns:repeat(2,1fr);

}

.services-grid.four{

    grid-template-columns:repeat(4,1fr);

}


/*==========================================================
    SERVICE CARD
==========================================================*/

.service-card{

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

    padding:42px;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.06);

    border-radius:30px;

    overflow:hidden;

    transition:

        transform .40s ease,

        box-shadow .40s ease,

        border-color .40s ease;

}

.service-card:hover{

    transform:translateY(-14px);

    border-color:rgba(13,110,253,.18);

    box-shadow:

        0 30px 70px rgba(15,23,42,.10);

}


/*==========================================================
    SERVICE BACKGROUND GLOW
==========================================================*/

.service-card::before{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    right:-140px;

    top:-140px;

    background:

        radial-gradient(

            rgba(19,184,184,.12),

            transparent 72%

        );

    transition:all .45s ease;

}

.service-card:hover::before{

    transform:scale(1.35);

}


/*==========================================================
    SERVICE NUMBER
==========================================================*/

.service-number{

    position:absolute;

    right:28px;

    top:26px;

    font-size:4rem;

    font-weight:800;

    line-height:1;

    color:rgba(15,23,42,.04);

    pointer-events:none;

}


/*==========================================================
    SERVICE ICON
==========================================================*/

.service-icon{

    width:88px;

    height:88px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(
            135deg,
            #0d6efd,
            #13b8b8
        );

    color:#ffffff;

    font-size:34px;

    margin-bottom:32px;

    transition:

        transform .40s ease,

        border-radius .40s ease,

        box-shadow .40s ease;

}

.service-card:hover .service-icon{

    transform:rotate(-10deg) scale(1.08);

    border-radius:28px;

    box-shadow:

        0 22px 42px rgba(13,110,253,.24);

}


/*==========================================================
    SERVICE CONTENT
==========================================================*/

.service-card h3{

    margin-bottom:18px;

}

.service-card p{

    margin-bottom:28px;

    color:var(--text-light);

    flex:1;

}


/*==========================================================
    SERVICE FOOTER
==========================================================*/

.service-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:auto;

}

.service-footer .link-arrow{

    font-size:15px;

}


/*==========================================================
    SERVICE IMAGE
==========================================================*/

.service-image{

    position:relative;

    margin:-42px -42px 32px;

    overflow:hidden;

}

.service-image img{

    width:100%;

    height:250px;

    object-fit:cover;

    transition:

        transform .7s ease;

}

.service-card:hover .service-image img{

    transform:scale(1.08);

}


/*==========================================================
    SERVICE TAG
==========================================================*/

.service-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:18px;

    padding:8px 18px;

    border-radius:999px;

    background:#eef7ff;

    color:var(--primary);

    font-size:13px;

    font-weight:700;

}


/*==========================================================
    FEATURED SERVICE
==========================================================*/

.service-featured{

    background:

        linear-gradient(
            135deg,
            #0d6efd,
            #13b8b8
        );

    color:#ffffff;

}

.service-featured h3,

.service-featured p{

    color:#ffffff;

}

.service-featured .service-tag{

    background:rgba(255,255,255,.18);

    color:#ffffff;

}

.service-featured .service-icon{

    background:#ffffff;

    color:var(--primary);

}

.service-featured .link,

.service-featured .link-arrow{

    color:#ffffff;

}

.service-featured .link::after{

    background:#ffffff;

}


/*==========================================================
    SERVICE RIBBON
==========================================================*/

.service-ribbon{

    position:absolute;

    top:24px;

    left:-42px;

    width:170px;

    text-align:center;

    padding:10px;

    background:#ef4444;

    color:#ffffff;

    transform:rotate(-45deg);

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}


/*==========================================================
    SERVICE HIGHLIGHTS
==========================================================*/

.service-highlights{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:22px;

}

.service-highlights span{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:999px;

    background:#f5f9fc;

    color:var(--heading);

    font-size:13px;

}

.service-highlights span i{

    color:var(--primary);

}


/*==========================================================
    SERVICE HOVER BORDER
==========================================================*/

.service-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:5px;

    background:

        linear-gradient(
            90deg,
            #0d6efd,
            #13b8b8
        );

    transition:width .40s ease;

}

.service-card:hover::after{

    width:100%;

}


/*==========================================================
    SERVICES CTA
==========================================================*/

.services-cta{

    margin-top:80px;

    text-align:center;

}

.services-cta .btn{

    margin-top:18px;

}


/*==========================================================
    BACKGROUND DECORATION
==========================================================*/

.services-decoration{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(13,110,253,.05),

            transparent 72%

        );

    right:-220px;

    top:120px;

    pointer-events:none;

}


/*==========================================================
    SERVICE ANIMATION READY
==========================================================*/

.service-card.reveal{

    opacity:0;

    transform:translateY(60px);

}

.service-card.reveal.active{

    opacity:1;

    transform:translateY(0);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

/*==========================================================
    HORIZONTAL SERVICE CARD
==========================================================*/

.service-card-horizontal{

    display:grid;

    grid-template-columns:180px 1fr;

    align-items:center;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.06);

    border-radius:30px;

    overflow:hidden;

    transition:

        transform .4s ease,

        box-shadow .4s ease;

}

.service-card-horizontal:hover{

    transform:translateY(-10px);

    box-shadow:0 28px 60px rgba(15,23,42,.10);

}

.service-card-horizontal .service-image{

    margin:0;

    height:100%;

}

.service-card-horizontal .service-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.service-card-horizontal .service-content{

    padding:36px 40px;

}


/*==========================================================
    SPECIALTY GRID
==========================================================*/

.specialty-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:28px;

}

.specialty-card{

    position:relative;

    padding:34px;

    background:#ffffff;

    border-radius:28px;

    border:1px solid rgba(15,23,42,.06);

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

.specialty-card:hover{

    transform:translateY(-10px);

    border-color:rgba(13,110,253,.18);

    box-shadow:0 22px 55px rgba(15,23,42,.10);

}

.specialty-card h4{

    margin:22px 0 14px;

}

.specialty-card p{

    color:var(--text-light);

    margin-bottom:0;

}


/*==========================================================
    SPECIALTY ICON
==========================================================*/

.specialty-icon{

    width:76px;

    height:76px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #0d6efd,
        #13b8b8
    );

    color:#ffffff;

    font-size:30px;

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.specialty-card:hover .specialty-icon{

    transform:rotate(-8deg) scale(1.08);

    box-shadow:0 18px 38px rgba(13,110,253,.24);

}


/*==========================================================
    ENT CATEGORY COLORS
==========================================================*/

.specialty-ear .specialty-icon{

    background:linear-gradient(
        135deg,
        #2563eb,
        #0ea5e9
    );

}

.specialty-nose .specialty-icon{

    background:linear-gradient(
        135deg,
        #0d9488,
        #14b8a6
    );

}

.specialty-throat .specialty-icon{

    background:linear-gradient(
        135deg,
        #7c3aed,
        #8b5cf6
    );

}

.specialty-pediatric .specialty-icon{

    background:linear-gradient(
        135deg,
        #ec4899,
        #f472b6
    );

}

.specialty-allergy .specialty-icon{

    background:linear-gradient(
        135deg,
        #f59e0b,
        #fb923c
    );

}

.specialty-surgery .specialty-icon{

    background:linear-gradient(
        135deg,
        #0891b2,
        #06b6d4
    );

}


/*==========================================================
    SERVICE STAT BAR
==========================================================*/

.service-stat-bar{

    display:flex;

    flex-wrap:wrap;

    gap:22px;

    margin-top:30px;

    padding-top:24px;

    border-top:1px solid rgba(15,23,42,.08);

}

.service-stat{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.service-stat strong{

    font-size:1.6rem;

    color:var(--primary);

    line-height:1;

}

.service-stat span{

    font-size:13px;

    color:var(--text-light);

}


/*==========================================================
    SERVICE IMAGE OVERLAY
==========================================================*/

.service-image-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:24px;

    background:linear-gradient(
        180deg,
        rgba(0,0,0,0),
        rgba(8,22,40,.75)
    );

}

.service-image-overlay h4{

    color:#ffffff;

    margin:0;

}


/*==========================================================
    SERVICE ACTION BAR
==========================================================*/

.service-actions{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:28px;

}

.service-actions .btn{

    min-height:50px;

}


/*==========================================================
    FEATURE STRIP
==========================================================*/

.service-feature-strip{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:22px;

    margin-top:70px;

}

.service-feature-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:24px;

    border-radius:22px;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.06);

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.service-feature-item:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(15,23,42,.08);

}

.service-feature-item i{

    width:54px;

    height:54px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef7ff;

    color:var(--primary);

    font-size:22px;

}


/*==========================================================
    SERVICE TIMELINE
==========================================================*/

.service-timeline{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:36px;

}

.service-timeline::before{

    content:"";

    position:absolute;

    left:20px;

    top:0;

    bottom:0;

    width:2px;

    background:#d9e8f4;

}

.service-step{

    position:relative;

    display:flex;

    gap:28px;

}

.service-step-number{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:#ffffff;

    font-weight:700;

    flex-shrink:0;

    z-index:2;

}

.service-step-content{

    padding-bottom:18px;

}

.service-step-content h5{

    margin-bottom:10px;

}


/*==========================================================
    SECTION BACKGROUND SHAPES
==========================================================*/

.services-shape-left{

    position:absolute;

    left:-180px;

    top:120px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(
        rgba(13,110,253,.05),
        transparent 72%
    );

    pointer-events:none;

}

.services-shape-right{

    position:absolute;

    right:-220px;

    bottom:80px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        rgba(19,184,184,.05),
        transparent 72%
    );

    pointer-events:none;

}

/*==========================================================
    ABOUT DOCTOR SECTION
==========================================================*/

.about-doctor{

    position:relative;

    overflow:hidden;

    background:#ffffff;

}

.about-doctor .container{

    display:grid;

    grid-template-columns:560px minmax(0,1fr);

    align-items:center;

    gap:80px;

    position:relative;

    z-index:2;

}


/*==========================================================
    DOCTOR IMAGE AREA
==========================================================*/

.about-image{

    position:relative;

}

.about-image-main{

    position:relative;

    overflow:hidden;

    border-radius:36px;

    box-shadow:0 30px 80px rgba(15,23,42,.14);

}

.about-image-main img{

    display:block;

    width:100%;

    height:auto;

    transition:transform .7s ease;

}

.about-image:hover .about-image-main img{

    transform:scale(1.05);

}


/*==========================================================
    EXPERIENCE BADGE
==========================================================*/

.experience-badge{

    position:absolute;

    left:-35px;

    bottom:40px;

    width:180px;

    height:180px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #0d6efd,
        #13b8b8
    );

    color:#ffffff;

    box-shadow:0 24px 60px rgba(13,110,253,.28);

}

.experience-badge strong{

    font-size:3rem;

    line-height:1;

    margin-bottom:8px;

}

.experience-badge span{

    text-align:center;

    font-size:14px;

    line-height:1.5;

}


/*==========================================================
    CERTIFICATION CARD
==========================================================*/

.certification-card{

    position:absolute;

    right:-30px;

    top:60px;

    width:250px;

    padding:24px;

    background:#ffffff;

    border-radius:24px;

    box-shadow:0 24px 60px rgba(15,23,42,.10);

}

.certification-card h5{

    margin-bottom:8px;

}

.certification-card p{

    margin-bottom:0;

    color:var(--text-light);

    font-size:14px;

}


/*==========================================================
    ABOUT CONTENT
==========================================================*/

.about-content{

    position:relative;

}

.about-content .section-title{

    margin-bottom:26px;

}

.about-content p{

    margin-bottom:20px;

}


/*==========================================================
    QUALIFICATION LIST
==========================================================*/

.qualification-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px 24px;

    margin:36px 0;

}

.qualification-item{

    display:flex;

    align-items:flex-start;

    gap:14px;

}

.qualification-item i{

    width:42px;

    height:42px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef7ff;

    color:var(--primary);

    flex-shrink:0;

}

.qualification-item strong{

    display:block;

    margin-bottom:4px;

    color:var(--heading);

}

.qualification-item span{

    color:var(--text-light);

    font-size:14px;

}


/*==========================================================
    DOCTOR HIGHLIGHTS
==========================================================*/

.doctor-highlights{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:22px;

    margin-top:40px;

}

.highlight-box{

    text-align:center;

    padding:28px;

    border-radius:22px;

    background:#f7fbff;

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.highlight-box:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(15,23,42,.08);

}

.highlight-box strong{

    display:block;

    font-size:2rem;

    color:var(--primary);

    margin-bottom:8px;

}

.highlight-box span{

    color:var(--text-light);

    font-size:14px;

}


/*==========================================================
    PROFESSIONAL MEMBERSHIPS
==========================================================*/

.membership-list{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:34px;

}

.membership-list span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:999px;

    background:#eef7ff;

    color:var(--heading);

    font-size:14px;

    font-weight:500;

}

.membership-list span i{

    color:var(--primary);

}


/*==========================================================
    SIGNATURE AREA
==========================================================*/

.doctor-signature{

    display:flex;

    align-items:center;

    gap:24px;

    margin-top:42px;

}

.signature-image{

    max-width:180px;

}

.signature-image img{

    width:100%;

    height:auto;

}

.signature-text strong{

    display:block;

    color:var(--heading);

    margin-bottom:6px;

}

.signature-text span{

    color:var(--text-light);

    font-size:14px;

}


/*==========================================================
    ABOUT BACKGROUND DECORATION
==========================================================*/

.about-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.about-shape.one{

    width:460px;

    height:460px;

    right:-220px;

    top:40px;

    background:radial-gradient(
        rgba(13,110,253,.05),
        transparent 72%
    );

}

.about-shape.two{

    width:320px;

    height:320px;

    left:-140px;

    bottom:60px;

    background:radial-gradient(
        rgba(19,184,184,.05),
        transparent 72%
    );

}


/*==========================================================
    ABOUT REVEAL
==========================================================*/

.about-image,

.about-content{

    opacity:0;

    transform:translateY(60px);

}

.about-image.active,

.about-content.active{

    opacity:1;

    transform:translateY(0);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

/*==========================================================
    STATISTICS SECTION
==========================================================*/

.statistics{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #0d6efd,
            #13b8b8
        );

    color:#ffffff;

}

.statistics::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(255,255,255,.10),
            transparent 38%
        );

    pointer-events:none;

}

.statistics .container{

    position:relative;

    z-index:2;

}

.experience-card{

    position:relative;

    overflow:hidden;

}

.experience-card::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,#0d6efd,#13b8b8);

}


/*==========================================================
    STATS GRID
==========================================================*/

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:34px;

}


/*==========================================================
    STAT CARD
==========================================================*/

.stat-card{

    position:relative;

    text-align:center;

    padding:46px 28px;

    border-radius:28px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.14);

    overflow:hidden;

    transition:

        transform .40s ease,

        background .40s ease,

        box-shadow .40s ease;

}

.stat-card:hover{

    transform:translateY(-12px);

    background:rgba(255,255,255,.14);

    box-shadow:

        0 24px 60px rgba(0,0,0,.12);

}

.stat-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    top:-80px;

    right:-80px;

}


/*==========================================================
    STAT ICON
==========================================================*/

.stat-icon{

    width:86px;

    height:86px;

    margin:0 auto 26px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.14);

    font-size:34px;

    color:#ffffff;

    transition:

        transform .40s ease,

        background .40s ease;

}

.stat-card:hover .stat-icon{

    transform:rotate(-10deg) scale(1.08);

    background:rgba(255,255,255,.20);

}


/*==========================================================
    STAT NUMBER
==========================================================*/

.stat-number{

    display:flex;

    align-items:flex-end;

    justify-content:center;

    gap:4px;

    margin-bottom:12px;

}

.stat-number strong{

    font-size:3.4rem;

    line-height:1;

    font-weight:800;

    color:#ffffff;

}

.stat-number span{

    font-size:1.5rem;

    font-weight:700;

}


/*==========================================================
    STAT TITLE
==========================================================*/

.stat-title{

    font-size:1rem;

    font-weight:600;

    color:rgba(255,255,255,.96);

    margin-bottom:8px;

}

.stat-description{

    color:rgba(255,255,255,.82);

    font-size:14px;

    line-height:1.7;

}


/*==========================================================
    TRUST INDICATORS
==========================================================*/

.trust-section{

    margin-top:90px;

}

.trust-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:24px;

}

.trust-card{

    padding:34px 24px;

    text-align:center;

    background:#ffffff;

    border-radius:24px;

    box-shadow:0 20px 45px rgba(15,23,42,.08);

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.trust-card:hover{

    transform:translateY(-10px);

    box-shadow:0 28px 55px rgba(15,23,42,.12);

}

.trust-card i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:70px;

    height:70px;

    margin:0 auto 20px;

    border-radius:20px;

    background:#eef7ff;

    color:var(--primary);

    font-size:28px;

}

.trust-card h5{

    margin-bottom:10px;

}

.trust-card p{

    margin-bottom:0;

    font-size:14px;

    color:var(--text-light);

}


/*==========================================================
    GOOGLE RATING PANEL
==========================================================*/

.google-rating{

    display:grid;

    grid-template-columns:150px 1fr;

    gap:30px;

    align-items:center;

    margin-top:80px;

    padding:44px;

    background:#ffffff;

    border-radius:32px;

    box-shadow:0 28px 65px rgba(15,23,42,.10);

}

.google-rating-score{

    text-align:center;

}

.google-rating-score strong{

    display:block;

    font-size:4rem;

    line-height:1;

    color:var(--primary);

}

.google-rating-stars{

    display:flex;

    justify-content:center;

    gap:4px;

    margin-top:12px;

    color:#fbbf24;

}

.google-rating-content h3{

    margin-bottom:14px;

}

.google-rating-content p{

    margin-bottom:22px;

}


/*==========================================================
    REVIEW SUMMARY
==========================================================*/

.review-summary{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.review-summary-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 18px;

    border-radius:999px;

    background:#f5f9fc;

}

.review-summary-item i{

    color:#16a34a;

}

.review-summary-item span{

    font-size:14px;

    font-weight:600;

}


/*==========================================================
    PARTNER LOGOS
==========================================================*/

.partner-logos{

    margin-top:90px;

}

.partner-grid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:28px;

    align-items:center;

}

.partner-logo{

    display:flex;

    align-items:center;

    justify-content:center;

    height:110px;

    padding:20px;

    border-radius:22px;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.06);

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        filter .35s ease;

}

.partner-logo img{

    max-width:100%;

    max-height:60px;

    filter:grayscale(100%);

    opacity:.72;

    transition:

        filter .35s ease,

        opacity .35s ease;

}

.partner-logo:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(15,23,42,.08);

}

.partner-logo:hover img{

    filter:none;

    opacity:1;

}


/*==========================================================
    SECTION DECORATION
==========================================================*/

.statistics-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.statistics-shape.one{

    width:520px;

    height:520px;

    left:-240px;

    top:-140px;

    background:rgba(255,255,255,.05);

}

.statistics-shape.two{

    width:380px;

    height:380px;

    right:-180px;

    bottom:-120px;

    background:rgba(255,255,255,.05);

}


/*==========================================================
    COUNTER READY
==========================================================*/

.counter{

    display:inline-block;

    min-width:1ch;

}

/*==========================================================
    TESTIMONIALS SECTION
==========================================================*/

.testimonials{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #f8fbfe,
        #ffffff
    );

}

.testimonials .container{

    position:relative;

    z-index:2;

}


/*==========================================================
    TESTIMONIAL SLIDER
==========================================================*/

.testimonial-slider{

    position:relative;

    overflow:hidden;

}

.testimonial-track{

    display:flex;

    align-items:stretch;

}


/*==========================================================
    TESTIMONIAL CARD
==========================================================*/

.testimonial-card{

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

    padding:42px;

    background:#ffffff;

    border-radius:32px;

    border:1px solid rgba(15,23,42,.06);

    box-shadow:

        0 24px 60px rgba(15,23,42,.06);

    transition:

        transform .40s ease,

        box-shadow .40s ease,

        border-color .40s ease;

}

.testimonial-card:hover{

    transform:translateY(-12px);

    border-color:rgba(13,110,253,.18);

    box-shadow:

        0 35px 80px rgba(15,23,42,.10);

}


/*==========================================================
    QUOTE ICON
==========================================================*/

.testimonial-quote{

    width:74px;

    height:74px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #0d6efd,
        #13b8b8
    );

    color:#ffffff;

    font-size:30px;

    margin-bottom:30px;

}


/*==========================================================
    STAR RATING
==========================================================*/

.testimonial-stars{

    display:flex;

    gap:5px;

    margin-bottom:22px;

    color:#fbbf24;

    font-size:18px;

}


/*==========================================================
    REVIEW TEXT
==========================================================*/

.testimonial-text{

    flex:1;

    font-size:1.05rem;

    line-height:1.95;

    color:var(--text);

    margin-bottom:34px;

    font-style:italic;

}


/*==========================================================
    PATIENT INFO
==========================================================*/

.testimonial-author{

    display:flex;

    align-items:center;

    gap:18px;

}

.testimonial-avatar{

    width:74px;

    height:74px;

    border-radius:50%;

    overflow:hidden;

    flex-shrink:0;

}

.testimonial-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.testimonial-author-info{

    flex:1;

}

.testimonial-author-info h5{

    margin-bottom:4px;

}

.testimonial-author-info span{

    display:block;

    color:var(--text-light);

    font-size:14px;

}


/*==========================================================
    VERIFIED BADGE
==========================================================*/

.review-verified{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:8px;

    padding:7px 14px;

    border-radius:999px;

    background:#ecfdf5;

    color:#15803d;

    font-size:12px;

    font-weight:700;

}

.review-verified i{

    font-size:12px;

}


/*==========================================================
    GOOGLE REVIEW BADGE
==========================================================*/

.google-review-badge{

    position:absolute;

    top:28px;

    right:28px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:#ffffff;

    box-shadow:0 12px 30px rgba(15,23,42,.08);

}

.google-review-badge img{

    width:24px;

    height:24px;

}

.google-review-badge span{

    font-size:13px;

    font-weight:600;

}


/*==========================================================
    VIDEO TESTIMONIAL
==========================================================*/

.video-testimonial{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    background:#000000;

}

.video-testimonial img{

    width:100%;

    display:block;

}

.video-play{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:88px;

    height:88px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.92);

    color:var(--primary);

    font-size:26px;

    transition:

        transform .35s ease,

        background .35s ease;

}

.video-play:hover{

    transform:

        translate(-50%,-50%)

        scale(1.12);

    background:#ffffff;

}


/*==========================================================
    TESTIMONIAL NAVIGATION
==========================================================*/

.testimonial-prev,

.testimonial-next{

    width:62px;

    height:62px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.08);

    box-shadow:0 14px 35px rgba(15,23,42,.06);

    transition:

        transform .35s ease,

        background .35s ease,

        color .35s ease;

}

.testimonial-prev:hover,

.testimonial-next:hover{

    background:var(--primary);

    color:#ffffff;

    transform:translateY(-4px);

}


/*==========================================================
    TESTIMONIAL PAGINATION
==========================================================*/

.testimonial-pagination{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:48px;

}

.testimonial-pagination .swiper-pagination-bullet{

    width:14px;

    height:14px;

    border-radius:50%;

    background:#d9e5ef;

    opacity:1;

    transition:

        transform .35s ease,

        background .35s ease;

}

.testimonial-pagination .swiper-pagination-bullet-active{

    background:var(--primary);

    transform:scale(1.4);

}


/*==========================================================
    REVIEW SUMMARY STRIP
==========================================================*/

.review-summary-strip{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

    margin-top:80px;

}

.review-summary-card{

    padding:30px;

    border-radius:24px;

    text-align:center;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.06);

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.review-summary-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 50px rgba(15,23,42,.08);

}

.review-summary-card strong{

    display:block;

    font-size:2.4rem;

    color:var(--primary);

    margin-bottom:10px;

}

.review-summary-card span{

    color:var(--text-light);

    font-size:14px;

}


/*==========================================================
    TESTIMONIAL BACKGROUND DECORATION
==========================================================*/

.testimonial-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.testimonial-shape.one{

    width:420px;

    height:420px;

    left:-180px;

    top:80px;

    background:radial-gradient(
        rgba(13,110,253,.05),
        transparent 72%
    );

}

.testimonial-shape.two{

    width:340px;

    height:340px;

    right:-140px;

    bottom:40px;

    background:radial-gradient(
        rgba(19,184,184,.05),
        transparent 72%
    );

}


/*==========================================================
    REVIEW REVEAL ANIMATION
==========================================================*/

.testimonial-card.reveal{

    opacity:0;

    transform:translateY(60px);

}

.testimonial-card.reveal.active{

    opacity:1;

    transform:translateY(0);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

/*==========================================================
    APPOINTMENT SECTION
==========================================================*/

.appointment-section{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #f6fbff,
            #ffffff
        );

}

.appointment-section .container{

    position:relative;

    z-index:2;

}


/*==========================================================
    APPOINTMENT GRID
==========================================================*/

.appointment-grid{

    display:grid;

    grid-template-columns:
        minmax(0,520px)
        minmax(0,1fr);

    gap:70px;

    align-items:center;

}


/*==========================================================
    APPOINTMENT CONTENT
==========================================================*/

.appointment-content{

    position:relative;

}

.appointment-content h2{

    margin-bottom:22px;

}

.appointment-content p{

    margin-bottom:36px;

}


/*==========================================================
    APPOINTMENT FEATURES
==========================================================*/

.appointment-features{

    display:grid;

    gap:20px;

    margin-bottom:42px;

}

.appointment-feature{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

.appointment-feature-icon{

    width:62px;

    height:62px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef7ff;

    color:var(--primary);

    font-size:24px;

    flex-shrink:0;

}

.appointment-feature-content h5{

    margin-bottom:6px;

}

.appointment-feature-content p{

    margin:0;

    color:var(--text-light);

}


/*==========================================================
    APPOINTMENT FORM
==========================================================*/

.appointment-form{

    position:relative;

    padding:50px;

    background:#ffffff;

    border-radius:34px;

    border:1px solid rgba(15,23,42,.06);

    box-shadow:

        0 35px 80px rgba(15,23,42,.10);

}

.appointment-form h3{

    margin-bottom:10px;

}

.appointment-form>.form-description{

    margin-bottom:36px;

    color:var(--text-light);

}

.appointment-form .form-row{

    margin-bottom:22px;

}

.appointment-form textarea{

    min-height:160px;

}


/*==========================================================
    INPUT ICON
==========================================================*/

.input-icon{

    position:relative;

}

.input-icon i{

    position:absolute;

    top:50%;

    left:20px;

    transform:translateY(-50%);

    color:#94a3b8;

    pointer-events:none;

}

.input-icon input,

.input-icon select{

    padding-left:58px;

}

.input-icon textarea{

    padding-left:58px;

    padding-top:18px;

}


/*==========================================================
    APPOINTMENT SUBMIT
==========================================================*/

.appointment-submit{

    margin-top:12px;

}

.appointment-submit .btn{

    width:100%;

}


/*==========================================================
    EMERGENCY CONTACT
==========================================================*/

.emergency-contact{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:36px;

    padding:26px;

    border-radius:24px;

    background:#fff5f5;

    border-left:5px solid #ef4444;

}

.emergency-contact-icon{

    width:68px;

    height:68px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ef4444;

    color:#ffffff;

    font-size:28px;

    flex-shrink:0;

}

.emergency-contact h5{

    margin-bottom:4px;

}

.emergency-contact p{

    margin:0;

    color:var(--text-light);

}


/*==========================================================
    CLINIC TIMINGS
==========================================================*/

.clinic-timings{

    margin-top:46px;

    padding:34px;

    border-radius:28px;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.06);

}

.clinic-timings h4{

    margin-bottom:24px;

}

.timing-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:14px 0;

    border-bottom:1px dashed rgba(15,23,42,.08);

}

.timing-item:last-child{

    border-bottom:none;

}

.timing-day{

    font-weight:600;

    color:var(--heading);

}

.timing-time{

    color:var(--primary);

    font-weight:700;

}


/*==========================================================
    CONTACT INFO CARDS
==========================================================*/

.contact-info-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

    margin-top:50px;

}

.contact-info-card{

    text-align:center;

    padding:34px 26px;

    border-radius:26px;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.06);

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.contact-info-card:hover{

    transform:translateY(-8px);

    box-shadow:0 24px 55px rgba(15,23,42,.08);

}

.contact-info-card i{

    width:74px;

    height:74px;

    margin:0 auto 22px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef7ff;

    color:var(--primary);

    font-size:28px;

}

.contact-info-card h5{

    margin-bottom:10px;

}

.contact-info-card p{

    margin:0;

    color:var(--text-light);

}


/*==========================================================
    WHATSAPP CTA
==========================================================*/

.whatsapp-cta{

    margin-top:46px;

    padding:36px;

    border-radius:30px;

    background:linear-gradient(
        135deg,
        #25D366,
        #1fb857
    );

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

}

.whatsapp-cta h4,

.whatsapp-cta p{

    color:#ffffff;

}

.whatsapp-cta p{

    margin:10px 0 0;

}


/*==========================================================
    MAP CARD
==========================================================*/

.map-card{

    overflow:hidden;

    border-radius:30px;

    margin-top:46px;

    border:1px solid rgba(15,23,42,.06);

    box-shadow:0 24px 60px rgba(15,23,42,.08);

}

.map-card iframe{

    display:block;

    width:100%;

    height:420px;

    border:0;

}


/*==========================================================
    APPOINTMENT TRUST BAR
==========================================================*/

.appointment-trust{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:34px;

}

.appointment-trust span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:999px;

    background:#eef7ff;

    color:var(--heading);

    font-size:14px;

    font-weight:600;

}

.appointment-trust span i{

    color:#16a34a;

}


/*==========================================================
    APPOINTMENT BACKGROUND SHAPES
==========================================================*/

.appointment-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.appointment-shape.one{

    width:520px;

    height:520px;

    top:-220px;

    right:-180px;

    background:radial-gradient(
        rgba(13,110,253,.05),
        transparent 72%
    );

}

.appointment-shape.two{

    width:340px;

    height:340px;

    bottom:-120px;

    left:-140px;

    background:radial-gradient(
        rgba(19,184,184,.05),
        transparent 72%
    );

}


/*==========================================================
    APPOINTMENT REVEAL
==========================================================*/

.appointment-content,

.appointment-form{

    opacity:0;

    transform:translateY(60px);

}

.appointment-content.active,

.appointment-form.active{

    opacity:1;

    transform:translateY(0);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

/*==========================================================
    FAQ SECTION
==========================================================*/

.faq-section{

    position:relative;

    overflow:hidden;

    background:#ffffff;

}

.faq-section .container{

    display:grid;

    grid-template-columns:minmax(0,420px) minmax(0,1fr);

    gap:70px;

    align-items:start;

    position:relative;

    z-index:2;

}


/*==========================================================
    FAQ SIDEBAR
==========================================================*/

.faq-sidebar{

    position:sticky;

    top:120px;

}

.faq-sidebar .section-title{

    margin-bottom:20px;

}

.faq-sidebar p{

    margin-bottom:34px;

}

.faq-contact-card{

    padding:34px;

    border-radius:30px;

    background:linear-gradient(
        135deg,
        #0d6efd,
        #13b8b8
    );

    color:#ffffff;

    box-shadow:0 28px 70px rgba(13,110,253,.22);

}

.faq-contact-card h4,

.faq-contact-card p{

    color:#ffffff;

}

.faq-contact-card .btn{

    margin-top:24px;

}


/*==========================================================
    FAQ ACCORDION
==========================================================*/

.faq-accordion{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.faq-item{

    overflow:hidden;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.06);

    border-radius:26px;

    transition:

        box-shadow .35s ease,

        border-color .35s ease;

}

.faq-item:hover{

    border-color:rgba(13,110,253,.18);

    box-shadow:0 20px 50px rgba(15,23,42,.08);

}


/*==========================================================
    FAQ BUTTON
==========================================================*/

.faq-button{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:28px 34px;

    background:none;

    border:none;

    cursor:pointer;

    text-align:left;

    font-size:1.08rem;

    font-weight:700;

    color:var(--heading);

}

.faq-button i{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef7ff;

    color:var(--primary);

    transition:

        transform .35s ease,

        background .35s ease,

        color .35s ease;

}

.faq-item.active .faq-button i{

    transform:rotate(45deg);

    background:var(--primary);

    color:#ffffff;

}


/*==========================================================
    FAQ CONTENT
==========================================================*/

.faq-content{

    max-height:0;

    overflow:hidden;

    transition:

        max-height .45s ease,

        padding .45s ease;

}

.faq-content-inner{

    padding:0 34px 30px;

}

.faq-content p{

    margin:0;

    color:var(--text-light);

    line-height:1.9;

}

.faq-item.active .faq-content{

    max-height:500px;

}


/*==========================================================
    FAQ CATEGORY TAGS
==========================================================*/

.faq-categories{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:40px;

}

.faq-category{

    padding:11px 20px;

    border-radius:999px;

    border:1px solid rgba(15,23,42,.08);

    background:#ffffff;

    cursor:pointer;

    transition:

        background .35s ease,

        color .35s ease,

        border-color .35s ease;

}

.faq-category:hover,

.faq-category.active{

    background:var(--primary);

    border-color:var(--primary);

    color:#ffffff;

}


/*==========================================================
    FAQ STATS
==========================================================*/

.faq-stats{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

    margin-top:44px;

}

.faq-stat{

    text-align:center;

    padding:30px;

    border-radius:24px;

    background:#f8fbfe;

}

.faq-stat strong{

    display:block;

    font-size:2.4rem;

    color:var(--primary);

    margin-bottom:10px;

}

.faq-stat span{

    color:var(--text-light);

}


/*==========================================================
    ASK QUESTION PANEL
==========================================================*/

.ask-question{

    margin-top:60px;

    padding:42px;

    border-radius:30px;

    background:#f8fbfe;

    border:1px solid rgba(15,23,42,.06);

}

.ask-question h3{

    margin-bottom:16px;

}

.ask-question p{

    margin-bottom:28px;

}


/*==========================================================
    FAQ SEARCH
==========================================================*/

.faq-search{

    position:relative;

    margin-bottom:36px;

}

.faq-search input{

    padding-left:58px;

}

.faq-search i{

    position:absolute;

    left:22px;

    top:50%;

    transform:translateY(-50%);

    color:#94a3b8;

}


/*==========================================================
    FAQ DECORATION
==========================================================*/

.faq-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.faq-shape.one{

    width:480px;

    height:480px;

    top:-220px;

    right:-180px;

    background:radial-gradient(
        rgba(13,110,253,.05),
        transparent 72%
    );

}

.faq-shape.two{

    width:340px;

    height:340px;

    bottom:-120px;

    left:-120px;

    background:radial-gradient(
        rgba(19,184,184,.05),
        transparent 72%
    );

}


/*==========================================================
    FAQ REVEAL
==========================================================*/

.faq-item.reveal{

    opacity:0;

    transform:translateY(50px);

}

.faq-item.reveal.active{

    opacity:1;

    transform:translateY(0);

    transition:

        opacity .75s ease,

        transform .75s ease;

}

/*==========================================================
    FOOTER
==========================================================*/

.site-footer{

    position:relative;

    overflow:hidden;

    background:#081628;

    color:rgba(255,255,255,.82);

}

.site-footer a{

    color:inherit;

    transition:

        color .30s ease,

        padding-left .30s ease;

}

.site-footer a:hover{

    color:#ffffff;

}


/*==========================================================
    FOOTER TOP
==========================================================*/

.footer-top{

    padding:90px 0 60px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.footer-grid{

    display:grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1.2fr;

    gap:50px;

}


/*==========================================================
    FOOTER BRAND
==========================================================*/

.footer-brand{

    max-width:420px;

}

.footer-logo{

    display:inline-flex;

    align-items:center;

    gap:16px;

    margin-bottom:24px;

}

.footer-logo img{

    height:64px;

    width:auto;

}

.footer-brand p{

    color:rgba(255,255,255,.72);

    margin-bottom:28px;

    line-height:1.9;

}


/*==========================================================
    SOCIAL LINKS
==========================================================*/

.footer-social{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.footer-social a{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:rgba(255,255,255,.08);

    font-size:18px;

}

.footer-social a:hover{

    background:var(--primary);

    padding-left:0;

    transform:translateY(-4px);

}


/*==========================================================
    FOOTER TITLES
==========================================================*/

.footer-widget h4{

    color:#ffffff;

    margin-bottom:28px;

    font-size:1.2rem;

    position:relative;

}

.footer-widget h4::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:55px;

    height:3px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #0d6efd,
        #13b8b8
    );

}


/*==========================================================
    FOOTER MENU
==========================================================*/

.footer-menu{

    list-style:none;

    margin:0;

    padding:0;

}

.footer-menu li{

    margin-bottom:16px;

}

.footer-menu a{

    display:inline-flex;

    align-items:center;

    gap:10px;

}

.footer-menu a::before{

    content:"›";

    color:var(--secondary);

    font-size:18px;

}

.footer-menu a:hover{

    padding-left:8px;

}


/*==========================================================
    FOOTER CONTACT
==========================================================*/

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.footer-contact-item{

    display:flex;

    align-items:flex-start;

    gap:16px;

}

.footer-contact-item i{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:rgba(255,255,255,.08);

    color:var(--secondary);

    flex-shrink:0;

}

.footer-contact-item strong{

    display:block;

    margin-bottom:6px;

    color:#ffffff;

}

.footer-contact-item span{

    color:rgba(255,255,255,.72);

    line-height:1.8;

}


/*==========================================================
    NEWSLETTER
==========================================================*/

.footer-newsletter{

    margin-top:30px;

}

.footer-newsletter form{

    position:relative;

    margin-top:18px;

}

.footer-newsletter input{

    width:100%;

    height:58px;

    padding:0 70px 0 20px;

    border:none;

    border-radius:999px;

    background:rgba(255,255,255,.10);

    color:#ffffff;

}

.footer-newsletter input::placeholder{

    color:rgba(255,255,255,.55);

}

.footer-newsletter button{

    position:absolute;

    top:6px;

    right:6px;

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#ffffff;

    cursor:pointer;

}


/*==========================================================
    FOOTER BOTTOM
==========================================================*/

.footer-bottom{

    padding:28px 0;

}

.footer-bottom-content{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

    flex-wrap:wrap;

}

.footer-bottom p{

    margin:0;

    color:rgba(255,255,255,.60);

}

.footer-bottom-links{

    display:flex;

    flex-wrap:wrap;

    gap:24px;

}

.footer-bottom-links a{

    color:rgba(255,255,255,.65);

}

.footer-bottom-links a:hover{

    color:#ffffff;

    padding-left:0;

}


/*==========================================================
    FOOTER CERTIFICATIONS
==========================================================*/

.footer-certifications{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:28px;

}

.footer-certifications span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    font-size:13px;

    color:#ffffff;

}

.footer-certifications i{

    color:#22c55e;

}


/*==========================================================
    FOOTER DECORATION
==========================================================*/

.footer-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.footer-shape.one{

    width:500px;

    height:500px;

    top:-260px;

    right:-180px;

    background:radial-gradient(
        rgba(19,184,184,.08),
        transparent 72%
    );

}

.footer-shape.two{

    width:380px;

    height:380px;

    bottom:-180px;

    left:-120px;

    background:radial-gradient(
        rgba(13,110,253,.08),
        transparent 72%
    );

}


/*==========================================================
    BACK TO TOP
==========================================================*/

.back-to-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #0d6efd,
        #13b8b8
    );

    color:#ffffff;

    box-shadow:0 18px 45px rgba(13,110,253,.28);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:

        opacity .35s ease,

        visibility .35s ease,

        transform .35s ease;

    z-index:999;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    transform:translateY(-6px);

}


/*==========================================================
    RESPONSIVE - LARGE DESKTOP
==========================================================*/

@media (max-width:1400px){

    .container{

        width:min(100% - 48px,1240px);

    }

    .hero-content{

        max-width:620px;

    }

    .hero-title{

        font-size:3.7rem;

    }

    .about-doctor .container{

        grid-template-columns:500px 1fr;

        gap:60px;

    }

    .appointment-grid{

        grid-template-columns:480px 1fr;

    }

}


/*==========================================================
    RESPONSIVE - LAPTOP
==========================================================*/

@media (max-width:1200px){

    .section{

        padding:90px 0;

    }

    .hero{

        min-height:720px;

    }

    .hero-title{

        font-size:3.2rem;

    }

    .hero-subtitle{

        font-size:1.15rem;

    }

    .about-doctor .container,

    .appointment-grid,

    .faq-section .container{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about-image{

        max-width:620px;

        margin:auto;

    }

    .doctor-highlights{

        grid-template-columns:repeat(2,1fr);

    }

    .stats-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .trust-grid{

        grid-template-columns:repeat(3,1fr);

    }

    .partner-grid{

        grid-template-columns:repeat(4,1fr);

    }

    .service-feature-strip{

        grid-template-columns:repeat(2,1fr);

    }

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


/*==========================================================
    RESPONSIVE - TABLET
==========================================================*/

@media (max-width:992px){

    .section{

        padding:80px 0;

    }

    .desktop-navigation,

    .header-cta{

        display:none;

    }

    .mobile-toggle{

        display:flex;

    }

    .hero{

        min-height:auto;

        padding:150px 0 90px;

    }

    .hero .container{

        text-align:center;

    }

    .hero-content{

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-image{

        margin:70px auto 0;

        max-width:480px;

    }

    .experience-card,

    .rating-card{

        display:none;

    }

    .services-grid,

    .specialty-grid,

    .contact-info-grid,

    .review-summary-strip,

    .qualification-list{

        grid-template-columns:1fr;

    }

    .doctor-highlights{

        grid-template-columns:repeat(2,1fr);

    }

    .stats-grid{

        gap:24px;

    }

    .trust-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .partner-grid{

        grid-template-columns:repeat(3,1fr);

    }

    .service-feature-strip{

        grid-template-columns:1fr;

    }

    .google-rating{

        grid-template-columns:1fr;

        text-align:center;

    }

    .google-rating-stars{

        justify-content:center;

    }

    .whatsapp-cta{

        flex-direction:column;

        text-align:center;

    }

    .footer-grid{

        gap:40px;

    }

}


/*==========================================================
    RESPONSIVE - MOBILE
==========================================================*/

@media (max-width:768px){

    .container{

        width:min(100% - 32px,100%);

    }

    .section{

        padding:70px 0;

    }

    .section-title{

        font-size:2rem;

    }

    .section-subtitle{

        font-size:15px;

    }

    .hero-title{

        font-size:2.5rem;

    }

    .hero-subtitle{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .appointment-form{

        padding:34px;

    }

    .service-card,

    .testimonial-card{

        padding:30px;

    }

    .experience-badge{

        width:140px;

        height:140px;

        left:15px;

        bottom:15px;

    }

    .experience-badge strong{

        font-size:2.3rem;

    }

    .certification-card{

        position:relative;

        top:auto;

        right:auto;

        margin-top:24px;

        width:100%;

    }

    .doctor-highlights,

    .stats-grid,

    .trust-grid,

    .partner-grid,

    .footer-grid{

        grid-template-columns:1fr;

    }

    .footer-bottom-content{

        flex-direction:column;

        text-align:center;

    }

    .review-summary{

        justify-content:center;

    }

    .membership-list{

        justify-content:center;

    }

    .appointment-trust{

        justify-content:center;

    }

    .back-to-top{

        right:18px;

        bottom:18px;

    }

}


/*==========================================================
    RESPONSIVE - SMALL MOBILE
==========================================================*/

@media (max-width:576px){

    h1{

        font-size:2.2rem;

    }

    h2{

        font-size:1.8rem;

    }

    h3{

        font-size:1.45rem;

    }

    .hero{

        padding-top:135px;

    }

    .hero-title{

        font-size:2.1rem;

        line-height:1.2;

    }

    .hero-image{

        max-width:100%;

    }

    .service-card,

    .testimonial-card,

    .appointment-form,

    .faq-item,

    .contact-info-card{

        border-radius:22px;

    }

    .service-card-horizontal{

        grid-template-columns:1fr;

    }

    .service-card-horizontal .service-image{

        height:240px;

    }

    .service-card-horizontal .service-content{

        padding:28px;

    }

    .stat-card{

        padding:34px 22px;

    }

    .stat-number strong{

        font-size:2.6rem;

    }

    .faq-button{

        padding:22px 24px;

        font-size:1rem;

    }

    .faq-content-inner{

        padding:0 24px 24px;

    }

    .footer-top{

        padding:70px 0 45px;

    }

    .footer-widget{

        text-align:center;

    }

    .footer-widget h4::after{

        left:50%;

        transform:translateX(-50%);

    }

    .footer-contact-item{

        justify-content:center;

        text-align:left;

    }

}


/*==========================================================
    RESPONSIVE - REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

    *,

    *::before,

    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*==========================================================
    RESPONSIVE - PRINT
==========================================================*/

@media print{

    .header,

    .mobile-menu,

    .back-to-top,

    .hero-buttons,

    .footer-social,

    .whatsapp-float,

    .appointment-form{

        display:none !important;

    }

    body{

        background:#ffffff;

        color:#000000;

    }

    .section{

        padding:25px 0;

    }

    .site-footer{

        background:#ffffff;

        color:#000000;

    }

}

/*==========================================================
    DARK MODE SUPPORT
==========================================================*/

@media (prefers-color-scheme:dark){

    :root{

        --surface:#101826;

        --surface-alt:#162132;

        --border:rgba(255,255,255,.08);

    }

    body.auto-dark{

        background:#0b1220;

        color:#d8e2ef;

    }

    body.auto-dark .card,

    body.auto-dark .service-card,

    body.auto-dark .testimonial-card,

    body.auto-dark .appointment-form,

    body.auto-dark .faq-item,

    body.auto-dark .contact-info-card{

        background:#162132;

        color:#dbe7f5;

        border-color:rgba(255,255,255,.08);

    }

    body.auto-dark h1,

    body.auto-dark h2,

    body.auto-dark h3,

    body.auto-dark h4,

    body.auto-dark h5,

    body.auto-dark h6{

        color:#ffffff;

    }

}


/*==========================================================
    IMAGE OPTIMIZATION
==========================================================*/

img{

    image-rendering:auto;

    max-width:100%;

}

img[loading="lazy"]{

    opacity:0;

    transition:opacity .45s ease;

}

img.loaded,

img[loading="lazy"].loaded{

    opacity:1;

}

picture{

    display:block;

}


/*==========================================================
    VIDEO EMBEDS
==========================================================*/

.video-responsive{

    position:relative;

    width:100%;

    padding-bottom:56.25%;

    overflow:hidden;

    border-radius:24px;

}

.video-responsive iframe,

.video-responsive video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}


/*==========================================================
    SWIPER / SPLIDE FIXES
==========================================================*/

.swiper,

.splide{

    overflow:hidden;

}

.swiper-slide,

.splide__slide{

    height:auto;

}

.swiper-wrapper{

    align-items:stretch;

}

.splide__track{

    overflow:hidden;

}


/*==========================================================
    STICKY OFFSET
==========================================================*/

html{

    scroll-padding-top:110px;

}

[id]{

    scroll-margin-top:110px;

}


/*==========================================================
    FOCUS VISIBLE
==========================================================*/

:focus-visible{

    outline:3px solid rgba(13,110,253,.35);

    outline-offset:3px;

    border-radius:8px;

}

button:focus-visible,

.btn:focus-visible,

input:focus-visible,

textarea:focus-visible,

select:focus-visible,

a:focus-visible{

    box-shadow:

        0 0 0 5px rgba(13,110,253,.16);

}


/*==========================================================
    TEXT SELECTION
==========================================================*/

::selection{

    background:#0d6efd;

    color:#ffffff;

}

::-moz-selection{

    background:#0d6efd;

    color:#ffffff;

}


/*==========================================================
    SCROLLBAR
==========================================================*/

*{

    scrollbar-width:thin;

    scrollbar-color:#0d6efd #edf4fa;

}

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-track{

    background:#edf4fa;

}

::-webkit-scrollbar-thumb{

    background:#0d6efd;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#0b5ed7;

}


/*==========================================================
    DISABLED STATES
==========================================================*/

button:disabled,

.btn:disabled,

input:disabled,

select:disabled,

textarea:disabled{

    opacity:.55;

    cursor:not-allowed;

}


/*==========================================================
    PLACEHOLDER
==========================================================*/

::placeholder{

    color:#94a3b8;

    opacity:1;

}


/*==========================================================
    TABLE RESPONSIVE
==========================================================*/

.table-responsive{

    width:100%;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;

}


/*==========================================================
    EMBED HELPERS
==========================================================*/

iframe{

    max-width:100%;

}

svg{

    display:block;

    max-width:100%;

}


/*==========================================================
    PERFORMANCE
==========================================================*/

.hero,

.services,

.about-doctor,

.statistics,

.testimonials,

.appointment-section,

.faq-section,

.site-footer{

    content-visibility:auto;

    contain-intrinsic-size:1000px;

}


/*==========================================================
    WILL CHANGE
==========================================================*/

.hero-image img,

.service-card,

.testimonial-card,

.btn,

.stat-card{

    will-change:transform;

}


/*==========================================================
    TOUCH DEVICES
==========================================================*/

@media (hover:none){

    .service-card:hover,

    .testimonial-card:hover,

    .stat-card:hover,

    .btn:hover,

    .contact-info-card:hover{

        transform:none;

    }

}


/*==========================================================
    HIGH DPI
==========================================================*/

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi){

    img{

        image-rendering:auto;

    }

}


/*==========================================================
    CSS FALLBACKS
==========================================================*/

@supports not (backdrop-filter:blur(10px)){

    .glass,

    .glass-card,

    .stat-card{

        background:rgba(255,255,255,.95);

    }

}


/*==========================================================
    END OF MASTER STYLESHEET
==========================================================*/

html{

    overflow-x:hidden;

}

body{

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

main{

    position:relative;

    z-index:1;

}

.page-loaded{

    opacity:1;

}

.no-js .reveal,

.no-js .fade-up{

    opacity:1;

    transform:none;

}

/*==========================================================
    HEADER REBUILD v2
==========================================================*/

.site-header{

    position:sticky;
    top:0;
    z-index:9999;

    background:#ffffff;

    box-shadow:
        0 8px 30px rgba(0,0,0,.05);

}

.site-header .container{

    max-width:1320px;

}

.header-flex{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:92px;

    gap:40px;

}

.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.logo img{

    width:72px;

    height:auto;

    display:block;

}

.main-navigation{

    flex:1;

    display:flex;

    justify-content:center;

}

.nav-links{

    display:flex;

    align-items:center;

    gap:34px;

    margin:0;

    padding:0;

    list-style:none;

}

.nav-links li{

    margin:0;

    padding:0;

}

.nav-links a{

    font-size:17px;

    font-weight:600;

    color:#183b63;

    text-decoration:none;

    transition:.3s;

}

.nav-links a:hover{

    color:#0d6efd;

}

.header-actions{

    display:flex;

    align-items:center;

    gap:16px;

}

.mobile-menu-btn{

    display:none;

}


/*==========================================================
    HERO BANNER v2
==========================================================*/

.hero-banner{

    position:relative;

    overflow:visible;

    background:#ffffff;

}

.hero-image{

    position:relative;

    line-height:0;

}

.hero-image img{

    display:block;

    width:100%;

    height:auto;

}

/*==========================================================
    FLOATING APPOINTMENT CARD
==========================================================*/

.hero-floating-card{
 position:absolute;
   

left:clamp(40px,6vw,120px);

bottom:80px;

width:340px;

    padding:28px;

    border-radius:28px;

    background:rgba(255,255,255,.90);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.45);

    box-shadow:

        0 35px 80px rgba(15,23,42,.18);

    z-index:20;

}

.hero-rating{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

}

.stars{

    color:#f6b400;

    font-size:18px;

    letter-spacing:2px;

}

.rating-text{

    font-size:14px;

    color:#6b7280;

}

.hero-floating-card h2{

    font-size:28px;

    margin-bottom:14px;

    line-height:1.2;

    margin-bottom:16px;

    color:#0f2942;

}

.hero-floating-card p{

    color:#5b6675;

    line-height:1.8;

    margin-bottom:24px;

}

.hero-card-buttons{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.hero-card-buttons .btn{

    width:100%;

    justify-content:center;

}

/*==========================================================
    HERO OVERLAP
==========================================================*/

.hero-banner::after{

    content:"";

    display:block;

    height:90px;

}

.visually-hidden{

    position:absolute !important;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}
/*==========================================================
    HERO CARD HIGHLIGHTS
==========================================================*/

.hero-highlights{

    margin:22px 0 28px;

    padding:0;

    list-style:none;

}

.hero-highlights li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:14px;

    font-size:15px;

    color:#334155;

    font-weight:500;

}

.hero-highlights li:last-child{

    margin-bottom:0;

}

.hero-highlights i{

    width:18px;

    text-align:center;

    color:#0d6efd;

    font-size:16px;

}

/*==========================================================
    EXPERIENCE OVERVIEW
==========================================================*/

.experience-overview{

    position:relative;

    margin-top:-30px;

    z-index:30;

    padding-bottom:90px;

}

.experience-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}


/*==========================================================
    EXPERIENCE CARD
==========================================================*/

.experience-card{

    position:relative;

    background:#ffffff;

    border-radius:28px;

    padding:42px 34px;

    text-align:center;

    overflow:hidden;

    border:1px solid rgba(13,110,253,.08);

    box-shadow:

        0 18px 55px rgba(15,23,42,.08);

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

.experience-card:hover{

    transform:translateY(-10px);

    border-color:rgba(13,110,253,.18);

    box-shadow:

        0 28px 80px rgba(15,23,42,.12);

}

.experience-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(13,110,253,.06),

            transparent 70%

        );

    top:-90px;

    right:-90px;

}


/*==========================================================
    EXPERIENCE NUMBER
==========================================================*/

.experience-number{

    font-size:3rem;

    font-weight:800;

    line-height:1;

    color:#0d6efd;

    margin-bottom:22px;

}


/*==========================================================
    EXPERIENCE TITLE
==========================================================*/

.experience-card h3{

    font-size:1.25rem;

    margin-bottom:18px;

    color:#0f2942;

}


/*==========================================================
    EXPERIENCE TEXT
==========================================================*/

.experience-card p{

    color:#64748b;

    line-height:1.8;

    font-size:15px;

}


/*==========================================================
    INTRO SECTION
==========================================================*/

.section-heading{

    max-width:900px;

    margin:auto;

}

.section-heading.center{

    text-align:center;

}

.section-heading h2{

    font-size:clamp(2rem,3vw,3rem);

    margin-bottom:24px;

}

.section-heading p{

    font-size:18px;

    color:#64748b;

    line-height:1.9;

    max-width:760px;

    margin:auto;

}


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

@media(max-width:1100px){

    .experience-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:700px){

    .experience-overview{

        margin-top:30px;

    }

    .experience-grid{

        grid-template-columns:1fr;

    }

    .experience-card{

        padding:32px;

    }

}

/*==========================================================
    ABOUT HOME
==========================================================*/

.about-home{

    position:relative;

    background:#ffffff;

}

.about-home-grid{

    display:grid;

    grid-template-columns:520px 1fr;

    gap:90px;

    align-items:center;

}


/*==========================================================
    DOCTOR IMAGE
==========================================================*/

.about-home-image{

    position:relative;

}

.about-home-image img{

    display:block;

    width:100%;

    height:auto;

    border-radius:32px;

    box-shadow:
        0 35px 80px rgba(15,23,42,.12);

}

.about-home-image::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(13,110,253,.10),

            transparent 70%

        );

    left:-60px;

    top:-60px;

    z-index:-1;

}


/*==========================================================
    CONTENT
==========================================================*/

.about-home-content{

    max-width:700px;

}

.about-home-content h2{

    font-size:clamp(2.2rem,4vw,3.2rem);

    margin:18px 0 28px;

    line-height:1.18;

}

.about-home-content p{

    color:#64748b;

    line-height:1.9;

    font-size:17px;

    margin-bottom:24px;

}


/*==========================================================
    HIGHLIGHTS
==========================================================*/

.doctor-highlights{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

    margin:42px 0;

}

.doctor-highlight{

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px;

    background:#f8fbff;

    border-radius:22px;

    border:1px solid rgba(13,110,253,.08);

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.doctor-highlight:hover{

    transform:translateY(-8px);

    box-shadow:

        0 18px 45px rgba(15,23,42,.08);

}

.doctor-highlight i{

    width:60px;

    height:60px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0d6efd;

    color:#ffffff;

    font-size:24px;

}

.doctor-highlight strong{

    display:block;

    margin-bottom:6px;

    font-size:16px;

    color:#0f2942;

}

.doctor-highlight span{

    color:#64748b;

    font-size:14px;

}


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

.about-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}


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

@media(max-width:1100px){

    .about-home-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about-home-image{

        max-width:520px;

        margin:auto;

    }

}

@media(max-width:768px){

    .doctor-highlights{

        grid-template-columns:1fr;

    }

}
/*========================== END ==========================*/