* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  font-family: 'Josefin Sans', sans-serif;

  color: #C19A6B;

}



html {

  scroll-behavior: smooth;

}



body {

  overflow: hidden;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-rendering: optimizeLegibility;

  filter: brightness(1.2);

}



.scroll-container {

  height: 100vh;

  overflow-y: scroll;

  scroll-snap-type: y mandatory;

  scrollbar-width: none;

}



.scroll-container::-webkit-scrollbar {

  display: none;

}



.section {

  height: 100vh;

  width: 100%;

  scroll-snap-align: start;

  position: relative;

}



.hero-page {

  display: grid;

  grid-template-columns: 1fr 180px 1fr;

  align-items: center;

  padding: 0 4%;

  background-color: #311c05;

  padding-top: 20px;

}



.hero-left {

  text-align: right;

  padding-right: 0px;

}



.hero-left::before {

  content: "";

  float: right;

  width: 220px;

  height: 540px;

  shape-outside: ellipse(220px 270px at 100% 50%);

}



.hero-right {

  text-align: left;

  padding-left: 0px;

}



.hero-right::before {

  content: "";

  float: left;

  width: 220px;

  height: 540px;

  shape-outside: ellipse(220px 270px at 0% 50%);

}



.hero-center {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

}



.feature-item {

  margin-bottom: 60px;

}



.feature-item:last-child {

  margin-bottom: 0;

}



.feature-item h3 {

  font-size: 1.4rem;

  font-weight: 600;

  display: inline-block;

  margin-bottom: 10px;

  letter-spacing: 1px;

  background: linear-gradient(135deg, rgba(230, 230, 230) 0%, rgb(180, 180, 180) 30%, rgba(230, 230, 230) 50%, rgb(180, 180, 180) 70%, rgb(230, 230 , 230) 100%);

  padding: 6px 20px 6px 12px;

  border-radius: 5px 5px 5px 5px;

  color: #291404;

  text-shadow: 5px 15px 30px rgba(0, 0, 0, 1);

}



.feature-item p {

  font-size: 1.2rem;

  font-weight: 300;

  line-height: 1.6;

  color: rgba(230, 230, 230);

  text-shadow: 0px 0px 7px rgba(230, 230, 230, 0.2);

}


.hero-center {
  
  margin-bottom: 20px;

  filter: brightness(1.1);

}

.main-emblem {

  height: 160px;

  width: auto;

  margin-bottom: 20px;

  filter: drop-shadow(0px 0px 40px rgba(193, 154, 107, 0.55));

  display: block;

  image-rendering: -webkit-optimize-contrast;

}



.emblem-container {

  display: flex;

  justify-content: center;

  align-items: center;

}



.brand-name {

  font-size: 4.8rem;

  font-weight: 400;

  letter-spacing: 0.15em;

  color: rgb(208, 170, 124);

  /*margin-bottom: 100px;*/

  text-shadow: 0px 0px 50px rgba(193, 154, 107, 0.75);

  font-family:'Outfit', Courier, monospace

}

.thin-text {

  font-weight: 300;

}

.brand-description {

  font-size: 1.5rem;

  font-weight: 400;

  letter-spacing: 3px;

  margin-top: 30px;

  margin-bottom: 45px;

  white-space: nowrap;

  color: #d0aa7c;

  letter-spacing: 3px;

  text-shadow: 0px 0px 30px rgba(193, 154, 107, 0.45);

}



.cta-button {

  display: inline-block;

  text-decoration: none;

  padding: 15px 20px;

  border: 1px solid #d0aa7c;

  font-size: 1.1rem;

  font-weight: 700;

  letter-spacing: 4px;

  font-family: 'Outfit', sans-serif;

  background: linear-gradient(135deg, rgba(238, 199, 152) 0%, rgb(193, 154, 107) 30%, rgba(243, 204, 157) 50%, rgb(193, 154, 107) 70%, rgb(238, 199, 152) 100%);

  color: #281804;

  transition: all 0.2s ease-in-out;

  white-space: nowrap;

  box-shadow: 0 0 25px rgba(193, 154, 107, 0.35)

}



.cta-button:hover {

  background: linear-gradient(135deg, rgba(230, 230, 230) 0%, rgb(160, 160, 160) 30%, rgba(230, 230, 230) 50%, rgb(160, 160, 160) 70%, rgb(230, 230 , 230) 100%);

  color: #281804;

  cursor: pointer;

  box-shadow: 0 0 25px rgba(255, 255, 255, 0.6);

}



.product-page {

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: rgb(193, 154, 107);

}



.product-page h2 {

  font-size: 2rem;

  font-weight: 300;

  letter-spacing: 4px;

  color: #291404;

}



.content-page {

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: #291404;

}



.content-page h2 {

  font-size: 2rem;

  font-weight: 300;

  letter-spacing: 4px;

  color: rgb(193, 154, 107);

}



.contact-page {

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: rgb(193, 154, 107);

}



.contact-page h2 {

  font-size: 2rem;

  font-weight: 300;

  letter-spacing: 4px;

  color: #291404;

}



@media (max-width: 1024px) {

.hero-page {

grid-template-columns: 1fr;

grid-template-rows: auto auto auto;

gap: 40px;

padding: 80px 6%;

text-align: center;

}

.hero-left, .hero-right {

  text-align: left;
  float: left

}

.center-logo-area {

grid-row: 1;

margin: 0 auto;

width: 150px;

}



.feature-item h3 {

display: inline-block;

}

}



@media (max-width: 768px) {

.scroll-container {

scroll-snap-type: none;

}



.hero-page {

padding: 60px 5%;

height: auto;

min-height: 100vh;

scroll-snap-align: none;

}



.hero-page h1 {

font-size: 2.2rem;

line-height: 1.3;

}



.feature-item h3 {

font-size: 1.2rem;

padding: 4px 14px;

}



.feature-item p {

font-size: 1rem;

line-height: 1.5;

}

}