/* ==========================================================================
   AL QASIMIAH - RESPONSIVE STYLESHEET
   Handles Desktop, Tablet, and Mobile breakpoints with zero overflow.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large Desktop (Below 1440px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1440px) {
  :root {
    --container-padding: 0 35px;
  }

  .hero-title-main {
    font-size: 85px;
  }

  .hero-title-highlight {
    font-size: 34px;
  }

  .services-cards-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

/* --------------------------------------------------------------------------
   Desktop / Laptop (Below 1200px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
  .hero-slider-section {
    min-height: 700px;
  }

  .hero-title-main {
    font-size: 75px;
  }

  .hero-title-highlight {
    font-size: 30px;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .section-title {
    font-size: 40px;
  }

  .services-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Tablet Landscape (Below 1024px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  :root {
    --header-height: 90px;
    --container-padding: 0 25px;
  }

  .about-grid,
  .service-detail-row,
  .service-detail-row.reverse,
  .contact-grid,
  .booking-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .service-detail-row.reverse {
    direction: ltr;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-title-main {
    font-size: 65px;
  }

  .hero-desc {
    font-size: 15px;
  }

  .page-banner-section {
    padding: 130px 0 60px;
  }

  .page-title {
    font-size: 42px;
  }

  /* About Page - DAQ Group, Tyre, CTA Banner & Brand Logos */
  .about-page-daq-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-page-daq-content {
    padding: 0 2%;
  }

  .about-page-daq-content .section-title {
    font-size: 2.5em;
    max-width: 100%;
  }

  .about-page-daq-content p {
    max-width: 100%;
    font-size: 14px;
  }

  .about-tyre-section {
    padding: 220px 0;
  }

  .about-cta-banner-section {
    padding: 0 25px;
  }

  .about-cta-banner-content {
    padding: 0;
    min-height: 380px;
  }

  .about-cta-banner-title {
    font-size: 2.5em;
    line-height: 1.3;
  }

  .brand-logo-item {
    width: 180px;
    height: 85px;
  }

  .brand-logo-item img {
    max-height: 70px;
  }

  .marquee-track {
    gap: 40px;
  }
}

/* --------------------------------------------------------------------------
   Tablet Portrait (Below 768px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  :root {
    --header-height: 80px;
    --header-sticky-height: 70px;
    --container-padding: 0 20px;
  }

  /* Show Hamburger, Hide Desktop Nav */
  .header-nav {
    display: none;
  }

  .burger-btn {
    display: flex;
  }

  .hero-slider-section {
    min-height: 600px;
    padding-top: var(--header-height);
  }

  .hero-content {
    padding: 50px 0;
  }

  .hero-title-main {
    font-size: 52px;
  }

  .hero-title-highlight {
    font-size: 24px;
  }

  .hero-desc {
    font-size: 14px;
  }

  .benefit-cards-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .services-cards-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .services-summary-section,
  .about-section,
  .benefits-section,
  .contact-section,
  .booking-section,
  .gallery-section,
  .blog-section {
    padding: 60px 0;
  }

  .section-title {
    font-size: 32px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .footer-social-links {
    justify-content: center;
  }

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

  .map-section {
    height: 350px;
  }

  /* About Page - DAQ Group, Tyre, CTA Banner & Brand Logos */
  .about-page-daq-section {
    padding: 60px 20px;
  }

  .about-page-daq-content {
    padding: 0 3%;
  }

  .about-page-daq-content .section-title {
    font-size: 2.2em;
    line-height: 40px;
  }

  .about-page-daq-content p {
    font-size: 13px;
  }

  .about-tyre-section {
    padding: 180px 0;
  }

  .about-cta-banner-section {
    min-height: 300px;
  }

  .about-cta-banner-title {
    font-size: 2em;
    line-height: 45px;
  }

  .brand-logo-item {
    width: 150px;
    height: 75px;
  }

  .brand-logo-item img {
    max-height: 60px;
  }

  .marquee-track {
    gap: 30px;
  }
}

/* --------------------------------------------------------------------------
   Mobile (Below 480px - 360px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
  .hero-title-main {
    font-size: 42px;
  }

  .hero-title-highlight {
    font-size: 20px;
  }

  .btn {
    padding: 13px 34px 12px 36px;
    font-size: 14px;
    display: inline-flex;
    width: auto;
  }

  .btn-group {
    flex-direction: column;
    gap: 12px;
  }

  .section-title {
    font-size: 28px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .page-title {
    font-size: 32px;
  }

  .service-detail-content h3 {
    font-size: 26px;
  }

  .contact-info-card {
    padding: 30px 20px;
  }

  /* About Page - DAQ Group, Tyre, CTA Banner & Brand Logos Mobile */
  .about-page-daq-section {
    padding: 50px 15px;
  }

  .about-page-daq-content .section-title {
    font-size: 1.8em;
    line-height: 34px;
  }

  .about-tyre-section {
    padding: 130px 0;
  }

  .about-cta-banner-section {
    min-height: 250px;
    padding: 0 15px;
  }

  .about-cta-banner-title {
    font-size: 1.6em;
    line-height: 36px;
  }

  .brand-logo-item {
    width: 130px;
    height: 65px;
  }

  .brand-logo-item img {
    max-height: 50px;
  }

  .marquee-track {
    gap: 20px;
  }
}