@media all and (min-width: 1440px) {
    .hero-container{
        padding-top: 0px;
        min-height: 100vh;
    }
}

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

@media (min-width: 1380px){
    
}

@media (max-width: 1200px){
    .header-logo a img {
        max-width: 220px;
    }
}

@media (min-width: 1200px){
  
}

@media all and (max-width: 992px) {
    .header{
        display: none;
    }
    .mobile-header{
        display: inline-block;
    }
    .hero-container{
        padding-top: 0px;
        min-height: calc(100vh - 73.2px);
    }
    .section{
        padding: 60px 0px;
    }
    .section-heading{
        font-size: 28px;
    }
    .page-banner-container{
        padding: 2rem 0rem 2rem 0rem;
        min-height: 250px;
    }
}

@media all and (max-width: 768px){
    .header{
        display: none;
    }
    .mobile-header{
        display: inline-block;
    }
    .hero-container{
        padding-top: 0px;
        min-height: calc(100vh - 73.2px);
    }
    .section{
        padding: 60px 0px;
    }
    .section-heading{
        font-size: 28px;
    }
    .page-banner-container{
        padding: 2rem 0rem 2rem 0rem;
        min-height: 250px;
    }
    .modal-cards-wrapper{
        flex-wrap: wrap;
        flex-direction: column;
        padding: 10px;
    }
    .modal-card{
        flex: 100%;
        width: 100%;
    }
    .reviewbtn{
        flex-direction: column;
    }
    .reviewbtn .theme-btn{
        width: 100%;
        max-width: 100%;
    }
    .appointment-img img{
        position: relative;
    }
    .appointment-content h3{
        font-size: 36px;
    }
    .modal-cards-wrapper{
        grid-template-columns: repeat(1, 1fr);
    }
}

@media all and (max-width: 480px){
    .header{
        display: none;
    }
    .mobile-header{
        display: inline-block;
    }
    .hero-container{
        padding-top: 0px;
        min-height: calc(100vh - 73.2px);
    }
    .section{
        padding: 60px 0px;
    }
    .section-heading{
        font-size: 28px;
    }
    .page-banner-container{
        padding: 2rem 0rem 2rem 0rem;
        min-height: 250px;
    }

    .hero-content-wrapper{
        padding-top: 0px;
    }
    .hero-heading{
        font-size: 36px;
        text-align: center;
    }
    .bannerbtns{
        flex-direction: column;
    }
    .bannerbtns .theme-btn{
        width: 100%;
        min-width: 100%;
    }
    .hero-description{
        text-align: center;
    }
}