*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}


body{
background:#fff;
}


.container{
width:90%;
max-width:1250px;
margin:auto;
}



.header{

background:white;
height:85px;
display:flex;
align-items:center;
box-shadow:0 5px 20px rgba(0,0,0,.05);
position:sticky;
top:0;
z-index:999;

}



.nav-wrapper{

display:flex;
align-items:center;
justify-content:space-between;

}



.logo img{

width:88px;

}



.nav-menu{

display:flex;
align-items:center;
gap:28px;

}



.nav-menu a{

text-decoration:none;
color:#102d63;
font-size:15px;
font-weight:600;

}



.dropdown{

position:relative;

}



.drop-btn{

background:none;
border:none;
font-size:15px;
font-weight:600;
color:#102d63;
cursor:pointer;

}



.dropdown-menu{

position:absolute;
top:35px;
left:0;
width:240px;
background:white;
border-radius:12px;
padding:15px;
box-shadow:0 10px 30px rgba(0,0,0,.15);

opacity:0;
visibility:hidden;
transform:translateY(10px);

transition:.3s;

}



.dropdown-menu a{

display:block;
padding:10px;
border-radius:8px;

}


.dropdown-menu a:hover{

background:#eef7ff;

}



.dropdown:hover .dropdown-menu{

opacity:1;
visibility:visible;
transform:translateY(0);

}



.desktop-btn a,
.mobile-btn a{

background:#08a8d8;
color:white!important;
padding:14px 25px;
border-radius:10px;

}


.mobile-btn{

display:none;

}



.hamburger{

display:none;
cursor:pointer;

}



.hamburger span{

display:block;
width:28px;
height:3px;
background:#102d63;
margin:5px;
border-radius:5px;

}



/* HERO */


.hero{

min-height:600px;
display:flex;
align-items:center;
padding:50px 8%;
background:linear-gradient(120deg,#edf8ff,#fff);

}



.hero-content{

width:50%;

}



.hero-content p{

color:#009bd3;
font-weight:bold;

}



.hero-content h1{

font-size:55px;
color:#12346b;
margin:20px 0;

}



.hero-content h4{

font-size:18px;
font-weight:400;
line-height:1.6;

}



.hero-buttons{

margin-top:30px;

}



.hero-buttons a{

display:inline-block;
padding:15px 25px;
background:#064e9d;
color:white;
border-radius:8px;
text-decoration:none;
margin-right:15px;

}



.hero-image{

width:50%;

}


.hero-image img{

width:100%;
border-radius:25px;

}



/* MOBILE */


@media(max-width:900px){


.header{

height:75px;

}



.hamburger{

display:block;

}



.desktop-btn{

display:none;

}



.nav-menu{

position:absolute;
top:75px;
left:0;
width:100%;
background:white;

display:flex;
flex-direction:column;
align-items:flex-start;

padding:25px;

gap:20px;


transform:translateX(-100%);

transition:.3s;


}



.nav-menu.active{

transform:translateX(0);

}



.mobile-btn{

display:block;

}



.dropdown{

width:100%;

}



.dropdown-menu{

position:static;
width:100%;
display:none;
opacity:1;
visibility:visible;
transform:none;
box-shadow:none;
padding-left:15px;

}



.dropdown.open .dropdown-menu{

display:block;

}

}


.hero-section{

padding:40px 0;
/* margin-top: 50px; */
background:
linear-gradient(
120deg,
#f1f9ff,
#ffffff
);

}



.hero-container{

width:90%;
max-width:1250px;
margin:auto;

min-height:420px;

display:flex;
align-items:center;

background:

linear-gradient(
120deg,
rgba(255,255,255,.95),
rgba(225,244,255,.9)
);

border-radius:25px;

overflow:hidden;

padding-left:55px;

}





.hero-text{

width:50%;

}



.hero-tag{

font-size:14px;
font-weight:700;
color:#009bd3;
letter-spacing:.5px;

}



.hero-text h1{

font-size:55px;
line-height:1.15;

color:#10356c;

margin:18px 0;

font-weight:800;

}



.hero-text h1 span{

color:#008dd0;

}



.hero-text p{

font-size:16px;
line-height:1.7;

color:#555;

max-width:480px;

}




.hero-actions{

margin-top:30px;

display:flex;

gap:15px;

}



.hero-actions a{

text-decoration:none;

padding:14px 25px;

border-radius:10px;

font-weight:600;

}



.primary-btn{

background:#064fa3;
color:white;

}



.secondary-btn{

border:1px solid #064fa3;
color:#064fa3;

background:white;

}





.hero-features{

display:flex;

gap:35px;

margin-top:35px;

}



.hero-features div{

display:flex;
align-items:center;
gap:10px;

}



.hero-features img{

width:30px;

}



.hero-features p{

font-size:13px;
font-weight:600;
color:#245;

line-height:1.2;

}





.hero-image-box{

width:50%;

height:420px;

position:relative;

}



.main-hero-img{

width:100%;
height:100%;

object-fit:cover;

border-radius:30px 0 0 30px;

}




.hearing-badge{

position:absolute;

right:35px;
bottom:35px;

background:white;

padding:18px;

border-radius:50%;

width:130px;
height:130px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

box-shadow:0 10px 30px rgba(0,0,0,.15);

text-align:center;

}



.ear-icon{

font-size:35px;

}



.hearing-badge p{

font-size:13px;

font-weight:700;

color:#07519c;

}





/* MOBILE */


@media(max-width:900px){



.hero-container{

flex-direction:column;

padding:25px;

}



.hero-text,
.hero-image-box{

width:100%;

}



.hero-text h1{

font-size:38px;

}



.hero-image-box{

height:350px;

margin-top:30px;

}



.main-hero-img{

border-radius:20px;

}



.hero-features{

gap:15px;

flex-wrap:wrap;

}



.hero-actions{

flex-direction:column;

}



.hero-actions a{

text-align:center;

}



}



.services-section{
    padding:90px 6%;
    background:#ffffff;
}


.services-heading{
    text-align:center;
    max-width:700px;
    margin:auto;
}


.services-heading span{
    color:#009ed8;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
}


.services-heading h2{
    font-size:42px;
    margin:15px 0;
    color:#073b75;
}


.services-heading p{
    color:#666;
    font-size:16px;
    line-height:1.7;
}



.services-grid{

    margin-top:50px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:25px;

}



.service-card{

    background:white;
    border-radius:22px;
    padding:30px 20px;
    text-align:center;

    border:1px solid #e5eff8;

    box-shadow:
    0 10px 30px rgba(0,80,150,0.08);

    transition:.4s;

    position:relative;
    overflow:hidden;

}



.service-card:before{

    content:"";
    position:absolute;

    width:100%;
    height:5px;

    background:linear-gradient(
        90deg,
        #0068c9,
        #18c4df
    );

    top:0;
    left:0;

}



.service-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 20px 40px rgba(0,120,200,.18);

}



.icon{

    width:75px;
    height:75px;

    margin:auto;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #e9f8ff,
    #ffffff
    );

    display:flex;

    justify-content:center;
    align-items:center;

    font-size:35px;

    margin-bottom:20px;

}



.service-card h3{

    color:#0750a0;

    font-size:20px;

    margin-bottom:12px;

}



.service-card p{

    font-size:14px;

    line-height:1.6;

    color:#666;

}



/* Tablet */

@media(max-width:1100px){

.services-grid{

grid-template-columns:repeat(3,1fr);

}

}



/* Mobile */

@media(max-width:600px){

.services-section{

padding:60px 20px;

}


.services-heading h2{

font-size:30px;

}


.services-grid{

grid-template-columns:1fr;

gap:20px;

}


.service-card{

padding:25px 18px;

}

}


/* WHY AURIS SECTION */

.why-auris{

    padding:90px 6%;
    background:#f8fcff;
    font-family:"Poppins",sans-serif;

}


.why-container{

    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:35% 65%;
    gap:50px;

    align-items:center;

}



/* LEFT SIDE */


.small-title{

    color:#008fd3;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;

}


.why-content h2{

    font-size:42px;
    line-height:1.2;
    color:#083b72;
    margin:18px 0;

    font-weight:700;

}


.why-content h2 span{

    color:#00a9d8;

}



.why-content p{

    color:#667085;
    font-size:16px;
    line-height:1.8;

    margin-bottom:30px;

}



.why-btn{

    display:inline-block;

    background:#0066b3;

    color:white;

    padding:13px 30px;

    border-radius:30px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.why-btn:hover{

    background:#00a8dc;

}



/* FEATURES */


.why-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}




.feature-box{

    background:white;

    padding:30px;

    border-radius:20px;

    border:1px solid #e6f1f8;

    box-shadow:0 10px 35px rgba(0,100,180,.08);

    transition:.3s;

}



.feature-box:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 40px rgba(0,100,180,.15);

}



.icon{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#e8f7ff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#0077c8;

    font-size:24px;

    margin-bottom:18px;

}



.feature-box h3{

    color:#073b78;

    font-size:18px;

    margin-bottom:12px;

}



.feature-box p{

    color:#667085;

    font-size:14px;

    line-height:1.7;

}





/* MOBILE RESPONSIVE */


@media(max-width:992px){


.why-container{

    grid-template-columns:1fr;

}


.why-content{

    text-align:center;

}


.why-features{

    grid-template-columns:1fr 1fr;

}


}



@media(max-width:600px){


.why-auris{

    padding:60px 20px;

}


.why-content h2{

    font-size:32px;

}



.why-features{

    grid-template-columns:1fr;

}



.feature-box{

    padding:25px;

}



}


/* AURIS COUNTER SECTION */


.auris-counter{

    padding:25px 6%;

    background:#f7fbff;

    font-family:"Poppins",sans-serif;

}



.counter-container{

    max-width:1200px;

    margin:auto;

    padding:35px 45px;


    display:grid;

    grid-template-columns:repeat(5,1fr);


    background:linear-gradient(
        90deg,
        #0064b5,
        #00c4d8
    );


    border-radius:22px;


    box-shadow:
    0 15px 40px rgba(0,120,200,.20);


    overflow:hidden;

}





.counter-box{


    text-align:center;

    color:white;

    position:relative;


}



.counter-box:not(:last-child)::after{


    content:"";

    position:absolute;

    right:0;

    top:15%;

    height:70%;

    width:1px;

    background:rgba(255,255,255,.35);


}



.counter-box h2{


    display:inline-block;

    font-size:42px;

    font-weight:700;

    margin:0;

    line-height:1;


}



.counter-box span{


    font-size:35px;

    font-weight:700;

}



.counter-box p{


    margin-top:12px;

    font-size:14px;

    line-height:1.5;

    color:#ffffff;

    opacity:.95;


}





.counter-box:hover h2{


    transform:scale(1.08);

}



.counter-box h2{

    transition:.3s;

}





/* MOBILE */


@media(max-width:992px){


.counter-container{

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}


.counter-box:nth-child(3)::after{

    display:none;

}


}




@media(max-width:600px){


.counter-container{

    grid-template-columns:1fr 1fr;

    padding:30px 20px;

}


.counter-box:not(:last-child)::after{

    display:none;

}


.counter-box h2{

    font-size:32px;

}



.counter-box span{

    font-size:25px;

}


}

.about-auris{
    padding:90px 20px;
    background:#ffffff;
    overflow:hidden;
}


.about-container{

    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:60px;
    position:relative;

}



/* Images */

.about-images{

    width:45%;
    display:flex;
    gap:15px;
}


.main-img{

    width:65%;
}


.main-img img{

    width:100%;
    height:390px;
    object-fit:cover;
    border-radius:25px;

}



.small-images{

    width:35%;
    display:flex;
    flex-direction:column;
    gap:15px;

}



.small-images img{

    width:100%;
    height:187px;
    object-fit:cover;
    border-radius:20px;

}





/* Content */


.about-content{

    width:55%;
    z-index:2;

}



.about-tag{

    color:#0798d8;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;

}



.about-content h2{

    font-size:42px;
    line-height:1.15;
    color:#073b76;
    margin:15px 0 25px;
    font-weight:800;

}



.about-content p{

    font-size:16px;
    line-height:1.8;
    color:#555;
    max-width:560px;

}




.about-points{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:30px;

}



.about-points div{

    color:#083b73;
    font-size:15px;
    font-weight:600;

}



.about-points span{

    color:#08a5d9;
    margin-right:8px;
    font-size:20px;

}



/* Ear Graphic */


.ear-design{

    position:absolute;
    right:-150px;
    bottom:-80px;
    opacity:.15;

}


.ear-circle{

    width:300px;
    height:300px;
    border-radius:50%;
    background:#dff5ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:140px;

}





/* Responsive */


@media(max-width:992px){


.about-container{

    flex-direction:column;

}



.about-images,
.about-content{

    width:100%;

}



.about-content h2{

    font-size:34px;

}


.ear-design{

    display:none;

}

}



@media(max-width:600px){


.about-auris{

    padding:50px 15px;

}


.about-images{

    flex-direction:column;

}


.main-img,
.small-images{

    width:100%;

}


.main-img img{

    height:300px;

}


.small-images{

    flex-direction:row;

}


.small-images img{

    height:140px;

}


.about-content h2{

    font-size:28px;

}


.about-points{

    grid-template-columns:1fr;

}


}


.appointment-section{

padding:90px 6%;

background:#f7fcff;

}



.appointment-container{

max-width:1200px;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

gap:50px;


background:

linear-gradient(
120deg,
#0055a8,
#00b9d8
);


border-radius:30px;

padding:60px;

overflow:hidden;

position:relative;

}



/* CONTENT */


.appointment-content{

width:55%;

color:white;

}



.appointment-content span{

font-size:14px;

font-weight:700;

letter-spacing:1px;

opacity:.9;

}



.appointment-content h2{

font-size:42px;

line-height:1.25;

margin:20px 0;

font-weight:800;

}



.appointment-content p{

font-size:16px;

line-height:1.7;

max-width:520px;

opacity:.95;

}




.appointment-info{

display:flex;

gap:30px;

margin-top:35px;

}



.appointment-info div{

display:flex;

align-items:center;

gap:12px;

}



.appointment-info strong{

font-size:28px;

}



.appointment-info p{

font-size:14px;

line-height:1.5;

margin:0;

}



.appointment-info span{

font-size:14px;

font-weight:600;

}





/* FORM */


.appointment-form{

width:40%;

background:white;

padding:35px;

border-radius:22px;

box-shadow:
0 15px 40px rgba(0,0,0,.15);

}



.appointment-form h3{

font-size:25px;

color:#073b75;

margin-bottom:25px;

text-align:center;

}



.appointment-form input,
.appointment-form select,
.appointment-form textarea{


width:100%;

padding:14px 15px;

margin-bottom:15px;

border-radius:10px;

border:1px solid #dbeaf4;

outline:none;

font-size:14px;

font-family:inherit;

}



.appointment-form textarea{

height:90px;

resize:none;

}



.appointment-form button{


width:100%;

padding:15px;

border:none;

border-radius:10px;

background:#0065b3;

color:white;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.3s;


}



.appointment-form button:hover{

background:#00a8d8;

}





/* MOBILE */


@media(max-width:992px){


.appointment-container{

flex-direction:column;

padding:35px 25px;

}



.appointment-content,
.appointment-form{

width:100%;

}



.appointment-content h2{

font-size:32px;

}



.appointment-info{

flex-direction:column;

gap:15px;

}



}



@media(max-width:600px){


.appointment-section{

padding:50px 15px;

}


.appointment-content h2{

font-size:27px;

}


.appointment-form{

padding:25px 20px;

}


}

.auris-footer{

background:#062d5c;

padding:70px 6% 0;

color:white;

font-family:"Poppins",sans-serif;

position:relative;

}



.footer-container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:1.5fr 1fr 1fr 1.4fr;

gap:45px;

}





.footer-logo{

width:170px;

margin-bottom:20px;

}



.footer-col p{

color:#c8d8ea;

font-size:14px;

line-height:1.8;

}



.footer-col h3{

font-size:20px;

margin-bottom:25px;

position:relative;

}



.footer-col h3:after{

content:"";

display:block;

width:45px;

height:3px;

background:#08b8df;

margin-top:10px;

}



.footer-col ul{

list-style:none;

padding:0;

}



.footer-col ul li{

margin-bottom:14px;

}



.footer-col ul li a{

color:#d2dfed;

text-decoration:none;

font-size:14px;

transition:.3s;

}



.footer-col ul li a:hover{

color:#08b8df;

padding-left:5px;

}





/* SOCIAL */


.social-icons{

display:flex;

gap:12px;

margin-top:25px;

}



.social-icons a{

width:38px;

height:38px;

border-radius:50%;

background:#0b4a87;

display:flex;

align-items:center;

justify-content:center;

color:white;

text-decoration:none;

font-weight:600;

transition:.3s;

}



.social-icons a:hover{

background:#08b8df;

}





/* CONTACT */


.contact-item{

display:flex;

gap:15px;

margin-bottom:18px;

}



.contact-item span{

font-size:20px;

}



.contact-item p{

margin:0;

font-size:14px;

}





.footer-bottom{

border-top:1px solid rgba(255,255,255,.2);

margin-top:50px;

padding:20px 0;

display:flex;

justify-content:space-between;

font-size:13px;

color:#c5d4e5;

}




.whatsapp-btn{

position:fixed;

right:25px;

bottom:25px;

width:60px;

height:60px;

background:#25D366;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

text-decoration:none;

box-shadow:0 10px 25px rgba(0,0,0,.2);

}





/* MOBILE */


@media(max-width:992px){


.footer-container{

grid-template-columns:repeat(2,1fr);

}



}



@media(max-width:600px){


.auris-footer{

padding:50px 20px 0;

}



.footer-container{

grid-template-columns:1fr;

gap:35px;

}



.footer-bottom{

flex-direction:column;

gap:10px;

text-align:center;

}


}


/* STICKY BAR */


.sticky-contact{

position:fixed;

bottom:20px;

left:50%;

transform:translateX(-50%);


background:white;

padding:10px;

border-radius:50px;


display:flex;

gap:10px;


box-shadow:
0 10px 35px rgba(0,0,0,.18);


z-index:9999;


}



.sticky-contact a,
.sticky-form-btn{


border:none;

padding:14px 25px;

border-radius:40px;

display:flex;

align-items:center;

gap:10px;

font-size:15px;

font-weight:600;

cursor:pointer;

text-decoration:none;


}



.sticky-call{

background:#0754a2;

color:white;

}



.sticky-whatsapp{

background:#25D366;

color:white;

}



.sticky-form-btn{

background:#00a9dc;

color:white;

}



.sticky-contact i{

font-size:18px;

}





/* POPUP */


.appointment-popup{


position:fixed;

inset:0;


background:
rgba(0,0,0,.55);


display:none;


align-items:center;

justify-content:center;


z-index:10000;


}




.popup-box{


background:white;

width:420px;

border-radius:25px;

padding:35px;


position:relative;


animation:popup .3s ease;


}



@keyframes popup{


from{

transform:translateY(40px);

opacity:0;

}


to{

transform:translateY(0);

opacity:1;

}

}





.close-btn{


position:absolute;

right:20px;

top:15px;


border:none;

background:#edf6ff;


width:35px;

height:35px;


border-radius:50%;


font-size:25px;


color:#0754a2;


cursor:pointer;


}



.popup-box h2{


text-align:center;

color:#073b75;

margin-bottom:10px;


}



.popup-box p{

text-align:center;

color:#666;

font-size:14px;

margin-bottom:25px;

}




.input-box{


display:flex;

align-items:center;

gap:12px;


border:1px solid #dbeaf5;


padding:12px 15px;


border-radius:12px;


margin-bottom:15px;


}



.input-box i{

color:#008ed1;

}



.input-box input,
.input-box select{


border:none;

outline:none;

width:100%;

font-size:14px;

}




.submit-btn{


width:100%;

padding:15px;


border:none;

border-radius:12px;


background:#0754a2;


color:white;


font-size:16px;

font-weight:600;


}





/* MOBILE */


@media(max-width:600px){


.sticky-contact{

width:95%;

bottom:12px;

justify-content:center;

}


.sticky-contact a,
.sticky-form-btn{


padding:13px;

border-radius:50%;

width:48px;

height:48px;

justify-content:center;


}


.sticky-contact span{

display:none;

}



.popup-box{

width:90%;

padding:25px;

}


}


/* about page css starts */

/* BREADCRUMB SECTION */


.breadcrumb-section{


height:330px;

background:

linear-gradient(
90deg,
rgba(0,80,160,.95),
rgba(0,180,215,.85)
),

url("../images/breadcrumb.jpg");


background-size:cover;

background-position:center;

display:flex;

align-items:center;

justify-content:center;


position:relative;

overflow:hidden;


}



.breadcrumb-content{

position:relative;

z-index:2;

text-align:center;

color:white;

}



.breadcrumb-content h1{


font-size:52px;

font-weight:800;

margin-bottom:20px;


}



.breadcrumb-menu{


display:flex;

align-items:center;

justify-content:center;

gap:12px;


}



.breadcrumb-menu a{


color:white;

text-decoration:none;

font-size:16px;

font-weight:500;


}



.breadcrumb-menu span{


font-size:18px;

opacity:.8;


}



.breadcrumb-menu p{


margin:0;

font-size:16px;

color:#dff7ff;


}



/* Decorative circle */


.breadcrumb-section:before{


content:"";

position:absolute;


width:350px;

height:350px;


border-radius:50%;


background:rgba(255,255,255,.08);


right:-100px;

top:-100px;


}



.breadcrumb-section:after{


content:"";

position:absolute;


width:250px;

height:250px;


border-radius:50%;


background:rgba(255,255,255,.08);


left:-80px;

bottom:-80px;


}







/* MOBILE */


@media(max-width:600px){


.breadcrumb-section{

height:240px;

}



.breadcrumb-content h1{

font-size:34px;

}



.breadcrumb-menu a,
.breadcrumb-menu p{

font-size:14px;

}



}

.about-clinic-section{

padding:90px 6%;

background:#ffffff;

font-family:"Poppins",sans-serif;

}



.about-clinic-container{


max-width:1200px;

margin:auto;

display:flex;

align-items:center;

gap:70px;


}




/* IMAGE */


.clinic-image-area{

width:45%;

position:relative;

}



.clinic-main-image img{


width:100%;

height:520px;

object-fit:cover;

border-radius:30px;


}



.experience-card{


position:absolute;

bottom:35px;

right:-35px;


background:

linear-gradient(
135deg,
#0065b3,
#00bcd9
);


width:150px;

height:150px;


border-radius:25px;


display:flex;

flex-direction:column;

justify-content:center;

align-items:center;


color:white;


box-shadow:
0 15px 35px rgba(0,100,180,.25);


}



.experience-card h3{

font-size:45px;

margin:0;

font-weight:800;

}



.experience-card p{

text-align:center;

font-size:14px;

line-height:1.5;

}





.circle-design{


position:absolute;

width:120px;

height:120px;

border-radius:50%;

background:#e4f7ff;

left:-40px;

top:-40px;

z-index:-1;

}




/* CONTENT */


.clinic-about-content{

width:55%;

}



.section-tag{


color:#009bd6;

font-size:14px;

font-weight:700;

letter-spacing:1px;


}




.clinic-about-content h2{


font-size:42px;

line-height:1.2;

color:#073b75;

margin:18px 0 25px;


}



.clinic-about-content p{


font-size:15px;

line-height:1.8;

color:#5f6b78;

margin-bottom:18px;


}





/* HIGHLIGHTS */


.about-highlights{


display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

margin-top:30px;


}



.about-highlights div{


display:flex;

align-items:center;

gap:12px;


background:#f4fbff;


padding:15px;


border-radius:12px;


}



.about-highlights i{


font-size:22px;

color:#008fd0;


}



.about-highlights span{


font-size:14px;

font-weight:600;

color:#073b75;


}





/* RESPONSIVE */


@media(max-width:992px){


.about-clinic-container{

flex-direction:column;

}


.clinic-image-area,
.clinic-about-content{

width:100%;

}


.clinic-about-content h2{

font-size:34px;

}



}



@media(max-width:600px){


.about-clinic-section{

padding:60px 20px;

}


.clinic-main-image img{

height:350px;

}



.experience-card{

width:120px;

height:120px;

right:10px;

bottom:20px;

}



.experience-card h3{

font-size:35px;

}



.about-highlights{

grid-template-columns:1fr;

}



.clinic-about-content h2{

font-size:28px;

}


}

.mission-vision-section{


padding:90px 6%;

background:#f7fcff;

font-family:"Poppins",sans-serif;


}



.mv-container{


max-width:1200px;

margin:auto;


}




.mv-heading{

text-align:center;

max-width:650px;

margin:auto;

}



.mv-heading span{


color:#009bd6;

font-size:14px;

font-weight:700;

letter-spacing:1px;


}



.mv-heading h2{


font-size:42px;

color:#073b75;

margin:15px 0;


}



.mv-heading p{


color:#667085;

font-size:16px;

}





.mv-cards{


display:grid;

grid-template-columns:1fr 1fr;

gap:35px;

margin-top:50px;


}





.mv-card{


background:white;


padding:40px;


border-radius:25px;


position:relative;


overflow:hidden;


box-shadow:

0 15px 40px rgba(0,90,160,.08);


border:1px solid #e5f1f8;


transition:.4s;


}



.mv-card:hover{


transform:translateY(-8px);


box-shadow:

0 20px 45px rgba(0,100,180,.15);


}





.mv-card:before{


content:"";

position:absolute;

top:0;

left:0;


width:100%;

height:5px;


background:

linear-gradient(
90deg,
#0066b3,
#00c5dd
);


}





.mv-icon{


width:70px;

height:70px;


border-radius:50%;


display:flex;

align-items:center;

justify-content:center;


background:#e6f7ff;


color:#008fd1;


font-size:30px;


margin-bottom:25px;


}



.mv-card h3{


font-size:28px;

color:#073b75;

margin-bottom:18px;


}



.mv-card p{


color:#667085;

font-size:15px;

line-height:1.8;


}




.mv-card ul{


padding:0;

margin-top:25px;

list-style:none;


}



.mv-card ul li{


margin-bottom:15px;


font-size:14px;

color:#073b75;

font-weight:500;


}



.mv-card ul i{


color:#00a5d8;

margin-right:10px;


}





/* Responsive */


@media(max-width:900px){


.mv-cards{

grid-template-columns:1fr;

}


.mv-heading h2{

font-size:34px;

}


}



@media(max-width:600px){


.mission-vision-section{

padding:60px 20px;

}


.mv-card{

padding:30px 25px;

}


.mv-card h3{

font-size:24px;

}


}