/*sizes nav*/

body {
  --burger-line-height: 3px;
  --nav-icon-height: 17px;
  --nav-icon-width: 31px;
  --nav-icon-padding-X: 2.4vw;
  --nav-icon-padding-Y: clamp(25px,3.14vw,55px);
}

/*sizes,pad,marg*/

:root {
  --h1-font-size: clamp(15px, calc(15px + (22 - 15) * ((100vw - 375px) / (1920 - 375))), 22px);
  --h2-font-size: clamp(30px, calc(30px + (65 - 30) * ((100vw - 375px) / (1920 - 375))), 65px);
  --h3-font-size: clamp(30px, calc(30px + (38 - 30) * ((100vw - 375px) / (1920 - 375))), 38px);
  --h4-font-size: clamp(14px, calc(14px + (20 - 14) * ((100vw - 375px) / (1920 - 375))), 20px);
  --h5-font-size: clamp(24px, calc(24px + (35 - 24) * ((100vw - 375px) / (1920 - 375))), 35px);
  --base-font-size: clamp(16px, calc(16px + (28 - 16) * ((100vw - 375px) / (1920 - 375))), 28px);
  --base-font-size-small: clamp(15px, calc(15px + (17 - 15) * ((100vw - 375px) / (1920 - 375))), 17px);
  --btn-font-size: clamp(14px, calc(14px + (15 - 14) * ((100vw - 375px) / (1920 - 375))), 15px);
  --header-font-size: clamp(35px, calc(35px + (110 - 35) * ((100vw - 375px) / (1920 - 375))), 110px);
  /**spacing*/
  --gap-s: clamp(10px, 2.66vw, 15px);
  --gap-m: clamp(20px, 1.736vw, 30px);
  --gap-l: clamp(30px, 2.89vw, 50px);
  --gap-xl: clamp(100px, 20vw, 150px);
  --cont-gap: clamp(100px, 15vw, 200px);
  /**Theme Specific*/
  --btn-group-height: 3.6rem;
  --icon-size:29px;
}

/*fonts*/

:root {
  --mainfont: "Bai Jamjuree";
  --headlinefont: "pf-fuel-decay", sans-serif;
}

/*VC*/

@media (min-width: 1920px) {
  /*----------------- ELEMENT -------------*/
  /*----------------- END ELEMENT ---------*/
}

@media (max-width: 1500px) {
  :root {
    --polaroid-gap: 6vw;
  }
}

@media (max-width: 1200px) {
  /*----------------- ELEMENT -------------*/
  /*----------------- END ELEMENT ---------*/
}

@media (max-width: 1024px) {
  :root {
    --polaroid-gap: 8vw;
  }
}

@media (max-width: 990px) {
  /*----------------- ELEMENT -------------*/
  /*----------------- END ELEMENT ---------*/
}

@media (max-width: 767px) {
  /*----------------- ELEMENT -------------*/
  /*----------------- END ELEMENT ---------*/
}

@media (max-width: 576px) {
  body {
    --burger-line-height: 3px;
    --nav-icon-height: 15px;
    --nav-icon-width: 29px;
    --nav-icon-padding-X: 5vw;
}
}

@media (max-width: 420px) {
  /*----------------- ELEMENT -------------*/
  /*----------------- END ELEMENT ---------*/
}

@media (max-width: 320px) {
  /*----------------- ELEMENT -------------*/
  /*----------------- END ELEMENT ---------*/
}