/*==================================================
        STYLE.CSS - PART 1
        RESET + VARIABLES + GLOBAL
==================================================*/

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Outfit',sans-serif;
    background:#f7fbff;
    color:#1d3557;
    overflow-x:hidden;
    line-height:1.7;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

button,
input,
select,
textarea{
    font-family:inherit;
    border:none;
    outline:none;
}

section{
    position:relative;
    overflow:hidden;
}

.container{
    width:100%;
    max-width:1320px;
    margin:auto;
    padding:0 20px;
}

.section-padding{
    padding:120px 0;
}

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

:root{

    --primary:#2F80ED;
    --secondary:#56CCF2;

    --dark:#123456;
    --text:#5B6987;

    --white:#ffffff;

    --bg:#F6FAFF;

    --border:#e7eef8;

    --shadow:
    0 20px 60px rgba(36,86,180,.08);

    --shadow-hover:
    0 30px 80px rgba(36,86,180,.18);

    --radius:24px;

    --transition:.4s ease;

}

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

h1{
    font-size:70px;
    line-height:1.1;
    font-weight:800;
}

h2{
    font-size:50px;
    line-height:1.2;
    font-weight:700;
}

h3{
    font-size:28px;
    font-weight:700;
}

h4{
    font-size:22px;
}

p{
    color:var(--text);
    font-size:17px;
}

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

.btn-primary{

    display:inline-flex;

    align-items:center;

    gap:12px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    padding:18px 34px;

    border-radius:60px;

    font-weight:600;

    transition:var(--transition);

    box-shadow:0 15px 35px rgba(47,128,237,.25);

}

.btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(47,128,237,.35);

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 34px;

    border-radius:60px;

    background:#fff;

    color:var(--primary);

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

    transition:.4s;

}

.btn-secondary:hover{

    background:#E83035;

    color:#fff;

}

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

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#eaf4ff;

    color:var(--primary);

    padding:10px 18px;

    border-radius:50px;

    font-weight:600;

    margin-bottom:18px;

}

.section-heading{

    max-width:700px;

    margin:0 auto 70px;

    text-align:center;

}

.section-heading h2{

    margin-bottom:20px;

}

.section-heading h2 span{

    color:var(--primary);

}

.section-heading p{

    max-width:620px;

    margin:auto;

}

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

#loader{

    position:fixed;

    inset:0;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    z-index:999999;

}

.loader-circle{

    width:90px;

    height:90px;

    border-radius:50%;

    border:6px solid #dbeeff;

    border-top:6px solid var(--primary);

    animation:loaderSpin 1s linear infinite;

}

.loader-logo{

    margin-top:25px;

    text-align:center;

}

.loader-logo i{

    font-size:42px;

    color:var(--primary);

    margin-bottom:10px;

}

.loader-logo h2{

    font-size:32px;

}

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

.bg-gradient{

    position:fixed;

    width:100%;

    height:100%;

    top:0;

    left:0;

    background:
    radial-gradient(circle at top left,#e6f5ff 0%,transparent 45%),
    radial-gradient(circle at bottom right,#d9f1ff 0%,transparent 40%),
    #f8fbff;

    z-index:-5;

}

.bg-blur{

    position:fixed;

    border-radius:50%;

    filter:blur(90px);

    opacity:.6;

    z-index:-4;

}

.blur-one{

    width:340px;

    height:340px;

    background:#5ab5ff;

    top:-100px;

    left:-120px;

}

.blur-two{

    width:420px;

    height:420px;

    background:#9be4ff;

    right:-140px;

    bottom:-120px;

}

.hexagon-pattern{

    position:fixed;

    inset:0;

    opacity:.08;

    background-image:
    radial-gradient(#4da3ff 1px,transparent 1px);

    background-size:40px 40px;

    z-index:-3;

}

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

.circle{

    position:fixed;

    border-radius:50%;

    background:rgba(47,128,237,.08);

    animation:floatCircle 12s linear infinite;

    z-index:-2;

}

.circle-one{

    width:60px;

    height:60px;

    left:12%;

    top:25%;

}

.circle-two{

    width:90px;

    height:90px;

    right:10%;

    top:18%;

}

.circle-three{

    width:70px;

    height:70px;

    bottom:18%;

    left:8%;

}

.floating-plus{

    position:fixed;

    color:#67b7ff;

    font-size:18px;

    animation:plusFloat 6s ease-in-out infinite;

    z-index:-1;

}

.plus1{

    left:18%;

    top:35%;

}

.plus2{

    right:18%;

    top:42%;

}

.plus3{

    bottom:20%;

    right:25%;

}

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

@keyframes loaderSpin{

    to{

        transform:rotate(360deg);

    }

}

@keyframes floatCircle{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-25px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes plusFloat{

    0%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-18px) rotate(180deg);

    }

    100%{

        transform:translateY(0) rotate(360deg);

    }

}
/*==================================================
        STYLE.CSS - PART 2
        TOP BAR + HEADER + NAVBAR
==================================================*/

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

.top-bar{
    width:100%;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(15px);
    border-bottom:1px solid rgba(47,128,237,.08);
    position:relative;
    z-index:999;
}

.top-bar .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 20px;
}

.top-left,
.top-right{
    display:flex;
    align-items:center;
    gap:28px;
}

.top-left a,
.top-right a{

    display:flex;
    align-items:center;
    gap:8px;

    color:var(--text);

    font-size:14px;

    font-weight:500;

    transition:.35s;

}

.top-left a i,
.top-right a i{

    color:var(--primary);

    font-size:16px;

}

.top-left a:hover,
.top-right a:hover{

    color:var(--primary);

}

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

#header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    padding:18px 0;

    transition:.4s;

}

#header.active{

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

    backdrop-filter:blur(18px);

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    padding:12px 0;

}

/*==========================
        NAVBAR
===========================*/

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

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

    backdrop-filter:blur(25px);

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

    border-radius:80px;

    padding:15px 30px;

    box-shadow:0 20px 60px rgba(47,128,237,.08);

}

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

.logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.logo-icon{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    font-size:26px;

    box-shadow:0 15px 35px rgba(47,128,237,.35);

}

.logo-text h2{

    font-size:28px;

    line-height:1;

    color:var(--dark);

}

.logo-text span{

    display:block;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--primary);

    margin-top:4px;

}

/*==========================
        NAV MENU
===========================*/

.nav-menu{

    display:flex;

    align-items:center;

    gap:36px;

}

.nav-menu li{

    position:relative;

}

.nav-menu li a{

    position:relative;

    font-size:16px;

    font-weight:600;

    color:var(--dark);

    transition:.35s;

}

.nav-menu li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    border-radius:10px;

    transition:.35s;

}

.nav-menu li a:hover,
.nav-menu li a.active{

    color:var(--primary);

}

.nav-menu li a:hover::after,
.nav-menu li a.active::after{

    width:100%;

}

/*==========================
        HEADER RIGHT
===========================*/

.header-right{

    display:flex;

    align-items:center;

    gap:16px;

}

.search-btn{

    width:50px;

    height:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#fff;

    color:var(--primary);

    font-size:20px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.search-btn:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-5px);

}

.appointment-btn{

    display:flex;

    align-items:center;

    gap:10px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    padding:15px 28px;

    border-radius:50px;

    font-weight:600;

    transition:.4s;

    box-shadow:0 20px 40px rgba(47,128,237,.25);

}

.appointment-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 30px 55px rgba(47,128,237,.35);

}

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

#menu-btn{

    width:52px;

    height:52px;

    display:none;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:6px;

    cursor:pointer;

    border-radius:50%;

    background:#fff;

    box-shadow:var(--shadow);

    transition:.35s;

}

#menu-btn span{

    width:24px;

    height:2px;

    background:var(--dark);

    transition:.35s;

}

#menu-btn.active span:nth-child(1){

    transform:translateY(8px) rotate(45deg);

}

#menu-btn.active span:nth-child(2){

    opacity:0;

}

#menu-btn.active span:nth-child(3){

    transform:translateY(-8px) rotate(-45deg);

}

/*==========================
        HEADER HOVER
===========================*/

.navbar:hover{

    box-shadow:0 30px 70px rgba(47,128,237,.12);

}

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

@media(max-width:991px){

    .top-bar{

        display:none;

    }

    #menu-btn{

        display:flex;

    }

    .appointment-btn{

        display:none;

    }

    .nav-menu{

        position:absolute;

        top:115px;

        left:0;

        width:100%;

        background:#fff;

        border-radius:25px;

        padding:30px;

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

        box-shadow:0 25px 60px rgba(0,0,0,.08);

        opacity:0;

        visibility:hidden;

        transform:translateY(30px);

        transition:.4s;

    }

    .nav-menu.active{

        opacity:1;

        visibility:visible;

        transform:translateY(0);

    }

}

@media(max-width:768px){

    .navbar{

        padding:15px 20px;

        border-radius:24px;

    }

    .logo-text h2{

        font-size:22px;

    }

    .logo-icon{

        width:50px;

        height:50px;

        font-size:22px;

    }

}

@media(max-width:480px){

    .navbar{

        padding:12px 16px;

    }

    .search-btn{

        width:45px;

        height:45px;

    }

    #menu-btn{

        width:45px;

        height:45px;

    }

}/*==================================================
        STYLE.CSS - PART 3A
        HERO SECTION (LAYOUT + CONTENT)
==================================================*/

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



.hero::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    right:-220px;

    top:-180px;

    background:linear-gradient(
        135deg,
        rgba(47,128,237,.12),
        rgba(86,204,242,.06)
    );

    border-radius:50%;

    filter:blur(20px);

    z-index:-2;

}

.hero::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:-180px;

    bottom:-160px;

    background:rgba(86,204,242,.08);

    border-radius:50%;

    filter:blur(30px);

    z-index:-2;

}

/*==============================
        HERO WRAPPER
==============================*/

.hero-wrapper{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:70px;

}

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

.hero-content{

    position:relative;

    z-index:5;

}

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    background:#fff;

    padding:14px 22px;

    border-radius:60px;

    color:var(--primary);

    font-weight:600;

    box-shadow:0 15px 40px rgba(47,128,237,.08);

    margin-bottom:28px;

}

.hero-tag i{

    width:40px;

    height:40px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

}

.hero-title{

    font-size:72px;

    line-height:1.08;

    color:var(--dark);

    margin-bottom:30px;

    font-weight:800;

}

.hero-title span{

    color:#0077b6;

    position:relative;

}

.hero-title span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:6px;

    width:100%;

    height:14px;

    background:rgba(86,204,242,.25);

    z-index:-1;

    border-radius:20px;

}

.hero-text{

    font-size:18px;

    color:var(--text);

    max-width:620px;

    margin-bottom:40px;

}

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

.hero-buttons{

    display:flex;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:55px;

}

.hero-buttons .btn-primary{

    position:relative;

    overflow:hidden;

}

.hero-buttons .btn-primary::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.7s;

}

.hero-buttons .btn-primary:hover::before{

    left:120%;

}

.hero-buttons .btn-secondary{

    background:#fff;

    box-shadow:var(--shadow);

}

.hero-buttons .btn-secondary i{

    font-size:20px;

    color:var(--primary);

}
.hero-buttonss{

    display:flex;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

    

}

.hero-buttonss .btn-primary{

    position:relative;

    overflow:hidden;

}

.hero-buttonss .btn-primary::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.7s;

}

.hero-buttonss .btn-primary:hover::before{

    left:120%;

}

.hero-buttonss .btn-secondary{

    background:#fff;

    box-shadow:var(--shadow);

}

.hero-buttonss .btn-secondary i{

    font-size:20px;

    color:var(--primary);

}
/*==============================
        HERO STATS
==============================*/

.hero-stats{

    display:flex;

    gap:24px;

    flex-wrap:wrap;

}

.stat-box{

    min-width:170px;

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

    backdrop-filter:blur(20px);

    padding:28px;

    border-radius:24px;

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

    box-shadow:0 20px 50px rgba(47,128,237,.08);

    transition:.4s;

}

.stat-box:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(47,128,237,.18);

}

.stat-box h2{

    font-size:42px;

    color:var(--primary);

    margin-bottom:10px;

    font-weight:800;

}

.stat-box p{

    font-size:15px;

    color:var(--text);

}

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

.scroll-down{

    position:absolute;

    left:50%;

    bottom:20px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-weight:600;

}

.mouse{

    width:32px;

    height:55px;

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

    border-radius:30px;

    display:flex;

    justify-content:center;

    padding-top:8px;

}

.mouse span{

    width:5px;

    height:12px;

    background:var(--primary);

    border-radius:10px;

    animation:mouseScroll 1.6s infinite;

}

@keyframes mouseScroll{

    0%{

        opacity:1;

        transform:translateY(0);

    }

    100%{

        opacity:0;

        transform:translateY(20px);

    }

}/*==================================================
        STYLE.CSS - PART 3B-1A
        HERO IMAGE WRAPPER
==================================================*/

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

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:760px;

    z-index:5;

}

/*=================================
        MAIN IMAGE WRAPPER
==================================*/

.hero-image-wrapper{

    position:relative;

    width:580px;

    height:680px;

    display:flex;

    justify-content:center;

    align-items:flex-end;

}

/*=================================
        BACKGROUND CIRCLE
==================================*/

.hero-bg-circle{

    position:absolute;

    width:540px;

    height:540px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #2F80ED 0%,
        #4A9EFF 35%,
        #56CCF2 100%
    );

    top:45px;

    left:50%;

    transform:translateX(-50%);

    box-shadow:
        0 50px 100px rgba(47,128,237,.22);

    z-index:1;

}

/*=================================
        OUTER RING
==================================*/

.hero-bg-circle::before{

    content:"";

    position:absolute;

    inset:-28px;

    border-radius:50%;

    border:2px dashed rgba(255,255,255,.35);

    animation:rotateRing 30s linear infinite;

}

.hero-bg-circle::after{

    content:"";

    position:absolute;

    inset:32px;

    border-radius:50%;

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

}

/*=================================
        GLASS CIRCLE
==================================*/

.glass-circle{

    position:absolute;

    width:610px;

    height:610px;

    border-radius:50%;

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

    backdrop-filter:blur(18px);

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

    left:50%;

    top:10px;

    transform:translateX(-50%);

    z-index:0;

}

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

.hero-doctor{

    position:relative;

    z-index:5;

    width:470px;

    max-width:100%;

    object-fit:contain;

    filter:drop-shadow(
        0 45px 70px
        rgba(0,0,0,.22)
    );

    transition:.6s ease;

}

.hero-image-wrapper:hover .hero-doctor{

    transform:
        translateY(-12px)
        scale(1.02);

}

/*=================================
        IMAGE GLOW
==================================*/

.hero-image-glow{

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

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

    filter:blur(60px);

    bottom:50px;

    left:50%;

    transform:translateX(-50%);

    z-index:2;

}

/*=================================
        SHADOW BASE
==================================*/

.hero-shadow{

    position:absolute;

    width:320px;

    height:45px;

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

    border-radius:50%;

    filter:blur(22px);

    bottom:10px;

    left:50%;

    transform:translateX(-50%);

    z-index:1;

}

/*=================================
        DECORATIVE BORDER
==================================*/

.hero-border{

    position:absolute;

    width:640px;

    height:640px;

    border-radius:50%;

    border:2px solid rgba(86,204,242,.20);

    left:50%;

    top:-10px;

    transform:translateX(-50%);

    animation:pulseBorder 6s ease-in-out infinite;

}

/*=================================
        SMALL GLOW DOTS
==================================*/

.hero-dot{

    position:absolute;

    width:14px;

    height:14px;

    border-radius:50%;

    background:#56CCF2;

    box-shadow:0 0 18px #56CCF2;

}

.hero-dot.dot-1{

    top:100px;

    left:40px;

}

.hero-dot.dot-2{

    right:55px;

    top:180px;

}

.hero-dot.dot-3{

    bottom:140px;

    left:80px;

}

.hero-dot.dot-4{

    right:70px;

    bottom:110px;

}

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

@keyframes rotateRing{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes pulseBorder{

    0%{

        transform:
            translateX(-50%)
            scale(1);

        opacity:.4;

    }

    50%{

        transform:
            translateX(-50%)
            scale(1.03);

        opacity:1;

    }

    100%{

        transform:
            translateX(-50%)
            scale(1);

        opacity:.4;

    }

}/*==================================================
      STYLE.CSS — PART 3B-1B-1
      HERO DECORATIVE ELEMENTS
====================================================*/

/*==============================
        FLOATING BLOBS
==============================*/

.hero-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(2px);
    animation:blobFloat 10s ease-in-out infinite;
    z-index:1;
}

.hero-blob.blob-1{
    width:180px;
    height:180px;
    top:40px;
    left:-60px;
    background:linear-gradient(
        135deg,
        rgba(47,128,237,.18),
        rgba(86,204,242,.08)
    );
}

.hero-blob.blob-2{
    width:140px;
    height:140px;
    right:-40px;
    bottom:90px;
    background:linear-gradient(
        135deg,
        rgba(86,204,242,.20),
        rgba(47,128,237,.08)
    );
}

.hero-blob.blob-3{
    width:90px;
    height:90px;
    left:80px;
    bottom:40px;
    background:rgba(255,255,255,.45);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.35);
}

/*==============================
        DECORATIVE CIRCLES
==============================*/

.hero-circle{
    position:absolute;
    border-radius:50%;
    border:2px solid rgba(47,128,237,.15);
    animation:circlePulse 7s ease-in-out infinite;
}

.hero-circle.circle-1{
    width:90px;
    height:90px;
    top:70px;
    right:40px;
}

.hero-circle.circle-2{
    width:60px;
    height:60px;
    left:30px;
    top:260px;
}

.hero-circle.circle-3{
    width:110px;
    height:110px;
    right:-20px;
    bottom:160px;
}

/*==============================
        MEDICAL PLUS ICONS
==============================*/

.hero-plus{
    position:absolute;
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:var(--primary);
    box-shadow:0 12px 30px rgba(47,128,237,.18);
    animation:plusFloat 5s ease-in-out infinite;
}

.hero-plus.plus-1{
    top:120px;
    left:15px;
}

.hero-plus.plus-2{
    right:10px;
    top:310px;
}

.hero-plus.plus-3{
    bottom:80px;
    left:120px;
}

/*==============================
        HEXAGON ELEMENTS
==============================*/

.hero-hexagon{
    position:absolute;
    width:65px;
    height:65px;
    background:rgba(255,255,255,.55);
    backdrop-filter:blur(12px);
    border:1px solid rgba(47,128,237,.12);
    clip-path:polygon(
        25% 6%,
        75% 6%,
        100% 50%,
        75% 94%,
        25% 94%,
        0% 50%
    );
    animation:hexRotate 16s linear infinite;
}

.hero-hexagon.hex-1{
    top:170px;
    right:-30px;
}

.hero-hexagon.hex-2{
    bottom:90px;
    left:-25px;
}

/*==============================
        GLOW RINGS
==============================*/

.hero-ring{
    position:absolute;
    border-radius:50%;
    border:1px dashed rgba(86,204,242,.28);
    animation:ringRotate 24s linear infinite;
}

.hero-ring.ring-1{
    width:520px;
    height:520px;
    left:50%;
    top:60px;
    transform:translateX(-50%);
}

.hero-ring.ring-2{
    width:680px;
    height:680px;
    left:50%;
    top:-20px;
    transform:translateX(-50%);
    opacity:.4;
}

/*==============================
        SPARKLES
==============================*/

.hero-spark{
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#56CCF2;
    box-shadow:0 0 15px #56CCF2;
    animation:sparkMove 4s ease-in-out infinite;
}

.hero-spark.spark-1{
    top:90px;
    right:140px;
}

.hero-spark.spark-2{
    top:250px;
    left:40px;
}

.hero-spark.spark-3{
    bottom:150px;
    right:60px;
}

.hero-spark.spark-4{
    bottom:60px;
    left:170px;
}

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

@keyframes blobFloat{

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

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

}

@keyframes circlePulse{

    0%,100%{
        transform:scale(1);
        opacity:.5;
    }

    50%{
        transform:scale(1.15);
        opacity:1;
    }

}

@keyframes hexRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes ringRotate{

    from{
        transform:translateX(-50%) rotate(0deg);
    }

    to{
        transform:translateX(-50%) rotate(360deg);
    }

}

@keyframes sparkMove{

    0%,100%{
        transform:translateY(0) scale(1);
    }

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

}/*==================================================
      STYLE.CSS — PART 3B-1B-2
      RESPONSIVE + PARALLAX + FINAL DECORATIONS
==================================================*/

/*==================================
        FLOATING PARTICLES
==================================*/

.hero-particle{
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--secondary);
    box-shadow:0 0 12px rgba(86,204,242,.8);
    animation:particleFloat 8s linear infinite;
    z-index:2;
}

.hero-particle.p1{
    top:60px;
    left:18%;
    animation-delay:0s;
}

.hero-particle.p2{
    top:180px;
    right:12%;
    animation-delay:1s;
}

.hero-particle.p3{
    top:320px;
    left:8%;
    animation-delay:2s;
}

.hero-particle.p4{
    bottom:180px;
    right:18%;
    animation-delay:3s;
}

.hero-particle.p5{
    bottom:80px;
    left:30%;
    animation-delay:4s;
}

.hero-particle.p6{
    top:45%;
    right:6%;
    animation-delay:5s;
}

/*==================================
        BACKGROUND GRID
==================================*/

.hero-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(
        rgba(47,128,237,.04) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(47,128,237,.04) 1px,
        transparent 1px
    );

    background-size:70px 70px;

    pointer-events:none;

    z-index:0;

}

/*==================================
        PARALLAX HELPERS
==================================*/

.parallax-slow{

    will-change:transform;

    transform:translateZ(0);

}

.parallax-medium{

    will-change:transform;

    transform:translate3d(0,0,0);

}

.parallax-fast{

    will-change:transform;

    transform-origin:center;

}

/*==================================
        GSAP HELPERS
==================================*/

.gsap-fade{

    opacity:0;

}

.gsap-up{

    opacity:0;

    transform:translateY(80px);

}

.gsap-left{

    opacity:0;

    transform:translateX(-80px);

}

.gsap-right{

    opacity:0;

    transform:translateX(80px);

}

.gsap-scale{

    opacity:0;

    transform:scale(.8);

}

.gsap-rotate{

    opacity:0;

    transform:rotate(8deg);

}

/*==================================
        IMAGE HOVER
==================================*/

.hero-image-wrapper:hover .hero-bg-circle{

    transform:
    translateX(-50%)
    scale(1.03);

    transition:.6s;

}

.hero-image-wrapper:hover .hero-ring{

    animation-duration:14s;

}

.hero-image-wrapper:hover .hero-blob{

    filter:blur(1px);

}

/*==================================
        TABLET
==================================*/

@media(max-width:991px){

.hero-image{

    min-height:620px;

}

.hero-image-wrapper{

    width:470px;

    height:570px;

}

.hero-bg-circle{

    width:430px;

    height:430px;

}

.glass-circle{

    width:500px;

    height:500px;

}

.hero-border{

    width:520px;

    height:520px;

}

.hero-ring.ring-1{

    width:430px;

    height:430px;

}

.hero-ring.ring-2{

    width:560px;

    height:560px;

}

.hero-doctor{

    width:390px;

}

.hero-blob.blob-1{

    width:130px;

    height:130px;

}

.hero-blob.blob-2{

    width:110px;

    height:110px;

}

}

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

@media(max-width:768px){

.hero-image{

    min-height:520px;

    margin-top:40px;

}

.hero-image-wrapper{

    width:100%;

    max-width:380px;

    height:470px;

}

.hero-bg-circle{

    width:340px;

    height:340px;

}

.glass-circle{

    width:390px;

    height:390px;

}

.hero-border{

    width:410px;

    height:410px;

}

.hero-ring.ring-2,

.hero-ring.ring-1,

.hero-hexagon,

.hero-grid,

.hero-particle{

    display:none;

}

.hero-doctor{

    width:310px;

}

.hero-plus{

    transform:scale(.8);

}

.hero-circle{

    transform:scale(.8);

}

}

/*==================================
        SMALL MOBILE
==================================*/

@media(max-width:480px){

.hero-image{

    min-height:430px;

}

.hero-bg-circle{

    width:280px;

    height:280px;

}

.glass-circle{

    width:320px;

    height:320px;

}

.hero-border{

    width:330px;

    height:330px;

}

.hero-doctor{

    width:250px;

}

.hero-shadow{

    width:220px;

}

.hero-dot{

    width:10px;

    height:10px;

}

.hero-plus,

.hero-circle,

.hero-blob{

    display:none;

}

}

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

@keyframes particleFloat{

0%{

    transform:
    translateY(0)
    scale(1);

    opacity:0;

}

20%{

    opacity:1;

}

50%{

    transform:
    translateY(-35px)
    scale(1.4);

}

100%{

    transform:
    translateY(-80px)
    scale(.5);

    opacity:0;

}

}/*==================================================
        STYLE.CSS - PART 3B-2
        FLOATING CARDS + GLASS EFFECTS
==================================================*/

/*==================================
        COMMON FLOATING CARD
==================================*/

.floating-card{
    position:absolute;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.45);
    border-radius:24px;
    padding:22px;
    box-shadow:0 25px 60px rgba(47,128,237,.15);
    transition:all .45s ease;
    z-index:20;
    overflow:hidden;
}

.floating-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,.18),
        transparent 60%
    );
    pointer-events:none;
}

.floating-card:hover{
    transform:translateY(-12px) scale(1.03);
    box-shadow:0 35px 80px rgba(47,128,237,.25);
}

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

.appointment-card{
    width:260px;
    top:40px;
    left:-70px;
    animation:floatCard1 6s ease-in-out infinite;
}

.appointment-card .icon{
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    font-size:24px;
    margin-bottom:18px;
}

.appointment-card h4{
    color:var(--dark);
    margin-bottom:8px;
}

.appointment-card p{
    font-size:14px;
    margin-bottom:16px;
}

.appointment-card .btn-book{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--primary);
    color:#fff;
    padding:10px 18px;
    border-radius:40px;
    font-size:14px;
    transition:.35s;
}

.appointment-card .btn-book:hover{
    background:var(--secondary);
}

/*==================================
        HAPPY PATIENTS CARD
==================================*/

.patient-card{
    width:240px;
    right:-60px;
    top:170px;
    animation:floatCard2 7s ease-in-out infinite;
}

.patient-avatars{
    display:flex;
    margin-bottom:16px;
}

.patient-avatars img{
    width:46px;
    height:46px;
    border-radius:50%;
    border:3px solid #fff;
    margin-left:-10px;
    object-fit:cover;
}

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

.patient-card h3{
    color:var(--primary);
    margin-bottom:6px;
}

.patient-card span{
    color:var(--text);
    font-size:14px;
}

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

.experience-badge{
    position:absolute;
    bottom:30px;
    left:-30px;
    width:130px;
    height:130px;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:#fff;
    box-shadow:0 25px 50px rgba(47,128,237,.28);
    animation:badgePulse 4s ease-in-out infinite;
    z-index:25;
}

.experience-badge h2{
    font-size:38px;
    line-height:1;
}

.experience-badge span{
    font-size:13px;
    text-align:center;
    margin-top:6px;
}

/*==================================
        EMERGENCY CARD
==================================*/

.emergency-card{
    width:250px;
    bottom:70px;
    right:-80px;
    animation:floatCard3 6.5s ease-in-out infinite;
}

.emergency-card .emergency-top{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:14px;
}

.emergency-card .emergency-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ff4b5c;
    color:#fff;
    font-size:22px;
}

.emergency-card strong{
    display:block;
    color:var(--dark);
}

.emergency-card small{
    color:var(--text);
}

/*==================================
        DOCTOR INFO CARD
==================================*/

.doctor-info-card{
    width:210px;
    bottom:-20px;
    left:140px;
    animation:floatCard4 7s ease-in-out infinite;
}

.doctor-info-card .doctor-name{
    font-weight:700;
    color:var(--dark);
    margin-bottom:4px;
}

.doctor-info-card .doctor-role{
    color:var(--primary);
    font-size:14px;
    margin-bottom:12px;
}

.doctor-info-card .rating{
    display:flex;
    align-items:center;
    gap:4px;
    color:#ffc107;
    font-size:15px;
}

/*==================================
        GSAP READY STATES
==================================*/

.gsap-card{
    opacity:0;
    transform:translateY(80px) scale(.9);
    will-change:transform,opacity;
}

.gsap-card-left{
    opacity:0;
    transform:translateX(-80px);
}

.gsap-card-right{
    opacity:0;
    transform:translateX(80px);
}

.gsap-card-scale{
    opacity:0;
    transform:scale(.75);
}

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

@media(max-width:991px){

    .appointment-card,
    .patient-card,
    .emergency-card{
        transform:scale(.9);
    }

    .experience-badge{
        width:110px;
        height:110px;
    }

}

@media(max-width:768px){

    .appointment-card,
    .patient-card,
    .doctor-info-card,
    .emergency-card{
        display:none;
    }

    .experience-badge{
        left:50%;
        bottom:-10px;
        transform:translateX(-50%);
    }

}

@media(max-width:480px){

    .experience-badge{
        width:90px;
        height:90px;
    }

    .experience-badge h2{
        font-size:28px;
    }

}

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

@keyframes floatCard1{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-15px);}
}

@keyframes floatCard2{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(18px);}
}

@keyframes floatCard3{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-18px);}
}

@keyframes floatCard4{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(12px);}
}

@keyframes badgePulse{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.08);
    }
}/*==================================================
        STYLE.CSS - PART 3B-1A-1
        HERO IMAGE WRAPPER + BACKGROUND
==================================================*/

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

.hero-image{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 760px;
    z-index: 5;
    overflow: visible;
}

/*=================================
        IMAGE WRAPPER
==================================*/

.hero-image-wrapper{
    position: relative;
    width: 580px;
    height: 680px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    isolation: isolate;
}

/*=================================
        MAIN BLUE CIRCLE
==================================*/

.hero-bg-circle{

    position:absolute;

    top:45px;

    left:50%;

    transform:translateX(-50%);

    width:540px;

    height:540px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #2F80ED 0%,
        #4A9EFF 40%,
        #56CCF2 100%
    );

    box-shadow:
        0 50px 120px rgba(47,128,237,.28);

    overflow:hidden;

    z-index:1;

}

/* Gradient Shine */

.hero-bg-circle::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.35),
        transparent 45%
    );

    border-radius:50%;

}

/* Rotating Dashed Ring */

.hero-bg-circle::after{

    content:"";

    position:absolute;

    inset:-24px;

    border-radius:50%;

    border:2px dashed rgba(255,255,255,.35);

    animation:rotateRing 30s linear infinite;

}

/*=================================
        GLASS CIRCLE
==================================*/

.glass-circle{

    position:absolute;

    left:50%;

    top:5px;

    transform:translateX(-50%);

    width:610px;

    height:610px;

    border-radius:50%;

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

    backdrop-filter:blur(18px);

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

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

    z-index:0;

}

/*=================================
        OUTER BORDER
==================================*/

.hero-border{

    position:absolute;

    left:50%;

    top:-12px;

    transform:translateX(-50%);

    width:640px;

    height:640px;

    border-radius:50%;

    border:2px solid rgba(86,204,242,.20);

    animation:pulseBorder 6s ease-in-out infinite;

    z-index:0;

}

/*=================================
        GLOW LAYER
==================================*/

.hero-image-glow{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    width:320px;

    height:320px;

    border-radius:50%;

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

    filter:blur(70px);

    z-index:2;

}

/*=================================
        SHADOW BASE
==================================*/

.hero-shadow{

    position:absolute;

    bottom:8px;

    left:50%;

    transform:translateX(-50%);

    width:330px;

    height:45px;

    border-radius:50%;

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

    filter:blur(24px);

    z-index:1;

}

/*=================================
        SMALL GLOW DOTS
==================================*/

.hero-dot{

    position:absolute;

    width:14px;

    height:14px;

    border-radius:50%;

    background:#56CCF2;

    box-shadow:
        0 0 12px #56CCF2,
        0 0 24px #56CCF2;

}

.hero-dot.dot-1{

    top:90px;

    left:35px;

}

.hero-dot.dot-2{

    top:170px;

    right:50px;

}

.hero-dot.dot-3{

    bottom:120px;

    left:70px;

}

.hero-dot.dot-4{

    bottom:100px;

    right:65px;

}/*==================================================
        STYLE.CSS - PART 3B-1A-2
        DOCTOR IMAGE + GLOW + ANIMATIONS
==================================================*/

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

.hero-doctor{

    position:relative;

    z-index:10;

    width:470px;

    max-width:100%;

    object-fit:contain;

    user-select:none;

    pointer-events:none;

    filter:
        drop-shadow(0 30px 60px rgba(0,0,0,.18))
        drop-shadow(0 50px 90px rgba(47,128,237,.15));

    transition:
        transform .7s ease,
        filter .7s ease;

    animation:doctorFloat 6s ease-in-out infinite;

}

/*=================================
        HOVER EFFECT
==================================*/

.hero-image-wrapper:hover .hero-doctor{

    transform:
        translateY(-15px)
        scale(1.03);

    filter:
        drop-shadow(0 45px 90px rgba(0,0,0,.22))
        drop-shadow(0 60px 120px rgba(47,128,237,.28));

}

/*=================================
        IMAGE REFLECTION
==================================*/

.hero-image-wrapper::before{

    content:"";

    position:absolute;

    top:50px;

    left:50%;

    transform:translateX(-50%) rotate(-18deg);

    width:140px;

    height:520px;

    background:

        linear-gradient(
            rgba(255,255,255,.35),
            transparent
        );

    filter:blur(8px);

    opacity:.45;

    z-index:12;

    pointer-events:none;

}

/*=================================
        IMAGE SHINE
==================================*/

.hero-image-wrapper::after{

    content:"";

    position:absolute;

    top:-20%;

    left:-130%;

    width:80%;

    height:140%;

    transform:rotate(20deg);

    background:

        linear-gradient(

            transparent,

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

            transparent

        );

    transition:1s;

    z-index:13;

}

.hero-image-wrapper:hover::after{

    left:150%;

}

/*=================================
        EXTRA GLOW
==================================*/

.hero-glow{

    position:absolute;

    left:50%;

    bottom:100px;

    transform:translateX(-50%);

    width:240px;

    height:240px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(86,204,242,.35),

            transparent 70%

        );

    filter:blur(45px);

    z-index:2;

}

/*=================================
        MEDICAL CROSS
==================================*/

.hero-medical-cross{

    position:absolute;

    top:90px;

    right:40px;

    width:65px;

    height:65px;

    border-radius:18px;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    font-size:30px;

    box-shadow:0 20px 40px rgba(47,128,237,.15);

    animation:crossFloat 5s ease-in-out infinite;

}

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

@keyframes doctorFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes rotateRing{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes pulseBorder{

    0%{

        transform:
            translateX(-50%)
            scale(1);

        opacity:.45;

    }

    50%{

        transform:
            translateX(-50%)
            scale(1.04);

        opacity:1;

    }

    100%{

        transform:
            translateX(-50%)
            scale(1);

        opacity:.45;

    }

}

@keyframes crossFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

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

@media(max-width:991px){

    .hero-doctor{

        width:390px;

    }

    .hero-medical-cross{

        width:55px;

        height:55px;

        font-size:24px;

    }

}

@media(max-width:768px){

    .hero-doctor{

        width:320px;

    }

    .hero-medical-cross{

        top:50px;

        right:20px;

        width:48px;

        height:48px;

        border-radius:14px;

        font-size:20px;

    }

    .hero-image-wrapper::before,

    .hero-image-wrapper::after{

        display:none;

    }

}

@media(max-width:480px){

    .hero-doctor{

        width:250px;

    }

    .hero-medical-cross{

        display:none;

    }

    .hero-glow{

        width:180px;

        height:180px;

    }

}
/*==================================================
        STYLE.CSS - PART 3B-3
        PREMIUM FLOATING ELEMENTS
        GSAP + GLASSMORPHISM EFFECTS
====================================================*/


/*==========================================
        FLOATING NOTIFICATION CARD
===========================================*/

.notification-card{

    position:absolute;

    top:8%;

    right:-70px;

    width:260px;

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

    backdrop-filter:blur(25px);

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

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

    border-radius:24px;

    padding:22px;

    display:flex;

    align-items:center;

    gap:18px;

    box-shadow:0 25px 60px rgba(47,128,237,.12);

    z-index:30;

    transition:.45s;

}

.notification-card:hover{

    transform:
        translateY(-12px)
        scale(1.03);

    box-shadow:
        0 40px 80px rgba(47,128,237,.18);

}

.notification-icon{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #2F80ED,
        #56CCF2
    );

    color:#fff;

    font-size:24px;

}

.notification-content h4{

    font-size:18px;

    color:var(--dark);

    margin-bottom:5px;

}

.notification-content span{

    color:var(--text);

    font-size:14px;

}


/*==========================================
        DOCTOR AVAILABLE CARD
===========================================*/

.availability-card{

    position:absolute;

    left:-90px;

    bottom:140px;

    width:240px;

    padding:20px;

    border-radius:22px;

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

    backdrop-filter:blur(18px);

    display:flex;

    align-items:center;

    gap:16px;

    box-shadow:0 20px 50px rgba(47,128,237,.12);

    animation:availabilityFloat 6s ease-in-out infinite;

}

.status-dot{

    width:16px;

    height:16px;

    background:#2ecc71;

    border-radius:50%;

    position:relative;

}

.status-dot::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid #2ecc71;

    animation:pulseWave 2s infinite;

}

.availability-card h5{

    font-size:17px;

    margin-bottom:5px;

    color:var(--dark);

}

.availability-card p{

    font-size:14px;

}


/*==========================================
        VIDEO CONSULTATION CARD
===========================================*/

.video-card{

    position:absolute;

    right:-90px;

    bottom:120px;

    width:250px;

    border-radius:24px;

    overflow:hidden;

    background:#fff;

    box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.video-thumb{

    height:140px;

    background:linear-gradient(
        135deg,
        #2F80ED,
        #56CCF2
    );

    position:relative;

}

.play-btn{

    position:absolute;

    left:50%;

    top:50%;

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

    width:70px;

    height:70px;

    border-radius:50%;

    background:#fff;

    color:#2F80ED;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    cursor:pointer;

    transition:.35s;

}

.play-btn:hover{

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

}

.video-info{

    padding:18px;

}

.video-info h4{

    margin-bottom:8px;

}

.video-info p{

    font-size:14px;

}


/*==========================================
        MEDICAL ICONS
===========================================*/

.medical-icon{

    position:absolute;

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:#fff;

    color:#2F80ED;

    box-shadow:0 18px 40px rgba(47,128,237,.12);

    font-size:24px;

    animation:iconFloat 7s ease-in-out infinite;

}

.medical-icon.icon-1{

    left:-40px;

    top:35%;

}

.medical-icon.icon-2{

    right:-45px;

    top:48%;

    animation-delay:1.5s;

}

.medical-icon.icon-3{

    top:82%;

    left:18%;

    animation-delay:2.5s;

}


/*==========================================
        GLASS REFLECTION
===========================================*/

.glass-reflection{

    position:absolute;

    inset:0;

    border-radius:32px;

    pointer-events:none;

    overflow:hidden;

}

.glass-reflection::before{

    content:"";

    position:absolute;

    left:-150%;

    top:-20%;

    width:70%;

    height:180%;

    background:linear-gradient(

        rgba(255,255,255,0),

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

        rgba(255,255,255,0)

    );

    transform:rotate(25deg);

    animation:glassShine 8s linear infinite;

}


/*==========================================
        GSAP READY
===========================================*/

.gsap-card{

    opacity:0;

    transform:translateY(80px);

}

.gsap-left{

    opacity:0;

    transform:translateX(-80px);

}

.gsap-right{

    opacity:0;

    transform:translateX(80px);

}

.gsap-scale{

    opacity:0;

    transform:scale(.75);

}

.gsap-rotate{

    opacity:0;

    transform:rotate(-8deg);

}


/*==========================================
        HOVER EFFECT
===========================================*/

.hero-image-area:hover .floating-card,

.hero-image-area:hover .notification-card,

.hero-image-area:hover .availability-card,

.hero-image-area:hover .video-card{

    transform:
        translateY(-10px)
        scale(1.03);

}


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

@keyframes iconFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

@keyframes availabilityFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(15px);

    }

}

@keyframes pulseWave{

    from{

        transform:scale(.8);

        opacity:1;

    }

    to{

        transform:scale(2.2);

        opacity:0;

    }

}

@keyframes glassShine{

    from{

        left:-160%;

    }

    to{

        left:220%;

    }

}


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

@media(max-width:991px){

.notification-card,

.video-card,

.availability-card{

    transform:scale(.88);

}

}

@media(max-width:768px){

.notification-card,

.video-card,

.availability-card,

.medical-icon{

    display:none;

}

}

@media(max-width:480px){

.play-btn{

    width:55px;

    height:55px;

    font-size:20px;

}

}/*==================================================
        STYLE.CSS - PART 4A
        APPOINTMENT SECTION LAYOUT
==================================================*/

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

.appointment-section{

    position:relative;

    padding:120px 0;

    background:#f8fbff;

    overflow:hidden;

}

.appointment-section::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(47,128,237,.08);

    filter:blur(90px);

}

.appointment-section::after{

    content:"";

    position:absolute;

    right:-160px;

    bottom:-180px;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(86,204,242,.08);

    filter:blur(100px);

}

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

.appointment-container{

    position:relative;

    z-index:10;

}

/*=========================================
        SECTION TITLE
=========================================*/

.appointment-heading{

    text-align:center;

    margin-bottom:70px;

}

.appointment-heading span{

    display:inline-block;

    padding:10px 22px;

    background:#eaf5ff;

    color:var(--primary);

    border-radius:40px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:18px;

}

.appointment-heading h2{

    font-size:52px;

    color:var(--dark);

    margin-bottom:18px;

}

.appointment-heading p{

    max-width:700px;

    margin:auto;

    font-size:17px;

    color:var(--text);

}

/*=========================================
        GLASS BOX
=========================================*/

.appointment-box{

    position:relative;

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

    backdrop-filter:blur(25px);

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

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

    border-radius:35px;

    padding:60px;

    box-shadow:

        0 35px 80px rgba(47,128,237,.10);

    overflow:hidden;

}

/* Glass Shine */

.appointment-box::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-30%;

    width:60%;

    height:260%;

    background:linear-gradient(

        rgba(255,255,255,0),

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

        rgba(255,255,255,0)

    );

    transform:rotate(28deg);

    animation:glassMove 9s linear infinite;

}

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

.appointment-pattern{

    position:absolute;

    inset:0;

    opacity:.05;

    background-image:

        radial-gradient(#2F80ED 1px, transparent 1px);

    background-size:38px 38px;

    pointer-events:none;

}

.appointment-circle{

    position:absolute;

    border-radius:50%;

    background:rgba(47,128,237,.06);

    animation:circleMove 8s ease-in-out infinite;

}

.circle-a{

    width:90px;

    height:90px;

    top:40px;

    right:70px;

}

.circle-b{

    width:150px;

    height:150px;

    bottom:60px;

    left:-50px;

}

.circle-c{

    width:70px;

    height:70px;

    top:50%;

    right:-30px;

}

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

.appointment-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

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

.appointment-content h3{

    font-size:38px;

    color:var(--dark);

    margin-bottom:20px;

}

.appointment-content p{

    font-size:17px;

    line-height:1.8;

    margin-bottom:28px;

}

.appointment-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.appointment-list li{

    display:flex;

    align-items:center;

    gap:16px;

    font-weight:500;

}

.appointment-list li i{

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    box-shadow:0 12px 25px rgba(47,128,237,.20);

}

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

.appointment-image{

    position:relative;

    display:flex;

    justify-content:center;

}

.appointment-image img{

    width:100%;

    max-width:500px;

    border-radius:28px;

    box-shadow:0 30px 70px rgba(0,0,0,.10);

    transition:.5s;

}

.appointment-image img:hover{

    transform:translateY(-10px);

}

/*=========================================
        FLOATING BADGE
=========================================*/

.appointment-badge{

    position:absolute;

    left:-20px;

    bottom:40px;

    background:#fff;

    border-radius:20px;

    padding:20px;

    box-shadow:0 20px 50px rgba(47,128,237,.12);

    display:flex;

    align-items:center;

    gap:15px;

}

.appointment-badge i{

    width:55px;

    height:55px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

}

.appointment-badge h5{

    color:var(--dark);

    margin-bottom:4px;

}

.appointment-badge span{

    font-size:14px;

    color:var(--text);

}

/*=========================================
        GSAP READY
=========================================*/

.appointment-fade{

    opacity:0;

}

.appointment-up{

    opacity:0;

    transform:translateY(80px);

}

.appointment-left{

    opacity:0;

    transform:translateX(-80px);

}

.appointment-right{

    opacity:0;

    transform:translateX(80px);

}

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

@keyframes glassMove{

    from{

        left:-60%;

    }

    to{

        left:180%;

    }

}

@keyframes circleMove{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

}

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

@media(max-width:991px){

    .appointment-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .appointment-box{

        padding:40px;

    }

}

@media(max-width:768px){

    .appointment-heading h2{

        font-size:38px;

    }

    .appointment-box{

        padding:30px;

    }

    .appointment-badge{

        left:15px;

        bottom:15px;

    }

}

@media(max-width:480px){

    .appointment-section{

        padding:80px 0;

    }

    .appointment-heading h2{

        font-size:30px;

    }

    .appointment-box{

        padding:22px;

        border-radius:22px;

    }

    .appointment-content h3{

        font-size:28px;

    }

    .appointment-badge{

        position:relative;

        margin-top:20px;

        left:0;

        bottom:0;

    }

}/*==================================================
        STYLE.CSS - PART 4B
        APPOINTMENT FORM
==================================================*/

/*=========================================
        FORM WRAPPER
=========================================*/

.appointment-form{

    position:relative;

    width:100%;

}

.form-grid{

    display:grid;

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

    gap:25px;

}

.form-group{

    position:relative;

}

.form-group.full{

    grid-column:1/-1;

}

/*=========================================
        LABEL
=========================================*/

.form-group label{

    display:block;

    font-size:15px;

    font-weight:600;

    color:var(--dark);

    margin-bottom:12px;

}

/*=========================================
        INPUTS
=========================================*/

.form-control{

    width:100%;

    height:62px;

    padding:0 22px;

    border-radius:18px;

    border:1px solid rgba(47,128,237,.12);

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

    backdrop-filter:blur(12px);

    font-size:16px;

    color:var(--dark);

    transition:.35s;

    box-shadow:0 8px 25px rgba(47,128,237,.05);

}

.form-control::placeholder{

    color:#8a95a8;

}

.form-control:hover{

    border-color:rgba(47,128,237,.35);

}

.form-control:focus{

    border-color:var(--primary);

    box-shadow:

        0 0 0 4px rgba(47,128,237,.10),

        0 15px 40px rgba(47,128,237,.12);

}

/*=========================================
        SELECT
=========================================*/

select.form-control{

    appearance:none;

    cursor:pointer;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%232F80ED' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5l6.5 6 6.5-6'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 20px center;

    padding-right:55px;

}

/*=========================================
        DATE INPUT
=========================================*/

input[type="date"].form-control,

input[type="time"].form-control{

    cursor:pointer;

}

/*=========================================
        TEXTAREA
=========================================*/

textarea.form-control{

    height:170px;

    resize:none;

    padding:18px 22px;

}

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

.input-icon{

    position:absolute;

    right:20px;

    top:50px;

    color:var(--primary);

    font-size:18px;

    pointer-events:none;

}

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

.form-check{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-top:10px;

}

.form-check input{

    width:18px;

    height:18px;

    accent-color:var(--primary);

    margin-top:3px;

}

.form-check label{

    margin:0;

    font-size:15px;

    color:var(--text);

}

/*=========================================
        SUBMIT BUTTON
=========================================*/

.form-submit{

    margin-top:30px;

}

.form-submit button{

    width:100%;

    height:64px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    color:#fff;

    font-size:17px;

    font-weight:700;

    letter-spacing:.4px;

    transition:.35s;

    box-shadow:0 20px 45px rgba(47,128,237,.22);

}

.form-submit button:hover{

    transform:translateY(-6px);

    box-shadow:0 30px 60px rgba(47,128,237,.30);

}

/*=========================================
        SUCCESS / ERROR
=========================================*/

.form-control.success{

    border-color:#16c784;

}

.form-control.error{

    border-color:#ff4d4f;

}

.input-message{

    font-size:13px;

    margin-top:8px;

}

.input-message.success{

    color:#16c784;

}

.input-message.error{

    color:#ff4d4f;

}

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

.form-loading{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-top:20px;

    color:var(--primary);

    font-weight:600;

}

.form-spinner{

    width:22px;

    height:22px;

    border-radius:50%;

    border:3px solid rgba(47,128,237,.15);

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

    animation:formSpin .8s linear infinite;

}

/*=========================================
        GSAP READY
=========================================*/

.form-fade{

    opacity:0;

}

.form-up{

    opacity:0;

    transform:translateY(60px);

}

.form-left{

    opacity:0;

    transform:translateX(-60px);

}

.form-right{

    opacity:0;

    transform:translateX(60px);

}

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

@keyframes formSpin{

    to{

        transform:rotate(360deg);

    }

}

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

@media(max-width:991px){

    .form-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .form-control{

        height:58px;

        font-size:15px;

    }

    textarea.form-control{

        height:150px;

    }

}

@media(max-width:480px){

    .form-control{

        height:54px;

        padding:0 18px;

    }

    textarea.form-control{

        padding:16px 18px;

        height:140px;

    }

    .form-submit button{

        height:58px;

        font-size:16px;

    }

}/*==================================================
        STYLE.CSS - PART 4C
        STATISTICS COUNTER SECTION
====================================================*/

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

.statistics-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #f7fbff 0%,
        #edf7ff 100%
    );

}

.statistics-section::before{

    content:"";

    position:absolute;

    top:-200px;

    left:-150px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(47,128,237,.08);

    filter:blur(120px);

}

.statistics-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(86,204,242,.08);

    filter:blur(120px);

}

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

.stats-grid{

    display:grid;

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

    gap:30px;

    position:relative;

    z-index:2;

}

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

.stat-card{

    position:relative;

    padding:45px 30px;

    text-align:center;

    border-radius:28px;

    overflow:hidden;

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

    backdrop-filter:blur(20px);

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

    box-shadow:0 20px 60px rgba(47,128,237,.08);

    transition:.45s ease;

}

.stat-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(47,128,237,.05),
        transparent 70%
    );

    opacity:0;

    transition:.4s;

}

.stat-card:hover{

    transform:translateY(-12px);

    box-shadow:0 35px 80px rgba(47,128,237,.18);

}

.stat-card:hover::before{

    opacity:1;

}

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

.stat-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    font-size:34px;

    margin-bottom:28px;

    box-shadow:0 20px 45px rgba(47,128,237,.25);

    transition:.4s;

}

.stat-card:hover .stat-icon{

    transform:rotate(12deg) scale(1.08);

}

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

.stat-number{

    font-size:54px;

    font-weight:800;

    color:var(--dark);

    line-height:1;

    margin-bottom:12px;

}

.stat-number span{

    color:var(--primary);

}

.stat-title{

    font-size:18px;

    font-weight:600;

    color:var(--dark);

    margin-bottom:10px;

}

.stat-desc{

    font-size:15px;

    color:var(--text);

    line-height:1.7;

}

/*=========================================
        PROGRESS BAR
=========================================*/

.stat-progress{

    width:100%;

    height:8px;

    margin-top:24px;

    border-radius:20px;

    overflow:hidden;

    background:#e7f0fb;

}

.stat-progress span{

    display:block;

    width:0;

    height:100%;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}

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

.stats-shape{

    position:absolute;

    border-radius:50%;

    background:rgba(47,128,237,.08);

    animation:statsFloat 8s ease-in-out infinite;

}

.stats-shape.shape-1{

    width:80px;

    height:80px;

    top:10%;

    left:5%;

}

.stats-shape.shape-2{

    width:130px;

    height:130px;

    bottom:5%;

    right:5%;

}

.stats-shape.shape-3{

    width:60px;

    height:60px;

    top:55%;

    right:15%;

}

/*=========================================
        GSAP READY
=========================================*/

.stats-fade{

    opacity:0;

}

.stats-up{

    opacity:0;

    transform:translateY(70px);

}

.stats-left{

    opacity:0;

    transform:translateX(-70px);

}

.stats-right{

    opacity:0;

    transform:translateX(70px);

}

.stats-scale{

    opacity:0;

    transform:scale(.85);

}

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

@keyframes statsFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-25px);

    }

}

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

@media(max-width:1200px){

    .stats-grid{

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

    }

}

@media(max-width:768px){

    .statistics-section{

        padding:90px 0;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

    .stat-card{

        padding:35px 25px;

    }

    .stat-number{

        font-size:42px;

    }

    .stat-icon{

        width:75px;

        height:75px;

        font-size:28px;

    }

}

@media(max-width:480px){

    .stat-card{

        padding:28px 20px;

        border-radius:22px;

    }

    .stat-number{

        font-size:34px;

    }

    .stat-title{

        font-size:17px;

    }

    .stat-desc{

        font-size:14px;

    }

}/*==================================================
        STYLE.CSS - PART 4D
        GSAP + COUNTER + PARTICLES + UTILITIES
==================================================*/

/*=========================================
        GSAP INITIAL STATES
=========================================*/

.gsap-reveal{
    opacity:0;
    visibility:hidden;
    will-change:transform,opacity;
}

.gsap-fade-up{
    opacity:0;
    transform:translateY(80px);
}

.gsap-fade-down{
    opacity:0;
    transform:translateY(-80px);
}

.gsap-fade-left{
    opacity:0;
    transform:translateX(-80px);
}

.gsap-fade-right{
    opacity:0;
    transform:translateX(80px);
}

.gsap-scale-up{
    opacity:0;
    transform:scale(.8);
}

.gsap-scale-down{
    opacity:0;
    transform:scale(1.2);
}

.gsap-rotate-left{
    opacity:0;
    transform:rotate(-12deg);
}

.gsap-rotate-right{
    opacity:0;
    transform:rotate(12deg);
}

/*=========================================
        STAGGER ITEMS
=========================================*/

.stagger-item{
    opacity:0;
    transform:translateY(50px);
}

.stagger-delay-1{transition-delay:.1s;}
.stagger-delay-2{transition-delay:.2s;}
.stagger-delay-3{transition-delay:.3s;}
.stagger-delay-4{transition-delay:.4s;}
.stagger-delay-5{transition-delay:.5s;}
.stagger-delay-6{transition-delay:.6s;}

/*=========================================
        COUNTER CIRCLE
=========================================*/

.counter-ring{

    position:relative;

    width:120px;

    height:120px;

    margin:auto auto 25px;

}

.counter-ring svg{

    width:120px;

    height:120px;

    transform:rotate(-90deg);

}

.counter-ring circle{

    fill:none;

    stroke-width:8;

}

.counter-ring .track{

    stroke:#eaf2fb;

}

.counter-ring .progress{

    stroke:var(--primary);

    stroke-linecap:round;

    stroke-dasharray:314;

    stroke-dashoffset:314;

}

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

.float-badge{

    position:absolute;

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

    border-radius:18px;

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

    backdrop-filter:blur(16px);

    box-shadow:0 18px 45px rgba(47,128,237,.12);

    animation:badgeFloat 6s ease-in-out infinite;

}

.float-badge i{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

}

.float-badge.badge-left{

    left:-30px;

    top:120px;

}

.float-badge.badge-right{

    right:-30px;

    bottom:80px;

}

/*=========================================
        PARTICLES
=========================================*/

.stats-particle{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--secondary);

    box-shadow:0 0 12px rgba(86,204,242,.8);

    animation:particleMove 9s linear infinite;

}

.stats-particle.p1{top:12%;left:12%;}
.stats-particle.p2{top:35%;right:14%;}
.stats-particle.p3{bottom:18%;left:20%;}
.stats-particle.p4{bottom:8%;right:10%;}
.stats-particle.p5{top:60%;left:5%;}

/*=========================================
        SCROLL PROGRESS LINE
=========================================*/

.scroll-progress{

    position:absolute;

    left:50%;

    top:0;

    width:4px;

    height:100%;

    transform:translateX(-50%);

    background:rgba(47,128,237,.08);

}

.scroll-progress span{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:0;

    border-radius:20px;

    background:linear-gradient(
        to bottom,
        var(--primary),
        var(--secondary)
    );

}

/*=========================================
        HOVER UTILITIES
=========================================*/

.hover-lift{

    transition:.4s ease;

}

.hover-lift:hover{

    transform:translateY(-10px);

}

.hover-scale{

    transition:.4s ease;

}

.hover-scale:hover{

    transform:scale(1.05);

}

.hover-shadow:hover{

    box-shadow:0 35px 80px rgba(47,128,237,.18);

}

/*=========================================
        GLASS PANEL
=========================================*/

.glass-panel{

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

    backdrop-filter:blur(20px);

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

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

    border-radius:24px;

}

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

@keyframes badgeFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

}

@keyframes particleMove{

    0%{

        transform:translateY(0) scale(.8);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    60%{

        transform:translateY(-40px) scale(1.4);

    }

    100%{

        transform:translateY(-90px) scale(.5);

        opacity:0;

    }

}

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

@media(max-width:991px){

.float-badge{

    transform:scale(.9);

}

.scroll-progress{

    display:none;

}

}

@media(max-width:768px){

.float-badge,

.stats-particle{

    display:none;

}

.counter-ring{

    width:100px;

    height:100px;

}

.counter-ring svg{

    width:100px;

    height:100px;

}

}

@media(max-width:480px){

.counter-ring{

    width:80px;

    height:80px;

}

.counter-ring svg{

    width:80px;

    height:80px;

}

.glass-panel{

    border-radius:18px;

}

}

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

.gpu{

    transform:translateZ(0);

    will-change:transform;

}

.smooth{

    backface-visibility:hidden;

    perspective:1000px;

}

.no-select{

    user-select:none;

}

.pointer{

    cursor:pointer;

}

/*=========================================
        END OF PART 4
=========================================*//*==================================================
        STYLE.CSS - PART 5A
        DOCTORS SECTION LAYOUT
==================================================*/

/*=========================================
        DOCTORS SECTION
=========================================*/

.doctors-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6fbff 100%
        );

}

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

.doctors-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    top:-180px;

    left:-180px;

    background:rgba(47,128,237,.08);

    filter:blur(120px);

}

.doctors-section::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    bottom:-220px;

    right:-220px;

    background:rgba(86,204,242,.08);

    filter:blur(120px);

}

/*=========================================
        GRID PATTERN
=========================================*/

.doctors-pattern{

    position:absolute;

    inset:0;

    opacity:.05;

    background-image:

    linear-gradient(
        rgba(47,128,237,.18) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(47,128,237,.18) 1px,
        transparent 1px
    );

    background-size:60px 60px;

    pointer-events:none;

}

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

.doctors-container{

    position:relative;

    z-index:10;

}

/*=========================================
        SECTION HEADER
=========================================*/

.doctors-heading{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}

.doctors-heading span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 24px;

    border-radius:50px;

    background:#ebf6ff;

    color:var(--primary);

    font-weight:700;

    letter-spacing:.6px;

    text-transform:uppercase;

    margin-bottom:20px;

}

.doctors-heading span i{

    font-size:15px;

}

.doctors-heading h2{

    font-size:52px;

    line-height:1.2;

    color:var(--dark);

    margin-bottom:22px;

    font-weight:800;

}

.doctors-heading p{

    max-width:680px;

    margin:auto;

    color:var(--text);

    font-size:17px;

    line-height:1.9;

}

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

.heading-line{

    width:100px;

    height:6px;

    margin:35px auto 0;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}

.heading-circle{

    position:absolute;

    width:20px;

    height:20px;

    border-radius:50%;

    background:var(--secondary);

    box-shadow:

    0 0 18px rgba(86,204,242,.6);

}

.heading-circle.circle-1{

    top:90px;

    left:12%;

}

.heading-circle.circle-2{

    top:120px;

    right:14%;

}

.heading-circle.circle-3{

    bottom:120px;

    left:18%;

}

/*=========================================
        DOCTORS GRID
=========================================*/

.doctors-grid{

    display:grid;

    grid-template-columns:

        repeat(4,1fr);

    gap:35px;

    align-items:stretch;

}

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

.doctor-shape{

    position:absolute;

    border-radius:50%;

    background:rgba(47,128,237,.08);

    animation:doctorShapeFloat 8s ease-in-out infinite;

}

.doctor-shape.shape-1{

    width:90px;

    height:90px;

    top:16%;

    left:4%;

}

.doctor-shape.shape-2{

    width:140px;

    height:140px;

    right:3%;

    bottom:10%;

}

.doctor-shape.shape-3{

    width:70px;

    height:70px;

    top:50%;

    right:12%;

}

/*=========================================
        GSAP READY
=========================================*/

.doctor-fade{

    opacity:0;

}

.doctor-up{

    opacity:0;

    transform:translateY(80px);

}

.doctor-left{

    opacity:0;

    transform:translateX(-80px);

}

.doctor-right{

    opacity:0;

    transform:translateX(80px);

}

.doctor-scale{

    opacity:0;

    transform:scale(.85);

}

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

@keyframes doctorShapeFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

}

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

@media(max-width:1200px){

.doctors-grid{

    grid-template-columns:

        repeat(2,1fr);

}

}

@media(max-width:768px){

.doctors-section{

    padding:90px 0;

}

.doctors-heading{

    margin-bottom:60px;

}

.doctors-heading h2{

    font-size:38px;

}

.doctors-heading p{

    font-size:16px;

}

.doctors-grid{

    grid-template-columns:1fr;

}

.heading-circle{

    display:none;

}

}

@media(max-width:480px){

.doctors-section{

    padding:70px 0;

}

.doctors-heading h2{

    font-size:30px;

}

.doctors-heading span{

    font-size:13px;

    padding:8px 18px;

}

.heading-line{

    width:70px;

    height:5px;

}

}/*==================================================
        STYLE.CSS - PART 5B
        PREMIUM DOCTOR CARDS
==================================================*/

/*=========================================
        DOCTOR CARD
=========================================*/

.doctor-card{

    position:relative;

    overflow:hidden;

    border-radius:32px;

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

    backdrop-filter:blur(20px);

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

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

    box-shadow:0 25px 70px rgba(47,128,237,.08);

    transition:all .45s ease;

    isolation:isolate;

}

.doctor-card:hover{

    transform:translateY(-15px);

    box-shadow:0 40px 90px rgba(47,128,237,.18);

}

/*=========================================
        GLASS SHINE
=========================================*/

.doctor-card::before{

    content:"";

    position:absolute;

    top:-140%;

    left:-60%;

    width:70%;

    height:260%;

    background:linear-gradient(

        rgba(255,255,255,0),

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

        rgba(255,255,255,0)

    );

    transform:rotate(25deg);

    transition:1s;

    z-index:20;

}

.doctor-card:hover::before{

    left:150%;

}

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

.doctor-image{

    position:relative;

    overflow:hidden;

    height:420px;

    background:#edf8ff;

}

.doctor-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .7s ease;

}

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

    transform:scale(1.08);

}

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

.doctor-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(16,44,78,.55),

        transparent 55%

    );

    opacity:.8;

    transition:.4s;

}

.doctor-card:hover .doctor-image::after{

    opacity:1;

}

/*=========================================
        HOVER OVERLAY
=========================================*/

.doctor-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    background:rgba(47,128,237,.18);

    backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    transition:.45s;

    z-index:15;

}

.doctor-card:hover .doctor-overlay{

    opacity:1;

    visibility:visible;

}

/*=========================================
        SOCIAL ICON
=========================================*/

.doctor-overlay a{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    color:var(--primary);

    font-size:18px;

    transform:translateY(40px);

    transition:.35s;

}

.doctor-card:hover .doctor-overlay a{

    transform:translateY(0);

}

.doctor-overlay a:hover{

    background:var(--primary);

    color:#fff;

}

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

.doctor-exp{

    position:absolute;

    left:18px;

    top:18px;

    padding:10px 16px;

    border-radius:40px;

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

    backdrop-filter:blur(12px);

    color:var(--primary);

    font-weight:700;

    box-shadow:0 15px 35px rgba(47,128,237,.15);

    z-index:18;

}

/*=========================================
        AVAILABLE BADGE
=========================================*/

.doctor-status{

    position:absolute;

    right:18px;

    top:18px;

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 16px;

    border-radius:40px;

    background:#fff;

    font-size:13px;

    font-weight:600;

    z-index:18;

}

.doctor-status::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:#27c46a;

    box-shadow:0 0 0 5px rgba(39,196,106,.15);

}

/*=========================================
        CARD BODY
=========================================*/

.doctor-content{

    padding:30px;

}

.doctor-content h3{

    font-size:26px;

    color:var(--dark);

    margin-bottom:10px;

}

.doctor-speciality{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:#eef7ff;

    color:var(--primary);

    font-size:14px;

    font-weight:600;

    margin-bottom:18px;

}

.doctor-content p{

    color:var(--text);

    line-height:1.8;

    margin-bottom:24px;

}

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

.doctor-rating{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

}

.rating-stars{

    color:#ffbf00;

    display:flex;

    gap:3px;

}

.rating-text{

    color:var(--text);

    font-size:14px;

}

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

.doctor-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:100%;

    height:56px;

    border-radius:18px;

    text-decoration:none;

    font-weight:700;

    color:#fff;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    transition:.35s;

}

.doctor-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 40px rgba(47,128,237,.25);

}

/*=========================================
        GSAP READY
=========================================*/

.doctor-card-reveal{

    opacity:0;

    transform:translateY(80px);

}

.doctor-image-reveal{

    opacity:0;

    transform:scale(.85);

}

.doctor-content-reveal{

    opacity:0;

    transform:translateY(40px);

}

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

@media(max-width:991px){

.doctor-image{

    height:360px;

}

}

@media(max-width:768px){

.doctor-card{

    border-radius:24px;

}

.doctor-image{

    height:320px;

}

.doctor-content{

    padding:24px;

}

.doctor-content h3{

    font-size:22px;

}

}

@media(max-width:480px){

.doctor-image{

    height:280px;

}

.doctor-btn{

    height:52px;

}

.doctor-exp,

.doctor-status{

    transform:scale(.9);

}

}

/*=========================================
        END PART 5B
=========================================*/
/* =====================================
   HERO SEARCH APPOINTMENT CARD
===================================== */


.hero-search-card {

    position:absolute;

    left:50%;

    bottom:-80px;

    transform:translateX(-50%);

    width:85%;

    max-width:1150px;

    z-index:20;

}




.search-box {


    width:100%;


    background:

    rgba(255,255,255,0.85);


    backdrop-filter:

    blur(20px);



    border-radius:30px;


    padding:30px;



    display:grid;


    grid-template-columns:

    1fr 1fr 1fr auto;


    align-items:center;


    gap:20px;



    box-shadow:


    0 30px 70px

    rgba(0,80,180,.15);



    border:

    1px solid

    rgba(255,255,255,.7);



}



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


.input-group {


    height:65px;


    background:#f6fbff;


    border-radius:18px;


    display:flex;


    align-items:center;


    padding:0 20px;


    gap:15px;



    transition:.4s;



}



.input-group:hover {


    background:#ffffff;


    box-shadow:

    0 10px 30px

    rgba(0,102,255,.12);


    transform:

    translateY(-3px);


}



.input-group i {


    font-size:22px;


    color:#0066ff;


}





.input-group input,
.input-group select {


    width:100%;


    border:none;


    outline:none;


    background:transparent;


    color:#23344d;


    font-size:15px;


    font-family:"Poppins",sans-serif;


}





.input-group input::placeholder {


    color:#8b98aa;


}





.input-group select {


    cursor:pointer;


}





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


.search-btn-main {


    height:65px;


    padding:0 35px;


    border:none;


    border-radius:18px;



    background:

    linear-gradient(

    135deg,

    #0066ff,

    #00c6fb

    );



    color:white;


    font-size:15px;


    font-weight:600;



    display:flex;


    align-items:center;


    justify-content:center;


    gap:10px;



    cursor:pointer;



    box-shadow:


    0 20px 40px

    rgba(0,102,255,.35);



    transition:.4s;


}





.search-btn-main i {


    font-size:20px;


}





.search-btn-main:hover {


    transform:

    translateY(-5px);


    box-shadow:


    0 30px 50px

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


}





/* =====================================
 CARD ANIMATION READY FOR GSAP
===================================== */


.hero-search-card {


    opacity:0;


    transform:

    translate(-50%,80px);


}





/* =====================================
 DECORATIVE GLOW
===================================== */


.hero-search-card::before {


    content:"";


    position:absolute;


    width:180px;


    height:180px;


    background:

    rgba(0,198,251,.18);


    filter:blur(60px);


    top:-50px;


    left:30%;


    z-index:-1;


}





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


@media(max-width:1100px){


.hero-search-card {


    width:90%;


    bottom:-160px;


}



.search-box {


    grid-template-columns:

    1fr 1fr;


}



.search-btn-main {


    grid-column:

    span 2;


}



}




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


@media(max-width:600px){


.hero-search-card {


    position:relative;


    bottom:auto;


    margin-top:50px;


}



.search-box {


    padding:20px;


    border-radius:22px;


    grid-template-columns:1fr;


}



.search-btn-main {


    grid-column:auto;


    width:100%;


}



.input-group {


    height:58px;


}



}/* ==========================================
   SEARCH APPOINTMENT BOX
========================================== */


.hero-search-card {

    position:absolute;

    bottom:-75px;

    left:50%;

    transform:translateX(-50%);

    width:90%;

    max-width:1200px;

    z-index:50;

}



/* Main Search Container */

.search-box {


    display:flex;

    align-items:center;

    gap:18px;


    background:#ffffff;


    padding:25px 30px;


    border-radius:28px;



    box-shadow:

    0 25px 70px

    rgba(0,70,160,0.15);



    border:

    1px solid

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



    transition:.4s;


}



.search-box:hover {


    transform:

    translateY(-8px);


    box-shadow:

    0 35px 80px

    rgba(0,70,160,0.22);


}





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


.input-group {


    flex:1;


    height:65px;


    display:flex;


    align-items:center;


    gap:14px;


    padding:0 20px;



    background:#f7fbff;



    border-radius:16px;



    border:

    1px solid

    #e7f2ff;



    transition:.35s;


}




.input-group:hover {


    background:#ffffff;


    border-color:#00a8ff;


    box-shadow:

    0 10px 25px

    rgba(0,102,255,.12);


}



.input-group i {


    font-size:22px;


    color:#0066ff;


}




.input-group input,
.input-group select {


    width:100%;


    border:none;


    outline:none;


    background:transparent;


    font-size:15px;


    color:#1c2b3f;


    font-family:"Poppins",sans-serif;


}




.input-group select {


    cursor:pointer;


}





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


.search-btn-main {


    height:65px;


    padding:0 35px;


    border:none;


    border-radius:18px;



    background:


    linear-gradient(

    135deg,

    #0066ff,

    #00c6fb

    );



    color:#fff;


    font-size:15px;


    font-weight:600;



    display:flex;


    align-items:center;


    justify-content:center;


    gap:10px;



    cursor:pointer;



    white-space:nowrap;



    box-shadow:


    0 18px 40px

    rgba(0,102,255,.35);



    transition:.4s;


}





.search-btn-main i {


    font-size:20px;


}



.search-btn-main:hover {


    transform:

    translateY(-5px)
    scale(1.03);



    box-shadow:


    0 30px 60px

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


}






/* ==========================================
   FLOATING EFFECT
========================================== */


.hero-search-card {


    animation:

    searchFloat 5s infinite ease-in-out;


}



@keyframes searchFloat {


0%,100%{

transform:

translateX(-50%)
translateY(0);

}


50%{


transform:

translateX(-50%)
translateY(-15px);


}


}





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


@media(max-width:992px){


.hero-search-card {


bottom:-140px;


}



.search-box {


display:grid;


grid-template-columns:

1fr 1fr;


}



.search-btn-main {


grid-column:

span 2;


width:100%;


}


}




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


@media(max-width:600px){


.hero-search-card {


position:relative;


bottom:auto;


left:auto;


transform:none;


width:92%;


margin:50px auto 0;


}



.search-box {


display:flex;


flex-direction:column;


padding:20px;


border-radius:22px;


}



.input-group {


width:100%;


height:58px;


}



.search-btn-main {


width:100%;


height:58px;


font-size:14px;


}



}.search-card{
    animation: floatCard 4s ease infinite;
}

@keyframes floatCard{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-12px);
    }
}.hero-image img{
    animation: floating 5s ease-in-out infinite;
}

@keyframes floating{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-18px);
    }
    100%{
        transform:translateY(0);
    }
}/*=====================================================
    TESTIMONIAL SECTION
=====================================================*/

.testimonials{
    position:relative;
    overflow:hidden;
    background:#f7fbff;
    padding:100px 0;
}


/* Decorative Shapes */

.testimonial-shape{
    position:absolute;
    border-radius:50%;
    filter:blur(1px);
    opacity:.25;
    z-index:0;
}

.testimonial-shape.shape-1{
    width:320px;
    height:320px;
    background:#0077b6;
    top:-120px;
    left:-120px;
}

.testimonial-shape.shape-2{
    width:260px;
    height:260px;
    background:#2d7ff9;
    bottom:-100px;
    right:-100px;
}


/* Container */

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


/*==============================
    SECTION HEADING
==============================*/

.section-heading{
    max-width:700px;
    margin:0 auto 60px;
    text-align:center;
}


.section-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 22px;
    background:#e7f8f5;
    color:#00a98f;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}


.section-tag i{
    font-size:16px;
}


.section-heading h2{

    font-size:46px;
    line-height:1.2;
    font-weight:700;
    color:#14213d;
    margin-bottom:20px;

}


.section-heading h2 span{

    color:#0077b6;

}


.section-heading p{

    color:#667085;
    font-size:16px;
    line-height:1.8;

}



/*==============================
    SWIPER SLIDER
==============================*/


.testimonial-slider{

    padding:20px 15px 70px;

}


.swiper-slide{

    height:auto;

}


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


.testimonial-card{

    background:#ffffff;
    padding:35px 30px;
    border-radius:25px;
    height:100%;
    position:relative;
    box-shadow:
    0 20px 50px rgba(0,0,0,.08);

    transition:.4s ease;

}


.testimonial-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 30px 60px rgba(0,0,0,.12);

}



/* Quote Icon */

.quote-icon{

    position:absolute;
    right:30px;
    top:25px;

    width:55px;
    height:55px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#e8faf6;

    color:#0077b6;

    border-radius:50%;

    font-size:22px;

}



/* Rating */

.rating{

    display:flex;
    gap:5px;
    margin-bottom:20px;

}


.rating i{

    color:#ffc107;
    font-size:16px;

}



/* Review Text */

.testimonial-card p{

    color:#667085;
    font-size:15px;
    line-height:1.8;
    margin-bottom:30px;

}



/* Patient Info */

.patient{

    display:flex;
    align-items:center;
    gap:15px;

}



.patient img{

    width:65px;
    height:65px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #e8faf6;

}



.patient h4{

    margin:0 0 5px;

    font-size:18px;

    color:#14213d;

}



.patient span{

    color:#00a98f;

    font-size:14px;

}



/*==============================
    SWIPER NAVIGATION
==============================*/


.swiper-button-next,
.swiper-button-prev{

    width:50px;
    height:50px;

    background:#ffffff;

    border-radius:50%;

    box-shadow:
    0 10px 30px rgba(0,0,0,.12);

}



.swiper-button-next:after,
.swiper-button-prev:after{

    font-size:18px;

    color:#0077b6;

    font-weight:bold;

}



/* Pagination */


.swiper-pagination-bullet{

    width:10px;
    height:10px;

    background:#0077b6;

    opacity:.3;

}


.swiper-pagination-bullet-active{

    opacity:1;

    width:25px;

    border-radius:20px;

}



/*==============================
    REVIEW COUNTER
==============================*/


.review-counter{

    margin-top:50px;

    display:grid;

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

    gap:30px;

}



.review-box{

    background:#ffffff;

    text-align:center;

    padding:35px 20px;

    border-radius:25px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.07);

    transition:.3s;

}



.review-box:hover{

    transform:translateY(-8px);

}



.review-box h2{

    font-size:42px;

    color:#14213d;

    margin-bottom:10px;

    font-weight:700;

}



.review-box h2 span{

    color:#0077b6;

}



.review-box p{

    color:#667085;

    font-size:15px;

    margin:0;

}



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


.testimonial-card{

    animation:
    fadeUp .8s ease both;

}



@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}



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


@media(max-width:992px){

    .section-heading h2{

        font-size:38px;

    }


    .review-counter{

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

    }

}



@media(max-width:768px){


    .testimonials{

        padding:70px 0;

    }


    .section-heading h2{

        font-size:32px;

    }


    .testimonial-card{

        padding:30px 25px;

    }


    .review-counter{

        grid-template-columns:1fr;

    }


    .swiper-button-next,
    .swiper-button-prev{

        display:none;

    }


}



@media(max-width:480px){


    .section-tag{

        font-size:13px;

        padding:8px 18px;

    }


    .testimonial-card p{

        font-size:14px;

    }


    .patient img{

        width:55px;
        height:55px;

    }


    .review-box h2{

        font-size:34px;

    }

}/*=====================================================
        PREMIUM MEDICAL FOOTER CSS
=====================================================*/


.footer{

    position:relative;
    overflow:hidden;
    background:#071d32;
    color:#ffffff;
    padding:90px 0 40px;

}



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


.footer-shape{

    position:absolute;
    border-radius:50%;
    opacity:.15;

}



.footer-shape.shape-1{

    width:350px;
    height:350px;
    background:#0077b6;
    top:-150px;
    left:-120px;

}



.footer-shape.shape-2{

    width:280px;
    height:280px;
    background:#2d7ff9;
    bottom:-100px;
    right:-80px;

}



.footer-circle{

    position:absolute;
    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;

}


.circle-1{

    width:150px;
    height:150px;
    top:40%;
    left:5%;

}


.circle-2{

    width:200px;
    height:200px;
    bottom:20%;
    right:10%;

}



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


.footer-top{

    position:relative;
    z-index:2;

    display:grid;

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

    gap:35px;

}



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


.footer-logo{

    display:flex;
    align-items:center;
    gap:15px;
    text-decoration:none;
    color:#fff;
    margin-bottom:25px;

}


.logo-icon{

    width:60px;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#0077b6;

    border-radius:18px;

    font-size:28px;

}



.footer-logo h2{

    margin:0;

    font-size:28px;

    color:#ffffff;

}


.footer-logo span{

    color:#9db3c8;

    font-size:14px;

}



/*==============================
    ABOUT TEXT
==============================*/


.footer-about p{

    color:#b7c7d9;

    line-height:1.8;

    font-size:15px;

    margin-bottom:25px;

}



/*==============================
    CONTACT ITEMS
==============================*/


.footer-contact .contact-item{

    display:flex;

    gap:12px;

    margin-bottom:15px;

    color:#c6d5e4;

    font-size:14px;

}



.footer-contact i{

    color:#0077b6;

    font-size:18px;

}



/*==============================
    SOCIAL ICONS
==============================*/


.footer-social{

    display:flex;

    gap:12px;

    margin-top:25px;

}



.footer-social a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:#ffffff;

    transition:.3s;

}



.footer-social a:hover{

    background:#0077b6;

    transform:translateY(-5px);

}



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


.footer-title{

    color:#ffffff;

    font-size:20px;

    margin-bottom:25px;

    position:relative;

}



.footer-title:after{

    content:"";

    width:45px;

    height:3px;

    background:#0077b6;

    position:absolute;

    left:0;

    bottom:-10px;

}



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


.footer-links{

    list-style:none;

    padding:0;

    margin:0;

}



.footer-links li{

    margin-bottom:14px;

}



.footer-links a{

    display:flex;

    align-items:center;

    gap:10px;

    color:#b7c7d9;

    text-decoration:none;

    font-size:15px;

    transition:.3s;

}



.footer-links a i{

    color:#0077b6;

}



.footer-links a:hover{

    color:#ffffff;

    transform:translateX(5px);

}



/*==============================
    CONTACT COLUMN
==============================*/


.footer-contact-list{

    margin-bottom:25px;

}



.footer-contact-item{

    display:flex;

    gap:15px;

    margin-bottom:20px;

}



.contact-icon{

    width:42px;

    height:42px;

    background:#12344e;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#0077b6;

}



.footer-contact-item span{

    color:#8ea5ba;

    font-size:13px;

}



.footer-contact-item h5{

    margin:5px 0;

    font-size:14px;

    color:#ffffff;

    font-weight:500;

}



/*==============================
    OPENING HOURS
==============================*/


.opening-hours{

    background:#102b43;

    padding:20px;

    border-radius:18px;

}



.opening-hours h4{

    font-size:17px;

    margin-bottom:15px;

    color:#fff;

}



.opening-hours h4 i{

    color:#0077b6;

    margin-right:8px;

}



.opening-hours ul{

    padding:0;

    margin:0;

    list-style:none;

}



.opening-hours li{

    display:flex;

    justify-content:space-between;

    padding:8px 0;

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

    font-size:13px;

}



.opening-hours span{

    color:#b7c7d9;

}



.opening-hours strong{

    color:#0077b6;

}



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


.footer-newsletter{

    margin-top:60px;

    padding:35px;

    background:#102b43;

    border-radius:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

}



.newsletter-left span{

    color:#0077b6;

    font-weight:600;

}



.newsletter-left h2{

    font-size:30px;

    margin:10px 0;

}



.newsletter-left p{

    color:#b7c7d9;

}



.newsletter-form{

    display:flex;

    background:#ffffff;

    padding:6px;

    border-radius:50px;

}



.newsletter-form input{

    border:0;

    outline:none;

    padding:15px 20px;

    width:280px;

}



.newsletter-form button{

    border:0;

    background:#0077b6;

    color:white;

    padding:0 25px;

    border-radius:50px;

    cursor:pointer;

}



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


.footer-map{

    margin-top:50px;

    height:350px;

    border-radius:25px;

    overflow:hidden;

}



.footer-map iframe{

    width:100%;

    height:100%;

    border:0;

}



/*==============================
    EMERGENCY CARD
==============================*/


.footer-emergency-card{

    margin-top:40px;

    padding:25px 35px;

    background:#0077b6;

    border-radius:25px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.emergency-icon{

    width:70px;

    height:70px;

    background:#ffffff;

    color:#0077b6;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:30px;

}



.emergency-content span{

    color:#e8fffb;

}



.emergency-content h3{

    margin:5px 0;

    font-size:26px;

}



.btn-primary{

    background:#ffffff;

    color:#00a98f;

    padding:15px 30px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

}



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


@media(max-width:1200px){

.footer-top{

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

}

}



@media(max-width:992px){

.footer-top{

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

}


.footer-newsletter{

flex-direction:column;

align-items:flex-start;

}


.footer-emergency-card{

flex-direction:column;

text-align:center;

gap:20px;

}

}



@media(max-width:600px){

.footer{

padding:60px 0 30px;

}


.footer-top{

grid-template-columns:1fr;

}


.footer-newsletter{

padding:25px;

}


.newsletter-form{

width:100%;

}


.newsletter-form input{

width:100%;

}


.footer-map{

height:250px;

}


.emergency-content h3{

font-size:20px;

}

}/*==============================
   GOOGLE FONT
==============================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

body{
    font-family:'Poppins',sans-serif;
    background:#f7fbff;
    color:#222;
}

.container{
    width:92%;
    max-width:1300px;
    margin:auto;
}

.section-padding{
    padding:100px 0;
}

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

.departments{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,#ffffff,#f6fbff);
}

.shape-one,
.shape-two,
.shape-three{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:.18;
}

.shape-one{
    width:280px;
    height:280px;
    background:#0d6efd;
    top:-80px;
    left:-80px;
}

.shape-two{
    width:240px;
    height:240px;
    background:#00c6ff;
    right:-70px;
    top:100px;
}

.shape-three{
    width:220px;
    height:220px;
    background:#4CAF50;
    bottom:-70px;
    left:40%;
}

/*==============================
SECTION TITLE
==============================*/

.section-heading{
    text-align:center;
    margin-bottom:70px;
}

.section-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 22px;
    border-radius:50px;
    background:#eaf5ff;
    color:#0d6efd;
    font-weight:600;
    margin-bottom:20px;
}

.section-tag i{
    font-size:18px;
}

.section-heading h2{
    font-size:48px;
    font-weight:800;
    color:#111;
    margin-bottom:20px;
}

.section-heading h2 span{
    display:block;
    color:#0d6efd;
}

.section-heading p{
    max-width:700px;
    margin:auto;
    color:#666;
    line-height:1.8;
    font-size:16px;
}

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

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

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

.department-card{

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

    backdrop-filter:blur(12px);

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

    border-radius:22px;

    padding:35px;

    position:relative;

    overflow:hidden;

    transition:.45s;

    box-shadow:0 15px 45px rgba(0,0,0,.06);

}

.department-card::before{

    content:"";

    position:absolute;

    width:150px;

    height:150px;

    background:rgba(13,110,253,.06);

    border-radius:50%;

    top:-60px;

    right:-60px;

    transition:.5s;

}

.department-card:hover{

    transform:translateY(-12px);

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

}

.department-card:hover::before{

    transform:scale(1.4);

}

.department-card.active{

    background:linear-gradient(135deg,#0077b6,#3f8cff);

    color:#fff;

}

.department-card.active p,

.department-card.active a{

    color:#fff;

}

.department-card.active .department-icon{

    background:#fff;

    color:#0d6efd;

}

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

.department-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#0077b6,#4ba4ff);

    color:#fff;

    font-size:32px;

    margin-bottom:25px;

    transition:.4s;

}

.department-card:hover .department-icon{

    transform:rotateY(180deg);

}

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

.department-card h3{

    font-size:24px;

    margin-bottom:15px;

    font-weight:700;

}

.department-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.department-card a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:#E83035;

    font-weight:600;

    transition:.3s;

}

.department-card a:hover{

    gap:15px;

}

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

.department-btn{

    text-align:center;

    margin-top:60px;

}

.btn-primary{

    display:inline-flex;

    align-items:center;

    gap:12px;

    background:linear-gradient(135deg,#0d6efd,#1da1f2);

    color:#fff;

    padding:18px 36px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.4s;

    box-shadow:0 15px 40px rgba(13,110,253,.25);

}

.btn-primary:hover{

    transform:translateY(-6px);

    gap:18px;

}

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

@media(max-width:1200px){

.department-grid{

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

}

}

@media(max-width:992px){

.section-heading h2{

font-size:40px;

}

.department-grid{

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

}

}

@media(max-width:768px){

.section-padding{

padding:70px 0;

}

.section-heading{

margin-bottom:50px;

}

.section-heading h2{

font-size:34px;

}

.department-card{

padding:28px;

}

}

@media(max-width:576px){

.department-grid{

grid-template-columns:1fr;

}

.section-heading h2{

font-size:30px;

}

.department-icon{

width:70px;

height:70px;

font-size:28px;

}

.department-card h3{

font-size:22px;

}

.btn-primary{

width:100%;

justify-content:center;

}

}
/*=========================================
   HEALTHCARE SECTION
=========================================*/

.healthcare{
    background:#f7fbff;
    position:relative;
    overflow:hidden;
    padding:100px 0;
}

.healthcare-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

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

.healthcare-image{
    position:inherit;
    display:flex;
    justify-content:center;
    align-items:center;
}

.image-bg{
    position:absolute;
    width:430px;
    height:430px;
    background:linear-gradient(135deg,#0d6efd,#5fb3ff);
    border-radius:50%;
    opacity:.08;
}

.doctor-main{
    width:100%;
    max-width:460px;
    position:relative;
    z-index:2;
}

/*=========================================
FLOATING BOXES
=========================================*/

.experience-box,
.emergency-box,
.patient-box{

    position:absolute;
    background:#fff;
    padding:18px 22px;
    border-radius:18px;
    display:flex;
    align-items:center;
    gap:15px;
    box-shadow:0 20px 40px rgba(0,0,0,.08);
    animation:floatBox 4s ease-in-out infinite;
    z-index:5;

}

.experience-box{
    left:-20px;
    top:40px;
}

.emergency-box{
    right:-20px;
    top:140px;
    animation-delay:1s;
}

.patient-box{
    left:20px;
    bottom:20px;
    animation-delay:2s;
}

@keyframes floatBox{

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

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

}

.experience-box i,
.emergency-box i{

    width:60px;
    height:60px;
    border-radius:50%;
    background:linear-gradient(135deg,#0d6efd,#42a5ff);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:24px;

}

.experience-box h2{
    color:#0d6efd;
    font-size:32px;
    margin-bottom:4px;
}

.experience-box span,
.emergency-box span,
.patient-box span{
    color:#666;
    font-size:14px;
}

.patient-box h3{
    color:#111;
    margin-bottom:5px;
}

.avatars{
    display:flex;
    margin-right:10px;
}

.avatars img{
    width:42px;
    height:42px;
    border-radius:50%;
    border:3px solid #fff;
    margin-left:-12px;
}

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

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

.healthcare-content h2{
    font-size:48px;
    line-height:1.2;
    margin:18px 0;
    font-weight:800;
    color:#111;
}

.healthcare-content h2 span{
    display:block;
    color:#0d6efd;
}

.healthcare-content>p{
    color:#666;
    line-height:1.9;
    margin-bottom:35px;
}

/*=========================================
SERVICE GRID
=========================================*/

.service-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-bottom:35px;
}

.service-card{

    background:#fff;
    border-radius:18px;
    padding:24px;
    display:flex;
    gap:18px;
    align-items:flex-start;
    transition:.4s;
    box-shadow:0 10px 35px rgba(0,0,0,.05);

}

.service-card:hover{

    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.service-icon{

    width:65px;
    height:65px;
    border-radius:16px;
    background:linear-gradient(135deg,#0d6efd,#3ca8ff);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    flex-shrink:0;

}

.service-card h3{
    margin-bottom:8px;
    color:#111;
}

.service-card p{
    color:#666;
    font-size:15px;
    line-height:1.7;
}

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

.feature-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-bottom:40px;
}

.feature-item{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:500;
}

.feature-item i{
    color:#0d6efd;
    font-size:18px;
}

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

.healthcare-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.btn-primary{

    background:linear-gradient(135deg,#0d6efd,#2ca7ff);
    color:#fff;
    padding:16px 34px;
    border-radius:50px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    transition:.4s;

}

.btn-primary:hover{
    transform:translateY(-5px);
}

.btn-secondary{

    padding:16px 34px;
    border-radius:50px;
    text-decoration:none;
    border:2px solid #0d6efd;
    color:#0d6efd;
    font-weight:600;
    transition:.4s;

}

.btn-secondary:hover{

    background:#E83035;
    color:#fff;

}

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

@media(max-width:1200px){

.healthcare-wrapper{

grid-template-columns:1fr;
gap:60px;

}

.healthcare-image{

order:1;

}

.healthcare-content{

order:2;

}

}

@media(max-width:992px){

.healthcare-content h2{

font-size:40px;

}

.service-grid{

grid-template-columns:1fr;

}

.feature-list{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.healthcare{

padding:70px 0;

}

.image-bg{

width:320px;
height:320px;

}

.doctor-main{

max-width:320px;

}

.experience-box,
.emergency-box,
.patient-box{

position:relative;
left:auto;
right:auto;
top:auto;
bottom:auto;
margin-top:20px;

}

.healthcare-image{

flex-direction:column;

}

.healthcare-content h2{

font-size:32px;

}

.healthcare-buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

width:100%;
justify-content:center;
text-align:center;

}

}

@media(max-width:576px){

.service-card{

padding:20px;

}

.service-icon{

width:55px;
height:55px;
font-size:22px;

}

.healthcare-content h2{

font-size:28px;

}

}
/*=========================================
    CTA SECTION
=========================================*/

.cta-section{
    padding:90px 0;
    background:#f7fbff;
}

.cta-wrapper{
    position:relative;
    overflow:hidden;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    padding:70px 60px;
    border-radius:30px;
    background:linear-gradient(135deg,#0077b6,#2ca7ff);
    color:#fff;
    box-shadow:0 25px 60px rgba(13,110,253,.25);
}

/* Decorative Shapes */

.cta-wrapper::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    top:-160px;
    left:-120px;
}

.cta-wrapper::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    right:-120px;
    bottom:-120px;
}

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

.cta-content{
    position:relative;
    z-index:2;
    max-width:700px;
}

.cta-content span{
    display:inline-block;
    padding:8px 18px;
    border-radius:30px;
    background:rgba(255,255,255,.18);
    font-size:15px;
    font-weight:600;
    margin-bottom:20px;
}

.cta-content h2{
    font-size:48px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:20px;
}

.cta-content p{
    font-size:17px;
    line-height:1.8;
    color:rgba(255,255,255,.9);
}

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

.cta-btn{
    position:relative;
    z-index:2;
}

.cta-btn .btn-primary{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:18px 36px;
    border-radius:50px;
    background:#fff;
    color:#0d6efd;
    text-decoration:none;
    font-size:16px;
    font-weight:600;
    transition:all .4s ease;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.cta-btn .btn-primary i{
    font-size:18px;
    transition:.3s;
}

.cta-btn .btn-primary:hover{
    transform:translateY(-5px);
    background:#f8f9fa;
}

.cta-btn .btn-primary:hover i{
    transform:translateX(6px);
}

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

@media(max-width:991px){

.cta-wrapper{
    flex-direction:column;
    text-align:center;
    padding:60px 40px;
}

.cta-content h2{
    font-size:38px;
}

}

@media(max-width:768px){

.cta-section{
    padding:70px 0;
}

.cta-wrapper{
    padding:45px 25px;
}

.cta-content h2{
    font-size:30px;
}

.cta-content p{
    font-size:15px;
}

.cta-btn{
    width:100%;
}

.cta-btn .btn-primary{
    width:100%;
    justify-content:center;
}

}

@media(max-width:480px){

.cta-content h2{
    font-size:26px;
}

.cta-content span{
    font-size:14px;
    padding:7px 15px;
}

}
/*====================================================
            ABOUT SECTION
====================================================*/

.about{
    position:relative;
    padding:100px 0;
    background:#f7fbff;
    overflow:hidden;
}

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

.about-shape{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    opacity:.15;
}

.shape-1{
    width:300px;
    height:300px;
    background:#0d6efd;
    top:-120px;
    left:-120px;
}

.shape-2{
    width:220px;
    height:220px;
    background:#00c2ff;
    right:-80px;
    top:180px;
}

.shape-3{
    width:260px;
    height:260px;
    background:#6bd3ff;
    bottom:-120px;
    left:45%;
}

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

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

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

.about-image{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.about-bg-circle{
    position:absolute;
    width:470px;
    height:470px;
    border-radius:50%;
    background:linear-gradient(135deg,#0d6efd,#53b6ff);
    opacity:.08;
}

.about-blob{
    position:absolute;
    width:360px;
    height:360px;
    border-radius:40%;
    background:linear-gradient(135deg,#0d6efd,#00c2ff);
    opacity:.10;
    animation:rotateBlob 12s linear infinite;
}

@keyframes rotateBlob{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

.about-doctor{
    position:relative;
    max-width:460px;
    width:100%;
    z-index:2;
}

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

.about-card{
    position:absolute;
    background:#fff;
    border-radius:18px;
    padding:18px 20px;
    display:flex;
    align-items:center;
    gap:15px;
    box-shadow:0 20px 45px rgba(0,0,0,.08);
    animation:floatCard 4s ease-in-out infinite;
    z-index:5;
}

@keyframes floatCard{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
}

.experience-card{
    top:35px;
    left:-15px;
}

.emergency-card{
    top:170px;
    right:-20px;
    animation-delay:1s;
}

.rating-card{
    bottom:20px;
    left:15px;
    flex-direction:column;
    text-align:center;
    animation-delay:2s;
}

.card-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    background:linear-gradient(135deg,#0d6efd,#39a7ff);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:24px;
}

.rating-stars{
    color:#ffc107;
    margin-bottom:8px;
}

.rating-card h3{
    margin-bottom:5px;
}

/*==========================
FLOATING ICONS
==========================*/

.floating-medical,
.floating-plus{
    position:absolute;
    width:65px;
    height:65px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    background:linear-gradient(135deg,#0d6efd,#2ca7ff);
    box-shadow:0 15px 35px rgba(13,110,253,.25);
    animation:floatIcon 3s ease-in-out infinite;
}

.floating-medical{
    right:35px;
    bottom:80px;
}

.floating-plus{
    left:40px;
    top:120px;
    animation-delay:1s;
}

@keyframes floatIcon{
    50%{
        transform:translateY(-12px);
    }
}

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

.about-content h2{
    font-size:48px;
    line-height:1.2;
    font-weight:800;
    margin:20px 0;
    color:#111;
}

.about-content h2 span{
    display:block;
    color:#0d6efd;
}

.about-content p{
    color:#666;
    line-height:1.9;
    margin-bottom:20px;
}

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

.about-features{
    margin:35px 0;
}

.feature-box{
    display:flex;
    gap:18px;
    margin-bottom:22px;
    background:#fff;
    padding:22px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    transition:.35s;
}

.feature-box:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.feature-icon{
    width:55px;
    height:55px;
    border-radius:50%;
    background:linear-gradient(135deg,#0d6efd,#2ca7ff);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:22px;
}

.feature-box h4{
    margin-bottom:6px;
    color:#111;
}

.feature-box p{
    margin:0;
}

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

.about-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(135deg,#0d6efd,#2ca7ff);
    color:#fff;
    padding:16px 34px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}

.btn-primary:hover{
    transform:translateY(-5px);
}

.btn-secondary{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 30px;
    border-radius:50px;
    text-decoration:none;
    border:2px solid #0d6efd;
    color:#0d6efd;
    font-weight:600;
    transition:.35s;
}

.btn-secondary:hover{
    background:#E83035;
    color:#fff;
}

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

@media(max-width:1200px){

.about-wrapper{
    grid-template-columns:1fr;
    gap:60px;
}

}

@media(max-width:768px){

.about{
    padding:70px 0;
}

.about-content h2{
    font-size:34px;
}

.about-bg-circle{
    width:330px;
    height:330px;
}

.about-blob{
    width:260px;
    height:260px;
}

.about-doctor{
    max-width:320px;
}

.about-card{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    bottom:auto;
    margin-top:20px;
}

.about-image{
    flex-direction:column;
}

.about-buttons{
    flex-direction:column;
}

.btn-primary,
.btn-secondary{
    width:100%;
    justify-content:center;
}

}

@media(max-width:576px){

.about-content h2{
    font-size:28px;
}

.feature-box{
    padding:18px;
}

.feature-icon{
    width:50px;
    height:50px;
    font-size:20px;
}

}
/*==================================================
        MISSION & VISION SECTION
==================================================*/

.mission-vision{
    position:relative;
    padding:100px 0;
    background:#f7fbff;
    overflow:hidden;
}

.mission-vision::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    background:#0d6efd;
    opacity:.06;
    border-radius:50%;
    filter:blur(80px);
    top:-100px;
    left:-100px;
}

.mission-vision::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    background:#00b4ff;
    opacity:.06;
    border-radius:50%;
    filter:blur(80px);
    bottom:-120px;
    right:-80px;
}

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

.mission-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

/*==========================
LEFT COLUMN
==========================*/

.mission-column{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.info-card{
    background:#fff;
    border-radius:24px;
    padding:35px;
    display:flex;
    gap:25px;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    transition:.4s;
    position:relative;
    overflow:hidden;
}

.info-card::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(13,110,253,.05);
    top:-80px;
    right:-80px;
}

.info-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.info-icon{
    width:75px;
    height:75px;
    min-width:75px;
    border-radius:20px;
    background:linear-gradient(135deg,#0077b6,#2ca7ff);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
}

.info-content span{
    display:inline-block;
    color:#0d6efd;
    font-weight:600;
    margin-bottom:10px;
}

.info-content h3{
    font-size:26px;
    color:#111;
    line-height:1.35;
    margin-bottom:15px;
}

.info-content p{
    color:#666;
    line-height:1.8;
}

/*==========================
RIGHT COLUMN
==========================*/

.choose-column h2{
    font-size:46px;
    font-weight:800;
    line-height:1.2;
    margin:20px 0;
    color:#111;
}

.choose-column h2 span{
    display:block;
    color:#0d6efd;
}

.choose-column > p{
    color:#666;
    line-height:1.9;
    margin-bottom:35px;
}

/*==========================
FEATURE LIST
==========================*/

.choose-list{
    display:grid;
    gap:22px;
    margin-bottom:40px;
}

.choose-item{
    display:flex;
    gap:18px;
    background:#fff;
    padding:22px;
    border-radius:18px;
    transition:.35s;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.choose-item:hover{
    transform:translateX(8px);
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.choose-icon{
    width:60px;
    height:60px;
    min-width:60px;
    border-radius:16px;
    background:linear-gradient(135deg,#0077b6,#39a7ff);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

.choose-item h4{
    font-size:20px;
    margin-bottom:8px;
    color:#111;
}

.choose-item p{
    color:#666;
    line-height:1.7;
}

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

.about-action{
    margin-top:20px;
}

.about-action .btn-primary{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 34px;
    border-radius:50px;
    background:linear-gradient(135deg,#0d6efd,#2ca7ff);
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
    box-shadow:0 15px 35px rgba(13,110,253,.25);
}

.about-action .btn-primary:hover{
    transform:translateY(-5px);
}

.about-action .btn-primary i{
    transition:.3s;
}

.about-action .btn-primary:hover i{
    transform:translateX(6px);
}

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

@media(max-width:1200px){

.mission-wrapper{
    grid-template-columns:1fr;
    gap:60px;
}

}

@media(max-width:992px){

.choose-column h2{
    font-size:38px;
}

.info-card{
    padding:28px;
}

}

@media(max-width:768px){

.mission-vision{
    padding:70px 0;
}

.info-card{
    flex-direction:column;
    text-align:center;
    align-items:center;
}

.info-icon{
    margin-bottom:10px;
}

.choose-item{
    flex-direction:column;
    text-align:center;
    align-items:center;
}

.choose-column h2{
    font-size:32px;
}

.about-action .btn-primary{
    width:100%;
    justify-content:center;
}

}

@media(max-width:576px){

.choose-column h2{
    font-size:28px;
}

.info-content h3{
    font-size:22px;
}

.choose-item h4{
    font-size:18px;
}

.info-card,
.choose-item{
    padding:22px;
}

}
/*==================================================
        ACHIEVEMENT SECTION
==================================================*/

.achievement-section{
    position:relative;
    padding:100px 0;
    background:linear-gradient(180deg,#f8fbff,#eef7ff);
    overflow:hidden;
}

.achievement-section::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:#0d6efd;
    opacity:.05;
    filter:blur(90px);
    top:-120px;
    left:-100px;
}

.achievement-section::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:#00b4ff;
    opacity:.05;
    filter:blur(90px);
    right:-100px;
    bottom:-120px;
}

/*=========================
COUNTER SECTION
=========================*/

.counter-wrapper{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-bottom:70px;
}

.counter-card{
    background:#fff;
    border-radius:22px;
    padding:35px 25px;
    text-align:center;
    transition:.4s;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.counter-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.counter-icon{
    width:80px;
    height:80px;
    margin:auto auto 20px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:32px;
    color:#fff;
    background:linear-gradient(135deg,#0d6efd,#2ca7ff);
}

.counter-card h2{
    font-size:42px;
    font-weight:700;
    color:#0d6efd;
    margin-bottom:8px;
}

.counter-card p{
    color:#666;
    font-size:16px;
}

/*=========================
ACHIEVEMENT CARDS
=========================*/

.achievement-wrapper{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-bottom:70px;
}

.achievement-card{
    background:#fff;
    border-radius:22px;
    padding:35px;
    text-align:center;
    transition:.4s;
    box-shadow:0 12px 35px rgba(0,0,0,.06);
}

.achievement-card:hover{
    transform:translateY(-8px);
}

.achievement-icon{
    width:75px;
    height:75px;
    margin:auto auto 20px;
    border-radius:20px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
    color:#fff;
    background:linear-gradient(135deg,#0d6efd,#39a7ff);
}

.achievement-card h3{
    font-size:24px;
    margin-bottom:15px;
    color:#111;
}

.achievement-card p{
    color:#666;
    line-height:1.8;
}

/*=========================
TRUST BOX
=========================*/

.trust-box{
    background:#fff;
    border-radius:30px;
    padding:55px;
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:50px;
    align-items:center;
    box-shadow:0 15px 45px rgba(0,0,0,.07);
    position:relative;
}

.trust-left h2{
    font-size:46px;
    font-weight:800;
    line-height:1.2;
    margin:20px 0;
}

.trust-left h2 span{
    display:block;
    color:#0077b6;
}

.trust-left p{
    color:#666;
    line-height:1.8;
}

.trust-right{
    display:grid;
    gap:18px;
}

.trust-item{
    background:#f7fbff;
    border-radius:16px;
    padding:18px 20px;
    display:flex;
    align-items:center;
    gap:15px;
    font-weight:600;
    transition:.35s;
}

.trust-item:hover{
    background:#0d6efd;
    color:#fff;
}

.trust-item i{
    color:#0d6efd;
    font-size:18px;
}

.trust-item:hover i{
    color:#fff;
}

/*=========================
FLOATING INFO CARD
=========================*/

.floating-info-card{
    position:absolute;
    right:50px;
    bottom:40px;
    background:#fff;
    border-radius:18px;
    padding:18px 22px;
    display:flex;
    gap:15px;
    align-items:center;
    box-shadow:0 18px 40px rgba(0,0,0,.08);
    animation:floating 4s ease-in-out infinite;
}

@keyframes floating{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-12px);
    }
}

.floating-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    background:linear-gradient(135deg,#ffc107,#ff9800);
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:24px;
}

.floating-info-card h3{
    color:#111;
    margin-bottom:6px;
}

.floating-info-card p{
    color:#666;
    line-height:1.6;
}

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

@media(max-width:1200px){

.counter-wrapper{
    grid-template-columns:repeat(2,1fr);
}

.achievement-wrapper{
    grid-template-columns:1fr;
}

.trust-box{
    grid-template-columns:1fr;
}

.floating-info-card{
    position:relative;
    right:auto;
    bottom:auto;
    margin-top:40px;
}

}

@media(max-width:768px){

.achievement-section{
    padding:70px 0;
}

.counter-wrapper{
    grid-template-columns:1fr;
}

.counter-card h2{
    font-size:34px;
}

.trust-box{
    padding:35px 25px;
}

.trust-left h2{
    font-size:32px;
}

.floating-info-card{
    flex-direction:column;
    text-align:center;
}

}

@media(max-width:576px){

.achievement-card,
.counter-card{
    padding:25px;
}

.achievement-card h3{
    font-size:22px;
}

.trust-left h2{
    font-size:28px;
}

}
/*==================================================
        CONSULTATION CTA SECTION
==================================================*/

.consultation-cta{
    position:relative;
    padding:100px 0;
    background:linear-gradient(135deg,#f7fbff,#edf7ff);
    overflow:hidden;
}

/* Decorative Elements */

.cta-circle{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:.08;
}

.circle-one{
    width:300px;
    height:300px;
    background:#0d6efd;
    top:-120px;
    left:-120px;
}

.circle-two{
    width:220px;
    height:220px;
    background:#00b4ff;
    right:-80px;
    bottom:-80px;
}

.cta-plus{
    position:absolute;
    top:120px;
    right:10%;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#fff;
    color:#0d6efd;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    animation:floatIcon 4s ease-in-out infinite;
}

@keyframes floatIcon{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
}

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

.consultation-wrapper{
    position:relative;
    display:grid;
    grid-template-columns:1.4fr .9fr;
    gap:60px;
    align-items:center;
}

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

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

.cta-content h2{
    font-size:50px;
    font-weight:800;
    line-height:1.2;
    margin:20px 0;
    color:#111;
}

.cta-content h2 span{
    display:block;
    color:#0d6efd;
}

.cta-content p{
    color:#666;
    line-height:1.9;
    margin-bottom:35px;
    max-width:650px;
}

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

.cta-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-bottom:40px;
}

.cta-feature{
    background:#fff;
    padding:18px 20px;
    border-radius:15px;
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:600;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    transition:.35s;
}

.cta-feature:hover{
    transform:translateY(-5px);
}

.cta-feature i{
    color:#0d6efd;
    font-size:18px;
}

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

.cta-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:16px 34px;
    border-radius:50px;
    text-decoration:none;
    background:linear-gradient(135deg,#0d6efd,#2ca7ff);
    color:#fff;
    font-weight:600;
    transition:.35s;
    box-shadow:0 15px 35px rgba(13,110,253,.25);
}

.btn-primary:hover{
    transform:translateY(-5px);
}

.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 34px;
    border-radius:50px;
    text-decoration:none;
    border:2px solid #0d6efd;
    color:#0d6efd;
    font-weight:600;
    transition:.35s;
}

.btn-secondary:hover{
    background:#E83035;
    color:#fff;
}

/*==========================
RIGHT CONSULTATION BOX
==========================*/

.consultation-box{
    background:#fff;
    border-radius:28px;
    padding:35px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    position:relative;
}

.consultation-header{
    display:flex;
    align-items:center;
    gap:18px;
    padding-bottom:25px;
    border-bottom:1px solid #eee;
}

.consultation-icon{
    width:70px;
    height:70px;
    border-radius:20px;
    background:linear-gradient(135deg,#0d6efd,#2ca7ff);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
}

.consultation-header h3{
    font-size:24px;
    margin-bottom:6px;
}

.consultation-header span{
    color:#0d6efd;
    font-weight:600;
}

.consultation-info{
    margin:30px 0;
}

.info-item{
    display:flex;
    gap:18px;
    align-items:flex-start;
    padding:18px 0;
    border-bottom:1px solid #eee;
}

.info-item:last-child{
    border:none;
}

.info-item i{
    width:55px;
    height:55px;
    border-radius:50%;
    background:#eef6ff;
    color:#0d6efd;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.info-item small{
    display:block;
    color:#888;
    margin-bottom:6px;
}

.info-item h4{
    color:#111;
    font-size:18px;
}

.full-width{
    width:100%;
}

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

@media(max-width:1200px){

.consultation-wrapper{
    grid-template-columns:1fr;
}

}

@media(max-width:992px){

.cta-content h2{
    font-size:40px;
}

.cta-features{
    grid-template-columns:1fr;
}

}

@media(max-width:768px){

.consultation-cta{
    padding:70px 0;
}

.cta-content h2{
    font-size:32px;
}

.consultation-box{
    padding:25px;
}

.cta-buttons{
    flex-direction:column;
}

.btn-primary,
.btn-secondary{
    width:100%;
}

}

@media(max-width:576px){

.consultation-header{
    flex-direction:column;
    text-align:center;
}

.info-item{
    flex-direction:column;
    text-align:center;
    align-items:center;
}

.cta-content h2{
    font-size:28px;
}

.cta-plus{
    display:none;
}

}
/*=====================================================
                DOCTORS SECTION
=====================================================*/

.doctors{
    position:relative;
    padding:100px 0;
    background:#f8fbff;
    overflow:hidden;
}

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

.doctor-shape{
    position:absolute;
    border-radius:50%;
    z-index:0;
    opacity:.18;
}

.doctor-shape.shape-1{
    width:280px;
    height:280px;
    background:#0077b6;
    top:-100px;
    left:-100px;
}

.doctor-shape.shape-2{
    width:220px;
    height:220px;
    background:#2d7ff9;
    right:-80px;
    top:150px;
}

.doctor-shape.shape-3{
    width:180px;
    height:180px;
    background:#ffb703;
    bottom:-60px;
    left:50%;
    transform:translateX(-50%);
    opacity:.08;
}

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


/*==============================
        SECTION HEADING
==============================*/

.section-heading{
    text-align:center;
    max-width:760px;
    margin:auto;
    margin-bottom:60px;
}

.section-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#e9faf7;
    color:#0077b6;
    padding:10px 22px;
    border-radius:50px;
    font-weight:600;
    margin-bottom:20px;
}

.section-heading h2{
    font-size:46px;
    color:#0d1b2a;
    margin-bottom:18px;
    line-height:1.2;
}

.section-heading h2 span{
    color:#0077b6;
}

.section-heading p{
    color:#667085;
    line-height:1.8;
}


/*==============================
        DOCTOR GRID
==============================*/

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


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

.doctor-card{
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    transition:.4s;
    box-shadow:0 15px 45px rgba(0,0,0,.08);
    position:relative;
}

.doctor-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 55px rgba(0,0,0,.12);
}


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

.doctor-image{
    position:relative;
    overflow:hidden;
    background:#eef8ff;
}

.doctor-image img{
    width:100%;
    display:block;
    transition:.5s;
}

.doctor-card:hover .doctor-image img{
    transform:scale(1.08);
}


/*==============================
        OVERLAY
==============================*/

.doctor-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
    rgba(0,0,0,.65),
    rgba(0,0,0,.05));
    display:flex;
    align-items:flex-end;
    justify-content:center;
    opacity:0;
    transition:.4s;
}

.doctor-card:hover .doctor-overlay{
    opacity:1;
}


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

.doctor-social{
    display:flex;
    gap:12px;
    margin-bottom:25px;
}

.doctor-social a{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#fff;
    color:#0077b6;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}

.doctor-social a:hover{
    background:#0077b6;
    color:#fff;
}


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

.doctor-badge{
    position:absolute;
    top:18px;
    left:18px;
    background:#0077b6;
    color:#fff;
    padding:8px 18px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}


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

.doctor-content{
    padding:28px;
}

.doctor-content h3{
    font-size:24px;
    color:#0d1b2a;
    margin-bottom:8px;
}

.doctor-content span{
    color:#0077b6;
    font-weight:600;
    display:block;
    margin-bottom:15px;
}

.doctor-content p{
    color:#667085;
    line-height:1.7;
    margin-bottom:25px;
}


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

.doctor-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.doctor-rating{
    display:flex;
    align-items:center;
    gap:8px;
}

.doctor-rating i{
    color:#ffc107;
}

.doctor-rating span{
    color:#0d1b2a;
    margin:0;
}


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

.doctor-btn{
    padding:11px 20px;
    background:#0077b6;
    color:#fff;
    text-decoration:none;
    border-radius:30px;
    font-size:14px;
    transition:.3s;
}

.doctor-btn:hover{
    background:#0d6efd;
}


/*==============================
        BOTTOM CTA
==============================*/

.doctor-bottom{
    text-align:center;
    margin-top:60px;
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 35px;
    background:#0077b6;
    color:#fff;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.btn-primary:hover{
    background:#E83035 !important;
    transform:translateY(-3px);
}


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

.doctor-card{
    animation:doctorFade .8s ease both;
}

@keyframes doctorFade{

    from{
        opacity:0;
        transform:translateY(50px);
    }

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

}


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

@media(max-width:1200px){

.doctor-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.doctors{
padding:70px 0;
}

.section-heading h2{
font-size:34px;
}

.doctor-grid{
grid-template-columns:1fr;
}

.doctor-content{
padding:22px;
}

}

@media(max-width:480px){

.section-heading h2{
font-size:28px;
}

.doctor-content h3{
font-size:22px;
}

.doctor-btn{
padding:10px 16px;
font-size:13px;
}

.btn-primary{
width:100%;
justify-content:center;
}

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

.faq{
    position:relative;
    padding:100px 0;
    background:#f8fbff;
    overflow:hidden;
}

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

.faq-shape{
    position:absolute;
    border-radius:50%;
    z-index:0;
    opacity:.15;
}

.faq-shape.shape-1{
    width:320px;
    height:320px;
    background:#0077b6;
    top:-120px;
    left:-120px;
}

.faq-shape.shape-2{
    width:250px;
    height:250px;
    background:#2d7ff9;
    right:-80px;
    bottom:-80px;
}

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

/*==============================
        WRAPPER
==============================*/

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

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

.faq-content .section-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#e8faf6;
    color:#0077b6;
    padding:10px 22px;
    border-radius:50px;
    font-size:15px;
    font-weight:600;
    margin-bottom:20px;
}

.faq-content h2{
    font-size:46px;
    color:#0d1b2a;
    line-height:1.2;
    margin-bottom:20px;
}

.faq-content h2 span{
    color:#0077b6;
}

.faq-content p{
    color:#667085;
    line-height:1.8;
    margin-bottom:35px;
}

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

.faq-image img{
    max-width:100%;
    width:420px;
    animation:faqFloat 5s ease-in-out infinite;
}

@keyframes faqFloat{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

/*==============================
        FAQ LIST
==============================*/

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

/*==============================
        FAQ ITEM
==============================*/

.faq-item{
    background:#ffffff;
    border-radius:20px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    overflow:hidden;
    transition:.3s;
}

.faq-item:hover{
    transform:translateY(-5px);
}

.faq-item.active{
    border-left:5px solid #0077b6;
}

/*==============================
        QUESTION
==============================*/

.faq-question{
    width:100%;
    padding:22px 28px;
    background:none;
    border:none;
    outline:none;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:18px;
    font-weight:600;
    color:#0d1b2a;
    transition:.3s;
}

.faq-question:hover{
    color:#0077b6;
}

.faq-question i{
    width:38px;
    height:38px;
    background:#e8faf6;
    color:#0077b6;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}

.faq-item.active .faq-question i{
    transform:rotate(45deg);
    background:#0077b6;
    color:#fff;
}

/*==============================
        ANSWER
==============================*/

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
}

.faq-item.active .faq-answer{
    max-height:200px;
}

.faq-answer p{
    padding:0 28px 25px;
    color:#667085;
    line-height:1.8;
}

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

@media(max-width:992px){

.faq-wrapper{
    grid-template-columns:1fr;
    gap:40px;
}

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

.faq-image img{
    width:320px;
}

}

@media(max-width:768px){

.faq{
    padding:70px 0;
}

.faq-content h2{
    font-size:34px;
}

.faq-question{
    font-size:16px;
    padding:18px 20px;
}

.faq-answer p{
    padding:0 20px 20px;
}

}

@media(max-width:480px){

.faq-content h2{
    font-size:28px;
}

.faq-image img{
    width:260px;
}

.faq-question{
    font-size:15px;
}

.faq-question i{
    width:32px;
    height:32px;
}

}
/*=====================================================
                EMERGENCY CTA SECTION
=====================================================*/

.emergency-cta{
    position:relative;
    padding:70px 0;
    background:linear-gradient(135deg,#0077b6,#0d6efd);
    overflow:hidden;
}

/* Decorative Background */

.emergency-cta::before{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    top:-120px;
    left:-120px;
}

.emergency-cta::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    bottom:-100px;
    right:-80px;
}

.emergency-cta .container{
    position:relative;
    z-index:2;
}

/*==============================
        WRAPPER
==============================*/

.emergency-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.15);
    border-radius:30px;
    padding:40px 50px;
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

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

.emergency-left{
    display:flex;
    align-items:center;
    gap:25px;
}

.emergency-icon{
    width:90px;
    height:90px;
    background:#ffffff;
    color:#0077b6;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:38px;
    flex-shrink:0;
    animation:pulseEmergency 2s infinite;
}

@keyframes pulseEmergency{

    0%{
        box-shadow:0 0 0 0 rgba(255,255,255,.5);
    }

    70%{
        box-shadow:0 0 0 18px rgba(255,255,255,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(255,255,255,0);
    }

}

.emergency-left h2{
    color:#ffffff;
    font-size:38px;
    margin-bottom:10px;
    line-height:1.2;
}

.emergency-left p{
    color:#edf6ff;
    font-size:17px;
    line-height:1.8;
}

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

.emergency-right .btn-primary{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:18px 36px;
    background:#ffffff;
    color:#0077b6;
    text-decoration:none;
    font-weight:700;
    font-size:16px;
    border-radius:50px;
    transition:.35s ease;
    box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.emergency-right .btn-primary:hover{
    background:#0d1b2a;
    color:#ffffff;
    transform:translateY(-5px);
}

.emergency-right .btn-primary i{
    font-size:18px;
}

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

@media(max-width:992px){

    .emergency-wrapper{
        flex-direction:column;
        text-align:center;
        padding:35px;
    }

    .emergency-left{
        flex-direction:column;
    }

    .emergency-left h2{
        font-size:32px;
    }

}

@media(max-width:768px){

    .emergency-cta{
        padding:50px 0;
    }

    .emergency-wrapper{
        padding:30px 25px;
    }

    .emergency-icon{
        width:75px;
        height:75px;
        font-size:30px;
    }

    .emergency-left h2{
        font-size:28px;
    }

    .emergency-left p{
        font-size:15px;
    }

    .emergency-right .btn-primary{
        width:100%;
        justify-content:center;
    }

}

@media(max-width:480px){

    .emergency-left h2{
        font-size:24px;
    }

    .emergency-wrapper{
        border-radius:20px;
    }

    .emergency-right .btn-primary{
        padding:16px 25px;
        font-size:15px;
    }

}
/*=====================================================
                NEWSLETTER SECTION
=====================================================*/

.newsletter{
    position:relative;
    padding:90px 0;
    background:#f7fbff;
    overflow:hidden;
}

/* Background Decorative Shapes */

.newsletter::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    background:rgba(0,191,166,.08);
    border-radius:50%;
    top:-120px;
    left:-120px;
}

.newsletter::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    background:rgba(45,127,249,.08);
    border-radius:50%;
    bottom:-100px;
    right:-80px;
}

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

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

.newsletter-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:50px;
    padding:60px;
    border-radius:30px;
    background:linear-gradient(135deg,#0077b6,#0d6efd);
    box-shadow:0 25px 60px rgba(0,0,0,.15);
    overflow:hidden;
    position:relative;
}

/* Glass Effect */

.newsletter-box::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    top:-60px;
    right:120px;
}

.newsletter-box::after{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    background:rgba(255,255,255,.06);
    border-radius:50%;
    bottom:-40px;
    left:80px;
}

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

.newsletter-content{
    max-width:520px;
    position:relative;
    z-index:2;
}

.newsletter-content span{
    display:inline-block;
    background:rgba(255,255,255,.15);
    color:#fff;
    padding:8px 18px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    margin-bottom:18px;
}

.newsletter-content h2{
    color:#fff;
    font-size:42px;
    line-height:1.2;
    margin-bottom:18px;
}

.newsletter-content p{
    color:#eef6ff;
    line-height:1.8;
    font-size:16px;
}

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

.newsletter-form{
    display:flex;
    align-items:center;
    background:#fff;
    border-radius:60px;
    padding:8px;
    min-width:470px;
    position:relative;
    z-index:2;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.newsletter-form input{
    flex:1;
    border:none;
    outline:none;
    background:transparent;
    padding:18px 22px;
    font-size:15px;
    color:#333;
}

.newsletter-form input::placeholder{
    color:#999;
}

.newsletter-form button{
    border:none;
    outline:none;
    background:#0077b6;
    color:#fff;
    padding:16px 28px;
    border-radius:50px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:10px;
    transition:.35s;
}

.newsletter-form button:hover{
    background:#0d1b2a;
    transform:translateY(-2px);
}

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

@media(max-width:992px){

    .newsletter-box{
        flex-direction:column;
        text-align:center;
        padding:45px;
    }

    .newsletter-form{
        min-width:100%;
        width:100%;
    }

}

@media(max-width:768px){

    .newsletter{
        padding:70px 0;
    }

    .newsletter-box{
        padding:35px 25px;
    }

    .newsletter-content h2{
        font-size:32px;
    }

    .newsletter-form{
        flex-direction:column;
        background:transparent;
        box-shadow:none;
        padding:0;
        gap:15px;
    }

    .newsletter-form input{
        width:100%;
        background:#fff;
        border-radius:50px;
    }

    .newsletter-form button{
        width:100%;
        justify-content:center;
    }

}

@media(max-width:480px){

    .newsletter-content h2{
        font-size:26px;
    }

    .newsletter-content p{
        font-size:14px;
    }

    .newsletter-form input{
        padding:16px 18px;
    }

}
/*=====================================================
                PREMIUM CTA SECTION
=====================================================*/

.premium-cta{
    position:relative;
    padding:100px 0;
    background:linear-gradient(135deg,#0d6efd,#0077b6);
    overflow:hidden;
}

/* Decorative Background */

.premium-cta::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    top:-120px;
    left:-120px;
}

.premium-cta::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    background:rgba(255,255,255,.06);
    border-radius:50%;
    right:-80px;
    bottom:-80px;
}

.premium-cta .container{
    position:relative;
    z-index:2;
}

/*==============================
        WRAPPER
==============================*/

.premium-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:60px;
    border-radius:35px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 25px 60px rgba(0,0,0,.18);
}

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

.premium-content{
    max-width:650px;
}

.premium-content span{
    display:inline-block;
    padding:8px 20px;
    background:rgba(255,255,255,.15);
    color:#fff;
    border-radius:40px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}

.premium-content h2{
    color:#fff;
    font-size:48px;
    line-height:1.2;
    margin-bottom:20px;
}

.premium-content p{
    color:#eef7ff;
    font-size:17px;
    line-height:1.8;
}

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

.premium-button{
    flex-shrink:0;
}

.premium-button .btn-primary{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:18px 36px;
    background:#ffffff;
    color:#0077b6;
    text-decoration:none;
    border-radius:50px;
    font-size:16px;
    font-weight:700;
    transition:.35s ease;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.premium-button .btn-primary:hover{
    background:#0d1b2a;
    color:#fff;
    transform:translateY(-5px);
}

.premium-button .btn-primary i{
    font-size:18px;
    transition:.3s;
}

.premium-button .btn-primary:hover i{
    transform:translateX(5px);
}

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

@media(max-width:992px){

    .premium-wrapper{
        flex-direction:column;
        text-align:center;
        padding:45px;
    }

    .premium-content h2{
        font-size:38px;
    }

}

@media(max-width:768px){

    .premium-cta{
        padding:70px 0;
    }

    .premium-wrapper{
        padding:35px 25px;
        border-radius:25px;
    }

    .premium-content h2{
        font-size:30px;
    }

    .premium-content p{
        font-size:15px;
    }

    .premium-button{
        width:100%;
    }

    .premium-button .btn-primary{
        width:100%;
        justify-content:center;
    }

}

@media(max-width:480px){

    .premium-content h2{
        font-size:26px;
    }

    .premium-content span{
        font-size:13px;
    }

    .premium-button .btn-primary{
        padding:16px 25px;
        font-size:15px;
    }

}
/*=====================================================
                FOOTER CTA SECTION
=====================================================*/

.footer-cta{
    position:relative;
    padding:90px 0;
    background:#f8fbff;
    overflow:hidden;
}

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

.footer-cta::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(0,191,166,.08);
    top:-120px;
    left:-120px;
}

.footer-cta::after{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    border-radius:50%;
    background:rgba(13,110,253,.08);
    right:-100px;
    bottom:-100px;
}

.footer-cta .container{
    position:relative;
    z-index:2;
}

/*==============================
        WRAPPER
==============================*/

.footer-cta-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    padding:55px 60px;
    background:linear-gradient(135deg,#0077b6,#0d6efd);
    border-radius:30px;
    box-shadow:0 20px 50px rgba(0,0,0,.15);
    overflow:hidden;
    position:relative;
}

.footer-cta-wrapper::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    top:-60px;
    right:100px;
}

.footer-cta-wrapper::after{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    background:rgba(255,255,255,.06);
    border-radius:50%;
    bottom:-40px;
    left:80px;
}

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

.footer-cta-content{
    max-width:650px;
    position:relative;
    z-index:2;
}

.footer-cta-content .section-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 20px;
    background:rgba(255,255,255,.15);
    color:#fff;
    border-radius:40px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}

.footer-cta-content .section-tag i{
    color:#fff;
}

.footer-cta-content h2{
    color:#fff;
    font-size:46px;
    line-height:1.2;
    margin-bottom:18px;
}

.footer-cta-content p{
    color:#eef7ff;
    font-size:16px;
    line-height:1.8;
}

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

.footer-cta-btn{
    position:relative;
    z-index:2;
    flex-shrink:0;
}

.footer-cta-btn .btn-primary{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:18px 35px;
    background:#fff;
    color:#0077b6;
    text-decoration:none;
    border-radius:50px;
    font-weight:700;
    font-size:16px;
    transition:.35s ease;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.footer-cta-btn .btn-primary:hover{
    background:#0d1b2a;
    color:#fff;
    transform:translateY(-5px);
}

.footer-cta-btn .btn-primary i{
    transition:.3s;
}

.footer-cta-btn .btn-primary:hover i{
    transform:translateX(5px);
}

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

@media(max-width:992px){

    .footer-cta-wrapper{
        flex-direction:column;
        text-align:center;
        padding:45px;
    }

    .footer-cta-content h2{
        font-size:36px;
    }

}

@media(max-width:768px){

    .footer-cta{
        padding:70px 0;
    }

    .footer-cta-wrapper{
        padding:35px 25px;
        border-radius:25px;
    }

    .footer-cta-content h2{
        font-size:30px;
    }

    .footer-cta-content p{
        font-size:15px;
    }

    .footer-cta-btn{
        width:100%;
    }

    .footer-cta-btn .btn-primary{
        width:100%;
        justify-content:center;
    }

}

@media(max-width:480px){

    .footer-cta-content h2{
        font-size:26px;
    }

    .footer-cta-content .section-tag{
        font-size:13px;
        padding:8px 16px;
    }

    .footer-cta-btn .btn-primary{
        padding:16px 24px;
        font-size:15px;
    }

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

.testimonials{
    position:relative;
    padding:100px 0;
    background:#f8fbff;
    overflow:hidden;
}

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

.testimonial-shape{
    position:absolute;
    border-radius:50%;
    z-index:0;
}

.testimonial-shape.shape-1{
    width:320px;
    height:320px;
    background:rgba(0,191,166,.08);
    top:-120px;
    left:-120px;
}

.testimonial-shape.shape-2{
    width:250px;
    height:250px;
    background:rgba(13,110,253,.08);
    bottom:-80px;
    right:-80px;
}

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

/*==========================
        SECTION TITLE
==========================*/

.section-heading{
    text-align:center;
    max-width:720px;
    margin:0 auto 60px;
}

.section-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 22px;
    border-radius:40px;
    background:#e9faf7;
    color:#0077b6;
    font-weight:600;
    margin-bottom:18px;
}

.section-heading h2{
    font-size:46px;
    color:#0d1b2a;
    line-height:1.2;
    margin-bottom:20px;
}

.section-heading h2 span{
    color:#0077b6;
}

.section-heading p{
    color:#667085;
    line-height:1.8;
}

/*==========================
        SWIPER
==========================*/

.testimonial-slider{
    padding:20px 10px 70px;
}

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

.testimonial-card{
    position:relative;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px);
    border-radius:24px;
    padding:35px;
    height:100%;
    border:1px solid rgba(0,191,166,.08);
    box-shadow:0 20px 45px rgba(0,0,0,.08);
    transition:.35s;
}

.testimonial-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 55px rgba(0,0,0,.12);
}

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

.quote-icon{
    position:absolute;
    right:25px;
    top:25px;
    width:55px;
    height:55px;
    border-radius:50%;
    background:#e8faf6;
    color:#0077b6;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

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

.rating{
    display:flex;
    gap:5px;
    margin-bottom:20px;
}

.rating i{
    color:#ffc107;
    font-size:15px;
}

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

.testimonial-card p{
    color:#667085;
    line-height:1.8;
    margin-bottom:30px;
}

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

.patient{
    display:flex;
    align-items:center;
    gap:15px;
}

.patient img{
    width:65px;
    height:65px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #e8faf6;
}

.patient h4{
    margin:0 0 6px;
    color:#0d1b2a;
    font-size:18px;
}

.patient span{
    color:#0077b6;
    font-size:14px;
}

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

.swiper-button-next,
.swiper-button-prev{
    width:48px;
    height:48px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.1);
}

.swiper-button-next::after,
.swiper-button-prev::after{
    font-size:18px;
    color:#0077b6;
    font-weight:700;
}

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

.swiper-pagination-bullet{
    width:10px;
    height:10px;
    background:#0077b6;
    opacity:.3;
}

.swiper-pagination-bullet-active{
    width:24px;
    border-radius:20px;
    opacity:1;
}

/*==========================
        REVIEW COUNTER
==========================*/

.review-counter{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-top:60px;
}

.review-box{
    background:#fff;
    border-radius:24px;
    text-align:center;
    padding:35px 25px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.review-box:hover{
    transform:translateY(-8px);
}

.review-box h2{
    font-size:42px;
    margin-bottom:10px;
    color:#0d1b2a;
}

.review-box h2 span{
    color:#0077b6;
}

.review-box p{
    color:#667085;
    margin:0;
}

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

@media(max-width:991px){

.review-counter{
    grid-template-columns:repeat(2,1fr);
}

.section-heading h2{
    font-size:36px;
}

}

@media(max-width:768px){

.testimonials{
    padding:70px 0;
}

.review-counter{
    grid-template-columns:1fr;
}

.testimonial-card{
    padding:28px;
}

.swiper-button-next,
.swiper-button-prev{
    display:none;
}

}

@media(max-width:480px){

.section-heading h2{
    font-size:28px;
}

.patient img{
    width:55px;
    height:55px;
}

.review-box h2{
    font-size:32px;
}

}
/*=====================================================
            APPOINTMENT BANNER SECTION
=====================================================*/

.appointment-banner{
    position:relative;
    padding:90px 0;
    background:#f8fbff;
    overflow:hidden;
}

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

.appointment-banner::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    background:rgba(0,191,166,.08);
    border-radius:50%;
    top:-140px;
    left:-140px;
}

.appointment-banner::after{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    background:rgba(13,110,253,.08);
    border-radius:50%;
    right:-100px;
    bottom:-100px;
}

.appointment-banner .container{
    position:relative;
    z-index:2;
}

/*==============================
        WRAPPER
==============================*/

.banner-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    padding:50px 60px;
    border-radius:30px;
    background:linear-gradient(135deg,#0077b6,#0d6efd);
    box-shadow:0 20px 50px rgba(0,0,0,.15);
    overflow:hidden;
    position:relative;
}

.banner-wrapper::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    top:-60px;
    right:80px;
}

.banner-wrapper::after{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    bottom:-40px;
    left:60px;
}

/*==============================
        LEFT
==============================*/

.banner-left{
    display:flex;
    align-items:center;
    gap:25px;
    position:relative;
    z-index:2;
}

.banner-icon{
    width:85px;
    height:85px;
    border-radius:50%;
    background:#ffffff;
    color:#0077b6;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:36px;
    flex-shrink:0;
    animation:pulseBanner 2s infinite;
}

@keyframes pulseBanner{

    0%{
        box-shadow:0 0 0 0 rgba(255,255,255,.5);
    }

    70%{
        box-shadow:0 0 0 18px rgba(255,255,255,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(255,255,255,0);
    }

}

.banner-left h2{
    color:#fff;
    font-size:42px;
    line-height:1.2;
    margin-bottom:12px;
}

.banner-left p{
    color:#eef7ff;
    font-size:16px;
    line-height:1.8;
}

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

.banner-right{
    position:relative;
    z-index:2;
}

.banner-right .btn-primary{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:18px 35px;
    border-radius:50px;
    background:#fff;
    color:#0077b6;
    text-decoration:none;
    font-size:16px;
    font-weight:700;
    transition:.35s;
    box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.banner-right .btn-primary:hover{
    background:#0d1b2a;
    color:#fff;
    transform:translateY(-5px);
}

.banner-right .btn-primary i{
    transition:.3s;
}

.banner-right .btn-primary:hover i{
    transform:translateX(5px);
}

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

@media(max-width:992px){

.banner-wrapper{
    flex-direction:column;
    text-align:center;
    padding:45px;
}

.banner-left{
    flex-direction:column;
}

.banner-left h2{
    font-size:34px;
}

}

@media(max-width:768px){

.appointment-banner{
    padding:70px 0;
}

.banner-wrapper{
    padding:35px 25px;
}

.banner-icon{
    width:70px;
    height:70px;
    font-size:30px;
}

.banner-left h2{
    font-size:28px;
}

.banner-left p{
    font-size:15px;
}

.banner-right{
    width:100%;
}

.banner-right .btn-primary{
    width:100%;
    justify-content:center;
}

}

@media(max-width:480px){

.banner-left h2{
    font-size:24px;
}

.banner-right .btn-primary{
    padding:16px 24px;
    font-size:15px;
}

}
/*=====================================================
                PREMIUM HERO SECTION
=====================================================*/

.hero{
    position:relative;
    padding:90px 0 80px 0;
    background:#f8fbff;
    overflow:hidden;
}


/* Background */

.hero::before{

    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:rgba(0,191,166,.08);
    border-radius:50%;
    top:-180px;
    left:-180px;

}


.hero::after{

    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(13,110,253,.08);
    border-radius:50%;
    right:-150px;
    bottom:100px;

}


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


/*==============================
        HERO WRAPPER
==============================*/


.hero-wrapper{

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:70px;

}


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


.hero-tag{

    display:inline-flex;
    align-items:center;
    gap:10px;

    background:#e8faf6;
    color:#0077b6;

    padding:10px 22px;

    border-radius:50px;

    font-weight:600;
    font-size:14px;

    margin-bottom:25px;

}


.hero-title{

    font-size:62px;
    line-height:1.15;

    color:#0d1b2a;

    margin-bottom:25px;

    font-weight:800;

}


.hero-title span{

    color:#0077b6;

}



.hero-text{

    color:#667085;

    font-size:17px;

    line-height:1.8;

    max-width:600px;

    margin-bottom:35px;

}


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


.hero-buttons{

    display:flex;
    align-items:center;
    gap:20px;

}


.btn-primary{

    display:inline-flex;
    align-items:center;
    gap:10px;

    background:#0077b6;
    color:#fff;

    padding:16px 32px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}


.btn-primary:hover{

    background:#0d6efd;
    transform:translateY(-4px);

}



.btn-secondary{

    display:flex;
    align-items:center;
    gap:10px;

    color:#0d1b2a;

    text-decoration:none;

    font-weight:600;

}


.btn-secondary i{

    font-size:20px;
    color:#0077b6;

}



/*==============================
        HERO STATS
==============================*/


.hero-stats{

    display:flex;

    gap:20px;

    margin-top:45px;

}


.stat-box{

    background:#fff;

    padding:20px 25px;

    border-radius:18px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

}


.stat-box h2{

    font-size:32px;

    color:#0077b6;

    margin:0;

}


.stat-box p{

    color:#667085;

    margin:5px 0 0;

    font-size:14px;

}



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


.hero-image{

    position:relative;

    min-height:650px;

}



.hero-circle{

    position:absolute;

    width:520px;

    height:520px;

    background:#e8faf6;

    border-radius:50%;

    top:40px;

    right:0;

}



.hero-blob{

    position:absolute;

    width:430px;

    height:500px;

    background:#0077b6;

    opacity:.12;

    border-radius:
    60% 40% 50% 50%;

    top:70px;

    right:40px;

}



.hero-dots{

    position:absolute;

    width:120px;

    height:120px;

    background-image:
    radial-gradient(#0077b6 2px,transparent 2px);

    background-size:18px 18px;

    top:80px;

    right:20px;

}



/* Doctor Image */

.doctor-image{

    position:absolute;

    bottom:0;

    right:80px;

    width:520px;

    z-index:3;

}



/*==============================
        FLOATING ICONS
==============================*/


.floating-icon{

    position:absolute;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#0077b6;

    font-size:25px;

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

    animation:floating 4s infinite;

    z-index:4;

}



.icon1{

    top:120px;
    left:50px;

}


.icon2{

    top:220px;
    right:20px;

}


.icon3{

    bottom:160px;
    left:20px;

}


.icon4{

    bottom:100px;
    right:50px;

}



@keyframes floating{

    50%{

        transform:translateY(-15px);

    }

}



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


.appointment-card,
.patient-card,
.experience-card{

    position:absolute;

    background:#fff;

    border-radius:20px;

    padding:18px;

    display:flex;

    align-items:center;

    gap:15px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.12);

    z-index:5;

}



.appointment-card{

    top:200px;

    left:20px;

}



.appointment-icon{

    width:45px;

    height:45px;

    border-radius:12px;

    background:#e8faf6;

    color:#0077b6;

    display:flex;

    align-items:center;

    justify-content:center;

}



.appointment-card h4,
.patient-card h4,
.experience-card h3{

    margin:0;

    color:#0d1b2a;

}



.appointment-card p{

    margin:3px 0;

    color:#667085;

    font-size:13px;

}



/* Patient Card */


.patient-card{

    bottom:80px;

    left:30px;

}



.patient-images{

    display:flex;

}


.patient-images img{

    width:40px;

    height:40px;

    border-radius:50%;

    border:3px solid #fff;

    margin-left:-10px;

}


.patient-info span{

    font-size:12px;

    color:#667085;

}



/* Experience */


.experience-card{

    right:20px;

    bottom:120px;

}


.experience-card i{

    font-size:35px;

    color:#ffc107;

}



/*==============================
    SEARCH CARD
==============================*/


.hero-search-card{

    margin-top:70px;

    background:#fff;

    padding:25px;

    border-radius:25px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.1);

}



.search-box{

    display:grid;

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

    gap:20px;

}



.input-group{

    display:flex;

    align-items:center;

    gap:10px;

    border:1px solid #e5e7eb;

    padding:15px 18px;

    border-radius:15px;

}


.input-group i{

    color:#0077b6;

}



.input-group input,
.input-group select{

    border:0;

    outline:0;

    width:100%;

}



.search-btn-main{

    border:0;

    background:#0077b6;

    color:#fff;

    border-radius:15px;

    padding:0 30px;

    font-weight:600;

}



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


.scroll-down{

    text-align:center;

    margin-top:40px;

}


.mouse{

    width:28px;

    height:45px;

    border:2px solid #0077b6;

    border-radius:20px;

    margin:10px auto;

}


.mouse span{

    display:block;

    width:5px;

    height:10px;

    background:#0077b6;

    border-radius:5px;

    margin:8px auto;

    animation:scroll 1.5s infinite;

}


@keyframes scroll{

    50%{
        transform:translateY(12px);
    }

}



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


@media(max-width:1100px){

.hero-wrapper{

grid-template-columns:1fr;

}


.hero-content{

text-align:center;

}


.hero-text{

margin:auto;

}


.hero-buttons,
.hero-stats{

justify-content:center;

}


.hero-image{

margin-top:40px;

}

}


@media(max-width:768px){

.hero{

padding:100px 0 60px;

}


.hero-title{

font-size:40px;

}


.hero-image{

min-height:500px;

}


.hero-circle{

width:350px;
height:350px;

}


.doctor-image{

width:350px;
right:0;

}


.search-box{

grid-template-columns:1fr;

}


.hero-stats{

flex-wrap:wrap;

}


.appointment-card,
.patient-card,
.experience-card{

transform:scale(.85);

}

}


@media(max-width:480px){

.hero-title{

font-size:32px;

}


.hero-buttons{

flex-direction:column;

}


.hero-image{

min-height:420px;

}


.doctor-image{

width:280px;

}

}/*=====================================================
                ABOUT SECTION
=====================================================*/

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


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

.about-shape{
    position:absolute;
    border-radius:50%;
}

.about-shape.shape-1{

    width:300px;
    height:300px;
    background:rgba(0,191,166,.08);
    top:-100px;
    left:-120px;

}


.about-shape.shape-2{

    width:220px;
    height:220px;
    background:rgba(13,110,253,.08);
    right:-80px;
    bottom:80px;

}


.about-shape.shape-3{

    width:80px;
    height:80px;
    border:15px solid rgba(0,191,166,.15);
    right:20%;
    top:120px;

}



.about .container{

    position:relative;
    z-index:2;

}



/*==============================
        ABOUT WRAPPER
==============================*/

.about-wrapper{

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:80px;

}



/*=====================================================
                ABOUT IMAGE
=====================================================*/


.about-image{

    position:relative;
    height:650px;

}



.about-bg-circle{

    position:absolute;

    width:500px;
    height:500px;

    background:#e8faf6;

    border-radius:50%;

    top:50px;
    left:20px;

}



.about-blob{

    position:absolute;

    width:430px;
    height:520px;

    background:#0077b6;

    opacity:.12;

    border-radius:
    55% 45% 50% 40%;

    top:80px;
    left:50px;

}



.about-doctor{

    

    bottom:0;

    left:70px;

    width:480px;

    z-index:3;

}



/*==============================
        ABOUT CARDS
==============================*/


.about-card{

    position:absolute;

    background:#fff;

    border-radius:20px;

    padding:18px;

    display:flex;

    align-items:center;

    gap:15px;

    box-shadow:
    0 20px 45px rgba(0,0,0,.12);

    z-index:5;

}



.card-icon{

    width:50px;

    height:50px;

    background:#e8faf6;

    color:#0077b6;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    font-size:22px;

}



.about-card h2{

    color:#0077b6;

    font-size:32px;

    margin:0;

}


.about-card h3{

    margin:0;

    color:#0d1b2a;

    font-size:18px;

}


.about-card span{

    color:#667085;

    font-size:13px;

}



/* Experience */

.experience-card{

    top:120px;

    left:-20px;

}



/* Emergency */

.emergency-card{

    bottom:120px;

    left:-30px;

}



/* Rating */

.rating-card{

    right:0;

    bottom:80px;

    display:block;

    text-align:center;

}



.rating-stars{

    color:#ffc107;

    margin-bottom:8px;

}


.rating-card h3{

    font-size:24px;

    margin:5px 0;

}



/* Floating Icons */

.floating-medical,
.floating-plus{

    position:absolute;

    width:65px;

    height:65px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    color:#0077b6;

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

    z-index:6;

    animation:aboutFloat 4s infinite;

}



.floating-medical{

    top:120px;

    right:40px;

}



.floating-plus{

    bottom:170px;

    right:60px;

    color:#0d6efd;

}



@keyframes aboutFloat{

    50%{

        transform:translateY(-15px);

    }

}



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


.about-content .section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    background:#e8faf6;

    color:#0077b6;

    border-radius:50px;

    font-weight:600;

    margin-bottom:20px;

}



.about-content h2{

    font-size:48px;

    line-height:1.2;

    color:#0d1b2a;

    margin-bottom:25px;

}



.about-content h2 span{

    color:#0077b6;

}



.about-content p{

    color:#667085;

    line-height:1.8;

    margin-bottom:18px;

}



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


.about-features{

    margin-top:35px;

    display:flex;

    flex-direction:column;

    gap:20px;

}



.feature-box{

    display:flex;

    gap:18px;

    align-items:flex-start;

}



.feature-icon{

    width:45px;

    height:45px;

    border-radius:50%;

    background:#e8faf6;

    color:#0077b6;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}



.feature-box h4{

    margin:0 0 5px;

    color:#0d1b2a;

    font-size:18px;

}



.feature-box p{

    margin:0;

    font-size:14px;

}



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


.about-buttons{

    display:flex;

    align-items:center;

    gap:25px;

    margin-top:35px;

}


.about-buttons .btn-secondary{

    display:flex;

    align-items:center;

    gap:10px;

    color:#0d1b2a;

    font-weight:600;

    text-decoration:none;

}


.about-buttons .btn-secondary i{

    width:30px;

    height:30px;

    border-radius:50%;

    background:#e8faf6;

    color:#0077b6;

    display:flex;

    align-items:center;

    justify-content:center;

}



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


@media(max-width:1100px){

.about-wrapper{

    grid-template-columns:1fr;

}


.about-image{

    margin:auto;

    max-width:600px;

}


.about-content{

    text-align:center;

}


.about-features{

    text-align:left;

}


.about-buttons{

    justify-content:center;

}

}



@media(max-width:768px){


.about{

padding:70px 0;

}


.about-image{

height:520px;

}


.about-bg-circle{

width:350px;
height:350px;

}


.about-blob{

width:320px;
height:400px;

}


.about-doctor{

width:330px;

left:40px;

}


.experience-card{

left:0;

}


.emergency-card{

left:0;

}


.about-content h2{

font-size:34px;

}


.about-buttons{

flex-direction:column;

}

}



@media(max-width:480px){


.about-image{

height:450px;

}


.about-doctor{

width:280px;

}


.about-content h2{

font-size:28px;

}


.about-card{

transform:scale(.85);

}


.floating-medical,
.floating-plus{

display:none;

}

}
/*=====================================================
                IMAGE LOGO
=====================================================*/

.logo{

    display:flex;
    align-items:center;
    text-decoration:none;

}


.logo img{

    width:180px;
    height:auto;

    object-fit:contain;

    display:block;

    transition:.35s ease;

}


/* Hover Effect */

.logo:hover img{

    transform:scale(1.05);

}



/* Sticky Header Logo Size */

header.sticky .logo img{

    width:180px;

}



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

@media(max-width:768px){

    .logo img{

        width:170px;

    }

}


@media(max-width:480px){

    .logo img{

        width:150px;

    }

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

.footer-bottom{

    position:relative;
    background:#07182d;
    padding:25px 0;

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

}


.footer-bottom .container{

    position:relative;
    z-index:2;

}


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

.footer-bottom-wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

}


/*==============================
        COPYRIGHT
==============================*/

.copyright p{

    margin:0;

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

    font-size:14px;

}


.copyright strong{

    color:#fff;

    font-weight:600;

}


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

.footer-menu{

    display:flex;

    align-items:center;

    gap:25px;

    list-style:none;

    padding:0;

    margin:0;

}


.footer-menu li a{

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

    text-decoration:none;

    font-size:14px;

    transition:.3s;

}


.footer-menu li a:hover{

    color:#0077b6;

}



/*==============================
        SOCIAL ICONS
==============================*/

.footer-social-bottom{

    display:flex;

    align-items:center;

    gap:12px;

}


.footer-social-bottom a{

    width:38px;

    height:38px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:14px;

    text-decoration:none;

    transition:.35s ease;

}


.footer-social-bottom a:hover{

    background:#0077b6;

    color:#fff;

    transform:translateY(-5px);

}



/*==============================
        HOVER GLOW
==============================*/

.footer-social-bottom a i{

    transition:.3s;

}


.footer-social-bottom a:hover i{

    transform:scale(1.15);

}



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


@media(max-width:1100px){

.footer-bottom-wrapper{

    flex-direction:column;

    text-align:center;

}


.footer-menu{

    justify-content:center;

}


}



@media(max-width:768px){


.footer-bottom{

    padding:30px 0;

}


.footer-menu{

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

}


.copyright p{

    font-size:13px;

}


}



@media(max-width:480px){


.footer-menu{

    flex-direction:column;

    gap:12px;

}


.footer-social-bottom a{

    width:35px;

    height:35px;

}

}
/*=====================================================
            FLOATING ACTION BUTTONS
=====================================================*/


/*==============================
        COMMON STYLE
==============================*/

.scroll-top,
.whatsapp-btn,
.call-btn{

    position:fixed;

    right:25px;

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    text-decoration:none;

    font-size:22px;

    z-index:999;

    transition:.35s ease;

    box-shadow:
    0 15px 35px rgba(0,0,0,.18);

}


/*==============================
        SCROLL TOP
==============================*/


.scroll-top{

    bottom:95px;

    background:linear-gradient(
        135deg,
        #0077b6,
        #0d6efd
    );

    opacity:0;

    visibility:hidden;

}


.scroll-top.active{

    opacity:1;

    visibility:visible;

}


.scroll-top:hover{

    transform:translateY(-8px);

}



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


.hospital-topbar{

    background:#0077b6;
    color:#fff;

    padding:12px 5%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:14px;

    transition:.4s ease;

}



.hospital-topbar.hide-topbar{

    transform:translateY(-100%);

    opacity:0;

    height:0;

    padding:0;

    overflow:hidden;

}





/* ==========================
   HOSPITAL HEADER
========================== */


.hospital-header{


    position:sticky;

    top:0;

    z-index:999;

    width:100%;

    height:80px;

    background:#fff;

    padding:0 5%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:0 5px 20px rgba(0,0,0,.12);


}



/* LOGO */


.hospital-logo{

    display:flex;

    align-items:center;

    gap:12px;

}


.hospital-logo img{

    width:55px;

    height:55px;

    

}


.hospital-logo h2{

    color:#0077b6;

    font-size:24px;

}





/* NAVBAR */


.hospital-navbar ul{

    display:flex;

    gap:30px;

    list-style:none;

}



.hospital-navbar ul li a{

    text-decoration:none;

    color:#333;

    font-weight:600;

    transition:.3s;

}


.hospital-navbar ul li a:hover{

    color:#0077b6;

}





/* APPOINTMENT BUTTON */


.hospital-appointment{


    background:#e63946;

    color:#fff;

    text-decoration:none;

    padding:12px 22px;

    border-radius:30px;

}





/* MOBILE BUTTON */


.hospital-menu-btn{

    display:none;

    font-size:28px;

    color:#0077b6;

    cursor:pointer;

}





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


.hospital-mobile-menu{


    position:fixed;

    top:0;

    right:-100%;

    width:80%;

    height:100vh;

    background:#fff;

    padding:30px;

    z-index:2000;

    box-shadow:-5px 0 20px rgba(0,0,0,.2);

    transition:.4s;


}


.hospital-mobile-menu.active{

    right:0;

}



.hospital-menu-close{


    text-align:right;

    font-size:30px;

    color:#0077b6;

    cursor:pointer;

}



.hospital-mobile-menu ul{

    list-style:none;

    margin-top:40px;

}


.hospital-mobile-menu ul li{

    padding:15px 0;

    border-bottom:1px solid #ddd;

}


.hospital-mobile-menu ul li a{

    color:#333;

    text-decoration:none;

    font-size:18px;

}





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


@media(max-width:768px){


.hospital-topbar{

    flex-direction:column;

    gap:8px;

    text-align:center;

}



.hospital-navbar,

.hospital-appointment{

    display:none;

}



.hospital-menu-btn{

    display:block;

}



.hospital-header{

    height:70px;

    padding:0 20px;

}



.hospital-logo img{

    width:45px;

    height:45px;

}



.hospital-logo h2{

    font-size:18px;

}


}

.whatsapp-btn{

    bottom:85px;

    background:#25D366;

    animation:whatsappPulse 2s infinite;

}


.whatsapp-btn:hover{

    transform:scale(1.1);

    background:#1ebe5d;

}


@keyframes whatsappPulse{


    0%{

        box-shadow:
        0 0 0 0 rgba(37,211,102,.5);

    }


    70%{

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

    }


    100%{

        box-shadow:
        0 0 0 0 rgba(37,211,102,0);

    }


}



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


.call-btn{

    bottom:25px;

    background:#0d6efd;

}


.call-btn:hover{

    transform:translateY(-8px);

    background:#0056d6;

}



/*==============================
        ICON ANIMATION
==============================*/


.call-btn i,
.whatsapp-btn i,
.scroll-top i{

    transition:.3s;

}


.call-btn:hover i,
.whatsapp-btn:hover i,
.scroll-top:hover i{

    transform:scale(1.2);

}



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


@media(max-width:768px){


.scroll-top,
.whatsapp-btn,
.call-btn{

    width:50px;

    height:50px;

    right:18px;

    font-size:20px;

}


.whatsapp-btn{

    bottom:145px;

}


.scroll-top{

    bottom:85px;

}


.call-btn{

    bottom:20px;

}


}