:root {
  --main-pink: #ffcdd3;
  --main-green: #84a178;
  --main-yellow: #f8d24e;
  --light-yellow: #efd478;
  --light-yellow-rgba: rgba(248, 210, 78, 0.1);
  --light-green: #aec6a5;
  --chocolate: #ffd9de;
  --gradient: #d9d9d9;
  --text-light: #fcfcfc;
  --text-dark: #131313;
  --text-footer: #7a7a7a;
  --button-grey: #ababab;
  --white: #ffffff;
  --grey-line: #e1e1e1;
  --green-line: #9cbe8f;
  --green-border: #96af8c;
  --cubic-bezier: cubic-bezier(0.4, 0, 0.2, 1);
  --second-family: "Seymour One", sans-serif;
}
body {
  font-family: Montserrat, sans-serif;
  background-color: var(--main-pink);
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  display: block;
  height: auto;
}

.link {
  text-decoration: none;
}

/**
  Наследуем свойства шрифт для полей ввода
  */
input,
textarea,
select,
button {
  font: inherit;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  display: none;
}

/*
    Плавный скролл
    */
html,
:has(:target) {
  scroll-behavior: smooth;
}

/* Чиним баг задержки смены цвета при взаимодействии с svg-элементами */
svg * {
  transition-property: fill, stroke;
}

/* Курсор-рука при наведении на элемент */
button,
label {
  cursor: pointer;
}

/*
Приводим к единому цвету svg-элементы
*/
[fill] {
  fill: currentColor;
}
[stroke] {
  stroke: currentColor;
}

.container {
  margin-left: auto;
  margin-right: auto;

  @media screen and (max-width: 479px) {
    width: 100%;
    max-width: 480px;
    padding-left: 20px;
    padding-right: 20px;
  }

  @media screen and (min-width: 480px) {
    width: 480px;
    padding-left: 20px;
    padding-right: 20px;
  }

  @media screen and (min-width: 768px) {
    width: 768px;
    padding-left: 32px;
    padding-right: 32px;
  }

  @media screen and (min-width: 1200px) {
    width: 1200px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* HEADER */

.header__wrapper-backdrop {
  width: 100%;
  height: 720px;

  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(./images/general/backg.jpg);
  background-position: center bottom;

  @media screen and (max-width: 479px) {
    background-position: -540px center;
  }
  @media screen and (min-width: 1200px) {
    background-position: center center;
  }
}

.header__container {
  padding-top: 100px;

  @media screen and (min-width: 768px) {
    padding-top: 80px;
  }

  @media screen and (min-width: 1200px) {
    padding-top: 104px;
  }
}

.header__wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--main-pink);
  z-index: 5;
  padding: 15px;
  border-bottom: 1px solid var(--white);
}

.header {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: auto;

  @media screen and (max-width: 767px) {
    max-width: 440px;
  }

  @media screen and (min-width: 768px) {
    top: 20px;
    width: 704px;
  }

  @media screen and (min-width: 1200px) {
    top: 8px;
    width: 1168px;
  }

  @media screen and (max-width: 1199px) {
    justify-content: space-between;
  }
}

/* Logo */

.header__logo-svg {
  width: 40px;
  height: 37px;

  fill: var(--white);

  @media screen and (min-width: 480px) {
    width: 48px;
    height: 44px;
  }

  @media screen and (min-width: 1200px) {
    width: 60px;
    height: 65px;
  }
}

/* Header-navigation */

.header__nav {
  padding-top: 32px;
  padding-bottom: 13px;
  margin-right: auto;
  margin-left: auto;

  @media screen and (max-width: 1199px) {
    position: absolute;

    display: none;
  }
}

.header__list {
  display: flex;
}

.header__item + .header__item {
  @media screen and (min-width: 1200px) {
    margin-left: 28px;
  }
}

.header__item {
  transition: transform 250ms var(--cubic-bezier);
}

.header__item:hover,
.header__item:focus,
.header__item:active {
  transform: scale(1.15);
}

.header__link {
  font-weight: 700;
  color: #000000;
  transition: color 250ms var(--cubic-bezier);
}

.header__link:hover,
.header__link:focus,
.header__link:active {
  color: var(--white);
}

.header__item:focus-within {
  transform: scale(1.15);
}

/* Header-button */

.header__box {
  display: flex;
  align-items: center;

  @media screen and (min-width: 768px) {
    padding-top: 4px;
    padding-bottom: 0px;
  }

  @media screen and (min-width: 1200px) {
    padding-top: 20px;
    padding-bottom: 3px;
  }
}

/* Header-burger */

.header-burger {
  padding: 0;
  border: 0;

  background-color: var(--main-pink);

  @media screen and (min-width: 768px) {
    margin-right: 32px;
  }

  @media screen and (min-width: 1200px) {
    display: none;
  }
}

.header-burger__svg {
  display: flex;
  width: 32px;
  height: 32px;

  fill: #000000;
}

/* HERO-HEADER */

.hero-header {
  display: flex;
  margin-top: 50px;
}

.hero-header.menu {
  margin-top: 280px;
}

.hero-header__title {
  display: flex;
  flex-direction: column;
  width: 247px;
  margin-bottom: 32px;

  font-family: var(--second-family);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-light);

  scroll-margin-top: 170px;

  @media screen and (min-width: 768px) {
    margin-bottom: 22px;
  }

  @media screen and (min-width: 1200px) {
    margin-top: 20px;
    margin-bottom: 32px;
    width: 367px;

    font-size: 38px;
  }
}

.hero-header__title > span {
  word-wrap: break-word;
  overflow-wrap: break-word;

  @media screen and (max-width: 479px) {
    font-size: 33px;
  }

  @media screen and (min-width: 480px) {
    font-size: 33px;
    width: 430px;
  }

  @media screen and (min-width: 1200px) {
    font-size: 38px;
    width: 500px;
  }
}

.hero-header__indulge {
  display: flex;

  margin-top: 12px;

  @media screen and (min-width: 768px) {
    margin-top: 27px;
  }

  @media screen and (min-width: 1200px) {
    margin-top: 67px;
  }
}

.hero-header__subtitle {
  width: 250px;

  font-family: var(--second-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  color: var(--white);

  @media screen and (min-width: 1200px) {
    width: 380px;

    font-size: 20px;
  }
}

/* PRODUCTS */

.menub__list {
  @media screen and (min-width: 1200px) {
    display: flex;
    justify-content: space-between;
  }
}

.menub__item {
  display: flex;
  flex-direction: column;
  @media screen and (max-width: 1199px) {
    margin-bottom: 80px;
  }
}

.menub__title {
  display: flex;
  justify-content: center;
  font-family: var(--second-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  color: var(--text-dark);

  @media screen and (min-width: 768px) {
    font-size: 20px;
  }
}

.menu__pic {
  display: block;
  width: 400px;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
  @media screen and (max-width: 479px) {
    max-width: 100%;
  }
  @media screen and (max-width: 767px) {
    margin-bottom: 40px;
  }
}

.menu__pic > img {
  height: 100%;
  object-fit: cover;
  @media screen and (max-width: 767px) {
    width: 100%;
  }
}

.menu__pic.menub {
  @media screen and (max-width: 479px) {
    width: 100%;
  }

  width: 360px;
}

.menu__pic.menub > img {
  display: block;
  height: 360px;
  width: 360px;
  @media screen and (max-width: 479px) {
    width: 100%;
    height: 100%;
  }
}

.menub__container-photo {
  display: block;
}

.menub__container-photo .menu__pic {
  display: block;
  width: 300px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  @media screen and (max-width: 479px) {
    max-width: 100%;
  }
  @media screen and (max-width: 767px) {
    margin-bottom: 40px;
  }
}

.menub__container-photo .menu__pic.erst {
  margin-bottom: 20px;
}

.menub__container-photo .menu__pic img {
  width: 300px;
  height: 300px;
  @media screen and (max-width: 479px) {
    max-width: 100%;
  }
}

.products {
  padding-top: 120px;
  padding-bottom: 60px;
  scroll-margin-top: 40px;

  @media screen and (min-width: 480px) and (max-width: 767px) {
    padding-top: 80px;
  }
}

.products-box__title {
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.04em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-dark);
  font-family: var(--second-family);

  @media screen and (max-width: 767px) {
    margin-bottom: 48px;
  }

  @media screen and (min-width: 768px) {
    margin-bottom: 60px;
  }
}
.swiper {
  margin-bottom: 300px;
}

.swiper.zweit {
  margin-top: 60px;
  margin-bottom: 0;
}

/* ===========================
   ВЕРХНИЙ СЛАЙДЕР
   =========================== */

.swiper:not(.zweit) .swiper-slide {
  border-radius: 20px;
  overflow: hidden;
}

.swiper:not(.zweit) .products-box__image-pic {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 20px;
}

.swiper:not(.zweit) .products-box__image-pic img {
  display: block;
  width: 100%;
  object-fit: contain;
  border-radius: 20px;
}

@media (min-width: 1200px) {
  .swiper:not(.zweit) .products-box__image-pic img {
    width: 70%;
    height: 770px;
    margin: 0 auto;
  }
}

/* ===========================
   НИЖНИЙ СЛАЙДЕР
   =========================== */

.swiper.zweit .swiper-wrapper {
  height: 320px;
}

@media (min-width: 768px) {
  .swiper.zweit .swiper-wrapper {
    height: 500px;
  }
}

@media (min-width: 1200px) {
  .swiper.zweit .swiper-wrapper {
    height: 800px;
  }
}

.swiper.zweit .swiper-slide {
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.swiper.zweit .products-box__image-pic {
  display: block;
  width: 100%;
  height: 100%;
}

.swiper.zweit .products-box__image-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.products__list {
  display: flex;

  @media screen and (max-width: 767px) {
    flex-direction: column;
    align-items: center;
  }
}
.products__list:not(:last-child) {
  margin-bottom: 270px;
  @media screen and (max-width: 1199px) {
    margin-bottom: 168px;
  }
}
.products__item {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 280px;
  height: 420px;
  border-radius: 24px;
  padding: 123px 40px 16px 40px;

  transition: transform 250ms var(--cubic-bezier);

  @media screen and (min-width: 768px) {
    padding: 108px 26px 12px 26px;
    width: 224px;
    height: 428px;
  }

  @media screen and (min-width: 1200px) {
    padding: 165px 64px 60px 64px;
    width: 370px;
    height: 536px;
  }
}

.products__item:hover {
  transform: scale(1.04);
}

.products__item + .products__item {
  @media screen and (max-width: 767px) {
    margin-top: 168px;
  }

  @media screen and (min-width: 768px) {
    margin-left: 16px;
  }
  @media screen and (min-width: 1200px) {
    margin-left: 29px;
  }
}

.products__item-ice-cream {
  background-color: var(--light-green);
}

.products__item-ice-coffee {
  background-color: var(--light-yellow);
}

.products__item-milkshake {
  background-color: var(--chocolate);
}

.products__circle {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.25);

  @media screen and (min-width: 1200px) {
    top: -16px;
    width: 302px;
    height: 302px;
  }
}

.products__circle-ice-cream {
  background:
    linear-gradient(rgba(156, 190, 143, 0.7), rgba(156, 190, 143, 0.7)), #d9d9d9;
}

.products__circle-ice-coffee {
  background:
    linear-gradient(rgba(248, 210, 78, 0.7), rgba(248, 210, 78, 0.7)), #d9d9d9;
}

.products__circle-milkshake {
  background:
    linear-gradient(rgba(213, 117, 63, 0.7), rgba(213, 117, 63, 0.7)), #d9d9d9;
}

.products__picture {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translate(-50%, -50%);

  @media screen and (min-width: 1200px) {
    top: -32px;

    width: 302px;
    height: 302px;
  }
}

.products__picture > img {
  border-radius: 50%;

  @media screen and (min-width: 1200px) {
    width: 100%;
    height: 100%;
  }
}

.products__title {
  margin-bottom: 40px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dark);

  @media screen and (min-width: 768px) {
    font-size: 22px;
  }

  @media screen and (min-width: 1200px) {
    font-size: 30px;
  }
}

.products__subtitle {
  margin-bottom: auto;

  font-weight: 400;
  font-size: 14px;
  line-height: 176%;
  letter-spacing: 0.04em;
  color: var(--text-dark);

  @media screen and (min-width: 1200px) {
    font-size: 16px;
  }
}

.first__menu--first {
  margin-top: 60px;
  height: 400px;
  display: flex;
  align-items: center;
}

.first__menu {
  background-color: var(--main-pink);
}
.menu {
  display: flex;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
  @media screen and (max-width: 767px) {
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

.first__menu:nth-child(even) {
  background-color: var(--chocolate);
}

.first__menu:nth-child(even) .menu {
  flex-direction: row-reverse;
  background-color: var(--chocolate);
}

.first__menu:nth-child(even) .menu__wrapper {
  margin-left: 0;
  margin-right: 40px;
}

@media screen and (max-width: 767px) {
  .first__menu:nth-child(even) .menu {
    flex-direction: column;
  }

  .first__menu:nth-child(even) .menu__wrapper {
    margin-right: 0;
  }
}

.menu__title {
  @media screen and (max-width: 479px) {
    margin-bottom: 20px;
  }
}

.menu__wrapper {
  text-align: center;

  @media screen and (min-width: 768px) {
    margin-left: 40px;
  }
}

/* ABOUT */

.about {
  padding-top: 60px;
  padding-bottom: 68px;

  @media screen and (min-width: 480px) {
    padding-bottom: 81px;
  }

  @media screen and (min-width: 768px) {
    padding-bottom: 60px;
  }

  @media screen and (min-width: 1200px) {
    padding-bottom: 60px;
  }
}

.about__title {
  margin-top: 12px;
  margin-bottom: 54px;

  font-family: var(--second-family);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.04em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-transform: uppercase;
  text-align: center;
  color: #000000;

  scroll-margin-top: 130px;

  @media screen and (min-width: 768px) {
    margin-bottom: 80px;
    font-size: 34px;
    letter-spacing: 0.06em;
  }

  @media screen and (min-width: 1200px) {
    font-size: 36px;
  }
}

.location__map {
  margin-left: auto;
  border-radius: 16px;
  width: 100%;
  height: 400px;
  margin-bottom: 20px;
  @media screen and (min-width: 1200px) {
    margin-right: 100px;
    width: 700px;
    height: 500px;
  }
  @media screen and (min-width: 768px) {
    width: 700px;
    height: 500px;
    margin-bottom: 0px;
  }
}

.map__box {
  display: flex;
  justify-content: center;
  @media screen and (max-width: 767px) {
    display: block;
  }
}

.map__box > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.map__box > div .map__subtitle:last-of-type {
  margin-bottom: 70px;
}

/* CONTACTS */

.about {
  padding-top: 60px;
  padding-bottom: 30px;
  scroll-margin-top: 66px;

  @media screen and (min-width: 768px) {
    padding-bottom: 20px;
    scroll-margin-top: 95px;
  }

  @media screen and (min-width: 1200px) {
    padding-bottom: 60px;
  }
}

.about__wrapper {
  border-radius: 9px;
  padding: 20px;

  background-color: #ffdee2;
}

.about__pic {
  display: block;
  margin-bottom: 10px;
}

.about__pic > img {
  @media screen and (max-width: 767px) {
    width: 100%;
  }

  @media screen and (min-width: 768px) {
    width: 399px;
  }
  @media screen and (min-width: 1200px) {
    width: 600px;
    height: 300px;
    object-fit: cover;
  }
}

.about__subtitle {
  /* width: 50%; */
  text-align: center;
  /* z-index: 10; */
  font-weight: 400;
  font-size: 14px;
  line-height: 176%;
  letter-spacing: 0.04em;
  color: var(--text-dark);
  @media screen and (min-width: 768px) {
    font-size: 16px;
    margin-left: 10px;
  }
}

/* FOOTER */

.footer {
  padding-top: 30px;
  padding-bottom: 24px;

  @media screen and (min-width: 768px) {
    padding-top: 20px;
  }

  @media screen and (min-width: 1200px) {
    padding-top: 60px;
  }

  @media screen and (min-width: 768px) {
    padding-bottom: 12px;
  }
}

.footer__helper {
  @media screen and (min-width: 768px) {
    margin-bottom: 44px;
  }
}

.footer__subtitle {
  width: 232px;

  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--text-light);

  @media screen and (min-width: 768px) {
    width: 352px;
    font-size: 26px;
    letter-spacing: 0.04em;
  }

  @media screen and (min-width: 1200px) {
    width: 510px;
    font-weight: 400;
    font-size: 30px;
  }
}

.footer__title {
  margin-top: 16px;
  margin-bottom: 60px;
  width: 300px;

  font-weight: 700;
  font-size: 34px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-light);

  @media screen and (min-width: 768px) {
    width: 432px;
    margin-top: 8px;
    margin-bottom: 0;

    font-size: 48px;
    letter-spacing: 0.06em;
  }

  @media screen and (min-width: 1200px) {
    width: 510px;
    margin-top: 14px;

    font-size: 58px;
  }
}

.footer__list {
  display: flex;
  justify-content: space-around;
  margin-top: 16px;
}

.footer__item {
  flex-direction: column;
  display: flex;
  align-items: center;
}

.footer__link:hover,
.footer__link:focus,
.footer__link:active {
  fill: #ffcdd3;
}

.footer__link {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  background-color: #ffffff;
  fill: #000000;

  transition: fill 250ms var(--cubic-bezier);
}

.footer__svg {
  width: 20px;
  height: 20px;
}

.footer__copyright {
  font-weight: 700;
  font-size: 14px;
  line-height: 152%;
  text-align: center;
  color: var(--text-footer);

  @media screen and (max-width: 767px) {
    margin-left: auto;
    margin-right: auto;
    width: 150px;
  }

  @media screen and (min-width: 768px) {
    line-height: 186%;
    letter-spacing: 0.02em;
  }

  @media screen and (min-width: 1200px) {
    font-size: 12px;
  }
}

/* MODAL */
/* Header */

.header-backdrop {
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100%;

  background-color: #ffcdd3;
  transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  z-index: 10;
  @media screen and (min-width: 1200px) {
    display: none;
  }
}

.header-backdrop.is-hidden {
  transform: translateX(100%);
}

.header-modal {
  @media screen and (max-width: 319px) {
    padding: 16px 20px;
  }

  @media screen and (min-width: 320px) {
    padding: 16px 20px;
  }

  @media screen and (min-width: 480px) {
    padding: 20px 20px;
  }

  @media screen and (min-width: 768px) {
    padding: 32px 32px;
  }
}

.header-modal__header {
  display: flex;
  justify-content: space-between;
}

.header-modal__close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;

  background-color: #ffcdd3;
}

.modal-header__nav {
  @media screen and (max-width: 479px) {
    margin-top: 52px;
  }

  @media screen and (min-width: 480px) {
    margin-top: 40px;
  }

  @media screen and (min-width: 768px) {
    margin-top: 76px;
  }
}

.modal-header__item:hover .modal-header__link {
  color: #131313;
}

.modal-header__item {
  text-align: center;
  transition: transform 250ms var(--cubic-bezier);
}

.modal-header__item:hover,
.modal-header__item:focus,
.modal-header__item:active {
  transform: scale(1.09);
}

.modal-header__item:focus-within {
  transform: scale(1.09);
}

.modal-header__item + .modal-header__item {
  margin-top: 32px;

  @media screen and (min-width: 768px) {
    margin-top: 40px;
  }
}

.modal-header__link {
  font-weight: 700;
  font-size: 32px;

  color: var(--text-light);
  transition: color 250ms var(--cubic-bezier);

  @media screen and (min-width: 768px) {
    font-size: 48px;
  }
}

.modal-header__link:focus,
.modal-header__link:active {
  color: var(--text-dark);
}

/* OUR LOCATION */
.map__title {
  margin-bottom: 25px;

  font-family: var(--second-family);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #000000;
}

.map__subtitle {
  margin-bottom: 10px;

  font-family: var(--second-family);
  font-weight: 100;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #000000;
}

.map__tel {
  margin-bottom: 36px;

  font-family: var(--second-family);
  font-weight: 100;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #000000;
}