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

@media (max-width:1200px){

.appt-wrapper{
    grid-template-columns:1fr 380px;
    gap:30px;
}

.appt-form-card{
    padding:35px;
}

.appt-header h2{
    font-size:42px;
}

.appt-circle{
    width:360px;
    height:340px;
}

.appt-doctor-image{
    width:285px;
    bottom:-35px;
}

.appt-name-card{
    width:220px;
    bottom:5px;
    transform:translateX(52%);
}

.appt-feature{
    padding:16px 18px;
}

.appt-feature span{
    font-size:15px;
}

}

/*==========================================================
        992px
==========================================================*/

@media (max-width:992px){

.appt-wrapper{
    grid-template-columns:1fr;
    gap:45px;
}

.appt-form-card{
    padding:35px;
}

.appt-right{
    max-width:500px;
    margin:auto;
    width:100%;
}

.appt-circle{
    width:330px;
    height:320px;
}

.appt-doctor-image{
    width:260px;
    bottom:-30px;
}

.appt-name-card{
    width:210px;
    bottom:9px;
    transform:translateX(48%);
}

.appt-header h2{
    font-size:38px;
}

.appt-header p{
    font-size:17px;
}

}
/*==========================================================
        768px
==========================================================*/

@media (max-width:768px){

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

.appt-form-card{
    padding:28px;
}

.appt-form-card h3{
    font-size:28px;
}

.appt-double{
    grid-template-columns:1fr;
    gap:0;
}

.appt-circle{
    width:290px;
    height:285px;
}

.appt-doctor-image{
    width:225px;
    bottom:-25px;
}

.appt-name-card{
    width:190px;
    padding:14px;
    bottom:12px;
    transform:translateX(45%);
}

.appt-rating{
    margin-top:18px;
}

.appt-feature{
    padding:15px;
}

.appt-buttons{
    flex-direction:column;
}

}
/*==========================================================
        480px
==========================================================*/

@media (max-width:480px){

.appt-container{
    padding:0 15px;
}

.appt-header h2{
    font-size:30px;
    line-height:1.3;
}

.appt-header p{
    font-size:15px;
}

.appt-form-card{
    padding:22px;
    border-radius:24px;
}

.appt-group input,
.appt-group select,
.appt-group textarea{
    padding:14px 16px;
    font-size:15px;
}

.appt-submit{
    font-size:16px;
}

.appt-circle{
    width:240px;
    height:240px;
}

.appt-doctor-image{
    width:185px;
    bottom:-20px;
}

.appt-name-card{
    width:155px;
    padding:12px;
    bottom:10px;
   
    transform:translateX(50%);
}

.appt-name-card h3{
    font-size:16px;
}

.appt-name-card p{
    font-size:12px;
}

.appt-name-card span{
    font-size:11px;
}

.appt-rating{
    font-size:18px;
}

.appt-rating span{
    font-size:14px;
}

.appt-feature{
    padding:14px;
}

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

.appt-call,
.appt-whatsapp{
    font-size:15px;
    padding:15px;
}

}
/*==========================================================
        430px
==========================================================*/

@media (max-width:430px){

.appt-circle{
    width:225px;
    height:225px;
}

.appt-doctor-image{
    width:175px;
    bottom:-18px;
}

.appt-name-card{
    width:145px;
    padding:10px;
    bottom:14px;
    transform:translateX(50%);
}

.appt-name-card h3{
    font-size:15px;
}

.appt-name-card p{
    font-size:11px;
}

.appt-name-card span{
    font-size:10px;
}

}
/*==========================================================
        390px
==========================================================*/

@media (max-width:390px){

.appt-circle{
    width:210px;
    height:210px;
}

.appt-doctor-image{
    width:165px;
    bottom:-15px;
}

.appt-name-card{
    width:135px;
    padding:9px;
    bottom:9px;
    transform:translateX(56%);
}

.appt-name-card h3{
    font-size:14px;
}

.appt-rating{
    font-size:17px;
}

.appt-rating span{
    font-size:13px;
}

}
/*==========================================================
        360px
==========================================================*/

@media (max-width:360px){

.appt-container{
    padding:0 12px;
}

.appt-form-card{
    padding:18px;
}

.appt-circle{
    width:195px;
    height:195px;
}

.appt-doctor-image{
    width:155px;
    bottom:-12px;
}

.appt-name-card{
    width:125px;
    padding:8px;
    bottom:9px;
    transform:translateX(54%);
}

.appt-name-card h3{
    font-size:13px;
}

.appt-name-card p{
    font-size:10px;
}

.appt-name-card span{
    font-size:9px;
}

.appt-feature{
    padding:12px;
}

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

}
/*==========================================================
        320px
==========================================================*/

@media (max-width:320px){

.appt-container{
    padding:0 10px;
}

.appt-header h2{
    font-size:26px;
}

.appt-header p{
    font-size:14px;
}

.appt-form-card{
    padding:16px;
}

.appt-circle{
    width:180px;
    height:180px;
}

.appt-doctor-image{
    width:140px;
    bottom:-10px;
}

.appt-name-card{
    width:115px;
    padding:7px;
    bottom:7px;
    transform:translateX(50%);
}

.appt-name-card h3{
    font-size:12px;
}

.appt-name-card p{
    font-size:9px;
}

.appt-name-card span{
    font-size:8px;
}

.appt-rating{
    font-size:16px;
}

.appt-rating span{
    font-size:12px;
}

.appt-call,
.appt-whatsapp{
    font-size:14px;
    padding:13px;
}

}