/* •320px •360px •768px •1024px •1400px •1920px */
    
    
    @media (max-width: 786px) {
      .hero-content h1 { font-size: 48px; }
      .hero-content p { font-size: 18px; }
      .navbar { padding: 15px 20px; }
      .nav-links { display: none; }   
      .hamburger {display: block;}

      .hamburger.active .bar:nth-child(2) {
        opacity: 0;
      }
      .hamburger.active .bar:nth-child(1) {
        transform: translateY(0.8rem) rotate(45deg);
        background-color: black;
      }

       .hamburger.active .bar:nth-child(3) {
        transform: translateY(-0.8rem) rotate(-45deg);
         background-color: black;
      }

      .nav-links {
        display: flex;
        position: fixed;
        right: -100%;
        top: 0;
        gap: 5rem;
        flex-direction: column;
        background-color: rgb(255, 255, 255);
        width: 50%;
        text-align: center;
        transition: 0.3s;
        padding: 2rem 3rem;
        border-left: 1px solid black;
        border-bottom: 1px solid black;;
      }

      .navbar-link {
        border: none;
        padding: 1rem 2rem;
        color: black;
      }

       .navbar-link:hover {
        background-color: rgb(0, 0, 0);
        color: white;
       }

      .nav-links.active{
        right: 0;
      }
    }

      @media (max-width: 400px) {
        .hero-content h1 { font-size: 3rem; }
      .hero-content p { font-size: 1rem; }
      .hero-video video{
        width: 57%;
       }

       .navbar-link {
        font-size: 1rem;
        padding:0;
       }

      

       .bar {
        width: 2rem;
        height: 0.3;
       }

      .nav-links {
        padding-top: 5rem;
      }
      
      }

     
@media (max-width: 992px) {
  .about-container {
    flex-direction: column;
  }
  .section-title {
    font-size: 3.8rem;
  }
  .text-content {
    padding: 50px 30px;
  }
  .text-content h3 {
    font-size: 3rem;
  }

  .about-map iframe {
    height: 400px;
  }
  .about-map-column {
    padding: 30px 20px;
  }
}

      @media (max-width: 576px) {
  .company-text {
    font-size: 1.4rem;
  }
  .about-map iframe {
    height: 300px;
  }
}

  
@media (max-width: 992px) {
  .service-block {
    flex-direction: column !important;
    padding: 40px 20px;
    gap: 40px;
  }
  .offer-title-main { font-size: 3.8rem; }
  .service-title { font-size: 2.8rem; }
  .service-desc, .service-list li { font-size: 1.6rem; }
}


      
@media (max-width: 768px) {
  .gallery-item {
    width: 260px;
    height: 260px;
  }
  .gallery-brick > .gallery-item:nth-child(4n+2),
  .gallery-brick > .gallery-item:nth-child(4n+3) {
    margin-top: 0;
  }
  .gallery-section h2 { font-size: 3.2rem; }
}

   
@media (max-width: 768px) {
  .footer {
    padding: 60px 20px 0;
  }
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-map iframe {
    height: 180px;
  }
}

@media (max-width: 900px) {
  .contact-section {
    padding: 4rem 1.2rem 5rem;
  }

  .contact-container {
    grid-template-columns: 1fr;     
    gap: 3.5rem;
  }

  .contact-text h2,
  .contact-form-wrapper h2 {
    font-size: 2.1rem;
  }

  .contact-text ul li {
    font-size: 1.35rem;
    padding-left: 2.2rem;
  }

  .contact-text ul li::before {
    font-size: 1.4rem;
  }

  .form-subtitle {
    font-size: 1.35rem;
  }

  .form-group label {
    font-size: 1.35rem;
  }

  .form-group input,
  .form-group textarea {
    padding: 12px 14px;
    font-size: 1.35rem;
  }

  .submit-btn {
    padding: 14px 36px;
    font-size: 1.4rem;
    align-self: center;          
  }
}


@media (max-width: 480px) {
  .contact-section {
    padding: 3.5rem 0.9rem 4.5rem;
    min-height: 100vh;
  }

  .contact-text h2,
  .contact-form-wrapper h2 {
    font-size: 1.85rem;
  }

  .contact-text ul li,
  .form-subtitle,
  .form-group label {
    font-size: 1.2rem;
  }

  .form-group input,
  .form-group textarea {
    font-size: 1.2rem;
    padding: 11px 13px;
  }

  .submit-btn {
    width: 100%;                   
    font-size: 1.3rem;
  }
}


@media (min-width: 1200px) {
  .contact-section {
    padding: 8rem 2rem;
  }
  
  .contact-container {
    gap: 6rem;
  }
  
  .contact-text h2,
  .contact-form-wrapper h2 {
    font-size: 3rem;
  }
}


@media (min-width: 1800px) {
  .contact-section {
    background-attachment: fixed;  
  }
}