/* =========================================================
       RESET
    ========================================================= */

    :root {
      --bg: #f6f8fb;
      --surface: #ffffff;
      --surface-2: #f1f5f9;

      --line: #e2e8f0;

      --text: #172033;
      --muted: #718096;

      --primary: #0f4c81;
      --primary-dark: #0a355b;

      --accent: #16a3a8;
      --accent-soft: #e7f7f7;

      --danger: #e55353;

      --shadow: 0 12px 35px rgba(25, 45, 70, .08);

      --radius: 16px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      max-width: 100%;
      overflow-x: hidden;
    }

    body {
      max-width: 100%;
      overflow-x: hidden;

      font-family: "Vazirmatn", Tahoma, sans-serif;

      background: var(--bg);
      color: var(--text);

      line-height: 1.8;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    button,
    input {
      font: inherit;
    }

    button {
      cursor: pointer;
      border: 0;
    }

    .container {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
    }


    /* =========================================================
       TOP BAR
    ========================================================= */

    .top-strip {
      background: #0c1727;
      color: #dbe7f3;
      font-size: 12px;
    }

    .top-strip .container {
      min-height: 38px;

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

      gap: 20px;
    }

    .top-links {
      display: flex;
      gap: 22px;
    }

    .top-links a {
      transition: .2s;
    }

    .top-links a:hover {
      color: #fff;
    }

    .shipping-note {
      color: #b9d4e9;
    }


    /* =========================================================
       HEADER
    ========================================================= */

    header {
      background: #fff;

      border-bottom: 1px solid var(--line);

      position: sticky;
      top: 0;

      z-index: 50;
    }

    .header-main {
      min-height: 82px;

      display: grid;

      grid-template-columns:
        220px
        minmax(250px, 1fr)
        220px;

      align-items: center;

      gap: 25px;
    }

    .logo {
      display: flex;
      align-items: center;

      gap: 11px;

      font-weight: 800;
      font-size: 21px;

      color: var(--primary-dark);

      white-space: nowrap;
    }

    .logo-mark {
      width: 42px;
      height: 42px;

      border-radius: 12px;

      display: grid;
      place-items: center;

      background: #fff;

      border: 1px solid #e1e8ee;

      overflow: hidden;
    }

    .logo-mark img {
      width: 100%;
      height: 100%;

      object-fit: contain;
    }


    /* =========================================================
       SEARCH
    ========================================================= */

    .search {
      height: 46px;

      background: #f7f9fc;

      border: 1px solid var(--line);

      border-radius: 12px;

      display: flex;
      align-items: center;

      padding: 0 15px;

      transition: .2s;
    }

    .search:focus-within {
      border-color: #9dbbd4;

      background: #fff;

      box-shadow:
        0 0 0 4px rgba(15, 76, 129, .06);
    }

    .search span {
      font-size: 20px;
      color: #8795a5;
    }

    .search input {
      flex: 1;

      border: 0;
      outline: 0;

      background: transparent;

      padding: 0 10px;

      color: var(--text);

      font-size: 13px;
    }


    /* =========================================================
       NAVIGATION
    ========================================================= */

    .nav {
      border-top: 1px solid #f0f2f5;
    }

    .nav .container {
      min-height: 49px;

      display: flex;
      align-items: center;

      gap: 30px;
    }

    .nav a {
      position: relative;

      padding: 14px 0;

      font-size: 13px;
      font-weight: 600;

      color: #4b596b;

      white-space: nowrap;

      transition: .2s;
    }

    .nav a:hover,
    .nav a.active {
      color: var(--primary);
    }

    .nav a.active::after {
      content: "";

      position: absolute;

      bottom: 0;
      right: 0;
      left: 0;

      height: 2px;

      background: var(--accent);
    }

    .nav-sale {
      color: var(--danger) !important;
    }


    /* =========================================================
       HERO
    ========================================================= */

    .hero {
      padding: 18px 0 12px;
    }

    .hero-box {
      min-height: 330px;

      position: relative;

      isolation: isolate;

      overflow: hidden;

      border-radius: 20px;

      background: #172536;

      border: 1px solid #dce7ee;

      display: grid;

      grid-template-columns:
        1.05fr
        .95fr;

      align-items: center;

      padding: 45px 58px;
    }

    .hero-slides {
      position: absolute;

      inset: 0;

      z-index: -2;
    }

    .hero-slide {
      position: absolute;

      inset: 0;

      background-size: cover;
      background-position: center;

      opacity: 0;

      transition: opacity .75s ease;
    }

    .hero-slide.active {
      opacity: 1;
    }

    .hero-slide::after {
      content: "";

      position: absolute;

      inset: 0;

      background:
        linear-gradient(
          90deg,
          rgba(8,20,34,.93) 0%,
          rgba(8,20,34,.76) 38%,
          rgba(8,20,34,.30) 75%,
          rgba(8,20,34,.12) 100%
        ),
        linear-gradient(
          0deg,
          rgba(8,20,34,.18),
          transparent
        );
    }

    .hero-copy {
      position: relative;

      z-index: 3;

      color: #fff;

      max-width: 570px;
    }

    .eyebrow {
      display: inline-flex;

      align-items: center;

      gap: 8px;

      padding: 5px 11px;

      border-radius: 30px;

      margin-bottom: 12px;

      font-size: 11px;
      font-weight: 700;

      color: #79e1df;

      background: rgba(22,163,168,.18);

      border: 1px solid rgba(121,225,223,.2);
    }

    .hero h1 {
      color: #fff;

      font-size: 34px;

      line-height: 1.45;

      margin-bottom: 10px;
    }

    .hero p {
      color: rgba(255,255,255,.84);

      font-size: 14px;

      max-width: 520px;
    }

    .hero-actions {
      display: flex;

      gap: 10px;

      margin-top: 22px;
    }

    .btn {
      height: 44px;

      padding: 0 21px;

      border-radius: 10px;

      display: inline-flex;

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

      font-size: 13px;
      font-weight: 700;

      transition: .2s;
    }

    .btn-primary {
      background: var(--primary);

      color: #fff;
    }

    .btn-primary:hover {
      background: var(--primary-dark);

      transform: translateY(-1px);
    }

    .btn-light {
      background: rgba(255,255,255,.12);

      color: #fff;

      border: 1px solid rgba(255,255,255,.3);

      backdrop-filter: blur(8px);
    }

    .hero-visual {
      height: 255px;

      display: grid;
      place-items: center;

      position: relative;

      z-index: 3;
    }

    .hero-dots {
      position: absolute;

      bottom: 4px;

      left: 50%;

      transform: translateX(-50%);

      display: flex;

      gap: 7px;

      z-index: 6;
    }

    .hero-dots i {
      width: 7px;
      height: 7px;

      border-radius: 50%;

      background: #aab8c5;

      cursor: pointer;

      transition: .2s;
    }

    .hero-dots i.active {
      width: 21px;

      border-radius: 10px;

      background: var(--accent);
    }

    .hero-arrow {
      position: absolute;

      top: 50%;

      transform: translateY(-50%);

      width: 40px;
      height: 40px;

      border-radius: 50%;

      z-index: 6;

      display: grid;
      place-items: center;

      background: rgba(255,255,255,.14);

      border: 1px solid rgba(255,255,255,.25);

      color: #fff;

      backdrop-filter: blur(8px);

      font-size: 20px;

      transition: .2s;
    }

    .hero-arrow:hover {
      background: rgba(255,255,255,.25);
    }

    .hero-prev {
      right: 18px;
    }

    .hero-next {
      left: 18px;
    }


    /* =========================================================
       SECTIONS
    ========================================================= */

    .section {
      padding: 20px 0;
    }

    .section-head {
      display: flex;

      justify-content: space-between;
      align-items: end;

      margin-bottom: 14px;
    }

    .section-head h2 {
      font-size: 19px;

      color: #1c2d40;
    }

    .section-head p {
      font-size: 12px;

      color: var(--muted);
    }

    .view-all {
      font-size: 12px;

      color: var(--primary);

      font-weight: 700;
    }


    /* =========================================================
       CATEGORIES
    ========================================================= */

    .category-grid {
      display: grid;

      grid-template-columns: repeat(8, 1fr);

      gap: 10px;
    }

    .category {
      min-height: 112px;

      background: #fff;

      border: 1px solid var(--line);

      border-radius: 13px;

      display: flex;

      flex-direction: column;

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

      gap: 9px;

      transition: .2s;
    }

    .category:hover {
      transform: translateY(-3px);

      border-color: #bfd1df;

      box-shadow: var(--shadow);
    }

    .category-icon {
      width: 48px;
      height: 48px;

      border-radius: 13px;

      display: grid;
      place-items: center;

      background: #f0f5f8;

      color: var(--primary);

      font-size: 24px;
    }

    .category strong {
      font-size: 12px;
    }

    .category small {
      font-size: 10px;

      color: #9aa6b3;
    }


    /* =========================================================
       PRODUCTS HEADER
    ========================================================= */

    .products-head {
      display: flex;

      align-items: center;
      justify-content: space-between;

      gap: 20px;

      margin-bottom: 16px;
    }

    .shelf-title {
      display: flex;

      align-items: center;

      gap: 12px;
    }

    .shelf-line {
      width: 4px;
      height: 42px;

      border-radius: 5px;

      background:
        linear-gradient(
          #0f4c81,
          #16a3a8
        );
    }

    .shelf-title h2 {
      font-size: 21px;

      color: #17283a;

      line-height: 1.35;
    }

    .shelf-title p {
      font-size: 11px;

      color: #84919e;

      margin-top: 3px;
    }

    .product-tabs {
      display: flex;

      align-items: center;

      background: #edf2f6;

      border: 1px solid #e0e7ed;

      border-radius: 11px;

      padding: 4px;

      gap: 3px;
    }

    .product-tabs .tab {
      border: 0;

      background: transparent;

      border-radius: 8px;

      padding: 8px 15px;

      font-size: 11px;

      color: #718091;

      position: static;

      transition: .2s;
    }

    .product-tabs .tab.active {
      background: #fff;

      color: #0f4c81;

      font-weight: 800;

      box-shadow:
        0 3px 12px rgba(20,50,80,.09);
    }

    .shelf-tools {
      display: flex;

      align-items: center;

      justify-content: space-between;

      margin-bottom: 13px;
    }

    .shelf-count {
      font-size: 10px;

      color: #9aa5b0;
    }

    .shelf-tools .view-all {
      font-size: 11px;
    }


    /* =========================================================
       PRODUCT GRID
    ========================================================= */

    .product-grid {
      display: grid;

      grid-template-columns: repeat(5, 1fr);

      gap: 13px;
    }

    .product {
      background: #fff;

      border: 1px solid var(--line);

      border-radius: 14px;

      overflow: hidden;

      position: relative;

      transition: .22s;
    }

    .product:hover {
      transform: translateY(-4px);

      box-shadow: var(--shadow);

      border-color: #ccdbe6;
    }

    .product-image {
      height: 185px;

      background:
        linear-gradient(
          145deg,
          #f5f8fa,
          #e9eef3
        );

      position: relative;

      display: grid;
      place-items: center;

      overflow: hidden;
    }

    .product-image img {
      width: 100%;
      height: 100%;

      object-fit: contain;

      padding: 16px;
    }

    .wish {
      position: absolute;

      top: 9px;
      left: 9px;

      width: 31px;
      height: 31px;

      border-radius: 50%;

      background: #fff;

      border: 1px solid #e1e7ec;

      color: #7e8c99;

      display: grid;
      place-items: center;

      z-index: 2;

      transition: .2s;
    }

    .wish:hover {
      transform: scale(1.05);
    }

    .label {
      position: absolute;

      top: 10px;
      right: 10px;

      background: #e8f7f7;

      color: #11888c;

      border-radius: 6px;

      padding: 3px 7px;

      font-size: 9px;
      font-weight: 700;

      z-index: 2;
    }

    .product-body {
      padding: 12px;
    }

    .product-brand {
      font-size: 10px;

      color: #8a97a4;

      margin-bottom: 4px;
    }

    .product-title {
      font-size: 12px;

      font-weight: 600;

      line-height: 1.7;

      min-height: 41px;

      color: #26374a;
    }

    .rating {
      font-size: 10px;

      color: #f4a62a;

      margin: 6px 0;
    }

    .rating span {
      color: #a2adb8;

      margin-right: 4px;
    }

    .product-detail-btn {
      width: 100%;

      height: 34px;

      border-radius: 8px;

      background: #f1f5f8;

      color: #23415c;

      font-size: 10px;

      font-weight: 700;

      margin: 8px 0 10px;

      transition: .2s;
    }

    .product-detail-btn:hover {
      background: #e5edf3;
    }

    .price-row {
      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 7px;
    }

    .price {
      font-size: 14px;

      font-weight: 800;

      color: #16283a;
    }

    .price small {
      font-size: 9px;

      color: #8995a2;

      font-weight: 400;
    }

    .add {
      width: 34px;
      height: 34px;

      border-radius: 9px;

      background: var(--primary);

      color: #fff;

      display: grid;
      place-items: center;

      font-size: 18px;

      transition: .2s;
    }

    .add:hover {
      background: var(--primary-dark);

      transform: translateY(-1px);
    }


    /* =========================================================
       PROMOTIONAL BANNERS
    ========================================================= */

    .promo-grid {
      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 16px;
    }

    .promo {
      min-height: 235px;

      border-radius: 18px;

      position: relative;

      overflow: hidden;

      border: 1px solid #d9e3eb;

      background: #142537;

      display: flex;

      align-items: flex-end;

      padding: 26px;

      isolation: isolate;

      box-shadow:
        0 10px 30px rgba(25,45,70,.08);
    }

    .promo::before {
      content: "";

      position: absolute;

      inset: 0;

      z-index: -2;

      background-image: var(--promo-image);

      background-size: cover;

      background-position: center;

      transform: scale(1.01);

      transition: transform .5s ease;
    }

    .promo:hover::before {
      transform: scale(1.06);
    }

    .promo::after {
      content: "";

      position: absolute;

      inset: 0;

      z-index: -1;

      background:
        linear-gradient(
          90deg,
          rgba(8,21,35,.92) 0%,
          rgba(8,21,35,.66) 45%,
          rgba(8,21,35,.16) 100%
        );
    }

    .promo-content {
      max-width: 390px;

      color: #fff;

      position: relative;

      z-index: 2;
    }

    .promo h3 {
      font-size: 21px;

      line-height: 1.5;

      margin-bottom: 5px;

      color: #fff;
    }

    .promo p {
      font-size: 11px;

      color: rgba(255,255,255,.78);

      max-width: 300px;
    }

    .promo .btn {
      margin-top: 15px;

      height: 38px;

      padding: 0 16px;

      font-size: 11px;
    }

    .promo-tag {
      display: inline-flex;

      padding: 4px 9px;

      border-radius: 20px;

      background: rgba(255,255,255,.12);

      border: 1px solid rgba(255,255,255,.2);

      font-size: 9px;

      color: #d9f5f4;

      margin-bottom: 8px;
    }


    /* =========================================================
       BENEFITS
    ========================================================= */

    .benefits {
      background: #fff;

      border: 1px solid var(--line);

      border-radius: 15px;

      display: grid;

      grid-template-columns: repeat(4, 1fr);

      margin-top: 5px;

      overflow: hidden;
    }

    .benefit {
      padding: 22px 20px;

      display: flex;

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

      gap: 12px;
    }

    .benefit + .benefit {
      border-right: 1px solid var(--line);
    }

    .benefit-icon {
      font-size: 25px;

      color: var(--primary);
    }

    .benefit strong {
      display: block;

      font-size: 12px;
    }

    .benefit span {
      font-size: 10px;

      color: #8996a4;
    }


    /* =========================================================
       FOOTER
    ========================================================= */

    footer {
      margin-top: 22px;

      background: #172536;

      color: #cbd6df;
    }

    .footer-main {
      padding: 38px 0 30px;

      display: grid;

      grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr;

      gap: 40px;
    }

    .footer-brand {
      color: #fff;

      font-size: 18px;

      font-weight: 800;

      margin-bottom: 10px;
    }

    footer p,
    footer a {
      font-size: 11px;

      color: #9eafbe;
    }

    footer a:hover {
      color: #fff;
    }

    footer h4 {
      font-size: 13px;

      color: #fff;

      margin-bottom: 11px;
    }

    .footer-col {
      display: flex;

      flex-direction: column;

      gap: 6px;
    }

    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.08);

      padding: 15px 0;

      font-size: 10px;

      color: #7f93a5;

      display: flex;

      justify-content: space-between;

      gap: 15px;
    }


    /* =========================================================
       PRODUCT MODAL
    ========================================================= */

    .product-modal,
    .inquiry-modal {
      position: fixed;

      inset: 0;

      z-index: 1000;

      background: rgba(8,18,30,.62);

      backdrop-filter: blur(6px);

      display: none;

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

      padding: 18px;
    }

    .product-modal.show,
    .inquiry-modal.show {
      display: flex;
    }

    .modal-card {
      width: min(760px, 100%);

      max-height: 90vh;

      overflow: auto;

      background: #fff;

      border-radius: 20px;

      box-shadow:
        0 25px 80px rgba(0,0,0,.25);

      border: 1px solid #e1e8ee;

      position: relative;
    }

    .modal-close {
      position: absolute;

      left: 15px;
      top: 15px;

      width: 36px;
      height: 36px;

      border-radius: 50%;

      background: #f3f6f8;

      color: #516170;

      display: grid;
      place-items: center;

      font-size: 20px;

      z-index: 3;
    }

    .modal-product {
      display: grid;

      grid-template-columns: 280px 1fr;
    }

    .modal-product-image {
      min-height: 330px;

      background:
        linear-gradient(
          145deg,
          #f4f7f9,
          #e8eef3
        );

      display: grid;

      place-items: center;

      padding: 25px;
    }

    .modal-product-image img {
      width: 100%;

      height: 270px;

      object-fit: contain;
    }

    .modal-content {
      padding: 34px 30px 28px;
    }

    .modal-brand {
      font-size: 11px;

      color: #83919e;

      margin-bottom: 5px;
    }

    .modal-content h3 {
      font-size: 22px;

      line-height: 1.6;

      margin-bottom: 8px;

      color: #17283a;
    }

    .modal-rating {
      color: #efa62a;

      font-size: 12px;

      margin-bottom: 16px;
    }

    .modal-description {
      font-size: 13px;

      color: #667587;

      line-height: 2;

      margin-bottom: 18px;
    }

    .specs {
      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 8px;

      margin-bottom: 20px;
    }

    .spec {
      background: #f6f8fa;

      border-radius: 9px;

      padding: 8px 10px;

      font-size: 11px;

      color: #687787;
    }

    .spec b {
      color: #25384a;

      margin-left: 4px;
    }

    .modal-price {
      font-size: 20px;

      font-weight: 800;

      color: #15283a;

      margin-bottom: 15px;
    }

    .modal-actions {
      display: flex;

      gap: 9px;
    }


    /* =========================================================
       INQUIRY MODAL
    ========================================================= */

    .inquiry-card {
      width: min(430px, 100%);

      background: #fff;

      border-radius: 20px;

      padding: 32px 26px 26px;

      text-align: center;

      position: relative;

      box-shadow:
        0 25px 80px rgba(0,0,0,.25);
    }

    .inquiry-icon {
      width: 60px;
      height: 60px;

      border-radius: 18px;

      margin: 0 auto 14px;

      display: grid;

      place-items: center;

      background: #e8f7f7;

      color: #128b90;

      font-size: 27px;
    }

    .inquiry-card h3 {
      font-size: 20px;

      margin-bottom: 7px;
    }

    .inquiry-card p {
      font-size: 12px;

      color: #778594;

      margin-bottom: 14px;
    }

    .phone-number {
      display: block;

      direction: ltr;

      font-size: 23px;

      font-weight: 800;

      letter-spacing: .5px;

      color: var(--primary);

      background: #f4f7fa;

      border: 1px solid #e0e7ed;

      border-radius: 12px;

      padding: 12px;

      margin-bottom: 14px;
    }


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

    @media (max-width: 1000px) {

      .header-main {
        grid-template-columns:
          180px
          minmax(200px, 1fr)
          150px;
      }

      .category-grid {
        grid-template-columns: repeat(4, 1fr);
      }

      .product-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .hero-box {
        grid-template-columns: 1fr;

        padding: 35px;
      }

      .hero-visual {
        display: none;
      }

    }


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

    @media (max-width: 700px) {

      .container {
        width: min(100% - 20px, 1180px);
      }


      /* TOP */

      .top-strip {
        display: none;
      }


      /* HEADER */

      header {
        position: relative;
      }

      .header-main {
        min-height: 72px;

        grid-template-columns: 1fr auto;

        gap: 10px;
      }

      .logo {
        font-size: 17px;
      }

      .logo-mark {
        width: 38px;
        height: 38px;
      }

      .search {
        grid-column: 1 / -1;

        grid-row: 2;
      }


      /* NAV */

      .nav {
        overflow-x: auto;

        scrollbar-width: none;
      }

      .nav::-webkit-scrollbar {
        display: none;
      }

      .nav .container {
        gap: 22px;

        white-space: nowrap;
      }


      /* HERO */

      .hero {
        padding-top: 10px;
      }

      .hero-box {
        min-height: 340px;

        display: block;

        padding: 32px 24px;

        border-radius: 16px;
      }

      .hero-copy {
        max-width: 100%;
      }

      .hero h1 {
        font-size: 25px;

        line-height: 1.55;
      }

      .hero p {
        font-size: 12px;

        line-height: 2;
      }

      .hero-actions {
        flex-direction: column;

        align-items: stretch;
      }

      .hero-actions .btn {
        width: 100%;
      }

      .hero-arrow {
        width: 34px;
        height: 34px;

        font-size: 17px;
      }

      .hero-prev {
        right: 10px;
      }

      .hero-next {
        left: 10px;
      }


      /* SECTIONS */

      .section {
        padding: 15px 0;
      }

      .section-head {
        align-items: flex-start;

        gap: 10px;
      }

      .section-head h2 {
        font-size: 17px;
      }

      .section-head p {
        font-size: 10px;
      }


      /* CATEGORIES */

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

        gap: 8px;
      }

      .category {
        min-height: 105px;
      }


      /* PRODUCTS */

      .products-head {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
      }

      .shelf-title h2 {
        font-size: 17px;
      }

      .shelf-title p {
        font-size: 10px;
      }

      .product-tabs {
        width: 100%;

        justify-content: stretch;
      }

      .product-tabs .tab {
        flex: 1;

        padding: 8px 5px;

        font-size: 10px;
      }

      .shelf-tools {
        margin-bottom: 11px;
      }

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

        gap: 9px;
      }

      .product-image {
        height: 155px;
      }

      .product-body {
        padding: 10px;
      }

      .product-title {
        font-size: 11px;
      }

      .price {
        font-size: 12px;
      }

      .add {
        width: 32px;
        height: 32px;
      }


      /* PROMO */

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

      .promo {
        min-height: 205px;

        padding: 20px;
      }

      .promo h3 {
        font-size: 17px;
      }


      /* BENEFITS */

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

      .benefit {
        justify-content: flex-start;

        padding: 17px 13px;
      }

      .benefit:nth-child(3) {
        border-right: 0;

        border-top: 1px solid var(--line);
      }

      .benefit:nth-child(4) {
        border-top: 1px solid var(--line);
      }

      .benefit-icon {
        font-size: 21px;
      }


      /* FOOTER */

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

        gap: 25px;
      }

      .footer-bottom {
        flex-direction: column;

        gap: 5px;
      }


      /* MODAL */

      .modal-product {
        grid-template-columns: 1fr;
      }

      .modal-product-image {
        min-height: 220px;

        padding: 20px;
      }

      .modal-product-image img {
        height: 190px;
      }

      .modal-content {
        padding: 25px 20px 22px;
      }

      .modal-content h3 {
        font-size: 19px;
      }

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

      .modal-actions {
        flex-direction: column;
      }

      .modal-actions .btn {
        width: 100%;
      }

      .inquiry-card {
        padding: 30px 20px 22px;
      }

    }