/*==================================================
GOOGLE FONTS: Outfit (Headings) & Plus Jakarta Sans (Body)
==================================================*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color:#1d3557;
    background:#ffffff;
    overflow-x:hidden;
}

h1, h2, h3, h4, h5, h6,
.section-subtitle,
.sub-title,
.banner-subtitle,
.gallery-subtitle,
.section-title h2 {
    font-family:'Outfit', sans-serif !important;
}

/*==================================================
GLOBAL PARAGRAPH & TEXT COLOR OVERRIDES
==================================================*/
body, p, li, span, div, input, textarea, select, label {
    font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

p {
    color:#111827;
    line-height:1.65;
}

.hero-left p,
.about-content p,
.doctor-content p,
.service-content p,
.faq-answer p,
.contact-box p,
.info-item p,
.gallery-heading p,
.blog-heading p,
.review-content p {
    color:#111827 !important;
    font-family:'Plus Jakarta Sans', sans-serif !important;
}

a{
    text-decoration:none;
}

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

.container{
    max-width:1336px;
}

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

.header-area{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    padding:18px 0;
    background: white;
}

.navbar-brand img{
    height:72px;
}

.navbar-nav{
    gap:18px;
}

.nav-link{
    color:#243b53;
    font-size:14px;
    font-weight:600;
    letter-spacing:.5px;
    transition:.35s;
}

.nav-link:hover,
.nav-link.active{
    color:#2b7be4;
}

.contact-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:145px;
    height:48px;
    border:2px solid #2b7be4;
    border-radius:8px;
    color:#2b7be4;
    font-size:14px;
    font-weight:600;
    transition:.4s;
}

.contact-btn:hover{
    background:#2b7be4;
    color:#fff;
}

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

.hero-section{
    position:relative;
    overflow:hidden;
    padding-top:120px;
    padding-bottom:120px;
    background-image:
        linear-gradient(135deg, rgba(238,247,255,.9) 0%, rgba(214,235,255,.8) 55%, rgba(184,217,255,.95) 100%),
        url('assets/img/Vector (2).png');
    background-size:cover;
    background-position:center;
}

.hero-section::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top center, rgba(255,255,255,.45) 0%, transparent 55%);
    pointer-events:none;
}

.hero-background-icon{
    position:absolute;
    top:40px;
    left:50%;
    transform:translateX(-50%);
    width:125px;
    height:125px;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 20px 50px rgba(24,75,128,.16);
    z-index:5;
}

.hero-background-icon i{
    color:#2b7be4;
    font-size:36px;
}

/* Decorative Circles */

.hero-section::before{
    content:'';
    position:absolute;
    width:520px;
    height:520px;
    background:rgba(255,255,255,.18);
    border-radius:50%;
    left:-170px;
    top:180px;
}

.hero-section::after{
    content:'';
    position:absolute;
    width:420px;
    height:420px;
    background:rgba(255,255,255,.16);
    border-radius:50%;
    right:-100px;
    top:-80px;
}

/* Left */

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

.hero-left h1{
    font-size:64px;
    line-height:1.15;
    font-weight:600;
    color:#20435c;
    margin-bottom:20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.hero-left h3{
    font-size:32px;
    line-height:1.5;
    font-weight:500;
    color:#32536d;
    margin-bottom:18px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.hero-left p{
    font-size:24px;
    color:#111827;
    margin-bottom:38px;
    max-width:520px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Button */

.hero-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:#2b7be4;
    color:#fff;
    height:58px;
    padding:0 32px;
    border-radius:50px;
    font-weight:600;
    transition:.4s;
    box-shadow:0 15px 35px rgba(43,123,228,.25);
}

.hero-btn:hover{
    transform:translateY(-5px);
    color:#fff;
}

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

.hero-right{
    position:relative;
    min-height:720px;
}

.doctor-image{
    position:absolute;
    right:0;
    bottom:-20px;
    width:680px;
    z-index:5;
}

.doctor-image img{
    width:100%;
}

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

.patient-card{
    position:absolute;
    left:-10px;
    bottom:170px;
    width:310px;
    background:#fff;
    border-radius:70px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 22px;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
    z-index:30;
}

.patient-images{
    display:flex;
}

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

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

.patient-card h4{
    font-size:28px;
    font-weight:700;
    margin-bottom:0;
    color:#2b7be4;
}

.patient-card span{
    font-size:13px;
    color:#111827;
}

.verify{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#2b7be4;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

/*==================================================
RIGHT FLOAT CARD
==================================================*/

.doctor-card{
    position:absolute;
    right:-20px;
    top:110px;
    width:190px;
    background:#fff;
    border-radius:28px;
    padding:22px;
    text-align:center;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
    z-index:30;
}

.doctor-users{
    display:flex;
    justify-content:center;
    margin-bottom:12px;
}

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

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

.doctor-card h4{
    color:#2b7be4;
    font-size:34px;
    font-weight:700;
    margin-bottom:4px;
}

.doctor-card p{
    font-size:15px;
    color:#111827;
}

/*==================================================
BLUE STRIP
==================================================*/

.hero-strip{
    position:absolute;
    bottom:140px;
    left:0;
    width:100%;
    background:#2b7be4;
    padding:13px 0;
    z-index:2;
}

.hero-strip p{
    margin:0;
    color:#fff;
    font-size:19px;
    font-weight:600;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

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

.contact-info{
    position:relative;
    margin-top:-116px;
    z-index:50;
}

.contact-box{
    background:#fff;
    border-radius:22px;
    padding:35px;
    box-shadow:0 20px 60px rgba(0,0,0,.10);
}

.info-item{
    display:flex;
    align-items:center;
    gap:18px;
}

.icon{
    width:65px;
    height:65px;
    border-radius:50%;
    background:#2b7be4;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

.info-item h5{
    font-size:16px;
    font-weight:700;
    margin-bottom:5px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.info-item p{
    margin:0;
    color:#111827;
    font-size:15px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.book-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:190px;
    height:58px;
    border-radius:50px;
    background:#2b7be4;
    color:#fff;
    font-weight:600;
    transition:.4s;
    box-shadow:0 15px 35px rgba(43,123,228,.20);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.book-btn:hover{
    color:#fff;
    transform:translateY(-4px);
}

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

.doctor-image{
    animation:floatDoctor 4s ease-in-out infinite;
}

.patient-card,
.doctor-card{
    animation:floatCard 3.5s ease-in-out infinite;
}

@keyframes floatDoctor{

    0%{
        transform:translateY(0px);
    }

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

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

}

@keyframes floatCard{

    0%{
        transform:translateY(0px);
    }

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

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

}
/*==================================================
LARGE DEVICES
==================================================*/

@media (max-width:1400px){

.hero-left h1{
font-size:52px;
}

.hero-left h3{
font-size:26px;
}

.doctor-image{
width:620px;
}

.hero-right{
min-height:650px;
}

}


/*==================================================
LAPTOP
==================================================*/

@media (max-width:1200px){

.header-area{
padding:15px 0;
}

.navbar-brand img{
height:60px;
}

.hero-section{
padding-top:140px;
padding-bottom:150px;
}

.hero-left h1{
font-size:46px;
}

.hero-left h3{
font-size:24px;
}

.hero-left p{
font-size:18px;
}

.hero-right{
min-height:600px;
}

.doctor-image{
width:560px;
right:-20px;
}

.patient-card{
left:0;
bottom:130px;
transform:scale(.9);
}

.doctor-card{
right:0;
top:80px;
transform:scale(.9);
}

.contact-box{
padding:25px;
}

.book-btn{
width:170px;
}

}


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

@media (max-width:991px){

.header-area{
position:relative;
background:#fff;
padding:12px 0;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.navbar-toggler{
border:none;
box-shadow:none !important;
padding:8px;
}

.navbar-toggler:focus{
box-shadow:none;
}

.navbar-collapse{
background:#fff;
padding:20px;
margin-top:15px;
border-radius:15px;
box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.navbar-collapse:not(.show){
display:none;
}

.navbar-nav{
gap:0;
}

.nav-link{
padding:14px 0;
}

.contact-btn{
margin-top:15px;
width:100%;
}

.hero-section{
padding-top:70px;
padding-bottom:120px;
text-align:center;
}

.hero-left{
margin-bottom:60px;
}

.hero-left h1{
font-size:42px;
}

.hero-left h3{
font-size:24px;
}

.hero-left p{
margin:auto;
margin-bottom:30px;
}

.hero-btn{
margin:auto;
}

.hero-right{
min-height:560px;
}

.doctor-image{
position:relative;
width:480px;
margin:auto;
right:auto;
bottom:auto;
}

.patient-card{
left:50%;
transform:translateX(-50%);
bottom:15px;
}

.doctor-card{
right:20px;
top:20px;
}

.hero-strip{
bottom:170px;
}

.contact-info{
margin-top:-198px;
}

.contact-box .row>div{
margin-bottom:25px;
}

.contact-box .row>div:last-child{
margin-bottom:0;
}

.book-btn{
width:100%;
}

}


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

@media (max-width:767px){

.hero-section{

padding-top:50px;

padding-bottom:100px;

}

.hero-left h1{

font-size:34px;

line-height:1.25;

}

.hero-left h3{

font-size:20px;

}

.hero-left p{

font-size:16px;

}

.hero-btn{

height:52px;

padding:0 26px;

font-size:15px;

}

.hero-right{

min-height:420px;

}

.doctor-image{

width:400px;

}

.patient-card{

width:260px;

padding:12px 18px;

bottom:-10px;

}

.patient-images img{

width:42px;

height:42px;

}

.patient-card h4{

font-size:22px;

}

.patient-card span{

font-size:11px;

}

.verify{

width:34px;

height:34px;

font-size:14px;

}

.doctor-card{

width:140px;

padding:15px;

top:10px;

right:0;

}

.doctor-users img{

width:34px;

height:34px;

}

.doctor-card h4{

font-size:24px;

}

.doctor-card p{

font-size:13px;

}

.hero-strip{

display:none;

}

.contact-box{

padding:20px;

border-radius:18px;

}

.info-item{

flex-direction:column;

text-align:center;

gap:12px;

}
.contact-info{
margin-top:-178px;
}
.icon{

width:58px;

height:58px;

font-size:20px;

}

.info-item h5{

font-size:16px;

}

.info-item p{

font-size:14px;

}

.book-btn{

height:54px;

}

}


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

@media (max-width:575px){

.navbar-brand img{

height:52px;

}

.hero-left h1{

font-size:30px;

}

.hero-left h3{

font-size:18px;

}

.hero-left p{

font-size:15px;

}

.hero-right{

min-height:360px;

}

.doctor-image{

width:350px;

}

.patient-card{

width:230px;

padding:10px 15px;

}

.patient-images img{

width:36px;

height:36px;

}

.patient-card h4{

font-size:18px;

}

.patient-card span{

font-size:10px;

}

.verify{

width:30px;

height:30px;

font-size:12px;

}
    .contact-info {
        margin-top: -150px;
    }
.doctor-card{

width:120px;

padding:12px;

}

.doctor-card h4{

font-size:20px;

}

.doctor-card p{

font-size:12px;

}

.contact-box{

padding:18px;
        margin-top: -202px;

}

.info-item{

padding:8px 0;

}

.book-btn{

width:100%;

font-size:15px;

}

}


/*==================================================
EXTRA SMALL
==================================================*/

@media (max-width:390px){

.hero-left h1{

font-size:26px;

}

.hero-left h3{

font-size:17px;

}

.hero-left p{

font-size:14px;

}

.doctor-image{

width:230px;

}

.patient-card{

width:205px;

padding:8px 12px;

}

.patient-images img{

width:32px;

height:32px;

}

.patient-card h4{

font-size:16px;

}

.doctor-card{

display:none;

}

.contact-box{

padding:15px;

}

.icon{

width:52px;

height:52px;

}

.info-item h5{

font-size:15px;

}

.info-item p{

font-size:13px;

}

.book-btn{

height:50px;

}

}
/* Sticky Header */
.header-area.sticky{
position:fixed;
top:0;
left:0;
width:100%;
background:#ffffff;
padding:12px 0;
box-shadow:0 10px 30px rgba(0,0,0,.08);
animation:slideDown .4s ease;
}

@keyframes slideDown{
from{
transform:translateY(-100%);
}
to{
transform:translateY(0);
}
}

/* Scroll Reveal */
.hidden{
opacity:0;
transform:translateY(60px);
transition:.8s;
}

.show{
opacity:1;
transform:translateY(0);
}

/* Fade */
.fade-in{
opacity:1!important;
transform:translateY(0)!important;
transition:.8s;
}

/* Ripple */
.hero-btn,
.book-btn,
.contact-btn{
overflow:hidden;
position:relative;
}

.ripple{
position:absolute;
border-radius:50%;
background:rgba(255,255,255,.45);
transform:scale(0);
animation:ripple .7s linear;
pointer-events:none;
}

@keyframes ripple{
to{
transform:scale(4);
opacity:0;
}
}
/*==================================================
ABOUT SECTION
==================================================*/

.about-section{
    position:relative;
    padding:100px 0;
    background:#ffffff;
    overflow:hidden;
    margin-top: 80px;
}

.about-section::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    background:rgba(43,123,228,.05);
    border-radius:50%;
    top:-140px;
    right:-120px;
}

.about-section::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    background:rgba(43,123,228,.04);
    border-radius:50%;
    left:-120px;
    bottom:-120px;
}

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

.about-image-wrapper{
    position:relative;
    min-height:620px;
}

/* Main Image */

.about-main-image{
    position:absolute;
    top:0;
    left:0;
    width:480px;
    height:500px;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(0,0,0,.12);
    z-index:2;
}

.about-main-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.about-main-image:hover img{
    transform:scale(1.08);
}

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

.doctor-image-box{
    position:absolute;
    bottom:0;
    right:40px;
    width:260px;
    height:250px;
    z-index:5;
}

.doctor-bg{
    position:absolute;
    width:100%;
    height:100%;
    /* background:linear-gradient(145deg,#2b7be4,#4ea1ff); */
    clip-path:polygon(50% 0%,100% 12%,100% 75%,50% 100%,0% 75%,0% 12%);
    border-radius:20px;
    box-shadow:0 25px 45px rgba(43,123,228,.30);
}

.doctor-image-box img{
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:220px;
    z-index:2;
}

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

.quality-badge{
    position:absolute;
    top:-25px;
    right:55px;
    width:120px;
    height:120px;
    z-index:20;
}

.badge-circle{
    width:120px;
    height:120px;
    border-radius:50%;
    background:#fff;
    border:8px solid #ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
    animation:rotateBadge 10s linear infinite;
}

.badge-circle img{
    width:34px;
    margin:6px 0;
}

.badge-circle span{
    font-size:12px;
    color:#111827;
    font-weight:600;
    text-align:center;
}

/*==================================================
SMALL DECORATIVE IMAGE
==================================================*/

.small-image{
    position:absolute;
    bottom:40px;
    left:20px;
    width:130px;
    height:130px;
    border-radius:20px;
    overflow:hidden;
    border:6px solid #fff;
    box-shadow:0 20px 40px rgba(0,0,0,.12);
    z-index:8;
}

.small-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
}

.small-image:hover img{
    transform:scale(1.1);
}

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

.about-content{
    padding-left:40px;
}

.sub-title{
    display:inline-block;
    color:#2b7be4;
    font-size:15px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:15px;
    text-transform:uppercase;
}

.about-content h2{
    font-size:52px;
    font-weight:600;
    color:#20435c;
    margin-bottom:12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.about-content h5{
    color:#2b7be4;
    font-size:25px;
    font-weight:500;
    margin-bottom:25px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.about-content p{
    color:#111827;
    line-height:1.9;
    font-size:18px;
    margin-bottom:18px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

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

.about-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-top:30px;
}

.feature-item{
    display:flex;
    align-items:center;
    gap:12px;
    background:#f8fbff;
    border-radius:12px;
    padding:14px 18px;
    transition:.35s;
}

.feature-item:hover{
    background:#2b7be4;
    transform:translateY(-5px);
}

.feature-item i{
    color:#2b7be4;
    font-size:22px;
    transition:.3s;
}

.feature-item span{
    font-size:15px;
    font-weight:600;
    color:#111827;
    transition:.3s;
}

.feature-item:hover i,
.feature-item:hover span{
    color:#fff;
}

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

.about-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:16px 34px;
    border-radius:50px;
    background:#2b7be4;
    color:#fff;
    font-weight:600;
    transition:.35s;
    box-shadow:0 15px 35px rgba(43,123,228,.25);
}

.about-btn:hover{
    color:#fff;
    transform:translateY(-5px);
    background:#1b67cb;
}

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

.about-main-image,
.doctor-image-box,
.small-image{
    animation:floatImage 5s ease-in-out infinite;
}

@keyframes floatImage{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

@keyframes rotateBadge{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

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

.about-image-wrapper:hover .doctor-image-box{
    transform:translateY(-8px);
    transition:.4s;
}

.about-image-wrapper:hover .quality-badge{
    transform:scale(1.08);
    transition:.4s;
}
/*==========================================
LARGE LAPTOP (1400px)
==========================================*/

@media (max-width:1400px){

.about-main-image{
width:430px;
height:470px;
}

.doctor-image-box{
width:240px;
height:230px;
}

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

.about-content{
padding-left:30px;
}

}


/*==========================================
LAPTOP (1200px)
==========================================*/

@media (max-width:1199px){

.about-section{
padding:90px 0;
}

.about-image-wrapper{
min-height:560px;
}

.about-main-image{
width:390px;
height:430px;
}

.doctor-image-box{
width:220px;
height:210px;
right:20px;
}

.doctor-image-box img{
width:190px;
}

.quality-badge{
right:30px;
}

.small-image{
width:110px;
height:110px;
}

.about-content{
padding-left:20px;
}

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

.about-content h5{
font-size:20px;
}

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

}


/*==========================================
TABLET (991px)
==========================================*/

@media (max-width:991px){

.about-section{
padding:80px 0;
}

.about-image-wrapper{
min-height:560px;
margin-bottom:60px;
}

.about-main-image{
position:relative;
margin:auto;
left:auto;
width:100%;
max-width:500px;
height:420px;
}

.doctor-image-box{
right:50%;
transform:translateX(50%);
bottom:-20px;
}

.small-image{
left:30px;
bottom:40px;
}

.quality-badge{
top:-20px;
right:20px;
}

.about-content{
padding-left:0;
text-align:center;
}

.about-content p{
max-width:700px;
margin-left:auto;
margin-right:auto;
}

.about-features{
grid-template-columns:repeat(2,1fr);
}

.about-btn{
margin:auto;
}

}


/*==========================================
MOBILE (767px)
==========================================*/

@media (max-width:767px){

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

.about-image-wrapper{
min-height:470px;
}

.about-main-image{
height:340px;
border-radius:22px;
}

.doctor-image-box{
width:180px;
height:180px;
bottom:-10px;
}

.doctor-image-box img{
width:155px;
}

.small-image{
width:90px;
height:90px;
left:15px;
bottom:50px;
}

.quality-badge{
width:90px;
height:90px;
top:-10px;
right:10px;
}

.badge-circle{
width:90px;
height:90px;
border-width:6px;
}

.badge-circle img{
width:24px;
}

.badge-circle span{
font-size:10px;
}

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

.about-content h5{
font-size:18px;
}

.about-content p{
font-size:15px;
line-height:1.8;
}

.about-features{
grid-template-columns:1fr;
gap:14px;
}

.feature-item{
padding:14px;
}

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

}


/*==========================================
SMALL MOBILE (575px)
==========================================*/

@media (max-width:575px){

.about-section{
padding:60px 0;
}

.about-image-wrapper{
min-height:400px;
}

.about-main-image{
        height: 373px;
}

.doctor-image-box{
width:160px;
height:160px;
}

.doctor-image-box img{
width:140px;
}

.small-image{
display:none;
}

.quality-badge{
width:75px;
height:75px;
right:5px;
}

.badge-circle{
width:75px;
height:75px;
}

.badge-circle img{
width:20px;
}

.badge-circle span{
font-size:9px;
}

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

.about-content h5{
font-size:17px;
}

.about-content p{
font-size:14px;
}

.feature-item{
padding:12px;
}

.feature-item span{
font-size:14px;
}

.feature-item i{
font-size:18px;
}

}


/*==========================================
EXTRA SMALL (390px)
==========================================*/

@media (max-width:390px){

.about-section{
padding:50px 0;
}

.about-image-wrapper{
min-height:360px;
}

.about-main-image{
height:240px;
}

.doctor-image-box{
width:135px;
height:135px;
bottom:0;
}

.doctor-image-box img{
width:120px;
}

.quality-badge{
width:65px;
height:65px;
}

.badge-circle{
width:65px;
height:65px;
}

.badge-circle img{
width:18px;
}

.badge-circle span{
display:none;
}

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

.about-content h5{
font-size:16px;
}

.about-content p{
font-size:13px;
}

.feature-item{
padding:10px;
}

.feature-item span{
font-size:13px;
}

.about-btn{
height:52px;
font-size:14px;
padding:0 20px;
}

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


/*=========================
 SERVICE SECTION
==========================*/

.service-section{
    padding:80px 0;
    background:#fff;
    overflow:hidden;
}

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

.section-title h2{
    font-size:52px;
    font-weight:600;
    color:#21496b;
    position:relative;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.section-title h2::after{
    content:"";
    width:80px;
    height:4px;
    background:#2d6fb4;
    display:block;
    margin:15px auto 0;
    border-radius:20px;
}

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

.serviceSwiper{
    padding:10px 5px 60px;
}

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

.service-card{
    background:#fff;
    border:1px solid #e8e8e8;
    transition:.35s;
    position:relative;
    overflow:hidden;
}

.service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

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

.service-img{
    padding:16px;
}

.service-img img{
    width:100%;
    height:270px;
    object-fit:cover;
}

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

.service-icon{
        position: absolute;
    left: 18px;
    top: 258px;
    width: 67px;
    height: 59px;
    background: #2b71b7;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .15);
}


.service-icon img{
    width:43px;
    filter:brightness(0) invert(1);
}

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

.service-content{
    padding:30px 18px 22px;
}

.service-content h3{
    font-size:24px;
    font-weight:600;
    color:#1d1d1d;
    margin-bottom:14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.service-content p{
    font-size:14px;
    line-height:1.8;
    color:#111827;
    margin-bottom:28px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

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

.book-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#2d6fb4;
    color:#fff;
    padding:13px 28px;
    border-radius:40px;
    font-size:15px;
    font-weight:500;
    transition:.35s;
}

.book-btn i{
    transition:.35s;
}

.book-btn:hover{
    background:#173f67;
}

.book-btn:hover i{
    transform:translateX(5px);
}

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

.swiper-button-next,
.swiper-button-prev{
    width:46px;
    height:46px;
    border-radius:50%;
    background:#2d6fb4;
    color:#fff;
    transition:.3s;
}

.swiper-button-next:hover,
.swiper-button-prev:hover{
    background:#173f67;
}

.swiper-button-next::after,
.swiper-button-prev::after{
    font-size:16px;
    font-weight:bold;
}

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

.swiper-pagination{
    margin-top:20px;
}

.swiper-pagination-bullet{
    width:10px;
    height:10px;
    background:#b5b5b5;
    opacity:1;
}

.swiper-pagination-bullet-active{
    width:30px;
    border-radius:20px;
    background:#2d6fb4;
}
/*=========================
  LARGE DESKTOP
==========================*/
@media (max-width:1400px){

    .container{
        width:92%;
    }

    .section-title h2{
        font-size:42px;
    }

}

/*=========================
  LAPTOP
==========================*/
@media (max-width:1200px){

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

    .service-content p{
        font-size:13px;
    }

    .book-btn{
        padding:12px 24px;
        font-size:14px;
    }

}

/*=========================
  TABLET
==========================*/
@media (max-width:991px){

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

    .section-title{
        margin-bottom:45px;
    }

    .section-title h2{
        font-size:36px;
    }

    .service-img img{
        height:220px;
    }

    .service-icon{
        top:195px;
    }

    .service-content{
        padding:32px 18px 20px;
    }

    .swiper-button-next,
    .swiper-button-prev{
        width:42px;
        height:42px;
    }

}

/*=========================
  MOBILE
==========================*/
@media (max-width:767px){

    .service-section{
        padding:60px 0;
    }

    .container{
        width:94%;
    }

    .section-title{
        margin-bottom:35px;
    }

    .section-title h2{
        font-size:30px;
    }

    .section-title h2::after{
        width:60px;
        margin-top:12px;
    }

    .service-card{
        border-radius:8px;
    }

    .service-img{
        padding:14px;
    }

    .service-img img{
        height:220px;
    }

    .service-icon{
        width:52px;
        height:52px;
        left:20px;
        top:195px;
    }

    .service-icon img{
        width:28px;
    }

    .service-content{
        padding:35px 18px 20px;
    }

    .service-content h3{
        font-size:22px;
        margin-bottom:12px;
    }

    .service-content p{
        font-size:14px;
        line-height:1.8;
        margin-bottom:25px;
    }

    .book-btn{
        width:100%;
        justify-content:center;
        padding:14px;
        font-size:15px;
    }

    .swiper-button-next,
    .swiper-button-prev{
        display:none;
    }

}

/*=========================
  SMALL MOBILE
==========================*/
@media (max-width:480px){

    .service-section{
        padding:50px 0;
    }

    .section-title h2{
        font-size:26px;
    }

    .service-img img{
        height:190px;
    }

    .service-icon{
        width:48px;
        height:48px;
        top:170px;
    }

    .service-icon img{
        width:24px;
    }

    .service-content{
        padding:32px 16px 18px;
    }

    .service-content h3{
        font-size:20px;
    }

    .service-content p{
        font-size:13px;
    }

    .book-btn{
        padding:13px;
        font-size:14px;
    }

}
/*==================================
        VIDEO SECTION
==================================*/

.video-section{
    padding:80px 0;
    background:#ffffff;
    overflow:hidden;
}

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

.video-section .section-title h2{
    font-size:52px;
    font-weight:600;
    color:#294867;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

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

.videoSwiper{
    padding:10px 5px 65px;
}

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

.video-card{
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    border:1px solid #edf1f6;
    transition:.35s;
    box-shadow:0 8px 22px rgba(0,0,0,.06);
}

.video-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

/*==================================
        THUMBNAIL
==================================*/

.video-thumbnail{
    position:relative;
    overflow:hidden;
    height:190px;
}

.video-thumbnail img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.video-card:hover .video-thumbnail img{
    transform:scale(1.08);
}

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

.play-btn{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:64px;
    height:64px;
    background:#ff0000;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
    transition:.35s;
    text-decoration:none;
    box-shadow:0 12px 30px rgba(255,0,0,.35);
}

.play-btn:hover{
    background:#d40000;
    transform:translate(-50%,-50%) scale(1.08);
}

.play-btn i{
    margin-left:3px;
}

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

.video-content{
    padding:22px;
}

.video-date{
    display:block;
    font-size:13px;
    color:#8a97a8;
    margin-bottom:16px;
}

.video-content h3{
    font-size:24px;
    font-weight:500;
    line-height:1.45;
    color:#23405f;
    margin-bottom:18px;
    transition:.3s;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.video-card:hover h3{
    color:#0f6cc8;
}

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

.visit-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#21496b;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.visit-btn::after{
    content:"→";
    transition:.3s;
}

.visit-btn:hover{
    color:#0b6bd3;
}

.visit-btn:hover::after{
    transform:translateX(5px);
}

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

.videoSwiper .swiper-button-next,
.videoSwiper .swiper-button-prev{
    width:46px;
    height:46px;
    background:#0f6cc8;
    color:#fff;
    border-radius:50%;
    transition:.3s;
}

.videoSwiper .swiper-button-next:hover,
.videoSwiper .swiper-button-prev:hover{
    background:#083f73;
}

.videoSwiper .swiper-button-next::after,
.videoSwiper .swiper-button-prev::after{
    font-size:16px;
    font-weight:700;
}

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

.videoSwiper .swiper-pagination{
    bottom:0;
}

.videoSwiper .swiper-pagination-bullet{
    width:10px;
    height:10px;
    background:#b8c4d3;
    opacity:1;
    transition:.3s;
}

.videoSwiper .swiper-pagination-bullet-active{
    width:30px;
    border-radius:30px;
    background:#0f6cc8;
}
/*=========================================
        LARGE DESKTOP
=========================================*/
@media (max-width:1400px){

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

    .video-section .section-title h2{
        font-size:44px;
    }

}

/*=========================================
        LAPTOP
=========================================*/
@media (max-width:1200px){

    .video-thumbnail{
        height:180px;
    }

    .video-content{
        padding:20px;
    }

    .video-content h3{
        font-size:24px;
    }

    .play-btn{
        width:60px;
        height:60px;
        font-size:20px;
    }

}

/*=========================================
        TABLET
=========================================*/
@media (max-width:991px){

    .video-section{
        padding:60px 0;
    }

    .video-section .section-title{
        margin-bottom:40px;
    }

    .video-section .section-title h2{
        font-size:36px;
    }

    .video-thumbnail{
        height:220px;
    }

    .video-content{
        padding:22px;
    }

    .video-content h3{
        font-size:22px;
        line-height:1.5;
    }

    .video-date{
        font-size:13px;
    }

    .visit-btn{
        font-size:15px;
    }

}

/*=========================================
        MOBILE
=========================================*/
@media (max-width:767px){

    .video-section{
        padding:50px 0;
    }

    .video-section .section-title{
        margin-bottom:30px;
    }

    .video-section .section-title h2{
        font-size:30px;
    }

    .videoSwiper{
        padding-bottom:55px;
    }

    .video-card{
        border-radius:12px;
    }

    .video-thumbnail{
        height:210px;
    }

    .play-btn{
        width:58px;
        height:58px;
        font-size:18px;
    }

    .video-content{
        padding:18px;
    }

    .video-date{
        font-size:12px;
        margin-bottom:12px;
    }

    .video-content h3{
        font-size:20px;
        line-height:1.5;
        margin-bottom:15px;
    }

    .visit-btn{
        font-size:15px;
    }

    /* Hide arrows on mobile */

    .videoSwiper .swiper-button-next,
    .videoSwiper .swiper-button-prev{
        display:none;
    }

}

/*=========================================
        SMALL MOBILE
=========================================*/
@media (max-width:480px){

    .video-section{
        padding:45px 0;
    }

    .video-section .section-title h2{
        font-size:26px;
    }

    .video-thumbnail{
        height:190px;
    }

    .play-btn{
        width:52px;
        height:52px;
        font-size:16px;
    }

    .video-content{
        padding:16px;
    }

    .video-date{
        font-size:11px;
    }

    .video-content h3{
        font-size:18px;
        line-height:1.5;
    }

    .visit-btn{
        font-size:14px;
    }

}

/*=========================================
        EXTRA SMALL
=========================================*/
@media (max-width:360px){

    .video-thumbnail{
        height:170px;
    }

    .video-content h3{
        font-size:17px;
    }

    .play-btn{
        width:48px;
        height:48px;
        font-size:15px;
    }

}
/*==========================
    REVIEW SECTION
===========================*/

.review-section{
    padding:90px 0;
    background:#fff;
    overflow:hidden;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.review-heading{
    text-align:center;
    margin-bottom:60px;
}

.review-heading h2{
    font-size:52px;
    font-weight:600;
    color:#294867;
    margin-bottom:8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.review-heading span{
    font-size:20px;
    font-weight:600;
    color:#2f7edb;
    letter-spacing:1px;
}

.review-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}

/*==========================
    LEFT SIDE
===========================*/

.review-left{
    width:32%;
    display:flex;
    flex-direction:column;
    gap:30px;
}

.review-user{
    display:flex;
    align-items:center;
    gap:18px;
    padding:18px;
    border-radius:18px;
    cursor:pointer;
    transition:.35s;
}

.review-user.active{
    background:#fff;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.review-user:hover{
    transform:translateX(8px);
}

.user-img{
    width:60px;
    height:60px;
    border-radius:50%;
    overflow:hidden;
    flex-shrink:0;
}

.user-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.user-info h4{
    font-size:21px;
    font-weight:500;
    color:#294867;
    margin-bottom:4px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.user-info p{
    font-size:18px;
    color:#111827;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

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

.timeline{
    width:80px;
    position:relative;
    display:block;
    min-height:100%;
}

.line{
    width:3px;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    background:#2f7edb;
    z-index:1;
}

.dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#2f7edb;
    position:absolute;
    left:50%;
    transform:translate(-50%, -50%);
    transition:.35s;
    z-index:2;
}

.dot.active{
    width:18px;
    height:18px;
    background:#2f7edb;
    box-shadow:0 0 0 8px rgba(47,126,219,.18);
}

/*==========================
    RIGHT SIDE
===========================*/

.review-right{
    width:40%;
    position:relative;
    min-height:270px;
}

.review-content{
    display:none;
    animation:fade .6s;
}

.review-content.active{
    display:block;
}

@keyframes fade{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}

}

.quote{
    font-size:50px;
    color:#2f7edb;
    margin-bottom:25px;
}

.review-content p{
    font-size:18px;
    line-height:1.9;
    color:#7d8795;
    margin-bottom:28px;
}

.stars{
    color:#2f7edb;
    font-size:22px;
    letter-spacing:4px;
}

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

.review-user:hover .user-info h4{
    color:#2f7edb;
}

.review-user:hover .user-img img{
    transform:scale(1.08);
}

.user-img img{
    transition:.4s;
}

/*==========================
    SMOOTH
===========================*/

.review-user,
.review-content,
.dot,
.user-img img{
    transition:.35s;
}
/*==================================
        1400px
==================================*/

@media (max-width:1400px){

.review-wrapper{
    gap:40px;
}

.review-heading h2{
    font-size:42px;
}

.review-left{
    width:34%;
}

.review-right{
    width:42%;
}

}

/*==================================
        1200px
==================================*/

@media (max-width:1200px){

.review-wrapper{
    gap:35px;
}

.review-heading h2{
    font-size:38px;
}

.review-left{
    width:36%;
}

.review-right{
    width:44%;
}

.user-info h4{
    font-size:18px;
}

.review-content p{
    font-size:17px;
    line-height:1.8;
}

}

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

@media (max-width:991px){

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

.review-heading{
    margin-bottom:45px;
}

.review-heading h2{
    font-size:34px;
}

.review-heading span{
    font-size:18px;
}

.review-wrapper{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    gap:35px;
}

.review-left{
    width:100%;
    max-width:550px;
}

.timeline{
    width:100%;
    min-height:auto;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:24px 0;
}

.line{
    width:100%;
    height:3px;
    left:0;
    top:50%;
    transform:translateY(-50%);
}

.dot{
    position:relative;
        display:inline-block;
        left:auto;
        top:auto;
        transform:none;
        margin:0 10px;
    }

    .review-user{
        width:100%;
    }
.review-right{
    width:100%;
    max-width:700px;
    min-height:auto;
}

.quote{
    margin-bottom:18px;
}

.review-content p{
    font-size:17px;
}

.stars{
    justify-content:center;
}

}

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

@media (max-width:767px){

.review-section{
    padding:60px 0;
}

.review-heading{
    margin-bottom:35px;
}

.review-heading h2{
    font-size:30px;
}

.review-heading span{
    font-size:16px;
}

.review-left{
    gap:18px;
}

.review-user{
    padding:16px;
    border-radius:14px;
}

.user-img{
    width:55px;
    height:55px;
}

.user-info h4{
    font-size:17px;
}

.user-info p{
    font-size:13px;
}

.timeline{
    margin:5px 0;
}

.review-right{
    text-align:center;
    width: 100%;
}

.quote{
    font-size:42px;
}

.review-content p{
    font-size:15px;
    line-height:1.8;
}

.stars{
    font-size:18px;
    letter-spacing:2px;
}

}

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

@media (max-width:575px){

.review-heading h2{
    font-size:26px;
}

.review-heading span{
    font-size:15px;
}

.review-user{
    gap:14px;
    padding:14px;
}

.user-img{
    width:50px;
    height:50px;
}

.user-info h4{
    font-size:16px;
}

.user-info p{
    font-size:12px;
}

.review-content p{
    font-size:14px;
}

.quote{
    font-size:38px;
}

}

/*==================================
        EXTRA SMALL
==================================*/

@media (max-width:420px){

.review-section{
    padding:50px 0;
}

.review-user{
    flex-direction:column;
    text-align:center;
    gap:10px;
}

.user-info h4{
    font-size:15px;
}

.user-info p{
    font-size:12px;
}

.review-content p{
    font-size:13px;
    line-height:1.7;
}

.stars{
    font-size:17px;
}

}
.review-user{
    transition:all .35s ease;
}

.review-user.active{
    transform:translateX(12px);
}

.review-content{
    opacity:0;
    visibility:hidden;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    transition:.5s ease;
}

.review-content.active{
    opacity:1;
    visibility:visible;
    position:relative;
}

.dot{
    transition:.35s;
}

.dot.active{
    transform:scale(1.5);
}
/*==================================
        GALLERY SECTION
==================================*/

.gallery-section{
    padding:90px 0;
    background:#fff;
    overflow:hidden;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.gallery-section .container{
    max-width:1280px;
    width:90%;
    margin:auto;
}

.gallery-wrapper{
    display:grid;
    grid-template-columns:1fr 0.85fr;
    gap:40px;
    align-items:center;
}

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

.gallery-subtitle{
    display:block;
    font-size:36px;
    font-weight:400;
    letter-spacing:4px;
    color:#2c7be5;
    margin-bottom:12px;
    text-transform:uppercase;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.gallery-left h2{
    font-size:48px;
    font-weight:400;
    color:#111;
    line-height:1.2;
    margin-bottom:35px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.gallery-filter{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:35px;
}

.gallery-filter button{
    background:#f0f4f8;
    color:#334e68;
    border:1px solid #d9e2ec;
    padding:10px 22px;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:all .3s ease;
    font-family:'Plus Jakarta Sans',sans-serif;
}

.gallery-filter button:hover,
.gallery-filter button.active{
    background:#2b7be4;
    color:#ffffff;
    border-color:#2b7be4;
    box-shadow:0 8px 20px rgba(43,123,228,.25);
    transform:translateY(-2px);
}

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

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
}

.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:8px;
    cursor:pointer;
    background:#f5f5f5;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.gallery-item img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:.5s;
    display:block;
}

.gallery-item.wide img{
    height:260px;
}

.gallery-item:hover img{
    transform:scale(1.06);
}

/* Overlay */

.gallery-item::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(14,30,55,0.85) 0%, rgba(14,30,55,0.2) 60%, transparent 100%);
    opacity:0.85;
    transition:.4s;
    pointer-events:none;
}

.gallery-overlay{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:18px;
    z-index:2;
    pointer-events:none;
}

.gallery-overlay h4{
    color:#ffffff;
    font-size:18px;
    font-weight:700;
    margin-bottom:4px;
    font-family:'Outfit',sans-serif;
}

.gallery-overlay p{
    color:rgba(255,255,255,0.88);
    font-size:13px;
    margin:0;
}

.gallery-item:hover::before{
    opacity:1;
}

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

.gallery-big-image{
    overflow:hidden;
    border-radius:8px;
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.gallery-big-image img{
    width:100%;
    height:560px;
    object-fit:cover;
    transition:.6s;
    display:block;
}

.gallery-big-image:hover img{
    transform:scale(1.05);
}

/*==================================
        VIEW ALL BUTTON
==================================*/

.gallery-btn{
    display:inline-flex;
    align-items:center;
    gap:14px;
    margin-top:28px;
    color:#2c7be5;
    font-size:18px;
    font-weight:500;
    text-decoration:none;
    transition:.3s;
}

.gallery-btn span{
    width:38px;
    height:38px;
    border:1px solid #2c7be5;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.35s;
}

.gallery-btn:hover{
    color:#0a58ca;
}

.gallery-btn:hover span{
    background:#2c7be5;
    color:#fff;
    transform:translateX(6px);
}

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

.gallery-item,
.gallery-big-image,
.gallery-btn,
.gallery-item img,
.gallery-big-image img{
    transition:.35s ease;
}
/*====================================
        LARGE DESKTOP
====================================*/

@media (max-width:1400px){

.gallery-wrapper{
    gap:35px;
}

.gallery-left h2{
    font-size:46px;
}

.gallery-big-image img{
    height:520px;
}

}

/*====================================
        LAPTOP
====================================*/

@media (max-width:1200px){

.gallery-wrapper{
    grid-template-columns:1fr 0.9fr;
    gap:30px;
}

.gallery-left h2{
    font-size:40px;
    margin-bottom:30px;
}

.gallery-item img{
    height:160px;
}

.gallery-item.wide img{
    height:160px;
}

.gallery-big-image img{
    height:470px;
}

.gallery-btn{
    margin-top:22px;
    font-size:17px;
}

}

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

@media (max-width:991px){

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

.gallery-wrapper{
    grid-template-columns:1fr;
    gap:35px;
}

.gallery-left{
    order:1;
}

.gallery-right{
    order:2;
}

.gallery-left h2{
    font-size:36px;
}

.gallery-grid{
    gap:12px;
}

.gallery-item img{
    height:200px;
}

.gallery-item.wide img{
    height:200px;
}

.gallery-big-image img{
    height:500px;
}

.gallery-btn{
    margin-top:25px;
}

}

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

@media (max-width:767px){

.gallery-section{
    padding:60px 0;
}

.gallery-subtitle{
    font-size:15px;
    letter-spacing:3px;
}

.gallery-left h2{
    font-size:30px;
    margin-bottom:25px;
}

.gallery-grid{
    grid-template-columns:1fr;
    gap:15px;
}

.gallery-item img{
    height:220px;
}

.gallery-item.wide img{
    height:220px;
}

.gallery-big-image img{
    height:380px;
}

.gallery-btn{
    font-size:16px;
}

.gallery-btn span{
    width:36px;
    height:36px;
}

}

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

@media (max-width:575px){

.gallery-section{
    padding:50px 0;
}

.gallery-left h2{
    font-size:26px;
}

.gallery-item img{
    height:180px;
}

.gallery-item.wide img{
    height:180px;
}

.gallery-big-image img{
    height:300px;
}

.gallery-btn{
    font-size:15px;
    gap:10px;
}

.gallery-btn span{
    width:34px;
    height:34px;
}

}

/*====================================
        EXTRA SMALL
====================================*/

@media (max-width:420px){

.gallery-subtitle{
    font-size:14px;
}

.gallery-left h2{
    font-size:24px;
}

.gallery-item img{
    height:160px;
}

.gallery-item.wide img{
    height:160px;
}

.gallery-big-image img{
    height:260px;
}

.gallery-btn{
    font-size:14px;
}

.gallery-btn span{
    width:32px;
    height:32px;
}

}
.gallery-item::after,
/* .gallery-big-image::after{

    content:"+";

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:55px;

    font-weight:300;

    color:#fff;

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

    opacity:0;

    transition:.35s;

} */

.gallery-item:hover::after,
.gallery-big-image:hover::after{

    opacity:1;

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

.appointment-section{
    padding:90px 0;
    background:#ffffff;
    overflow:hidden;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.appointment-section .container{
    width:90%;
    max-width:1280px;
    margin:auto;
}

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

/*==================================
        LEFT SIDE
==================================*/

.sub-title{
    display:block;
    color:#2c7be5;
    font-size:24px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.appointment-form-box h2{
    font-size:52px;
    font-weight:600;
    color:#294867;
    margin-bottom:40px;
    line-height:1.1;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

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

form{
    width:100%;
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:20px;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.form-group.full{
    margin-bottom:20px;
}

.form-group label{
    font-size:14px;
    font-weight:500;
    color:#294867;
    margin-bottom:8px;
}

.form-group input{
    width:100%;
    height:52px;
    padding:0 18px;
    border:1px solid #b9d3f3;
    border-radius:10px;
    outline:none;
    background:#fff;
    font-size:15px;
    transition:.35s;
}

.form-group input:focus{
    border-color:#2c7be5;
    box-shadow:0 0 0 4px rgba(44,123,229,.10);
}

.form-group input::placeholder{
    color:#b1b1b1;
}

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

.input-icon{
    position:relative;
}

.input-icon i{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:#2c7be5;
    font-size:15px;
}

.input-icon input{
    padding-left:45px;
}

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

.radio-box{
    margin:30px 0;
}

.main-label{
    display:block;
    margin-bottom:14px;
    font-size:15px;
    font-weight:600;
    color:#294867;
}

.radio-item{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
    cursor:pointer;
    font-size:14px;
    color:#111827;
}

.radio-item input{
    display:none;
}

.radio-item span{
    width:18px;
    height:18px;
    border:2px solid #2c7be5;
    border-radius:50%;
    position:relative;
    flex-shrink:0;
}

.radio-item input:checked + span::after{
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    background:#2c7be5;
    border-radius:50%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

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

.checkbox-box{
    margin-bottom:35px;
}

.checkbox-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px 20px;
}

.check-item{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    font-size:14px;
    color:#111827;
}

.check-item input{
    display:none;
}

.check-item span{
    width:18px;
    height:18px;
    border:2px solid #2c7be5;
    border-radius:50%;
    position:relative;
    flex-shrink:0;
}

.check-item input:checked + span{
    background:#2c7be5;
}

.check-item input:checked + span::after{
    content:"✓";
    position:absolute;
    color:#fff;
    font-size:11px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

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

.appointment-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 34px;
    border:none;
    border-radius:40px;
    background:linear-gradient(90deg,#2c7be5,#1b5fc7);
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.35s;
}

.appointment-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 30px rgba(44,123,229,.25);
}

.appointment-btn i{
    transition:.35s;
}

.appointment-btn:hover i{
    transform:translateX(5px);
}

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

.appointment-image{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:620px;
}

.shape{
    position:absolute;
    width:100%;
    height:100%;
    background:#eef6ff;
    border-radius:55% 45% 45% 55% / 35% 60% 40% 65%;
    z-index:1;
}

.appointment-image img{
    position:relative;
    width:78%;
    max-width:420px;
    border-radius:22px;
    z-index:2;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
    object-fit:cover;
}

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

.appointment-image img{
    transition:.5s;
}

.appointment-image:hover img{
    transform:scale(1.02);
}

/*==================================
        INPUT TYPE FIX
==================================*/

input[type="date"],
input[type="time"]{
    cursor:pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
    opacity:.8;
    cursor:pointer;
}
/*==================================
        LARGE DESKTOP
==================================*/

@media (max-width:1400px){

    .appointment-wrapper{
        gap:50px;
    }

    .appointment-form-box h2{
        font-size:50px;
    }

    .appointment-image{
        min-height:560px;
    }

}

/*==================================
        LAPTOP
==================================*/

@media (max-width:1200px){

    .appointment-wrapper{
        grid-template-columns:1fr .9fr;
        gap:40px;
    }

    .appointment-form-box h2{
        font-size:42px;
    }

    .checkbox-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .appointment-image img{
        width:85%;
    }

}

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

@media (max-width:991px){

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

    .appointment-wrapper{
        grid-template-columns:1fr;
        gap:50px;
    }

    .appointment-form-box{
        order:2;
    }

    .appointment-image{
        order:1;
        min-height:480px;
    }

    .appointment-image img{
        width:70%;
        max-width:420px;
    }

    .appointment-form-box h2{
        font-size:38px;
    }

    .sub-title{
        font-size:16px;
    }

}

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

@media (max-width:767px){

    .appointment-section{
        padding:60px 0;
    }

    .appointment-wrapper{
        gap:40px;
    }

    .appointment-image{
        min-height:380px;
    }

    .appointment-image img{
        width:85%;
    }

    .appointment-form-box h2{
        font-size:32px;
        margin-bottom:30px;
    }

    .form-row{
        grid-template-columns:1fr;
        gap:15px;
        margin-bottom:15px;
    }

    .form-group.full{
        margin-bottom:15px;
    }

    .form-group label{
        font-size:14px;
    }

    .form-group input{
        height:50px;
        font-size:14px;
    }

    .checkbox-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .appointment-btn{
        width:100%;
        justify-content:center;
        padding:15px;
    }

}

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

@media (max-width:575px){

    .appointment-section{
        padding:50px 0;
    }

    .appointment-section .container{
        width:92%;
    }

    .appointment-image{
        min-height:320px;
    }

    .appointment-image img{
        width:100%;
        max-width:300px;
        border-radius:18px;
    }

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

    .sub-title{
        font-size:15px;
    }

    .radio-item,
    .check-item{
        font-size:13px;
    }

    .appointment-btn{
        font-size:15px;
    }

}

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

@media (max-width:420px){

    .appointment-section{
        padding:45px 0;
    }

    .appointment-form-box h2{
        font-size:26px;
    }

    .sub-title{
        font-size:14px;
        letter-spacing:1px;
    }

    .form-group input{
        height:48px;
        padding:0 15px;
    }

    .input-icon input{
        padding-left:42px;
    }

    .input-icon i{
        left:14px;
        font-size:14px;
    }

    .appointment-image{
        min-height:280px;
    }

    .appointment-image img{
        max-width:260px;
    }

    .appointment-btn{
        font-size:14px;
        padding:14px;
    }

}

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

@media (max-width:767px) and (orientation:landscape){

    .appointment-wrapper{
        gap:30px;
    }

    .appointment-image{
        min-height:300px;
    }

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

.faq-section{
    padding:100px 0;
    background:#ffffff;
    position:relative;
    overflow:hidden;
}

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

.faq-heading{
    text-align:center;
    margin-bottom:60px;
}

.faq-heading span{
    display:inline-block;
    color:#2b7be4;
    font-size:16px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:10px;
}

.faq-heading h2{
    font-size:52px;
    font-weight:600;
    color:#24445d;
    margin-bottom:15px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.faq-heading p{
    max-width:650px;
    margin:auto;
    color:#111827;
    font-size:18px;
    line-height:1.8;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

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

.faq-wrapper{
    max-width:900px;
    margin:auto;
}

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

.faq-item{
    background:#ffffff;
    border:1px solid #dbe9f7;
    border-radius:16px;
    margin-bottom:18px;
    overflow:hidden;
    transition:.35s ease;
    box-shadow:0 8px 25px rgba(0,0,0,.04);
}

.faq-item:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

/*=========================================
QUESTION
=========================================*/

.faq-question{
    width:100%;
    background:none;
    border:none;
    outline:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 28px;
    cursor:pointer;
    text-align:left;
}

.faq-question span{
    font-size:18px;
    font-weight:600;
    color:#24445d;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

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

.faq-icon{
    width:42px;
    height:42px;
    border:2px solid #2b7be4;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#2b7be4;
    font-size:18px;
    flex-shrink:0;
    transition:.3s;
}

.faq-item:hover .faq-icon{
    background:#2b7be4;
    color:#fff;
}

/*=========================================
ANSWER
=========================================*/

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
    padding:0 28px;
}

.faq-answer p{
    color:#5f7182;
    font-size:15px;
    line-height:1.9;
    padding-bottom:25px;
}

/*=========================================
ACTIVE ITEM
=========================================*/

.faq-item.active{
    background:#e9f7ff;
    border-color:#b7dfff;
}

.faq-item.active .faq-answer{
    max-height:400px;
}

.faq-item.active .faq-icon{
    background:#2b7be4;
    color:#fff;
}

.faq-item.active .faq-question span{
    color:#24445d;
}

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

.faq-item{
    animation:fadeUp .7s ease;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

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

.faq-question:focus{
    outline:none;
}

/*=========================================
SMOOTH TRANSITION
=========================================*/

.faq-item,
.faq-icon,
.faq-question,
.faq-answer{
    transition:all .35s ease;
}

/*=========================================
LARGE DESKTOP
=========================================*/

@media (max-width:1400px){

.faq-section{
padding:90px 0;
}

.faq-wrapper{
max-width:850px;
}

.faq-heading h2{
font-size:44px;
}

.faq-question{
padding:20px 24px;
}

.faq-question span{
font-size:19px;
}

}

/*=========================================
LAPTOP
=========================================*/

@media (max-width:1199px){

.faq-section{
padding:80px 0;
}

.faq-heading{
margin-bottom:50px;
}

.faq-heading h2{
font-size:40px;
}

.faq-heading p{
font-size:15px;
}

.faq-question{
padding:18px 22px;
}

.faq-question span{
font-size:18px;
}

.faq-answer{
padding:0 22px;
}

.faq-answer p{
font-size:15px;
}

.faq-icon{
width:40px;
height:40px;
font-size:16px;
}

}

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

@media (max-width:991px){

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

.faq-wrapper{
max-width:100%;
}

.faq-heading{
margin-bottom:45px;
}

.faq-heading h2{
font-size:36px;
}

.faq-heading p{
font-size:15px;
max-width:600px;
}

.faq-item{
border-radius:14px;
}

.faq-question{
padding:18px 20px;
}

.faq-question span{
font-size:17px;
padding-right:15px;
}

.faq-answer{
padding:0 20px;
}

.faq-answer p{
font-size:14px;
line-height:1.8;
}

.faq-icon{
width:38px;
height:38px;
font-size:16px;
}

}

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

@media (max-width:767px){

.faq-section{
padding:60px 0;
}

.faq-heading{
margin-bottom:35px;
}

.faq-heading span{
font-size:13px;
letter-spacing:1px;
}

.faq-heading h2{
font-size:30px;
}

.faq-heading p{
font-size:14px;
}

.faq-item{
margin-bottom:15px;
border-radius:12px;
}

.faq-question{
padding:16px 18px;
align-items:flex-start;
}

.faq-question span{
font-size:16px;
line-height:1.5;
padding-right:12px;
}

.faq-answer{
padding:0 18px;
}

.faq-answer p{
font-size:14px;
padding-bottom:18px;
}

.faq-icon{
width:36px;
height:36px;
font-size:15px;
min-width:36px;
}

}

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

@media (max-width:575px){

.faq-section{
padding:50px 0;
}

.faq-heading h2{
font-size:28px;
}

.faq-heading p{
font-size:13px;
}

.faq-question{
padding:15px;
}

.faq-question span{
font-size:15px;
}

.faq-answer{
padding:0 15px;
}

.faq-answer p{
font-size:13px;
line-height:1.7;
}

.faq-icon{
width:34px;
height:34px;
font-size:14px;
}

}

/*=========================================
EXTRA SMALL
=========================================*/

@media (max-width:390px){

.faq-section{
padding:45px 0;
}

.faq-heading h2{
font-size:25px;
}

.faq-heading p{
font-size:12px;
}

.faq-question{
padding:14px;
}

.faq-question span{
font-size:14px;
line-height:1.4;
}

.faq-answer{
padding:0 14px;
}

.faq-answer p{
font-size:12px;
line-height:1.6;
}

.faq-icon{
width:30px;
height:30px;
font-size:13px;
min-width:30px;
}

}
/*=========================================
BLOG SECTION
=========================================*/

.blog-section{
    padding:100px 0;
    background:#ffffff;
    overflow:hidden;
    position:relative;
}

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

.blog-heading{
    text-align:center;
    margin-bottom:60px;
}

.blog-heading span{
    display:inline-block;
    color:#2b7be4;
    font-size:15px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.blog-heading h2{
    font-size:52px;
    font-weight:600;
    color:#23425b;
    margin-bottom:18px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.blog-heading p{
    max-width:650px;
    margin:auto;
    color:#6b7d90;
    font-size:16px;
    line-height:1.8;
}

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

.blogSwiper{
    padding:15px 8px 70px;
}

.blogSwiper .swiper-slide{
    height:auto;
}

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

.blog-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,.06);
    transition:.4s;
    height:100%;
    border:1px solid #edf2f8;
}

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

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

.blog-image{
    overflow:hidden;
    height:260px;
}

.blog-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.blog-card:hover .blog-image img{
    transform:scale(1.08);
}

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

.blog-content{
    padding:26px;
}

/*=========================================
META
=========================================*/

.blog-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
    flex-wrap:wrap;
    gap:10px;
}

.date{
    color:#7b8b9a;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:8px;
}

.date i{
    color:#2b7be4;
}

.social-icons{
    display:flex;
    gap:8px;
}

.social-icons a{
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid #dbe8f6;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#2b7be4;
    transition:.3s;
}

.social-icons a:hover{
    background:#2b7be4;
    color:#fff;
}

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

.blog-content h3{
    font-size:24px;
    line-height:1.4;
    color:#23425b;
    font-weight:500;
    margin-bottom:25px;
    transition:.3s;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.blog-card:hover h3{
    color:#2b7be4;
}

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

.read-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#2b7be4;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.read-btn i{
    transition:.3s;
}

.read-btn:hover{
    color:#184d96;
}

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

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

.blogSwiper{
    position:relative;
    padding-bottom:35px;
}

.blogSwiper .blog-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
        width: 44px;
    height: 43px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, #2b7be4 0%, #1a5fb8 100%);
    border:2px solid rgba(255,255,255,.95);
    border-radius:50%;
    box-shadow:0 12px 24px rgba(43, 123, 228, .22);
    color:#fff;
    cursor:pointer;
    transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
    opacity:1;
    padding:0;
}

.blogSwiper .blog-nav:hover{
    transform:translateY(-50%) scale(1.05);
    box-shadow:0 16px 30px rgba(43, 123, 228, .32);
    background:linear-gradient(135deg, #1a5fb8 0%, #123f73 100%);
}

.blogSwiper .blog-next{
    right:-1px;
}

.blogSwiper .blog-prev{
    left:-1px;
}

.blogSwiper .blog-nav::after{
    content:none;
}

.blogSwiper .blog-nav i{
    font-size:18px;
    font-weight:700;
}

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

.blog-pagination{
    bottom:5px !important;
}

.blog-pagination .swiper-pagination-bullet{
    width:12px;
    height:12px;
    background:#c6d4e4;
    opacity:1;
    transition:.3s;
}

.blog-pagination .swiper-pagination-bullet-active{
    width:34px;
    border-radius:30px;
    background:#2b7be4;
}

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

.blog-card{
    animation:blogFloat 5s ease-in-out infinite;
}

@keyframes blogFloat{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}

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

.blog-card,
.blog-card *,
.read-btn,
.social-icons a{
    transition:all .35s ease;
}
/*=========================================
LARGE DESKTOP
=========================================*/

@media (max-width:1400px){

.blog-section{
padding:90px 0;
}

.blog-heading h2{
font-size:44px;
}

.blog-image{
height:240px;
}

.blog-content h3{
font-size:24px;
}

}

/*=========================================
LAPTOP
=========================================*/

@media (max-width:1199px){

.blog-section{
padding:80px 0;
}

.blog-heading{
margin-bottom:50px;
}

.blog-heading h2{
font-size:40px;
}

.blog-heading p{
font-size:15px;
}

.blog-image{
height:220px;
}

.blog-content{
padding:22px;
}

.blog-content h3{
font-size:22px;
margin-bottom:18px;
}

.date{
font-size:13px;
}

.social-icons a{
width:32px;
height:32px;
}

}

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

@media (max-width:991px){

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

.blog-heading{
margin-bottom:45px;
}

.blog-heading h2{
font-size:34px;
}

.blog-heading p{
font-size:15px;
}

.blog-image{
height:230px;
}

.blog-content{
padding:20px;
}

.blog-content h3{
font-size:20px;
}

.blog-next,
.blog-prev{
display:none;
}

.blog-meta{
gap:12px;
}

}

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

@media (max-width:767px){

.blog-section{
padding:60px 0;
}

.blog-heading{
margin-bottom:35px;
}

.blog-heading span{
font-size:13px;
}

.blog-heading h2{
font-size:30px;
}

.blog-heading p{
font-size:14px;
}

.blogSwiper{
padding-bottom:55px;
}

.blog-card{
border-radius:15px;
}

.blog-image{
height:220px;
}

.blog-content{
padding:18px;
}

.blog-meta{
flex-direction:column;
align-items:flex-start;
}

.blog-content h3{
font-size:20px;
line-height:1.5;
}

.date{
font-size:13px;
}

.social-icons{
margin-top:5px;
}

.social-icons a{
width:34px;
height:34px;
}

.read-btn{
font-size:15px;
}

.blog-pagination .swiper-pagination-bullet{
width:10px;
height:10px;
}

.blog-pagination .swiper-pagination-bullet-active{
width:30px;
}

}

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

@media (max-width:575px){

.blog-section{
padding:50px 0;
}

.blog-heading h2{
font-size:28px;
}

.blog-heading p{
font-size:13px;
}

.blog-image{
height:190px;
}

.blog-content{
padding:16px;
}

.blog-content h3{
font-size:18px;
}

.date{
font-size:12px;
}

.social-icons a{
width:30px;
height:30px;
font-size:13px;
}

.read-btn{
font-size:14px;
}

}

/*=========================================
EXTRA SMALL
=========================================*/

@media (max-width:390px){

.blog-section{
padding:45px 0;
}

.blog-heading h2{
font-size:25px;
}

.blog-heading p{
font-size:12px;
}

.blog-image{
height:170px;
}

.blog-content{
padding:15px;
}

.blog-content h3{
font-size:17px;
line-height:1.4;
}

.date{
font-size:11px;
}

.social-icons a{
width:28px;
height:28px;
font-size:12px;
}

.read-btn{
font-size:13px;
}

}
/*=========================================
BLOG CARD ANIMATION
=========================================*/

.blog-card{

    opacity:0;

    transform:translateY(40px);

    transition:.7s ease;

}

.blog-card.show-blog{

    opacity:1;

    transform:translateY(0);

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

.footer-area{
    position:relative;
    background:linear-gradient(180deg,#eaf6ff 0%,#d8efff 100%);
    padding-top:120px;
    /* overflow:hidden; */
}

/* Decorative Background */

.footer-bg{
    position:absolute;
    inset:0;
    z-index:0;
    opacity:.08;
}

.footer-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Floating Logo */

.footer-top-icon{
    position:absolute;
    top:-60px;
    left:50%;
    transform:translateX(-50%);
    z-index:10;
}

.footer-shield{
    width: 197px;
    height: 166px;
    border-radius: 50%;
    /* background: rgb(255, 255, 255); */
    display: flex;
    align-items: center;
    justify-content: center;
    /* /* box-shadow: rgba(0, 0, 0, 0.12) 0px 15px 40px;*/
} 

.footer-shield img{
    width: 200px;
}

/* Container */

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

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

.footer-logo{
    margin-bottom:25px;
}

.footer-logo img{
    max-width:220px;
}

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

.footer-contact{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:15px;
    margin-bottom:20px;
}

.footer-contact i{
    width:45px;
    height:45px;
    border-radius:50%;
    background:#2b7be4;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.footer-contact span{
    color:#4d6172;
    line-height:1.8;
}

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

.footer-area h4{
    font-size:22px;
    font-weight:700;
    color:#21405b;
    margin-bottom:25px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.newsletter h3{
    font-size:26px;
    font-weight:700;
    color:#21405b;
    margin-bottom:15px;
}

.newsletter p{
    color:#617587;
    line-height:1.8;
    margin-bottom:25px;
}

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

.footer-links{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-links li{
    margin-bottom:14px;
}

.footer-links a{
    color:#617587;
    text-decoration:none;
    transition:.3s;
}

.footer-links a:hover{
    color:#2b7be4;
    padding-left:8px;
}

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

.subscribe-form{
    display:flex;
    background:#fff;
    border-radius:60px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.subscribe-form input{
    flex:1;
    border:none;
    outline:none;
    padding:18px 22px;
    font-size:15px;
}

.subscribe-form button{
    border:none;
    background:#2b7be4;
    color:#fff;
    padding:0 32px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.subscribe-form button:hover{
    background:#1f62b6;
}

/*==================================
BOTTOM BAR
==================================*/

.footer-bottom{
    margin-top:70px;
    background:#2b7be4;
    padding:22px 0;
}

.footer-bottom p{
    color:#fff;
    margin:0;
    font-size:15px;
}

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

.footer-social{
    display:flex;
    align-items:center;
    gap:15px;
}

.footer-social span{
    color:#fff;
    font-weight:600;
}

.footer-social a{
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:.3s;
}

.footer-social a:hover{
    background:#fff;
    color:#2b7be4;
    transform:translateY(-3px);
}

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

.footer-contact li,
.footer-links a,
.subscribe-form,
.footer-social a{
    transition:.35s ease;
}

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

.footer-shield{
    animation:floatBadge 4s ease-in-out infinite;
}

@keyframes floatBadge{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}
/*=========================================
LARGE LAPTOP
=========================================*/

@media (max-width:1200px){

.footer-area{
padding-top:100px;
}

.footer-shield{
width:115px;
height:115px;
}

.footer-shield img{
width:65px;
}

.footer-logo img{
max-width:200px;
}

.newsletter h3{
font-size:24px;
}

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

.subscribe-form button{
padding:0 24px;
}

}


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

@media (max-width:991px){

.footer-area{
padding-top:90px;
text-align:center;
}

.footer-top-icon{
top:-50px;
}

.footer-contact li{
justify-content:center;
text-align:left;
}

.footer-logo{
text-align:center;
}

.footer-links{
margin-bottom:30px;
}

.newsletter{
margin-top:10px;
}

.footer-bottom .row{
row-gap:20px;
}

.footer-social{
justify-content:center;
}

.footer-bottom p{
text-align:center;
}

}


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

@media (max-width:767px){

.footer-area{
padding-top:80px;
}

.footer-top-icon{
top:-45px;
}

.footer-shield{
width:95px;
height:95px;
}

.footer-shield img{
width:90px;
}

.footer-logo img{
max-width:170px;
margin:auto;
}

.footer-contact li{
gap:12px;
margin-bottom:18px;
}

.footer-contact i{
width:42px;
height:42px;
font-size:16px;
}

.footer-area h4{
font-size:20px;
margin-bottom:18px;
}

.newsletter h3{
font-size:22px;
}

.newsletter p{
font-size:14px;
margin-bottom:20px;
}

.subscribe-form{
flex-direction:column;
border-radius:16px;
overflow:hidden;
}

.subscribe-form input{
width:100%;
padding:16px;
text-align:center;
}

.subscribe-form button{
width:100%;
padding:16px;
border-radius:0;
}

.footer-bottom{
padding:18px 0;
}

.footer-social{
justify-content:center;
margin-bottom:12px;
}

.footer-bottom p{
font-size:14px;
text-align:center;
}

}


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

@media (max-width:575px){

.footer-area{
padding-top:70px;
}

.footer-shield{
width:82px;
height:82px;
}

.footer-shield img{
width:100px;
}

.footer-contact span{
font-size:14px;
}

.footer-contact i{
width:38px;
height:38px;
font-size:15px;
}

.footer-area h4{
font-size:18px;
}

.newsletter h3{
font-size:20px;
}

.newsletter p{
font-size:13px;
}

.footer-links li{
margin-bottom:12px;
}

.footer-links a{
font-size:14px;
}

.footer-social a{
width:36px;
height:36px;
font-size:14px;
}

.footer-bottom p{
font-size:13px;
}

}


/*=========================================
EXTRA SMALL
=========================================*/

@media (max-width:390px){

.footer-area{
padding-top:60px;
}

.footer-top-icon{
top:-38px;
}

.footer-shield{
width:72px;
height:72px;
}

.footer-shield img{
width:38px;
}

.footer-logo img{
max-width:150px;
}

.footer-contact li{
align-items:flex-start;
}

.footer-contact span{
font-size:13px;
line-height:1.6;
}

.footer-area h4{
font-size:17px;
}

.newsletter h3{
font-size:18px;
}

.newsletter p{
font-size:12px;
}

.subscribe-form input{
font-size:13px;
padding:14px;
}

.subscribe-form button{
font-size:14px;
padding:14px;
}

.footer-social{
gap:10px;
}

.footer-social a{
width:34px;
height:34px;
}

.footer-bottom{
padding:16px 0;
}

.footer-bottom p{
font-size:12px;
}

}

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

.about-banner{

position:relative;

min-height:75vh;

padding-top:170px;

padding-bottom:100px;

background:url(../img/group-of-doctors-walking-in-corridor-on-medical-co-2022-02-02-04-50-51-utc.avif) center center/cover no-repeat;

display:flex;

align-items:center;

overflow:hidden;

}

/* Overlay */

.banner-overlay{

position:absolute;

inset:0;

background:linear-gradient(90deg,
rgba(8,25,45,.88),
rgba(8,25,45,.65));

}

/* Content */

.about-banner-content{

position:relative;

z-index:5;

max-width:880px;

color:#fff;

}

.banner-subtitle{

display:inline-block;

padding:8px 18px;

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

backdrop-filter:blur(10px);

border-radius:30px;

font-size:14px;

letter-spacing:1px;

margin-bottom:20px;

}

.about-banner h1{

font-size:46px;

font-weight:700;

margin-bottom:18px;

line-height:1.25;

color:#ffffff !important;

}

.about-banner p{

font-size:18px;

line-height:1.7;

margin-bottom:30px;

color:#ffffff !important;

max-width:720px;

}

/* Breadcrumb */

.breadcrumb-box{

display:flex;

align-items:center;

gap:12px;

margin-bottom:35px;

}

.breadcrumb-box a{

color:#fff;

text-decoration:none;

font-weight:500;

}

.breadcrumb-box span{

color:#cfdfff;

}

/* Button */

.banner-btn{

display:inline-flex;

align-items:center;

gap:12px;

padding:16px 34px;

background:#2b7be4;

color:#fff;

text-decoration:none;

border-radius:50px;

font-weight:600;

transition:.35s;

}

.banner-btn:hover{

background:#0d63d5;

color:#fff;

transform:translateY(-4px);

}

/* Floating Shapes */

.circle{

position:absolute;

border-radius:50%;

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

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

}

.circle.one{

width:180px;

height:180px;

right:8%;

top:80px;

}

.circle.two{

width:100px;

height:100px;

left:8%;

bottom:60px;

animation-delay:2s;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

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

@media(max-width:991px){

.about-banner{

height:450px;

text-align:center;

}

.about-banner-content{

margin:auto;

}

.about-banner h1{

font-size:48px;

}

.about-banner p{

font-size:16px;

margin:auto auto 25px;

}

.breadcrumb-box{

justify-content:center;

}

}

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

@media(max-width:767px){

.about-banner{

height:400px;

padding:40px 0;

}

.about-banner h1{

font-size:36px;

}

.about-banner p{

font-size:15px;

}

.banner-btn{

padding:14px 28px;

font-size:15px;

}

.circle{

display:none;

}

}

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

@media(max-width:480px){

.about-banner{

height:360px;

}

.about-banner h1{

font-size:30px;

}

.banner-subtitle{

font-size:12px;

padding:7px 16px;

}

.about-banner p{

font-size:14px;

line-height:1.7;

}

.banner-btn{

width:100%;

justify-content:center;

}

}
/*==================================================
DOCTOR PROFILE SECTION
==================================================*/

.doctor-profile{
    position:relative;
    padding:100px 0;
    background:#f8fbff;
    overflow:hidden;
}

.doctor-profile::before{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    background:rgba(43,123,228,.05);
    top:-120px;
    right:-120px;
}

.doctor-profile::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(43,123,228,.04);
    left:-120px;
    bottom:-120px;
}

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

.doctor-image-wrapper{
    position:relative;
    min-height:700px;
}

/* Main Image */

.doctor-main-image{
    position:relative;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 30px 60px rgba(0,0,0,.12);
}

.doctor-main-image img{
    width:100%;
    display:block;
    transition:.5s;
}

.doctor-main-image:hover img{
    transform:scale(1.05);
}

/* Experience Badge */

.experience-box{

position:absolute;

bottom:-15px;

left:174px;

background:#2b7be4;

color:#fff;

border-radius:18px;

padding:14px 22px;

box-shadow:0 15px 35px rgba(43,123,228,.30);

z-index:10;

}

.exp-number h2{
    margin:0;
    font-size:38px;
    font-weight:700;
}

.exp-number span{
    font-size:14px;
    opacity:.9;
}

/* Bottom Image */

.doctor-small-image{
    position:absolute;
    left:30px;
    bottom:-40px;
    width:170px;
    height:170px;
    border-radius:50%;
    overflow:hidden;
    border:8px solid #fff;
    box-shadow:0 20px 45px rgba(0,0,0,.18);
}

.doctor-small-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Floating Patient Card */

.patient-card{
    position:absolute;
    right:-10px;
    bottom:40px;
    background:#fff;
    padding:18px 22px;
    border-radius:18px;
    display:flex;
    align-items:center;
    gap:16px;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
    z-index:5;
}

.patient-card i{
    width:55px;
    height:55px;
    border-radius:50%;
    background:#2b7be4;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:24px;
}

.patient-card h4{
    margin:0;
    color:#23425b;
    font-size:24px;
    font-weight:700;
}

.patient-card p{
    margin:0;
    color:#7a8b9b;
    font-size:14px;
}

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

.doctor-content{
    padding-left:30px;
}

.section-subtitle{
    color:#2b7be4;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.doctor-content h2{
    margin:12px 0;
    font-size:48px;
    color:#23425b;
    font-weight:700;
}

.doctor-content h5{
    color:#2b7be4;
    font-size:22px;
    margin-bottom:25px;
    font-weight:600;
}

.doctor-content p{
    color:#5f7182;
    line-height:1.9;
    font-size:16px;
    margin-bottom:18px;
}

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

.doctor-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin:35px 0;
}

.feature-box{
    background:#fff;
    border-radius:15px;
    padding:18px;
    display:flex;
    align-items:center;
    gap:14px;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
    transition:.3s;
}

.feature-box i{
    color:#2b7be4;
    font-size:22px;
}

.feature-box span{
    color:#23425b;
    font-weight:600;
}

.feature-box:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 35px rgba(0,0,0,.10);
}

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

.doctor-stats{
    display:flex;
    gap:20px;
    margin-bottom:35px;
}

.stat-box{
    flex:1;
    background:#fff;
    border-radius:18px;
    padding:25px;
    text-align:center;
    box-shadow:0 12px 25px rgba(0,0,0,.06);
}

.stat-box h3{
    margin:0;
    color:#2b7be4;
    font-size:34px;
    font-weight:700;
}

.stat-box span{
    color:#7b8b9b;
    font-size:14px;
}

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

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

.primary-btn{
    background:#2b7be4;
    color:#fff;
    padding:16px 34px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition:.35s;
}

.primary-btn:hover{
    background:#195fb8;
    color:#fff;
    transform:translateY(-4px);
}

.secondary-btn{
    background:#fff;
    color:#23425b;
    padding:16px 34px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    border:2px solid #dbe9f7;
    transition:.35s;
}

.secondary-btn:hover{
    border-color:#2b7be4;
    color:#2b7be4;
}

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

.doctor-main-image,
.patient-card,
.experience-box{
    animation:floatDoctor 5s ease-in-out infinite;
}

@keyframes floatDoctor{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}
/*==========================================
LARGE LAPTOP
==========================================*/

@media (max-width:1400px){

.doctor-profile{
padding:90px 0;
}

.doctor-main-image{
border-radius:25px;
}

.doctor-content h2{
font-size:44px;
}

.doctor-content h5{
font-size:20px;
}

.doctor-image-wrapper{
min-height:650px;
}

}

/*==========================================
LAPTOP
==========================================*/

@media (max-width:1199px){

.doctor-profile{
padding:80px 0;
}

.doctor-image-wrapper{
min-height:600px;
}

.doctor-content{
padding-left:15px;
}

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

.doctor-content h5{
font-size:19px;
}

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

.doctor-small-image{
width:150px;
height:150px;
left:20px;
}

.patient-card{
right:0;
padding:16px;
}

.patient-card h4{
font-size:20px;
}

.patient-card i{
width:50px;
height:50px;
font-size:20px;
}

}

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

@media (max-width:991px){

.doctor-profile{
padding:70px 0;
}

.doctor-image-wrapper{
min-height:auto;
margin-bottom:80px;
}

.doctor-main-image{
max-width:550px;
margin:auto;
}

.doctor-small-image{
left:30px;
bottom:-30px;
}

.patient-card{
right:30px;
bottom:30px;
}

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

.doctor-content{
padding-left:0;
text-align:center;
}

.doctor-content p{
max-width:700px;
margin-left:auto;
margin-right:auto;
}

.doctor-features{
grid-template-columns:repeat(2,1fr);
}

.doctor-stats{
justify-content:center;
}

.doctor-buttons{
justify-content:center;
}

}

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

@media (max-width:767px){

.doctor-profile{
padding:60px 0;
}

.doctor-image-wrapper{
margin-bottom:70px;
}

.doctor-main-image{
border-radius:20px;
}

.doctor-small-image{
width:120px;
height:120px;
left:15px;
bottom:-20px;
border-width:5px;
}

.patient-card{
position:relative;
right:auto;
bottom:auto;
margin:30px auto 0;
width:100%;
max-width:320px;
justify-content:center;
}

.experience-box{
padding:14px 18px;
border-radius:15px;
}

.exp-number h2{
font-size:28px;
}

.exp-number span{
font-size:12px;
}

.doctor-content h2{
font-size:32px;
}

.doctor-content h5{
font-size:18px;
}

.doctor-content p{
font-size:15px;
line-height:1.8;
}

.doctor-features{
grid-template-columns:1fr;
gap:14px;
}

.feature-box{
padding:16px;
}

.doctor-stats{
flex-direction:column;
gap:15px;
}

.stat-box{
padding:20px;
}

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

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

}

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

@media (max-width:575px){

.doctor-profile{
padding:50px 0;
}

.section-subtitle{
font-size:13px;
}

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

.doctor-content h5{
font-size:17px;
line-height:1.6;
}

.doctor-content p{
font-size:14px;
}

.doctor-main-image{
border-radius:18px;
}

.doctor-small-image{
width:100px;
height:100px;
}

.experience-box{
/* top:0px; */
left:98px;
padding:12px 15px;
}

.exp-number h2{
font-size:24px;
}

.patient-card{
padding:14px;
}

.patient-card h4{
font-size:18px;
}

.patient-card p{
font-size:13px;
}

.feature-box span{
font-size:14px;
}

.stat-box h3{
font-size:28px;
}

.primary-btn,
.secondary-btn{
padding:14px 22px;
font-size:15px;
}

}

/*==========================================
EXTRA SMALL
==========================================*/

@media (max-width:390px){

.doctor-profile{
padding:45px 0;
}

.doctor-content h2{
font-size:24px;
}

.doctor-content h5{
font-size:15px;
}

.doctor-content p{
font-size:13px;
line-height:1.7;
}

.doctor-small-image{
display:none;
}

.experience-box{
position:relative;
left:0;
top:0;
display:inline-block;
margin-bottom:20px;
}

.patient-card{
max-width:100%;
}

.patient-card i{
width:45px;
height:45px;
font-size:18px;
}

.stat-box{
padding:18px;
}

.stat-box h3{
font-size:24px;
}

.feature-box{
padding:14px;
}

.primary-btn,
.secondary-btn{
font-size:14px;
}

}
/*=========================================
PROFESSIONAL PROFILE SECTION
=========================================*/

.profile-section{
    position:relative;
    padding:100px 0;
    background:#f8fbff;
    overflow:hidden;
}

.profile-section::before{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(44,123,229,.05);
    border-radius:50%;
    top:-150px;
    right:-150px;
}

.profile-section::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    background:rgba(44,123,229,.04);
    border-radius:50%;
    bottom:-120px;
    left:-120px;
}

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

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

.section-heading span{
    display:inline-block;
    color:#2b7be4;
    text-transform:uppercase;
    font-size:14px;
    letter-spacing:2px;
    font-weight:700;
    margin-bottom:10px;
}

.section-heading h2{
    font-size:46px;
    color:#23425b;
    font-weight:700;
    margin-bottom:15px;
}

.section-heading p{
    max-width:720px;
    margin:auto;
    color:#68798b;
    line-height:1.8;
}

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

.profile-card{

    position:relative;

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

    backdrop-filter:blur(12px);

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

    border-radius:24px;

    padding:35px;

    margin-bottom:30px;

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

    transition:.4s;

}

.profile-card:hover{

    transform:translateY(-8px);

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

}

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

.card-title{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:30px;

}

.card-icon{

    width:60px;

    height:60px;

    background:linear-gradient(135deg,#2b7be4,#4fa4ff);

    border-radius:18px;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    flex-shrink:0;

}

.card-title h3{

    font-size:30px;

    color:#23425b;

    font-weight:700;

    margin:0;

}

/*=========================================
PROFILE LIST
=========================================*/

.profile-list{

    list-style:none;

    padding:0;

    margin:0;

}

.profile-list li{

    position:relative;

    padding-left:35px;

    margin-bottom:18px;

    line-height:1.8;

    color:#58697a;

    font-size:16px;

}

.profile-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    width:24px;

    height:24px;

    background:#2b7be4;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:13px;

}

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

.timeline{

    position:relative;

    padding-left:35px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:8px;

    top:0;

    width:3px;

    height:100%;

    background:#2b7be4;

    border-radius:10px;

}

.timeline-item{

    position:relative;

    padding-bottom:35px;

}

.timeline-item:last-child{

    padding-bottom:0;

}

.timeline-item::before{

    content:"";

    position:absolute;

    left:-32px;

    top:8px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#fff;

    border:5px solid #2b7be4;

}

.year{

    display:inline-block;

    background:#2b7be4;

    color:#fff;

    padding:5px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    margin-bottom:12px;

}

.timeline-item h5{

    font-size:22px;

    color:#23425b;

    margin-bottom:8px;

    font-weight:700;

}

.timeline-item p{

    margin:0;

    color:#6c7c8d;

    line-height:1.8;

}

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

.profile-card:hover .card-icon{

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

}

.profile-card:hover .timeline-item::before{

    background:#2b7be4;

}

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

.profile-card{

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

}

@keyframes cardFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-5px);

}

100%{

transform:translateY(0);

}

}

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

.profile-card,
.card-icon,
.timeline-item,
.profile-list li{

transition:.35s ease;

}
/*==========================================
LARGE LAPTOP
==========================================*/

@media (max-width:1400px){

.profile-section{
padding:90px 0;
}

.section-heading h2{
font-size:42px;
}

.profile-card{
padding:30px;
}

.card-title h3{
font-size:26px;
}

}

/*==========================================
LAPTOP
==========================================*/

@media (max-width:1199px){

.profile-section{
padding:80px 0;
}

.section-heading{
margin-bottom:50px;
}

.section-heading h2{
font-size:38px;
}

.section-heading p{
font-size:15px;
}

.profile-card{
padding:28px;
}

.card-title{
margin-bottom:24px;
}

.card-icon{
width:55px;
height:55px;
font-size:22px;
}

.card-title h3{
font-size:24px;
}

.profile-list li{
font-size:15px;
}

.timeline-item h5{
font-size:20px;
}

}

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

@media (max-width:991px){

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

.section-heading{
margin-bottom:45px;
}

.section-heading h2{
font-size:34px;
}

.section-heading p{
font-size:15px;
}

.profile-card{
padding:26px;
}

.card-title{
gap:15px;
}

.card-icon{
width:52px;
height:52px;
font-size:20px;
}

.card-title h3{
font-size:22px;
}

.profile-list li{
font-size:15px;
line-height:1.7;
}

.timeline{
padding-left:28px;
}

.timeline::before{
left:6px;
}

.timeline-item::before{
left:-26px;
width:16px;
height:16px;
}

.timeline-item h5{
font-size:19px;
}

}

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

@media (max-width:767px){

.profile-section{
padding:60px 0;
}

.section-heading{
margin-bottom:35px;
}

.section-heading span{
font-size:13px;
}

.section-heading h2{
font-size:30px;
line-height:1.3;
}

.section-heading p{
font-size:14px;
}

.profile-card{
padding:22px;
border-radius:18px;
}

.card-title{
flex-direction:column;
text-align:center;
gap:12px;
}

.card-title h3{
font-size:21px;
}

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

.profile-list li{
font-size:14px;
padding-left:30px;
margin-bottom:14px;
}

.profile-list li::before{
width:22px;
height:22px;
font-size:12px;
}

.timeline{
padding-left:24px;
}

.timeline::before{
left:5px;
}

.timeline-item::before{
left:-22px;
width:15px;
height:15px;
border-width:4px;
}

.timeline-item{
padding-bottom:28px;
}

.timeline-item h5{
font-size:18px;
}

.timeline-item p{
font-size:14px;
}

.year{
font-size:12px;
padding:4px 12px;
}

}

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

@media (max-width:575px){

.profile-section{
padding:50px 0;
}

.section-heading h2{
font-size:26px;
}

.section-heading p{
font-size:13px;
}

.profile-card{
padding:18px;
margin-bottom:20px;
}

.card-title h3{
font-size:19px;
}

.card-icon{
width:46px;
height:46px;
font-size:18px;
}

.profile-list li{
font-size:13px;
line-height:1.6;
}

.timeline{
padding-left:20px;
}

.timeline-item h5{
font-size:17px;
}

.timeline-item p{
font-size:13px;
}

.year{
font-size:11px;
}

}

/*==========================================
EXTRA SMALL
==========================================*/

@media (max-width:390px){

.profile-section{
padding:45px 0;
}

.section-heading h2{
font-size:24px;
}

.section-heading p{
font-size:12px;
}

.profile-card{
padding:16px;
border-radius:16px;
}

.card-title h3{
font-size:18px;
}

.card-icon{
width:42px;
height:42px;
font-size:16px;
}

.profile-list li{
font-size:12px;
padding-left:26px;
}

.profile-list li::before{
width:18px;
height:18px;
font-size:10px;
}

.timeline{
padding-left:18px;
}

.timeline-item{
padding-bottom:22px;
}

.timeline-item h5{
font-size:16px;
}

.timeline-item p{
font-size:12px;
line-height:1.6;
}

.year{
font-size:10px;
padding:4px 10px;
}

}
/*============================
SERVICE HERO
============================*/

.service-banner{

position:relative;

padding:170px 0 120px;

background:url(../img/caucasian-woman-doctor-talk-and-discuss-with-young-2022-11-15-13-37-15-utc.avif) center center/cover;

overflow:hidden;

}

.banner-overlay{

position:absolute;

inset:0;

background:linear-gradient(90deg,
rgba(8,34,63,.88),
rgba(8,34,63,.55));

}

.banner-content{

position:relative;

z-index:5;

color:#fff;

}

.banner-tag{

display:inline-flex;

align-items:center;

gap:10px;

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

padding:10px 22px;

border-radius:40px;

backdrop-filter:blur(8px);

margin-bottom:25px;

font-size:14px;

}

.banner-tag i{

color:#6fd4ff;

}

.banner-content h1{

font-size:64px;

font-weight:800;

line-height:1.1;

margin-bottom:25px;

}

.banner-content h1 span{

color:#6fd4ff;

}

.banner-content p{

font-size:18px;

line-height:1.9;

max-width:620px;

margin-bottom:35px;

color:#e9f3ff;

}

.banner-buttons{

display:flex;

gap:18px;

margin-bottom:35px;

flex-wrap:wrap;

}

.primary-btn{

background:#2b7be4;

padding:16px 34px;

border-radius:50px;

color:#fff;

text-decoration:none;

display:inline-flex;

gap:10px;

align-items:center;

font-weight:600;

transition:.35s;

}

.primary-btn:hover{

background:#135fc9;

color:#fff;

transform:translateY(-5px);

}

.secondary-btn{

padding:16px 34px;

border-radius:50px;

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

color:#23425b;

text-decoration:none;

font-weight:600;

transition:.35s;

}

.secondary-btn:hover{

background:#fff;

color:#135fc9;

}

.breadcrumb{

display:flex;

align-items:center;

gap:10px;

color:#fff;

}

.breadcrumb a{

color:#fff;

text-decoration:none;

}

.banner-image{

position:relative;

z-index:5;

}

.banner-image img{

width:100%;

max-width:500px;

display:block;

margin:auto;
border-radius: 20px;

}

.floating-card{

position:absolute;

background:#fff;

padding:18px 22px;

border-radius:18px;

display:flex;

align-items:center;

gap:15px;

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

animation:floatCard 4s ease-in-out infinite;

}

.floating-card i{

width:55px;

height:55px;

background:#2b7be4;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:22px;

}

.floating-card h4{

margin:0;

font-size:26px;

color:#23425b;

}

.floating-card span{

font-size:14px;

color:#7d8fa2;

}

.card-one{

top:60px;

left:-20px;

}

.card-two{

bottom:40px;

right:-20px;

}

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}
@media(max-width:991px){

.service-banner{

padding:120px 0 80px;

text-align:center;

}

.banner-content h1{

font-size:46px;

}

.banner-content p{

margin:auto auto 30px;

}

.banner-buttons{

justify-content:center;

}

.breadcrumb{

justify-content:center;

margin-bottom:50px;

}

.banner-image{

margin-top:30px;

}

.card-one{

left:0;

}

.card-two{

right:0;

}

}

@media(max-width:767px){

.service-banner{

padding:100px 0 70px;

}

.banner-content h1{

font-size:34px;

}

.banner-content p{

font-size:15px;

}

.banner-tag{

font-size:12px;

}

.banner-buttons{

flex-direction:column;

}

.primary-btn,

.secondary-btn{

width:100%;

justify-content:center;

}

.banner-image img{

max-width:320px;

}

.floating-card{

position:relative;

margin:15px auto;

max-width:260px;

left:auto;

right:auto;

top:auto;

bottom:auto;

}
.card-two{

    bottom: -12px !important;

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

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

.services-section::before{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    background:rgba(43,123,228,.05);
    border-radius:50%;
    top:-180px;
    right:-180px;
}

.services-section::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    background:rgba(43,123,228,.04);
    border-radius:50%;
    left:-120px;
    bottom:-120px;
}

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

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

.section-heading span{
    display:inline-block;
    color:#2b7be4;
    font-size:15px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:12px;
}

.section-heading h2{
    font-size:46px;
    font-weight:700;
    color:#23425b;
    margin-bottom:15px;
}

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

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

.service-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 18px 45px rgba(0,0,0,.08);
    transition:.4s;
    height:100%;
    display:flex;
    flex-direction:column;
    position:relative;
}

.service-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#2b7be4,#6bc8ff);
}

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

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

.service-image{
    position:relative;
    overflow:hidden;
    height:260px;
}

.service-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.service-card:hover .service-image img{
    transform:scale(1.08);
}

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

.service-badge{
    position:absolute;
    left:25px;
    bottom:-30px;
    width:65px;
    height:65px;
    background:#2b7be4;
    border-radius:20px;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:26px;
    border:5px solid #fff;
    box-shadow:0 15px 35px rgba(43,123,228,.35);
}

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

.service-content{
    padding:45px 28px 30px;
    flex:1;
    display:flex;
    flex-direction:column;
}

.service-content h3{
    font-size:30px;
    font-weight:700;
    color:#23425b;
    margin-bottom:18px;
}

.service-content p{
    color:#65778a;
    font-size:16px;
    line-height:1.9;
    margin-bottom:25px;
}

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

.service-features{
    list-style:none;
    padding:0;
    margin:0;
    margin-top:auto;
}

.service-features li{
    padding:10px 0;
    color:#23425b;
    font-weight:500;
    border-bottom:1px solid #edf3fa;
}

.service-features li:last-child{
    border:none;
}

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

.service-card:hover h3{
    color:#2b7be4;
}

.service-card:hover .service-badge{
    transform:rotate(8deg) scale(1.08);
}

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

.service-card{
    animation:floatCard 6s ease-in-out infinite;
}

@keyframes floatCard{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}

/*=============================
TRANSITION
==============================*/

.service-card,
.service-card *,
.service-badge{
    transition:.35s ease;
}
/*=========================================
LARGE DESKTOP
=========================================*/

@media (max-width:1400px){

.services-section{
padding:90px 0;
}

.section-heading h2{
font-size:42px;
}

.service-image{
height:240px;
}

.service-content h3{
font-size:28px;
}

}

/*=========================================
LAPTOP
=========================================*/

@media (max-width:1199px){

.services-section{
padding:80px 0;
}

.section-heading{
margin-bottom:55px;
}

.section-heading h2{
font-size:38px;
}

.section-heading p{
font-size:15px;
}

.service-image{
height:220px;
}

.service-content{
padding:42px 24px 28px;
}

.service-content h3{
font-size:24px;
}

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

.service-badge{
width:60px;
height:60px;
font-size:24px;
left:20px;
bottom:-28px;
}

}

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

@media (max-width:991px){

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

.section-heading{
margin-bottom:45px;
}

.section-heading h2{
font-size:34px;
}

.section-heading p{
font-size:15px;
}

.service-card{
border-radius:20px;
}

.service-image{
height:250px;
}

.service-content{
padding:40px 22px 25px;
}

.service-content h3{
font-size:23px;
}

.service-content p{
font-size:15px;
line-height:1.8;
}

.service-features li{
font-size:15px;
padding:9px 0;
}

}

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

@media (max-width:767px){

.services-section{
padding:60px 0;
}

.section-heading{
margin-bottom:35px;
}

.section-heading span{
font-size:13px;
}

.section-heading h2{
font-size:30px;
line-height:1.3;
}

.section-heading p{
font-size:14px;
}

.service-card{
border-radius:18px;
}

.service-image{
height:220px;
}

.service-badge{
width:55px;
height:55px;
font-size:22px;
left:18px;
bottom:-25px;
border-width:4px;
}

.service-content{
padding:38px 20px 24px;
}

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

.service-content p{
font-size:14px;
line-height:1.8;
}

.service-features li{
font-size:14px;
}

}

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

@media (max-width:575px){

.services-section{
padding:50px 0;
}

.section-heading h2{
font-size:26px;
}

.section-heading p{
font-size:13px;
}

.service-image{
height:200px;
}

.service-badge{
width:50px;
height:50px;
font-size:20px;
left:16px;
bottom:-22px;
}

.service-content{
padding:34px 18px 22px;
}

.service-content h3{
font-size:20px;
}

.service-content p{
font-size:13px;
line-height:1.7;
}

.service-features li{
font-size:13px;
padding:8px 0;
}

}

/*=========================================
EXTRA SMALL
=========================================*/

@media (max-width:390px){

.services-section{
padding:45px 0;
}

.section-heading h2{
font-size:24px;
}

.section-heading p{
font-size:12px;
}

.service-card{
border-radius:16px;
}

.service-image{
height:180px;
}

.service-badge{
width:46px;
height:46px;
font-size:18px;
left:15px;
bottom:-20px;
}

.service-content{
padding:30px 16px 20px;
}

.service-content h3{
font-size:18px;
}

.service-content p{
font-size:12px;
line-height:1.6;
}

.service-features li{
font-size:12px;
}

}
/*=========================================
GALLERY SECTION
=========================================*/
/*====================================
GALLERY BANNER
====================================*/

.gallery-page-banner{

    position:relative;

    width:100%;

    min-height:420px;

    background:url("images/gallery-banner.jpg") center center/cover no-repeat;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

}

/* Overlay */

.gallery-banner-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(6,35,70,.72),
        rgba(6,35,70,.72)
    );

}

/* Content */

.gallery-banner-content{

    position: relative;
    z-index: 10;
    max-width: 100%;
    color: #fff;
    padding-top: 167px;
    height: 512px;

}

.gallery-subtitle{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 24px;

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

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

    border-radius:50px;

    backdrop-filter:blur(8px);

    font-size:15px;

    margin-bottom:25px;

}

.gallery-subtitle i{

    color:#4fc3ff;

}

.gallery-banner-content h1{

    font-size:64px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:20px;

}

.gallery-banner-content h1 span{

    color:#58c3ff;

}

.gallery-banner-content p{

    max-width:700px;

    margin:0 auto 30px;

    font-size:18px;

    line-height:1.8;

    color:#f2f8ff;

}

.gallery-breadcrumb{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

}

.gallery-breadcrumb a{

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.gallery-breadcrumb a:hover{

    color:#58c3ff;

}

.gallery-breadcrumb span{

    color:#58c3ff;

}

.gallery-breadcrumb i{

    font-size:12px;

}

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

.gallery-section::before{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(43,123,228,.05);
    border-radius:50%;
    top:-180px;
    right:-180px;
}

.gallery-section::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    background:rgba(43,123,228,.04);
    border-radius:50%;
    left:-120px;
    bottom:-120px;
}

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

.gallery-heading{
    text-align:center;
    margin-bottom:55px;
}

.gallery-heading span{
    display:inline-block;
    color:#2b7be4;
    font-size:15px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:12px;
}

.gallery-heading h2{
    font-size:46px;
    font-weight:700;
    color:#23425b;
    margin-bottom:15px;
}

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

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

.gallery-filter{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:50px;
}

.gallery-filter button{
    border:none;
    background:#fff;
    padding:14px 26px;
    border-radius:40px;
    font-weight:600;
    color:#23425b;
    cursor:pointer;
    transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.gallery-filter button:hover,
.gallery-filter button.active{
    background:#2b7be4;
    color:#fff;
}

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

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    cursor:pointer;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    background:#fff;
}

.gallery-item.large{
    grid-row:span 2;
}

.gallery-item img{
    width:100%;
    height:100%;
    min-height:280px;
    object-fit:cover;
    display:block;
    transition:.6s;
}

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

.gallery-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
        rgba(13,44,85,.92),
        rgba(13,44,85,.15));
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:30px;
    opacity:0;
    transition:.4s;
}

.gallery-overlay h4{
    color:#fff;
    font-size:24px;
    margin-bottom:8px;
    transform:translateY(20px);
    transition:.4s;
}

.gallery-overlay p{
    color:#dbe9ff;
    margin:0;
    transform:translateY(20px);
    transition:.45s;
}

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

.gallery-item:hover img{
    transform:scale(1.08);
}

.gallery-item:hover .gallery-overlay{
    opacity:1;
}

.gallery-item:hover .gallery-overlay h4,
.gallery-item:hover .gallery-overlay p{
    transform:translateY(0);
}

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

.gallery-item{
    animation:galleryFloat 6s ease-in-out infinite;
}

.gallery-item:nth-child(2){
    animation-delay:.3s;
}

.gallery-item:nth-child(3){
    animation-delay:.6s;
}

.gallery-item:nth-child(4){
    animation-delay:.9s;
}

@keyframes galleryFloat{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}

/*=========================================
TRANSITION
=========================================*/

.gallery-item,
.gallery-item *,
.gallery-filter button{
    transition:.35s ease;
}
/*=========================================
LARGE DESKTOP
=========================================*/

@media (max-width:1400px){

.gallery-section{
padding:90px 0;
}

.gallery-heading h2{
font-size:42px;
}

.gallery-grid{
gap:22px;
}

.gallery-item img{
min-height:260px;
}

}

/*=========================================
LAPTOP
=========================================*/

@media (max-width:1199px){

.gallery-section{
padding:80px 0;
}

.gallery-heading{
margin-bottom:50px;
}

.gallery-heading h2{
font-size:38px;
}

.gallery-heading p{
font-size:15px;
}

.gallery-grid{
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.gallery-item img{
min-height:240px;
}

.gallery-overlay{
padding:24px;
}

.gallery-overlay h4{
font-size:22px;
}

.gallery-overlay p{
font-size:14px;
}

.gallery-filter{
gap:12px;
}

.gallery-filter button{
padding:12px 22px;
font-size:15px;
}

}

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

@media (max-width:991px){

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

.gallery-heading{
margin-bottom:45px;
}

.gallery-heading h2{
font-size:34px;
}

.gallery-heading p{
font-size:15px;
}

.gallery-grid{
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.gallery-item.large{
grid-row:span 1;
}

.gallery-item img{
min-height:250px;
}

.gallery-filter{
margin-bottom:40px;
}

.gallery-filter button{
padding:11px 20px;
font-size:14px;
}

.gallery-overlay{
opacity:1;
background:linear-gradient(to top,
rgba(12,42,82,.82),
rgba(12,42,82,.15));
}

.gallery-overlay h4,
.gallery-overlay p{
transform:none;
}

}

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

@media (max-width:767px){

.gallery-section{
padding:60px 0;
}

.gallery-heading{
margin-bottom:35px;
}

.gallery-heading span{
font-size:13px;
}

.gallery-heading h2{
font-size:30px;
line-height:1.3;
}

.gallery-heading p{
font-size:14px;
}

.gallery-filter{
justify-content:center;
gap:10px;
margin-bottom:30px;
}

.gallery-filter button{
padding:10px 18px;
font-size:13px;
}

.gallery-grid{
grid-template-columns:1fr;
gap:18px;
}

.gallery-item{
border-radius:18px;
}

.gallery-item img{
min-height:260px;
}

.gallery-overlay{
padding:22px;
}

.gallery-overlay h4{
font-size:20px;
}

.gallery-overlay p{
font-size:14px;
}

}

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

@media (max-width:575px){

.gallery-section{
padding:50px 0;
}

.gallery-heading h2{
font-size:26px;
}

.gallery-heading p{
font-size:13px;
}

.gallery-filter{
gap:8px;
}

.gallery-filter button{
padding:9px 16px;
font-size:12px;
}

.gallery-item{
border-radius:16px;
}

.gallery-item img{
min-height:220px;
}

.gallery-overlay{
padding:18px;
}

.gallery-overlay h4{
font-size:18px;
}

.gallery-overlay p{
font-size:13px;
}

}

/*=========================================
EXTRA SMALL
=========================================*/

@media (max-width:390px){

.gallery-section{
padding:45px 0;
}

.gallery-heading h2{
font-size:24px;
}

.gallery-heading p{
font-size:12px;
}

.gallery-filter{
gap:6px;
}

.gallery-filter button{
width:100%;
}

.gallery-item{
border-radius:14px;
}

.gallery-item img{
min-height:190px;
}

.gallery-overlay{
padding:16px;
}

.gallery-overlay h4{
font-size:16px;
}

.gallery-overlay p{
font-size:12px;
}

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

@media(max-width:991px){

.gallery-page-banner{

min-height:360px;

padding:80px 20px;

}
.gallery-banner-content{
padding-top: 0px;
    height: 215px;
}
.gallery-banner-content h1{

font-size:46px;


}

.gallery-banner-content p{

font-size:16px;

}

}

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

@media(max-width:767px){

.gallery-page-banner{

min-height:300px;

padding:70px 15px;

}

.gallery-subtitle{

font-size:12px;

padding:8px 18px;

}

.gallery-banner-content h1{

font-size:34px;

}

.gallery-banner-content p{

font-size:15px;

}

.gallery-breadcrumb{

font-size:14px;

}

}

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

@media(max-width:480px){

.gallery-page-banner{

min-height:260px;

}

.gallery-banner-content h1{

font-size:28px;

}

.gallery-banner-content p{

font-size:14px;

line-height:1.7;

}

.gallery-subtitle{

font-size:11px;

padding:7px 16px;

}

}
/*=========================
BLOG HERO
=========================*/

.blog-banner{

    position:relative;

    overflow:hidden;

    padding:130px 0 90px;

    background:linear-gradient(135deg,#0b4ea2,#2f8fff);

}

.blog-banner::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

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

    right:-120px;

    top:-120px;

}

.blog-banner::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

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

    left:-100px;

    bottom:-100px;

}

/* Content */

.blog-content{

    position:relative;

    z-index:2;

}

.blog-tag{

    display:inline-block;

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

    color:#fff;

    padding:10px 22px;

    border-radius:50px;

    margin-bottom:20px;

    backdrop-filter:blur(8px);

    font-size:14px;

}

.blog-content h1{

    color:#fff;

    font-size:58px;

    font-weight:700;

    line-height:1.15;

    margin-bottom:20px;

}

.blog-content h1 span{

    color:#d7ecff;

}

.blog-content p{

    color:#edf5ff;

    max-width:600px;

    line-height:1.9;

    margin-bottom:35px;

    font-size:17px;

}

/* Breadcrumb */

.blog-breadcrumb{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

}

.blog-breadcrumb a{

    color:#fff;

    text-decoration:none;

}

.blog-breadcrumb i{

    font-size:12px;

}

/* Image */

.blog-banner-img{

    position:relative;

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

}

.blog-banner-img img{

    width:100%;

    max-width:420px;

}

/* Floating Cards */

.blog-card{

    position:absolute;

    background:#fff;

    padding:18px;

    width:150px;

    border-radius:18px;

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

    text-align:center;

    animation:floatCard 4s ease-in-out infinite;

}

.blog-card i{

    font-size:28px;

    color:#2b7be4;

    margin-bottom:10px;

}

.blog-card h5{

    margin:0;

    font-size:24px;

    color:#23425b;

}

.blog-card span{

    color:#7d8fa2;

    font-size:14px;

}

.blog-card.one{

    top:20px;

    left:-20px;

}

.blog-card.two{

    bottom:20px;

    right:-20px;

}

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}
}
/* Tablet */

@media(max-width:991px){

.blog-banner{

padding:90px 0 70px;

text-align:center;

}

.blog-content h1{

font-size:42px;

}

.blog-content p{

margin:auto auto 30px;

}

.blog-breadcrumb{

justify-content:center;

margin-bottom:40px;

}

.blog-banner-img{

margin-top:30px;

}

.blog-card.one{

left:10px;

}

.blog-card.two{

right:10px;

}

}

/* Mobile */

@media(max-width:767px){

.blog-banner{

padding:70px 0 50px;

}

.blog-content h1{

font-size:32px;

}

.blog-content p{

font-size:15px;

}

.blog-tag{

font-size:12px;

padding:8px 18px;

}

.blog-banner-img img{

max-width:280px;

}

.blog-card{

width:120px;

padding:14px;

}

.blog-card h5{

font-size:18px;

}

.blog-card span{

font-size:12px;

}

.blog-card.one{

top:0;

left:0;

}

.blog-card.two{

bottom:0;

right:0;

}

}
/*==========================
BLOG SECTION
==========================*/

.clinic-blog-area{

padding:90px 0;

background:#f7fbff;

}

.clinic-blog-heading{

text-align:center;

margin-bottom:60px;

}

.clinic-blog-heading span{

color:#2b7be4;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

font-size:14px;

}

.clinic-blog-heading h2{

font-size:42px;

font-weight:700;

margin:15px 0;

color:#233d56;

}

.clinic-blog-heading p{

max-width:650px;

margin:auto;

color:#6d7b8d;

line-height:1.8;

}

/*========================*/

.clinic-blog-card{

background:#fff;

border-radius:20px;

overflow:hidden;

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

transition:.4s;

height:100%;

display:flex;

flex-direction:column;

}

.clinic-blog-card:hover{

transform:translateY(-10px);

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

}

/*========================*/

.clinic-blog-img{

position:relative;

overflow:hidden;

}

.clinic-blog-img img{

width:100%;

height:260px;

object-fit:cover;

transition:.5s;

}

.clinic-blog-card:hover img{

transform:scale(1.08);

}

/*========================*/

.clinic-blog-date{

position:absolute;

left:20px;

bottom:20px;

background:#2b7be4;

color:#fff;

padding:10px 18px;

border-radius:30px;

font-size:14px;

display:flex;

align-items:center;

gap:8px;

}

/*========================*/

.clinic-blog-content{

padding:30px;

display:flex;

flex-direction:column;

flex:1;

}

.clinic-blog-content h3{

font-size:19px;

font-weight:700;

line-height:1.4;

margin-bottom:15px;

color:#233d56;

}

.clinic-blog-content p{

color:#66788c;

line-height:1.8;

margin-bottom:25px;

flex:1;
    font-size: 11px;

}

/*========================*/

.clinic-blog-content a{

display:inline-flex;

align-items:center;

gap:10px;

font-weight:600;

text-decoration:none;

color:#2b7be4;

transition:.35s;

}

.clinic-blog-content a:hover{

gap:16px;

color:#145fc8;

}

.clinic-blog-content a i{

transition:.35s;

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

@media(max-width:991px){

.clinic-blog-area{

padding:70px 0;

}

.clinic-blog-heading h2{

font-size:34px;

}

.clinic-blog-img img{

height:240px;

}

.clinic-blog-content{

padding:25px;

}

.clinic-blog-content h3{

font-size:22px;

}

}

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

@media(max-width:767px){

.clinic-blog-area{

padding:60px 0;

}

.clinic-blog-heading{

margin-bottom:40px;

}

.clinic-blog-heading h2{

font-size:28px;

}

.clinic-blog-heading p{

font-size:14px;

}

.clinic-blog-img img{

height:220px;

}

.clinic-blog-date{

left:15px;

bottom:15px;

font-size:12px;

padding:8px 14px;

}

.clinic-blog-content{

padding:22px;

}

.clinic-blog-content h3{

font-size:20px;

}

.clinic-blog-content p{

font-size:14px;

}

}

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

@media(max-width:575px){

.clinic-blog-img img{

height:200px;

}

.clinic-blog-heading h2{

font-size:24px;

}

.clinic-blog-content{

padding:18px;

}

.clinic-blog-content h3{

font-size:18px;

}

.clinic-blog-content p{

font-size:11px;

line-height:1.7;

}

.clinic-blog-date{

font-size:11px;

padding:7px 12px;

}

}
/*====================================
CONTACT HERO
====================================*/

.contact-hero{

padding:140px 0 90px;

position:relative;

overflow:hidden;

background:linear-gradient(135deg,#0d5bd3,#4aa6ff);

}

.contact-shape{

position:absolute;

border-radius:50%;

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

}

.shape-1{

width:420px;

height:420px;

top:-180px;

right:-150px;

}

.shape-2{

width:280px;

height:280px;

left:-120px;

bottom:-120px;

}

/* Content */

.contact-hero-content{

position:relative;

z-index:2;

}

.contact-tag{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 22px;

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

color:#fff;

border-radius:50px;

backdrop-filter:blur(8px);

margin-bottom:25px;

}

.contact-tag i{

color:#fff;

}

.contact-hero-content h1{

font-size:60px;

font-weight:700;

color:#fff;

line-height:1.15;

margin-bottom:25px;

}

.contact-hero-content h1 span{

color:#d8edff;

}

.contact-hero-content p{

color:#eef6ff;

font-size:17px;

line-height:1.9;

margin-bottom:35px;

max-width:600px;

}

/* Buttons */

.contact-btns{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-bottom:35px;

}

.contact-primary-btn{

background:#fff;

color:#0d5bd3;

padding:16px 32px;

border-radius:50px;

font-weight:600;

text-decoration:none;

display:flex;

align-items:center;

gap:10px;

transition:.35s;

}

.contact-primary-btn:hover{

background:#23425b;

color:#fff;

}

.contact-secondary-btn{

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

padding:16px 32px;

border-radius:50px;

color:#fff;

text-decoration:none;

font-weight:600;

transition:.35s;

}

.contact-secondary-btn:hover{

background:#fff;

color:#0d5bd3;

}

/* Breadcrumb */

.contact-breadcrumb{

display:flex;

align-items:center;

gap:10px;

color:#fff;

}

.contact-breadcrumb a{

color:#fff;

text-decoration:none;

}

/* Right Image */

.contact-hero-image{

position:relative;

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

}

.contact-hero-image img{

width:100%;

max-width:470px;
padding-top: 20px;
    border-radius: 23px;

}

/* Floating Cards */

.contact-card{

position:absolute;

display:flex;

align-items:center;

gap:15px;

background:#fff;

padding:18px;

border-radius:18px;

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

animation:contactFloat 4s ease-in-out infinite;

}

.contact-card i{

width:55px;

height:55px;

border-radius:50%;

background:#0d5bd3;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

}

.contact-card h5{

margin:0;

font-size:20px;

color:#23425b;

}

.contact-card span{

font-size:14px;

color:#7b8d9f;

}

.card-one{

top:40px;

left:-20px;

}

.card-two{

bottom:40px;

right:-20px;

}

@keyframes contactFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

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

@media(max-width:991px){

.contact-hero{

padding:100px 0 70px;

text-align:center;

}

.contact-hero-content h1{

font-size:44px;

}

.contact-hero-content p{

margin:auto auto 30px;

}

.contact-btns{

justify-content:center;

}

.contact-breadcrumb{

justify-content:center;

margin-bottom:40px;

}

.contact-hero-image{

margin-top:30px;

}

.card-one{

left:10px;

}

.card-two{

right:10px;

}

}

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

@media(max-width:767px){

.contact-hero{

padding:80px 0 60px;

}

.contact-hero-content h1{

font-size:34px;

}

.contact-hero-content p{

font-size:15px;

}

.contact-tag{

font-size:13px;

padding:8px 18px;

}

.contact-btns{

flex-direction:column;

}

.contact-primary-btn,

.contact-secondary-btn{

width:100%;

justify-content:center;

}

.contact-hero-image img{

max-width:300px;

}

.contact-card{

position:relative;

margin:15px auto;

left:auto;

right:auto;

top:auto;

bottom:auto;

max-width:240px;

}
.contact-hero-image{

        display: grid;

}
}

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

.clinic-contact-section{
    padding:100px 0;
    background:#f7fbff;
    position:relative;
    overflow:hidden;
}

.clinic-contact-section::before{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(43,123,228,.05);
    border-radius:50%;
    top:-180px;
    right:-180px;
}

.clinic-contact-section::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    background:rgba(43,123,228,.04);
    border-radius:50%;
    left:-120px;
    bottom:-120px;
}

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

.clinic-contact-heading{
    text-align:center;
    margin-bottom:60px;
}

.clinic-contact-heading span{
    display:inline-block;
    color:#2b7be4;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.clinic-contact-heading h2{
    font-size:46px;
    font-weight:700;
    color:#233d56;
    margin-bottom:15px;
}

.clinic-contact-heading p{
    max-width:700px;
    margin:auto;
    color:#68798b;
    line-height:1.8;
}

/*=====================================
LEFT PANEL
=====================================*/

.clinic-contact-info{
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.clinic-contact-image img{
    width:100%;
    height:280px;
    object-fit:cover;
    display:block;
}

.clinic-info-box{
    display:flex;
    gap:18px;
    padding:25px 30px;
    border-bottom:1px solid #edf3fa;
}

.clinic-info-box:last-child{
    border:none;
}

.clinic-info-icon{
    width:60px;
    height:60px;
    border-radius:18px;
    background:linear-gradient(135deg,#2b7be4,#5ab6ff);
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:22px;
    flex-shrink:0;
}

.clinic-info-box h4{
    font-size:20px;
    color:#233d56;
    margin-bottom:8px;
}

.clinic-info-box p,
.clinic-info-box a{
    color:#6d7b8d;
    text-decoration:none;
    line-height:1.8;
}

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

.clinic-social-links{
    display:flex;
    gap:15px;
        padding: 25px 0px;
}

.clinic-social-links a{
    width:48px;
    height:48px;
    border-radius:50%;
    background:#f2f7fd;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#2b7be4;
    text-decoration:none;
    transition:.35s;
}

.clinic-social-links a:hover{
    background:#2b7be4;
    color:#fff;
    transform:translateY(-5px);
}

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

.clinic-contact-form{
    background:#fff;
    padding:45px;
    border-radius:25px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    height:100%;
}

.clinic-contact-form h3{
    font-size:34px;
    color:#233d56;
    margin-bottom:12px;
}

.clinic-contact-form p{
    color:#6d7b8d;
    margin-bottom:35px;
}

/*=====================================
FIELDS
=====================================*/

.clinic-input-group{
    margin-bottom:25px;
}

.clinic-input-group label{
    display:block;
    margin-bottom:10px;
    font-weight:600;
    color:#233d56;
}

.clinic-input-group input,
.clinic-input-group textarea{
    width:100%;
    border:1px solid #dfe8f2;
    background:#f8fbff;
    border-radius:16px;
    padding:16px 20px;
    font-size:15px;
    outline:none;
    transition:.35s;
}

.clinic-input-group textarea{
    resize:none;
}

.clinic-input-group input:focus,
.clinic-input-group textarea:focus{
    border-color:#2b7be4;
    background:#fff;
    box-shadow:0 0 0 4px rgba(43,123,228,.12);
}

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

.clinic-submit-btn{
    border:none;
    background:linear-gradient(135deg,#2b7be4,#4fa4ff);
    color:#fff;
    padding:18px 36px;
    border-radius:50px;
    font-size:16px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    transition:.35s;
}

.clinic-submit-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(43,123,228,.28);
}

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

.clinic-map-section{
    margin-top:80px;
}

.clinic-map-section iframe{
    width:100%;
    height:500px;
    border:0;
    display:block;
}

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

.clinic-contact-info,
.clinic-contact-form{
    transition:.35s;
}

.clinic-contact-info:hover,
.clinic-contact-form:hover{
    transform:translateY(-8px);
    box-shadow:0 28px 60px rgba(0,0,0,.10);
}
/*=====================================
LARGE LAPTOP
=====================================*/

@media (max-width:1400px){

.clinic-contact-section{
padding:90px 0;
}

.clinic-contact-heading h2{
font-size:42px;
}

.clinic-contact-form{
padding:40px;
}

}

/*=====================================
LAPTOP
=====================================*/

@media (max-width:1199px){

.clinic-contact-section{
padding:80px 0;
}

.clinic-contact-heading{
margin-bottom:50px;
}

.clinic-contact-heading h2{
font-size:38px;
}

.clinic-contact-heading p{
font-size:15px;
}

.clinic-contact-form{
padding:35px;
}

.clinic-contact-form h3{
font-size:30px;
}

.clinic-contact-image img{
height:250px;
}

.clinic-info-box{
padding:22px 25px;
}

.clinic-info-icon{
width:55px;
height:55px;
font-size:20px;
}

}

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

@media (max-width:991px){

.clinic-contact-section{
padding:70px 0;
}

.clinic-contact-heading{
margin-bottom:45px;
}

.clinic-contact-heading h2{
font-size:34px;
}

.clinic-contact-heading p{
font-size:15px;
}

.clinic-contact-info{
margin-bottom:20px;
}

.clinic-contact-image img{
height:300px;
}

.clinic-contact-form{
padding:32px;
}

.clinic-contact-form h3{
font-size:28px;
}

.clinic-map-section{
margin-top:60px;
}

.clinic-map-section iframe{
height:420px;
}

}

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

@media (max-width:767px){

.clinic-contact-section{
padding:60px 0;
}

.clinic-contact-heading{
margin-bottom:35px;
}

.clinic-contact-heading span{
font-size:13px;
}

.clinic-contact-heading h2{
font-size:30px;
line-height:1.3;
}

.clinic-contact-heading p{
font-size:14px;
}

.clinic-contact-info{
border-radius:18px;
}

.clinic-contact-image img{
height:220px;
}

.clinic-info-box{
padding:20px;
gap:15px;
}

.clinic-info-icon{
width:50px;
height:50px;
font-size:18px;
border-radius:14px;
}

.clinic-info-box h4{
font-size:18px;
}

.clinic-info-box p,
.clinic-info-box a{
font-size:14px;
}

.clinic-social-links{
justify-content:center;
padding:20px;
}

.clinic-social-links a{
width:45px;
height:45px;
}

.clinic-contact-form{
padding:25px;
border-radius:18px;
}

.clinic-contact-form h3{
font-size:24px;
}

.clinic-contact-form p{
font-size:14px;
margin-bottom:25px;
}

.clinic-input-group{
margin-bottom:20px;
}

.clinic-input-group label{
font-size:14px;
}

.clinic-input-group input,
.clinic-input-group textarea{
padding:14px 16px;
font-size:14px;
}

.clinic-submit-btn{
width:100%;
justify-content:center;
padding:16px;
}

.clinic-map-section{
margin-top:50px;
}

.clinic-map-section iframe{
height:350px;
}

}

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

@media (max-width:575px){

.clinic-contact-section{
padding:50px 0;
}

.clinic-contact-heading h2{
font-size:26px;
}

.clinic-contact-heading p{
font-size:13px;
}

.clinic-contact-image img{
height:200px;
}

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

.clinic-info-box h4{
font-size:17px;
}

.clinic-info-box p,
.clinic-info-box a{
font-size:13px;
}

.clinic-contact-form{
padding:20px;
}

.clinic-contact-form h3{
font-size:22px;
}

.clinic-contact-form p{
font-size:13px;
}

.clinic-input-group input,
.clinic-input-group textarea{
padding:13px 15px;
font-size:13px;
}

.clinic-map-section iframe{
height:300px;
}

}

/*=====================================
EXTRA SMALL DEVICES
=====================================*/

@media (max-width:390px){

.clinic-contact-section{
padding:45px 0;
}

.clinic-contact-heading h2{
font-size:22px;
}

.clinic-contact-heading p{
font-size:12px;
}

.clinic-contact-image img{
height:180px;
}

.clinic-info-icon{
width:45px;
height:45px;
font-size:16px;
}

.clinic-info-box h4{
font-size:16px;
}

.clinic-info-box p,
.clinic-info-box a{
font-size:12px;
}

.clinic-contact-form{
padding:18px;
}

.clinic-contact-form h3{
font-size:20px;
}

.clinic-input-group label{
font-size:13px;
}

.clinic-input-group input,
.clinic-input-group textarea{
padding:12px 14px;
font-size:12px;
}

.clinic-submit-btn{
font-size:14px;
padding:14px;
}

.clinic-map-section iframe{
height:260px;
}

}


/*=============================
VIDEO SECTION
==============================*/

.video-section{
    padding:80px 0;
    background:#f8f9fb;
}

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

.video-section .section-title h2{
    font-size:42px;
    font-weight:700;
    margin:0;
    color:#111;
}


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

.video-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
    height:100%;
}

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

.video-thumbnail{
    position:relative;
    overflow:hidden;
    background:#000;
}


/*=============================
YOUTUBE PLAYER
==============================*/

.youtube-player{
    width:100%;
    aspect-ratio:16/9;
    background:#000;
    border-radius:0;
}

.youtube-player iframe{
    width:100%!important;
    height:100%!important;
    border:0;
    display:block;
}


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

.video-content{
    padding:25px;
}

.video-date{
    display:inline-block;
    color:#777;
    font-size:14px;
    margin-bottom:12px;
}

.video-content h3{
    font-size:22px;
    line-height:1.5;
    font-weight:600;
    color:#222;
    margin:0;
}


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

.videoSwiper .swiper-button-next,
.videoSwiper .swiper-button-prev{
    width:52px;
    height:52px;
    border-radius:50%;
    background:#fff;
    color:#000;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.videoSwiper .swiper-button-next:after,
.videoSwiper .swiper-button-prev:after{
    font-size:18px;
    font-weight:700;
}


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

@media(max-width:991px){

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

.video-section .section-title h2{
    font-size:34px;
}

.video-content{
    padding:20px;
}

.video-content h3{
    font-size:20px;
}

}


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

@media(max-width:767px){

.video-section{
    padding:60px 0;
}

.video-section .section-title{
    margin-bottom:35px;
}

.video-section .section-title h2{
    font-size:28px;
}

.video-content{
    padding:18px;
}

.video-content h3{
    font-size:18px;
    line-height:1.6;
}

.video-date{
    font-size:13px;
}

.videoSwiper .swiper-button-next,
.videoSwiper .swiper-button-prev{
    display:none;
}

.youtube-player{
    aspect-ratio:16/9;
}

}

/*==================================================
FORM STATUS NOTIFICATIONS & LOADING STATES
==================================================*/
.form-status-msg {
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    margin: 15px 0;
    box-sizing: border-box;
    animation: formFadeIn 0.35s ease-in-out;
}

@keyframes formFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-msg-success {
    background-color: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.form-msg-success i {
    color: #10b981;
    margin-right: 6px;
    font-size: 16px;
}

.form-msg-error {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.form-msg-error i {
    color: #ef4444;
    margin-right: 6px;
    font-size: 16px;
}

.form-msg-sending, .form-msg-info {
    background-color: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.form-msg-sending i, .form-msg-info i {
    color: #3b82f6;
    margin-right: 6px;
    font-size: 16px;
}

.subscribe-form .form-status-msg {
    grid-column: 1 / -1;
    font-size: 13px;
    padding: 10px 14px;
    margin-top: 10px;
}

button:disabled, .clinic-submit-btn:disabled, .appointment-btn:disabled {
    opacity: 0.75;
    cursor: not-allowed !important;
}

.spinner-border {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}