/* Responsive Styles */
@media (min-width: 1200px) {

     .hero-containern {
          display: flex;
          flex-direction: column;
          row-gap: 4em;
     }

}

@media (max-width: 1200px) {

     .hero-container,
     .quote-section {
          width: 100%;
          max-width: 80%;
          padding: 0 var(--space-md);
          display: flex;
          flex-direction: column-reverse;
          row-gap: 4em;
     }

     .quote-section .quote-form {
          padding: 1em;
          grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
     }

     .quote-section .submit-btn {
          padding: 15px 0;
          grid-column: 1 / span 2;
          width: 50%;
          margin: auto;
     }
}

@media (max-width: 1024px) {
     .logo img {
          display: none;
     }

     .hero-container,
     .quote-section {
          width: 100%;
          max-width: 80%;
          padding: 0 var(--space-md);
          display: flex;
          flex-direction: column-reverse;
          row-gap: 4em;
     }
}

@media (max-width: 992px) {


     .hero-buttons {
          justify-content: center;
     }

     .hero-image {
          order: -1;
          max-width: 47rem;
          margin: 0 auto;
     }

     .hero-container,
     .quote-section {
          width: 100%;
          max-width: 90%;
          padding: 0 var(--space-md);
          display: flex;
          flex-direction: column;
          row-gap: 4em;
     }

     .quote-form {
          grid-template-columns: 1fr 1fr;
     }

     .quote-form .btn {
          grid-column: span 2;
     }

     .section-title h2 {
          font-size: 2rem;
     }
}

@media (max-width: 768px) {
     .nav {
          display: none;
     }

     .mobile-menu-btn {
          display: block;
          position: absolute;
     }

     .header-container {
          padding: 20px 0;
     }

     .header-top h2 {
          font-size: 1rem;
     }

     .header-top .social-icons a {
          margin-right: 10px;
          font-size: 1rem;
     }

     .hero {
          padding: 3rem 0 6rem;
     }

     .hero-title {
          font-size: 2rem;
     }


     .quote-section {
          width: 80%;
          padding: 0;
     }

     .quote-section .quote-form {
          padding: 1em;
          grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
     }

     .quote-section .submit-btn {
          padding: 15px 0;
          grid-column: 1 / span 2;
          width: 50%;
          margin: auto;
     }

     .cta-title {
          font-size: 2rem;
     }

     .cta-buttons {
          flex-direction: column;
          align-items: center;
     }

     .footer-grid {
          gap: var(--space-lg);
     }
}

@media (max-width: 576px) {
     .header-top {
          padding: 5px var(--space-md);
     }

     .hero-container {
          width: 100%;
          max-width: 100%;
          padding: 0 var(--space-md);
          display: flex;
          flex-direction: column;
          row-gap: 4em;
     }


     .slider-container {
          height: 16em;
     }

     .slider-container .caption {
          padding: 10px;
          font-size: 14px;
     }

     .quote-form {
          grid-template-columns: 1fr;
     }

     .quote-form .btn {
          grid-column: span 1;
     }

     .hero-buttons {
          flex-direction: column;
          gap: var(--space-sm);
     }

     .btn {
          width: 100%;
     }

     .section {
          padding: var(--space-lg) 0;
     }

     .services-grid {
          grid-template-columns: 1fr;
     }

     .services a {
          width: fit-content;
     }

     .testimonials-grid {
          grid-template-columns: 1fr;
     }

     .footer-grid {
          grid-template-columns: 1fr;
     }
}