/* ------------------------- Osmo [https://osmo.supply/] ------------------------- */
/* ------------------------- Variables ------------------------------------------- */

:root {
    --color-light: var(--color-neutral-200);
    --color-dark: var(--color-neutral-800);
    --color-primary: #ff4c24;
    --color-neutral-100: #ffffff;
    --color-neutral-200: #efeeec;
    --color-neutral-300: #e3e1de;
    --color-neutral-400: #cbc8c5;
    --color-neutral-500: #818180;
    --color-neutral-600: #2c2c2c;
    --color-neutral-700: #1f1f1f;
    --color-neutral-800: #131313;
    --color-neutral-900: #000000;
    --color-white: var(--color-neutral-100);
    --color-black: var(--color-neutral-900);
    --color-error: var(--color-primary);
    --color-success: #0ba954; 
    --cubic-default: cubic-bezier(0.65, 0.05, 0, 1);
    --duration-default: 0.735s;
    --animation-default: var(--duration-default) var(--cubic-default);
    --gap: 2em;
    --section-padding: calc(3.5em + (var(--gap) * 2));
    --container-padding: 2em;
    --header-height: calc(1.5em + (var(--gap) * 2));
    --footer-height: calc(2.785em + (var(--gap) * 2));
  }
  
  /* Tablet */
  @media screen and (max-width: 991px) {
    :root {
      --container-padding: 1.5em;
    }
  }
  
  /* Mobile Landscape */
  @media screen and (max-width: 767px) {
    :root {
      --container-padding: 1em;
    }
  }
  
  /* Mobile Portrait */
  @media screen and (max-width: 479px) {
    :root {}
  }
  
  /* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */
  
  /* Desktop */
  :root {
    --size-unit: 16; /* body font-size in design - no px */
    --size-container-ideal: 1440; /* screen-size in design - no px */
    --size-container-min: 992px;
    --size-container-max: 1920px;
    --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
    --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
  }
  
  /* Tablet */
  @media screen and (max-width: 991px) {
    :root {
      --size-container-ideal: 834; /* screen-size in design - no px */
      --size-container-min: 768px;
      --size-container-max: 991px;
    }
  }
  
  /* Mobile Landscape */
  @media screen and (max-width: 767px) {
    :root {
      --size-container-ideal: 390; /* screen-size in design - no px */
      --size-container-min: 480px;
      --size-container-max: 767px;
    }
  }
  
  /* Mobile Portrait */
  @media screen and (max-width: 479px) {
    :root {
      --size-container-ideal: 390; /* screen-size in design - no px */
      --size-container-min: 320px;
      --size-container-max: 479px;
    }
  }
  
  
  /* ------------------------- Hide Scrollbar -------------------------------------------------- */
  
  body ::-webkit-scrollbar,
  body::-webkit-scrollbar {display: none;} /* Chrome, Safari, Opera */
  body {-ms-overflow-style: none;} /* IE & Edge */
  html {scrollbar-width: none;} /* Firefox */
  
  /* ------------------------- Reset -------------------------------------------------- */
  
  *,
  *:after,
  *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: initial;
  }
  
  html,
  body {
    -webkit-font-smoothing: antialiased;
  }
  
  svg {
    max-width: none;
    height: auto;
    box-sizing: border-box;
    vertical-align: middle;
  }
  
  a {
    color: inherit;
  }
  
  /* Selection */
  ::selection {
    background-color: var(--color-primary);
    color: var(--color-dark);
    text-shadow: none;
  }
  
  ::-moz-selection {
    background-color: var(--color-primary);
    color: var(--color-dark);
    text-shadow: none;
  }