:root {
   --bg-primary: #F0ECE6;
   --bg-secondary: #ffffff;
   --text-primary: #211F1D;
   --color-primary: #56102A;
   --font: 'Roboto', sans-serif;
}

html {
   overflow-x: hidden;
}

body {
   font-family: var(--font);
   background-color: var(--bg-primary);
   font-weight: 400;
   font-size: 24px;
   color: var(--text-primary);
}

.container {
   max-width: 1210px;
   margin: 0 auto;
   padding: 0 20px;
}
.title {
   font-size: 64px;
   font-weight: 400;
   color: var(--text-primary);
   font-family: "Tektur", sans-serif;
   text-transform: uppercase;
}
.button {
   width: 277px;
   height: 63px;
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--bg-secondary);
   background-color: var(--color-primary);
   text-decoration: none;
   transition: background-color 0.3s;
   cursor: pointer;
}
.button:hover {
   background-color: var(--text-primary);
}

.header__row {
   padding: 20px 0;
   display: flex;
   align-items: center;
   gap: 50px;
}

.header__logo {
   width: 70px;
   height: 70px;
}

.header__logo img {
   width: 100%;
   height: 100%;
}

.header__menu {
   display: flex;
   gap: 15px;
}

.header__list {
   font-size: 16px;
   position: relative;
}

.header__list::after {
   content: "";
   display: block;
   width: 0%;
   height: 2px;
   background: var(--color-primary);
   position: absolute;
   bottom: -10px;
   transition: width 0.3s;
}

.header__list:hover::after {
   width: 100%;
}

.header__list.active::after {
   width: 100%;
}

.header__list a {
   text-decoration: none;
   color: var(--text-primary);
}

.header-contact {
   display: flex;
   gap: 15px;
}
.header-contact--desktop {
   margin: 0 0 0 auto;
}
.header-contact--mobile {
   display: none;
}

.header-contact__line {
   width: 1px;
   height: 20px;
   background: var(--color-primary);
   opacity: 0.5;
}

.header-contact__item {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 16px;
   text-decoration: none;
   color: var(--text-primary);
}

.header-lang {
   position: relative;
}

.header-lang__item {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 2px solid var(--color-primary);
   color: var(--color-primary);
   cursor: pointer;
   text-decoration: none;
}
.header-lang__item p {
   text-transform: lowercase;
   text-decoration: none;
}

.header-lang__menu {
   display: flex;
   flex-direction: column;
   position: absolute;
   top: 100%;
   left: 0;
   margin: 10px 0 0 0;
   border: 2px solid var(--color-primary);
   background-color: var(--bg-primary);
   z-index: 101;
   visibility: hidden;
   opacity: 0;
   transform: translateY(-10px);
   transition: visibility 0.3s, opacity 0.3s, transform 0.3s;
}

.header-lang__menu.active {
   visibility: visible;
   opacity: 1;
   transform: translateY(0);
}

.header-lang__menu .header-lang__item {
   border: 0;
   border-bottom: 1px solid var(--color-primary);
}

.header-lang__menu .header-lang__item:last-child {
   border-bottom: 0;
}

.header-burger {
   display: none;
   flex-direction: column;
   gap: 8px;
   cursor: pointer;
}

.header-burger__item {
   width: 30px;
   height: 3px;
   background: var(--text-primary);
   transition: all 0.3s;
}

.header-burger.active .header-burger__item:nth-child(2) {
   opacity: 0;
}

.header-burger.active .header-burger__item:nth-child(1) {
   transform: translateY(11px) rotate(45deg);
}

.header-burger.active .header-burger__item:nth-child(3) {
   transform: translateY(-11px) rotate(-45deg);
}



.hero__row {
   padding: 85px 0;
   display: flex;
   gap: 35px;
}
.hero__info {
   width: 50%;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}
.hero__text {
   margin: 100px 0 0 0;
}
.hero__title {
   position: relative;
   margin: 0 0 20px 30px;
}
.hero__title::after {
   content: "";
   display: block;
   width: 4px;
   height: 100%;
   background: var(--color-primary);
   position: absolute;
   top: 0;
   left: -30px;
}
.hero__paragraph {
   width: 50%;
}
.hero__img {
   width: 50%;
   position: relative;
   z-index: 1;
}
.hero__img img {
   width: 100%;
   height: 100%;
}
.hero__img video {
   width: 100%;
   height: 100%;
}
video::-webkit-media-controls {
    display: none !important;
}

video::-moz-media-controls {
    display: none !important;
}

video::-ms-media-controls {
    display: none !important;
}

video {
    pointer-events: none; /* опционально — чтобы нельзя было кликать */
}
.hero__img::after {
   content: "";
   display: block;
   width: 100%;
   height: 50%;
   background: var(--color-primary);
   position: absolute;
   bottom: -35px;
   right: -35px;
   z-index: -1;
}



.about {
   background: var(--bg-secondary);
}
.about__row {
   padding: 100px 0;
   display: flex;
   align-items: center;
   gap: 35px;
}
.about__text {
   width: 50%;
}
.about__paragraph:first-of-type {
   padding: 25px 0 20px;
}
.about__highlighted {
   position: relative;
   margin: 0 0 0 30px;
}
.about__highlighted::after {
   content: "";
   display: block;
   width: 4px;
   height: 100%;
   background: var(--color-primary);
   position: absolute;
   top: 0;
   left: -30px;
}
.about__img {
   width: 50%;
   position: relative;
   z-index: 1;
}
.about__img img {
   width: 100%;
   height: 100%;
}
.about__img::after {
   content: "";
   display: block;
   width: 100%;
   height: 50%;
   background: var(--color-primary);
   position: absolute;
   bottom: -35px;
   right: -35px;
   z-index: -1;
}



.advantages__row {
   padding: 100px 0;
}
.advantages__items {
   display: flex;
   gap: 35px;
   margin: 50px 0 0 0;
}
.advantages-item {
   width: 33.3%;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}
.advantages-item__title {
   font-weight: 500;
   text-transform: uppercase;
   padding: 25px 0 15px 0;
}
.advantages-item__paragraph {
   opacity: 0.8;
}



.season {
   background: var(--bg-secondary);
}
.season__row {
   padding: 100px 0;
   overflow: hidden;
}
.season__top {
   display: flex;
   justify-content: space-between;
}
.season-arrows {
   display: flex;
   align-items: center;
   gap: 30px;
}
.season-arrows__arrow {
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 3px solid  var(--color-primary);
   cursor: pointer;
   transition: opacity 0.3s;
}
.season-arrows__progress {
   text-transform: uppercase;
   font-family: "Tektur", sans-serif;
   font-size: 48px;
   width: 85px;
   text-align: center;
}
.season-arrows__next > svg {
   transform: rotate(180deg);
}
.season__items {
   display: flex;
   gap: 35px;
   flex-wrap: nowrap;
   margin: 30px 0 0 0;
   padding: 0 10px 0 0 ;
   transition: transform 0.5s;
}
.season-item {
   width: calc(33.3% - 24px);
   flex-shrink: 0;
   position: relative;
}
.season-item__img {
   width: 100%;
   position: relative;
   z-index: 1;
   display: block;
}

.season-item__img::after {
   content: "";
   display: block;
   width: 100%;
   height: 50%;
   background: var(--color-primary);
   position: absolute;
   bottom: -10px;
   right: -10px;
   z-index: -1;
}

.season-item__img img {
   width: 100%;
   height: 375px;
   object-fit: cover;
}

.season-item__img:hover .season-item-hover {
   opacity: 0.7;
}

.season-item__img:hover .season-item-hover__bg {
   opacity: 1;
}

.season-item-hover {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
   display: flex;
   justify-content: center;
   align-items: center;
   pointer-events: none;
   transition: opacity 0.3s;
   opacity: 0;
}

.season-item-hover__bg {
   position: absolute;
   inset: 0;
   background: var(--color-primary);
   opacity: 0;
   transition: opacity 0.3s;
}

.season-item-hover svg {
   opacity: 1;
   position: relative;
   z-index: 1;
}

.season-item__title {
   padding: 30px 0 0 0;
   font-weight: 500;
   text-transform: uppercase;
}
.season-item__paragraph {
   text-transform: uppercase;
   font-size: 16px;
   opacity: 0.8;
   padding: 10px 0 20px 0;
}
.season-item__price {
   text-transform: uppercase;
   font-size: 16px;
   opacity: 0.8;
}



.popular .season__items {
   flex-wrap: wrap;
}
.popular .season__top .button {
   display: flex;
}
.popular .button {
   display: none;
}



.catalog .season__items {
   flex-wrap: wrap;
}
.catalog .season__top .button {
   display: flex;
}
.catalog .button {
   display: none;
}



.delivery {
   background: var(--bg-primary);
}
.delivery .about__img::after {
   display: none;
}
.delivery__items {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: auto auto;
   gap: 35px;
   justify-items: center;
}
.delivery-item:nth-child(3) {
   grid-column: 1 / span 2;
   justify-self: center;
}
.delivery-item {
   text-align: center;
}
.delivery-item__paragraph {
   padding: 25px 0 0 0;
   opacity: 0.8;
}



.whywe {
   background: var(--bg-secondary);
}
.whywe .about__paragraph {
   padding: 30px 0;
}



.contacts {
   background: var(--bg-secondary);
}
.contacts__row {
   padding: 100px 0 150px 0;
   display: flex;
   gap: 35px;
}
.contacts__info {
   width: 50%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}
.contacts__paragraph {
   width: 70%;
   padding: 15px 0 20px 0;
}
.contacts__items {
   display: flex;
   align-items: end;
   gap: 35px;
}
.contacts-item {
   width: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}
.contacts-item__title {
   font-weight: 500;
   text-transform: uppercase;
   padding: 20px 0 15px 0;
}
.contacts-item__paragraph {
   opacity: 0.8;
   text-decoration: none;
   color: var(--text-primary);
}
.contacts__form {
   width: 50%;
   display: flex;
   flex-direction: column;
   gap: 20px;
}
.contacts__form input, .contacts__form textarea {
   width: calc(100% - 40px);
   padding: 15px 20px;
   font-family: var(--font);
   font-size: 24px;
   background: var(--bg-primary);
   border: 0;
   resize: none;
   border: 2px solid var(--bg-primary);
}
.contacts__form input:focus, .contacts__form textarea:focus {
   outline: none;
   border: 2px solid var(--color-primary);
}
.contacts__form button {
   font-family: var(--font);
   font-size: 24px;
   border: 0;
}



.footer__row {
   padding: 50px 0;
}
.footer__title {
   font-size: 64px;
   font-weight: 400;
   color: var(--color-primary);
   font-family: "Tektur", sans-serif;
   text-transform: uppercase;
}
.footer__info {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.footer__menu {
   display: flex;
   gap: 25px;
}
.footer__list {
   font-size: 24px;
   position: relative;
}
.footer__list::after {
   content: "";
   display: block;
   width: 0%;
   height: 2px;
   background: var(--color-primary);
   position: absolute;
   bottom: -10px;
   transition: width 0.3s;
}
.footer__list:hover::after {
   width: 100%;
}
.footer__list a {
   text-decoration: none;
   color: var(--text-primary);
}
.footer__contacts {
   display: flex;
   gap: 15px;
}
.footer__contacts path{
   transition: all 0.3s;
}
.footer__contact:hover path {
   stroke: var(--text-primary);
}
.footer__contact:last-of-type:hover path:first-of-type {
   fill: var(--text-primary);
}



.catalog {
   background: var(--bg-secondary);
}
.catalog__row {
   padding: 100px 0;
}
.catalog__top {
   display: flex;
   justify-content: space-between;
}
.catalog-filters {
   display: flex;
   flex-direction: column;
   gap: 30px;
   position: relative;
}
.catalog-filters__button {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 237px;
   color: var(--color-primary);
   border: 3px solid var(--color-primary);
   text-decoration: none;
   transition: background-color 0.3s, color 0.3s;
   cursor: pointer;
   padding: 18px 20px;
   background-color: var(--bg-secondary);
}
.catalog-filters__button svg {
   transform: rotate(-90deg);
   transition: transform 0.3s;
}
.catalog-filters__button path {
   transition: stroke 0.3s;
}
.catalog-filters__button:hover {
   background-color: var(--color-primary);
   color: var(--bg-secondary);
}
.catalog-filters__button:hover .catalog-filters__text {
   color: var(--bg-secondary);
}
.catalog-filters__button:hover path {
   stroke: var(--bg-secondary);
}
.catalog-filters__text {
   color: var(--color-primary);
   text-decoration: none;
   transition: color 0.3s;
}
.catalog-filters__menu {
   position: absolute;
   top: 100%;
   margin: 15px 0 0 0;
   left: 0;
   z-index: 2;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.3s;
}
.catalog-filters.active .catalog-filters__menu {
   opacity: 1;
   pointer-events: all;
}
.catalog-filters.active .catalog-filters__button svg {
   transform: rotate(90deg);
}
.catalog-filters__menu .catalog-filters__button:not(:last-of-type) {
   border-bottom: none;
}



/* Медиа-запросы для адаптива */
@media(max-width: 1199px) {
   .title {
      font-size: 48px;
   }

   .header__row {
      gap: 20px;
   }
   .header__logo {
      width: 50px;
      height: 50px;
   }
   .header-contact {
      gap: 10px;
   }
   .header-lang__item {
      width: 30px;
      height: 30px;
      font-size: 16px;
   }

   .hero__text {
      margin: 50px 0 0 0;
   }
   .hero__img::after {
      bottom: -10px;
      right: -10px;
   }

   .about__img::after {
      bottom: -10px;
      right: -10px;
   }
}

@media(max-width: 1023px) {
   .title {
      font-size: 32px;
   }
   .button {
      font-size: 16px;
      width: 230px;
      height: 50px;
   }

   .header-contact--desktop {
      display: none;
   }
   .header-lang {
      margin-left: auto;
   }
   .header-burger {
      display: flex;
   }
   .header__container {
      position: relative;
   }
   .header__menu {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      flex-direction: column;
      background-color: var(--bg-primary);
      padding: 20px;
      z-index: 100;
      transform: translateY(-100%);
      opacity: 0;
      visibility: hidden;
      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
   }
   .header__menu.active {
      display: flex;
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
   }
   .header__list a {
      font-size: 20px;
      display: block;
      padding: 10px 0;
   }
   .header__list::after {
      left: 0;
      bottom: 0;
   }
   .header__list:hover::after {
      width: 100%;
   }
   .header-contact--mobile {
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin-top: 20px;
   }
   .header-contact--mobile .header-contact__line {
      display: none;
   }

   .hero__row {
      padding: 30px 0 50px;
   }
   .hero__paragraph {
      font-size: 16px;
   }

   .about__paragraph {
      font-size: 16px;
   }

   .advantages-item__paragraph, .advantages-item__title {
      font-size: 16px;
   }

   .season-arrows__arrow {
      height: 40px;
      width: 40px;
   }
   .season-arrows__progress {
      font-size: 32px;
   }
   .season-item__title {
      font-size: 16px;
   }

   .whywe .about__paragraph {
      padding: 20px 0;
   }

   .delivery-item__paragraph {
      font-size: 16px;
      padding: 10px 0 0 0;
   }
   .delivery-item__icon svg {
      width: 50px;
      height: 50px;
   }

   .contacts-item__icon svg {
      width: 70px;
      height: 70px;
   }
   .contacts__paragraph, .contacts-item__title, .contacts-item__paragraph {
      font-size: 16px;
   }
   .contacts-item__title {
      padding: 10px 0 ;
   }
   .contacts__form > :not(.button) {
      width: calc(100% - 20px);
      padding: 10px 9px;
      font-size: 16px;
   }
   .contacts__form button {
      font-size: 16px;
   }

   .footer__list {
      font-size: 16px;
   }

   
   .catalog-filters__button {
      font-size: 16px;
      width: 190px;
      padding: 10px 20px;
   }
   .catalog-filters__button path {
      stroke-width: 2;
   }
}

@media(max-width: 767px) {
   .button {
      width: 100%;
   }

   .hero__row {
      flex-direction: column;
      align-items: center;
   }
   .hero__info, .hero__img {
      width: 100%;
   }
   .hero__text {
      margin: 0 0 20px 0;
   }
   .hero__paragraph {
      width: 100%;
   }

   .about__row {
      flex-direction: column;
      padding: 50px 0;
   }
   .about__text, .about__img {
      width: 100%;
   }

   .advantages__row {
      padding: 50px 0;
   }
   .advantages__items {
      flex-direction: column;
      margin: 30px 0 0 0;
   }
   .advantages-item {
      width: 100%;
   }
   .advantages-item__title {
      padding: 15px 0 10px 0;
   }

   .season__row {
      padding: 50px 0;
   }
   .season-item {
      width: calc(100%);
   }
   .season-item__title {
      font-size: 24px;
   }

   .popular .season__top {
      gap: 35px;
   }
   .popular .season__top .button {
      display: none;
   }
   .popular .button {
      margin: 30px 0 0 0;
      display: flex;
   }
   .popular .season-item {
      width: calc(100%);
   }

   .catalog .season-item {
      width: calc(100%);
   }

   .delivery__items {
      display: flex;
      align-items: center;
      flex-direction: column;
   }
   .delivery-item {
      width: 100%;
   }
   .delivery-item__icon svg {
      width: 70px;
      height: 70px;
   }

   .contacts__row {
      flex-direction: column;
      padding: 50px 0;
   }
   .contacts__info, .contacts__form {
      width: 100%;
   }

   .footer__info {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 20px;
      padding: 20px 0 0 0;
   }
   .footer__menu {
      flex-direction: column;
      align-items: center;
   }
   .footer__list {
      font-size: 24px;
   }
}

@media(max-width: 479px) {
   .season__top {
      flex-direction: column;
      justify-content: start;
      align-items: center;
      text-align: center;
   }
   .season-arrows {
      margin: 30px 0 0 0;
      width: 100%;
      justify-content: space-between;
   }

   .contacts__text {
      text-align: center;
   }
   .contacts__paragraph {
      width: 100%;
   }
   .contacts__items {
      flex-direction: column;
      align-items: center;
   }
   .contacts-item {
      width: 100%;
   }

   .catalog__top {
      flex-direction: column;
      align-items: center;
      gap: 30px;
   }
   .catalog-filters {
      width: 100%;
   }
   .catalog-filters__button {
      width: calc(100% - 40px);
   }
   .catalog-filters__menu {
      width: 100%;
   }
   .catalog-filters__menu .catalog-filters__button{
      padding: 15px 20px;
   }
}

@media(max-width: 374px) {
   
}/* put your style.css here; copied from your static site */