/*
Theme Name: Biznes Bez Filtra
Author: Eugenii Rudikow, Yurii Hryhoriev
Description: Biznes bez filtra dla Twój StartUp
Version: 1.0
*/

@import url(./assets/css/header.css);
@import url(./assets/css/main.css);
@import url(./assets/css/footer.css);
@import url(./assets/css/modal.css);

:root {
  --green-primary: #5abaa5;
  --green-secondary: #46a691;
  --green-hover: #78d8c3;
  --grey-primary: #4a4a4a;
  --black-primary: #171717;
  --white-primary: #ffffff;
  --timeline-color: #454545;
  --border-secondary: #efefef;
  --form-input-border: #d5d7da;
  --background-modal: #f8f7f7;
  --modal-border-primary: #e7e7e7;
  --modal-icons: #818181;

  --title-xxl: 64px;
  --title-xl: 32px;
  --title-l: 32px;
  --title-m: 30px;
  --title-s: 24px;
  --text-xl: 24px;
  --text-l: 20px;
  --text-m: 18px;
  --text-s: 16px;
  --counter-font-size: 40px;
  --title-price: 48px;
  --title-modal: 20px;

  --plyr-color-main: #fff;
  --marker-size: 28px;
}

@media (width >= 768px) {
  :root {
    --title-xl: 48px;
    --title-s: 32px;
    --text-s: 18px;
    --counter-font-size: 48px;
    --text-m: 24px;
    --title-modal: 32px;
  }
}

@media (width >= 1440px) {
  :root {
    --title-xxl: 72px;
    --title-xl: 48px;
    --title-l: 36px;
    --title-s: 32px;
    --text-xl: 32px;
    --text-s: 20px;
    --counter-font-size: 56px;
    --title-price: 64px;

    --marker-size: 36px;
  }
}

@media (width >= 1920px) {
}

/* === Reset === */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Arial, sans-serif;
  line-height: 1.6;
  color: var(--black-primary);
  background-color: var(--white-primary);
}

/* === base elements === */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.2;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  font-size: inherit;
}

.button--green {
  background: var(--green-primary);
  border: none;
  border-radius: 100px;
  color: var(--white-primary);
  height: 100%;
  cursor: pointer;
}

.button--green:hover,
.faq-link:hover {
  background: var(--green-hover);
}

.button--green:active,
.faq-link:active {
  background: var(--green-secondary);
  color: var(--white-primary);
}

.container {
  width: 100%;
  max-width: clamp(327px, 87.2vw, 1248px);
  margin-inline: auto;
}

.flex {
  display: flex;
}

@media (width >= 1440px) {
  .container {
    max-width: clamp(1248px, 74.7vw, 1434px);
  }
}