.wrapper{ margin: auto; max-width: 1440px; } /* text */ .title-1{ font-size: 88px; } .title-2{ font-size: 64px; } .title-3{ font-size: 40px; } .title-4{ font-size: 24px; } .text-1{ font-size: 24px; } .text-2{ font-size: 18px; } .text-3{ font-size: 16px; } /* text */ /* header */ .header__phone{ display: none; } .phone-menu{ display: none; } .header{ } .header__wrapper{ padding: 24px 0; display: flex; justify-content: space-between; align-items: center; } .header__main{ display: flex; align-items: center; } .header-main__item{ margin-left: 48px; display: flex; align-items: center; } .header-main__item:first-child{ margin-left: 0; } .header-main__btn{ margin-left: 16px; } .header-main__btn:first-child{ margin-left: 0; } .header__text{ font-weight: 400; font-size: 18px; color: var(--text-white); } .header__text a { color: var(--text-white); } .header__text--bo-line{ text-decoration: none; } .header__menu{ padding: 16px 0; background-color: var(--background-grey); } .header-menu__wrapper{ display: flex; justify-content: space-between; align-items: center; } .header-menu__list{ display: flex; align-items: center; font-weight: 400; font-size: 16px; text-transform: uppercase; color: var(--text-white); list-style-type: none; } .header-menu__list li{ margin-left: 32px; } .header-menu__list li:first-child{ margin-left: 0; } .header-menu__list a{ color: var(--text-white); text-decoration: none; } .header-menu-list__next{ padding-right: 24px; background-image: url(/assets/img/icon/arrow-bottom.svg); background-repeat: no-repeat; background-position: center right; } .header-menu__search{ width: 32px; aspect-ratio: 1; } /* header */ /* footer */ .footer{ margin-top: 200px; padding: 56px 0; } .footer__wrapper{ display: flex; justify-content: space-between; flex-wrap: wrap; } .footer__contact{ display: flex; } .footer__contact .footer__item{ margin-left: 58px; } .footer__contact .footer__item:first-child{ margin-left: 0px; } .footer-menu__item{ margin-left: 40px; } .footer-menu__item:first-child{ margin-left: 0; } .footer-menu__list{ font-size: 16px; } .footer-menu__list li{ margin-top: 16px; } .footer-menu__list li:first-child{ margin-top: 0px; } .footer__text{ display: block; max-width: 297px; font-size: 24px; } .footer__about{ margin-top: 33px; width: 100%; display: flex; justify-content: space-between; align-items: center; } /* footer */ /* Стили для лептопов */ @media only screen and (min-width: 992px) and (max-width: 1400px) { .wrapper{ width: 100%; padding: 20px; } /* header */ .header__wrapper{ flex-wrap: wrap; } .header__main{ margin-top: 10px; width: 100%; justify-content: center; } /* header */ /* footer */ .footer__wrapper{ justify-content: start; } .footer__item{ margin-left: 58px; } .footer__contact{ margin-top: 30px; width: 100%; justify-content: space-between; } .footer__about{ margin-left: 0; } /* footer */ } @media only screen and (min-width: 992px) and (max-width: 1032px) { /* header */ .header__main{ width: 100%; justify-content: space-between; } .header-main__item{ margin-left: 0; justify-content: space-between; } /* header */ } /* space */ .space{ margin-top: 56px; } .space__content{ margin-top: 56px; display: flex; align-items: end; } .space__statistics{ width: 947px; height: 480px; padding: 24px; display: flex; align-items: end; position: relative; } .space-statistics__img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .space-statistics__item{ margin-left: 24px; width: 216px; height: 173px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; backdrop-filter: blur(10px); background: rgba(42, 42, 45, 0.7); border-radius: 4px; } .space-statistics__item:nth-child(2){ margin-left: 0; } .space__consultation{ margin-left: 40px; max-width: 453px; } .space__consultation .btn-big{ margin-top: 64px; } /* space */ .main__item{ margin-top: 200px; } /* gym */ .gym{ margin: 34px -20px -20px -20px; } .gym .swiper-wrapper{ display: flex; flex-wrap: wrap; } .gym .swiper-slide{ display: flex; } .gym__item{ margin: 20px; height: 320px; display: flex; justify-content: space-between; } .gym-item__img{ min-width: calc(50% - 20px); width: 100%; height: 100%; object-fit: cover; border-radius: 4px; } .gym-item__text{ min-width: calc(50% - 20px); width: 100%; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; background-color: var(--background-grey); border-radius: 4px; } .gym-item-img--padding, .gym-item-text--padding{ max-width: calc(50% - 20px); } .gym-item-text__header{ display: flex; align-items: end; } .gym-item-text__header .text-1{ margin-bottom: 11.5px; } .gym-item-text__header .title-2{ margin-left: 16px; } /* gym */ @media only screen and (min-width: 992px) { .gym__item{ width: calc(50% - 40px) !important; } .gym .swiper-slide:nth-child(3){ width: 100% !important; } } /* projects */ .projects{ margin: 37px -20px -20px -20px; display: flex; flex-wrap: wrap; } .projects__item{ margin: 20px; width: calc(50% - 40px); display: flex; flex-direction: column; border-radius: 4px; overflow: hidden; } .projects-item__img{ width: 100%; height: 304px; object-fit: cover; } .projects-item__content{ min-height: 275px; padding: 32px; background-color: var(--background-grey); } .projects-item__tags{ display: flex; align-items: center; } .projects-item__tag{ margin-left: 40px; display: flex; align-items: center; } .projects-item__tag:first-child{ margin-left: 0; } .projects-item-tag__icon{ width: 24px; aspect-ratio: 1; } .projects-item-tag__name{ margin-left: 16px; } .projects-item__text{ margin-top: 32px; } .projects-item__text .text-2{ margin-top: 16px; } .projects__next{ margin-top: 56px; display: flex; justify-content: center; } /* projects */ /* how */ .how{ margin-top: 56px; display: flex; } .how__control{ width: 577px; flex-shrink: 0; } .how-control__item{ margin-top: 24px; padding: 16px; display: flex; align-items: center; background-color: var(--background-grey); border-radius: 4px; transition: background-color .3s; } .how-control__item:first-child{ margin-top: 0; } .how-control-item__number{ width: 64px; aspect-ratio: 1; display: flex; justify-content: center; align-items: center; border-radius: 4px; background-color: var(--background-grey-hover); transition: background-color .3s; } .how-control__item__name{ margin-left: 24px; max-width: 440px; } .how-control__item:hover{ background-color: var(--background-grey-hover); } .how-control__item:hover .how-control-item__number{ background-color: var(--background-grey); } .how-control__item.active{ background-color: var(--background-grey-hover); } .how-control__item.active .how-control-item__number{ background-color: var(--background-grey); } .how__content{ margin-left: 40px; width: 100%; } .how-content__item{ width: 100%; padding: 32px; background-color: var(--background-grey); overflow: hidden; display: none; } .how-content__item.active{ display: block; } .how-content__item .text-2{ margin-top: 16px; } .how-content-item__content{ margin-top: 24px; display: flex; position: relative; } .how-content-item__content .text-2{ margin-top: 16px; } .how-content-item__content .text-2:first-child{ margin-top: 0; } .how-content-item__text{ width: 480px; } .how-content-item__img--1{ position: absolute; right: -36px; bottom: -39px; width: 303px; height: 303px; } .how-content-item__img--2{ position: absolute; right: -34px; bottom: -41px; } .how-content-item__img--3{ position: absolute; right: -31.98px; bottom: -30.98px; width: 336px; height: 336px; } /* how */ /* free */ .free{ padding: 88px 64px; display: flex; flex-direction: column; align-items: center; background-color: var(--background-grey); } /* .free > .title-1{ text-align: center; } */ .free__content{ margin-top: 56px; width: 800px; } /* free */ /* reviews */ .reviews{ margin-top: 56px; position: relative; overflow: hidden; } .reviews__item{ display: flex; padding-bottom: 88px; } .reviews-item__content{ width: 100%; } .reviews-item-content__header{ display: flex; align-items: center; } .reviews-item-content-header__img{ width: 112px; height: 112px; border-radius: 4px; } .reviews-item-content-header__block{ margin-left: 40px; width: 100%; } .reviews-item-content-header__item{ margin-top: 16px; width: 100%; display: flex; justify-content: space-between; } .reviews-item-content-header__item:first-child{ margin-top: 0; } .reviews-item-content-header__pin{ padding-left: 40px; display: flex; align-items: center; background-image: url(/assets/img/icon/pin.svg); background-repeat: no-repeat; background-position: left; } .reviews-item-content__text{ margin-top: 40px; } .reviews-item__img{ margin-left: 164px; width: 577px; height: 600px; border-radius: 4px; object-fit: cover; flex-shrink: 0; } .reviews .swiper-pagination{ position: absolute; right: 32px; bottom: 104px; padding-right: 32px; text-align: end; } .reviews .swiper-pagination-bullet{ width: 97px; height: 4px; background-color: #111114; opacity: 1 !important; border-radius: 0; } .reviews .swiper-pagination-bullet-active{ background-color: var(--text-white); } .reviews__counter{ position: absolute; bottom: 0px; width: 100%; display: flex; justify-content: center; font-weight: 400; font-size: 24px; color: var(--text-white); } .reviews__counter--grey{ color: var(--link); } .reviews .swiper-button-next::after, .reviews .swiper-button-prev::after{ position: static; font-size: 0; } .reviews .swiper-button-next, .reviews .swiper-button-prev{ position: static; margin-top: 0; width: 32px; height: 32px; } .reviews .swiper-button-next{ margin-left: 40px; background-image: url(/assets/img/icon/slider-righ.svg); background-repeat: no-repeat; } .reviews .swiper-button-prev{ margin-right: 40px; background-image: url(/assets/img/icon/slider-left.svg); background-repeat: no-repeat; } /* reviews */ /* text and form */ .text-form{ margin-top: 88px; display: flex; } .text-form__content{ width: 100%; } .text-form__form{ margin-left: 40px; width: 453px; padding: 32px; background-color: var(--background-grey); flex-shrink: 0; } .text-form__form .title-3{ margin-bottom: 32px; text-align: center; } .text-form__form .form__additional, .text-form__form input[type=submit]{ margin-top: 24px; } .text-form__form .form-additional__text a{ margin-left: 0; } .text-form__agreement--text-form{ height: 44px; align-items: start; } /* text and form */ /* services */ .services{ margin: 34px -20px -20px -20px; display: flex; flex-wrap: wrap; } .services__item{ margin: 20px; height: 257px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; background-color: var(--background-grey); border-radius: 4px; } .services__item:nth-child(1), .services__item:nth-child(2), .services__item:nth-child(3){ width: calc(33.3% - 40px); } .services__item:nth-child(n+4){ width: calc(50% - 40px); } .services__img{ width: 88px; aspect-ratio: 1; } .services__content{ height: 89px; /* display: flex; */ } .services__content .title-4{ margin-bottom: 16px; } /* services */ /* call */ .call{ padding: 88px 64px; display: flex; flex-direction: column; align-items: center; background-color: var(--background-grey); } .call__content{ margin-top: 56px; width: 910px; height: 152px; display: flex; justify-content: space-between; } .call__item{ height: 100%; display: flex; flex-direction: column; justify-content: space-between; } /* call */ @media only screen and (min-width: 992px) and (max-width: 1032px) {}