@media(max-width: 1200px){
  .about-img{ aspect-ratio: 16/9;}
  .hero{ height: 25rem;}
  .hero h1{ font-size: 60px;}
  .banner-wrp h2, .about-title h2,
  .section-header h2{ font-size: 46px;}
  .why{ padding: 40px 0 330px;}
  #gallerySlider .splide__arrow--next,
  #gallerySlider .splide__arrow--prev{ bottom: -4rem;}
  .gallery-progress{ bottom: -2.5rem;}
  .banner{ height: 30rem;}
  .footer-left{ text-align: center; align-items: center;}
  .nav-menu{ gap: 20px;}
  .foto-gallery-title h3{ font-size: 24px;}
  .why .container{ gap: 50px;}
  .footer{ padding: 50px;}
  .breadcrumb::before{
    height: 21%;
  }
}
@media (max-width: 992px) {
  /* nav menu */
  .nav-logo img{  width: 150px;}
  .header-lower{ padding: 10px 0;}
  .header-lower .btn, .nav-menu{ display: none;}
  .hamburger-toggler{ 
      display: flex; 
      flex-direction: column;
      gap: 5px; 
      border-radius: 5px;
      cursor: pointer;
      z-index: 99;
  }
  .hamburger-toggler span{
      width: 30px;
      height: 3px;
      background-color: var(--black);
      border-radius: 5px;
  }
  .mobile-menu{
      position: fixed; 
      top: 0;
      right: -100%;
      width: 100%; 
      height: 100%;
      background: var(--third);
      display: flex;
      flex-direction: column;
      gap: 20px;
      z-index: 99;
      transition: right 0.4s ease-in-out;
      padding: 2rem;
  }
  .mobile-menu.open{  right: 0;}
  .hamburger-closing {
      width: 30px;
      height: 30px;
      position: absolute;
      cursor: pointer;
      z-index: 100;
      top: 2rem;
      right: 2rem;
  }
  .hamburger-closing span {
      position: absolute;
      left: 0;    
      top: 50%;
      width: 100%;
      height: 3px;
      background: var(--black);
      display: block;
      transition: all 0.3s ease;
  }
  .hamburger-closing span:first-child { transform: rotate(45deg); }
  .hamburger-closing span:last-child { transform: rotate(-45deg); }
  .hamburger-toggler.rotated { transform: rotate(90deg); }
  .mobile-menu-wrapper{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 2rem 0;
      height: 100%;
  }
  .mobile-menu-item{
      color: var(--black);
      font-size: 1.5rem;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s ease;
  }
  .mobile-menu-top img{ width: 150px;}
  .mobile-top{
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
  }
  .mobile-menu .btn{ width: 100%; justify-content: center;}
  /* nav menu */
  #gallerySlider .splide__arrow{ height: 42px; width: 60px;}
  #gallerySlider .splide__arrow--prev{ right: 4rem;}
  .gallery-progress{ bottom: -2.8rem;}
  .why .container{ gap: 40px;}
  .partners{
    overflow: hidden;
    padding-top: 0;
    margin-top: 0;
  }
}
@media(max-width: 768px){
    .hero h1{ font-size: 50px;}
    .banner-wrp h2, .about-title h2,
    .section-header h2{ font-size: 36px;}
    .section-banner{ font-size: 14px;}
    .foto-gallery .container,
    .why .container{ gap: 30px;}
    .why{ padding: 30px 0 300px;}
    .foto-gallery{ margin-top: -15rem;}
    .gallery-progress{ width: 70%;}
    .about-content{ text-align: center;}
    .about-title{ align-items: center;}
    .footer{ padding: 50px;}
    .about{ padding: 40px 0;}
    .banner { height: 25rem;}
    .footer-right{ align-items: center; text-align: center;}
    .footer-right-wrp{ align-items: center; text-align: center;}
    .why-card{ padding: 30px; gap: 20px;}
    .breadcrumb::before{
    height: 20%;
  }
}
@media(max-width: 576px){
    .btn{ padding: 10px 20px; font-size: 14px;}
    .hero h1{ font-size: 38px;}
    .banner-wrp h2, .about-title h2,
    .section-header h2{ font-size: 30px;}
    .hero .container{ align-items: end;}
    .hero{ height: 20rem;}
    .why-card{ padding: 20px; gap: 10px;}
    #gallerySlider .splide__arrow{ height: 40px; width: 50px;}
    #gallerySlider .splide__arrow--prev{ right: 3.5rem; bottom: -2rem;}
    #gallerySlider .splide__arrow--next{bottom: -2rem;}
    .gallery-progress{ bottom: -1rem;}
    .hero-left{  max-width: 75%;
        opacity: 44%;
        left: 30px;  }
    .hero-right{ display: none;  }
    #gallerySlider .splide__track{ clip-path: inset(-100vw -100vw -100vw -100vw);}
    .breadcrumb::before{
    height: 19.5%;
  }
}
@media(max-width: 400px){
    .gallery-progress{ width: 60%;}
}