
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');


/*clamp formula
  clamp(min, preferred, max)
  preferred = calc(min + (difference * ((100vw - minViewport) / (maxViewport - minViewport))))
  screen 320px viewport → font-size = 16px
  screen 1920px or 2400px viewport → font-size = 24px
  difference = 24 - 16 = 8px
  calc(16px + (8 * ((100vw - 320px) / (1920 - 320))))
  font-size: clamp(16px, calc(16px + (8 * ((100vw - 320px) / 1600))), 24px);
*/

/* --px-24: clamp(9.6px, calc(9.6px + (14.4 * ((100vw - 320px) / 1600))), 24px); */

/*
  letter-spacing: (letter-spacing/1000)em
   letter-spacing: 107*10/1000 px
*/

:root{
  --lexend: 'Lexend Deca', sans-serif;

  --brown: #986E42;
  --light-brown: #928454;
  --gray: #545454;
  --light-gray: #686868;
  --white: #fff;

  --px-1400: clamp(560px, calc(560px + (840 * ((100vw - 320px) / 1600))), 1400px);
  --px-1332: clamp(532.8px, calc(532.8px + (799.2 * ((100vw - 320px) / 1600))), 1332px);
  --px-1232: clamp(492.8px, calc(492.8px + (739.20 * ((100vw - 320px) / 1600))), 1232px);
  --px-1175: clamp(470px, calc(470px + (705 * ((100vw - 320px) / 1600))), 1175px);

  /* --px-236: clamp(94.4px, calc(94.4px + (141.6 * ((100vw - 320px) / 1600))), 236px);
  --px-160: clamp(64px, calc(64px + (96 * ((100vw - 320px) / 1600))), 160px);
  --px-148: clamp(59.20px, calc(59.20px + (88.80 * ((100vw - 320px) / 1600))), 148px);
  --px-140: clamp(56px, calc(56px + (84 * ((100vw - 320px) / 1600))), 140px);
  --px-120: clamp(48px, calc(48px + (72 * ((100vw - 320px) / 1600))), 120px);
  --px-112: clamp(44.80px, calc(44.80px + (67.2 * ((100vw - 320px) / 1600))), 112px);
  --px-108: clamp(43.2px, calc(43.2px + (64.8 * ((100vw - 320px) / 1600))), 108px);
  --px-100: clamp(40px, calc(40px + (60 * ((100vw - 320px) / 1600))), 100px);
  --px-92: clamp(36.8px, calc(36.8px + (55.2 * ((100vw - 320px) / 1600))), 92px);
  --px-88: clamp(35.2px, calc(35.2px + (52.8 * ((100vw - 320px) / 1600))), 88px);
  --px-84: clamp(33.6px, calc(33.6px + (50.4 * ((100vw - 320px) / 1600))), 84px);
  --px-80: clamp(32px, calc(32px + (48 * ((100vw - 320px) / 1600))), 80px);
  --px-76: clamp(30.4px, calc(30.4px + (45.6 * ((100vw - 320px) / 1600))), 76px);
  --px-72: clamp(28.8px, calc(28.8px + (43.2 * ((100vw - 320px) / 1600))), 72px);
  --px-68: clamp(27.20px, calc(27.20px + (40.8 * ((100vw - 320px) / 1600))), 68px);
  --px-64: clamp(25.6px, calc(25.6px + (38.4 * ((100vw - 320px) / 1600))), 64px);
  --px-60: clamp(24px, calc(24px + (36 * ((100vw - 320px) / 1600))), 60px);
  --px-56: clamp(22.40px, calc(22.40px + (33.6 * ((100vw - 320px) / 1600))), 56px);
  --px-52: clamp(20.80px, calc(20.80px + (31.2 * ((100vw - 320px) / 1600))), 52px);
  --px-48: clamp(19.2px, calc(19.2px + (28.8 * ((100vw - 320px) / 1600))), 48px);
  --px-44: clamp(17.6px, calc(17.6px + (26.4 * ((100vw - 320px) / 1600))), 44px);
  --px-40: clamp(16px, calc(16px + (24 * ((100vw - 320px) / 1600))), 40px);
  --px-36: clamp(14.4px, calc(14.4px + (21.6 * ((100vw - 320px) / 1600))), 36px);
  --px-32: clamp(12.8px, calc(12.8px + (19.2 * ((100vw - 320px) / 1600))), 32px);
  --px-28: clamp(11.20px, calc(11.20px + (16.80 * ((100vw - 320px) / 1600))), 28px);
  --px-24: clamp(9.6px, calc(9.6px + (14.4 * ((100vw - 320px) / 1600))), 24px);
  --px-20: clamp(8px, calc(8px + (12 * ((100vw - 320px) / 1600))), 20px);
  --px-18: clamp(7.2px, calc(7.2px + (10.8 * ((100vw - 320px) / 1600))), 18px);
  --px-16: clamp(6.4px, calc(6.4px + (9.6 * ((100vw - 320px) / 1600))), 16px);
  --px-12: clamp(4.8px, calc(4.8px + (7.2 * ((100vw - 320px) / 1600))), 12px);
  --px-8: clamp(3px, calc(3px + (5 * ((100vw - 320px) / 1600))), 8px);
  --px-6: clamp(2.4px, calc(2.4px + (3.6 * ((100vw - 320px) / 1600))), 6px); */

  /* viewport range */
  --percent: 40;
  --min-vw: 320px;
  --max-vw: 1920px;

  /* --v-18: calc(18 * var(--percent) / 100);
  --fs-7:  calc(var(--v-18) * 1px);
  --fs-18: 18px;
 
  --px-18: clamp(var(--fs-7), calc(var(--fs-7) + (var(--fs-18) - var(--fs-7)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),var(--fs-18)); */

  --v-236: calc(236 * var(--percent) / 100);
  --fs-236:  calc(var(--v-236) * 1px);
  --px-236: clamp(var(--fs-236), calc(var(--fs-236) + (236px - var(--fs-236)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),236px);

  --v-160: calc(160 * var(--percent) / 100);
  --fs-160:  calc(var(--v-160) * 1px);
  --px-160: clamp(var(--fs-160), calc(var(--fs-160) + (160px - var(--fs-160)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),160px);

  --v-148: calc(148 * var(--percent) / 100);
  --fs-148:  calc(var(--v-148) * 1px);
  --px-148: clamp(var(--fs-148), calc(var(--fs-148) + (148px - var(--fs-148)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),148px);

  --v-140: calc(140 * var(--percent) / 100);
  --fs-140:  calc(var(--v-140) * 1px);
  --px-140: clamp(var(--fs-140), calc(var(--fs-140) + (140px - var(--fs-140)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),140px);

  --v-120: calc(120 * var(--percent) / 100);
  --fs-120:  calc(var(--v-120) * 1px);
  --px-120: clamp(var(--fs-120), calc(var(--fs-120) + (120px - var(--fs-120)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),120px);

  --v-112: calc(112 * var(--percent) / 100);
  --fs-112:  calc(var(--v-112) * 1px);
  --px-112: clamp(var(--fs-112), calc(var(--fs-112) + (112px - var(--fs-112)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),112px);

  --v-108: calc(108 * var(--percent) / 100);
  --fs-108:  calc(var(--v-108) * 1px);
  --px-108: clamp(var(--fs-108), calc(var(--fs-108) + (108px - var(--fs-108)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),108px);

  --v-100: calc(100 * var(--percent) / 100);
  --fs-100:  calc(var(--v-100) * 1px);
  --px-100: clamp(var(--fs-100), calc(var(--fs-100) + (100px - var(--fs-100)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),100px);

  --v-92: calc(92 * var(--percent) / 100);
  --fs-92:  calc(var(--v-92) * 1px);
  --px-92: clamp(var(--fs-92), calc(var(--fs-92) + (92px - var(--fs-92)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),92px);

  --v-88: calc(88 * var(--percent) / 100);
  --fs-88:  calc(var(--v-88) * 1px);
  --px-88: clamp(var(--fs-88), calc(var(--fs-88) + (88px - var(--fs-88)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),88px);

  --v-84: calc(84 * var(--percent) / 100);
  --fs-84:  calc(var(--v-84) * 1px);
  --px-84: clamp(var(--fs-84), calc(var(--fs-84) + (84px - var(--fs-84)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),84px);

  --v-80: calc(80 * var(--percent) / 100);
  --fs-80:  calc(var(--v-80) * 1px);
  --px-80: clamp(var(--fs-80), calc(var(--fs-80) + (80px - var(--fs-80)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),80px);

  --v-76: calc(76 * var(--percent) / 100);
  --fs-76:  calc(var(--v-76) * 1px);
  --px-76: clamp(var(--fs-76), calc(var(--fs-76) + (76px - var(--fs-76)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),76px);

  --v-72: calc(72 * var(--percent) / 100);
  --fs-72:  calc(var(--v-72) * 1px);
  --px-72: clamp(var(--fs-72), calc(var(--fs-72) + (72px - var(--fs-72)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),72px);

  --v-68: calc(68 * var(--percent) / 100);
  --fs-68:  calc(var(--v-68) * 1px);
  --px-68: clamp(var(--fs-68), calc(var(--fs-68) + (68px - var(--fs-68)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),68px);

  --v-64: calc(64 * var(--percent) / 100);
  --fs-64:  calc(var(--v-64) * 1px);
  --px-64: clamp(var(--fs-64), calc(var(--fs-64) + (64px - var(--fs-64)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),64px);

  --v-60: calc(60 * var(--percent) / 100);
  --fs-60:  calc(var(--v-60) * 1px);
  --px-60: clamp(var(--fs-60), calc(var(--fs-60) + (60px - var(--fs-60)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),60px);

  --v-56: calc(56 * var(--percent) / 100);
  --fs-56:  calc(var(--v-56) * 1px);
  --px-56: clamp(var(--fs-56), calc(var(--fs-56) + (56px - var(--fs-56)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),56px);

  --v-52: calc(52 * var(--percent) / 100);
  --fs-52:  calc(var(--v-52) * 1px);
  --px-52: clamp(var(--fs-52), calc(var(--fs-52) + (52px - var(--fs-52)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),52px);

  --v-48: calc(48 * var(--percent) / 100);
  --fs-48:  calc(var(--v-48) * 1px);
  --px-48: clamp(var(--fs-48), calc(var(--fs-48) + (48px - var(--fs-48)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),48px);

  --v-44: calc(44 * var(--percent) / 100);
  --fs-44:  calc(var(--v-44) * 1px);
  --px-44: clamp(var(--fs-44), calc(var(--fs-44) + (44px - var(--fs-44)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),44px);

  --v-40: calc(40 * var(--percent) / 100);
  --fs-40:  calc(var(--v-40) * 1px);
  --px-40: clamp(var(--fs-40), calc(var(--fs-40) + (40px - var(--fs-40)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),40px);

  --v-36: calc(36 * var(--percent) / 100);
  --fs-36:  calc(var(--v-36) * 1px);
  --px-36: clamp(var(--fs-36), calc(var(--fs-36) + (36px - var(--fs-36)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),36px);

  --v-32: calc(32 * var(--percent) / 100);
  --fs-32:  calc(var(--v-32) * 1px);
  --px-32: clamp(var(--fs-32), calc(var(--fs-32) + (32px - var(--fs-32)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),32px);

  --v-28: calc(28 * var(--percent) / 100);
  --fs-28:  calc(var(--v-28) * 1px);
  --px-28: clamp(var(--fs-28), calc(var(--fs-28) + (28px - var(--fs-28)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),28px);

  --v-24: calc(24 * var(--percent) / 100);
  --fs-24:  calc(var(--v-24) * 1px);
  --px-24: clamp(var(--fs-24), calc(var(--fs-24) + (24px - var(--fs-24)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),24px);

  --v-20: calc(20 * var(--percent) / 100);
  --fs-20:  calc(var(--v-20) * 1px);
  --px-20: clamp(var(--fs-20), calc(var(--fs-20) + (20px - var(--fs-20)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),20px);

  --v-18: calc(18 * var(--percent) / 100);
  --fs-18:  calc(var(--v-18) * 1px);
  --px-18: clamp(var(--fs-18), calc(var(--fs-18) + (18px - var(--fs-18)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),18px);

  --v-16: calc(16 * var(--percent) / 100);
  --fs-16:  calc(var(--v-16) * 1px);
  --px-16: clamp(var(--fs-16), calc(var(--fs-16) + (16px - var(--fs-16)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),16px);

  --v-12: calc(12 * var(--percent) / 100);
  --fs-12:  calc(var(--v-12) * 1px);
  --px-12: clamp(var(--fs-12), calc(var(--fs-12) + (12px - var(--fs-12)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),12px);

  --v-8: calc(8 * var(--percent) / 100);
  --fs-8:  calc(var(--v-8) * 1px);
  --px-8: clamp(var(--fs-8), calc(var(--fs-8) + (8px - var(--fs-8)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),8px);

  --v-6: calc(6 * var(--percent) / 100);
  --fs-6:  calc(var(--v-6) * 1px);
  --px-6: clamp(var(--fs-6), calc(var(--fs-6) + (6px - var(--fs-6)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),6px);


  


}
/* @media screen and (max-width: 640px){
  :root{
    
  --v-40: 40;
  --v-18: calc(18 * var(--v-40) / 100);
  --px-18: calc(var(--v-18) * 1px);

  }
} */

@media screen and (max-width: 700px) {
  :root{
    --percent: 52;
  }
}
@media screen and (max-width: 479px) {
  :root{
    --percent: 80;
  }
}

*{margin: 0;padding: 0;box-sizing: border-box;}
html {-webkit-font-smoothing: antialiased; /* for macOS/iOS */-moz-osx-font-smoothing: grayscale; /* for Firefox on macOS */text-rendering: optimizeLegibility;}
body{overflow: auto;font-family: var(--lexend);font-optical-sizing: auto;font-weight: 400;font-style: normal;color: var(--gray);}
.pg-container{max-width: 1920px;margin: 0 auto;position: relative;box-shadow: 0 0 0.375em rgba(0, 0, 0, 0.25);}
img{display: block;max-width: 100%;}
li{list-style: none;}
a{text-decoration: none;color: inherit;}
.mt-0{margin-top: 0 !important;}
.pt-0{padding-top: 0 !important;}
.mb-0{margin-bottom: 0 !important;}
.pb-0{padding-bottom: 0 !important;}
::-webkit-input-placeholder {color: inherit;}
::-moz-placeholder{color: inherit;}
:-ms-input-placeholder{color: inherit;}
:-moz-placeholder{color: inherit;}
input, textarea, button{border-radius: 0;border: none;}
button, a{cursor: pointer;padding: 0;background-color: transparent;border-radius: 0;}
input:focus, textarea:focus, button:focus, select:focus{outline: none;}
strong{font-weight: 600;}
.clear{clear: both;display: block;}
.text-center{text-align: center;}

.fade-right{transform: translate3d(-100px, 0, 0);opacity: 0;transition-property: opacity, transform;transition-duration: 1s;transition-timing-function: ease;}
.fade-right.active{opacity: 1;transform: translateZ(0);}
.fade-down{transform: translate3d(0, -100px, 0);opacity: 0;transition-property: opacity, transform;transition-duration: 1s;transition-timing-function: ease;}
.fade-down.active{opacity: 1;transform: translateZ(0);}
.delay1{transition-delay: .3s;}
.delay2{transition-delay: .6s;}
.delay3{transition-delay: .9s;}
.delay4{transition-delay: 1.2s;}


