/* =====================================================================
   Container Range product pages — mobile responsive
   ---------------------------------------------------------------------
   Sirf Container Range ke pages par load hoti hai (dekhein component/meta.php).
   Ye file style.css / responsive.css ke BAAD load honi chahiye, warna
   override kaam nahi karenge.
   ===================================================================== */


/* =====================================================================
   1. SPEC TABLES — do asli bugs
   ---------------------------------------------------------------------
   BUG A: `table-responsive` class table element par lagi hai
          (<table class="table table-responsive">). Bootstrap 5 me ye ek
          WRAPPER DIV par honi chahiye — `overflow-x: auto` ek
          `display: table` element par scroll container nahi banata.

   BUG B: style.css:3509 me
              .product-details table th,
              .product-details table tr { text-wrap: nowrap; }
          hai. `tr` par lagne se `td` bhi inherit karta hai, isliye koi
          bhi cell wrap nahi hota aur spec table page se bahar nikal kar
          pure page ko horizontally scroll kara deti hai.

   Fix: mobile/tablet par cells ko wrap karne do — phir table apne aap
   viewport me fit ho jati hai aur kisi scroll container ki zarurat hi
   nahi padti.
   ===================================================================== */
@media (max-width: 991.98px) {

    .product-details table th,
    .product-details table tr,
    .product-details table td {
        text-wrap: wrap;
        white-space: normal;
        overflow-wrap: break-word;
    }

    .product-details table.table-responsive {
        display: table;
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 767px) {

    .product-details table td,
    .product-details table th {
        padding: 8px 10px;
        font-size: 13.5px;
        line-height: 20px;
        vertical-align: middle;
    }

    /* <th class="col-1"> / "col-2" Bootstrap grid classes hain jo table
       cells par width: 8.33% / 16.66% thop deti hain — mobile par columns
       ko unnaturally squeeze karti hain. */
    .product-details table th[class*="col-"] {
        width: auto;
    }

    .table-title {
        font-size: 18px;
        line-height: 26px;
        border-left-width: 4px;
        padding-left: 12px;
        margin-bottom: 12px;
    }

    .product-details .col-md-5,
    .product-details .col-md-10,
    .product-details .col-md-12 {
        margin-top: 1.5rem !important;
    }
}


/* =====================================================================
   2. BREADCRUMB / PAGE TITLE
   ===================================================================== */
@media (max-width: 767px) {

    .pager-details.full {
        padding: 25px 0 !important;
        margin-top: 15px;
    }

    .pager-details .heading-title {
        font-size: 26px;
        line-height: 34px;
        margin-bottom: 15px;
    }

    .pager-details ul li a,
    .pager-details ul li span {
        font-size: 14px;
    }
}


/* =====================================================================
   3. SECTION SPACING + TYPOGRAPHY
   ===================================================================== */
@media (max-width: 767px) {

    .block {
        padding: 25px 0;
    }

    section.my-5 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .about-us .heading-title {
        font-size: 22px;
        line-height: 31px;
        margin-bottom: 12px;
    }

    .about-us .widget-title {
        font-size: 15px;
        line-height: 24px;
        margin-bottom: 10px;
    }

    /* Mobile par justify text me bade gaps ("rivers") ban jate hain */
    .about-us p,
    .link-text p {
        text-align: left;
        margin-bottom: 14px;
    }

    .core-value-list {
        padding-left: 18px;
        line-height: 24px;
        font-size: 14.5px;
    }

    .core-value-list li {
        margin-bottom: 10px;
    }

    .company-quality {
        margin-bottom: 20px;
    }

    .company-quality ul li {
        align-items: flex-start;
        font-size: 14.5px;
        line-height: 24px;
    }

    .company-quality ul li::before {
        margin: 0 12px 0 0;
        font-size: 16px;
        line-height: 24px;
    }

    .link-text.pb-4 {
        padding-bottom: 1rem !important;
    }
}


/* =====================================================================
   4. IMAGE GALLERY (building-gallery-tab)
   ---------------------------------------------------------------------
   Desktop par left column me 30px ka tab list hota hai. Mobile par wo
   image ke upar stack ho jata hai — 30px font aur 45px gaps ke saath
   aadhi screen kha jata tha. Yahan use horizontal pills bana rahe hain.
   ===================================================================== */
@media (max-width: 767px) {

    .locations-list {
        text-align: left;
        margin-bottom: 16px;
    }

    .locations-list ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .locations-list ul li {
        float: none;
        width: auto;
        margin-bottom: 0;
        font-size: 13px;
        font-weight: 600;
        line-height: 18px;
        padding: 7px 13px;
        border: 1px solid #dce8f5;
        border-radius: 999px;
        background: #fff;
    }

    .locations-list ul li.current {
        background: var(--blue);
        border-color: var(--blue);
        color: #fff;
    }

    /* 70px / 20px right padding desktop layout ke liye tha */
    .locations-images {
        padding-right: 0;
    }

    .location-img {
        padding-right: 0;
    }

    .product-lightbox .gallery a img {
        margin-bottom: 12px;
        border-radius: 10px;
    }
}


/* =====================================================================
   5. CTA BUTTONS
   ---------------------------------------------------------------------
   Do buttons side-by-side, har ek 15px 25px padding + 3px border +
   18px font ke saath — 360px screen par overflow kar jate the.
   ===================================================================== */
@media (max-width: 767px) {

    .get-proposal-btn {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 1.5rem !important;
    }

    .get-proposal-btn a {
        display: block;
        width: 100%;
        padding: 12px 18px;
        font-size: 15px;
        border-width: 2px;
    }
}


/* =====================================================================
   6. FAQ ACCORDION
   ===================================================================== */
@media (max-width: 767px) {

    .category.py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1.5rem !important;
    }

    .w3-panel .heading-title {
        font-size: 22px;
        line-height: 30px;
        margin-bottom: 10px;
    }

    .accordion__item__header {
        font-size: 15px;
        line-height: 22px;
        /* right side me arrow ke liye jagah — warna text uske neeche chala jata hai */
        padding: 13px 42px 13px 14px;
    }

    .accordion__item__header::before {
        right: 16px;
        top: 17px;
        height: 12px;
        width: 12px;
    }

    .accordion__item__header.active::before {
        top: 23px;
    }

    .accordion__item__content {
        padding: 14px 16px;
        font-size: 14.5px;
        line-height: 23px;
    }
}


/* =====================================================================
   7. MILESTONES COUNTER (product-section.php me shared)
   ===================================================================== */
@media (max-width: 767px) {

    .counter .container.mb-5 {
        margin-bottom: 1.5rem !important;
    }

    .counter .container.pb-5 {
        padding-bottom: 0 !important;
    }

    .counter .heading-title h3 {
        font-size: 22px;
    }

    .counter img {
        height: 70px;
        width: 70px;
    }

    .counter .data-count {
        font-size: 30px;
        padding: 10px;
    }

    .counter .milestones {
        margin-bottom: 15px;
        padding: 15px 0;
    }

    .counter .milestones p {
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 0;
        padding: 0 8px;
    }
}


/* =====================================================================
   8. CONTAINER RANGE LANDING PAGE (shipping-container-manufacturer)
   ===================================================================== */

/* BUG: responsive.css .portfolio-item ko fixed height deta hai
   (1200px par 520px, 1091px par 440px) — content ke hisab se card
   grow nahi kar pata. */
@media (max-width: 1091px) {

    .portfolio-sec .portfolio-item {
        height: auto;
        padding: 15px;
    }
}

@media (max-width: 767px) {

    .portfolio-sec {
        padding-bottom: 30px;
    }

    .portfolio-sec .portfolio-item {
        padding: 12px;
        border-radius: 18px;
    }

    /* Touch devices par hover nahi hota, isliye .pt-img ka dark overlay
       hamesha image par chipka reh jata tha */
    .portfolio-sec .pt-img:before {
        display: none;
    }

    .portfolio-sec .item-info h3 {
        font-size: 17px;
        line-height: 25px;
    }

    .our-services .service-details {
        padding: 20px 18px;
        margin-bottom: 18px;
    }

    .our-services .srvc-icon>h3 {
        font-size: 18px;
        line-height: 26px;
    }

    .title {
        margin-bottom: 20px;
    }

    .why-choose {
        margin-bottom: 15px;
    }

    .sub-box {
        padding: 15px !important;
    }
}

/* `col-xs-12` Bootstrap 3 ki class hai — Bootstrap 5 me define hi nahi
   hai, isliye 576px se neeche koi column class apply nahi hoti aur grid
   1-column ho jata hai (576px par achanak 2-column). Product cards ko
   phone par bhi 2-column rakhte hain; certificate boxes (col-lg-12)
   full width hi rehne dete hain. */
@media (max-width: 575.98px) {

    .portfolio-sec .row>.col-lg-4.col-xs-12 {
        width: 50%;
    }

    .portfolio-sec .row>.col-lg-4.col-xs-12.p-3 {
        padding: 0.5rem !important;
    }
}