/*=========================================
Hero Responsive
=========================================*/

/* Hero Background Responsive */

@media (max-width:991.98px){

.hero-section{

    background-position:center center;

    background-size:cover;

}

}

@media (max-width:575.98px){

.hero-section{

    background-position:center;
background:
        linear-gradient(
            rgb(28 28 29 / 54%),
            rgb(36 36 36 / 73%)
        ),
        url("../img/bg/banner-mbl.png");
    background-size:cover;

}

}

@media (max-width:1399.98px){

.hero-title{

font-size:50px;

}

.doctor-image{

width:72%;

}

}

/* XL */

@media (max-width:1199.98px){

.hero-section{

padding:130px 0 90px;

}

.hero-title{

font-size: 37px;
}
.section-title h2 {
    font-size: 37px;
}
.section-title p {
    font-size: 18px;
}
.consultation-card{

max-width:100%;

}

.doctor-image{

width:68%;

right:-10px;

}

.floating-card{

transform:scale(.92);

}

}

/* LG */

@media (max-width:991.98px){

.hero-section{

padding:120px 0 70px;

}

.hero-content{

text-align:center;

}

.hero-description{

margin:20px auto 0;

}

.hero-highlights{

margin-top:30px;

}

.hero-buttons{

justify-content:center;

}

.hero-rating{

justify-content:center;

}

.hero-rating .d-flex{

justify-content:center;

}

.hero-right{

min-height:auto;

margin-top:60px;

}

.consultation-card{

max-width:100%;

margin:0 auto;

}

.doctor-image{

position:relative;

width:65%;

margin:40px auto 0;

right:auto;

bottom:auto;

}

.floating-card-1{

top:20px;

right:10px;

}

.floating-card-2{

left:10px;

top:180px;

}

.floating-card-3{

right:10px;

bottom:20px;

}

}

/* MD */

@media (max-width:767.98px){

.hero-section{

padding:110px 0 60px;

}

.hero-title{

font-size:38px;

line-height:1.2;

}

.hero-description{

font-size:16px;

}

.hero-highlights .col-md-6{

margin-bottom:15px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

.consultation-card{

padding:25px;

}

.consultation-header h3{

font-size:24px;

}

.doctor-image{

width:80%;

}

.floating-card{

position:relative;

left:auto;

right:auto;

top:auto;

bottom:auto;

margin-top:15px;

animation:none;

}

.hero-right{

display:flex;

flex-direction:column;

gap:15px;

}

}

/* SM */

@media (max-width:575.98px){

.hero-section{

padding:100px 0 50px;

}

.hero-badge{

font-size:13px;

padding:8px 14px;

}

.hero-title{

font-size: 25px;
}

.hero-description{

font-size:15px;

}

.highlight-item{

font-size:15px;

}
.section-title h2 {
    font-size: 25px;
}
.section-title p {
    font-size: 15px;
}
.consultation-card{

padding:20px;

border-radius:16px;

}

.consultation-card .form-control,
.consultation-card .form-select{

height:48px;

font-size:14px;

}

.consultation-card textarea{

font-size:14px;

}

.consultation-card .btn{

padding:14px;

}

.doctor-image{

width:100%;

}

.floating-icon{

width:42px;

height:42px;

font-size:18px;

}

.floating-card h5{

font-size:16px;

}

.floating-card p{

font-size:12px;

}

}

/*=========================================
Trust Bar Responsive
=========================================*/

@media (max-width:991.98px){

.trust-card{

padding:25px 18px;

}

}

@media (max-width:575.98px){

.trust-card{

padding:20px 15px;

}

.trust-icon{

width:60px;
height:60px;
font-size:24px;

}

.trust-card h6{

font-size:16px;

}

.trust-card p{

font-size:14px;

}

}

/*=========================================
Why Choose Us Responsive
=========================================*/

@media(max-width:991.98px){

.why-choose .section-title{

text-align:center!important;

}

.why-choose .btn{

display:block;

margin:30px auto 0;

}

}

@media(max-width:575.98px){

.why-card{

padding:25px 20px;

}

.why-card h5{

font-size:18px;

}

}

/*=========================================
Why Choose Us Background Responsive
=========================================*/

@media(max-width:991.98px){

.why-choose{

    background-position:center center;

    background-size:cover;

}

}

@media(max-width:575.98px){

.why-choose{

    background-position:center;

    background-size:cover;

}

}
/*=========================================
Treatments Responsive
=========================================*/

@media(max-width:991px){

.treatment-card{

padding:30px 25px;

}

}

@media(max-width:576px){

.treatment-card{

padding:25px 20px;

}

.treatment-card h4{

font-size:20px;

}

.treatment-icon{

width:65px;
height:65px;
font-size:26px;

}

}


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


@media(max-width:1199px){


    .doctor-details{

        padding:35px;

    }


    .doctor-details h3{

        font-size:32px;

    }


    .doctor-photo,
    .doctor-photo img{

        min-height:480px;

    }


}




@media(max-width:991px){


    .doctors-section{

        padding:80px 0;

    }



    .section-title{

font-size: 37px;

}



    .doctor-photo,
    .doctor-photo img{

        min-height:420px;

    }



    .doctor-details{

        padding:35px 30px;

    }



    .doctor-stats{

        flex-wrap:wrap;

    }



    .doctor-stats div{

        min-width:150px;

    }



    #doctorCarousel .carousel-control-prev{

        left:10px;

    }



    #doctorCarousel .carousel-control-next{

        right:10px;

    }



}




@media(max-width:767px){



    .doctors-section{

        padding:60px 0;

    }



    .section-title{

font-size: 25px;

}



    .section-description{

        font-size:15px;

    }



    .doctor-card{

        border-radius:20px;

    }



    .doctor-photo,
    .doctor-photo img{

        min-height:350px;

        height:350px;

    }



    .doctor-details{

        padding:25px;

    }



    .doctor-details h3{

        font-size:27px;

    }



    .doctor-details h5{

        font-size:17px;

    }



    .doctor-stats{

        flex-direction:column;

        gap:12px;

    }



    .doctor-stats div{

        width:100%;

    }



    .doctor-actions{

        flex-direction:column;

    }



    .doctor-actions .btn{

        width:100%;

    }



    .doctor-specialities span{

        font-size:12px;

        padding:8px 14px;

    }




    #doctorCarousel .carousel-control-prev,

    #doctorCarousel .carousel-control-next{


        width:42px;

        height:42px;


    }



}




@media(max-width:575px){



    .section-badge{

        font-size:12px;

    }



    .doctor-availability{

        top:15px;

        left:15px;

        font-size:11px;

        padding:8px 12px;

    }



    .hospital-tag{

        font-size:12px;

    }



}
@media(max-width:767px){

.doctors-section .doctor-heartbeat{

    width:190px;

}

}

@media(max-width:575px){

.doctors-section .doctor-heartbeat{

    width:150px;

}

}