:root {
  --fonts-primary:
    "Roboto", sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
    Cantarell, Noto Sans, sans-serif;
  --ff-heading: "Roboto", sans-serif;
  --font-family: var(--fonts-primary);
  --font-size: 16px;
  --line-height: 1.5;
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 15px;
  --radius-xl: 20px;
  --radius-xxl: 30px;
  --box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.149);
  --box-shadow-small: 0 3px 10px 0 rgba(102, 113, 129, 0.3);
  --box-shadow-md: 0 2px 6px rgba(102, 113, 129, 0.3);
  --box-shadow-xs: 0 2px 4px 0 rgba(57, 78, 107, 0.17);
  --transition: 0.2s ease-in-out;
  --selection: rgba(255, 122, 43, 0.5);
  --gradient-dark: linear-gradient(227deg, #100c16, #192423);
  --gradient-dark-accent: linear-gradient(
    90deg,
    #4d6e51 0%,
    #7d915e 50%,
    var(--accent) 100%
  );
  --gradient-green-secondary: linear-gradient(225deg, #2682af, #2682af);
  --black: #000;
  --white: #fff;
  --primary: #799163;
  --secondary: #2682af;
  --gray: #595959;
  --light: #cddde5;
  --medium: #93938c;
  --error: #ef3d38;
  --line: #d4dae0;
  --bg: #f6f4f0;
  --blue-bg: #eff2fb;
  --green-bg: #e8f9e2;
  --dark: #001957;
  --primary-dark: #1d4289;
  --dark-gray: #444448;
  --light-gray: #b7b7b7;
  --light-second: #f7f7f7;
  --accent: #799163;
  --accent-secondary: #2682af;
  --accent-third: #ffb600;
  --success: #3ab65d;
  --warning: #eab308;
  --error-light: rgba(255, 87, 82, 0.1);
  --default: var(--gray);
  --border: var(--light);
  --whatsapp-color: #25d366;
  --telegram-color: #18a3e6;
  --vk-color: #07f;
  --color-maroon: #663333;
  --z-index-header: 200;
  --z-index-menu: 100;
  --z-index-dropdown: 100;
  --z-index-modal: 500;
  --z-index-cookies: 900;
  --z-index-notification: 1000;
  --g-xxxs: 4px;
  --g-xxs: 8px;
  --g-xs: 12px;
  --g-sm: 16px;
  --g-md: 24px;
  --g-lg: 32px;
  --g-xl: 40px;
  --counter-width: 20px;
  --counter-height: 20px;
}
.swiper {
  --swiper-pagination-color: var(--primary);
  --swiper-pagination-bullet-opacity: 0.5;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-border-radius: calc(
    var(--swiper-pagination-bullet-size) / 2
  );
  --swiper-pagination-bullet-inactive-color: var(--light);
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 10px;
  --swiper-pagination-bottom: 0;
  --swiper-pagination-m-top: 24px;
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    src: local("Roboto-Regular"),url(../assets/fonts/Roboto-Regular.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: italic;
    font-weight: 400;
    src: local("Roboto-Italic"),url(../assets/fonts/Roboto-Italic.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 300;
    src: local("Roboto-Light"),url(../assets/fonts/Roboto-Light.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    src: local("Roboto-Medium"),url(../assets/fonts/Roboto-Medium.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    src: local("Roboto-SemiBold"),url(../assets/fonts/Roboto-SemiBold.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    src: local("Roboto-Bold"),url(../assets/fonts/Roboto-Bold.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: italic;
    font-weight: 600;
    src: local("Roboto-SemiBoldItalic"),url(../assets/fonts/Roboto-SemiBoldItalic.ttf) format("truetype")
}