@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
  outline: none;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  letter-spacing: 0.05vw;
  box-sizing: border-box;
  text-decoration: none;
  
}

html {
  height: 100%;
  margin: 0;
  padding: 0;
  background-size: cover;
}



body {
    background-size: cover;
    padding-top: 2vw; 
    
}







  /* TOP BANNER */

.hero {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='920' height='280' preserveAspectRatio='none' viewBox='0 0 920 280'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1028%26quot%3b)' fill='none'%3e%3crect width='920' height='280' x='0' y='0' fill='url(%26quot%3b%23SvgjsLinearGradient1029%26quot%3b)'%3e%3c/rect%3e%3cpath d='M187.7283773514701 0.42331633981354244L144.84976235352025-27.422381825647754 117.00406418805895 15.456233172302099 159.8826791860088 43.30193133776339z' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M164.629%2c346.394C191.247%2c345.942%2c212.96%2c327.613%2c226.305%2c304.577C239.69%2c281.472%2c244.061%2c253.892%2c232.024%2c230.057C218.735%2c203.743%2c194.097%2c183.241%2c164.629%2c182.454C133.934%2c181.635%2c105.001%2c199.112%2c90.699%2c226.284C77.237%2c251.861%2c84.066%2c282.12%2c99.216%2c306.734C113.542%2c330.008%2c137.303%2c346.858%2c164.629%2c346.394' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M627.342%2c139.895C642.426%2c139.783%2c658.669%2c136.26%2c666.089%2c123.127C673.425%2c110.143%2c667.382%2c94.856%2c660.163%2c81.807C652.621%2c68.173%2c642.913%2c53.644%2c627.342%2c53.088C611.107%2c52.508%2c598.16%2c65.151%2c590.191%2c79.307C582.396%2c93.154%2c579.282%2c110.162%2c587.588%2c123.708C595.604%2c136.781%2c612.007%2c140.008%2c627.342%2c139.895' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M626.1177493360652 267.235515801124L696.4402240778085 324.2925851777231 710.1865566827714 246.33325898877814z' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M305.31205732269314 45.262761628972285L281.94809193010593-22.801774543126875 239.8551769558266 23.947143612948864z' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M711.5981701524861 149.6969453608333L748.3377172138913 83.56576065030377 682.2065325033618 83.56576065030379z' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M256.43828851876737 134.5950313130142L273.0271272153501 229.20215785781323 338.27882069443024 176.36237833951927z' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1028'%3e%3crect width='920' height='280' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='17.39%25' y1='-57.14%25' x2='82.61%25' y2='157.14%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1029'%3e%3cstop stop-color='rgba(94%2c 13%2c 13%2c 1)' offset='0.01'%3e%3c/stop%3e%3cstop stop-color='rgba(154%2c 21%2c 50%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
  background-position: center;
  height: 40vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

@media (max-width: 768px) {
  .hero {
    height: 65vw;
  }
}

.top-text {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  width: 100%;
  height: 9vw;
  margin-top: 5vw;
  z-index: 2;
  margin-bottom: -1vw;
}

.hero-title {
    font-size: 3.5vw;
    width: 100%;
    margin-top: 1.2vw;
    margin-bottom: -1.25vw;
  text-shadow: 0vw 0vw 1vw #0000002b;
}
.hero-subtitle {
    font-size: 1.5vw;
}

@media (max-width: 768px) {
  .top-text {
    height: 16vw;
    margin-top: -2vw;
  }
  
  .hero-title {
      font-size: 7.5vw;
      width: 100%;
      margin-top: 1.2vw;
      margin-bottom: -3.35vw;
  }
  .hero-subtitle {
      font-size: 3.5vw;
  }
}

.top-banners {
    display: flex;
    justify-content: space-around;
    padding: 5vw;
    width: 70vw;
}

.top-banner {
  width: 19.5vw;
  height: 10.5vw;
  color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1vw;
  border-radius: 1vw;
  box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  z-index: 2;
}

.top-banner:hover {
  transform: scale(1.025);
}

.top-banner-title {
  font-size: 1.25vw;
  text-align: left;
  margin-top: 2.15vw;
  margin-bottom: -0.15vw;
}

.top-banner-description {
  font-size: 0.7vw;
  text-align: left;
}

.top-banner-image {
  width: 4vw;
  height: auto;
  position: absolute;
  margin-left: 14vw;
  margin-top: -0.75vw;
  transition: transform 0.3s ease-in-out, margin-top 0.3s ease-in-out;
}

.top-banner-image-shadow {
  width: 4vw;
  height: auto;
  position: absolute;
  margin-left: 14vw;
  margin-top: -0.75vw;
  transition: transform 0.3s ease-in-out, margin-top 0.3s ease-in-out;
  filter: brightness(0.2) blur(0.5vw);
}

.top-banner:hover .top-banner-image {
  transform: rotate(7deg);
  margin-top: -1.75vw;
}

.top-banner-button {
  font-size: 0.8vw;
  color: #fff;
  text-align: left;
  text-decoration: none;
  margin-bottom: 2.75vw;
  font-weight: 600;
}



@media (max-width: 768px) {
  .top-banners {
    display: none;
}
}




.top-banner-red {
  background-image: linear-gradient(to right, rgb(96, 12, 12), rgb(200, 53, 0));
  box-shadow: 0vw 0vw 0.35vw 0.01vw rgba(126, 14, 14, 0.489);
}

.top-banner-white {
  
background-image: linear-gradient(to right, rgb(204 161 93), rgb(200 178 97));
  
box-shadow: 0vw 0vw 0.35vw 0.01vw rgba(160 156 76, 0.901);
}

.top-banner-reserve {
  background-image: linear-gradient(to right, rgb(43, 87, 40), rgb(85, 150, 67));
  box-shadow: 0vw 0vw 0.35vw 0.01vw rgba(28, 80, 20, 0.901);
}












/* BESTSELLERS */

.bestseller-container {
  text-align: center;
  padding-top: 2vw;
  width: 75%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .bestseller-container {
    width: 98%;
  }
}

.bestseller-title {
  font-size: 3.5vw;
  margin-bottom: -0.8vw;
  font-weight: 500;
  text-align: center;
}

.bestseller-subtitle {
  font-size: 1.15vw;
  text-align: center;
}

@media (max-width: 768px) {
  .bestseller-title {
    font-size: 7vw;
    margin-bottom: -1.8vw;
  }
  
  .bestseller-subtitle {
    font-size: 2.5vw;
  }
}

.bestseller-categories {
  display: flex;
  justify-content: center;
  gap: 1vw;
  width: 71%;
  margin: 0 auto;
  margin-bottom: 2vw;
}

.category-button {
  background-color: rgba(129, 36, 36, 0.256);
  border: none;
  color: rgb(61, 12, 12);
  font-weight: 500;
  font-size: 1.2vw;
  border-radius: 0.75vw;
  padding: 0.75vw;
  margin: 0 auto;
  margin-top: 1vw;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.category-button:hover {
  background-color: rgba(129, 36, 36, 0.2);

}

.category-button.active {
  background-color: rgb(129, 36, 36);
  color: white;
}

@media (max-width: 768px) {
  .bestseller-categories {
    width: 98%;
    margin-bottom: 5vw;
  }
  
  .category-button {
    font-size: 2.35vw;
    border-radius: 1.35vw;
    padding: 1.25vw;
    margin-top: 0.5vw;
  }
}


.bestseller-wines {
  display: flex;
  width: 100%;
  margin-top: 1.5vw;
  align-items: center;
  margin: 0 auto;
  justify-content: center;
}

.bestseller-wine {
  width: 13vw;
  margin: 0vw 1vw;
  text-align: center;
  position: relative;
  transition: transform 0.3s ease;
}

@media (max-width: 768px) {
  .bestseller-wine {
    width: 30%;
    margin: 0vw 2vw;
  }
}

.bestseller-wine-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.85vw;
  margin-bottom: 1.25vw;
}

.bestseller-wine-name {
  font-size: 1.2vw;
  margin-top: -1vw;
  font-weight: 400;
  border-radius: 0.7vw;
  color: white;
  padding: 0.7vw;
  background-color: #922f2f;
  transition: color 0.3s ease, background-color 0.3s ease;
  width: 14vw;
  border: none;
  margin-left: -0.15vw;
  cursor: pointer;
}

@media (max-width: 768px) {
  .bestseller-wine-info {
    margin-top: 1vw;
  }
  
  .bestseller-wine-name {
    font-size: 3vw;
    border-radius: 1.35vw;
    padding: 1.5vw;
    width: 30vw;
  }
}

.bestseller-wine-name:hover {
  background-color: rgba(129, 36, 36, 0.256);
  color: rgb(61, 12, 12);
}

.bestseller-wine-img {
  width: 6vw;
  transition: transform 0.3s ease;
  z-index: 1;
}

@media (max-width: 768px) {
  .bestseller-wine-img {
    width: 15vw;
  }
}

.bestseller-wine:hover {
  transform: scale(1.015);
}

.bestseller-wine:hover .bestseller-wine-bg {
  transform: scale(1.025);
}

.bestseller-wine:hover .bestseller-wine-img {
  animation: shake 0.5s ease forwards;
}

@keyframes shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  50% { transform: rotate(-3deg); }
  100% { transform: rotate(0) scale(1.015); }
}

.bestseller-wine-price {
  display: block;
  position: absolute;
  bottom: -3vw;
  left: 50%;
  transform: translateX(-50%) translateY(-89%);
  width: 13.25vw;
  background-color: #922f2f;
  color: white;
  border-radius: 0.5vw;
  padding: 0.5vw;
  font-size: 1vw;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 768px) {
  .bestseller-wine-price {
    bottom: -7.5vw;
    width: 30vw;
    border-radius: 1.35vw;
    font-size: 3vw;
  }
}

.bestseller-wine:hover .bestseller-wine-price {
  opacity: 1;
}


.bestseller-cart-button {
  background-color: #922f2f;
  padding: 0.6vw;
  align-items: center;
  margin-top: -1vw;
  border-radius: 0.5vw;
  margin-left: 0.15vw;
  cursor: pointer;
  color: white;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 1.35vw;
}

.bestseller-cart-button:hover {
  background-color: rgba(129, 36, 36, 0.256);
  border: none;
  color: rgb(61, 12, 12);
}

.fa-plus {
  font-size: 1.35vw;
  transition: transform 0.3s ease;
  transform: rotate(0deg);
}

@media (max-width: 768px) {
  .bestseller-cart-button {
    padding: 2.35vw;
    border-radius: 1.35vw;
    margin-left: 0.75vw;
  }

  .fa-plus:before {
    font-size: 4vw;
    margin-top: -1.35vw;
  }
}

.bestseller-cart-button:hover .fa-plus {
  transform: rotate(90deg);
}

.bestseller-wine-button {
  background-color: rgba(129, 36, 36, 0.256);
  border: none;
  color: rgb(61, 12, 12);
  font-weight: 500;
  font-size: 1.2vw;
  border-radius: 0.75vw;
  padding: 0.75vw;
  margin: 0 auto;
  margin-top: 2vw;
  width: 53%;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
  text-align: center;
} 

.bestseller-wine-button:hover {
  background-color: rgba(129, 36, 36, 0.2);
}

@media (max-width: 768px) {
  .bestseller-wine-button {
    font-size: 4vw;
    border-radius: 1.35vw;
    width: 97%;
    margin-top: 5vw;
  }
}









/* ABOUT */

.about-container {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='920' height='280' preserveAspectRatio='none' viewBox='0 0 920 280'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1389%26quot%3b)' fill='none'%3e%3crect width='920' height='280' x='0' y='0' fill='url(%26quot%3b%23SvgjsLinearGradient1390%26quot%3b)'%3e%3c/rect%3e%3cpath d='M516.904%2c214.712C542.95%2c215.661%2c570.983%2c208.48%2c583.901%2c185.844C596.739%2c163.348%2c588.541%2c135.669%2c574.396%2c113.97C561.661%2c94.435%2c540.185%2c84.401%2c516.904%2c83.07C490.511%2c81.561%2c460.397%2c84.018%2c446.773%2c106.673C432.891%2c129.757%2c443.193%2c158.658%2c457.859%2c181.252C471.06%2c201.589%2c492.674%2c213.829%2c516.904%2c214.712' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M333.266%2c265.896C346.86%2c264.868%2c354.38%2c251.637%2c361.067%2c239.757C367.569%2c228.205%2c375.132%2c214.842%2c368.449%2c203.394C361.795%2c191.997%2c346.443%2c191.409%2c333.266%2c192.138C321.641%2c192.781%2c310.848%2c197.362%2c304.237%2c206.946C296.463%2c218.217%2c291.035%2c232.313%2c297.084%2c244.596C303.711%2c258.053%2c318.309%2c267.027%2c333.266%2c265.896' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M282.8898321778872 85.17286894055216L205.22154487940156 131.73999868771037 273.7782471242286 171.32122918351428z' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M22.095%2c67.457C30.386%2c67.132%2c36.627%2c60.77%2c40.683%2c53.532C44.629%2c46.489%2c46.271%2c38.157%2c42.517%2c31.01C38.507%2c23.375%2c30.708%2c17.707%2c22.095%2c18.142C14.024%2c18.55%2c8.995%2c25.905%2c4.96%2c32.907C0.933%2c39.895%2c-2.785%2c47.871%2c0.799%2c55.096C4.708%2c62.977%2c13.305%2c67.802%2c22.095%2c67.457' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M111.36452496099888 186.06971267542994L43.278082583936225 138.29830614639334 35.678138981255614 210.6069394138341z' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M863.295%2c237.783C874.583%2c237.895%2c886.205%2c234.436%2c892.109%2c224.814C898.253%2c214.801%2c897.028%2c202.264%2c891.425%2c191.938C885.522%2c181.059%2c875.67%2c171.499%2c863.295%2c171.717C851.186%2c171.93%2c842.499%2c182.197%2c836.828%2c192.898C831.578%2c202.805%2c829.76%2c214.594%2c835.455%2c224.252C841.072%2c233.778%2c852.237%2c237.673%2c863.295%2c237.783' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M127.97032219741615 188.1253497755278L91.21474816598754 194.60634916869608 119.31403427145426 246.49921051925486z' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M602.647%2c196.037C612.063%2c195.829%2c619.523%2c189.406%2c624.637%2c181.497C630.371%2c172.629%2c635.701%2c161.904%2c630.749%2c152.577C625.597%2c142.872%2c613.62%2c139.498%2c602.647%2c140.077C592.69%2c140.602%2c584.119%2c146.591%2c579.25%2c155.293C574.502%2c163.779%2c574.065%2c174.075%2c578.907%2c182.508C583.768%2c190.974%2c592.887%2c196.253%2c602.647%2c196.037' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M307.3136039938812 256.67272672861355L265.2465359332691 202.8293349735364 211.40314417819195 244.89640303414848 253.47021223880404 298.73979478922564z' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M704.5612093287039 120.96722964004844L639.1047440607075 143.50569810015548 661.6432125208146 208.96216336815183 727.0996777888109 186.42369490804475z' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M194.7711214982001 38.579059399937194L264.2985062367035 61.169876129040105 286.8893229658064-8.357508609463281 217.36193822730303-30.948325338566192z' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M941.0140551692128 97.23096392021641L913.1214023436099 34.583039952168896 850.4734783755624 62.47569277777184 878.3661312011653 125.12361674581936z' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M647.3042602858873 92.65991798565693L621.6306282256129 167.22155948455242 696.1922697245084 192.89519154482673 721.8659017847827 118.33355004593126z' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M588.6868858039218 248.85627690768806L546.8564386649128 230.23216192211888 539.8354897560636 302.28989012341697z' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M634.901298952936 173.6587943733549L584.0724894875356 160.98574882245003 590.4773258938785 243.56548579600323z' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M43.184%2c153.643C54.902%2c153.444%2c63.353%2c143.431%2c68.67%2c132.986C73.44%2c123.614%2c73.861%2c112.703%2c68.683%2c103.55C63.423%2c94.254%2c53.853%2c88.439%2c43.184%2c87.941C31.519%2c87.397%2c19.125%2c90.897%2c13.203%2c100.962C7.216%2c111.137%2c10.318%2c123.615%2c16.157%2c133.876C22.074%2c144.273%2c31.223%2c153.846%2c43.184%2c153.643' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M106.95042077120944 213.9955024071614L77.90506047047879 209.39516927190567 85.52724091796051 255.2633762906295z' fill='rgba(154%2c 49%2c 49%2c 0.23)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1389'%3e%3crect width='920' height='280' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='17.39%25' y1='-57.14%25' x2='82.61%25' y2='157.14%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1390'%3e%3cstop stop-color='rgba(94%2c 13%2c 13%2c 1)' offset='0.01'%3e%3c/stop%3e%3cstop stop-color='rgba(119%2c 26%2c 26%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
  margin: 0 auto;
  width: 100%;
  height: auto;
  margin-top: 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0vw 5vw;
}

@media (max-width: 768px) {
  .about-container {
    margin-top: 8vw;
  }
}

.about-text {
  width: 55vw;
  color: #fff;
  text-align: left;
  margin-left: 1vw;
}

.about-text h2 {
  font-size: 3vw;
  margin-top: 1vw;
  margin-bottom: 1vw;
}

.about-text p {
  font-size: 1.5vw;
  margin-left: 0.5vw;
  font-weight: 300;
  line-height: 1.65vw;
}

@media (max-width: 768px) {
  .about-text {
    width: 100vw;
  }
  
  .about-text h2 {
    font-size: 6vw;
    margin-bottom: 1vw;
    margin-top: 5vw;
  }
  
  .about-text p {
    font-size: 3vw;
    margin-left: 0.5vw;
    font-weight: 300;
    line-height: 2.75vw;
    margin-bottom: 5vw;
  }
}

.about-image-container {
  position: relative;
  width: 25vw;
  height: 25vw;
}

.about-ornament {
  position: absolute;
  top: 3vw;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
  border-radius: 50%;
  z-index: 1;
  transition: all 0.5s ease;
}

.about-image {
  position: relative;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  margin: 0 auto;
  transition: transform 0.5s ease;
  margin-left: 7vw;
  transform: scale(1.25) rotate(5deg) translate(1vw, -1vw);
}

.about-image-container:hover .about-image {
  transform: scale(1.35) rotate(8deg) translate(1vw, -1vw);
}

.about-image-container:hover .about-ornament {
  transform: none; /* Ornament sa nehýbe */
}


@media (max-width: 768px) {
  .about-image-container {
    display: none;
  }
  .about-image {
    display: none;
  }
  .about-ornament {
    display: none;
  }
}









/* CONTACT */

.contact-container {
  background-image: linear-gradient(to right, rgb(96, 12, 12), rgb(138, 20, 20));
  margin: 0 auto;
  width: 55vw;
  border-radius: 1.5vw;
  height: auto;
  margin-top: 5vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2vw 3vw;
  position: relative;
}

@media (max-width: 768px) {
  .contact-container {
    width: 96%;
    border-radius: 3vw;
    margin-top: 8vw;
  }
}

.contact-title {
  color: white;
  font-weight: 500;
  font-size: 2.5vw;
  margin-top: -0.1vw;
}

.contact-description {
  color: white;
  font-weight: 200;
  font-size: 1.35vw;
  margin-top: -2.35vw;
  margin-bottom: 1.5vw;
}

@media (max-width: 768px) {
  .contact-title {
    font-size: 5vw;
    margin-top: -0.1vw;
  }
  
  .contact-description {
    font-size: 2.65vw;
    margin-top: -4.5vw;
    margin-bottom: 2vw;
  }
}

.contact-inputs {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.contact-input {
  width: 49.5%;
  margin-bottom: 1vw;
  padding: 0.85vw 1vw;
  border: none;
  border-radius: 1vw;
  font-size: 1vw;
}

.contact-textarea {
  width: 100%;
  height: 10vw;
  padding: 1vw;
  border: none;
  border-radius: 1vw;
  font-size: 1vw;
  margin-bottom: 1vw;
}

@media (max-width: 768px) {
  .contact-input {
    padding: 1vw 1.35vw;
    font-size: 3vw;
  }
  
  .contact-textarea {
    height: 23vw;
    padding: 1vw 1.35vw;
    border-radius: 1vw;
    font-size: 3vw;
  }
}

.contact-button {
  width: 100%;
  padding: 1vw;
  border: none;
  border-radius: 1vw;
  background-color: rgba(224, 224, 224, 0);
  color: white;
  cursor: not-allowed;
  transition: background-color 0.2s ease, color 0.2s ease;
  font-size: 1.15vw;
  border: 0.2vw solid white;
}

.contact-button.active {
  background-color: #ffffff;
  color: rgb(0, 0, 0);
  cursor: pointer;
  transition: background-color 0.2s ease, border 0.2s ease; 
  border: 0.2vw solid white;
}
.contact-button.active:hover {
  background-color: rgb(231, 231, 231);
  border: 0.2vw solid rgb(231, 231, 231);
}

@media (max-width: 768px) {
  .contact-button {
    padding: 1.25vw;
    font-size: 3.5vw;
    margin-bottom: 1vw;
  }
}

@media (max-width: 768px) {
  .contact-separator {
    height: 8vw;
  }
}