html,
body{

    margin:0;
    padding:0;

    width:100%;

    overflow-x:hidden;
}
/* ==========================================
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;
font-family:'Poppins',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#f8fbff;
overflow-x:hidden;
color:#222;
}

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

.custom-nav{
background:rgba(15,23,42,.85);
backdrop-filter:blur(15px);
transition:.4s;
}

.navbar-brand{
font-size:1.2rem;
font-weight:700;
}

.nav-link{
color:#fff !important;
margin-left:15px;
transition:.3s;
}

.nav-link:hover{
color:#1de9b6 !important;
}

.btn-primary{
background:#00bfa6;
border:none;
border-radius:50px;
padding:12px 25px;
}

.btn-primary:hover{
    background:#00a88f;
    transform:translateY(-2px);
}

/* ==========================================
HERO SECTION
========================================== */
.hero-section{

    position:relative;

    min-height:100vh;

    overflow:hidden;

    display:flex;
    align-items:center;

    background:
    linear-gradient(
        rgba(8,17,32,.85),
        rgba(8,17,32,.85)
    ),
    url('../images/hero-bg.jpg');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    color:white;
}


.hero-section .container{
    position:relative;
    z-index:10;
}

.hero-section::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;
background:
linear-gradient(
135deg,
#0f172a,
#1e3a8a,
#00bfa6
);

    top:-200px;
    right:-100px;

    animation:float1 8s infinite ease-in-out;
}

.hero-section::after{

    content:"";

    position:absolute;

    width:400px;
    height:400px;

    border-radius:50%;
background:
linear-gradient(
135deg,
#0f172a,
#1e3a8a,
#00bfa6
);

    bottom:-150px;
    left:-100px;

    animation:float2 10s infinite ease-in-out;
}

@keyframes float1{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(40px);
    }

    100%{
        transform:translateY(0);
    }

}

@keyframes float2{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}



.ear-animation{

    position:relative;

    display:flex;

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

    width:200px;
    height:200px;

    margin:auto;
}

.ear-animation i{

    font-size:80px;

    color:#00e5c3;

    z-index:2;
}

.ear-animation span{

    position:absolute;

    border:3px solid #00e5c3;

    border-radius:50%;

    animation:ripple 3s infinite;
}

.ear-animation span:nth-child(2){
    width:120px;
    height:120px;
}

.ear-animation span:nth-child(3){
    width:160px;
    height:160px;
    animation-delay:1s;
}

.ear-animation span:nth-child(4){
    width:200px;
    height:200px;
    animation-delay:2s;
}

@keyframes ripple{

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

    100%{
        opacity:0;
        transform:scale(1.4);
    }

}

.sound-wave{
    display:flex;
    gap:8px;
    justify-content:center;
    margin-bottom:30px;
}

.sound-wave span{
    width:8px;
    border-radius:20px;
    background:#00e5c3;
    animation:sound 1s infinite ease-in-out;
}

.sound-wave span:nth-child(1){
    height:30px;
}

.sound-wave span:nth-child(2){
    height:60px;
    animation-delay:.2s;
}

.sound-wave span:nth-child(3){
    height:90px;
    animation-delay:.4s;
}

.sound-wave span:nth-child(4){
    height:60px;
    animation-delay:.6s;
}

.sound-wave span:nth-child(5){
    height:30px;
    animation-delay:.8s;
}

@keyframes sound{

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

    50%{
        transform:scaleY(1.8);
    }

}


.circle{

    position:absolute;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

    animation:float 8s infinite ease-in-out;
}

.c1{
    width:250px;
    height:250px;

    left:-120px;
    bottom:-120px;

    opacity:.25;
}

.c2{
    width:200px;
    height:200px;
    left:150px;
}

.c3{
    width:120px;
    height:120px;
    top:250px;
}

.overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,.2);
}

.hero-title{

    font-size:4rem;

    font-weight:800;

    line-height:1.1;

    color:white;
}

.hero-subtitle{

    font-size:1.4rem;

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

    max-width:650px;
}

.hero-logo{

    max-width:500px;

    filter:
    drop-shadow(0 0 20px rgba(0,191,166,.5))
    drop-shadow(0 0 40px rgba(0,191,166,.3));
}

@keyframes pulse{

0%{
    transform:scale(1);
}

50%{
    transform:scale(1.08);
}

100%{
    transform:scale(1);
}

}

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

#about{
padding-top:100px;
padding-bottom:100px;
}

#about h2{
font-weight:700;
margin-bottom:20px;
}

#about img{
border-radius:20px;
}

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

.services-section{
background:#f4f8fc;
}

.service-card{
background:white;
border-radius:20px;
padding:35px;
text-align:center;

transition:.4s;
box-shadow:
0 10px 30px rgba(0,0,0,.08);

height:100%;

}

.service-card:hover{
transform:
translateY(-10px);

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

.service-card i{
font-size:3rem;
color:#00bfa6;
margin-bottom:20px;

}

.service-card h4{
font-weight:700;
margin-bottom:15px;
}

/* ==========================================
BRANCH CARDS
========================================== */

.branch-card{
background:white;
padding:30px;
border-radius:20px;

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

transition:.4s;

}

.branch-card:hover{
transform:translateY(-8px);
}

.branch-card h4{
color:#1e3a8a;
font-weight:700;
margin-bottom:15px;

}

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

.cta-section{
padding:100px 0;

background:
linear-gradient(
    135deg,
    #00bfa6,
    #1e3a8a
);

color:white;
}

.cta-section h2{
font-size:3rem;
font-weight:800;
}

.cta-section p{
margin-top:15px;
margin-bottom:30px;
font-size:1.1rem;
}

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

.footer{
background:#0f172a;
color:white;

padding:60px 0;
}

.footer h4{
font-weight:700;
}

.footer p{
color:#d6d6d6;
}

/* ==========================================
ANIMATED GRADIENT TEXT
========================================== */

.gradient-text{
background:
linear-gradient(
    90deg,
    #00bfa6,
    #1e3a8a,
    #00bfa6
);

background-size:200%;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:gradientMove 4s linear infinite;

}

@keyframes gradientMove{
0%{
    background-position:0%;
}

100%{
    background-position:200%;
}

}

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

@media(max-width:992px){

.hero-title{
    font-size:1.8rem;
}

.hero-logo{
    margin-top:50px;
}

}

@media(max-width:768px){

.hero-title{
    font-size:1.8rem;
}

.hero-subtitle{
    font-size:1rem;
}

.cta-section h2{
    font-size:2rem;
}

}

@media(max-width:576px){

.hero-title{
    font-size:1.8rem;
}

}


.scroll-top-btn{
    position:fixed;
    bottom:25px;
    right:25px;
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:#00bfa6;
    color:white;
    z-index:999;
    opacity:0;
    visibility:hidden;
    transition:.3s;
}

.floating-whatsapp{
    position:fixed;
    bottom:90px;
    right:25px;
    width:55px;
    height:55px;
    background:#25D366;
    color:white;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    font-size:24px;
    z-index:999;
}

.progress-bar-top{
    position:fixed;
    top:0;
    left:0;
    height:4px;
    background:#00bfa6;
    width:0%;
    z-index:9999;
}

.testimonial-card{

  
background:white;
padding:35px;
border-radius:25px;

height:100%;

transition:.4s;

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

}

.testimonial-card:hover{

  
transform:
translateY(-10px);

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

}

.stars{

  
color:#ffc107;

font-size:24px;

margin-bottom:15px;
  

}

.testimonial-card p{

  
color:#666;

line-height:1.8;
  

}

.testimonial-card h5{

  
margin-top:20px;

margin-bottom:5px;

font-weight:700;
  

}

.testimonial-card small{

  
color:#999;
  

}


.seo-content{
    background:#ffffff;
}

.seo-content h2{
    font-weight:700;
    color:#1e3a8a;
    margin-bottom:25px;
}

.seo-content p{
    font-size:1.05rem;
    line-height:1.9;
    color:#555;
    margin-bottom:15px;
}

.loader{

    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

    background: linear-gradient(
        180deg,
        #02142f 0%,
        #0d2c6c 50%,
        #0ea5a4 100%
    );

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

    z-index: 999999;
}
.loader-content{

    position:absolute;

    top:50%;
    left:50%;

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

    text-align:center;

    width:90%;

    max-width:500px;
}
.brain-loader img{

    width:140px;

    animation:
    pulse 2s infinite;
        margin-bottom: 20px;
}

.loader-content h2{

    color:#ffffff;

    font-size:3rem;

    font-weight:800;

    margin-top:20px;
}

.loader-content p{

    color:#d7f8f3;

    margin-bottom:25px;

    margin-top: 20px;
}

.loader-content small{

    color:#d7f8f3;

    display:block;

    margin-top:20px;

    font-size:15px;
}

.brain-loader img{

    filter:
    drop-shadow(0 0 15px #00e5c3)
    drop-shadow(0 0 40px #00e5c3);

}


@media(max-width:768px){

    .loader-content{

        width:95%;
    }

    .loader-content h2{

        font-size:2.3rem;
    }

    .brain-loader img{

        width:120px;
    }

}

.loader-spinner{

    width:50px;
    height:50px;

    border:5px solid #eee;
    border-top:5px solid #00bfa6;

    border-radius:50%;

    margin:20px auto;

    animation:spin 1s linear infinite;
}

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.floating-buttons{

    position:fixed;

    right:20px;
    bottom:20px;

    z-index:9999;

    display:flex;
    flex-direction:column;
    gap:12px;
}

.float-btn{

    width:60px;
    height:60px;

    border-radius:50%;

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

    color:white;

    text-decoration:none;

    font-size:22px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.2);
}

.call-btn{
    background:#2563eb;
}

.whatsapp-btn{
    background:#25d366;
}

.book-btn{
    background:#00bfa6;
}


.hide-loader{
    opacity:0;
    visibility:hidden;
}

.page-header{

    background: linear-gradient(
        135deg,
        #0f172a,
        #1e3a8a,
        #00bfa6
    );

    color:white;

    padding:160px 0 90px;

    text-align:center;

    position:relative;
}

.page-header h1{

    font-weight:800;
    margin-bottom:15px;
}

.page-header p{

    font-size:1.2rem;
    opacity:.9;
}

.about-section{

    background:#fff;
}

.founder-card{

    background:#fff;

    padding:30px;

    border-radius:25px;

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

    text-align:center;
}

.founder-image{

    width:320px;
    height:320px;

    object-fit:cover;

    border-radius:50%;

    border:8px solid #00bfa6;

    box-shadow:
    0 0 40px rgba(0,191,166,.25);
}

.designation{

    color:#00bfa6;

    font-weight:600;
}

.section-tag{

    background:#00bfa6;

    color:white;

    padding:8px 20px;

    border-radius:50px;

    display:inline-block;

    margin-bottom:20px;
}

.about-title{

    font-size:3rem;

    font-weight:800;

    margin-bottom:25px;
}

.stat-box{

    background:#f8fafc;

    padding:25px;

    border-radius:20px;

    text-align:center;

    transition:.3s;
}

.stat-box:hover{

    transform:translateY(-8px);
}

.stat-box h3{

    color:#00bfa6;

    font-size:2rem;

    font-weight:800;
}
.btn-book:disabled{

    opacity:.7;

    cursor:not-allowed;

}

/*--------------------------------------------------------------
# Google Map
--------------------------------------------------------------*/
.google-map {
  position: relative;
}
.google-map iframe {
  position: relative;
  display: block;
  border: none;
  height: 558px;
  width: 100%;
}
.google-map__contact {
  overflow: hidden;
}


@media (max-width:768px){

    .hero-title{
        font-size:1.8rem;
        text-align:center;
    }

    .hero-subtitle{
        font-size:1rem;
        text-align:center;
    }

    .hero-logo{
        max-width:250px;
        margin-top:30px;
    }

}

@media (max-width:768px){

    .navbar-brand span{
        font-size:16px;
    }

    .navbar-brand img{
        width:40px;
    }

}

@media (max-width:768px){

    .appointment-card{

        padding:20px;

        border-radius:20px;
    }

    .appointment-card h2{
        font-size:28px;
    }

    .btn-book{
        width:100%;
    }

}

@media (max-width:768px){

    .founder-image{

        width:220px;
        height:220px;
    }

    .about-title{
        font-size:2rem;
        text-align:center;
    }

}

@media (max-width:768px){

    .stat-box{

        margin-bottom:15px;
    }

}

@media (max-width:768px){

    .service-card{

        margin-bottom:20px;
    }

}


@media (max-width:768px){

    .footer{

        text-align:center;
    }

    .footer h4{
        font-size:20px;
    }

}

@media(max-width:768px){

.hero-section{

    padding-top:120px;
    min-height:auto;

}

.hero-title{

    font-size:1.8rem;
    line-height:1.1;

    text-align:center;

}

.hero-subtitle{

    font-size:1.2rem;
    text-align:center;

}

}


@media(max-width:768px){

.navbar-brand img{

    width:40px !important;

}

.navbar-brand span{

    font-size:1rem;

}

}

@media(max-width:768px){

.hero-animation{

    display:none;

}

}

@media(max-width:768px){

.hero-section .btn{

    width:100%;

    margin-bottom:15px;

}

}


@media(max-width:768px){

.custom-nav{

    padding:10px 0;
}

.navbar-brand{

    max-width:75%;
}

    .navbar-brand span{

        font-size:14px !important;

        font-weight:600;

    }

    .navbar-brand img{

        width:38px !important;

    }

}

.session-badge{

    display:flex;
    flex-wrap:wrap;
    gap:12px;

    margin-top:20px;
}

.session-badge span{

    background:rgba(255,255,255,0.15);

    border:1px solid rgba(255,255,255,0.25);

    padding:10px 18px;

    border-radius:50px;

    color:#fff;

    font-size:14px;

    backdrop-filter:blur(10px);
}

.session-badge i{

    margin-right:8px;

    color:#00e5c3;
}

.speech-indicator{

    position:fixed;

    top:70px;

    left:0;

    width:100%;

    height:50px;

    z-index:9999;

    pointer-events:none;

}

.speech-bubble{

    position:absolute;

    left:100px;

    width:45px;
    height:45px;

    border-radius:50%;

    background:#00d4c0;

    display:flex;

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

    color:white;

    opacity:0;

    transform:scale(0);

    transition:all .3s ease;
}
@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.1);
    }

    100%{
        transform:scale(1);
    }

}


@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.1);
    }

    100%{
        transform:scale(1);
    }

}

.branch-head{

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

    margin:15px 0;
}

.doctor-avatar{

    width:20px;
    height:20px;

    border-radius:50%;

    background:#00bfa6;

    display:flex;

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

    color:white;

    font-size:12px;
}

.branch-head-center{

    text-align:center;

    margin:20px 0;

}

.branch-head-center .doctor-avatar{

    width:65px;
    height:65px;

    border-radius:50%;

    background:#00bfa6;

    display:flex;

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

    color:#fff;

    font-size:28px;

    margin:auto;
}