@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Kalnia:wght@100..700&display=swap');
body{font-family: var(--host-grotesk);font-weight: 400; font-style: normal;}
/*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
*/

/*clamp new formula for chrome and firefox
  for --percent: 40
  12 * 40 / 100 = 4.8
  slope  = (12 − 4.8) / (1920 − 320) × 100 = 0.45
  offset = 4.8 − (0.45 × 320 / 100) = 3.36
  --px-12: clamp(4.8px, calc(3.36px + 0.45vw), 12px); 
  --px-12: clamp(minSize,calc(offset + slope * 1vw), maxSize);
)
*/


:root{

  --theme-clr: #A56D1E;
  --black: #0D0D0D;
  --kalnia : "Kalnia", serif;
  --host-grotesk :"Host Grotesk", sans-serif;


  /* viewport range */
  --px-1844: clamp(737.6px, calc(516.32px + 69.15vw), 1844px);
  --px-1736: clamp(694.40px, calc(486.08px + 65.10vw), 1736px); 
  --px-1570: clamp(628px, calc(439.6px + 58.875vw), 1570px); 
  --px-1500: clamp(600px, calc(420px + 56.25vw), 1500px);
  --px-1485: clamp(594.00px, calc(415.80px + 55.69vw), 1485px);
  --px-1440: clamp(576px, calc(403.2px + 54vw), 1440px);
  --px-1420: clamp(568px, calc(397.6px + 54vw), 1420px);
  --px-1360: clamp(544px, calc(380.8px + 54vw), 1360px);
  --px-1340: clamp(536px, calc(375.2px + 50.25vw), 1340px);
  --px-1260: clamp(504px, calc(352.8px + 54vw), 1260px);
  --px-1240: clamp(496px, calc(347.2px + 46.5vw), 1240px);
  --px-1184: clamp(473.60px, calc(331.52px + 44.40vw), 1184px);
  --px-1140: clamp(456px, calc(319.2px + 42.75vw), 1140px);
  --px-1032: clamp(412.80px, calc(288.96px + 38.70vw), 1032px);
  --px-932: clamp(372.80px, calc(260.96px + 34.95vw), 932px);
  --px-497: clamp(198.80px, calc(139.16px + 18.64vw), 497px);
  --px-472: clamp(188.80px, calc(132.16px + 17.70vw), 472px);
  --px-350: clamp(140.00px, calc(98.00px + 13.13vw), 350px);
  --px-268: clamp(107.20px, calc(75.04px + 10.05vw), 268px);
  --px-260: clamp(104.00px, calc(72.80px + 9.75vw), 260px);
  --px-236: clamp(94.40px, calc(66.08px + 8.85vw), 236px);
  --px-220: clamp(88.00px, calc(61.60px + 8.25vw), 220px);
  --px-208: clamp(83.20px, calc(58.24px + 7.80vw), 208px);
  --px-200: clamp(80.00px, calc(56.00px + 7.50vw), 200px);
  --px-192: clamp(76.80px, calc(53.76px + 7.20vw), 192px);
  --px-188: clamp(75.20px, calc(52.64px + 7.05vw), 188px);
  --px-172: clamp(68.80px, calc(48.16px + 6.45vw), 172px);
  --px-160: clamp(64.00px, calc(44.80px + 6.00vw), 160px);
  --px-148: clamp(59.20px, calc(41.44px + 5.55vw), 148px);
  --px-140: clamp(56.00px, calc(39.20px + 5.25vw), 140px);
  --px-136: clamp(54.40px, calc(38.08px + 5.10vw), 136px);
  --px-120: clamp(48.00px, calc(33.60px + 4.50vw), 120px);
  --px-112: clamp(44.80px, calc(31.36px + 4.20vw), 112px);
  --px-108: clamp(43.20px, calc(30.24px + 4.05vw), 108px);
  --px-104: clamp(41.60px, calc(29.12px + 3.90vw), 104px);
  --px-100: clamp(40.00px, calc(28.00px + 3.75vw), 100px);
  --px-96: clamp(38.40px, calc(26.88px + 3.60vw), 96px);
  --px-92: clamp(36.80px, calc(25.76px + 3.45vw), 92px);
  --px-88: clamp(35.20px, calc(24.64px + 3.30vw), 88px);
  --px-84: clamp(33.60px, calc(23.52px + 3.15vw), 84px);
  --px-80: clamp(32.00px, calc(22.40px + 3.00vw), 80px);
  --px-76: clamp(30.40px, calc(21.28px + 2.85vw), 76px);
  --px-72: clamp(28.80px, calc(20.16px + 2.70vw), 72px);
  --px-68: clamp(27.20px, calc(19.04px + 2.55vw), 68px);
  --px-64: clamp(25.60px, calc(17.92px + 2.40vw), 64px);
  --px-60: clamp(24.00px, calc(16.80px + 2.25vw), 60px);
  --px-56: clamp(22.40px, calc(15.68px + 2.10vw), 56px);
  --px-52: clamp(20.80px, calc(14.56px + 1.95vw), 52px);
  --px-48: clamp(19.20px, calc(13.44px + 1.80vw), 48px);
  --px-44: clamp(17.60px, calc(12.32px + 1.65vw), 44px);
  --px-40: clamp(16.00px, calc(11.20px + 1.50vw), 40px);
  --px-36: clamp(14.40px, calc(10.08px + 1.35vw), 36px);
  --px-32: clamp(12.80px, calc(8.96px + 1.20vw), 32px);
  --px-28: clamp(11.20px, calc(7.84px + 1.05vw), 28px);
  --px-24: clamp(9.60px, calc(6.72px + 0.90vw), 24px);
  --px-22: clamp(8.80px, calc(6.16px + 0.83vw), 22px);
  --px-20: clamp(8.00px, calc(5.60px + 0.75vw), 20px);
  --px-18: clamp(7.20px, calc(5.04px + 0.68vw), 18px);
  --px-16: clamp(6.40px, calc(4.48px + 0.60vw), 16px);
  --px-14: clamp(5.60px, calc(3.92px + 0.53vw), 14px);
  --px-12: clamp(4.80px, calc(3.36px + 0.45vw), 12px);
  --px-8: clamp(3.20px, calc(2.24px + 0.30vw), 8px);
  --px-6: clamp(2.40px, calc(1.68px + 0.23vw), 6px);

}

@media screen and (max-width: 700px) {
  :root{
    /* --percent: 50; */
    --px-1844: clamp(922.00px, calc(737.6px + 57.63vw), 1844px);
    --px-1736: clamp(868.00px, calc(694.40px + 54.25vw), 1736px);
    --px-1570: clamp(785px, calc(628px + 49.06vw), 1570px);
    --px-1500: clamp(750px, calc(600px + 46.875vw), 1500px);
    --px-1485: clamp(742.50px, calc(594.00px + 46.41vw), 1485px);
    --px-1440: clamp(720px, calc(576px + 45vw), 1440px);
     --px-1420: clamp(710px, calc(568px + 45vw), 1420px);
    --px-1360: clamp(680px, calc(544px + 45vw), 1360px);
    --px-1340: clamp(670px, calc(536px + 41.875vw), 1340px);
    --px-1260: clamp(630px, calc(504px + 45vw), 1260px);
    --px-1240: clamp(620px, calc(496px + 38.75vw), 1240px);
    --px-1184: clamp(592.00px, calc(473.60px + 37.00vw), 1184px);
    --px-1140: clamp(570px, calc(456px + 35.625vw), 1140px);
    --px-1032: clamp(516.00px, calc(412.80px + 32.25vw), 1032px);
    --px-932: clamp(466.00px, calc(372.80px + 29.13vw), 932px);
    --px-497: clamp(248.50px, calc(198.80px + 15.53vw), 497px);
    --px-472: clamp(236.00px, calc(188.80px + 14.75vw), 472px);
    --px-350: clamp(175.00px, calc(140.00px + 10.94vw), 350px);
    --px-268: clamp(134.00px, calc(107.20px + 8.38vw), 268px);
    --px-260: clamp(130.00px, calc(104.00px + 8.13vw), 260px);
    --px-236: clamp(118.00px, calc(94.40px + 7.38vw), 236px);
    --px-220: clamp(110.00px, calc(88.00px + 6.88vw), 220px);
    --px-208: clamp(104.00px, calc(83.20px + 6.50vw), 208px);
    --px-200: clamp(100.00px, calc(80.00px + 6.25vw), 200px);
    --px-192: clamp(96.00px, calc(76.80px + 6.00vw), 192px);
    --px-188: clamp(94.00px, calc(75.20px + 5.88vw), 188px);
    --px-172: clamp(86.00px, calc(68.80px + 5.38vw), 172px);
    --px-160: clamp(80.00px, calc(64.00px + 5.00vw), 160px);
    --px-148: clamp(74.00px, calc(59.20px + 4.63vw), 148px);
    --px-140: clamp(70.00px, calc(56.00px + 4.38vw), 140px);
    --px-136: clamp(68.00px, calc(54.40px + 4.25vw), 136px);
    --px-120: clamp(60.00px, calc(48.00px + 3.75vw), 120px);
    --px-112: clamp(56.00px, calc(44.80px + 3.50vw), 112px);
    --px-108: clamp(54.00px, calc(43.20px + 3.38vw), 108px);
    --px-104: clamp(52.00px, calc(41.60px + 3.25vw), 104px);
    --px-100: clamp(50.00px, calc(40.00px + 3.13vw), 100px);
    --px-96: clamp(48.00px, calc(38.40px + 3.00vw), 96px);
    --px-92: clamp(46.00px, calc(36.80px + 2.88vw), 92px);
    --px-88: clamp(44.00px, calc(35.20px + 2.75vw), 88px);
    --px-84: clamp(42.00px, calc(33.60px + 2.63vw), 84px);
    --px-80: clamp(40.00px, calc(32.00px + 2.50vw), 80px);
    --px-76: clamp(38.00px, calc(30.40px + 2.38vw), 76px);
    --px-72: clamp(36.00px, calc(28.80px + 2.25vw), 72px);
    --px-68: clamp(34.00px, calc(27.20px + 2.13vw), 68px);
    --px-64: clamp(32.00px, calc(25.60px + 2.00vw), 64px);
    --px-60: clamp(30.00px, calc(24.00px + 1.88vw), 60px);
    --px-56: clamp(28.00px, calc(22.40px + 1.75vw), 56px);
    --px-52: clamp(26.00px, calc(20.80px + 1.63vw), 52px);
    --px-48: clamp(24.00px, calc(19.20px + 1.50vw), 48px);
    --px-44: clamp(22.00px, calc(17.60px + 1.38vw), 44px);
    --px-40: clamp(20.00px, calc(16.00px + 1.25vw), 40px);
    --px-36: clamp(18.00px, calc(14.40px + 1.13vw), 36px);
    --px-32: clamp(12.80px, calc(12.80px + 1.00vw), 32px);
    --px-28: clamp(11.20px, calc(11.20px + 0.88vw), 28px);
    --px-24: clamp(16.00px, calc(9.60px + 0.75vw), 24px);
    --px-22: clamp(11.00px, calc(8.80px + 0.69vw), 22px);
    --px-20: clamp(10.00px, calc(8.00px + 0.63vw), 20px);
    --px-18: clamp(9.00px, calc(7.20px + 0.56vw), 18px);
    --px-16: clamp(8.00px, calc(6.40px + 0.50vw), 16px);
    --px-14: clamp(7.00px, calc(5.60px + 0.44vw), 14px);
    --px-12: clamp(6.00px, calc(4.80px + 0.38vw), 12px);
    --px-8: clamp(4.00px, calc(3.20px + 0.25vw), 8px);
    --px-6: clamp(3.00px, calc(2.40px + 0.19vw), 6px);

  }
}
@media screen and (max-width: 479px) {
  :root{
    /* --percent: 80; */
    --px-1844: clamp(1290.80px, calc(1180.16px + 34.58vw), 1844px);
    --px-1736: clamp(1215.20px, calc(1111.04px + 32.55vw), 1736px);
    --px-1570: clamp(1099.00px, calc(1004.80px + 29.44vw), 1570px);
    --px-1500: clamp(1050.00px, calc(960.00px + 28.13vw), 1500px);
    --px-1485: clamp(1039.50px, calc(950.40px + 27.84vw), 1485px);
    --px-1440: clamp(1008.00px, calc(921.60px + 27.00vw), 1440px);
    --px-1420: clamp(994.00px, calc(908.00px + 27.00vw), 1420px);
    --px-1360: clamp(952.00px, calc(870.40px + 27.00vw), 1360px);
    --px-1340: clamp(938.00px, calc(857.60px + 25.13vw), 1340px);
    --px-1260: clamp(882.00px, calc(806.40px + 27.00vw), 1260px);
    --px-1240: clamp(868.00px, calc(793.60px + 23.25vw), 1240px);
    --px-1184: clamp(828.80px, calc(757.76px + 22.20vw), 1184px);
    --px-1140: clamp(798.00px, calc(729.60px + 21.38vw), 1140px);
    --px-1420: clamp(994.00px, calc(908.00px + 27.00vw), 1420px);
    --px-1032: clamp(722.40px, calc(660.48px + 19.35vw), 1032px);
    --px-932: clamp(652.40px, calc(596.48px + 17.48vw), 932px);
    --px-497: clamp(347.90px, calc(318.08px + 9.32vw), 497px);
    --px-472: clamp(330.40px, calc(302.08px + 8.85vw), 472px);
    --px-350: clamp(245.00px, calc(224.00px + 6.56vw), 350px);
    --px-268: clamp(187.60px, calc(171.52px + 5.03vw), 268px);
    --px-260: clamp(182.00px, calc(166.40px + 4.88vw), 260px);
    --px-236: clamp(165.20px, calc(151.04px + 4.43vw), 236px);
    --px-220: clamp(154.00px, calc(140.80px + 4.13vw), 220px);
    --px-208: clamp(145.60px, calc(133.12px + 3.90vw), 208px);
    --px-200: clamp(140.00px, calc(128.00px + 3.75vw), 200px);
    --px-192: clamp(134.40px, calc(122.88px + 3.60vw), 192px);
    --px-188: clamp(131.60px, calc(120.32px + 3.53vw), 188px);
    --px-172: clamp(120.40px, calc(110.08px + 3.23vw), 172px);
    --px-160: clamp(112.00px, calc(102.40px + 3.00vw), 160px);
    --px-148: clamp(103.60px, calc(94.72px + 2.78vw), 148px);
    --px-140: clamp(98.00px, calc(89.60px + 2.63vw), 140px);
    --px-136: clamp(95.20px, calc(87.04px + 2.55vw), 136px);
    --px-120: clamp(84.00px, calc(76.80px + 2.25vw), 120px);
    --px-112: clamp(78.40px, calc(71.68px + 2.10vw), 112px);
    --px-108: clamp(75.60px, calc(69.12px + 2.03vw), 108px);
    --px-104: clamp(72.80px, calc(66.56px + 1.95vw), 104px);
    --px-100: clamp(70.00px, calc(64.00px + 1.88vw), 100px);
    --px-96: clamp(67.20px, calc(61.44px + 1.80vw), 96px);
    --px-92: clamp(64.40px, calc(58.88px + 1.73vw), 92px);
    --px-88: clamp(61.60px, calc(56.32px + 1.65vw), 88px);
    --px-84: clamp(58.80px, calc(53.76px + 1.58vw), 84px);
    --px-80: clamp(56.00px, calc(51.20px + 1.50vw), 80px);
    --px-76: clamp(53.20px, calc(48.64px + 1.43vw), 76px);
    --px-72: clamp(50.40px, calc(46.08px + 1.35vw), 72px);
    --px-68: clamp(47.60px, calc(43.52px + 1.28vw), 68px);
    --px-64: clamp(44.80px, calc(40.96px + 1.20vw), 64px);
    --px-60: clamp(42.00px, calc(38.40px + 1.13vw), 60px);
    --px-56: clamp(39.20px, calc(35.84px + 1.05vw), 56px);
    --px-52: clamp(36.40px, calc(33.28px + 0.98vw), 52px);
    --px-48: clamp(33.60px, calc(30.72px + 0.90vw), 48px);
    --px-44: clamp(30.80px, calc(28.16px + 0.83vw), 44px);
    --px-40: clamp(28.00px, calc(25.60px + 0.75vw), 40px);
    --px-36: clamp(25.20px, calc(23.04px + 0.68vw), 36px);
    --px-32: clamp(22.40px, calc(20.48px + 0.60vw), 32px);
    --px-28: clamp(19.60px, calc(17.92px + 0.53vw), 28px);
    --px-24: clamp(16.80px, calc(15.36px + 0.45vw), 24px);
    --px-22: clamp(15.40px, calc(14.08px + 0.41vw), 22px);
    --px-20: clamp(14.00px, calc(12.80px + 0.38vw), 20px);
    --px-18: clamp(12.60px, calc(11.52px + 0.34vw), 18px);
    --px-16: clamp(11.20px, calc(10.24px + 0.30vw), 16px);
    --px-14: clamp(9.80px, calc(8.96px + 0.26vw), 14px);
    --px-12: clamp(8.40px, calc(7.68px + 0.23vw), 12px);
    --px-8: clamp(5.60px, calc(5.12px + 0.15vw), 8px);
    --px-6: clamp(4.20px, calc(3.84px + 0.11vw), 6px);
  }
}

*{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-optical-sizing: auto;font-weight: 400;font-style: normal;color: var(--black);position: relative;font-size: var(--px-16);}
.pg-container{max-width: 1920px;margin: 0 auto;position: relative;box-shadow: 0 0 0.375em rgba(0, 0, 0, 0.25);;overflow: hidden;}
img{display: block;max-width: 100%;}
li{list-style: none;}
a{text-decoration: none;color: inherit;}
::-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;}

.fade-right{transform: translate3d(-100px, 0, 0);opacity: 0;transition-property: opacity, transform;transition-duration: 1s;transition-timing-function: ease;}
.fade-left{transform: translate3d(100px, 0, 0);opacity: 0;transition-property: opacity, transform;transition-duration: 1s;transition-timing-function: ease;}
.fade-right.active, .fade-left.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);}
.fade-in{opacity: 0;transition-property: opacity, transform;transition-duration: 1s;transition-timing-function: ease;}
.fade-in.active{opacity: 1;}
.delay1{transition-delay: .3s;}
.delay2{transition-delay: .6s;}
.delay3{transition-delay: .9s;}
.delay4{transition-delay: 1.2s;}