* {
  /* font-family: "Cinzel Decorative", serif; */
  box-sizing: border-box;
  margin: 0;
}

a {
  text-decoration: none;
}

@font-face {
  font-family: "Malibu";
  src: url("/home_page/Malibu.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DK Cinnabar Brush";
  src: url("/home_page/DKCinnabarBrush.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Maboth";
  src: url("/home_page/Maboth.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.CinnabarFont {
  font-family: "DK Cinnabar Brush", serif !important;
}

.Malibu {
  font-family: "Malibu", serif !important;
}

.Maboth {
  font-family: "Maboth", serif !important;
}

.title {
  display: flex;
  justify-content: center;
  flex-direction: column;
  .with-underline {
    border-bottom: 1px solid #d3af35;
    width: 100%;
    padding-bottom: 1.313rem;
    margin: 0 auto;
  }
  h2 {
    font-family: "Baskervville BT", serif;
    font-weight: 400;
    font-style: normal;
    color: #000;
    font-size: 1.5rem;
    line-height: 100%;
    text-align: center;

    span {
      /* color: linear-gradient(
          140.22deg,
          #d4af37 6.65%,
          #6e5b1d 117.64%
        ); */
      color: #d4af37;

      font-style: italic;
    }
  }
}

.header-container {
  font-family: "Montserrat", sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 2rem;
  left: 2rem;
  right: 2rem;
  z-index: 100;
  height: 60px;
  box-shadow: -1px 1px 4px 0px #00000040;
  border-radius: 4.75rem;
  backdrop-filter: blur(2px);
  background: #00000021;
  padding: 2rem;

  .nav {
    display: flex;
    align-items: center;
    gap: 2rem;

    .ham-menu-button {
      display: none;
    }
    .contact-button {
      background-color: #d30f0f;
      border-radius: 40px;
      font-family: "Montserrat", sans-serif;
      font-weight: 500;
      font-size: 1rem;
      border: none;
      color: #fff;
      line-height: 100%;
      padding: 10px 15px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .nav-list {
      display: flex;
      align-items: center;
      gap: 2rem;
      list-style: none;
      color: #fff;
      font-weight: 500;

      li a {
        text-decoration: none;
        color: #fff;
      }
    }
  }
}

.hero-container {
  position: relative;
  /* height: 100vh; */

  height: 120vh;
  background-image: url("../images/hamster-strong-bg.png");
  background-size: cover;

  background-position: center;
  background-repeat: no-repeat;
  .hero-text-container {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;

    .hero-desc {
      font-family: Parisienne, serif;
      font-size: 4rem;
      line-height: 7rem;
      text-transform: capitalize;
      font-style: normal;
      color: #d4af37;
      margin-top: 2rem;
    }

    p {
      font-family: Playfair Display;
      font-weight: 400;
      font-style: Italic;
      font-size: 2.4rem;
      line-height: 5rem;
      text-transform: capitalize;
      color: #fff;
      display: inline;
      text-align: center;
      width: 65%;
      word-spacing: 0.6rem;
      letter-spacing: 2px;

      /* text-shadow: 0 0 0px rgba(255, 216, 77, 0.8),
        0 0 2px rgba(255, 216, 77, 0.7), 0 0 4px rgba(255, 200, 40, 0.6),
        0 0 10px rgba(255, 180, 30, 0.45); */
      text-shadow: 1px 4px 12.7px rgba(212, 175, 55, 0.8);

      span {
        color: #d4af37;
      }
    }
  }

  .hero-image {
    /* position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; */

    .hero-image-leaf {
      position: absolute;
      width: 180px;
      height: 150px;
      top: 40%;
      transform: translateX(-50%);
      left: 59%;
    }

    .center-orange-slice {
      position: absolute;
      bottom: 8%;
      transform: translateX(-50%);
      left: 58%;
      width: 200px;
      height: 200px;
    }
    .left-orange-slice {
      position: absolute;
      bottom: 10%;
      transform: rotate(10deg);
      transform: translateX(-50%);
      left: 39%;
      width: 190px;
      height: 210px;
    }
    .right-orange-slice {
      position: absolute;
      top: 60%;
      transform: rotate(10deg) translateX(-50%);
      left: 75%;
      width: 134px;
      height: 200px;
    }
    img {
      position: absolute;
      bottom: 0;
      /* width: 250px; */
      height: 110vh;
      transform: translateX(40%);
      left: 45%;

      object-fit: cover;
    }
  }

  .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      129.42deg,
      rgba(212, 175, 55, 0.42) 13.38%,
      rgba(160, 0, 0, 0.42) 86.79%
    );
  }
}

.about-container {
  /* min-height: 100vh; */
  padding: 2rem;
  .about-wrapper {
    .content-wrapper {
      margin-top: 2.5rem;
      padding: 0 6.125rem;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4rem;
      .content-image-wrapper {
        /* width: 45%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 17.75rem;
        height: 786px;
        width: 32.125rem;
        border-width: 2px;
        border-style: dashed;
        border-color: #d4af37;
        position: relative; */
        .content-image {
          position: relative;
          border-radius: 1rem;
          /* width: 28.5rem; */
          /* height: 700px; */

          .hamster-strong-image {
            position: absolute;
            top: -15%;
            transform: rotate(10deg);
            padding: 0 2rem;
            right: -5%;
            width: 100%;
            height: 750px;
          }

          img {
            border-radius: 1rem;
            width: 100%;
            height: 100%;
          }

          .content-image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
              129.42deg,
              rgba(212, 175, 55, 0.42) 13.38%,
              rgba(160, 0, 0, 0.42) 86.79%
            );
            box-shadow: 2px 4px 4px 0px #00000040;
            border-radius: 17.75rem;
          }
        }
      }
      .about-content {
        width: 55%;
        font-family: "Quicksand", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 1.063rem;
        line-height: 2rem;
        text-align: justify;

        button {
          background: linear-gradient(
            139.4deg,
            rgba(211, 15, 15, 0.7) -18.15%,
            rgba(109, 8, 8, 0.7) 110.26%
          );
          margin: 2.375rem auto;
          box-shadow: 4px 2px 4px 0px #00000040;
          border-radius: 40px;
          font-family: "Montserrat", sans-serif;
          font-weight: 700;
          font-size: 1.25rem;
          border: none;
          color: #fff;
          line-height: 2.188rem;
          padding: 0.688rem 1.75rem;
          display: flex;
          align-items: center;
          border: 1px solid #b05454;
          gap: 5px;
        }

        p {
          margin-bottom: 2rem;
          margin-top: 2rem;
        }
      }
    }
  }
}

.who-we-are-container {
  padding: 2.5rem;
  background-color: #800020;

  .who-we-are-wrapper {
    .who-we-are-content {
      margin-top: 3.625rem;
      display: flex;
      justify-content: center;
      align-items: center;
      /* gap: 2rem; */

      .who-we-are-content-image {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: end;
        gap: 1.375rem;
        img:first-child {
          width: 342px;
          height: 627px;
          border-radius: 30px;
          object-fit: cover;
        }

        img:last-child {
          width: 316px;
          height: 773px;
          border-radius: 30px;
          object-fit: cover;
        }
      }

      .who-we-are-content-text-wrapper {
        background-color: #fff;
        width: 50%;
        padding: 4rem 3.125rem;
        border-radius: 1rem;
        margin-left: -2rem;
        p {
          margin-top: 4.625rem;
          font-family: "Quicksand", sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 1.063rem;
          line-height: 2rem;
          text-align: justify;
          color: #000;
        }
      }
    }
  }
}

.our-brand-container {
  &.color-dark {
    background-color: #800020;
  }
  padding: 2.5rem;
  .our-brand-wrapper {
    .our-brand-content {
      margin-top: 3.625rem;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2rem;

      .our-brand-content-text {
        width: 50%;

        .with-underline {
          border-bottom: 1px solid #d3af35;
          width: 70%;
          padding-bottom: 1.313rem;
          margin: 0 auto;
        }
        h2 {
          text-align: center;
          font-family: "Libre Baskerville", serif;
          font-weight: 400;
          font-style: normal;
          font-size: 1.375rem;
          line-height: 100%;
        }
        p {
          margin-top: 2rem;
          text-align: center !important;
          font-family: "Quicksand", sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 1.063rem;
          line-height: 2rem;
          /* text-align: justify; */
          color: #000;
        }
      }
    }
  }
}

.slider-container {
  padding: 2rem 2rem;

  .slider-wrapper {
    display: flex;
    /* grid-template-columns: repeat(2, 1fr); */
    gap: 1.75rem;

    .left-grid {
      width: 60%;
      overflow: hidden;
      height: 850px;
      border-radius: 2rem;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.1);
      }
    }

    .right-grid {
      width: 40%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 1.75rem;

      &.grid-reverse {
        img {
          border-radius: 1rem;

          &:first-child {
            width: 100%;
            height: calc(550px - 1.75rem);

            object-fit: cover;
          }

          &:last-child {
            width: 100%;
            height: 300px;
            object-fit: cover;
          }
        }
      }
      img {
        border-radius: 1rem;

        &:first-child {
          width: 100%;
          height: 300px;
          object-fit: cover;
        }

        &:last-child {
          width: 100%;
          height: calc(550px - 1.75rem);
          object-fit: cover;
        }
      }
    }
  }
}

.news-container {
  padding: 2.5rem;

  .news-wrapper {
    .news-content {
      margin-top: 5.375rem;
      display: grid;
      grid-template-columns: repeat(4, 1fr);

      .news-item {
        padding: 0 1.5rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        border-right: 1px solid #0000004f;

        /* &:first-child {
          padding-left: 0;
        } */

        &:last-child {
          border-right: none;
          /* padding-right: 0; */
        }

        .news-data {
          display: flex;
          flex-direction: column;
          flex: 1;
          justify-content: space-between;
        }

        img {
          width: 100%;
          height: 368px;
          object-fit: cover;

          border-top-left-radius: 80px;
          border-top-right-radius: 80px;
        }
        div {
          display: flex;
          flex-direction: column;
          flex: 1;
          span {
            font-family: "Quicksand", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 0.875rem;
            line-height: 100%;
            color: #00000096;
          }

          h2 {
            margin-top: 0.75rem;
            font-family: "Libre Baskerville", serif;
            font-weight: 400;
            font-style: normal;
            font-size: 1.125rem;
            line-height: 100%;
          }

          p {
            margin-top: 0.75rem;
            font-family: "Quicksand", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 1rem;
            line-height: 2rem;
            text-align: justify;
            color: #000;
          }

          .link {
            text-align: end;
            a {
              margin-top: 0.75rem;
              text-decoration: underline;
              font-family: "Quicksand", sans-serif;
              font-weight: 400;
              font-style: normal;
              font-size: 0.875rem;
              line-height: 100%;
              color: #000;
              text-align: end;
              width: 100%;
            }
          }
        }
      }
    }
  }
}

.get-in-touch-container {
  &.color-dark {
    background-color: #800020;
  }
  padding: 2.5rem;
  .get-in-touch-wrapper {
    .get-in-touch-content {
      margin-top: 3.625rem;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2rem;

      .get-in-touch-content-image {
        padding: 8rem 0;
        width: 50%;
        position: relative;
        img {
          border-radius: 100%;
          aspect-ratio: 1;
          object-fit: cover;
          &:first-child {
            width: 338px;
            height: 338px;
            object-fit: cover;
          }

          &:nth-child(2) {
            position: absolute;
            height: 155px;
            width: 155px;
            top: -5%;
            left: 30%;
          }
          &:nth-child(3) {
            position: absolute;
            height: 175px;
            width: 175px;
            top: 10%;
            right: 20%;
          }
          &:nth-child(4) {
            position: absolute;
            height: 140px;
            width: 140px;
            top: 45%;
            right: 23%;
          }
          &:nth-child(5) {
            position: absolute;
            height: 155px;
            width: 155px;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }

      .get-in-touch-content-text {
        width: 50%;

        .with-underline {
          border-bottom: 1px solid #d3af35;
          width: 70%;
          padding-bottom: 1.313rem;
          margin: 0 auto;
        }
        h2 {
          text-align: center;
          font-family: "Libre Baskerville", serif;
          font-weight: 400;
          font-style: normal;
          font-size: 1.375rem;
          line-height: 100%;
        }
        p:first-of-type {
          margin-top: 1rem;
        }
        p {
          text-align: center;
          font-family: "Quicksand", sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 1.063rem;
          line-height: 2rem;
          color: #000;
        }

        button {
          background: linear-gradient(
            139.4deg,
            rgba(211, 15, 15, 0.7) -18.15%,
            rgba(109, 8, 8, 0.7) 110.26%
          );
          margin: 1rem auto;
          box-shadow: 4px 2px 4px 0px #00000040;
          border-radius: 40px;
          font-family: "Montserrat", sans-serif;
          font-weight: 700;
          font-size: 1.25rem;
          border: none;
          color: #fff;
          line-height: 2.188rem;
          padding: 0.688rem 1.75rem;
          display: flex;
          align-items: center;
          border: 1px solid #b05454;
          gap: 5px;
        }
      }
    }
  }
}

footer {
  padding: 2.5rem;
  background-color: #800020;

  .heading {
    font-family: "Libre Baskerville", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.125rem;
    color: #f2c600;
    text-decoration: underline;
    line-height: 100%;
  }

  .footer-wrapper {
    .footer-bottom {
      border-top: 1px solid #d4af3750;
      margin-top: 2rem;
      padding-top: 2rem;
      text-align: center;
      font-family: "Quicksand", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 18px;
      line-height: 141%;
      color: #fff;
    }
    a {
      text-decoration: none;
      color: inherit;
    }
    .footer-content {
      display: flex;
      gap: 4rem;

      .footer-content-left {
        width: 65%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
      }
      .footer-content-right {
        width: 35%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
      }
    }

    .footer-content-item {
      &.menu-items {
        p {
          font-family: "quicksand";
          font-weight: 400;
          font-style: normal;
          font-size: 1.125rem;
          line-height: 141%;
          letter-spacing: 0%;
          margin-top: 1rem;

          a {
            color: #fff;
          }
        }
      }

      .image-gallary {
        margin-top: 1.5rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        row-gap: 1rem;
        column-gap: 0.5rem;

        img {
          border-radius: 4px;
          height: 100%;
          aspect-ratio: 0.8;
          width: 100%;
          object-fit: cover;
        }
      }
      .footer-content-icons-wrapper {
        /* display: flex; */
        padding-top: 1.5rem;
        gap: 1rem;

        .icon-wrapper {
          padding-top: 1.5rem;
          display: flex;
          gap: 0.75rem;
        }
      }
      img {
        width: 100%;
      }
    }
  }
}

@media (max-width: 768px) {
  .header-container {
    .nav {
      .nav-list {
        display: none; /* Hide nav items by default on mobile */
        position: fixed;
        top: 100%;
        left: 0;
        width: 100%;
        height: 80vh;
        background-color: #800020;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        z-index: 1000;
        margin: 0;
        border-radius: 8px;
        padding: 0;
        list-style: none;

        li {
          opacity: 0;
          transform: translateY(20px);
          transition: opacity 0.3s ease, transform 0.3s ease;

          a {
            color: #fff;
            text-decoration: none;
            font-size: 1.5rem;
            transition: color 0.3s ease;

            &:hover {
              color: #d4af37;
            }
          }
        }

        &.active {
          display: flex;

          li {
            opacity: 1;
            transform: translateY(0);

            /* Staggered animation for menu items */
            &:nth-child(1) {
              transition-delay: 0.1s;
            }
            &:nth-child(2) {
              transition-delay: 0.2s;
            }
            &:nth-child(3) {
              transition-delay: 0.3s;
            }
            &:nth-child(4) {
              transition-delay: 0.4s;
            }
            &:nth-child(5) {
              transition-delay: 0.5s;
            }
            &:nth-child(6) {
              transition-delay: 0.6s;
            }
            &:nth-child(7) {
              transition-delay: 0.7s;
            }
          }
        }
      }

      .ham-menu-button {
        display: block; /* Show hamburger button only on mobile */
        z-index: 1001;
        cursor: pointer;
        border: 1px solid #ffffff50;
        display: flex;
        align-items: center;
        border-radius: 100%;
        justify-content: center;
        padding: 5px;
      }

      .hidden-button {
        display: none;
      }

      /* .contact-button {
        display: none; 
      } */
    }
  }

  /* Prevent scrolling when menu is open on mobile */
  body.menu-open {
    overflow: hidden;
    height: 100vh;
  }

  .hero-container {
    position: relative;
    height: 50vh;
    background-image: url("../images/hamster-strong-bg.png");

    background-size: cover;

    background-position: center;
    background-repeat: no-repeat;

    .hero-text-container {
      position: relative;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: flex-start;
      height: 100%;

      .hero-desc {
        font-family: Parisienne, serif;
        font-size: 1.5rem;
        line-height: 1rem;
        text-transform: capitalize;
        font-style: normal;
        color: #d4af37;
        /* margin-top: 2rem; */
        display: inline;
      }

      p {
        /* display: none; */
        font-family: Playfair Display;
        font-weight: 400;
        font-style: Italic;
        font-size: 0.8rem;
        line-height: 1rem;
        text-transform: capitalize;
        color: #fff;
        /* display: inline; */
        text-align: center;
        width: 70%;
        word-spacing: 2px;
        letter-spacing: 0px;

        /* text-shadow: 0 0 0px rgba(255, 216, 77, 0.8),
        0 0 2px rgba(255, 216, 77, 0.7), 0 0 4px rgba(255, 200, 40, 0.6),
        0 0 10px rgba(255, 180, 30, 0.45); */
        text-shadow: 1px 4px 12.7px rgba(212, 175, 55, 0.8);

        span {
          color: #d4af37;
        }
      }
    }

    .hero-image {
      /* position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; */

      .hero-image-leaf {
        position: absolute;
        width: 180px;
        height: 150px;
        top: 40%;
        transform: translateX(-50%);
        left: 59%;
      }

      .center-orange-slice {
        position: absolute;
        bottom: 8%;
        transform: translateX(-50%);
        left: 58%;
        width: 200px;
        height: 200px;
      }
      .left-orange-slice {
        position: absolute;
        bottom: 10%;
        transform: rotate(10deg);
        transform: translateX(-50%);
        left: 39%;
        width: 190px;
        height: 210px;
      }
      .right-orange-slice {
        position: absolute;
        top: 60%;
        transform: rotate(10deg) translateX(-50%);
        left: 75%;
        width: 134px;
        height: 200px;
      }
      img {
        position: absolute;
        bottom: 0;
        /* width: 250px; */
        height: 40vh;
        transform: translateX(-50%);
        left: 80%;

        object-fit: cover;
      }
    }

    .hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        129.42deg,
        rgba(212, 175, 55, 0.42) 13.38%,
        rgba(160, 0, 0, 0.42) 86.79%
      );
    }
  }
  .about-container {
    min-height: 100vh;
    padding: 0.5rem;
    .about-wrapper {
      .content-wrapper {
        margin-top: 2.5rem;
        flex-direction: column;
        padding: 0 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4rem;
        .content-image-wrapper {
          width: 100%;
          /* display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 17.75rem;
          height: 786px;
          padding: 0 1rem;
          border-width: 2px;
          border-style: dashed;
          border-color: #d4af37;
          position: relative;
          overflow: hidden; */

          .content-image {
            position: relative;
            border-radius: 17.75rem;
            /* width: 100%;
            height: 700px; */

            .hamster-strong-image {
              position: absolute;
              top: -10%;
              transform: rotate(10deg);
              padding: 0 2rem;
              right: -5%;
              width: 100%;
              height: 650px;
            }

            img {
              border-radius: 1rem;
              width: 100%;
              height: 100%;
            }

            .content-image-overlay {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: linear-gradient(
                129.42deg,
                rgba(212, 175, 55, 0.42) 13.38%,
                rgba(160, 0, 0, 0.42) 86.79%
              );
              box-shadow: 2px 4px 4px 0px #00000040;
              border-radius: 17.75rem;
            }
          }
        }
        .about-content {
          width: 100%;
          font-family: "Quicksand", sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 1.063rem;
          line-height: 2rem;
          text-align: justify;

          button {
            background: linear-gradient(
              139.4deg,
              rgba(211, 15, 15, 0.7) -18.15%,
              rgba(109, 8, 8, 0.7) 110.26%
            );
            margin: 4.375rem auto;
            box-shadow: 4px 2px 4px 0px #00000040;
            border-radius: 40px;
            font-family: "Montserrat", sans-serif;
            font-weight: 700;
            font-size: 1.25rem;
            border: none;
            color: #fff;
            line-height: 2.188rem;
            padding: 0.688rem 1.75rem;
            display: flex;
            align-items: center;
            border: 1px solid #b05454;
            gap: 5px;
          }

          p {
            margin-bottom: 2rem;
          }
        }
      }
    }
  }

  .who-we-are-container {
    padding: 0.5rem;
    background-color: #800020;

    .who-we-are-wrapper {
      .who-we-are-content {
        margin-top: 3.625rem;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        gap: 1rem;

        .who-we-are-content-image {
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: end;
          gap: 1.1rem;
          img:first-child {
            width: 100%;
            height: 100%;
            border-radius: 30px;
            object-fit: cover;
          }

          img:last-child {
            width: 100%;
            height: 100%;
            border-radius: 30px;
            object-fit: cover;
          }
        }

        .who-we-are-content-text-wrapper {
          background-color: #fff;
          width: 100%;
          padding: 1rem;
          border-radius: 1rem;
          margin-left: 0;
          p {
            margin-top: 1.5rem;
            font-family: "Quicksand", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 1.063rem;
            line-height: 2rem;
            text-align: justify;
            color: #000;
          }
        }
      }
    }
  }

  .our-brand-container {
    &.color-dark {
      background-color: #800020;
    }
    padding: 2.5rem;
    .our-brand-wrapper {
      .our-brand-content {
        margin-top: 3.625rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        flex-direction: column-reverse;

        .our-brand-content-image {
          img {
            width: 100%;
            height: 100%;
          }
        }

        .our-brand-content-text {
          width: 100%;

          .with-underline {
            border-bottom: 1px solid #d3af35;
            width: 70%;
            padding-bottom: 1.313rem;
            margin: 0 auto;
          }
          h2 {
            text-align: center;
            font-family: "Libre Baskerville", serif;
            font-weight: 400;
            font-style: normal;
            font-size: 1.375rem;
            line-height: 100%;
          }
          p {
            margin-top: 2rem;
            text-align: center;
            font-family: "Quicksand", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 1.063rem;
            line-height: 2rem;
            text-align: justify;
            color: #000;
          }
        }
      }
    }
  }

  .slider-container {
    padding: 0.5rem;

    .slider-wrapper {
      display: flex;
      /* grid-template-columns: repeat(2, 1fr); */
      gap: 1rem;
      flex-direction: column-reverse;

      .left-grid {
        width: 100%;
        overflow: hidden;
        height: 850px;
        border-radius: 2rem;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transform: scale(1.1);
        }
      }

      .right-grid {
        width: 100%;
        display: flex;
        flex-direction: row;
        /* flex-direction: column; */
        justify-content: space-between;
        gap: 1rem;

        &.grid-reverse {
          img {
            border-radius: 1rem;

            &:first-child {
              width: calc(50% - 0.5rem);
              height: 200px;
              object-fit: cover;
            }

            &:last-child {
              width: calc(50% - 0.5rem);
              height: 200px;
              object-fit: cover;
            }
          }
        }

        img {
          border-radius: 1rem;
          &:first-child {
            width: calc(50% - 0.5rem);
            height: 200px;
            object-fit: cover;
          }

          &:last-child {
            width: calc(50% - 0.5rem);
            height: 200px;
            object-fit: cover;
          }
        }
      }
    }
  }

  .news-container {
    padding: 0.5rem;

    .news-wrapper {
      .news-content {
        margin-top: 5.375rem;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;

        .news-item {
          padding: 0 1.5rem;
          width: 100%;
          display: flex;
          flex-direction: column;
          gap: 1rem;
          border-right: none;

          &:first-child {
            padding-left: 1.5rem;
          }

          &:last-child {
            border-right: none;
            padding-right: 1.5rem;
          }

          .news-data {
            display: flex;
            flex-direction: column;
          }

          img {
            width: 100%;
            height: 368px;
            object-fit: cover;

            border-top-left-radius: 80px;
            border-top-right-radius: 80px;
          }
          div {
            span {
              font-family: "Quicksand", sans-serif;
              font-weight: 400;
              font-style: normal;
              font-size: 0.875rem;
              line-height: 100%;
              color: #00000096;
            }

            h2 {
              margin-top: 0.75rem;
              font-family: "Libre Baskerville", serif;
              font-weight: 400;
              font-style: normal;
              font-size: 1.125rem;
              line-height: 100%;
            }

            p {
              margin-top: 0.75rem;
              font-family: "Quicksand", sans-serif;
              font-weight: 400;
              font-style: normal;
              font-size: 1rem;
              line-height: 2rem;
              text-align: justify;
              color: #000;
            }

            .link {
              text-align: end;
              a {
                margin-top: 0.75rem;
                text-decoration: underline;
                font-family: "Quicksand", sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 0.875rem;
                line-height: 100%;
                color: #000;
                text-align: end;
                width: 100%;
              }
            }
          }
        }
      }
    }
  }

  .get-in-touch-container {
    &.color-dark {
      background-color: #800020;
    }
    padding: 2.5rem;
    .get-in-touch-wrapper {
      .get-in-touch-content {
        margin-top: 3.625rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;

        .get-in-touch-content-image {
          padding: 8rem 0;
          width: 100%;
          position: relative;
          img {
            border-radius: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            &:first-child {
              width: 338px;
              height: 338px;
              object-fit: cover;
            }

            &:nth-child(2) {
              position: absolute;
              height: 155px;
              width: 155px;
              top: -8%;
              left: 10%;
            }
            &:nth-child(3) {
              position: absolute;
              height: 175px;
              width: 175px;
              top: 5%;
              right: -10%;
            }
            &:nth-child(4) {
              position: absolute;
              height: 140px;
              width: 140px;
              top: 45%;
              right: 23%;
              display: none;
            }
            &:nth-child(5) {
              position: absolute;
              height: 155px;
              width: 155px;
              bottom: 0;
              left: 20%;
              transform: translateX(-50%);
            }
          }
        }

        .get-in-touch-content-text {
          width: 100%;

          .with-underline {
            border-bottom: 1px solid #d3af35;
            width: 70%;
            padding-bottom: 1.313rem;
            margin: 0 auto;
          }
          h2 {
            text-align: center;
            font-family: "Libre Baskerville", serif;
            font-weight: 400;
            font-style: normal;
            font-size: 1.375rem;
            line-height: 100%;
          }
          p {
            /* margin-top: 2rem; */
            text-align: center;
            font-family: "Quicksand", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 1.063rem;
            line-height: 2rem;
            color: #000;
          }

          button {
            background: linear-gradient(
              139.4deg,
              rgba(211, 15, 15, 0.7) -18.15%,
              rgba(109, 8, 8, 0.7) 110.26%
            );
            margin: 1rem auto;
            box-shadow: 4px 2px 4px 0px #00000040;
            border-radius: 40px;
            font-family: "Montserrat", sans-serif;
            font-weight: 700;
            font-size: 1.25rem;
            border: none;
            color: #fff;
            line-height: 2.188rem;
            padding: 0.688rem 1.75rem;
            display: flex;
            align-items: center;
            border: 1px solid #b05454;
            gap: 5px;
          }
        }
      }
    }
  }

  footer {
    padding: 2.5rem;
    background-color: #800020;

    .heading {
      font-family: "Libre Baskerville", serif;
      font-weight: 400;
      font-style: normal;
      font-size: 1.125rem;
      color: #f2c600;
      text-decoration: underline;
      line-height: 100%;
    }

    .footer-wrapper {
      .footer-bottom {
        border-top: 1px solid #d4af3750;
        margin-top: 2rem;
        padding-top: 2rem;
        text-align: center;
        font-family: "Quicksand", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 18px;
        line-height: 141%;
        color: #fff;
      }
      .footer-content {
        display: flex;
        flex-direction: column;
        gap: 4rem;

        .footer-content-left {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          gap: 1rem;
        }
        .footer-content-right {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 1rem;
        }
      }

      .footer-content-item {
        &.menu-items {
          p {
            font-family: "Quicksand";
            font-weight: 400;
            font-style: normal;
            font-size: 1.125rem;
            line-height: 141%;
            letter-spacing: 0%;
            margin-top: 1rem;

            a {
              color: #fff;
            }
          }
        }

        .image-gallary {
          margin-top: 1.5rem;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          row-gap: 1rem;
          column-gap: 0.5rem;

          img {
            border-radius: 4px;
            height: 100%;
            aspect-ratio: 0.8;
            width: 100%;
            object-fit: cover;
          }
        }
        .footer-content-icons-wrapper {
          /* display: flex; */
          padding-top: 1.5rem;
          gap: 1rem;

          .icon-wrapper {
            padding-top: 1.5rem;
            display: flex;
            gap: 0.75rem;
          }
        }
        img {
          width: 100%;
        }
      }
    }
  }
}

.products-section {
  margin: 3rem 0;
  .title {
    h2 {
      /* font-family: "DK Cinnabar Brush", serif !important; */
      margin: 3rem 0;
    }
  }
}

/* Form container */
.get-in-touch-form {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  margin: 0 auto;
  font-family: "Montserrat", sans-serif;
}

/* Inputs */
.get-in-touch-form input {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  background: transparent;
  border-radius: 8px;
  font-size: 1rem;
  color: #fff;
  outline: none;
  transition: all 0.3s ease;
  margin-bottom: 1.2rem;
  box-sizing: border-box;
}

/* Placeholder styling */
.get-in-touch-form input::placeholder {
  color: rgba(255, 255, 255, 0.8);
}

/* Focus effect */
.get-in-touch-form input:focus {
  border-color: #d4af37; /* gold accent */
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.3);
}

/* Date input container */
.dob-container {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* Make all small date boxes equal size */
.dob-container input {
  flex: 1;
  margin-bottom: 0;
}

.hasmter-image-grid {
  display: grid;
  grid-template-columns: calc(40% - 0.75rem) calc(60% - 0.75rem);
  gap: 1.5rem;
  width: 100%;
  /* height: 100vh; */
  padding: 1rem;
}

/* Left section: large image */

.left-section {
  position: relative;
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.image-wrapper img,
.image-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

/* ✅ Text overlay with blurred background */
.image-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem;
  backdrop-filter: blur(10px); /* Blurred background */
  /* background: rgba(0, 0, 0, 0.4); */
  /* Slight transparency */
  border-radius: 0 0 1rem 1rem;
  color: #fff;
}

.image-text p {
  font-size: 1rem;
  /* opacity: 0.9; */
  line-height: 1.5rem;
  text-align: center;
  font-family: "Quicksand", sans-serif;
}

.image-text h6 {
  font-size: 1.2rem;
  text-align: center;
}

/* Right section: 2 rows × 3 columns */
.right-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1.5rem;
  height: 100%;
}

.with-two-cols {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

/* .with-two-cols img {
  height: 50vh !important;
} */

.right-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

.product-video {
  height: 100vh !important;
}

/* Responsive: stack on smaller screens */
@media (max-width: 900px) {
  .hasmter-image-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .right-section {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-template-rows: auto;
  }

  .right-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
  }
  /* .image-wrapper img,
  .image-wrapper video {
    height: 100%;
  } */

  /* .right-section img {
    height: 100%;
  } */
  /* .with-two-cols img {
    height: 200px !important;
  } */

  .product-video {
    height: auto !important;
  }
  .image-text p {
    font-size: 0.9rem;
  }
  .image-text h6 {
    font-size: 1rem;
    text-align: center;
  }
}