body {
  background-color: #F2F0ED;

}
h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}

h1, .hero_title, .hero_title1, .hero_title2, .hero_title3, .hero_title4, .hero_title5, .about-text32, .about-text33 {
  font-family: "Alatsi", Helvetica, Arial, serif;
  font-weight: 400;
  color: #303737;
  font-size: 2.5rem; /* Adjust as needed */
  line-height: 1.5;
}

h2, .medium_title, .medium_title1, .about-text17, .about-text20, .about-text21, .about-text28 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #303737;
  font-size: 2rem; /* Adjust as needed */
  line-height: 1.5;
}

p, .about-text, .about-text02, .about-text13, .title, .title1, .title2, .title3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #303737;
  font-size: 1.125rem; /* Adjust as needed */
  line-height: 1.75;
}

.group {
  position: relative;
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

 .decorator2 {
  position: absolute;
  bottom: 391px;
  left: -10px;
  width: 1477px;
  height: 552px;
}
 .rect1 {
  position: absolute;
  right: -1163px;
  bottom: -6px;
  width: 1373px;
  height: 982px;
}
 .rect {
  position: absolute;
  top: 267px;
  left: -2px;
  width: 516px;
  height: 4604px;
  background-color: #f8f6f1;
}
 .main {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #f4f3f1;
  overflow-x: hidden;
}
 .section1 {
  display: flex;
  flex-direction: column;
}
 .group1 {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 75px 6.22% 62px auto;
  width: 819px;
}
 .rect3 {
  position: absolute;
  top: -82px;
  left: -599px;
  width: 1512px;
  height: 232px;
  background-color: #303737;
}
 .flex_row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0px 10px;
}
 .hero_title4 {
  font: 400 40px/2 "Alatsi", Helvetica, Arial, serif;
  color: #f4f3f1;
}
 .hero_title5 {
  font: 400 40px/2 "Alatsi", Helvetica, Arial, serif;
  color: #f4f3f1;
}
 .section2 {
  position: relative;
}
 .flex_col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height:1vh;
}
 .hero_title {
  font: 74px/2 "Alatsi", Helvetica, Arial, serif;
  color: #303737;
}
.about-title{
  position: relative;
  text-align: center;
  padding: 20px 5px 20px 5px;
}
 .medium_title {
  margin-bottom: 20px; /* Adjusted margin */
  margin-left:50px;
  font: 30px/2 "Helvetica Neue", Helvetica, Arial, serif;
  color: #303737;
 }
 .rect4 {
  background-color: #d58856;
  height: 15px;
  position: relative;
  width: 80%;
  margin:auto;
  padding-bottom: 20px;
 }

 .image {
  position: absolute;
  top: 409px;
  left: -135px;
  width: 85%;
  height: 78%;
  -o-object-position: -10% 40%;
  object-position: -10% 40%;
}
 .section3 {
  position: relative;
  margin-top:20px;
  padding-right: 20px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  height: auto;
}
 .flex_row1 {
  position: relative;
  left: 18px;
  display: flex;
  justify-content: space-between;
  gap: 50px 50px;
  width: auto;
  height: auto;
  padding: 0px 20px 0px 0px;
}
 .image1 {
  width: auto;
  height: auto; /* Reset height */
  max-height: 860px;
}
 .flex_col1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 53px 0px;
  margin: 92px 40px 90px;
  padding:20px;
  width: 80%;
  height: auto;
}
.gsr{
  display: flex;
  flex-direction: column;
}
 .title1 {
  display: flex;
  align-items: center;
  width: 98.2%;
  font: 400 40px/2 "Alatsi", Helvetica, Arial, serif;
  color: #303737;
}
 .medium_title1 {
  display: flex;
  align-items: center;
  font: 30px/2 "Helvetica Neue", Helvetica, Arial, serif;
  color: black;

  
}
 .section4 {
  position: relative;
  padding: 50px;
  margin-top:20px;
  margin-bottom: 20px;
  margin: auto;
  display: flex;
  flex-direction: column;
  min-height: auto;
}
 .title {
  position: relative;
 margin: auto;
  height: auto;
  font: 400 33.9853019714px/2 "Helvetica Neue", Helvetica, Arial, serif;
  color: black;
}
 .title2 {
  position: relative;
  margin:auto;
  font: 400 33.9853019714px/2 "Helvetica Neue", Helvetica, Arial, serif;
  color: black;
}
 .hero_title1 {
 letter-spacing: 2px;
  position: relative;
  margin:auto;
  font: 400 52.0593299866px/2 "Alatsi", Helvetica, Arial, serif;
  color: black;
}
 .decorator1 {
  position: relative;
  left: 609px;
  width: 60%;
  height: auto;
}
 .section5 {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 730px;
}
 .hero_title3 {
  position: relative;
  left: 112px;
  width: 1287px;
  height: auto;
  font: 400 56.6421699524px/2 "Alatsi", Helvetica, Arial, serif;
  color: #303737;
}
 .title3 {
  position: relative;
  padding-top: 5px;
  left: 246px;
  width: 60%;
  height: auto;
  font: 400 33.9853019714px/2 "Helvetica Neue", Helvetica, Arial, serif;
  color: black;
}
.sustainability{
  display: flex;
  flex-direction:column;
}

.arts{
  display: flex;
  flex-direction:column;
}

 .section6 {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0px 0px 657px;
  min-height: 937px;
}
 .hero_title2 {
  position: relative;
  top: 57px;
  left: 182px;
  width: 1147px;
  height: 130px;
  font: 400 60/2 "Alatsi", Helvetica, Arial, serif;
  color: black;
}
 .hero_title21_box {
  position: relative;
  top: 160px;
  left: 240px;
  width: 60%;
  height: auto;
 }  

.about-about {
  width: auto;
  height: 2499px;
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: flex-end;
  flex-shrink: 0;
  justify-content: center;
}
.about-frame151 {
  top: 319px;
  left: 6px;
  width: 1200px;
  height: 2174px;
  display: flex;
  position: absolute;
  align-items: flex-end;
  flex-shrink: 0;
  justify-content: center;
}
.about-hero {
  width: 100%;
  height: 1200px;
  display: flex;
  padding: var(--dl-space-space-threeunits);
  max-width: var(--dl-size-size-maxwidth);
  min-height: 80vh;
  flex-direction: column;
  justify-content: center;
  background-color: #F4F3F1;
}
.about-frame141 {
  gap: 62px;
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.about-text {
  color: rgba(48, 55, 55, 1);
  height: auto;
  font-size: 64.67352294921875px;
  font-style: Regular;
  text-align: left;
  font-family: Alatsi;
  font-weight: 400;
  line-height: 200%;
  font-stretch: normal;
  text-decoration: none;
}
.about-frame142 {
  gap: 77px;
  width: 1123px;
  display: flex;
  position: relative;
  align-items: center;
}
.about-tempe-style1 {
  width: 498px;
  height: 1041px;
}
.about-container1 {
  flex: 0 0 auto;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: flex-start;
}
.about-text02 {
  color: rgb(48, 55, 55);
  width: 60%;
  height: auto;
  font-size: 28px;
  font-style: Regular;
  text-align: left;
  font-family: Helvetica Neue;
  font-weight: 400;
  line-height: 200%;
  font-stretch: normal;
  margin-right: var(--dl-space-space-unit);
  text-decoration: none;
}
.about-frame133 {
  gap: 10px;
  top: -257px;
  left: 7px;
  width: auto;
  height: 1669px;
  display: flex;
  padding: 0 157px;
  position: absolute;
  align-items: flex-start;
  flex-direction: column;
}
.about-frame134 {
  width: auto;
  height: 427px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 0;
}
.about-group34 {
  top: 199px;
  left: 96px;
  width: 100%;
  height: 228px;
  display: flex;
  position: absolute;
  align-items: flex-start;
  flex-shrink: 1;
}
.about-group31 {
  top: 0px;
  left: 0px;
  width: 739px;
  height: 228px;
  display: flex;
  position: absolute;
  align-items: flex-start;
  flex-shrink: 1;
}
.about-group29 {
  top: 0px;
  left: 0px;
  width: 739px;
  height: 228px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 1;
}
.about-group22 {
  top: 0px;
  left: 0px;
  width: 739px;
  height: 228px;
  display: flex;
  position: absolute;
  align-items: flex-start;
  flex-shrink: 1;
}
.about-text13 {
  color: rgba(48, 55, 55, 1);
  width: auto;
  height: auto;
  position: relative;
  font-size: 28px;
  font-style: Regular;
  text-align: left;
  font-family: Helvetica Neue;
  font-weight: 400;
  line-height: 200%;
  font-stretch: normal;
  text-decoration: none;
  overflow: hidden;
}
.about-text15 {
  color: rgba(48, 55, 55, 1);
  height: auto;
  position: absolute;
  font-size: 92.1212158203125px;
  font-style: Regular;
  text-align: left;
  font-family: Alatsi;
  font-weight: 400;
  line-height: 200%;
  font-stretch: normal;
  text-decoration: none;
}
.about-frame135 {
  display: block;
  position: relative;
}


.about-group20 {
    background-image: url('./images/mountaincharcoalgradient.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    align-items: left;
    justify-content:baseline;
    width: 100%;
    max-width: 100vw; /* Ensure it does not exceed the viewport width */
    height: 620px;
    position: relative; /* Use relative instead of absolute to avoid layout issues */
    overflow: hidden;
}
.about-group19 {
  width: auto;
  height: 110%;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 1;
}
.about-drawn-columns-blue {
  width: auto;
  height: 115%;
  position: relative;
  padding-left: -20px;
  
}
.about-frame137 {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  flex-direction: column;
}
.about-text17 {
  color: rgba(0, 0, 0, 1);
  width: 952px;
  height: auto;
  font-size: 52.059329986572266px;
  font-style: Regular;
  text-align: left;
  font-family: Alatsi;
  font-weight: 400;
  line-height: 200%;
  font-stretch: normal;
  text-decoration: none;
}
.about-text18 {
  color: rgba(0, 0, 0, 1);
  width: 590px;
  height: auto;
  font-size: 33.98530197143555px;
  font-style: Regular;
  text-align: left;
  font-family: Helvetica Neue;
  font-weight: 400;
  line-height: 200%;
  font-stretch: normal;
  text-decoration: none;
}
.about-text20 {
  color: rgba(0, 0, 0, 1);
  width: auto;
  height: auto;
  font-size: 33.98530197143555px;
  font-style: Regular;
  text-align: left;
  font-family: Helvetica Neue;
  font-weight: 400;
  line-height: 200%;
  font-stretch: normal;
  text-decoration: none;
}
.about-mntn1 {
  width: 821px;
  height: 263px;
}
.about-frame140 {
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
}
.about-text21 {
  color: rgba(0, 0, 0, 1);
  width: auto;
  height: auto;
  font-size: 33.98530197143555px;
  font-style: Regular;
  text-align: left;
  font-family: Helvetica Neue;
  font-weight: 400;
  line-height: 200%;
  font-stretch: normal;
  text-decoration: none;
}
.about-text28 {
  color: rgba(0, 0, 0, 1);
  width: auto;
  height: auto;
  font-size: 33.98530197143555px;
  font-style: Regular;
  text-align: left;
  font-family: Helvetica Neue;
  font-weight: 400;
  line-height: 200%;
  font-stretch: normal;
  text-decoration: none;
}
.about-text32 {
  color: rgba(0, 0, 0, 1);
  height: auto;
  font-size: 64.67352294921875px;
  font-style: Regular;
  text-align: left;
  font-family: Alatsi;
  font-weight: 400;
  line-height: 200%;
  letter-spacing: 5px;;
  text-decoration: none;
}
.about-text33 {
  color: rgba(0, 0, 0, 1);
  height: auto;
  font-size: 64.67352294921875px;
  font-style: Regular;
  text-align: left;
  font-family: Alatsi;
  font-weight: 400;
  line-height: 200%;
  letter-spacing: 5px;;
  text-decoration: none;
}
.about-social-bar {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.about-image {
  width: 100%;
  object-fit: cover;
}

  .about-about {
    height: 4240px;
  }
  .about-frame151 {
    width: 100%;
    height: 2017px;
  }
  .about-hero {
    width: 100%;
    height: 1480px;
    max-width: 100%;
  }
  .about-frame141 {
    width: 1456px;
    position: relative;
  }
  .about-text {
    top: -137px;
    right: 645px;
    position: absolute;
    align-self: flex-end;
  }
  .about-frame142 {
    top: -82px;
    left: -24px;
    width: 1544px;
    position: absolute;
  }
  .about-tempe-style1 {
    width: 441px;
    height: 796px;
  }
  .about-container1 {
    width: 958px;
    height: 798px;
    border-color: #d87832;
    border-width: 5px1px;
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 20px;
  }
  .about-text02 {
    top: 128px;
    color: rgb(48, 55, 55);
    right: 100px;
    width: 50%;
    position: absolute;
    font-size: 28px;
    font-weight: 400;
    line-height: 200%;
    text-decoration: none;
  }
 
  .about-group22 {
    width: 1159px;
  }
  .about-text13 {
    width: auto;
  }
 
 
  .about-orangebite2 {
    top: 199px;
    left: 113px;
    width: 495px;
    height: 482px;
  }

  .about-frame137 {
    top: 2454px;
    left: 249px;
    width: 1033px;
    height: 469px;
    position: absolute;
  }
  .about-text17 {
    top: 1px;
    color: rgb(0, 0, 0);
    right: -75px;
    margin: auto;
    position: absolute;
    font-size: 52.0593px;
    margin-top: var(--dl-space-space-unit);
    font-family: Alatsi;
    font-weight: 400;
    line-height: 200%;
    margin-bottom: var(--dl-space-space-unit);
    text-decoration: none;
  }
  .about-text18 {
    top: 104px;
    left: 0px;
    right: 0px;
    margin: auto;
    position: absolute;
  }
  .about-text20 {
    top: 219px;
    left: 0px;
    color: rgb(0, 0, 0);
    right: 0px;
    margin: auto;
    position: absolute;
    font-size: 33.9853px;
    font-weight: 400;
    line-height: 200%;
    text-decoration: none;
  }
  .about-mntn1 {
    top: 2832px;
    right: 30px;
    position: absolute;
  }
  .about-frame140 {
    position: relative;
  }
  .about-text21 {
    top: -517px;
    left: 150px;
    color: rgb(0, 0, 0);
    width: 75%;
    margin: auto;
    position: absolute;
    font-size: 33.9853px;
    font-weight: 400;
    line-height: 200%;
    text-decoration: none;
  }
  .about-text28 {
    top: -1079px;
    left: 135px;
    color: rgb(0, 0, 0);
    width: 75%;
    margin: auto;
    position: absolute;
    font-size: 33.9853px;
    font-weight: 400;
    line-height: 200%;
    text-decoration: none;
  }
  .about-text32 {
    top: -1242px;
    left: 123px;
    color: rgb(0, 0, 0);
    position: absolute;
    font-size: 64.6735px;
    font-family: Alatsi;
    font-weight: 400;
    line-height: 200%;
    text-decoration: none;
  }
  .about-text33 {
    top: -670px;
    left: 156px;
    position: absolute;
  }
  
  @media (max-width: 768px) {
    .flex_row1 {
      flex-direction: column;
      gap: 20px; /* Adjust gap between stacked items */
      padding: 0;
      left: 0;
    }
  
    .image1 {
      width: 100%; /* Make the image full width */
      height: auto; /* Maintain aspect ratio */
    }
  
    .flex_col1 {
      margin: 0;
      width: 100%;
      padding: 5px; /* Adjust padding as needed */
      gap: 20px; /* Adjust gap between text elements */
    }
  
    .section3 {
      padding: 10px; /* Adjust padding for section */
    }
  
    .about-title {
      padding: 10px; /* Adjust padding for section */
    }
  
    .rect4 {
      width: 100%;
    }
  
    .section4, .section5, .section6 {
      padding: 20px;
    }
  
    .hero_title, .hero_title1, .hero_title3, .medium_title, .medium_title1, .title, .title1, .title3 {
      text-align: left;
      margin: 0 auto;
    }
  
    .decorator1 {
      width: 100%;
      left: 0;
    }
  
    .sustainability, .arts {
      flex-direction: column;
      align-items: left;
      text-align: left;
    }
    .title3 {
      left: 0px;
      margin: auto;
      padding: 5px;
      position: relative;
      width: 90%;
      height: auto;
    }
    .hero_title3 {
      left: 0px;
      position: relative;
      width: 90%;
      height: auto;
      font: 400 56.6421699524px / 2 "Alatsi", Helvetica, Arial, serif;
      color: #303737;
  }
  }