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

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

@media (max-width: 991px) {

    .banner-area .left .content .heading {
        font-size: 45px;
        margin-bottom: 20px;
    }

    .banner-area .left {
        flex-direction: column;
        gap: 5px;
        align-items: start;
    }

    .banner-area .left .socal {
        flex-direction: row;
        gap: 10px;
    }

    .banner-area .left .socal hr {
        width: 100px;
        height: 1px;
    }

    .appo-area .appointment-form {
        flex-direction: column;
    }

    .appo-area .appointment-form .comn-inp {
        width: 100%;
    }

    .section-top .para {
        font-size: 16px;
        padding-left: 50px;
    }

    .services-area .section-top {
        flex-direction: column;
        justify-content: flex-start;
        align-items: start;
    }

    .promotion-area {
        padding: 45px 0px 400px 0px;
        background-color: #1c1c1c;
        position: relative;
    }

    .promotion-area .section-top .para {
        padding-left: 0;
    }
    
    .promotion-area .back-pic {
        position: absolute;
        left: 30px;
        right: auto;
        bottom: 30px;
        top: auto;
        width: 100%;
        padding-top: 10px;
    }
    
    .promotion-area .back-pic .pic {
        width: 85%;
    }

    .footer-area .forms {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .page-template .banner-area .left {
        gap: 40px;
    }
    .page-template .banner-area {
        padding: 18% 0px 60px;
    }
    .about-area .back-img {
        position: relative;
    }
    .about-area .back-img .pic {
        width: 100%;
    }
    .promotion-area .back-pic .pic {
        width: 100%;
    }
    .promotion-area .back-pic {
        left: 0px;
    }
}

@media (max-width: 992px) {
    .appo-area {
        padding: 50px 0px;
        .appointment-form :is(.comn-inp, button)  {
            margin-bottom: 10px !important;
        }
        .appointment-form input[type="submit"] {
            margin-top: 10px;
            width: 100%;
            padding: 12px !important;
        }
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .appo-area {
        .appointment-form input[type="submit"] {
            width: 100%;
            padding: 12px !important;
            margin-top: 12px;
        }
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .appo-area {
        padding: 50px 0px;
        .appointment-form input  {
            width: 48% !important;
            margin-bottom: 10px !important;
            float: left !important;
        }
    }
}

@media (max-width: 576px) {
    

    .primary-btn {
        padding: 8px 32px !important;
        font-size: 16px !important;
    }
    .banner-area {
        position: relative;
        background-color: #1c1c1c;
        padding: 40% 0px 50px;
    }

    .banner-area .back-img {
        display: flex;
        flex-direction: column;
    }
    
    .banner-area .back-img .first-one {
        width: 25%;
        object-fit: cover;
    }
    
    .banner-area .back-img .sec-one {
        width: 100%;
    }
    
    .banner-area .left .content .heading {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .appo-area {
        padding: 50px 0px;
    }

    .about-area {
        position: relative;
        background-color: #1c1c1c;
        padding: 40px 10px 0px 10px;
    }

    .about-area .back-img {
        top: 0;
        left: 0px;
        right: auto;
        bottom: auto;
        width: 100%;
      }
      
      .about-area .back-img .pic {
        width: 100%;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        overflow: hidden;
        position: relative;
      }
      
      .about-area .back-img .pic img {
        height: 240px;
        width: 100%;
        
        object-fit: cover;
        object-position: center right;
      }
      
    
    .promotion-area {
        padding: 45px 0px 280px 0px;
        background-color: #1c1c1c;
        position: relative;
    }
    
    .promotion-area .back-pic {
        position: absolute;
        left: 0px;
    }
    
    .promotion-area .back-pic .pic {
        width: 100%;
    }
    
    .promotion-area .back-pic .pic img {
        height: 240px;
        width: 100%;
        object-fit: cover;
        object-position: center right;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    
  
    .promotion-area .left .list-item {
        padding-left: 20px;
        margin-bottom: 15px;
    }
    
    .promotion-area .left .list-item li {
        color: #fff;
        font-size: 18px;
        list-style: disc;
    }
    
    .promotion-area .left .list-item li::marker {
        color: #fff;
        font-size: 18px;
        background-color: #fff;
    }
    .page-template .banner-area {
        padding: 34% 0px 30px;
    }
    .page-template .banner-area .left {
        gap: 0px;
    }
    .banner-area .back-img .first-one {
        display: none;
    }
    .banner-area .back-img .sec-one {
        width: 100%;
        height: 100%;
    }
    .banner-area {
        position: relative;
    }
    .banner-area::before {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        content: "";
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 1;
    }
    .header-area .ab-logo {
        top: -41px;
        left: -22%;
    }
    .about-area .right .heading , .section-top .heading, .promotion-area .left .heading {
        font-size: 40px;
        margin-bottom: 18px;
        margin-left: 0;
        z-index: 3;
        position: relative;
    }
    .heading.with-red::before , .section-top .heading.with-red::before {
        height: 50px;
        left: -72px;
        top: 0px;
    }
    .section-top .para {
        padding-left: 0px;
    }
    .section-top .primary-btn {
        margin-left: 0px !important;
    }
    .page-template-template_contact .about-area .right {
        padding: 95px 0px 0px;
    }
    .footer-area .heading {
        font-size: 40px;
    }
}