@import url(../fonts/index.css);

@import url(./components/header.css);
@import url(./components/burger.css);
@import url(./components/welcome.css);
@import url(./components/clients.css);
@import url(./components/grid.css);
@import url(./components/reviews.css);
@import url(./components/image-section.css);
@import url(./components/about.css);
@import url(./components/massmedia.css);
@import url(./components/rating.css);
@import url(./components/consultation.css);
@import url(./components/example.css);
@import url(./components/tariff.css);
@import url(./components/start.css);
@import url(./components/faq.css);
@import url(./components/contacts.css);
@import url(./components/footer.css);
@import url(./components/grid-contacts.css);
@import url(./components/grid-consultation.css);
@import url(./components/grid-start.css);
@import url(./components/form.css);
@import url(./components/popup.css);
@import url(./components/cookie.css);
@import url(./components/our-products.css);

@import url(./ui.css);

/* $mobile_sm: 400px;
$mobile: 576px;
$tablet: 768px;
$desk_sm: 1024px;
$desk_md: 1280px;
$desk_lg: 1440px;
$desk_max: 1900px; */

:root {
  --bg-color-light: #f2f2f2;
  --text-color-light: #000000;
  --bg-color-dark: #000000;

  --text-color-dark: #ffffff;
  --color-violet: #5544ff;
  --burger-bg-color-light: #f2f2f2;
  --burger-bg-color-dark: #000000;
  --logo-light: url(/assets/img/logo-light-theme.png);
  --logo-dark: url(/assets/img/logo-black-theme.png);
  --logo-light-mb: url(/assets/img/logo-mb-light-theme.svg);
  --logo-dark-mb: url(/assets/img/logo-mb-black-theme.svg);
  --logo-light-bs: url(/assets/img/logo-bs-light-theme.png);
  --logo-dark-bs: url(/assets/img/logo-bs-black-theme.png);
  --logo-light-sb: url(/assets/img/logo-sb-light-theme.png);
  --logo-dark-sb: url(/assets/img/logo-sb-black-theme.png);
  --transition: 0.3s;
  --burger-btn: url(/assets/img/burger.png);
  --close-btn: url(/assets/img/close.svg);

  --btn-color-hover: #931e0d;
  --main-link-color-hover: #4033c4;
}

@media screen and (min-width: 768px) {
  :root {
    --burger-bg-color-light: #fff;
    --burger-bg-color-dark: #0d0d0d;
    --burger-btn-color-light: #fff;
    --burger-btn-color-dark: #000;
  }
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  list-style: none;
  outline: none;
  line-height: 1.3;
}

html {
  /* scroll-behavior: smooth; */
}

/* Стили для светлой темы */
body.light {
  --bg-color-block: #000;
  --bg-color: var(--bg-color-light);
  --text-color: var(--text-color-light);
  --burger-bg-color: var(--burger-bg-color-light);
  --logo: var(--logo-light);
  --logo-mb: var(--logo-light-mb);
  --logo-bs: var(--logo-light-bs);
  --logo-sb: var(--logo-light-sb);
  --burger-btn-color: var(--burger-btn-color-light);
  --bg-grid: linear-gradient(270.04deg, #3322aa 2.52%, rgba(51, 34, 170, 0) 88.38%);
  --bg-grid-left: linear-gradient(90deg, #3322aa 2.52%, rgba(51, 34, 170, 0) 88.38%);
  --bg-grid-before: rgba(255, 255, 255, 0.7);
  --bg-color-grid-item: #dedcea;
  --bg-example-item: #e6e6e6;
  --header-bg-color: #f9f9f9;
  --border-color: rgba(0, 0, 0, 0.3);
  --faq-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='11' viewBox='0 0 22 11'%3E%3Cpath d='M1 1L11 10L21 1' stroke='black' fill='none'/%3E%3C/svg%3E");
}

/* Стили для темной темы */
body.dark {
  --bg-color-block: #0d0d0d;
  --bg-color: var(--bg-color-dark);
  --text-color: var(--text-color-dark);
  --burger-bg-color: var(--burger-bg-color-dark);
  --logo: var(--logo-dark);
  --logo-mb: var(--logo-dark-mb);
  --logo-bs: var(--logo-dark-bs);
  --logo-sb: var(--logo-dark-sb);
  --burger-btn-color: var(--burger-btn-color-dark);
  --bg-grid: var(--bg-color-light);
  --bg-grid-left: var(--bg-color-light);
  --bg-grid-before: rgba(0, 0, 0, 0.7);
  --bg-color-grid-item: #dedcea;
  --bg-example-item: #0d0d0d;
  --border-color: rgba(255, 255, 255, 0.3);
  --faq-arrow: url("data:image/svg+xml,%3Csvg width='22' height='11' viewBox='0 0 22 11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L11 10L21 1' stroke='white'/%3E%3C/svg%3E");
  --header-bg-color: #0d0d0d;
}

body.burger-open {
  --burger-btn: var(--close-btn);
}

body {
  -webkit-tap-highlight-color: transparent;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
  min-height: 100dvh;
  width: 100%;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  font-family: 'Gilroy', sans-serif;

  background-color: var(--bg-color);
  color: var(--text-color);
}

.page-wrapper {
  /* max-width: 1600px; */
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
  position: relative;
}

.container {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
}

@media screen and (min-width: 400px) {
  .container {
    padding: 0 20px;
  }
}
@media screen and (min-width: 768px) {
  .container {
    padding: 0 10px;
  }
}

main {
  flex-grow: 1;
}

@media screen and (min-width: 768px) {
  .page-wrapper::before {
    z-index: 10;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    background-color: var(--burger-bg-color);
    height: 100%;
    transition: width var(--transition);
  }

  body.burger-open {
    --burger-btn: url(/assets/img/burger.png);

    .header__btns-wrap {
      margin-right: 320px;
    }

    .page-wrapper::before {
      width: 320px;
    }
  }

  main {
  }
  .container {
    /* padding: 0 40px; */
  }
}

@media screen and (min-width: 1248px) {
  body.burger-open {
    .header__btns-wrap {
      margin-right: calc((1880px - 100vw) * 0.52);
    }
  }
}

@media screen and (min-width: 1600px) {
  body.burger-open {
    .header__btns-wrap {
      margin-right: 138px;
    }
  }
}