@media (max-width: 1024px) {
  .city-row { display: flex; justify-content: space-between; align-items: end;  overflow-x: scroll; column-gap: 15px;}
        
  .city-item{padding-bottom:15px;}
}
@media (max-width: 768px) {
 .offring-none{display:none;}
  
  .box-result{
    height:clamp(125px, 10vh, 190px); row-gap:2px;}
    .contact-form-service{max-width:450px; width:90%; }
    .hero-img {
      margin-top:25px;
  }
    .datecalcon{display:block;}
    
  }

@media(max-width: 576px) {
    .joinbreeder{flex-direction:column; row-gap:5px; align-items:center;}
    .joinbreeder p{font-size:13px; display:none;}
    .box-result2 p {
        font-size: 11px;
    }
    .offirignitem {
        width: 47%;
    }
        .paynow-sticky { position: fixed; bottom: 7px; width: 90% !important; z-index: 111;}
    .hostal33 img {
        object-fit: cover;
        max-width: 100%;
        min-width: 100%;
        height: 100%;
    }
      .file-box{height:100px;}
    .hostal33{height:400px; width:100%; overflow:hidden; border-radius:5px;}
    .custom-accroting {
        font-size: 14px;
    }
        .img-containers {padding-top:0px;}
        .before-img {
        max-width: 115px;
        width: 90%;
    }
    .row-training {
        display: flex;
        flex-direction: column;
        row-gap: 15px;
        padding-top: 15px;
        padding-bottom:0;
    }
    .whatall {
        flex-direction: column !important;
        align-items: flex-start !important;
        row-gap:15px !important;
    }
    .traing-rist {align-items: center; padding-bottom:45px; text-align:center;}
    .traing-rist p{text-align:center;}
    .c-w-100 { width: 100% !important; }
     .wb-100{width:100%;}
    .next-confim-flex { display: flex; align-items: center; justify-content: center;}
    .before-after {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

  
    .hero-content { display: flex; flex-direction: column; row-gap:10px; }
    
    
    
    
    
    .footer-hero {
        font-size: 16px;
    }
    .w-mobile-100{width:100%;}
    .hero-section-city {
      background-color: #000;
      position: relative;
      max-height: 500px;
      height: 70vh;
  }
    .mmp-professional{max-width:95%; margin:0 auto;}
    .location-filter {flex-wrap: wrap; row-gap: 8px;}
    .inputdesign {
        height:42px !important; 
      }
      .service-btn{height:42px;}
      .hero-img{margin-top: 18px;}
      .mt-cs{margin-top:20px;}
     /* .video-container {  height:270px;  }*/
      .contact-form-service{max-width:550px; width:90%; position: relative; left: 50%; transform: translateX(-50%); top:-15px; background-color: var(--color-white);}
      .hostel-gallery{
        display: block; column-gap:24px; row-gap:24px; 
        & img {max-width:100%; min-width:100%; height:100%;}
  .flex-basis33{flex-basis:auto; padding:12px 0;}
  .flex-basis50{flex-basis:auto; padding:12px 0; display: block; flex-direction: column;}
}
.icon {
    top: -40px;
}
.row-mt{margin-top:24px;}
.pricing { width: 95%; margin: 0 auto;}
.choose-hero { margin-top: 0px;}
/*booking page*/
.booking-head { font-size: 16px; margin: 14px 0;}
.booking-heads { font-size: 16px; margin-bottom: 15px; margin-top:15px;}
.col-padding {padding: 6px 12px;}
.book-padding {margin-top: 15px;}
.ma-bto{margin-bottom:15px;}
.book-padding {  padding: 24px 13px;}
/*booking page*/
  }
  @media (max-width: 320px) {
    .box-result {
      h3 {
          font-size: 26px;
          font-weight: 700;
          margin-bottom: 0;
      }
  }
  .box-result {
    p {
        font-size: 13px;
        margin-bottom: 0;
        text-align: center;
    }
  }
}