/* social style */

.social {
  display: flex;
  align-items: center;
}

.social a {
  display: flex;
}

.social a+a {
  margin-left: 1rem;
}

.social svg {
  width: 2.5rem;
  height: 2.5rem;
}

.social svg path {
  transition: all .3s ease;
}

/* header style */

.header {
  height: 8rem;
  position: sticky;
  top: 0;
  width: 100%;
  background: #00000040;
  display: flex;
  align-items: center;
  z-index: 99;
  backdrop-filter: blur(3.2rem);
}

.header a {
  color: var(--white);
}

.header .social svg path {
  fill: var(--white);
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__left {
  display: flex;
  align-items: center;
}

.logo {
  margin-right: 8.5rem;
  width: 8rem;
  height: 4rem;
}

.logo__img {
  width: 8rem;
  height: 4rem;
  object-fit: contain;
  object-position: center;
}

.menu-list {
  display: flex;
}

.menu-list a:hover {
  color: var(--botton);
}

.menu-list li+li {
  margin-left: 4rem;
}

.header__right {
  display: flex;
  align-items: center;
}

.header-phone {
  display: flex;
  align-items: center;
  margin-right: 1.6rem;
}

.header-phone a:hover {
  color: var(--botton);
}

.header-phone__link+.header-phone__link {
  margin-left: 1.6rem;
}

.header .social a:hover svg path {
  fill: var(--botton);
}

.burger {
  display: none;
}

.mobile-phone {
  display: none;
}

.header-mobile {
  display: none;
}

.bg-menu {
  display: none;
}

@media (max-width: 1023px) {
  .header {
    height: 11.2rem;
    align-items: flex-start;
  }

  .header .container {
    position: relative;
    height: 100%;
  }

  .header__inner {
    align-items: center;
    padding-top: 2.5rem;
  }

  .logo {
    margin-right: 2.5rem;
  }

  .logo,
  .logo__img {
    width: 7.3rem;
    height: 3.6rem;
  }

  .menu-list li+li {
    margin-left: 4.5rem;
  }

  .header-phone {
    position: absolute;
    bottom: 2.5rem;
    right: 4rem;
    margin: 0;
  }
}

@media (max-width: 767px) {

  .header {
    height: 7.4rem;
    backdrop-filter: inherit;
  }

  .burger {
    display: block;
    position: relative;
    width: 2.5rem;
    height: 1.6rem;
    cursor: pointer;
  }

  .burger__line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.2rem;
    background: var(--white);
    transition: all .3s ease;
  }

  .burger__line-1 {
    top: 0;
  }

  .burger__line-2 {
    top: 50%;
    transform: translateY(-50%);
  }

  .burger__line-3 {
    bottom: 0;
  }

  .burger__line-4,
  .burger__line-5 {
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
  }

  .burger--active .burger__line-1,
  .burger--active .burger__line-2,
  .burger--active .burger__line-3 {
    opacity: 0;
  }

  .burger--active .burger__line-4,
  .burger--active .burger__line-5 {
    opacity: 1;
  }

  .burger--active .burger__line-4 {
    transform: rotate(-45deg);
  }

  .burger--active .burger__line-5 {
    transform: rotate(45deg);
  }

  .menu {
    display: none;
  }

  .header__right {
    display: none;
  }

  .mobile-phone {
    display: block;
  }

  .mobile-phone,
  .mobile-phone__img {
    width: 2.8rem;
    height: 2.8rem;
  }

  .header__inner {
    padding-top: 0;
    height: 100%;
    backdrop-filter: blur(3.2rem);
    margin-left: -2rem;
    margin-right: -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .logo {
    margin-right: 0;
  }

  .logo,
  .logo__img {
    width: 6.6rem;
    height: 3.3rem;
  }

  .header-mobile {
    display: block;
    width: 100%;
    position: absolute;
    background: #00000040;
    backdrop-filter: blur(3.2rem);
    top: 7.4rem;
    left: 0;
    padding: 2rem;
    padding-bottom: 5rem;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
  }

  .header-mobile--active {
    opacity: 1;
    visibility: visible;
  }

  .menu-list {
    flex-direction: column;
  }

  .menu-list li+li {
    margin-left: 0;
    margin-top: 2rem;
  }

  .header__right {
    margin-top: 4rem;
  }

  .header-phone {
    position: static;
    flex-direction: column;
    align-items: flex-start;
  }

  .header-phone__link+.header-phone__link {
    margin-left: 0;
    margin-top: 2rem;
  }

  .header .social {
    margin-top: 2.5rem;
  }

  .bg-menu {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
  }

  .bg-menu--active {
    opacity: 1;
    visibility: visible;
  }
}

/* main style */

.main {
  margin-top: -8rem;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: #000000B2;
  color: var(--white);
  display: flex;
  align-items: flex-end;
}

.main__video {
  position: absolute;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  z-index: -1;
}

.main__inner {
  padding-bottom: 5rem;
}

.main-adres {
  position: absolute;
  top: 11rem;
  padding: 1.7rem 2.5rem;
  border-radius: 3rem;
  background: var(--black);
  display: flex;
  align-items: center;
}

.main-adres__img {
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 1rem;
}

.main-list {
  position: absolute;
  top: 11rem;
  right: 6rem;
}

.main-list__item {
  display: flex;
  align-items: center;
}

.main-list__img {
  width: 3rem;
  height: 3rem;
  margin-right: 0.5rem;
}

.main-list__item+.main-list__item {
  margin-top: 1.8rem;
}

.main__sibtitle {
  margin-top: 1.5rem;
}

.main-bottom {
  margin-top: 9.5rem;
  display: flex;
  align-items: center;
}

.main-bottom__btns {
  display: flex;
  margin-right: 2rem;
}

.main-bottom__btns button {
  width: 31.5rem;
}

.main-bottom__btns button+button {
  margin-left: 1rem;
}

.main-bottom__text {
  max-width: 19.6rem;
  color: var(--green);
}

.mobile-main-list {
  display: none;
}

@media (max-width: 1023px) {
  .main {
    margin-top: -11.2rem;
  }

  .main-adres {
    top: 13.2rem;
  }

  .main-adres__img {
    width: 2rem;
    height: 2rem;
  }

  .main-list {
    max-width: 33.4rem;
    top: 14.7rem;
    right: 4rem;
  }

  .main-list__item+.main-list__item {
    margin-top: 1.5rem;
  }

  .main-list__img {
    width: 2.5rem;
    height: 2.5rem;
  }

  .main__sibtitle {
    margin-top: 2rem;
  }

  .main__inner {
    padding-bottom: 7rem;
  }

  .main-bottom {
    margin-top: 4rem;
    flex-direction: column-reverse;
  }

  .main-bottom__text {
    max-width: 32.9rem;
    align-self: flex-end;
  }

  .main-bottom__btns {
    margin-top: 1.3rem;
    width: 100%;
    margin-right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
  }

  .main-bottom__btns button+button {
    margin-left: 0;
  }

  .main-bottom__btns button {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .main {
    margin-top: -7.4rem;
    display: block;
  }

  .main .container {
    height: 100%;
  }

  .main__inner {
    padding-top: 10.4rem;
    height: 100%;
    padding-bottom: 3rem;
    display: flex;
    flex-direction: column;
  }

  .main-list {
    display: none;
  }

  .main-adres {
    position: static;
    padding: 1.5rem 1.8rem;
  }

  .main-adres__img {
    width: 1.8rem;
    height: 1.8rem;
    margin-right: 1rem;
  }

  .main__title {
    margin-top: 1rem;
    max-width: 30rem;
  }

  .main__sibtitle {
    max-width: 30rem;
  }

  .main-bottom {
    margin-top: auto;
    flex-direction: column;
  }

  .main-bottom__btns {
    margin-top: 0;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
  }

  .main-bottom__text {
    margin-top: 1.5rem;
    text-align: center;
  }

  .mobile-main-list {
    padding-top: 5rem;
    padding-bottom: 1rem;
    display: block;
    background: var(--black);
  }

  .mobile-main-list .main-list {
    position: static;
    display: block;
    color: var(--white);
  }
}

/* quiz */
.quiz {
  padding: 12rem 0;
  background: var(--black);
}

.quiz__inner {
  height: 75.1rem;
  padding: 5rem;
  padding-top: 6rem;
  background: var(--white);
}

.quiz-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2.8rem;
}

.quiz-top__text {
  max-width: 26.4rem;
  color: var(--gray-1);
}

.quiz-slide__title {
  margin-bottom: 3.5rem;
}

.quiz-grid-wrapper {
  margin-right: 28.2rem;
  overflow: auto;
}

.quiz-grid-wrapper::-webkit-scrollbar {
  width: 0.8rem;
  /* ширина scrollbar */
}

.quiz-grid-wrapper::-webkit-scrollbar-track {
  background: var(--gray-bg-3);
  /* цвет дорожки */
}

.quiz-grid-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--green);
  /* цвет плашки */
}

.quiz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2rem;
  padding-right: 2rem;
  height: 29.5rem;
}

.quiz-grid-item {
  cursor: pointer;
  height: 20.2rem;
}

.quiz-grid-item__top {
  position: relative;
}

.quiz-grid-item__img,
.quiz-grid-item__top {
  width: 100%;
  height: 17rem;
  object-fit: cover;
  object-position: center;
}

.quiz-grid-item__checked {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00000066;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
}

.quiz-grid-item__checked--active {
  opacity: 1;
  visibility: visible;
}

.quiz-grid-item__checked-inner {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.quiz-grid-item__checked-img {
  width: 4rem;
  height: 4rem;
}

.quiz-grid-item__text {
  margin-top: 1rem;
}

.quiz-bottom {
  margin-top: 2.5rem;
}

.quiz-bottom__btns {
  display: flex;
  justify-content: flex-end;
}

.quiz-bottom__btn-back {
  display: flex;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
}

.quiz-bottom__btn-back--active {
  opacity: 1;
  visibility: visible;
}

.quiz-bottom__btn-back svg {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 1.5rem;
}

.quiz-bottom__btn-next {
  width: 20rem;
  margin-left: 1.6rem;
  opacity: 1;
  visibility: visible;
  transition: all .3s ease;
}

.quiz-bottom__btn-back--disable {
  opacity: 0;
  visibility: hidden;
}

.quiz-progress {
  margin-top: 2.5rem;
  height: 1rem;
  width: 100%;
  background: var(--gray-bg-3);
  position: relative;
}

.quiz-progress__step {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 12.5%;
  background: var(--green);
  transition: all .3s ease;
}

.quiz-inputs {
  display: flex;
}

.quiz-inputs-item+.quiz-inputs-item {
  margin-left: 11rem;
}

.quiz-inputs-item__title {
  margin-bottom: 1rem;
}

.quiz-inputs-item__inner {
  display: flex;
  align-items: center;
}

.quiz__input {
  width: 17.5rem;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  background: var(--gray-bg);
}

.quiz__input::placeholder {
  color: var(--gray-1);
}

.quiz-inputs-item__text {
  display: block;
  margin-left: 1rem;
}

.quiz-radio {
  display: flex;
  align-items: center;
}

.quiz-radio-item {
  display: flex;
  align-items: center;
}

.quiz-radio-item__checkbox {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--gray-bg-3);
  margin-right: 1rem;
  transition: all .3s ease;
}

.quiz-radio-item--active .quiz-radio-item__checkbox {
  background: var(--green);
}

.quiz-radio-item+.quiz-radio-item {
  margin-left: 26.7rem;
}

.quiz-form__wrapper {
  max-width: 60rem;
}


.quiz-form__wrapper .wpcf7-form-control-wrap {
  display: block;
}

.quiz-form__wrapper .wpcf7-form-control-wrap+.wpcf7-form-control-wrap {
  margin-top: 1.5rem;
}

.quiz-form__wrapper .input {
  background: var(--gray-bg);
  box-sizing: border-box;
}

input[type="submit"].btn-1 {
  background: var(--botton);
}

.quiz-form__btn {
  margin-top: 3rem;
}

@media (max-width: 1023px) {
  .quiz {
    padding-top: 7rem;
    padding-bottom: 4.5rem;
  }

  .quiz__inner {
    height: 84.4rem;
    padding: 5rem 3rem;
  }

  .quiz-top {
    flex-direction: column;
    margin-bottom: 4rem;
  }

  .quiz-top__text {
    margin-top: 2.5rem;
    max-width: 100%;
  }

  .quiz-slide__title {
    margin-bottom: 2rem;
  }

  .quiz-slide {
    height: 44.1rem;
  }

  .quiz-grid {
    height: inherit;
    padding-right: 0;
  }

  .quiz-grid-wrapper {
    margin-right: 0;
  }

  .quiz-grid-item {
    height: inherit;
  }

  .quiz-bottom {
    margin-top: 2rem;
  }

  .quiz-bottom__btns {
    justify-content: space-between;
  }

  .quiz-progress {
    margin-top: 2rem;
    height: 0.8rem;
  }

  .quiz-bottom__btn-next {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    width: 20.6rem;
  }

  .quiz-inputs {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .quiz-inputs-item+.quiz-inputs-item {
    margin-left: 0;
  }

  .quiz-inputs-one .quiz-inputs-item:last-child {
    margin-top: 2.5rem;
  }

  .quiz-radio-item+.quiz-radio-item {
    margin-left: 34rem;
  }

  .quiz-slide-last .quiz-slide__title {
    max-width: 52rem;
  }

  .quiz-form__btn {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (max-width: 767px) {
  .quiz {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .quiz__inner {
    padding: 3rem 2rem;
    height: 75.5rem;
  }

  .quiz-top {
    margin-bottom: 3rem;
  }

  .quiz-top__text {
    margin-top: 2rem;
  }

  .quiz-slide {
    height: 38.5rem;
  }

  .quiz-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2rem 1.5rem;
    height: 36rem;
    margin-right: 1rem;
  }

  .quiz-grid-item {
    height: 17rem;
  }

  .quiz-grid-item__img,
  .quiz-grid-item__top {
    height: 12rem;
  }

  .quiz-bottom {
    margin-top: 1.5rem;
  }

  .quiz-bottom__btn-next {
    padding-top: 1rem;
    padding-bottom: 1rem;
    width: 13.2rem;
  }

  .quiz-progress {
    height: 0.6rem;
  }

  .quiz-inputs-item+.quiz-inputs-item {
    margin-top: 2rem;
  }

  .quiz__input {
    width: 14.8rem;
  }

  .quiz-radio {
    flex-direction: column;
    align-items: flex-start;
  }

  .quiz-radio-item+.quiz-radio-item {
    margin-left: 0;
    margin-top: 2rem;
  }

  .quiz-radio-item__checkbox {
    width: 1.5rem;
    height: 1.5rem;
  }

  .quiz-form__wrapper .wpcf7-form-control-wrap+.wpcf7-form-control-wrap {
    margin-top: 1rem;
  }

  .quiz-form__btn {
    margin-top: 2rem;
  }

  .quiz-grid-wrapper::-webkit-scrollbar {
    width: 0.6rem;
    /* ширина scrollbar */
  }
}

/* about-us style */

.about-us {
  margin-top: 11rem;
}

.about-us__inner {
  display: grid;
  grid-template-columns: 48.3rem 1fr;
  grid-gap: 18.6rem;
}

.about-us__img {
  width: 100%;
  height: 66rem;
  object-fit: cover;
  object-position: -40rem;
}

.about-us__subtitle {
  margin-top: 0.5rem;
}

.about-us__text {
  margin-top: 6rem;
}

.about-us__text p+p {
  margin-top: 1.5rem;
}

.about-us-swiper {
  margin-top: 5rem;
}

.about-us-swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2rem;
}

.about-us-swiper__block {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  background: var(--gray-bg);
  padding: 2.5rem 4rem 3rem 4rem;
  box-sizing: border-box;
}

.about-us-swiper__block--big {
  grid-column: span 2;
  padding: 4rem;
  padding-top: 2.5rem;
}

.about-us-swiper__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.about-us-swiper__img {
  margin-left: 1.6rem;
  width: 6rem;
  height: 6rem;
}

.about-us-swiper__text {
  margin-top: 2.1rem;
  color: var(--gray-1);
}

.about-us-swiper__block:not(.about-us-swiper__block--big) .about-us-swiper__text {
  margin-top: 2.7rem;
}

.about-us-swiper__text p+p {
  margin-top: 1rem;
}

@media (max-width: 1023px) {
  .about-us {
    margin-top: 12rem;
  }

  .about-us .container {
    padding: 0;
  }

  .about-us__inner {
    grid-template-columns: 37.4rem 1fr;
    grid-gap: 2rem;
    padding-right: 4rem;
  }

  .about-us__img {
    height: 42.6rem;
    object-position: -22rem;
  }

  .about-us__text {
    margin-top: 3.5rem;
  }

  .about-us-swiper {
    margin-top: 6rem;
    padding: 0 4rem;
  }

  .about-us-swiper-wrapper {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2rem;
  }

  .about-us-swiper__block {
    padding: 2.8rem 2.5rem 3rem 2.5rem;
  }

  .about-us-swiper__block h4 {
    max-width: 19.4rem;
  }

  .about-us-swiper__block--big {
    grid-column: inherit;
  }

  .about-us-swiper__block--big h4 {
    max-width: 19rem;
  }

  .about-us-swiper__text {
    margin-top: 3rem;
  }

  .about-us-swiper__img {
    width: 5rem;
    height: 5rem;
  }
}

@media (max-width: 767px) {
  .about-us {
    margin-top: 8rem;
  }

  .about-us .container {
    padding: 0 2rem;
  }

  .about-us__inner {
    padding: 0;
    grid-template-columns: 1fr;
    grid-gap: 2.5rem;
  }

  .about-us__img {
    height: 28rem;
    object-position: center;
  }

  .about-us__text {
    margin-top: 4rem;
  }

  .about-us-swiper {
    margin-top: 4rem;
    padding: 0;
    position: relative;
  }

  .about-us-swiper-wrapper {
    display: flex;
    grid-gap: inherit;
  }

  .about-us-swiper__block {
    height: 33.2rem;
    padding: 2.5rem;
  }

  .about-us-swiper__text {
    margin-top: 3.3rem;
  }

  .about-us-swiper__img {
    width: 4.5rem;
    height: 4.5rem;
  }

  .about-us-swiper__block h4 {
    max-width: 18rem;
  }

  .about-us-swiper__block--big h4 {
    max-width: 20.1rem;
  }
}

/* .swiper-pagination {}

.about-us-pagination {} */

/* service style */

.service {
  margin-top: 10rem;
  background: var(--black);
  padding-top: 10rem;
  padding-bottom: 15rem;
  position: relative;
  color: var(--white);
}

.service__title {
  max-width: 65rem;
}

.service__title br {
  display: none;
}

.letter-title {
  position: absolute;
  width: max-content;
  top: 20.4rem;
  right: 6rem;
}

.letter-service {
  margin-top: 4rem;
}

.letter-service-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 6rem 2rem;
}

.letter-service-item,
.type-viviski-item {
  height: 45.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.letter-service-item__top,
.type-viviski-item__top {
  position: relative;
  padding: 2rem 2.5rem;
  background: var(--gray-bg-2);
  height: 37.6rem;
}

.letter-service-item__title,
.type-viviski-item__title {
  color: var(--white);
}

.letter-service-item__text,
.type-viviski-item__text {
  position: absolute;
  top: 4.7rem;
  left: 0;
  padding: 0 2.5rem;
  color: var(--gray-1);
}

.letter-service-item__img,
.type-viviski-item__img {
  position: absolute;
  width: 100%;
  height: 26rem;
  bottom: 2rem;
  left: 0;
  object-fit: contain;
  object-position: center;
}

.letter-service__btn,
.type-viviski__btn {
  border-radius: 2rem;
  transform: translateY(-20rem);
  z-index: -1;
  opacity: 0;
}

.letter-service-item:hover .letter-service__btn,
.type-viviski-item:hover .type-viviski__btn {
  transform: translateY(0);
  opacity: 1;
}

.type-viviski-title {
  margin-top: 8rem;
  text-align: right;
}

.type-viviski-service {
  margin-top: 4rem;
}

.service-form {
  margin-top: 15rem;
}

.service-form form {
  margin-top: 2.5rem;
  position: relative;
}

.service-form .social {
  margin-top: 10.8rem;
  justify-content: flex-end;
}

.service-form .social svg {
  width: 3.5rem;
  height: 3.5rem;
}

.service-form .social a:hover svg path {
  fill: var(--white);
}

.service-form__inner {
  background: var(--green);
  padding: 5rem;
  padding-bottom: 7rem;
}

.service-form__top {
  display: grid;
  grid-template-columns: 76.9rem 1fr;
  grid-gap: 2rem;
}

.service-form__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.service-form__inputs {
  display: flex;
  align-items: center;
}

.service-form__inputs {
  display: grid;
  grid-template-columns: 36rem 36rem;
  grid-gap: 2rem;
}

.service-form form .service-form__btn {
  width: 43rem;
}

.service-form .wpcf7-spinner {
  position: absolute;
  right: 0;
  bottom: 2rem;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
}

.service .wpcf7+.social {
  display: none;
}

@media (max-width: 1023px) {
  .service {
    padding-top: 8rem;
    padding-bottom: 10rem;
  }

  .service__title {
    max-width: 45.2rem;
  }

  .letter-title {
    width: 100%;
    text-align: right;
    margin-top: 2.5rem;
    position: static;
  }

  .letter-service-wrapper {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 3rem 2rem;
  }

  .letter-service-item,
  .type-viviski-item {
    height: 43.4rem;
  }

  .letter-service__btn,
  .type-viviski__btn {
    transform: translateY(0);
    padding-top: 1rem;
    padding-bottom: 1rem;
    opacity: 1;
  }

  .letter-service-item__img,
  .type-viviski-item__img {
    width: 28.5rem;
    left: 50%;
    height: 28rem;
    transform: translateX(-50%);
  }

  .letter-service,
  .type-viviski-service {
    margin-top: 2.5rem;
  }

  .type-viviski-title {
    margin-top: 10rem;
  }

  .service-form {
    margin-top: 14rem;
  }

  .service-form__inner {
    padding: 5rem 4rem;
  }

  .service-form__top {
    grid-template-columns: 1fr;
    grid-gap: 3rem;
  }

  .service-form__top .social {
    display: none;
  }

  .service .wpcf7+.social {
    display: flex;
  }

  .service-form__wrapper {
    flex-direction: column;
  }

  .service-form__inputs {
    width: 100%;
    grid-template-columns: 1fr;
    grid-gap: 1.5rem;
  }

  .service-form form {
    margin-top: 3rem;
  }

  .service-form form .service-form__btn {
    width: 100%;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .service-form .social {
    margin-top: 3rem;
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .service {
    margin-top: 7rem;
    padding-top: 7rem;
    padding-bottom: 0;
  }

  .service .container {
    padding: 0;
  }

  .service {
    padding-left: 2rem;
  }

  .service__title br {
    display: block;
  }

  .service__title {
    max-width: 31rem;
  }

  .letter-title {
    margin-top: 3rem;
    text-align: left;
  }

  .letter-service,
  .type-viviski-service {
    margin-top: 2rem;
    position: relative;
  }

  .letter-service__btn,
  .type-viviski__btn {
    margin-top: 1.5rem;
  }

  .letter-service-wrapper {
    display: flex;
    grid-gap: inherit;
  }

  .type-viviski-title {
    margin-top: 7rem;
    text-align: left;
  }

  .letter-service-item__top,
  .type-viviski-item__top {
    padding: 2rem;
  }

  .letter-service-item__text,
  .type-viviski-item__text {
    position: static;
    padding: 0;
    margin-top: 0.5rem;
  }

  .letter-service-item,
  .type-viviski-item {
    width: 27rem;
    height: 40rem;
  }

  .letter-service-item__img,
  .type-viviski-item__img {
    width: 22.2rem;
    height: 20rem;
  }

  .letter-service-item:last-child,
  .type-viviski-item:last-child {
    margin-right: 2rem;
  }

  .service-form {
    margin-top: 8rem;
    margin-left: -2rem;
  }

  .service-form__inner {
    padding: 4rem 2rem;
  }

  .service-form__top {
    grid-gap: 2rem;
  }

  .service-form form {
    margin-top: 2rem;
  }

  .service-form__inputs {
    grid-gap: 1rem;
  }

  .service-form form .service-form__btn {
    margin-top: 2rem;
  }

  .service .wpcf7+.social {
    margin-top: 2rem;
  }

  .service-form .social svg {
    width: 3rem;
    height: 3rem;
  }
}

.wpcf7 form .wpcf7-response-output {
  display: none;
}

/* swiper css */

.swiper-pagination {
  display: none !important;
}

@media (max-width: 767px) {
  .swiper-pagination {
    height: 1.4rem;
    margin-top: 2rem;
    position: static;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  .swiper-pagination-bullet {
    width: 0.7rem;
    height: 0.7rem;
    margin: 0 !important;
    background: var(--gray-bg-3);
    transition: all .3s ease;
  }

  .swiper-pagination-bullet-active {
    transform: scale(1.4);
    background: var(--green);
  }

  .swiper-pagination-bullet+.swiper-pagination-bullet {
    margin-left: 0.7rem !important;
  }
}

/* step css */

.step {
  margin-top: 12rem;
}

.step-grid {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2rem;
}

.step-item__content {
  height: 35.6rem;
  padding: 3rem 2.5rem;
  padding-bottom: 4.4rem;
  background: var(--gray-bg);
  border-radius: 1rem;
  transition: all .3s ease;
  cursor: pointer;
}

.step-item__content:hover {
  background: var(--gray-bg-3);
  border-radius: 1rem;
}

.step-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step-item__number {
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6.6rem;
  height: 6.2rem;
  border-radius: 2rem;
  background: var(--green);
}

.step-item__text {
  margin-top: 3rem;
  color: var(--gray-1);
}

.step-item__btn {
  margin-top: 1.5rem;
}

@media (max-width: 1023px) {
  .step {
    margin-top: 13rem;
  }

  .step h2 {
    max-width: 66.7rem;
  }

  .step-grid-wrapper {
    overflow: auto;
    margin-left: -4rem;
    padding-left: 4rem;
    margin-right: -4rem;
  }

  .step-grid-wrapper::-webkit-scrollbar {
    width: 0;
  }

  .step-grid-wrapper {
    -ms-overflow-style: none;
  }

  .step-grid-wrapper {
    overflow: -moz-scrollbars-none;
  }

  .step-grid {
    margin-top: 3rem;
    grid-gap: inherit;
    width: max-content;
    display: flex;
  }

  .step-item__content {
    width: 31.5rem;
    height: 32.6rem;
    padding: 2.5rem;
  }

  .step-item+.step-item {
    margin-left: 2rem;
  }

  .step-item__number {
    width: 5.2rem;
    height: 5.2rem;
    border-radius: 1rem;
  }

  .step-item__btn {
    margin-top: 2rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (max-width: 767px) {
  .step {
    margin-top: 8rem;
  }

  .step h2 {
    max-width: 31rem;
  }

  .step-grid-wrapper {
    margin: 0;
    padding: 0;
  }

  .step-grid {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 2.5rem;
    width: 100%;
  }

  .step-item__content {
    width: 100%;
    padding: 3rem 2.5rem;
    padding-top: 1.5rem;
    height: auto;
  }

  .step-item+.step-item {
    margin-left: 0;
  }

  .step-item__number {
    width: 5rem;
    height: 5rem;
  }

  .step-item__btn {
    margin-top: 1rem;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }
}

/* gallery style */

.gallery {
  margin-top: 18rem;
}

.gallery-grid-wrapper {
  margin-top: 5rem;
  position: relative;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2rem;
  max-height: 122rem;
  overflow: hidden;
  transition: all .5s ease;
}

.gallery-grid__item,
.gallery-grid__img {
  width: 100%;
  height: 26rem;
}

.gallery-grid__img {
  object-fit: cover;
  object-position: center;
}

.gallery-effect {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 16.7rem;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0) 49.1%, #FAFAFA 100%);
  transition: all .3s ease;
}

.gallery__btn {
  width: 31.5rem;
  margin-top: 5rem;
  margin-left: auto;
  margin-right: auto;
}

.gallery-grid--disable .gallery-effect {
  opacity: 0;
  visibility: hidden;
}

.gallery-grid--disable .gallery__btn {
  display: none;
}

@media (max-width: 1023px) {
  .gallery {
    margin-top: 13rem;
  }

  .gallery-grid-wrapper {
    margin-top: 3rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    max-height: 118rem;
  }

  .gallery-grid__item,
  .gallery-grid__img {
    height: 18rem;
  }

  .gallery-effect {
    height: 23.5rem;
  }

  .gallery__btn {
    margin-top: 4.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (max-width: 767px) {
  .gallery {
    margin-top: 10rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1.5rem;
    max-height: 122.5rem;
  }

  .gallery-effect {
    height: 16.7rem;
    background: linear-gradient(180deg, rgba(250, 250, 250, 0) 49.1%, #FAFAFA 100%);
  }

  .gallery-grid__item,
  .gallery-grid__img {
    height: 14rem;
  }

  .gallery__btn {
    margin-top: 2rem;
    width: 31rem;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }
}

/* brand style */

.brands {
  margin-top: 18rem;
}

.brands__title {
  margin-bottom: 8rem;
}

.marquee {
  width: 100%;
  overflow: hidden;
}

.marquee-2 {
  margin-top: 5rem;
}

.brands__img {
  display: inline-block;
  height: 6.8rem;
  object-fit: contain;
  object-position: center;
}

.js-marquee .brands__img+.brands__img {
  margin-left: 65px;
}

@media (max-width: 1023px) {
  .brands {
    margin-top: 13rem;
  }

  .brands__title {
    margin-bottom: 5rem;
  }

  .marquee-2 {
    margin-top: 3rem;
  }

  .brands__img {
    height: 5.5rem;
  }

  .js-marquee .brands__img+.brands__img {
    margin-left: 50px;
  }
}

@media (max-width: 767px) {
  .brands {
    margin-top: 10rem;
  }

  .brands__title {
    max-width: 30.6rem;
    margin-bottom: 3rem;
  }

  .brands__img {
    height: 4rem;
  }

  .js-marquee .brands__img+.brands__img {
    margin-left: 35px;
  }
}

/* faq style */

.faq {
  margin-top: 18rem;
  overflow-x: hidden;
}

.faq__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
}

.accordion-item {
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
  border-bottom: 0.1rem solid var(--gray-1);
}

.accordion-item:first-child {
  padding-top: 0;
}

.accordion-item__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.accordion-item__title {
  max-width: 51rem;
}

.accordion-item__plus {
  width: 3.5rem;
  height: 3.5rem;
  transition: all .3s ease;
}

.accordion-item--active .accordion-item__plus {
  transform: rotate(45deg);
}

.accordion-item__content {
  height: 0;
  overflow: hidden;
  transition: all .5s ease;
}

.accordion-item__content * {
  color: var(--gray-1);
}

.accordion-padding {
  height: 1.5rem;
}

.accordion-item__content p+p {
  margin-top: 0.5rem;
}

@media (max-width: 1023px) {
  .faq {
    margin-top: 13rem;
  }

  .faq__inner {
    grid-template-columns: 1fr;
    grid-gap: 4rem;
  }

  .faq__inner h2 br {
    display: none;
  }

  .faq__inner h2 {
    max-width: 55rem;
  }

  .accordion-item__plus {
    width: 2.6rem;
    height: 2.6rem;
  }

  .accordion-item__title {
    max-width: 57rem;
  }
}

@media (max-width: 767px) {
  .faq {
    margin-top: 8rem;
  }

  .accordion-item {
    padding-top: 1.9rem;
    padding-bottom: 1.9rem;
  }

  .accordion-item__plus {
    width: 2.5rem;
    height: 2.5rem;
  }

  .accordion-item__title {
    max-width: 24rem;
  }
}

/* consult-form style */

.consult-form {
  margin-top: 12rem;
}

.consult-form__inner {
  padding: 5rem;
  padding-bottom: 6rem;
  background: var(--green);
  display: grid;
  grid-template-columns: 56rem 1fr;
  grid-gap: 6rem;
}

.consult-form__content {
  color: var(--white);
}

.consult-form__bottom {
  margin-top: 5.6rem;
}

.consult-form__text {
  max-width: 46rem;
}

.consult-form__bottom .social {
  margin-top: 2rem;
}

.consult-form__bottom .social svg {
  width: 3.5rem;
  height: 3.5rem;
}

.consult-form__bottom .social a:hover svg path {
  fill: var(--white);
}

.consult-form__wrapper {
  position: relative;
}

.consult-form__wrapper .wpcf7-form-control-wrap {
  display: block;
}

.consult-form__wrapper .wpcf7-form-control-wrap+.wpcf7-form-control-wrap {
  margin-top: 1.5rem;
}

.consult-form__btn {
  margin-top: 3rem;
}

.consult-form__wrapper .wpcf7-spinner {
  position: absolute;
  right: 0;
  bottom: 2rem;
  margin: 0;
  width: 2.4rem;
  height: 2.4rem;
}

.consult-form__right .social {
  display: none;
}

@media (max-width: 1023px) {
  .consult-form {
    margin-top: 8rem;
  }

  .consult-form__inner {
    grid-template-columns: 1fr;
    grid-gap: 3rem;
    padding: 5rem 4rem;
  }

  .consult-form__bottom {
    margin-top: 3rem;
  }

  .consult-form__btn {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .consult-form__inner .social {
    display: none;
  }

  .consult-form__right .social {
    margin-top: 3rem;
    display: flex;
  }

  .consult-form__right .social svg {
    width: 3.5rem;
    height: 3.5rem;
  }

  .consult-form__right .social a:hover svg path {
    fill: var(--white);
  }
}

@media (max-width: 767px) {
  .consult-form .container {
    padding: 0;
  }

  .consult-form__inner {
    padding: 4rem 2rem;
    grid-gap: 2rem;
  }

  .consult-form__bottom {
    margin-top: 2rem;
  }

  .consult-form__wrapper .wpcf7-form-control-wrap+.wpcf7-form-control-wrap {
    margin-top: 1rem;
  }

  .consult-form__btn {
    margin-top: 2rem;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }

  .consult-form__right .social {
    margin-top: 2rem;
  }

  .consult-form__right .social svg {
    width: 3rem;
    height: 3rem;
  }
}

/* footer style */

.footer {
  margin-top: 12rem;
  color: var(--white);
  padding-top: 6rem;
  padding-bottom: 5rem;
  background: var(--black);
}

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

.footer a:hover {
  color: var(--botton);
}

.footer .social {
  margin-top: 2.5rem;
}

.footer .social svg path {
  fill: var(--white);
}

.footer .social a:hover svg path {
  fill: var(--botton);
}

.footer__left {
  max-width: 48.3rem;
  color: var(--gray-1);
}

.footer-logo {
  display: flex;
}

.footer-logo,
.footer-logo__img {
  width: 15.8rem;
  height: 8rem;
}

.footer__ur {
  margin-top: 4.6rem;
}

.footer__work-time {
  margin-top: 2rem;
}

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

.footer-column {
  width: max-content;
  display: flex;
  flex-direction: column;
}

.footer-column+.footer-column {
  margin-left: 24.6rem;
}

.footer-column__title {
  color: var(--gray-1);
  margin-bottom: 2.5rem;
}

.footer-menu a {
  color: var(--white);
}

.menu-footer-list li+li {
  margin-top: 1.5rem;
}

.footer-column__item {
  color: var(--white);
}

.footer-column__item+.footer-column__item {
  margin-top: 1.5rem;
}

.footer__bottom {
  margin-top: 4.5rem;
  color: var(--gray-1);
}

.footer__ur--tab,
.footer__work-time--tab {
  display: none;
}

@media (max-width: 1023px) {
  .footer {
    margin-top: 8rem;
    padding: 5rem 0;
  }

  .footer__ur,
  .footer__work-time {
    display: none;
  }

  .footer__ur--tab,
  .footer__work-time--tab {
    display: block;
  }

  .footer-logo,
  .footer-logo__img {
    width: 12.6rem;
    height: 6.4rem;
  }

  .footer-column+.footer-column {
    margin-left: 14.7rem;
  }

  .footer-column__item {
    max-width: 21.6rem;
  }

  .footer__ur {
    margin-top: 2rem;
    color: var(--gray-1);
  }

  .footer__work-time {
    margin-top: 1rem;
    color: var(--gray-1);
  }

  .footer__bottom {
    margin-top: 3rem;
  }

  .footer .social {
    margin-top: 2rem;
  }
}

@media (max-width: 767px) {
  .footer {
    padding: 4rem 0;
  }

  .footer__right {
    flex-direction: column;
  }

  .footer-column {
    width: auto;
    max-width: 15.2rem;
  }

  .footer__work-time {
    margin-top: 2rem;
  }

  .footer-column+.footer-column {
    margin-left: 0;
    margin-top: 4rem;
  }
}