/* =================================== */
/* =================================== */
/* =================================== */
/* Danylo Oliinyk - https://iamdev.lol/ */
/* =====November 2025 For Statoplan =====*/
/* =================================== */
/* =================================== */
/* =================================== */

/* Root Rules Start */
/* Neue Machina – accent font */
@font-face {
  font-family: "Neue Machina";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src:
    url("../fonts/NeueMachina-Ultralight.woff2") format("woff2"),
    url("../fonts/NeueMachina-Ultralight.woff") format("woff");
}

@font-face {
  font-family: "Neue Machina";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src:
    url("../fonts/NeueMachina-Light.woff2") format("woff2"),
    url("../fonts/NeueMachina-Light.woff") format("woff");
}

@font-face {
  font-family: "Neue Machina";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url("../fonts/NeueMachina-Regular.woff2") format("woff2"),
    url("../fonts/NeueMachina-Regular.woff") format("woff");
}

@font-face {
  font-family: "Neue Machina";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:
    url("../fonts/NeueMachina-Medium.woff2") format("woff2"),
    url("../fonts/NeueMachina-Medium.woff") format("woff");
}

@font-face {
  font-family: "Neue Machina";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    url("../fonts/NeueMachina-Bold.woff2") format("woff2"),
    url("../fonts/NeueMachina-Bold.woff") format("woff");
}

@font-face {
  font-family: "Neue Machina";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src:
    url("../fonts/NeueMachina-Ultrabold.woff2") format("woff2"),
    url("../fonts/NeueMachina-Ultrabold.woff") format("woff");
}

@font-face {
  font-family: "Neue Machina";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src:
    url("../fonts/NeueMachina-Black.woff2") format("woff2"),
    url("../fonts/NeueMachina-Black.woff") format("woff");
}

/* Root tokens */
:root {
  --font-main: "Roboto Mono", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-accent: "Neue Machina", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;

  --color-background: #0A0A0A;
}


body {
  font-family: var(--font-main);
  background-color: var(--color-background);
  color: #FFF;
}

*{
  margin: 0;
  padding: 0;
}

ul {
  list-style-position: inside;
}

em{
  font-style: normal;
}

main{
  position: relative;
}

.no-page-break {
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}

.container {
  width: calc(100% - 64px); 
  max-width: 1440px; 
  margin: 0 auto; 
  padding: 0 32px; 
}

.container-hero {
  width: 100%; 
  margin: 0 auto; 
  padding: 0; 
}

.container-main {
  width: calc(100% - 64px); 
  max-width: 1150px; 
  margin: 0 auto; 
  padding: 0 145px; 
}

.distance-xxs{
  padding: 32px;
  padding-top: 73px;
}

.distance-xs{
  padding-top: 110px;
  padding-bottom: 60px;
}

.distance-coach{
  padding-top: 180px;
  padding-bottom: 0px;
}

.distance-section{
  padding-top: 100px;
  padding-bottom: 100px;
}

.distance-spec{
  padding-top: 0px;
  padding-bottom: 100px;
}

.distance-reg{
  padding-top: 200px;
  padding-bottom: 100px;
}

.distance-hero{
  padding-top: 10px;
  padding-bottom: 170px;
}

.distance-section-bt{
  padding-top: 0px;
  padding-bottom: 80px;
}

.bg-gray{
  background: #F5F5F7;
}

.bg-blue{
  background: var(--blue);
}

.bg-black{
  background: #2C2C2C;
}

.bg-main-hero{
  background: linear-gradient(180deg, #0B0B0B 0%, rgba(11, 11, 11, 0.00) 50%, #0B0B0B 100%), url(../img/bg/main.avif) lightgray 50% / cover no-repeat;
}

.bg-main{
  background: linear-gradient(180deg, rgba(16, 16, 16, 0.00) 0%, #101010 100%), url(../img/bg/main.webp) rgb(0, 0, 0) 50% / cover no-repeat;
}

@media (max-width: 1440px) {
  .container, .container-main {
    max-width: 1440px;
    padding: 0 16px; 
  }
}

@media (max-width: 768px) {
  .container, .container-main {
    padding: 0 16px;
  }
}

@media (max-width:767px){
  .container, .container-main{
    width: calc(100% - 32px);
  }
}

.main{
  width: 100%;
}

html{
  scrollbar-color: #ea291b89 transparent; /* Firefox */
  scrollbar-width: thin;                /* Firefox */
}
html::-webkit-scrollbar{ width: 10px; height: 10px; }
html::-webkit-scrollbar-track{ background: transparent; }
html::-webkit-scrollbar-thumb{
  background: #ea291b7e;
  border-radius: 8px;
}
html::-webkit-scrollbar-thumb:hover{ background: #ea291b77; }

::selection {
  background: #ea291b7b; 
  color: #000;        
}


::-moz-selection {
  background: #ea291b6f;
  color: #000;
}

/* Root Rules End */
@media (min-width: 768px) and (max-width: 1023px) {
  /* tablet styles */
}
@media (max-width: 767px) {
  /* mobile styles */
}
/* =================================== */
/* =================================== */
/* =================================== */
/* Danylo Oliinyk - https://iamdev.lol/ */
/* =====October 2025 For Statoplan =====*/
/* =================================== */
/* =================================== */
/* =================================== */