/*sizes nav*/

body {
  --burger-line-height: 4px;
  --nav-icon-height: 26px;
  --nav-icon-width: 51px;
  --nav-icon-padding-X: clamp(30px, 4.07vw, 70px);
  --nav-icon-padding-Y: 5.1vw;
  --height-minifrom: 80px;
  --height-icons: 25px;
  --header-spacing-home: 60px;

}

/*sizes,pad,marg*/

:root {
  --h1-font-size: clamp(17px,
      calc(17px + (21 - 17) * ((100vw - 375px) / (1920 - 375))),
      21px);
  --h2-font-size: clamp(23px,
      calc(23px + (45 - 23) * ((100vw - 375px) / (1920 - 375))),
      45px);
  --h3-font-size: clamp(20px,
      calc(20px + (40 - 20) * ((100vw - 375px) / (1920 - 375))),
      40px);
  --h4-font-size: clamp(15px,
      calc(15px + (17 - 15) * ((100vw - 375px) / (1920 - 375))),
      17px);
  --h5-font-size: clamp(20px,
      calc(20px + (25 - 20) * ((100vw - 375px) / (1920 - 375))),
      25px);
  --h6-font-size: clamp(15px,
      calc(15px + (32 - 15) * ((100vw - 375px) / (1920 - 375))),
      32px);
  --base-font-size: clamp(16px,
      calc(16px + (19 - 16) * ((100vw - 375px) / (1920 - 375))),
      19px);
  --btn-font-size: clamp(15px,
      calc(15px + (16 - 15) * ((100vw - 375px) / (1920 - 375))),
      16px);
  --intro-text: clamp(18px,
      calc(18px + (30 - 18) * ((100vw - 375px) / (1920 - 375))),
      30px);
  /**spacing*/
  --gap-s: clamp(10px, 0.75vw, 15px);
  --gap-m: clamp(20px, 1.5vw, 30px);
  --gap-l: clamp(40px, 3.45vw, 70px);
  --gap-xl: clamp(80px, 7.5vw, 150px);
  --cont-gap: clamp(80px, 10vw, 200px);

  --bg-padding: clamp(70px, 18vw, 130px);
}

/*fonts*/

:root {
  --mainfont: "freight-neo-pro";
  --headlinefont: "freight-neo-pro";
  --headlinealternative: "hello-bloomie-script";
}

/*VC*/

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

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

@media (max-width: 1200px) {
  body {
    --height-minifrom: 65px;
  }
}

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

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

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

@media (max-width: 576px) {
  body {
    --height-minifrom: 50px;
    --burger-line-height: 3px;
    --nav-icon-height: 22px;
    --nav-icon-width: 34px;
    --header-spacing-home: 30px;
  }
}

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

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