html {
  box-sizing: border-box;
}

body {
  min-width: 1200px;
  font-family: 'font', sans-serif;
}


/* reset-defaults */

*,
*::before,
*::after {
  box-sizing: inherit;
}

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

p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

img {
  max-width: 100%;
}

address {
  font-style: normal;
}

section {
  margin-bottom: 20px;
}

/* global-css */

.container {
  width: 1170px;
  margin: 0 auto;
}

.flex {
  display: flex;
}

.block {
  display: block;
}

.section__title {
  margin: 0 0 20px;
  font-weight: normal;
  /*padding-left: 40px;*/
}

.list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

.button-reset {
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.ps-10 {
  padding-left: 15px;
}

.ps-40 {
  padding-left: 40px;
}


/* header */

.header__container {
  padding-top: 30px;
  margin-bottom: 5px;
}

.header__top {
  margin-bottom: 30px;
  /*padding-left: 40px;*/
  align-items: center;
}

.header__nav__item_end {
  display: none;
}

.header__nav__item {
  padding: 5px 10px;
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.header__nav__item.active {
  background-color: white;
  color: rgb(51, 51, 51);
}

.header__nav__item:focus {
  background-color: rgb(194, 194, 194);
  color:rgb(51, 51, 51);
}

.header__nav__item:hover {
  background-color: rgb(194, 194, 194);
  color: rgb(51, 51, 51);
}

.header__bottom {
  background-color: rgb(51, 51, 51);
  height: 60px;
  color: white;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  flex-direction: column;
  justify-content: center;
  font-size: 18px;
}

.header__logo {
  width: 270px;
  margin-right: 40px;
  flex-shrink: 0;
}

.header__address {
  display: flex;
  align-items: center;
  height: 30px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  margin-right: auto;
  padding-left: 30px;
  background-image: url(../img/call_icon.svg);
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 10%;
  flex-shrink: 0;
}

.header__social-links {
  margin-right: auto;
}

.social-links__icons {
  width: 20px;
}

.header__list {
  justify-content: space-between;
}

.nav__item:not(:last-child) {
  margin-right: 45px;
}

.header {
  margin-bottom: 70px;
}

.header__button {
  color: #09a69f;
  width: 190px;
  height: 40px;
  border: #09a69f solid 2px;
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.header__button:focus {
  background-color: #09a69f;
  color: white;
}

.header__button:hover {
  background-color: #09a69f;
  color: white;
}

.header__button-account {
  width: 180px;
  height: 40px;
  margin-right: 5px;
  background-image: url(../img/lk_enter.png);
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: 12%;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 14px;
}


/* body navbar */

.body__nav__banner {
  line-height: 0;
  margin-bottom: 8px;
}

.body__nav__item {
  color: white;
  background-color: #08a69e;
  height: 80px;
  padding: 0 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-top: rgb(51, 51, 51) solid 8px;
  border-bottom: rgb(51, 51, 51) solid 8px;
  transition: border .3s ease-in-out, background-color .3s ease-in-out;
}

.body__nav__item:not(:last-child) {
  border-right: white solid 1px;
}
.body__nav__item:focus {
  background-color: #08736e;
  border-top: rgb(134, 134, 134) solid 8px;
  border-bottom: rgb(134, 134, 134) solid 8px;
}
.body__nav__item:hover {
  background-color: #08736e;
  border-top: rgb(134, 134, 134) solid 8px;
  border-bottom: rgb(134, 134, 134) solid 8px;
}

/* site actions */

.site-info__banner {
  height: 373px;
  background-image: url("../img/banner_notebook.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  flex: 1;
  margin-right: 20px;
  padding-top: 40px;
  padding-left: 60px;
}

.site-info__cont {
  justify-content: space-between;
}

.site-info__banner__header {
  line-height: 2.4rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 26px;
  color: #08a69e;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.site-info__banner__body {
  line-height: 2rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 20px;
  margin-bottom: 14px;
}

.site-info__banner__button {
  color:white;
  background-color: #08a69e;
  padding: 10px 30px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 20px;
  font-weight: bold;
  transition: background-color .3s ease-in-out;
}

.site-info__banner__button:focus {
  background-color: #08736e;
}

.site-info__banner__button:hover {
  background-color: #08736e;
}

.site-info__actions {
  width: 270px;
}

.site-info__actions__header {
  font-size: 14px;
  border: black solid 2px;
  justify-content: center;
  padding: 15px 10px;
}

.site-info__actions__links {
  border: black solid 2px;
  border-top: none;
  padding: 46px 30px;
}

.site-info__nav-item {
  margin-bottom: 20px;
  transition: color .3s ease-in-out;
}

.site-info__nav-item:focus {
  color:  #08a69e;
}

.site-info__nav-item:hover {
  color:  #08a69e;
}

.site-info__list {
  flex-direction: column;
}


/* body__tarifs */

.tarifs__cards {
  flex-wrap: wrap;
  gap: 30px;
}
.tarifs__card {
  width: calc((100% - 2 * 30px ) / 3);
  background-color: #383838;
  color: white;
  position: relative;
  padding: 30px 0 10px 20px;
  transition: transform .3s ease-in-out;
}

.tarifs__card:nth-child(3n) {
  margin-right: 0;
}

.tarifs__card:nth-last-child(-n + 3) {
  margin-bottom: 0;
}

.tarifs__card:focus {
  transform: scale(1.01);
}

.tarifs__card:hover {
  transform: scale(1.01);
}

.tarifs__card-cont {
  padding-top: 10px;
  padding-bottom: 10px;
  overflow: hidden;
  position: relative;
}

.tarifs__card-header {
  background-color: #5ea69f;
  height: 50px;
  margin-bottom: 25px;
  padding-left: 100px;
  align-items: center;
  text-shadow: 1px 1px 1px #333;
  box-shadow: -3px 4px 3px #222;
  position: relative;
}

.tarifs__header--img {
  position: absolute;
  width: 70px;
  left: 20px;
}

.tarifs__list {
  line-height: 1.5em;
  letter-spacing: .05rem;
  font-size: 14px;
}

.tarifs__item {
  background-image: url("../img/tarifs-list.svg");
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: 0 50%;
  padding-left: 40px;
}

.tarifs__shadow {
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 100%;
  box-shadow: inset 6px 0 7px -5px #222;
}

.tarifs__card-header h3{
  font-size: 16px;
  font-weight: normal;
}

.tarifs__coast {
  width: 70px;
  position: absolute;
  bottom: 15px;
  right: 0;
  padding: 5px 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: #5ea79f;
  border-radius: 30px 0 0 30px;
  box-shadow: -3px 4px 3px #222;
  text-shadow: 1px 1px 1px #333;
}


/* body__banner*/

.body__banner {
  margin-bottom: 30px;
}

.body__banner-girl {
  background-image: url("../img/banner_girl.webp");
  background-position: 50% 65%;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 300px;
  height: 106px;
}

.body__banner-girl__cont {
  justify-content: center;
  align-items: center;
  background-color: #08a69e;
  flex: 1;
}

.body__banner-girl__btn {
  color: white;
  background-color: rgb(51, 51, 51);
  padding: 10px 80px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: italic;
  font-size: 24px;
  transition: background-color .3s ease-in-out;
}

.body__banner-girl__btn:focus {
  background-color:#08736e;
}

.body__banner-girl__btn:hover {
  background-color:#08736e;
}


/* body__services */

.services__cards {
  flex-wrap: wrap;
  gap: 40px;
}
.services__card {
  padding-left: 120px;
  flex: 1;
  flex-basis: 45%;
  margin-bottom: 40px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  color: #333333;
  background-repeat: no-repeat;
  background-size: contain;
}


.services__card-link {
  color:#08a69e;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: bold;
  transition: color .3s ease-in-out;
}

.services__card-link:focus {
  color: #08736e;
}

.services__card-link:hover {
  color: #08736e;
}

.serv-cards__list {
  text-indent: 7px;
  list-style-position: inside;
  list-style-type: none;
  padding: 5px;
  margin-bottom: 0;
}


.services__card_1 {
  background-image: url(../img/body_services_1.svg);
}

.services__card_2 {
  background-image: url(../img/body_services_2.svg);
}

.services__card_3 {
  background-image: url(../img/body_services_3.svg);
}

.services__card_4 {
  background-image: url(../img/body_services_4.svg);
}

.services__card_5 {
  background-image: url(../img/body_services_5.svg);
}

.services__card_6 {
  background-image: url(../img/body_services_6.svg);
}


/* body__china-delivery */

.china-delivery__banner {
  height: 320px;
  background-image: url(../img/banner_truck.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}

.china-delivery__promo {
  color: white;
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: italic;
}

.china-delivery__body {
  width: 450px;
  position: absolute;
  top: 40px;
  right: 20px;
  text-align: center;
  font-size: 22px;
}

.china-delivery__header {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 22px;
  margin-bottom: 35px;
}

.china-delivery__header--link {
  color:#08a69e;
  text-decoration: underline 1.2px;
  text-underline-offset: 3px;
  transition: color .3s ease-in-out;
}

.china-delivery__header--link:focus {
  color:#08736e;
}

.china-delivery__header--link:hover {
  color:#08736e;
}

.china-delivery__text {
  margin-bottom: 40px;
}

/* body__serv-cards */

.serv-cards__card {
  flex: 1;
  flex-basis: 20%;
  border:#09a69f solid 2px;
  padding: 8px;
}

.serv-cards__card:not(:last-child) {
  margin-right: 10px;
}

.serv-cards__cont h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  text-align: center;
}

.serv-cards__item {
  padding-bottom: 14px;
  background-image: url(../img/point.svg);
  background-repeat: no-repeat;
  background-position: 0 5px;
  background-size: 4px;
}

.serv-cards__cont {
  background-color: #e8e8e8;
  border:#09a69f solid 2px;
  height: 100%;
  position: relative;
  padding-bottom: 40px;
  padding-top: 20px;
  font-size: 13px;
  margin-bottom: 0;
}

.serv-cards__button {
  width: 100%;
  height: 40px;
  color: white;
  background-color: #09a69f;
  position: absolute;
  bottom: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 18px;
  transition: background-color .3s ease-in-out;
}

.serv-cards__button:focus {
  background-color: #08736e;
}

.serv-cards__button:hover {
  background-color: #08736e;
}

/* body__info */
.info__header {
  justify-content: center;
  color: #08a69e;
  font-size: 28px;
  font-weight: bold;
  text-transform: uppercase;
}


/* body__reasons */

.reasons__header--link {
  color:#000;
  text-decoration: underline 1.2px;
  text-underline-offset: 2px;
  font-size: 18px;
  transition: color .3s ease-in-out;
}

.reasons__header--link:focus {
  color:#08736e;
}

.reasons__header--link:hover {
  color:#08736e;
}

.reasons__card {
  padding: 20px;
}
.reasons__card-cont {
  position: relative;
  padding: 20px;
  border: black solid 2px;
}

.reasons__card-number {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 42px;
  height: 42px;
  top: -21px;
  left: -21px;
  border: black solid 2px;
  border-radius: 50%;
  font-size: 28px;
  font-weight: bold;
  color:#08a69e;
  background-color: white;
}


/* products */

.products__cards {
  flex-wrap: wrap;
}

.products__card {
  height: 140px;
  display: flex;
  flex: 1;
  flex-basis: 25%;
  border: black solid 2px;
  margin-bottom: 18px;
  padding: 12px;
}

.products__card:not(:nth-child(4n)) {
  border-right: none;
}

.products__card-cont {
  border: black solid 2px;
  width: 100%;
  background-size: 142px;
  background-repeat: no-repeat;
  background-position: -10px 50%;
  padding-top: 15px;
  padding-right: 5px;
  padding-left: 132px;

  position: relative;
}

.products__card__1 {
  background-image: url(../img/product_1.webp);
}

.products__card__2 {
  background-image: url(../img/product_2.webp);
}

.products__card__3 {
  background-image: url(../img/product_3.webp);
}

.products__card__4 {
  background-image: url(../img/product_4.webp);
}

.products__card__5 {
  background-image: url(../img/product_5.webp);
}

.products__card__6 {
  background-image: url(../img/product_6.webp);
}

.products__card__7 {
  background-image: url(../img/product_7.webp);
}

.products__card__8 {
  background-image: url(../img/product_8.webp);
}

.products__header {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 400;
  word-wrap: break-word;
}

.products__button {
  width: 120px;
  position: absolute;
  right: 10px;
  bottom: 5px;
  color: white;
  background-color: #08a69e;
  padding: 5px 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  transition: background-color .3s ease-in-out;
}

.products__button:focus {
  background-color: #08736e;
}

.products__button:hover {
  background-color: #08736e;
}


/* form */

.body__form {
  padding: 0 10px;
}

.form__cont {
  padding: 40px;
  background-color:#08a69e;
  border-radius: 5px;
  text-align: center;
}

.form__header {
  color: white;
  font-size: 32px;
  font-weight: 200;
  margin-bottom: 30px;
}

.form__body {
  color: white;
  font-style: italic;
  margin-bottom: 30px;
}

.form__inputs {
  align-items: normal;
}

.form__input {
  display:inline-block;
  flex:1 1 auto;
  padding: 15px 10px;
  margin-right: 5px;
  border-radius: 3px;
  border: none;
  font-size: 16px;
}

.form__button {
  width:250px;
  flex:0 0 auto;
  color: white;
  text-transform: uppercase;
  background-color: #00C576;
  border-radius: 3px;
  transition: background-color .3s ease-in-out;
}

.form__button:focus {
  background-color: #08736e;
}

.form__button:hover {
  background-color: #08736e;
}


/* footer */

.footer__cont {
  padding: 40px;
  justify-content: space-between;
  width: 100%;
}


.footer__info {
  flex-direction: column;
}

.footer__logo {
  margin-bottom: 20px;
}

.footer__logo img {
  width: 250px;
}

.footer__body {
  color: #9FA7AF;
  margin-bottom: 10px;
}

.footer__body:last-of-type {
  margin-bottom: 30px;
}

.footer__mail {
  color: #81A8DB;
}

.footer__list {
  flex-direction: column;
  flex-wrap: wrap;
  margin: auto 0;
  gap: 14px 20px;
  columns: 2;
  height: 150px;
}

.footer__link {
  color: #7B7E7F;
  text-decoration: underline;
  transition: color .3s ease-in-out;
}

.footer__link:focus {
  color: #08736e;
}

.footer__link:hover {
  color: #08736e;
}

.footer__contacts{
  text-align: end;
}

.footer__address {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  height: 30px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  margin-right: auto;
  padding-left: 30px;
  background-image: url(../img/call_icon.svg);
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 10%;
  flex-shrink: 0;
}






/* adaptive */
@media (max-width: 450px) {
  body {
    min-width: auto;
  }
  .container {
    width: 100%;
  }
  .header__logo {
    width: 160px;
  }
  .header__address {
    display: none;
  }
  .header__social-links {
    display: none;
  }
  .header__button {
    display: none;
  }
  .header__button-account {
    margin-left: auto;
  }
  .header__bottom {
    height: auto;
  }
  .header__list {
    flex-direction: column;
  }
  .header__nav__item {
    height: 40px;
    display: flex;
    justify-content: start;
    align-items: center;
  }
  .header__nav__item_end {
    justify-content: end;
    display: flex;
  }
  .collapsed {
    height: 0px;
    transition: height .3s ease-in-out;;
  }
  .nav__button {
    color: white;
    padding: 5px;
    border: 1px solid white;
    border-radius: 3px;
    line-height: 1rem;
  }
  .body__list {
    flex-direction: column;
  }
  .body__nav__item {
    border-bottom: none;
    align-items: start;
    border-top: rgb(51, 51, 51) solid 4px;
    height: 45px;
  }
  .site-info__cont {
    flex-direction: column;
  }
  .site-info__banner {
    height: 400px;
    padding: 20px 30px;
    margin: 0;
    width: 100%;
    margin-bottom: 20px;
    background-size: cover;
  }
  .site-info__actions {
    width: 100%;
  }
  .tarifs__cards {
    gap: 15px;
  }

  .tarifs__card {
    width: 100%;
    background-color: #383838;
    color: white;
    position: relative;
    padding: 30px 0 10px 20px;
  }
  .tarifs__card:focus {
    transform: none;
  }
  .tarifs__card:hover {
    transform: none;
  }

  .body__banner-girl {
    width: 0px;
    height: 80px;
  }

  .body__banner-girl__btn {
    padding: 10px 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: italic;
    font-size: 16px;
  }
  .services__card {
    background-size: 20%;
    background-position: 20px 50%;
  }
  .china-delivery__banner {
    background-size: cover;
    background-position: 100%;
    padding: 30px 10px;
    height: unset;
  }

  .china-delivery__body {
    width: auto;
    position: relative;
    top: unset;
    right: unset;
    padding-bottom: 40px;
  }
  .serv-cards__cards {
    flex-wrap: wrap;
    flex-direction: column;
    gap: 10px;
  }
  .serv-cards__card {
    width: 100%;
  }
  .reasons__cards {
    flex-direction: column;
  }
  .products__card {
    border: none;
    margin-bottom: 0;
  }
  .form__inputs {
    flex-direction: column;
    gap: 10px;
  }
  .form__input {
    width: 100%;
  }
  .form__button {
    width: 100%;
    height: 40px;
  }
  .footer__links {
    display: none;
  }
  .footer__contacts {
    display: none;
  }
}