:root {

    --black: #11100e;
    --black-2: #191815;
  
    --cream: #f7f3eb;
    --cream-2: #eee8dc;
  
    --white: #fffdf8;
  
    --text: #181613;
    --muted: #6f685e;
  
    --gold: #b99552;
    --gold-light: #d9bd7c;
  
    --line: #ddd5c9;
  
    --green: #2d8a4b;
  
    --red: #d84343;
  
  }
  
  
  * {
    box-sizing: border-box;
  }
  
  
  html {
    scroll-behavior: smooth;
  }
  
  
  body {
  
    margin: 0;
  
    background:
      var(--cream);
  
    color:
      var(--text);
  
    font-family:
      Arial,
      Helvetica,
      sans-serif;
  }
  
  
  body.no-scroll {
    overflow: hidden;
  }
  
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  
  button {
    font-family: inherit;
  }
  
  
  .container {
  
    width:
      min(
        1180px,
        calc(100% - 36px)
      );
  
    margin:
      0 auto;
  
  }
  
  
  /* =====================================
     HEADER
  ===================================== */
  
  .site-header {
  
    height: 72px;
  
    background:
      var(--black);
  
    color:
      white;
  
    position:
      sticky;
  
    top: 0;
  
    z-index: 100;
  
    border-bottom:
      1px solid #302e29;
  }
  
  
  .header-inner {
  
    height: 100%;
  
    display:
      flex;
  
    align-items:
      center;
  
    justify-content:
      space-between;
  
  }
  
  
  .brand {
  
    display:
      flex;
  
    align-items:
      center;
  
    gap: 10px;
  
  }
  
  
  .brand-logo {
  
    width: 37px;
  
    height: 37px;
  
    object-fit:
      contain;
  }
  
  
  .brand-text {
  
    display:
      flex;
  
    flex-direction:
      column;
  
    line-height:
      1;
  }
  
  
  .brand-text strong {
  
    font-family:
      Georgia,
      serif;
  
    font-size:
      22px;
  
    letter-spacing:
      .08em;
  }
  
  
  .brand-text span {
  
    margin-top:
      5px;
  
    color:
      var(--gold-light);
  
    font-size:
      7px;
  
    letter-spacing:
      .19em;
  }
  
  
  .desktop-nav {
  
    display:
      flex;
  
    gap:
      28px;
  
    color:
      #bcb6ad;
  
    font-size:
      11px;
  }
  
  
  .desktop-nav a:hover {
  
    color:
      var(--gold-light);
  }
  
  
  .nav-button {
  
    border:
      1px solid
      var(--gold);
  
    color:
      var(--gold-light);
  
    padding:
      9px 14px;
  
    font-size:
      9px;
  
    letter-spacing:
      .08em;
  }
  
  
  .mobile-menu {
  
    display:
      none;
  
    border:
      0;
  
    background:
      none;
  
    color:
      white;
  
    font-size:
      23px;
  
  }
  
  
  .mobile-nav {
  
    display:
      none;
  
  }
  
  
  /* =====================================
     HERO
  ===================================== */
  
  .hero {
  
    height:
      470px;
  
    position:
      relative;
  
    overflow:
      hidden;
  
    background:
      #ddd3c6;
  }
  
  
  .hero picture,
  .hero picture img {
  
    position:
      absolute;
  
    inset:
      0;
  
    width:
      100%;
  
    height:
      100%;
  }
  
  
  .hero picture img {
  
    object-fit:
      cover;
  
    object-position:
      center;
  }
  
  
  .hero-shade {
  
    position:
      absolute;
  
    inset:
      0;
  
    background:
      linear-gradient(
        90deg,
        rgba(0,0,0,.06),
        transparent 65%
      );
  }
  
  
  .hero-content {
  
    position:
      relative;
  
    z-index:
      2;
  
    height:
      100%;
  
    display:
      flex;
  
    flex-direction:
      column;
  
    align-items:
      flex-start;
  
    justify-content:
      center;
  
    padding-left:
      6%;
  }
  
  
  .hero-eyebrow {
  
    font-size:
      10px;
  
    letter-spacing:
      .23em;
  
    margin-bottom:
      12px;
  }
  
  
  .hero h1 {
  
    margin:
      0;
  
    font-family:
      Georgia,
      serif;
  
    font-size:
      clamp(
        42px,
        6vw,
        76px
      );
  
    font-weight:
      400;
  
    line-height:
      .95;
  }
  
  
  .hero p {
  
    max-width:
      410px;
  
    margin:
      20px 0;
  
    color:
      #39352f;
  
    font-size:
      13px;
  
    line-height:
      1.6;
  }
  
  
  .hero-button {
  
    background:
      var(--black);
  
    color:
      var(--gold-light);
  
    padding:
      12px 20px;
  
    font-size:
      10px;
  
    letter-spacing:
      .1em;
  }
  
  
  /* =====================================
     SECTION HEADING
  ===================================== */
  
  .section-heading {
  
    text-align:
      center;
  
    padding:
      60px 0 30px;
  }
  
  
  .section-heading > span,
  .pack-heading > span,
  .section-mini {
  
    color:
      var(--gold);
  
    font-size:
      9px;
  
    font-weight:
      700;
  
    letter-spacing:
      .22em;
  }
  
  
  .section-heading h2,
  .pack-heading h2 {
  
    margin:
      7px 0;
  
    font-family:
      Georgia,
      serif;
  
    font-size:
      38px;
  
    font-weight:
      400;
  }
  
  
  .section-heading p {
  
    max-width:
      570px;
  
    margin:
      10px auto 0;
  
    color:
      var(--muted);
  
    font-size:
      12px;
  
    line-height:
      1.6;
  }
  
  
  /* =====================================
     HOME PRODUCT GRID
  ===================================== */
  
  .product-grid {
  
    display:
      grid;
  
    grid-template-columns:
      repeat(5, minmax(0, 1fr));
  
    gap:
      12px;
  
    padding-bottom:
      70px;
  }
  
  
  .product-card {
  
    background:
      var(--white);
  
    border:
      1px solid
      var(--line);
  
    overflow:
      hidden;
  
    transition:
      transform .2s ease,
      box-shadow .2s ease;
  }
  
  
  .product-card:hover {
  
    transform:
      translateY(-3px);
  
    box-shadow:
      0 10px 25px
      rgba(30,20,10,.08);
  }
  
  
  .product-card-image {
  
    width:
      100%;
  
    aspect-ratio:
      1 / 1.08;
  
    overflow:
      hidden;
  
    background:
      #eee7dc;
  }
  
  
  .product-card-image img {
  
    width:
      100%;
  
    height:
      100%;
  
    object-fit:
      cover;
  
    display:
      block;
  }
  
  
  .product-card-content {
  
    padding:
      15px 14px 16px;
  }
  
  
  .product-category {
  
    color:
      var(--gold);
  
    font-size:
      8px;
  
    font-weight:
      700;
  
    letter-spacing:
      .18em;
  }
  
  
  .product-card h3 {
  
    margin:
      5px 0 4px;
  
    font-family:
      Georgia,
      serif;
  
    font-size:
      21px;
  
    font-weight:
      400;
  }
  
  
  .product-card p {
  
    margin:
      0 0 13px;
  
    min-height:
      43px;
  
    color:
      var(--muted);
  
    font-size:
      10px;
  
    line-height:
      1.5;
  }
  
  
  .product-size {
  
    color:
      #80786e;
  
    font-size:
      9px;
  }
  
  
  .view-more {
  
    display:
      flex;
  
    justify-content:
      center;
  
    align-items:
      center;
  
    width:
      100%;
  
    height:
      36px;
  
    margin-top:
      13px;
  
    background:
      var(--black);
  
    color:
      var(--gold-light);
  
    border:
      0;
  
    font-size:
      9px;
  
    font-weight:
      700;
  
    letter-spacing:
      .07em;
  
    cursor:
      pointer;
  }
  
  
  .view-more:hover {
  
    background:
      var(--gold);
  
    color:
      var(--black);
  }
  
  
  /* =====================================
     PRODUCT DETAIL VIEW
  ===================================== */
  
  .product-view {
  
    min-height:
      70vh;
  
    padding:
      25px 0 70px;
  
  }
  
  
  .back-button {
  
    border:
      0;
  
    background:
      transparent;
  
    color:
      var(--muted);
  
    padding:
      8px 0;
  
    font-size:
      11px;
  
    cursor:
      pointer;
  }
  
  
  .back-button:hover {
  
    color:
      var(--text);
  }
  
  
  .product-intro {
  
    margin-top:
      20px;
  
    display:
      grid;
  
    grid-template-columns:
      43%
      57%;
  
    border:
      1px solid
      var(--line);
  
    background:
      var(--white);
  }
  
  
  .product-detail-image {
  
    min-height:
      430px;
  
    background:
      #eee7dc;
  
    overflow:
      hidden;
  }
  
  
  .product-detail-image img {
  
    width:
      100%;
  
    height:
      100%;
  
    min-height:
      430px;
  
    object-fit:
      cover;
  
    display:
      block;
  }
  
  
  .product-detail-info {
  
    padding:
      45px;
  }
  
  
  .detail-category {
  
    color:
      var(--gold);
  
    font-size:
      9px;
  
    font-weight:
      700;
  
    letter-spacing:
      .2em;
  }
  
  
  .product-detail-info h1 {
  
    margin:
      8px 0 5px;
  
    font-family:
      Georgia,
      serif;
  
    font-size:
      48px;
  
    font-weight:
      400;
  
    line-height:
      1;
  }
  
  
  .detail-subtitle {
  
    color:
      #8b473f;
  
    font-family:
      Georgia,
      serif;
  
    font-size:
      18px;
  }
  
  
  .detail-description {
  
    max-width:
      580px;
  
    margin:
      20px 0;
  
    color:
      var(--muted);
  
    font-size:
      13px;
  
    line-height:
      1.7;
  }
  
  
  .detail-list {
  
    margin:
      20px 0 0;
  
    padding:
      0;
  
    list-style:
      none;
  
    border-top:
      1px solid
      var(--line);
  }
  
  
  .detail-list li {
  
    padding:
      9px 0;
  
    border-bottom:
      1px solid
      var(--line);
  
    font-size:
      11px;
  
    color:
      #5f594f;
  }
  
  
  .detail-list li::before {
  
    content:
      "✓";
  
    color:
      var(--gold);
  
    margin-right:
      9px;
  
  }
  
  
  /* =====================================
     PACK SECTION
  ===================================== */
  
  .pack-section {
  
    padding-top:
      55px;
  }
  
  
  .pack-heading {
  
    margin-bottom:
      22px;
  }
  
  
  .pack-heading h2 {
  
    margin-top:
      6px;
  }
  
  
  .pack-grid {
  
    display:
      grid;
  
    grid-template-columns:
      repeat(5, minmax(0, 1fr));
  
    gap:
      12px;
  }
  
  
  .pack-card {
  
    position:
      relative;
  
    background:
      var(--white);
  
    border:
      1px solid
      var(--line);
  
    padding:
      12px 10px 10px;
  
    text-align:
      center;
  
    overflow:
      hidden;
  }
  
  
  .discount-badge {
  
    position:
      absolute;
  
    left:
      9px;
  
    top:
      9px;
  
    width:
      43px;
  
    height:
      43px;
  
    display:
      flex;
  
    flex-direction:
      column;
  
    justify-content:
      center;
  
    align-items:
      center;
  
    border-radius:
      50%;
  
    background:
      var(--red);
  
    color:
      white;
  
    font-size:
      9px;
  
    font-weight:
      800;
  
    line-height:
      1;
  }
  
  
  .discount-badge small {
  
    margin-top:
      2px;
  
    font-size:
      6px;
  }
  
  
  .pack-card h3 {
  
    margin:
      2px 0 2px;
  
    font-size:
      13px;
  }
  
  
  .pack-quantity {
  
    min-height:
      27px;
  
    color:
      #777067;
  
    font-size:
      8px;
  
    line-height:
      1.3;
  }
  
  
  .pack-image {
  
    width:
      100%;
  
    height:
      190px;
  
    object-fit:
      contain;
  
    display:
      block;
  
    margin:
      4px auto 3px;
  }
  
  
  .pack-price-row {
  
    display:
      flex;
  
    justify-content:
      center;
  
    align-items:
      baseline;
  
    gap:
      7px;
  }
  
  
  .pack-selling-price {
  
    font-size:
      20px;
  
    font-weight:
      800;
  }
  
  
  .pack-mrp {
  
    color:
      #858078;
  
    font-size:
      10px;
  
    text-decoration:
      line-through;
  }
  
  
  .pack-saving {
  
    margin-top:
      4px;
  
    color:
      var(--green);
  
    font-size:
      9px;
  
    font-weight:
      700;
  }
  
  
  .pack-buy {
  
    width:
      100%;
  
    height:
      37px;
  
    margin-top:
      11px;
  
    border:
      0;
  
    background:
      var(--black);
  
    color:
      var(--gold-light);
  
    font-size:
      9px;
  
    font-weight:
      700;
  
    cursor:
      pointer;
  }
  
  
  .pack-buy:hover {
  
    background:
      var(--gold);
  
    color:
      var(--black);
  }
  
  
  /* =====================================
     FAQ
  ===================================== */
  
  .faq-section,
  .product-faq {
  
    padding:
      70px 0;
  }
  
  
  .faq-container {
  
    max-width:
      850px;
  }
  
  
  .faq-list {
  
    border-top:
      1px solid
      var(--line);
  }
  
  
  .faq-item {
  
    border-bottom:
      1px solid
      var(--line);
  }
  
  
  .faq-question {
  
    width:
      100%;
  
    min-height:
      55px;
  
    padding:
      14px 0;
  
    display:
      flex;
  
    align-items:
      center;
  
    justify-content:
      space-between;
  
    border:
      0;
  
    background:
      transparent;
  
    color:
      var(--text);
  
    text-align:
      left;
  
    font-size:
      12px;
  
    cursor:
      pointer;
  }
  
  
  .faq-plus {
  
    width:
      25px;
  
    height:
      25px;
  
    display:
      flex;
  
    justify-content:
      center;
  
    align-items:
      center;
  
    border:
      1px solid
      var(--line);
  
    font-size:
      17px;
  
    font-weight:
      300;
  }
  
  
  .faq-answer {
  
    display:
      none;
  
    padding:
      0 35px 18px 0;
  
    color:
      var(--muted);
  
    font-size:
      11px;
  
    line-height:
      1.7;
  }
  
  
  .faq-item.open
  .faq-answer {
  
    display:
      block;
  }
  
  
  .faq-item.open
  .faq-plus {
  
    background:
      var(--black);
  
    color:
      var(--gold-light);
  
  }
  
  
  /* =====================================
   CONTACT — CLEAN CATALOG STYLE
===================================== */

.contact-section {
    padding: 50px 0 65px;
    background: var(--cream);
    border-top: 1px solid var(--line);
  }
  
  
  .contact-area {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
  
    gap: 45px;
  
    padding: 38px 42px;
  
    background: var(--white);
  
    border: 1px solid var(--line);
  }
  
  
  /* LEFT */
  
  .contact-copy {
    padding-right: 15px;
  }
  
  
  .contact-copy .section-mini {
    display: block;
  
    color: var(--gold);
  
    font-size: 9px;
  
    font-weight: 700;
  
    letter-spacing: .22em;
  
    margin-bottom: 9px;
  }
  
  
  .contact-copy h2 {
    margin: 0;
  
    font-family:
      Georgia,
      serif;
  
    font-size: 40px;
  
    font-weight: 400;
  
    line-height: 1;
  }
  
  
  .contact-copy p {
    max-width: 390px;
  
    margin: 16px 0 0;
  
    color: var(--muted);
  
    font-size: 11px;
  
    line-height: 1.7;
  }
  
  
  /* RIGHT CONTACT OPTIONS */
  
  .contact-actions {
    display: grid;
  
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  
    gap: 10px;
  }
  
  
  .contact-action {
    min-height: 64px;
  
    display: flex;
  
    align-items: center;
  
    gap: 13px;
  
    padding: 12px 15px;
  
    background: var(--cream);
  
    border: 1px solid var(--line);
  
    color: var(--text);
  
    font-size: 10px;
  
    font-weight: 600;
  
    transition:
      border-color .2s ease,
      background .2s ease,
      transform .2s ease;
  }
  
  
  .contact-action:hover {
    border-color: var(--gold);
  
    background: var(--white);
  
    transform: translateY(-2px);
  }
  
  
  /* =====================================
   REAL CONTACT ICONS
===================================== */

  
  
  .contact-icon {
  
    width: 32px;
  
    height: 32px;
  
    flex-shrink: 0;
  
    display: flex;
  
    align-items: center;
  
    justify-content: center;
  
    border-radius: 50%;
  
    background: var(--white);
  
  }
  
  
  /* WhatsApp */
  
  .contact-action:nth-child(1) .contact-icon {
  
    color: #25D366;
  
    border: 1px solid #25D366;
  
  }
  
  
  /* Call */
  
  .contact-action:nth-child(2) .contact-icon {
  
    color: #2563EB;
  
    border: 1px solid #2563EB;
  
  }
  
  
  /* Email */
  
  .contact-action:nth-child(3) .contact-icon {
  
    color: #EA4335;
  
    border: 1px solid #EA4335;
  
  }
  
  
  /* Instagram */
  
  .contact-action:nth-child(4) .contact-icon {
  
    color: #E1306C;
  
    border: 1px solid #E1306C;
  
  }
  
  
  .contact-icon svg {
  
    width: 16px;
  
    height: 16px;
  
    display: block;
  
    stroke: currentColor;
  
    fill: none;
  
    stroke-width: 1.8;
  
    stroke-linecap: round;
  
    stroke-linejoin: round;
  
  }
  
  
  /* HOVER */
  
  .contact-action:hover {
  
    background: var(--white);
  
    transform: translateY(-2px);
  
  }
  
  
  /* WhatsApp hover */
  
  .contact-action:nth-child(1):hover {
  
    border-color: #25D366;
  
  }
  
  
  /* Call hover */
  
  .contact-action:nth-child(2):hover {
  
    border-color: #2563EB;
  
  }
  
  
  /* Email hover */
  
  .contact-action:nth-child(3):hover {
  
    border-color: #EA4335;
  
  }
  
  
  /* Instagram hover */
  
  .contact-action:nth-child(4):hover {
  
    border-color: #E1306C;
  
  }
  
  
  /* =====================================
   CONTACT CARD BRAND COLORS
===================================== */

/* WhatsApp */

.contact-action:nth-child(1) {

    border-color: #25D366;
  
    background: #f5fcf7;
  
  }
  
  
  /* Call */
  
  .contact-action:nth-child(2) {
  
    border-color: #2563EB;
  
    background: #f8faff;
  
  }
  
  
  /* Email */
  
  .contact-action:nth-child(3) {
  
    border-color: #EA4335;
  
    background: #fffafa;
  
  }
  
  
  /* Instagram */
  
  .contact-action:nth-child(4) {
  
    border-color: #E1306C;
  
    background: #fff9fb;
  
  }
  
  
  /* =====================================
     MOBILE CONTACT
  ===================================== */
  
  @media (max-width: 700px) {
  
    .contact-section {
  
      padding: 40px 0 50px;
  
    }
  
  
    .contact-area {
  
      display: block;
  
      padding: 26px 16px;
  
    }
  
  
    .contact-copy {
  
      padding-right: 0;
  
      margin-bottom: 22px;
  
    }
  
  
    .contact-copy h2 {
  
      font-size: 31px;
  
    }
  
  
    .contact-copy p {
  
      font-size: 10px;
  
      line-height: 1.65;
  
      margin-top: 11px;
  
    }
  
  
    .contact-actions {
  
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
  
      gap: 8px;
  
    }
  
  
    .contact-action {
  
      min-height: 59px;
  
      padding: 9px;
  
      gap: 8px;
  
      font-size: 9px;
  
    }
  
  
    .contact-icon {
  
      width: 28px;
  
      height: 28px;
  
    }
  
  
    .contact-icon svg {
  
      width: 14px;
  
      height: 14px;
  
    }
  
  }
  
  /* =====================================
     FOOTER
  ===================================== */
  
  .site-footer {
  
    background:
      var(--black);
  
    color:
      #aaa39a;
  }
  
  
  .footer-grid {
  
    padding:
      48px 0 38px;
  
    display:
      grid;
  
    grid-template-columns:
      1.4fr
      1fr
      1fr
      1fr;
  
    gap:
      45px;
  }
  
  
  .footer-logo {
  
    color:
      white;
  
    font-family:
      Georgia,
      serif;
  
    font-size:
      27px;
  
    letter-spacing:
      .08em;
  }
  
  
  .footer-tagline {
  
    color:
      var(--gold-light);
  
    font-size:
      9px;
  
    letter-spacing:
      .16em;
  
    margin-top:
      6px;
  }
  
  
  .footer-brand p {
  
    max-width:
      270px;
  
    color:
      #79736a;
  
    font-size:
      10px;
  
    line-height:
      1.6;
  }
  
  
  .footer-grid h3 {
  
    color:
      var(--gold-light);
  
    font-size:
      9px;
  
    letter-spacing:
      .17em;
  
    margin:
      0 0 14px;
  }
  
  
  .footer-grid > div > a {
  
    display:
      block;
  
    margin-bottom:
      9px;
  
    font-size:
      10px;
  }
  
  
  .footer-grid > div > a:hover {
  
    color:
      white;
  }
  
  
  .footer-policy {
  
    display:
      block;
  
    border:
      0;
  
    background:
      transparent;
  
    padding:
      0;
  
    margin-bottom:
      9px;
  
    color:
      #aaa39a;
  
    font-size:
      10px;
  
    cursor:
      pointer;
  }
  
  
  .footer-policy:hover {
  
    color:
      white;
  }
  
  
  .footer-bottom {
  
    border-top:
      1px solid
      #2d2a25;
  
    padding:
      14px 0;
  
    color:
      #666158;
  
    font-size:
      9px;
  }
  
  
  .footer-bottom .container {
  
    display:
      flex;
  
    justify-content:
      space-between;
  }
  
  
  /* =====================================
     POLICY MODAL
  ===================================== */
  
  .modal {
  
    display:
      none;
  
    position:
      fixed;
  
    inset:
      0;
  
    z-index:
      500;
  
    align-items:
      center;
  
    justify-content:
      center;
  
    padding:
      18px;
  }
  
  
  .modal.open {
  
    display:
      flex;
  }
  
  
  .modal-backdrop {
  
    position:
      absolute;
  
    inset:
      0;
  
    background:
      rgba(0,0,0,.7);
  }
  
  
  .modal-card {
  
    position:
      relative;
  
    z-index:
      2;
  
    width:
      min(
        650px,
        100%
      );
  
    max-height:
      80vh;
  
    overflow:
      auto;
  
    background:
      var(--white);
  
    padding:
      35px;
  
    border:
      1px solid
      var(--line);
  }
  
  
  .modal-card > span {
  
    color:
      var(--gold);
  
    font-size:
      9px;
  
    letter-spacing:
      .2em;
  }
  
  
  .modal-card h2 {
  
    margin:
      7px 0 18px;
  
    font-family:
      Georgia,
      serif;
  
    font-size:
      34px;
  
    font-weight:
      400;
  }
  
  
  .modal-card p {
  
    color:
      var(--muted);
  
    font-size:
      12px;
  
    line-height:
      1.8;
  }
  
  
  .modal-close {
  
    position:
      absolute;
  
    right:
      12px;
  
    top:
      8px;
  
    border:
      0;
  
    background:
      transparent;
  
    font-size:
      28px;
  
    cursor:
      pointer;
  }
  
  
  /* =====================================
     RESPONSIVE
  ===================================== */
  
  @media (max-width: 1050px) {
  
    .product-grid {
  
      grid-template-columns:
        repeat(3, 1fr);
  
    }
  
  
    .pack-grid {
  
      grid-template-columns:
        repeat(3, 1fr);
  
    }
  
  
    .footer-grid {
  
      grid-template-columns:
        repeat(2, 1fr);
  
    }
  
  }
  
  
  @media (max-width: 700px) {
  
    .container {
  
      width:
        calc(100% - 18px);
  
    }
  
  
    /* HEADER */
  
    .site-header {
  
      height:
        62px;
  
    }
  
  
    .desktop-nav,
    .nav-button {
  
      display:
        none;
  
    }
  
  
    .mobile-menu {
  
      display:
        block;
  
    }
  
  
    .mobile-nav {
  
      position:
        fixed;
  
      top:
        62px;
  
      left:
        9px;
  
      right:
        9px;
  
      z-index:
        90;
  
      display:
        none;
  
      flex-direction:
        column;
  
      background:
        var(--black);
  
      border:
        1px solid #35312b;
  
    }
  
  
    .mobile-nav.open {
  
      display:
        flex;
  
    }
  
  
    .mobile-nav a {
  
      color:
        #c8c0b5;
  
      padding:
        13px;
  
      border-bottom:
        1px solid #2c2925;
  
      font-size:
        11px;
  
    }
  
  
    /* HERO */
  
    .hero {
  
      height:
        380px;
  
    }
  
  
    .hero-content {
  
      padding:
        0 20px;
  
      justify-content:
        center;
  
    }
  
  
    .hero h1 {
  
      font-size:
        43px;
  
    }
  
  
    .hero p {
  
      max-width:
        290px;
  
      font-size:
        10px;
  
    }
  
  
    /* HOME PRODUCTS */
  
    .section-heading {
  
      padding:
        45px 0 23px;
  
    }
  
  
    .section-heading h2 {
  
      font-size:
        31px;
  
    }
  
  
    .product-grid {
  
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
  
      gap:
        8px;
  
      padding-bottom:
        45px;
  
    }
  
  
    .product-card-content {
  
      padding:
        10px;
  
    }
  
  
    .product-card h3 {
  
      font-size:
        17px;
  
    }
  
  
    .product-card p {
  
      font-size:
        9px;
  
      min-height:
        55px;
  
    }
  
  
    /* PRODUCT DETAIL */
  
    .product-intro {
  
      display:
        block;
  
    }
  
  
    .product-detail-image {
  
      min-height:
        330px;
  
    }
  
  
    .product-detail-image img {
  
      min-height:
        330px;
  
    }
  
  
    .product-detail-info {
  
      padding:
        25px 18px;
  
    }
  
  
    .product-detail-info h1 {
  
      font-size:
        35px;
  
    }
  
  
    .detail-description {
  
      font-size:
        11px;
  
    }
  
  
    /* PACKS */
  
    .pack-section {
  
      padding-top:
        40px;
  
    }
  
  
    .pack-grid {
  
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
  
      gap:
        8px;
  
    }
  
  
    .pack-card {
  
      padding:
        9px 6px;
  
    }
  
  
    .pack-image {
  
      height:
        135px;
  
    }
  
  
    .pack-selling-price {
  
      font-size:
        17px;
  
    }
  
  
    .pack-mrp {
  
      font-size:
        9px;
  
    }
  
  
    .pack-saving {
  
      font-size:
        8px;
  
    }
  
  
    .discount-badge {
  
      width:
        36px;
  
      height:
        36px;
  
      font-size:
        8px;
  
    }
  
  
    /* CONTACT */
  
    .contact-box {
  
      padding:
        27px 20px;
  
      grid-template-columns:
        1fr;
  
      gap:
        22px;
  
    }
  
  
    .contact-box h2 {
  
      font-size:
        31px;
  
    }
  
  
    /* FOOTER */
  
    .footer-grid {
  
      grid-template-columns:
        1fr 1fr;
  
      gap:
        30px 20px;
  
    }
  
  
    .footer-brand {
  
      grid-column:
        1 / -1;
  
    }
  
  
    .footer-bottom .container {
  
      flex-direction:
        column;
  
      gap:
        6px;
  
    }
  
  
    .modal-card {
  
      padding:
        28px 18px;
  
    }
  
  }