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

/*==========================================
ROOT VARIABLES
==========================================*/
:root{

--primary:#00AEEF;
--secondary:#0077B6;
--dark:#0B1F35;
--light:#F8FBFF;
--white:#ffffff;
--text:#555555;
--shadow:0 10px 30px rgba(0,0,0,.08);
--radius:15px;
--transition:.4s ease;

}

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

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

body{

font-family:'Poppins',sans-serif;
font-size:16px;
color:var(--text);
background:#fff;
overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;
transition:var(--transition);

}

ul{

list-style:none;
padding:0;
margin:0;

}

section{

padding:100px 0;

}

.container{

max-width:1200px;

}

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

h1{

font-size:60px;
font-weight:800;
line-height:1.2;
color:var(--dark);

}

h2{

font-size:40px;
font-weight:700;
color:var(--dark);

}

h3{

font-size:30px;
font-weight:700;

}

h4{

font-size:24px;
font-weight:600;

}

h5{

font-size:18px;
color:var(--primary);
font-weight:600;

}

h6{

font-size:15px;
font-weight:600;
color:var(--primary);
text-transform:uppercase;
letter-spacing:2px;

}

p{

line-height:1.8;
margin-bottom:20px;

}

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

.btn{

padding:14px 35px;
border-radius:50px;
font-weight:600;
transition:.4s;

}

.btn-primary{

background:var(--primary);
border:none;

}

.btn-primary:hover{

background:var(--secondary);
transform:translateY(-3px);

}

.btn-outline-light{

border:2px solid #fff;
color:#fff;

}

.btn-outline-light:hover{

background:#fff;
color:var(--primary);

}

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

.navbar{

background:#fff;
box-shadow:var(--shadow);
padding:18px 0;
transition:.4s;

}

.navbar-brand{

font-size:28px;
font-weight:700;
color:var(--primary);

}

.navbar-brand i{

margin-right:10px;

}

.nav-link{

font-weight:500;
margin-left:20px;
color:var(--dark);

}

.nav-link:hover{

color:var(--primary);

}

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

.hero{

padding-top:170px;
padding-bottom:120px;

background:linear-gradient(135deg,#00AEEF,#0077B6);

color:#fff;

}

.hero h1{

color:#fff;
margin:20px 0;

}

.hero p{

color:#f2f2f2;
font-size:18px;

}

.hero img{

animation:float 4s ease infinite;

}

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

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

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

#about img{

border-radius:20px;
box-shadow:var(--shadow);

}

#about h3{

color:var(--primary);

}

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

.service-box{

background:#fff;
padding:40px;
border-radius:20px;
text-align:center;
box-shadow:var(--shadow);
transition:.4s;
height:100%;

}

.service-box:hover{

transform:translateY(-12px);

}

.service-box i{

font-size:50px;
color:var(--primary);
margin-bottom:25px;

}

.service-box h4{

margin-bottom:15px;

}

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

.doctor-card{

background:#fff;
text-align:center;
padding:20px;
border-radius:20px;
box-shadow:var(--shadow);
transition:.4s;

}

.doctor-card:hover{

transform:translateY(-10px);

}

.doctor-card img{

border-radius:20px;
margin-bottom:20px;

}

/*==========================================
GALLERY
==========================================*/

#gallery img{

border-radius:20px;
transition:.4s;

}

#gallery img:hover{

transform:scale(1.05);

}

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

.testimonial{

padding:35px;
background:#fff;
border-radius:20px;
box-shadow:var(--shadow);
text-align:center;

}

.testimonial h5{

margin-top:15px;

}

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

#appointment{

background:var(--light);

}

form{

background:#fff;
padding:40px;
border-radius:20px;
box-shadow:var(--shadow);

}

.form-control{

height:55px;
border-radius:12px;
margin-bottom:20px;

}

textarea.form-control{

height:auto;

}

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

.accordion-button{

font-weight:600;

}

.accordion-button:not(.collapsed){

background:var(--primary);
color:#fff;

}

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

#contact{

background:#fff;

}

#contact p{

font-size:18px;

}

#contact i{

color:var(--primary);
margin-right:12px;

}

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

footer{

background:#0B1F35;
color:#fff;
padding:60px 0;

}

footer h3{

margin-bottom:20px;

}

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

.whatsapp{

position:fixed;
bottom:30px;
right:30px;

width:60px;
height:60px;

background:#25D366;

border-radius:50%;

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

font-size:30px;
color:#fff;

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

z-index:999;

transition:.4s;

}

.whatsapp:hover{

transform:scale(1.15);
color:#fff;

}

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

@media(max-width:991px){

.hero{

text-align:center;

}

.hero img{

margin-top:40px;

}

h1{

font-size:42px;

}

h2{

font-size:32px;

}

.nav-link{

margin-left:0;
padding:10px 0;

}

}

@media(max-width:576px){

section{

padding:70px 0;

}

h1{

font-size:34px;

}

.btn{

display:block;
width:100%;
margin-bottom:15px;

}

.hero .btn-outline-light{

margin-left:0!important;

}

}

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

.section-title{
text-align:center;
margin-bottom:60px;
}

.section-title h6{
color:var(--primary);
letter-spacing:3px;
text-transform:uppercase;
margin-bottom:10px;
}

.section-title h2{
font-size:42px;
font-weight:700;
margin-bottom:15px;
}

.section-title p{
max-width:700px;
margin:auto;
}

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

.service-box{
position:relative;
overflow:hidden;
cursor:pointer;
}

.service-box::before{

content:'';
position:absolute;

left:-100%;
top:0;

width:100%;
height:100%;

background:linear-gradient(
135deg,
rgba(0,174,239,.08),
rgba(0,119,182,.18)
);

transition:.5s;

}

.service-box:hover::before{

left:0;

}

.service-box h4{

margin-top:15px;

}

.service-box p{

margin-top:15px;

}

.service-box:hover{

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

}

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

.doctor-card{

overflow:hidden;
position:relative;

}

.doctor-card img{

transition:.5s;

}

.doctor-card:hover img{

transform:scale(1.08);

}

.doctor-card h4{

margin-top:20px;

}

.doctor-card p{

margin-bottom:20px;

}

.doctor-social{

display:flex;
justify-content:center;
gap:12px;

}

.doctor-social a{

width:42px;
height:42px;

background:var(--primary);

border-radius:50%;

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

color:#fff;

transition:.4s;

}

.doctor-social a:hover{

background:var(--secondary);
transform:translateY(-5px);

}

/*==================================================
GALLERY
==================================================*/

.gallery-item{

overflow:hidden;
border-radius:18px;
position:relative;

}

.gallery-item img{

width:100%;
transition:.5s;

}

.gallery-item:hover img{

transform:scale(1.1);

}

.gallery-item::after{

content:"";

position:absolute;

left:0;
top:0;

width:100%;
height:100%;

background:rgba(0,174,239,.35);

opacity:0;

transition:.4s;

}

.gallery-item:hover::after{

opacity:1;

}

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

.testimonial{

position:relative;

}

.testimonial::before{

content:"❝";

font-size:70px;

position:absolute;

top:-15px;
left:25px;

color:rgba(0,174,239,.2);

}

.testimonial p{

margin-top:30px;

}

.testimonial h5{

font-weight:600;

}

.testimonial span{

font-size:14px;
color:#777;

}

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

.counter{

background:linear-gradient(135deg,#00AEEF,#0077B6);

padding:70px 0;

color:#fff;

}

.counter-box{

text-align:center;

}

.counter-box h2{

font-size:48px;
color:#fff;

}

.counter-box p{

color:#fff;

}

/*==================================================
WHY CHOOSE US
==================================================*/

.feature-box{

display:flex;
align-items:flex-start;

margin-bottom:30px;

}

.feature-icon{

width:70px;
height:70px;

background:var(--primary);

border-radius:15px;

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

font-size:28px;
color:#fff;

margin-right:20px;

flex-shrink:0;

}

.feature-content h4{

margin-bottom:10px;

}

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

form{

transition:.4s;

}

form:hover{

box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.form-control{

border:1px solid #ddd;

}

.form-control:focus{

border-color:var(--primary);

box-shadow:none;

}

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

.btn{

overflow:hidden;
position:relative;

}

.btn::before{

content:"";

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

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

transition:.4s;

}

.btn:hover::before{

left:100%;

}

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

footer{

position:relative;

}

footer p{

opacity:.8;

}

footer a{

color:#fff;

}

footer a:hover{

color:#00AEEF;

}

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

.hero{
position:relative;
overflow:hidden;
}

.hero::before{

content:"";

position:absolute;

width:500px;
height:500px;

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

border-radius:50%;

top:-220px;
right:-120px;

}

.hero::after{

content:"";

position:absolute;

width:350px;
height:350px;

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

border-radius:50%;

bottom:-180px;
left:-100px;

}

/*==================================================
GLASS EFFECT
==================================================*/

.glass{

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

backdrop-filter:blur(18px);

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

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

border-radius:20px;

}

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

.img-hover{

overflow:hidden;

border-radius:20px;

}

.img-hover img{

transition:.6s;

}

.img-hover:hover img{

transform:scale(1.12);

}

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

.bg-light-blue{

background:#F6FCFF;

}

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

.service-box i{

transition:.4s;

}

.service-box:hover i{

transform:rotateY(180deg);

color:var(--secondary);

}

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

.doctor-card{

position:relative;

}

.doctor-card::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:5px;

background:var(--primary);

transform:scaleX(0);

transition:.4s;

}

.doctor-card:hover::after{

transform:scaleX(1);

}

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

.doctor-card img{

border-radius:20px;

height:350px;

object-fit:cover;

}

/*==================================================
LIST STYLE
==================================================*/

.check-list{

padding:0;

}

.check-list li{

margin-bottom:15px;

font-size:17px;

}

.check-list li i{

color:#00AEEF;

margin-right:12px;

}

/*==================================================
GALLERY
==================================================*/

.gallery-item{

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

}

.gallery-item img{

height:260px;

object-fit:cover;

}

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

.testimonial{

transition:.4s;

}

.testimonial:hover{

transform:translateY(-10px);

}

.testimonial img{

width:70px;

height:70px;

border-radius:50%;

margin:auto;

margin-bottom:15px;

}

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

.contact-box{

padding:35px;

background:#fff;

border-radius:20px;

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

margin-bottom:25px;

transition:.4s;

}

.contact-box:hover{

transform:translateY(-8px);

}

.contact-box i{

font-size:32px;

color:var(--primary);

margin-bottom:15px;

}

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

footer{

background:#061B2D;

}

footer h3{

color:#fff;

margin-bottom:25px;

}

footer ul{

padding:0;

}

footer li{

margin-bottom:12px;

}

footer li a{

color:#ddd;

}

footer li a:hover{

padding-left:10px;

color:#00AEEF;

}

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

.social-icons{

display:flex;

gap:15px;

}

.social-icons a{

width:45px;

height:45px;

background:#00AEEF;

color:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

transition:.4s;

}

.social-icons a:hover{

background:#0077B6;

transform:translateY(-5px);

}

/*==================================================
SCROLL TOP
==================================================*/

.scroll-top{

position:fixed;

right:25px;

bottom:100px;

width:55px;

height:55px;

background:#0077B6;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.4s;

z-index:999;

}

.scroll-top.active{

opacity:1;

visibility:visible;

}

.scroll-top:hover{

background:#00AEEF;

}

/*==================================================
PRELOADER
==================================================*/

.preloader{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}

.loader{

width:70px;

height:70px;

border-radius:50%;

border:6px solid #ddd;

border-top:6px solid #00AEEF;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

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

.fade-up{

animation:fadeUp 1s;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

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

.pulse{

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(0,174,239,.6);

}

70%{

box-shadow:0 0 0 20px rgba(0,174,239,0);

}

100%{

box-shadow:0 0 0 0 rgba(0,174,239,0);

}

}

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

@media(max-width:991px){

.doctor-card img{

height:300px;

}

.gallery-item img{

height:220px;

}

}

@media(max-width:768px){

.hero{

text-align:center;

}

.hero::before,
.hero::after{

display:none;

}

.section-title h2{

font-size:32px;

}

.counter-box{

margin-bottom:30px;

}

}

@media(max-width:576px){

.service-box{

padding:25px;

}

.doctor-card{

margin-bottom:30px;

}

.gallery-item img{

height:180px;

}

.contact-box{

padding:20px;

}

}

/*==========================================
BEFORE AFTER SECTION
==========================================*/

.before-card{

background:#fff;

border-radius:20px;

overflow:hidden;

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

transition:.4s;

}

.before-card:hover{

transform:translateY(-10px);

}

.before-image,
.after-image{

position:relative;

overflow:hidden;

}

.before-image img,
.after-image img{

width:100%;

height:220px;

object-fit:cover;

transition:.5s;

}

.before-card:hover img{

transform:scale(1.08);

}

.before-label{

position:absolute;

left:15px;

top:15px;

background:#dc3545;

color:#fff;

padding:8px 18px;

border-radius:30px;

font-size:14px;

font-weight:600;

}

.after-label{

position:absolute;

left:15px;

top:15px;

background:#198754;

color:#fff;

padding:8px 18px;

border-radius:30px;

font-size:14px;

font-weight:600;

}

.before-content{

padding:25px;

text-align:center;

}

.before-content h4{

margin-bottom:15px;

font-weight:700;

}

.before-content p{

margin:0;

}