/* =========================================================
   RESPONSIVE / MEDIA QUERIES
   Organized by section. Each section only affects the page(s)
   that use those classes.
========================================================= */


/* ---------- Header / Navigation ---------- */

@media (max-width: 768px) {
      header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin: 0 auto;
        background: transparent;
        position: sticky;
        top: 20px;
        padding: 0 15px;
        gap: 0;
        z-index: 1000;
      }

      .nav-box {
        background: #fff1d8cc;
        border: 1px solid rgba(52, 73, 94, 0.3);
        backdrop-filter: blur(10px);
        padding: 8px 14px;
        margin: 0;
        width: fit-content;
        display: flex;
        justify-content: center;
        border-radius: 12px;
        flex: 0 0 auto;
      }

      .nav-box .logo {
        display: flex;
        justify-content: center;
        margin: 0;
      }

      .nav-box .logo img {
        height: 26px !important;
        width: auto !important;
      }

      nav {
        display: none;
      }

      .hamburger {
        display: flex;
        background: #fff1d8cc;
        border: 1px solid rgba(52, 73, 94, 0.3);
        backdrop-filter: blur(10px);
        padding: 8px 10px;
        border-radius: 8px;
        width: fit-content;
        cursor: pointer;
        gap: 3px;
        flex-direction: column;
        flex: 0 0 auto;
      }

      .hamburger span {
        width: 20px;
        height: 2.5px;
        background: #34495e;
        border-radius: 2px;
      }

      .profile-btn {
        display: none;
      }
    }

@media (max-width: 480px) {
      .nav-box .logo img {
        height: 24px !important;
        width: auto !important;
      }

      .mobile-nav {
        top: 70px;
      }
    }


/* ---------- Profile Button + PDF Modal ---------- */

@media(max-width:768px) {
      .pdf-modal-overlay {
        padding: 10px;
      }

      .pdf-modal-content {
        height: 90vh;
      }

      .pdf-modal-header {
        padding: 12px;
      }

      .pdf-modal-header h2 {
        font-size: 16px;
      }

      .pdf-download-btn {
        padding: 8px 12px;
        font-size: 12px;
      }

      .pdf-download-btn svg {
        display: none;
      }

      .pdf-close-btn {
        font-size: 24px;
      }

    }


/* ---------- Footer ---------- */

@media (max-width: 768px) {
      .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
      }
    }


/* ---------- Page Banner & CTA Section (inner pages) ---------- */

@media (max-width: 768px) {
      .page-header {
        padding: 40px 20px 30px;
      }

      .page-header h1 {
        font-size: 28px;
      }
    }

@media (max-width: 768px) {
      .cta-section {
        margin: 0 20px 40px;
        padding: 40px 20px;
      }

      .cta-section h2 {
        font-size: 24px;
      }
    }


/* ---------- Homepage Hero Slider ---------- */

@media (max-width: 768px) {
      .hero-section {
        height: auto;
        min-height: 600px;
        padding: 80px 15px 40px;
        margin-top: 0;
      }

      .hero-content {
        margin: 0 20px;
        text-align: center;
      }

      .hero-content h1 {
        font-size: 28px;
        text-align: center;
      }

      .hero-content .subheading,
      .hero-content p {
        text-align: center;
      }

      .carousel-indicators {
        justify-content: center;
      }

      .arrow-btn {
        width: 35px;
        height: 35px;
        font-size: 18px;
      }

      /* Hide floating tags on mobile */
      .floating-tag {
        display: none;
      }

      .hero-stats {
        gap: 15px;
      }

      .hero-stat-item {
        padding: 12px 18px;
        min-width: 100px;
      }

      .hero-stat-number {
        font-size: 24px;
      }

      .hero-trust-badges {
        gap: 15px;
      }

      .trust-badge {
        font-size: 11px;
      }
    }

@media (max-width: 768px) {
      header {
        margin-top: 10px;
        background: transparent;
      }

      .hero-section {
        margin-top: 0;
        padding-top: 60px;
      }

      .mobile-nav {
        background: #fff1d8cc;
        backdrop-filter: blur(10px);
      }

      .hero-stats {
        gap: 10px;
      }

      .hero-stat-item {
        padding: 10px 15px;
        min-width: 90px;
      }

      .hero-stat-number {
        font-size: 22px;
      }

      .hero-stat-label {
        font-size: 10px;
      }
    }


/* ---------- Homepage About Preview ---------- */

@media (max-width: 768px) {
      .about-stats {
        grid-template-columns: 1fr;
      }

      .about-header h2 {
        font-size: 32px;
      }

      .stats-left {
        text-align: center;
      }

      .stats-left h3 {
        font-size: 24px;
      }

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


/* ---------- Homepage Services Preview ---------- */

@media (max-width: 1200px) {
      .ht-sample-wrapper {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }

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

      .ht-sample-wrapper img {
        height: 260px;
      }

    }

@media (max-width: 768px) {
      .ht-sample-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .ht-sample-wrapper img {
        height: 280px;
      }

      .ht-title {
        font-size: 26px;
      }
    }

@media (max-width: 768px) {
      .benefits-grid {
        grid-template-columns: 1fr;
      }

      .section-header h2 {
        font-size: 28px;
      }

      .what-we-do {
        padding: 60px 20px;
      }

      .what-we-do h2 {
        font-size: 28px;
      }

      .service-card,
      .benefit-card {
        padding: 34px 24px 28px;
      }

      .why-choose-us {
        padding: 60px 20px;
      }
    }


/* ---------- Homepage Gallery Preview ---------- */

@media (max-width: 768px) {
      .gallery-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }


/* ---------- Homepage Contact Section ---------- */

@media (max-width: 768px) {
      .contact-title {
        font-size: 26px;
      }

      .contact-sub {
        font-size: 14px;
        padding: 0 6px;
      }
    }

@media (max-width: 768px) {
      .contact-section .container {
        grid-template-columns: 1fr;
      }

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

      .submit-row {
        flex-direction: column;
        align-items: center;
        gap: 20px;
      }

      .submit-row .g-recaptcha {
        width: 100%;
        justify-content: center;
      }

      .submit-btn {
        width: 100%;
        margin-left: 0;
      }

      .btn-submit {
        width: 100%;
      }
    }


/* ---------- Founder / CEO Message Page ---------- */

@media (max-width: 768px) {
  .message-carousel-wrapper {
    padding: 0 20px;
  }

  .carousel-nav-arrow {
    width: 30px;
    height: 30px;
    font-size: 17px;
    z-index: 999;
  }

  .carousel-nav-arrow.prev {
    left: 8px;
  }

  .carousel-nav-arrow.next {
    right: 8px;
  }

  .message-header {
    padding: 30px 20px;
  }

  .message-header .signature-name {
    font-size: 22px;
  }

  .message-content {
    padding: 40px 20px;
    max-height: 400px;
  }

  .message-section h2 {
    font-size: 20px;
  }

  .carousel-indicator {
    margin-bottom: 30px;
  }
}


/* ---------- Top Management Team Page ---------- */

@media (max-width: 768px) {
      .team-section {
        margin-bottom: 40px;
      }

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


/* ---------- Mission & Vision Page ---------- */

@media (max-width: 768px) {
      .content-section {
        padding: 40px 20px;
        margin-bottom: 40px;
      }

      .content-section h2 {
        font-size: 22px;
      }
    }

@media (max-width: 768px) {
      .mission-vision-container {
        gap: 30px;
        padding: 0 15px;
        margin: 10px;
      }

      .mission-content {
        padding: 25px;
        margin: 10px;
      }

      .mission-content h3 {
        font-size: 22px;
      }

      .mission-content p,
      .mission-content ul li {
        font-size: 14px;
      }
    }


/* ---------- Services Page ---------- */

@media (max-width: 1024px) {
      .services-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      /* Updated responsive for features-grid */
      .features-grid {
        grid-template-columns: repeat(2, 1fr);
      }

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

@media (max-width: 768px) {
      .hero {
        padding: 80px 20px;
        min-height: auto;
      }

      .what-we-do {
        padding: 60px 20px;
      }

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

      .features-section {
        padding: 60px 20px;
      }

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

      .stats-section {
        padding: 60px 20px;
      }

      .stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }

      .stat-number {
        font-size: 36px;
      }

      .cta-section {
        margin: 30px 20px;
        padding: 40px 20px;
      }

      .cta-section h2 {
        font-size: 24px;
      }

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


/* ---------- Labels & Tags Page ---------- */

@media (max-width: 1200px) {
      .tags-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
      }
    }

@media (max-width: 992px) {
      .tags-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
      }
    }

@media (max-width: 768px) {
      .tags-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
      }

      .tags-gallery {
        padding: 40px 15px 60px;
      }
    }

@media (max-width: 480px) {
      .tags-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }

      .tag-card {
        padding: 10px;
      }
    }


/* ---------- Factory Gallery Page ---------- */

@media (max-width: 768px) {
      .filter-buttons {
        gap: 8px;
      }

      .filter-btn {
        padding: 10px 14px;
        font-size: 12px;
      }

      .filter-btn svg {
        width: 16px;
        height: 16px;
      }

      .page-header {
        padding: 60px 20px 40px;
      }

      .page-header h1 {
        font-size: 28px;
      }
    }

@media (max-width: 768px) {

  .factory-gallery {
    padding: 40px 20px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 30px;
  }

  .gallery-item {
    width: 100%;
  }

  .gallery-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .gallery-item .item-info {
    padding: 14px;
  }

  .gallery-item .item-info h4 {
    font-size: 16px;
  }

  .gallery-item .item-info span {
    font-size: 13px;
  }
}


/* ---------- Company Events Page ---------- */

@media (max-width: 768px) {
      .hero {
        padding: 40px 20px;
      }

      .hero h1 {
        font-size: 1.8rem;
      }

      .hero p {
        font-size: 1rem;
      }

      .filter-buttons {
        gap: 8px;
      }

      .filter-btn {
        padding: 10px 14px;
        font-size: 12px;
      }

      .filter-btn svg {
        width: 16px;
        height: 16px;
      }
    }

@media (max-width: 768px) {

  .gallery-section {
    padding: 30px 20px 50px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 30px;
  }

  .gallery-item {
    width: 100%;
  }

  .gallery-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .gallery-item-info {
    padding: 12px;
  }

  .gallery-item-info h4 {
    font-size: 0.95rem;
  }

  .gallery-item-info p {
    font-size: 0.8rem;
  }
}


/* ---------- Legal Documents / Certificates Page ---------- */

@media(max-width:768px) {
      .certificates-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 30px;
  }

  .certificate-box {
    width: 100%;
  }

  .certificates-grid.single-view {
    max-width: 350px;
  }


      .cta-section {
        margin: 30px 20px;
        padding: 40px 20px;
      }

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

/* ---------- PDF Modal (short class naming variant) ---------- */

@media (max-width: 768px) {
      .pdf-modal {
        padding: 10px;
      }

      .pdf-container {
        max-width: 100%;
        height: 95vh;
      }

      .pdf-header {
        padding: 12px 15px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: nowrap;
      }

      .pdf-header h2 {
        font-size: 16px;
        font-weight: 600;
        margin: 0;
        flex-shrink: 0;
        white-space: nowrap;
      }

      .pdf-header-actions {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-shrink: 0;
      }

      .pdf-download-btn {
        padding: 8px 14px;
        font-size: 12px;
        white-space: nowrap;
      }

      .pdf-download-btn span:first-child {
        display: none;
      }

      .pdf-close-btn {
        padding: 6px 8px;
        font-size: 24px;
      }

    }

/* ---------- About Page (about.html) ---------- */

@media (max-width: 768px) {
.hero-section {
      margin: 30px;
    }

.hero-section h1 {
        font-size: 30px;
        line-height: 1.3;
    }

.hero-section p {
        font-size: 15px;
        max-width: 100%;
    }

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

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

.history-section {
        padding: 25px 15px;
        border-radius: 10px;
        margin: 30px;
    }
}