/* Benzin */

@font-face {
  font-family: 'Benzin';
  src: url('./fonts/Benzin/Benzin-Regular.eot');
  src: local('Benzin Regular'), local('Benzin-Regular'),
    url('./fonts/Benzin/Benzin-Regular.eot?#iefix') format('embedded-opentype'),
    url('./fonts/Benzin/Benzin-Regular.woff2') format('woff2'),
    url('./fonts/Benzin/Benzin-Regular.woff') format('woff'),
    url('./fonts/Benzin/Benzin-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Geologica */

@font-face {
  font-family: 'Geologica';
  src: url('./fonts/Geologica/Geologica-Regular.eot');
  src: local('Geologica Regular'), local('Geologica-Regular'),
    url('./fonts/Geologica/Geologica-Regular.eot?#iefix') format('embedded-opentype'),
    url('./fonts/Geologica/Geologica-Regular.woff2') format('woff2'),
    url('./fonts/Geologica/Geologica-Regular.woff') format('woff'),
    url('./fonts/Geologica/Geologica-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --benzin: 'Benzin', 'Montserrat', 'Roboto', 'Titillium_Web', Helvetica, Arial, sans-serif;
  --geologica: 'Geologica', 'Roboto', 'Titillium_Web', Helvetica, Arial, sans-serif;
  --font-title: var(--benzin);
  --font-text: var(--geologica);

  --color-base-white: #FFFFFF;
  --color-base-black: #2C2C36;
  --color-text-base: #f2f2f2;


  /* Основной брендовый цвет */
  --color-brand-primary: #00C1D4;
  --color-brand-primary-light: #49ECFD;
  --color-brand-primary-lighter: #A9F6FE;
  --color-brand-primary-dark: #01636D;

  /* Нейтральные цвета */
  --color-gray-dark: #828282;
  --color-gray: #b8b8b8;
  --color-gray-light: #d1d1d1;

}

body {
  max-width: 100vw;
  min-height: 100vh;
  background-color: var(--color-base-black);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 28px;
  font-weight: 300;
  color: var(--color-text-base);
  overflow-x: hidden;

  /* background-image: url('./bg.webp');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%;
  opacity: 0.4;
  z-index: -1; */
}




.wrapper {
  width: 100%;
  max-width: 435px;
  margin-inline: auto;
  /* padding-inline: 20px; */
  padding-block: 60px;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 60px;
  background-color: transparent;
  padding-block: 10px;
  padding-inline: 15px;

  border-radius: 60px;
  border: 2px solid var(--color-brand-primary);

  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
}

.wrapper__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  opacity: 0.8;
}

.wrapper__header .header__logo {
  width: 100%;
  height: 100%;
  max-width: 237px;
  margin-inline: auto;
}

.wrapper__header .header__title {
  width: 320px;
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  text-align: center;

}

.section-title {
  width: 350px;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 24px;
  line-height: normal;
  text-align: center;
  margin-bottom: 25px;
  margin-inline: auto;
}

.list-link li:not(:last-child) {
  margin-bottom: 14px;
}

.line {
  display: flex;
  width: 100%;
  height: 2px;
  background-color: #CECDCD33;
  margin-block: 20px;
}

@media screen and (max-width:768px) {
  .wrapper {
    padding-inline: 20px;
  }

 .wrapper__header{
  margin-bottom:24px ;
 }

  .wrapper__header .header__logo {
    max-width: 230px;
  }

  .list-link li:not(:last-child) {
    margin-bottom: 10px;
  }
}