/* =========================================================
   SAURASHTRA FREIGHT
   EQUIPMENT MOSAIC SECTION
========================================================= */

    .sf-equipment-section {
      width: 100%;
      padding: 100px 0;
      background: #f7f8fa;
    }

    .sf-equipment-container {
      width: min(1280px, calc(100% - 40px));
      margin: 0 auto;
    }


    /* =========================================================
   SECTION HEADING
========================================================= */

    .sf-equipment-heading {
      max-width: 720px;
      margin-bottom: 55px;
    }

    .sf-equipment-eyebrow {
      display: inline-block;
      margin-bottom: 12px;
      color: #1d6f42;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .sf-equipment-heading h2 {
      margin: 0 0 16px;
      color: #111827;
      font-size: clamp(34px, 4vw, 54px);
      line-height: 1.05;
      font-weight: 700;
      letter-spacing: -1.5px;
    }

    .sf-equipment-heading p {
      margin: 0;
      max-width: 650px;
      color: #667085;
      font-size: 16px;
      line-height: 1.75;
    }


    /* =========================================================
   MOSAIC GRID
========================================================= */

    .sf-equipment-mosaic {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 24px;
      align-items: stretch;
    }


    /* =========================================================
   EQUIPMENT CARD
========================================================= */

    .sf-equipment-item {
      grid-column: span 4;
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 24px;
      box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
      transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
    }

    .sf-equipment-item:hover {
      transform: translateY(-7px);
      box-shadow: 0 18px 45px rgba(15, 23, 42, 0.11);
    }


    /* Large card */

    .sf-equipment-item--large {
      grid-column: span 6;
    }


    /* Wide card */

    .sf-equipment-item--wide {
      grid-column: span 6;
    }


    /* =========================================================
   IMAGE AREA
========================================================= */

    .sf-equipment-media {
      position: relative;
      width: 100%;
      height: 250px;

      display: flex;
      align-items: center;
      justify-content: center;

      overflow: hidden;
      background: #f1f3f5;
    }


    /*
   Larger cards get a little more visual space.
*/

    .sf-equipment-item--large .sf-equipment-media,
    .sf-equipment-item--wide .sf-equipment-media {
      height: 250px;
    }


    /*
   IMPORTANT:
   contain keeps the COMPLETE equipment image visible.
   Nothing gets cropped.
*/

    .sf-equipment-media img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      object-position: center;

      transition: transform 0.5s ease;
    }


    /* Small zoom without cropping */

    .sf-equipment-item:hover .sf-equipment-media img {
      transform: scale(1.035);
    }


    /* =========================================================
   CONTENT
========================================================= */

    .sf-equipment-body {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding: 25px 26px 26px;
    }

    .sf-equipment-body h3 {
      margin: 0 0 10px;

      color: #101828;
      font-size: 22px;
      line-height: 1.25;
      font-weight: 700;
    }

    .sf-equipment-body p {
      margin: 0;

      color: #667085;
      font-size: 15px;
      line-height: 1.7;
    }


    /* =========================================================
   TAGS / SPECS
========================================================= */

    .sf-equipment-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;

      margin-top: auto;
      padding-top: 22px;
    }

    .sf-equipment-tags span {
      display: inline-flex;
      align-items: center;

      min-height: 30px;
      padding: 7px 12px;

      border-radius: 999px;
      background: #f2f4f7;

      color: #344054;
      font-size: 11px;
      line-height: 1;
      font-weight: 700;
      white-space: nowrap;
    }


    /* =========================================================
   DESKTOP MISMATCH
========================================================= */

    @media (min-width: 1100px) {

      .sf-equipment-mosaic {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 24px;
      }

      /* Row 1
       8 + 4 = 12 */
      .sf-equipment-item:nth-child(1) {
        grid-column: 1 / span 7;
      }

      .sf-equipment-item:nth-child(2) {
        grid-column: 8 / span 5;
      }


      /* Row 2
       5 + 7 = 12 */
      .sf-equipment-item:nth-child(3) {
        grid-column: 1 / span 4;
      }

      .sf-equipment-item:nth-child(4) {
        grid-column: 5 / span 8;
      }


      /* Row 3
       4 + 4 + 4 = 12 */
      .sf-equipment-item:nth-child(5) {
        grid-column: 1 / span 4;
      }

      .sf-equipment-item:nth-child(6) {
        grid-column: 5 / span 4;
      }

      .sf-equipment-item:nth-child(7) {
        grid-column: 9 / span 4;
      }

    }


    /* =========================================================
   TABLET
========================================================= */

    @media (max-width: 1099px) and (min-width: 768px) {

      .sf-equipment-section {
        padding: 80px 0;
      }

      .sf-equipment-mosaic {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 20px;
      }

      .sf-equipment-item {
        grid-column: span 3;
      }

      .sf-equipment-item--large,
      .sf-equipment-item--wide {
        grid-column: span 6;
      }

      .sf-equipment-media,
      .sf-equipment-item--large .sf-equipment-media,
      .sf-equipment-item--wide .sf-equipment-media {
        height: 250px;
      }
    }


    /* =========================================================
   MOBILE
========================================================= */

    @media (max-width: 767px) {

      .sf-equipment-section {
        padding: 65px 0;
      }

      .sf-equipment-container {
        width: min(100% - 30px, 600px);
      }

      .sf-equipment-heading {
        margin-bottom: 35px;
      }

      .sf-equipment-heading h2 {
        font-size: 36px;
        letter-spacing: -1px;
      }

      .sf-equipment-heading p {
        font-size: 15px;
      }

      .sf-equipment-mosaic {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .sf-equipment-item,
      .sf-equipment-item--large,
      .sf-equipment-item--wide {
        grid-column: 1;
      }

      .sf-equipment-media,
      .sf-equipment-item--large .sf-equipment-media,
      .sf-equipment-item--wide .sf-equipment-media {
        height: 235px;
      }

      .sf-equipment-body {
        padding: 21px;
      }

      .sf-equipment-body h3 {
        font-size: 20px;
      }

      .sf-equipment-body p {
        font-size: 14px;
      }

      .sf-equipment-tags {
        padding-top: 18px;
      }
    }

    @media (max-width: 576px) {
      .hero-page-badge {
        display: none !important;
      }
    }


    /* =========================================================
   SMALL MOBILE
========================================================= */

    @media (max-width: 480px) {

      .sf-equipment-section {
        padding: 55px 0;
      }

      .sf-equipment-container {
        width: calc(100% - 24px);
      }

      .sf-equipment-heading h2 {
        font-size: 31px;
      }

      .sf-equipment-media,
      .sf-equipment-item--large .sf-equipment-media,
      .sf-equipment-item--wide .sf-equipment-media {
        height: 210px;
      }

      .sf-equipment-body {
        padding: 18px;
      }

      .sf-equipment-tags span {
        font-size: 10px;
      }
    }
  
/*# sourceURL=sf-native-hero-consistency-inline-css */