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

/* * {
  outline: 1px solid red;
} */

.home{
  background-position: bottom;
  background-color: #f8f9fa;
  height: 100vh;
  width: 100%;
  position: relative;
  background: linear-gradient(120deg, #fdfdfd, #f8f9fa);
  overflow: hidden;
}

@media (min-width: 481px) and (max-width: 786px) {
  .home {
    background-position: bottom;
    background-color: #f8f9fa;
    height: 100vh;
    width: 100%;
    position: relative;
    background: linear-gradient(120deg, #fdfdfd, #f8f9fa);
    overflow: hidden;
  }
}

@media (min-width: 1920px) {
  .home {
      background-position: bottom;
      background-color: #f8f9fa;
      height: 100vh;
      width: 100%;
      position: relative;
      background: linear-gradient(120deg, #fdfdfd, #f8f9fa);
      overflow: hidden; }
}

.home::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -20%;
  width: 60%;
  height: 120%;
  background: radial-gradient(circle at center, rgba(0, 61, 122, 0.08), transparent 70%);
  z-index: 0;
}

@media (max-width: 480px){
  .home {
      background-position: bottom;
      background-color: #f8f9fa;
      height: 600px;
      width: 100%;
      position: relative;
      background: linear-gradient(120deg, #fdfdfd, #f8f9fa);
      overflow: hidden; }

.home::before {
    content: "";
    position: absolute;
    top: -10%;
    right: -20%;
    width: 60%;
    height: 120%;
    background: radial-gradient(circle at center, rgba(0, 61, 122, 0.08), transparent 70%);
    z-index: 0; }
}

a{
  width: fit-content;
  text-decoration: none;
  color: #4A5A72;
  transition: color 0.3s ease;
}

.title{
  width: fit-content;
  color: #0B1F3F; 
  font-family: Georgia, 'Times New Roman', Times, serif ; 
  text-align: left;
  font-size: 2.8rem;
  margin-bottom: 3rem;
  z-index: 1;
  margin-left: 5vw;
  margin-top: -0.6rem;
}

@media (min-width: 481px) and (max-width: 786px){
  .title {
      width: fit-content;
      color: #0B1F3F;
      font-family: Georgia, 'Times New Roman', Times, serif;
      text-align: left;
      font-size: 2.8rem;
      margin-bottom: 3rem;
      z-index: 1;
      margin-left: 9vw;
      margin-top: -0.6rem; }
}

@media (min-width: 1920px){
  .title {
      font-size: 4rem;
      margin-bottom: 3rem;
      z-index: 1;
      margin-left: 5vw;
      margin-top: -0.6rem; }
}

@media (max-width: 480px) {
  .title {
    font-size: 5.6vw;
    top: 3vh;
    margin-left: 4vw;
  }
}

.titleGroup{
  text-align: justify;
  width: fit-content;
}

.start{
  width: fit-content;
  font-size: 1rem;
    z-index: 1;
    margin-left: 7rem;
      margin-top: -3rem;
}

@media (min-width: 1920px) {
  .start {
      font-size: 1.5rem;
      z-index: 1;
      margin-left: 9.5rem;
      margin-top: -3rem; }
}

@media (max-width: 480px) {
  .start {
    font-size: 3vw;
    top: 3vh;
    margin-left: 4vw;
  }
}

.line1,
.line {
  width: 100%;
  max-width: 100vw;
  height: 0.1rem;
  background-color: #0b2545;
  margin: 1rem auto;
  /* centers it horizontally */
  border-radius: 0.1rem;
  opacity: 0.8;
}

@media (min-width: 1920px) {
  .line1,
    .line {
      width: 100%;
      max-width: 100vw;
      height: 0.1rem;
      background-color: #0b2545;
      margin: 1rem auto;
      /* centers it horizontally */
      border-radius: 0.1rem;
      opacity: 0.8; }
}

.return {
  font-size: 1.6rem;
  font-family: Georgia, 'Times New Roman', Times, serif;
  display: flex;
  gap: 5rem;
  margin-left: 35vw;
  margin-top: -5rem;
  width: 5rem;
}

@media (min-width: 1920px) {
  .return {
      font-size: 2rem;
      font-family: Georgia, 'Times New Roman', Times, serif;
      display: flex;
      gap: 5rem;
      margin-left: 35vw;
      margin-top: -6rem;
      width: 5rem; }

}

.return:hover {
  color: #0077cc;
}

@media (max-width: 480px) {
  .return {
      width: fit-content;
      font-size: 0.8rem;
      font-family: Georgia, 'Times New Roman', Times, serif;
      display: flex;
      gap: 5rem;
      margin-left: 10rem;
      margin-top: -3.9rem;
      margin-bottom: 10rem; }
}

@media (min-width: 481px) and (max-width: 786px){
  .return {
      font-size: 1.6rem;
      font-family: Georgia, 'Times New Roman', Times, serif;
      display: flex;
      gap: 5rem;
      margin-left: 46vw;
      margin-top: -5rem;
      width: 5rem; }
}

.mixers{
  font-size: 1.6rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
    display: flex;
    gap: 5rem;
    position: relative;
    top: -35px;
    left: 1300px;
}

.mixers:hover {
  color: #0077cc;
}

@media (max-width: 480px){
  .malayalam {
      width: fit-content;
      font-size: 0.8rem;
      font-family: Georgia, 'Times New Roman', Times, serif;
      display: flex;
      gap: 5rem;
      position: relative;
        top: -175px;
        left: 315px;
    }
}

.hindi {
  font-size: 1.6rem;
  font-family: Georgia, 'Times New Roman', Times, serif;
  display: flex;
  gap: 5rem;
  position: relative;
  top: -65px;
  left: 1200px;
}

.hindi:hover {
  color: #0077cc;
}

@media (max-width: 480px) {
  .hindi {
    width: fit-content;
    font-size: 0.8rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
    display: flex;
    gap: 5rem;
    position: relative;
    top: -190px;
    left: 270px;
  }
}

.sanitary{
  width: fit-content;
    font-size: 3rem;
      font-weight: 600;
      line-height: 1.2;
      color: #0b2545;
      letter-spacing: -0.5px;
      margin-bottom: 0.5em;
      font-family: 'Playfair Display', serif;
      opacity: 0;
        animation: fadeUp 1.2s ease forwards 0.5s;
      margin-left: 20vh;
      margin-top: 10vw;
}

@media (min-width: 1920px) {
  .sanitary {
      font-size: 4.5rem;
      margin-left: 20vh;
      margin-top: 10vw;
    }

}

@media (min-width: 481px) and (max-width: 786px){
  .sanitary {
      font-size: 2rem;
      margin-left: 13vw;
      margin-top: 10vw;
    }
}

@media (max-width: 480px) {
  .sanitary {
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.2;
      /* color: #003d7a; */
      color: #0b2545;
      letter-spacing: -0.5px;
      margin-bottom: 0.5em;
      font-family: 'Playfair Display', serif;
      opacity: 0;
      animation: fadeUp 1.2s ease forwards 0.5s;
      margin-left: 2rem;
      margin-top: -3rem;
    }
}

.main{
  width: fit-content;
}

.tagline{
  width: fit-content;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.2;
    color: #132c4a;
    letter-spacing: -0.5px;
    margin-bottom: 0.5em;
    font-family: 'Playfair Display', serif;
    opacity: 0;
    animation: fadeUp 1.2s ease forwards 0.5s;
    margin-left: 15vw;
}

@media (min-width: 1920px) {
  .tagline {
      font-size: 2.2rem;
      margin-bottom: 0.5em;
      margin-left: 15vw;
    }
}


@media (max-width: 480px) {
  .tagline {
      font-size: 1.2rem;
      font-weight: 600;
      line-height: 1.2;
      color: #132c4a;
      letter-spacing: -0.5px;
      margin-bottom: 0.5em;
      font-family: 'Playfair Display', serif;
      opacity: 0;
      animation: fadeUp 1.2s ease forwards 0.5s;
      margin-left: 5rem;
    }
}

.location{
    width: fit-content;
    color: #6b4b28;
    font-family: 'Playfair Display',
      serif;
    font-size: 2rem;
    opacity: 0;
    animation: fadeUp 1.2s ease forwards 0.8s;
    margin-bottom: 2.5em;
    text-align: justify;
    margin-left: 10rem;
    margin-top: 4rem;
}

@media (min-width: 1920px) {
  .location {
      font-size: 2rem;
      margin-bottom: 2.5em;
      text-align: justify;
      margin-left: 18rem;
      margin-top: 4rem;
    }
}

@media (max-width: 480px){
  .location {
      color: #6b4b28;
      font-family: 'Playfair Display',
        serif;
      font-size: 3.7vw;
      opacity: 0;
      animation: fadeUp 1.2s ease forwards 0.8s;
      margin-bottom: 2.5em;
      text-align: justify;
      margin-left: 17vw;
        margin-top: 3rem;
    }
}

@media (min-width: 481px) and (max-width: 786px){
  .location {
      color: #6b4b28;
      font-family: 'Playfair Display',
        serif;
      font-size: 3.7vw;
      opacity: 0;
      animation: fadeUp 1.2s ease forwards 0.8s;
      margin-bottom: 2.5em;
      text-align: justify;
      margin-left: 13vw;
      margin-top: 5rem;
    }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.catalogue{
  width: fit-content;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    opacity: 0;
      animation: fadeUp 1.2s ease forwards 1.1s;
      border: 1.5px solid #ffffff;
      border-radius: 1rem;
        color: #ffffff;
        background: transparent;
        padding: 0.9em 2.2em;
        font-size: 1rem;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        position: absolute;
        left: 43vw;
        /* margin-left: 1rem; */
        margin-top: 2rem;
}

@media (min-width: 1920px) {
  .catalogue {
      padding: 0.9em 2.2em;
      font-size: 1.4rem;
      letter-spacing: 1px;
      transition: all 0.3s ease;
      position: absolute;
      left: 43vw;
      margin-top: 2rem;
    }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.picture {
  position: absolute;
  left: 30rem;
  top: 8rem;
  width: 55%;
  height: 60vh;
  border-radius: 1.2rem;
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.08);
  /* overflow: hidden; */
  animation: floatIn 2s ease-out forwards;
  opacity: 0;
  animation-delay: 0.5s;
}

@media (min-width: 1920px) {
  .picture {
      position: absolute;
      left: 40rem;
      top: 12rem;
      width: 50%;
      height: 55vh;

}
}

@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.15));
}

@media (max-width: 480px) {
  .picture {
      width: 10rem;
      height: 8rem;
      margin-top: 4rem;
      margin-left: -26rem;
      z-index: 1;
      border-radius: 1.2rem;
      box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.08);
      /* overflow: hidden; */
      animation: floatIn 2s ease-out forwards;
      opacity: 0;
      animation-delay: 0.5s; }

    .picture::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.15));
    }
}

@media (min-width: 481px) and (max-width: 786px){
  .picture {
      width: 20rem;
      height: 18rem;
      margin-top: 10rem;
      margin-left: -26rem;
      z-index: 1;
      border-radius: 1.2rem;
      box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.08);
      /* overflow: hidden; */
      animation: floatIn 2s ease-out forwards;
      opacity: 0;
      animation-delay: 0.5s;
    }
  
    .picture::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.15));
    }
}

/* ################################################################## */

.Pmain{
  width: fit-content;
}
.introduction{
  background-position: bottom;
    background-color: #f9f9f9;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
}

.introduction::after {
  content: "";
  display: block;
  width: 5rem;
  height: 0.1rem;
  background-color: #C8A964;
  /* soft gold accent */
  margin-left: 20rem;
  margin-top: 2rem;
}

@media (min-width: 1920px) {

  .introduction {
      background-position: bottom;
      background-color: #f9f9f9;
      height: 100dvh;
      width: 100%;
      overflow: hidden; }

  .introduction::after {
      content: "";
      display: block;
      width: 7rem;
      height: 0.1rem;
      background-color: #C8A964;
      /* soft gold accent */
      margin-left: 25rem;
      margin-top: 2rem; }
}

.primemix{
  width: fit-content;
  font-size: clamp(2.5rem, 3vw, 5rem);
    letter-spacing: 0.15em;
    font-weight: 400;
    text-transform: uppercase;
    font-family: 'Playfair Display', serif;
    color:#1C1C1C;
    padding-left: 6rem;
    padding-top: 6rem;
    margin-bottom: 2rem;
}

@media (min-width: 1920px) {
  .primemix {
      font-size: 3.8rem;
      padding-left: 10rem;
      padding-top: 6rem;
      margin-bottom: 2rem; }
}

.PMstory{
  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #3a3a3a;
    max-width: 40rem;
    margin-left: 5.8rem;
    text-align: justify;
}

.PMstory strong{
  font-weight: 600;
    color: #000;
}

@media (min-width: 1920px) {
  .PMstory {
      font-family: "Avenir Next", "Helvetica Neue", sans-serif;
      font-size: 1.4rem;
      line-height: 1.8;
      color: #3a3a3a;
      max-width: 46rem;
      margin-left: 10rem;
      margin-top:6rem;
      text-align: justify; }
}

@media (prefers-reduced-motion: no-preference) {
  .introduction {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s ease forwards;
    animation-delay: 0.3s;
  }

  @keyframes fadeUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.PM-explore {
  top: 9rem;
  left: 15rem;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  opacity: 0;
  animation: fadeUp 1.2s ease forwards 1.1s;
  border: 1.5px solid #0b2545;
  color: #0b2545;
  background: transparent;
  padding: 0.9em 2.2em;
  font-size: 1rem;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  position: relative;
}

.PM-explore::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #0b2545;
  transition: width 0.3s ease;
  z-index: -1;
}

.PM-explore:hover::after {
  width: 100%;
}

.PM-explore:hover {
  background-color: #003d7a;
  color: #fff;
}

@media (min-width: 1920px) {
  .PM-explore {
      top: 12rem;
      left: 18rem;
      padding: 0.9em 2.2em;
      font-size: 1.5rem;
      letter-spacing: 1px;
      transition: all 0.3s ease;
      position: relative;
    }
}

.box {
  padding: 1rem;
  border: 0.1rem solid #f1ab28;
  width: 3.14rem;
  height: 3.14rem;
  background-color: #f1ab28;
  position: absolute;
  left: 60.6rem;
  top: 15.62rem;
}

.box h1 {
  position: relative;
  top: -0.5rem;
  font-size: 2rem;
}

.box1 {
  padding: 1rem;
  border: 0.1rem solid #f1ab28;
  width: 3.14rem;
  height: 3.14rem;
  position: absolute;
  left: 63.75rem;
  top: 15.625rem;
}

.box1 h1 {
  position: relative;
  top: -0.5625rem;
  left: -0.4375rem;
  font-size: 2rem;
}

.boxText {
  position: absolute;
  left: 67.5rem;
  top: 15.99rem;
  font-size: 2rem;
}

#PMwave {
  position: absolute;
    left: 66.8rem;
    top: 17.9rem;
}

.reg1 {
  position: absolute;
  left: 76.25rem;
  top: 15.59rem;
}

@media (min-width: 1920px) {
  .box {
      padding: 1rem;
      border: 0.1rem solid #f1ab28;
      width: 3.5rem;
      height: 3.5rem;
      background-color: #f1ab28;
      position: absolute;
      left: 80.6rem;
      top: 18rem;
    }
  
    .box h1 {
      position: relative;
      top: -0.5rem;
      font-size: 2rem;
    }
  
    .box1 {
      padding: 1rem;
      border: 0.1rem solid #f1ab28;
      width: 3.5rem;
      height: 3.5rem;
      position: absolute;
      left: 84.1rem;
      top: 18rem;
    }
  
    .box1 h1 {
      position: relative;
      top: -0.5625rem;
      left: -0.4375rem;
      font-size: 2rem;
    }
  
    .boxText {
      position: absolute;
      left: 88rem;
      top: 18.6rem;
      font-size: 2rem;
    }
  
    #PMwave {
      position: absolute;
      left: 87.5rem;
      top: 20.7rem;
    }
  
    .reg1 {
      position: absolute;
      left: 96.8rem;
      top: 18.3rem; }
}

/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
@media (max-width: 480px){
  .introduction {
      background-position: bottom;
      background-color: #fff;
      height: 43.75rem;
      width: 100vw; }

  .primemix {
      font-size: clamp(1.8rem, 3vw, 20rem);
      letter-spacing: 0.15em;
      font-weight: 400;
      text-transform: uppercase;
      font-family: 'Playfair Display', serif;
      color: #1C1C1C;
      padding-top: 3rem;}

    .PMstory {
        font-family: "Avenir Next", "Helvetica Neue", sans-serif;
        font-size: 3.5vw;
        line-height: 1.8;
        color: #3a3a3a;
        max-width: 80vw;
        margin-left: 2rem;
        text-align: justify;
        padding-top: 6.25rem;}

                .box {
                  padding: 1rem;
                  border: 0.1rem solid #f1ab28;
                  width: 1.563rem;
                  height: 1.563rem;
                  background-color: #f1ab28;
                  margin-left: -55rem;
                  margin-top: -9rem;}
.box h1 {
  margin-top: -6px;
  margin-left: -6px;
  font-size: 1.5rem;
}

.box1 {
  padding: 1rem;
  border: 0.1rem solid #f1ab28;
  width: 1.563rem;
  height: 1.563rem;
  margin-left: -56rem;
  margin-top: -9.01rem;
}

.box1 h1 {
  margin-top: -6px;
  margin-left: -3px;
  font-size: 1.5rem;
}

.boxText {
  margin-left: -57.2rem;
    margin-top: -9.3rem;
    font-size: 1.5rem;
}

#PMwave {
  position: absolute;
    left: 9.9rem;
    top: 8rem;
    width: 120px;
}

.reg1 {
  margin-left: -59rem;
    margin-top: -9.2rem;
}
      
                .introduction::after {
                  /* soft gold accent */
                  margin-left: 40vw;
                  margin-top: 2rem;       }
                                    .PM-explore {  
                                      margin-left: -11rem;
                                      padding: 0.8em 3em;                    
                                      font-size: 1rem;  }
}


@media (min-width: 481px) and (max-width: 786px){
  .introduction {
      background-position: bottom;
      background-color: #fff;
      height: 1024px;
      width: 100%;
    }
  
    .primemix {
      font-size: clamp(1.8rem, 3.5rem, 20rem);
      letter-spacing: 0.15em;
      font-weight: 400;
      text-transform: uppercase;
      font-family: 'Playfair Display', serif;
      color: #1C1C1C;
      padding-top: 3rem;
      padding-left: 12rem;
    }
  
    .PMstory {
      font-family: "Avenir Next", "Helvetica Neue", sans-serif;
      font-size: 3.5vw;
      line-height: 1.8;
      color: #3a3a3a;
      max-width: 80vw;
      margin-left: 2rem;
      text-align: justify;
      padding-top: 13rem;
      padding-left: 3rem;
    }
  
    .box {
      padding: 1rem;
      border: 0.1rem solid #f1ab28;
      width: 3.5rem;
      height: 3.5rem;
      background-color: #f1ab28;
      margin-left: -45rem;
      margin-top: -3rem;
    }
  
    .box h1 {
      position: relative;
        top: -0.5rem;
        font-size: 2.4rem;
    }

  
        .box1 {
          padding: 1rem;
          border: 0.1rem solid #f1ab28;
          width: 3.5rem;
          height: 3.5rem;
          position: absolute;
          left: 19.1rem;
          top: 12.61rem;
        }
    
        .box1 h1 {
          position: relative;
          top: -0.4rem;
          left: -0.3rem;
          font-size: 2rem;
        }
    
        .boxText {
          position: absolute;
          left: 23rem;
          top: 13.2rem;
          font-size: 2rem;
        }
    
        #PMwave {
          position: absolute;
          left: 22.49rem;
          top: 15.3rem;
        }
    
        .reg1 {
          position: absolute;
          left: 32rem;
          top: 12.5rem;
        }

        .introduction::after {
          content: "";
          display: block;
          width: 9rem;
          height: 0.1rem;
          background-color: #C8A964;
          /* soft gold accent */
          margin-left: 40vw;
            margin-top: 2rem;
        }
  
    .PM-explore {
      margin-left: -3rem;
      padding: 0.8em 5em;
      font-size: 1.3rem;
    }
}
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
.product{
  background-position: bottom;
    background-color: #fffdfd;
    min-height: 100vh;
    width: 100vw;
}

.prime{
  padding-top: 100px;
  margin-left:100px;
  font-size: 50px;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

.regen{
  height: 100vh;
    width: 100vw;
    background-position: bottom;
      background-color: #fff;
}

.regen::after {
  content: "";
  display: block;
  width: 5rem;
  height: 0.1rem;
  background-color: #C8A964;
  /* soft gold accent */
  margin-left: 60rem;
  margin-top: 2rem;
}

.RB-title{
  font-size: clamp(2.5rem, 3vw, 5rem);
    letter-spacing: 0.15em;
    font-weight: 400;
    text-transform: uppercase;
    font-family: 'Playfair Display', serif;
    color: #1C1C1C;
    padding-left:43.75rem;
    padding-top: 6.25rem;
    margin-bottom: 2rem;
}

@media (min-width: 1920px) {
  .regen {
      height: 100vh;
      width: 100%;
      background-position: bottom;
      background-color: #fff; }

  .RB-title {
    width: fit-content;
    font-size: clamp(2.5rem, 3vw, 5rem);
    letter-spacing: 0.15em;
    font-weight: 400;
    text-transform: uppercase;
    font-family: 'Playfair Display', serif;
    color: #1C1C1C;
    padding-left: 60rem;
    padding-top: 6.25rem;
    margin-bottom: 2rem;
  }
}

.RBstory{
  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #3a3a3a;
    max-width: 43.75rem;
    margin-left: 43.75rem;
    text-align: justify;
}

.RBstory strong {
  font-weight: 600;
  color: #000;
}

@media (min-width: 1920px) {
  .RBstory {
      font-family: "Avenir Next", "Helvetica Neue", sans-serif;
      font-size: 1.5rem;
      line-height: 1.8;
      color: #3a3a3a;
      max-width: 50rem;
      margin-left: 60rem;
      text-align: justify; }
}

.RB-explore {
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  opacity: 0;
  animation: fadeUp 1.2s ease forwards 1.1s;
  border: 1.5px solid #0b2545;
  color: #0b2545;
  background: transparent;
  padding: 0.9em 2.2em;
  font-size: 1rem;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  position: relative;
  left: 55rem;
  top: 10rem;
}

.RB-explore::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #0b2545;
  transition: width 0.3s ease;
  z-index: -1;
}

.RB-explore:hover::after {
  width: 100%;
}

.RB-explore:hover {
  background-color: #003d7a;
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .regen {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s ease forwards;
    animation-delay: 0.3s;
  }

  @keyframes fadeUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.box2 {
  padding: 16px;
  border: 4px solid #f12a2a;
  width: 60px;
  height: 50px;
  position: absolute;
  left: 200px;
  top: 1700px;
}

.box3 {
  padding: 16px;
  border: 4px solid #f12a2a;
  width: 60px;
  height: 50px;
  position: absolute;
  left: 265px;
  top: 1700px;
}

.box4 {
  padding: 16px;
  border: 4px solid #f12a2a;
  width: 60px;
  height: 50px;
  position: absolute;
  left: 200px;
  top: 1755px;
}

.box5 {
  padding: 16px;
  border: 4px solid #f12a2a;
  width: 60px;
  height: 50px;
  position: absolute;
  left: 265px;
  top: 1755px;
}

.box6 {
  padding: 16px;
  border: 0px solid #f12a2a;
  width: 70px;
  height: 70px;
  position: absolute;
  left: 225px;
  top: 1720px;
  background-color: white;
}

.box6 h1 {
  position: absolute;
  left: 5px;
  top: 10px;
  color: #f12a2a;
  font-size: 2.8rem;
}

.box6Text {
  position: absolute;
  left: 170px;
  top: 1820px;
  color: #f12a2a;
  font-size: 1.6rem;
}

.reg2 {
  position: absolute;
  left: 330px;
  top: 1690px;
}

@media (min-width: 1920px) {
  .box2 {
      padding: 16px;
      border: 4px solid #f12a2a;
      width: 80px;
      height: 70px;
      position: absolute;
      left: 13.58rem;
      top: 148rem;
    }
  
    .box3 {
      padding: 16px;
      border: 4px solid #f12a2a;
      width: 80px;
      height: 70px;
      position: absolute;
      left: 19rem;
      top: 148rem;
    }
  
    .box4 {
      padding: 16px;
      border: 4px solid #f12a2a;
      width: 80px;
      height: 70px;
      position: absolute;
      left: 19rem;
      top: 152.6rem;
    }
  
    .box5 {
      padding: 16px;
      border: 4px solid #f12a2a;
      width: 80px;
      height: 70px;
      position: absolute;
      left: 13.58rem;
      top: 152.6rem;
    }
  
    .box6 {
      padding: 16px;
      border: 0px solid #f12a2a;
      width: 100px;
      height: 80px;
      position: absolute;
      left: 15.7rem;
      top: 149.9rem;
      background-color: white;
    }
  
    .box6 h1 {
      text-align: center;
      color: #f12a2a;
      font-size: 4rem;
    }
  
    .box6Text {
      position: absolute;
      left: 10rem;
      top: 158rem;
      color: #f12a2a;
      font-size: 2.6rem;
    }
  
    .reg2 {
      position: absolute;
      left: 24rem;
      top: 147rem;}
}

@media (min-width: 1920px) {
  .regen::after {
      content: "";
      display: block;
      width: 7rem;
      height: 0.1rem;
      background-color: #C8A964;
      /* soft gold accent */
      margin-left: 80rem;
      margin-top: 2rem; }

            .RB-explore {
              font-family: 'Montserrat', sans-serif;
              cursor: pointer;
              opacity: 0;
              animation: fadeUp 1.2s ease forwards 1.1s;
              border: 1.5px solid #0b2545;
              color: #0b2545;
              background: transparent;
              padding: 0.9em 2.2em;
              font-size: 1.5rem;
              letter-spacing: 1px;
              transition: all 0.3s ease;
              position: relative;
              left: 72rem;
              top: 15rem;     }
}

/* ########################################################### */
@media (max-width: 480px){
  .RB-title {
      font-size: clamp(2rem, 3vw, 5rem);
      letter-spacing: 0.15em;
      font-weight: 400;
      text-transform: uppercase;
      font-family: 'Playfair Display', serif;
      color: #1C1C1C;
      padding-left: 4rem;
      padding-top: 2rem;
      margin-bottom: 2rem; }

  .regen {
      height: 700px;
      width: 100vw;
      background-position: bottom;
      background-color: #f9f9f9;
    }
  .box2 {
      padding: 1rem;
      border: 0.25rem solid #f12a2a;
      width: 3.125rem;
      height: 2.5rem;
      margin-top: -16rem;
      margin-left: -4rem;
    }
  
    .box3 {
      padding: 1rem;
      border: 0.25rem solid #f12a2a;
      width: 3.125rem;
      height: 2.5rem;
      margin-top: -16rem;
      margin-left: -4.7rem;
    }
  
    .box4 {
      padding: 1rem;
      border: 0.25rem solid #f12a2a;
      width: 3.125rem;
      height: 2.5rem;
      margin-top: -16.8rem;
      margin-left: -4rem;
    }
  
    .box5 {
      padding: 1rem;
      border: 0.25rem solid #f12a2a;
      width: 3.125rem;
      height: 2.5rem;
      margin-top: -16.8rem;
      margin-left: -4.7rem;
    }
  
    .box6 {
      padding: -20rem;
      margin: 0rem;
      border: 0px solid #f12a2a;
      width: 4.375rem;
      height: 3.125rem;
      background-color: #f9f9f9;
      margin-top: -16.25rem;
        margin-left: -4.5rem;
    }
  
    .box6 h1 {
      color: #f12a2a;
      font-size: 2.4rem;
      margin-top: -0.4rem;
      margin-left: 0.2rem;
    }
  
    .box6Text {
      color: #f12a2a;
      font-size: 1.6rem;
      margin-top: -18rem;
      margin-left: -4rem;
    }
  
    .reg2 {
      margin-top: -16.2rem;
      margin-left: -5.4rem;}

            .RBstory {
              font-family: "Avenir Next", "Helvetica Neue", sans-serif;
                font-size: 3.5vw;
                line-height: 1.8;
                color: #3a3a3a;
                max-width: 80vw;
                margin-left: 2rem;
                text-align: justify;
                padding-top: 13rem;     }

.regen::after {
  content: "";
  display: block;
  width: 5rem;
  height: 0.1rem;
  background-color: #C8A964;
  /* soft gold accent */
  margin-left: 9rem;
}

.RB-explore {
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  opacity: 0;
  animation: fadeUp 1.2s ease forwards 1.1s;
  border: 1.5px solid #0b2545;
  color: #0b2545;
  background: transparent;
  padding: 0.7em 3em;
  font-size: 1rem;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  /* margin-left: -50rem;
  margin-top: -7rem; */
  position: absolute;
  top: 560px;
  left: 70px;
}
}

@media (min-width: 481px) and (max-width: 786px) {
  .RB-title {
      font-size: 3rem;
      letter-spacing: 0.15em;
      font-weight: 400;
      text-transform: uppercase;
      font-family: 'Playfair Display', serif;
      color: #1C1C1C;
      padding-left: 10rem;
      padding-top: 3rem;
      margin-bottom: 2rem;
    }
  
    .regen {
      height: 1000px;
      width: 100%;
      background-position: bottom;
      background-color: #f9f9f9;
    }
  
    .box2 {
      padding: 1rem;
      border: 0.25rem solid #f12a2a;
      width: 3.125rem;
      height: 2.5rem;
      margin-top: 33rem;
      margin-left: 6rem;
    }
  
    .box3 {
      padding: 1rem;
      border: 0.25rem solid #f12a2a;
      width: 3.125rem;
      height: 2.5rem;
      margin-top: 33rem;
      margin-left: 5.5rem;
    }
  
    .box4 {
      padding: 1rem;
      border: 0.25rem solid #f12a2a;
      width: 3.125rem;
      height: 2.5rem;
      margin-top: 32.5rem;
      margin-left: 6rem;
    }
  
    .box5 {
      padding: 1rem;
      border: 0.25rem solid #f12a2a;
      width: 3.125rem;
      height: 2.5rem;
      margin-top: 32.5rem;
      margin-left: 5.5rem;
    }
  
    .box6 {
      padding: -20rem;
      margin: 0rem;
      border: 0px solid #f12a2a;
      width: 4.375rem;
      height: 3.125rem;
      background-color: #f9f9f9;
      margin-top: 33rem;
      margin-left: 5.5rem;
    }
  
    .box6 h1 {
      color: #f12a2a;
      font-size: 2.4rem;
      margin-top: -0.4rem;
      margin-left: 0.2rem;
    }
  
    .box6Text {
      color: #f12a2a;
      font-size: 1.6rem;
      margin-top: 32rem;
      margin-left: 6rem;
    }
  
    .reg2 {
      margin-top: 33rem;
      margin-left: 5rem;
    }
  
    .RBstory {
      font-family: "Avenir Next", "Helvetica Neue", sans-serif;
      font-size: 3.5vw;
      line-height: 1.8;
      color: #3a3a3a;
      max-width: 80vw;
      margin-left: 4rem;
      text-align: justify;
      padding-top: 15rem;
    }
  
    .RB-explore {
      font-family: 'Montserrat', sans-serif;
      cursor: pointer;
      opacity: 0;
      animation: fadeUp 1.2s ease forwards 1.1s;
      border: 1.5px solid #0b2545;
      color: #0b2545;
      background: transparent;
      padding: 0.7em 4em;
      font-size: 1.4rem;
      letter-spacing: 1px;
      transition: all 0.3s ease;
      /* margin-left: -50rem;
  margin-top: -7rem; */
      position: absolute;
      top: 800px;
      left: 180px;
    }
    
        .regen::after {
          content: "";
          display: block;
          width: 8rem;
          height: 0.1rem;
          background-color: #C8A964;
          /* soft gold accent */
          margin-left: 20rem;
          margin-top: 5rem;   }
}


/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000 */


.static{
  position: relative;
    background: linear-gradient(120deg, #fdfdfd, #f8f9fa);
    overflow: hidden;
    width: 100vw;
    height: 20vh;
}

.static::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -20%;
  width: 60%;
  height: 140%;
  background: radial-gradient(circle at center, rgba(0, 61, 122, 0.08), transparent 70%);
  z-index: 0;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items:end;
  gap: 10px;
  margin-top: 30px;
}


.product-card {
  position: relative;
  left:30px;
  top:20px;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  width:300px;
  height: fit-content;
  justify-content: center;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-card img {
  width: auto;
  height: 200px;
  border-radius: 8px;
  padding-left: 30px;
  padding-top: 10px;
  padding-bottom: 20px;
}

.product-card h3 {
  font-size: 2rem;
  padding-top: 1px;
  margin-top: 20px;
}

@media (max-width: 393px){
  .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 0.44fr));
      align-items: end;
      gap: 20px;
      margin-top: 30px;
    }
  
  
    .product-card {
      position: relative;
      left: 30px;
      top: 20px;
      background: #fff;
      border-radius: 10px;
      padding: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s ease;
      width: 150px;
      height: auto;
      justify-content: center;
    }
  
    .product-card:hover {
      transform: translateY(-5px);
    }
  
    .product-card img {
      width: auto;
      height: 150px;
      border-radius: 8px;
      padding-left: 30px;
      padding-top: 10px;
      padding-bottom: 20px;
    }
  
    .product-card h3 {
      font-size: 1rem;
      padding-top: 1px;
      margin-top: 20px; }
    
    .product-card h4{
      font-size: 1rem;
        padding-top: 1px;
        margin-top: 20px;
    }
}

@media (min-width: 394px) and (max-width: 430px){
  .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 0.46fr));
      align-items: end;
      gap: 20px;
      margin-top: 30px;
    }

        .product-card {
          position: relative;
          left: 30px;
          top: 20px;
          background: #fff;
          border-radius: 10px;
          padding: 10px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          transition: transform 0.2s ease;
          width: 150px;
          height: auto;
          justify-content: center;
        }
    
        .product-card:hover {
          transform: translateY(-5px);
        }
    
        .product-card img {
          width: auto;
          height: 150px;
          border-radius: 8px;
          padding-left: 30px;
          padding-top: 10px;
          padding-bottom: 20px;
        }
    
        .product-card h3 {
          font-size: 1rem;
          padding-top: 1px;
          margin-top: 20px;
        }
    
        .product-card h4 {
          font-size: 1rem;
          padding-top: 1px;
          margin-top: 20px;
        }
}

.price {
  font-size: 1rem;
  color: #a00000;
  font-weight: bold;
}

#special{
  width: 280px;
  height: auto;
}

@media (max-width : 480px) {
  #special {
      transform: scale(0.5);
    margin-left: -5rem; }
}

#RB00420{
  width: 250px;
  height: auto;
}

/* ################################################################################################# */

.belano{
  background-position: bottom;
    background-color: #f9f9f9;
    height: 100vh;
    width: 100vw;
}

.belano::after {
  content: "";
  display: block;
  width: 70px;
  height: 2px;
  background-color: #C8A964;
  /* soft gold accent */
  margin-left: 350px;
  margin-top: 50px;
}

.BL-title{
  width: fit-content;
  font-size: clamp(2.5rem, 3vw, 5rem);
    letter-spacing: 0.15em;
    font-weight: 400;
    text-transform: uppercase;
    font-family: 'Playfair Display', serif;
    color: #1C1C1C;
    padding-left: 100px;
    padding-top: 100px;
    margin-bottom: 2rem;
}

.BLstory {
  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #3a3a3a;
    max-width: 40rem;
    margin-left: 5.8rem;
    text-align: justify;
}

.BLstory strong {
  font-weight: 600;
  color: #000;
}

@media (min-width: 1920px){
  .belano {
      background-position: bottom;
      background-color: #f9f9f9;
      height: 100vh;
      width: 100%; }

  .BL-title {
    font-size: 3.8rem;
      padding-left: 10rem;
      padding-top: 6rem;
      margin-bottom: 2rem;
    }
        .BLstory {
          font-family: "Avenir Next", "Helvetica Neue", sans-serif;
            font-size: 1.4rem;
            line-height: 1.8;
            color: #3a3a3a;
            max-width: 46rem;
            margin-left: 10rem;
            margin-top: 6rem;
            text-align: justify;   }

                        .belano::after {
                          content: "";
                          display: block;
                          width: 7rem;
                          height: 2px;
                          background-color: #C8A964;
                          /* soft gold accent */
                          margin-left: 25rem;
                            margin-top: 2rem;           }
}

@media (max-width: 480px) {
  .belano {
    background-position: bottom;
    background-color: #f1f1f1;
    height: 1000px;
    width: 100%;
  }
    .BL-title {
      font-size: clamp(2rem, 3vw, 5rem);
      padding-left: 7rem;
        padding-top: 2rem;
        margin-bottom: 2rem; }

            .BLstory {
              font-family: "Avenir Next", "Helvetica Neue", sans-serif;
                font-size: 3.5vw;
                line-height: 1.8;
                color: #3a3a3a;
                max-width: 80vw;
                margin-left: 2rem;
                text-align: justify;
                padding-top: 20rem;     }

                                .belano::after {
                                  content: "";
                                    display: block;
                                    width: 5rem;
                                    height: 0.1rem;
                                    background-color: #C8A964;
                                    /* soft gold accent */
                                    margin-left: 9rem;
                                  margin-top: 3rem;        }
}

@media (min-width: 481px) and (max-width: 786px){
  .belano {
      background-position: bottom;
      background-color: #f1f1f1;
      height: 1300px;
      width: 100%;
    }
  
    .BL-title {
      font-size: clamp(2rem, 6vw, 5rem);
      padding-left: 15rem;
      padding-top: 2rem;
      margin-bottom: 2rem;
    }
  
    .BLstory {
      font-family: "Avenir Next", "Helvetica Neue", sans-serif;
      font-size: 3.5vw;
      line-height: 1.8;
      color: #3a3a3a;
      max-width: 80vw;
      margin-left: 4rem;
      text-align: justify;
      padding-top: 20rem;
    }
  
    .belano::after {
      content: "";
      display: block;
      width: 10rem;
      height: 0.1rem;
      background-color: #C8A964;
      /* soft gold accent */
      margin-left: 18rem;
    }
}

.BL-explore {
  top: 150px;
  left: 260px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  opacity: 0;
  animation: fadeUp 1.2s ease forwards 1.1s;
  border: 1.5px solid #0b2545;
  color: #0b2545;
  background: transparent;
  padding: 0.9em 2.2em;
  font-size: 1rem;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  position: relative;
}

.BL-explore::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #0b2545;
  transition: width 0.3s ease;
  z-index: -1;
}

.BL-explore:hover::after {
  width: 100%;
}

.BL-explore:hover {
  background-color: #003d7a;
  color: #fff;
}
@media (min-width: 1920px){
  .BL-explore {
    top: 12rem;
      left: 18rem;
      padding: 0.9em 2.2em;
      font-size: 1.5rem;
      letter-spacing: 1px;
      transition: all 0.3s ease;
      position: relative;
    }
}

@media (prefers-reduced-motion: no-preference) {
  .belano {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s ease forwards;
    animation-delay: 0.3s;
  }

  @keyframes fadeUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.belanologo{
  position: absolute;
    left: 950px;
    top: 2400px;
    width: 350px;
      height: auto;
}

@media (min-width: 1920px){
  .belanologo {
      margin-top: 60rem;
      margin-left: 10rem;
      width: 500px;
      height: auto; }
}

@media (max-width: 480px) {
  .belanologo {
      position: absolute;
      top: 2100px;
      left: 70px;
      width: 250px;
      height: auto; }

            .BL-explore {
              font-family: 'Montserrat', sans-serif;
              cursor: pointer;
              opacity: 0;
              animation: fadeUp 1.2s ease forwards 1.1s;
              border: 1.5px solid #0b2545;
              color: #0b2545;
              background: transparent;
              padding: 0.7em 3em;
              font-size: 1rem;
              letter-spacing: 1px;
              transition: all 0.3s ease;
              margin-left: -12rem; 
            margin-top: -9rem;  }

}

@media (min-width: 481px) and (max-width: 786px){
  .belanologo {
      position: absolute;
      top: 3200px;
      left: 220px;
      width: 250px;
      height: auto;
    }
  
    .BL-explore {
      font-family: 'Montserrat', sans-serif;
      cursor: pointer;
      opacity: 0;
      animation: fadeUp 1.2s ease forwards 1.1s;
      border: 1.5px solid #0b2545;
      color: #0b2545;
      background: transparent;
      padding: 0.7em 4em;
      font-size: 1.5rem;
      letter-spacing: 1px;
      transition: all 0.3s ease;
      margin-left: -5rem;
      margin-top: -1rem;
    }
}

.ending{
  height: 50vh;
    width: 100vw;
    background-position: bottom;
    background-color: #fff;
    display: flex;
      justify-content: center;
      align-items: center;
      background: radial-gradient(circle at center, #111 0%, #000 100%);
      text-align: center;
      animation: fadeIn 1s ease forwards;
}

.ending .content h2 {
  font-size: 3rem;
  letter-spacing: 1px;
  margin: 0;
  color: #f5f5f5;
  text-transform: uppercase;
}

.ending .content p {
  margin-top: 1rem;
  font-size: 1.2rem;
  color: #ccc;
}

.ending .content span {
  color: #c9a84e;
  font-weight: 700;
  position: relative;
}

.ending .content span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c9a84e, transparent);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.radice{
    height: 100vh;
    width: 100vw;
    background-position: bottom;
    background-color: #fff;
}

.radice::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background-color: #C8A964;
  /* soft gold accent */
  margin-left: 1000px;
  margin-top: 50px;
}

.RD-title{
  font-size: clamp(2.5rem, 3vw, 5rem);
    letter-spacing: 0.15em;
    font-weight: 400;
    text-transform: uppercase;
    font-family: 'Playfair Display', serif;
    color: #1C1C1C;
    padding-left: 700px;
    padding-top: 100px;
    margin-bottom: 2rem;
}

.RDstory {
  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
  font-size: 1.2rem;
  line-height: 1.8;
  color: #3a3a3a;
  max-width: 700px;
  margin-left: 700px;
  text-align: justify;
}

.RD-explore {
  top: 150px;
  left: 910px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  opacity: 0;
  animation: fadeUp 1.2s ease forwards 1.1s;
  border: 1.5px solid #0b2545;
  color: #0b2545;
  background: transparent;
  padding: 0.9em 2.2em;
  font-size: 1rem;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  position: relative;
}

.RD-explore::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #0b2545;
  transition: width 0.3s ease;
  z-index: -1;
}

.RD-explore:hover::after {
  width: 100%;
}

.RD-explore:hover {
  background-color: #003d7a;
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .radice {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s ease forwards;
    animation-delay: 0.3s;
  }

  @keyframes fadeUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.radicelogo{
  width: 250px;
  height: auto;
  position: absolute;
  top: 3250px;
  left : 200px;
}

.radiceline{
  width: 129px;
    height: 2px;
    background: black;
    position: absolute;
    top: 3248.6px;
    left: 261.5px;
}

.reg4{
  position: absolute;
    left: 390px;
    top: 3230px;
}

@media (max-width: 480px){
  .radice {
      height: 800px;
      width: 100vw;
      background-position: bottom;
      background-color: #fff;
    }
.RD-title {
font-size: clamp(2rem, 3vw, 5rem);
padding-left: 7rem;
padding-top: 2rem;
margin-bottom: 2rem;   }

.RDstory {
font-family: "Avenir Next", "Helvetica Neue", sans-serif;
font-size: 3.5vw;
line-height: 1.8;
color: #3a3a3a;
max-width: 80vw;
margin-left: 2rem;
text-align: justify;
padding-top: 10rem;
}

.radiceline {
width: 78px;
height: 1.5px;
background: black;
margin-top: -8rem;
margin-left: -7.55rem;
z-index: 1;
}

.RD-explore {
  font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    opacity: 0;
    animation: fadeUp 1.2s ease forwards 1.1s;
    border: 1.5px solid #0b2545;
    color: #0b2545;
    background: transparent;
    padding: 0.7em 3em;
    font-size: 1rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin-left: -52.8rem;
    margin-top: -2rem;
}

.radice::after {
  content: "";
  display: block;
  width: 75px;
  height: 2px;
  background-color: #C8A964;
  /* soft gold accent */
  margin-left: 9rem;
    margin-top: 4rem;
}

.radicelogo{
  margin-left: -6rem;
    margin-top: -8rem;
    width: 150px;
    height: auto;
}

.reg4{
  margin-top: -8rem;
  margin-left: -10.8rem;
}
}

@media (min-width: 1920px){
  .radice {
    background-position: bottom;
      background-color: #f9f9f9;
      height: 100vh;
      width: 100%;
    }

.RD-title {
  width: fit-content;
    font-size: clamp(2.5rem, 3vw, 5rem);
    letter-spacing: 0.15em;
    font-weight: 400;
    text-transform: uppercase;
    font-family: 'Playfair Display', serif;
    color: #1C1C1C;
    padding-left: 60rem;
    padding-top: 6.25rem;
    margin-bottom: 2rem;}    

.RDstory {
  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
    font-size: 1.5rem;
    line-height: 1.8;
    color: #3a3a3a;
    max-width: 50rem;
    margin-left: 60rem;
    text-align: justify; }

.radice::after {
  content: "";
    display: block;
    width: 7rem;
    height: 0.1rem;
    background-color: #C8A964;
    /* soft gold accent */
    margin-left: 80rem;
    margin-top: 2rem;
  }

.RD-explore {
  font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    opacity: 0;
    animation: fadeUp 1.2s ease forwards 1.1s;
    border: 1.5px solid #0b2545;
    color: #0b2545;
    background: transparent;
    padding: 0.9em 2.2em;
    font-size: 1.5rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    position: relative;
    left: 72rem;
    top: 15rem;
  }

.radicelogo{
  margin-top: 80rem;
}

.radiceline{
  margin-top: 80rem;
}

.reg4{
  margin-top: 80rem;
}
}

@media (min-width: 481px) and (max-width: 786px){
  .radice {
      height: 1300px;
      width: 100%;
      background-position: bottom;
      background-color: #fff;
    }
  
    .RD-title {
      font-size: clamp(2rem, 7vw, 5rem);
      padding-left: 15rem;
      padding-top: 2rem;
      margin-bottom: 2rem;
    }
  
    .RDstory {
      font-family: "Avenir Next", "Helvetica Neue", sans-serif;
      font-size: 3.5vw;
      line-height: 1.8;
      color: #3a3a3a;
      max-width: 80vw;
      margin-left: 2rem;
      text-align: justify;
      padding-top: 20rem;
      padding-left: 3rem;
    }
  
    .radiceline {
      width: 103px;
      height: 1.5px;
      background: black;
      margin-top: 80rem;
      margin-left: 2.25rem;
      z-index: 1;
    }
  
    .RD-explore {
      font-family: 'Montserrat', sans-serif;
      cursor: pointer;
      opacity: 0;
      animation: fadeUp 1.2s ease forwards 1.1s;
      border: 1.5px solid #0b2545;
      color: #0b2545;
      background: transparent;
      padding: 0.7em 4em;
      font-size: 1.5rem;
      letter-spacing: 1px;
      transition: all 0.3s ease;
      margin-left: -48rem;
      margin-top: -1rem;
    }
  
    .radice::after {
      content: "";
      display: block;
      width: 10rem;
      height: 2px;
      background-color: #C8A964;
      margin-left: 18rem;
      margin-top: 3rem;
    }
  
    .radicelogo {
      margin-left: 3rem;
      margin-top: 80rem;
      width: 200px;
      height: auto;
    }
  
    .reg4 {
      margin-top: 80rem;
      margin-left: 1rem;
    }
  }
  
  @media (min-width: 1920px) {
    .radice {
      background-position: bottom;
      background-color: #f9f9f9;
      height: 100vh;
      width: 100%;
    }
  
    .RD-title {
      width: fit-content;
      font-size: clamp(2.5rem, 3vw, 5rem);
      letter-spacing: 0.15em;
      font-weight: 400;
      text-transform: uppercase;
      font-family: 'Playfair Display', serif;
      color: #1C1C1C;
      padding-left: 60rem;
      padding-top: 6.25rem;
      margin-bottom: 2rem;
    }
  
    .RDstory {
      font-family: "Avenir Next", "Helvetica Neue", sans-serif;
      font-size: 1.5rem;
      line-height: 1.8;
      color: #3a3a3a;
      max-width: 50rem;
      margin-left: 60rem;
      text-align: justify;
    }
  
    .radice::after {
      content: "";
      display: block;
      width: 7rem;
      height: 0.1rem;
      background-color: #C8A964;
      /* soft gold accent */
      margin-left: 80rem;
      margin-top: 2rem;
    }
  
    .RD-explore {
      font-family: 'Montserrat', sans-serif;
      cursor: pointer;
      opacity: 0;
      animation: fadeUp 1.2s ease forwards 1.1s;
      border: 1.5px solid #0b2545;
      color: #0b2545;
      background: transparent;
      padding: 0.9em 2.2em;
      font-size: 1.5rem;
      letter-spacing: 1px;
      transition: all 0.3s ease;
      position: relative;
      left: 72rem;
      top: 15rem;
    }
  
    .radicelogo {
      margin-top: 80rem;
    }
  
    .radiceline {
      margin-top: 80rem;
    }
  
    .reg4 {
      margin-top: 80rem;
    }
}

@media (min-width: 1920px){

  .ending {
      height: 50vh;
      width: 100%;
      background-position: bottom;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      background: radial-gradient(circle at center, #111 0%, #000 100%);
      text-align: center;
      animation: fadeIn 1s ease forwards; }

  .ending .content h2 {
      font-size: 5rem;
      letter-spacing: 1px;
      margin: 0;
      color: #f5f5f5;
      text-transform: uppercase; }

.ending .content p {
margin-top: 1rem;
font-size: 2rem;
color: #ccc;     }
}

@media (max-width: 480px) {
  .ending {
    height: 400px;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .catalogue {
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    opacity: 0;
    animation: fadeUp 1.2s ease forwards 1.1s;
    border: 1.5px solid #ffffff;
    border-radius: 1rem;
    color: #ffffff;
    background: transparent;
    padding: 0.9em 2.2em;
    font-size: 3vw;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin-left: -4rem;
  } }

@media (min-width: 481px) and (max-width: 786px){
  .catalogue {
      font-family: 'Montserrat', sans-serif;
      cursor: pointer;
      opacity: 0;
      animation: fadeUp 1.2s ease forwards 1.1s;
      border: 1.5px solid #ffffff;
      border-radius: 2rem;
      color: #ffffff;
      background: transparent;
      padding: 0.9em 2.2em;
      font-size: 3vw;
      letter-spacing: 1px;
      transition: all 0.3s ease;
      margin-left: -6rem;
    }

}

/* ################################################################################################ */