/* Button */
.button__form {
      font-family: "Poppins", sans-serif;
      color: #fff;
      background: var(--gradient);
      border-radius: 20px;
      padding: 31px 29px;
      transition: all 0.2s ease;
      font-size: 20px;
      font-weight: 900;
}

.button__form:hover {
      transform: translateY(5px);
      -webkit-box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1);
      -moz-box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1);
      box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1);
}

/* End */



/* Header */
.header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;

      background: #ffffff;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Header Hidding */
.header.header__hidden {
      transform: translateY(-100%);
}

.header.header__scrolled {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}


.wrapper__header {
      display: flex;
      padding: 10px 0 10px 0;
      align-items: center;
      justify-content: space-between;
}

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

.logo__header img {
      width: 100%;
      max-width: 170px;
}

/* Navigation */
.navigation ul {
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
      color: var(--text-color-black);

}

.navigation ul li a {
      padding: 8px 10px;
      transition: all 0.3s ease;
}

.navigation ul li a:hover {
      color: #fff;
      background: var(--secondary-color);
      border-radius: 10px;
}



/* Phone */
.wrapper__call {
      position: relative;
      width: 216px;
      height: 55px;
      flex-shrink: 0;
      cursor: pointer;
}

.phone__number {
      position: absolute;
      top: 0;
      right: 0;
      width: 55px;
      height: 55px;
      overflow: hidden;

      display: flex;
      align-items: center;
      justify-content: flex-start;

      background-color: var(--secondary-color);
      border-radius: 999px;
      transition: width 0.45s ease;
}

.phone__number h2 {
      margin: 0 0 0 56px;
      color: var(--text-color-white);
      font-size: 16px;
      font-weight: 600;
      line-height: 1;

      background-color: #b3da58;
      padding: 8px 12px;
      border-radius: 10px;
      white-space: nowrap;

      opacity: 0;
      transition: opacity 0.2s ease 0.2s;
}

.phone__ring {
      position: absolute;
      top: 0;
      right: 0;
      width: 55px;
      height: 55px;
      background-color: var(--secondary-color);
      border-radius: 50%;

      display: flex;
      align-items: center;
      justify-content: center;

      z-index: 2;
      transition: right 0.45s ease;
}

.phone__icon {
      width: 30px;
      height: 30px;
      color: #fff;
      animation: phone__icon 1.3s infinite;
      transform-origin: center;
}

.wrapper__call:hover .phone__ring {
      right: 161px;
}

.wrapper__call:hover .phone__number {
      width: 216px;
}

.wrapper__call:hover .phone__number h2 {
      opacity: 1;
}


@keyframes phone__icon {

      0%,
      100% {
            transform: rotate(0deg);
      }

      25% {
            transform: rotate(-10deg);
      }

      50% {
            transform: rotate(10deg);
      }

      75% {
            transform: rotate(-5deg);
      }
}


/* Contact */
.wrapper__contakt {
      display: flex;
      align-items: center;
      gap: 2px;
}

/* Button to contakt */

.button__course {
      border-radius: 35px;
      background: var(--gradient);
      padding: 18px 13px;
      transition: all 0.3s ease;
      cursor: pointer;
}

.button__course:hover {
      opacity: 0.8;
}

.button__course button {
      color: #fff;
      cursor: pointer;
}


/* Social */
.wrapper__social {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
}

.icons {
      color: #fff;
      background: var(--primary-color);
      border-radius: 50%;
      padding: 4px;
      transition: all 0.3s ease;
      cursor: pointer;
}

.icons:hover {
      opacity: 0.8;
}

/* Burger Menu */
.burger__button {
      display: flex;
}

.wrapper__call,
.burger__button {
      flex-shrink: 0;
}


.burger__button {
      display: none;
      width: 48px;
      height: 48px;
      border: none;
      background: transparent;
      padding: 0;
      cursor: pointer;

      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
}

.burger__button span {
      display: block;
      width: 28px;
      height: 3px;
      background: #444444;
      border-radius: 999px;
}


/* Mobile menu */

.mobile__menu {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: #ffffff;

      opacity: 0;
      visibility: hidden;
      pointer-events: none;

      transition: opacity 0.25s ease, visibility 0.25s ease;
}

.mobile__menu.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
}

.mobile__menu__content {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      padding: 24px 24px 36px;
}

.mobile__menu__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 48px;
}

.mobile__menu__logo img {
      max-width: 150px;
      height: auto;
}

.mobile__menu__close {
      width: 44px;
      height: 44px;
      border: none;
      background: transparent;
      font-size: 42px;
      line-height: 1;
      color: #777777;
      cursor: pointer;
}

.mobile__menu__nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 34px;
      margin-bottom: 50px;
}

.mobile__menu__link {
      text-decoration: none;
      color: #111111;
      font-size: 28px;
      font-weight: 400;
}

.mobile__menu__bottom {
      margin-top: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
}

.mobile__menu__phone {
      display: flex;
      align-items: center;
      gap: 14px;
      text-decoration: none;
      color: #111111;
      font-size: 18px;
      font-weight: 500;
}

.mobile__menu__phone__icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #9dc63b;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
}

.mobile__menu__phone__icon svg {
      width: 36px;
      height: 36px;
}

.mobile__menu__socials {
      display: flex;
      align-items: center;
      gap: 16px;
}

.mobile__menu__icon {
      width: 62px;
      height: 62px;
      border-radius: 50%;
      background: #9dc63b;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      text-decoration: none;
}

.mobile__menu__icon svg {
      width: 40px;
      height: 40px;
}

.mobile__menu__button {
      border: none;
      border-radius: 999px;
      color: #ffffff;
      font-size: 18px;
      font-weight: 500;
      cursor: pointer;
}

body.mobile-menu-open {
      overflow: hidden;
}

@media (max-width: 1200px) {

      .wrapper__call {
            display: none;
      }

}

@media (max-width: 992px) {

      .navigation,
      .button__course,
      .wrapper__call,
      .wrapper__social,
      .phone__number {
            display: none;
      }

      .burger__button {
            display: flex;
      }

      .header__right {
            gap: 0;
      }

      .logo__header img {
            max-width: 170px;
      }
}

@media (max-width: 576px) {
      .wrapper__header {
            padding: 12px 0;
      }

      .logo__header img {
            max-width: 150px;
      }

      .wrapper__call {
            display: none;
      }

      .mobile__menu__link {
            font-size: 24px;
      }

      .mobile__menu__button {
            width: 100%;
            max-width: 300px;
      }
}

@media (max-width: 420px) {
      .logo__header img {
            max-width: 120px;
      }

      .wrapper__call {
            display: none;
      }

      .phone__ring {
            width: 48px;
            height: 48px;
      }

      .phone__icon {
            width: 24px;
            height: 24px;
      }

      .burger__button {
            width: 44px;
            height: 44px;
      }

      .burger__button span {
            width: 24px;
      }

      .wrapper__contakt {
            gap: 8px;
      }
}

/* End */

/* Hero left section */

.content__left__hero img {
      margin-top: 25px;
}

.content__left__hero h1 {
      margin-top: 20px;
}

.text__hero {
      border-left: 4px solid #9BC43D;
      padding-left: 5px;
      font-size: 30px;
      margin: 5px 0 70px 0;
}

.button__hero {
      font-weight: 600;
      font-size: 22px;
      padding: 28px 50px;
}

/* End */

/* Section Team */

.text__section__team {
      font-family: "Poppins", sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
}

.text__section__team h2 {
      font-size: 40px;
      font-weight: 900;
}

.text__section__team p {
      font-size: 20px;
      font-weight: 200;
      max-width: 750px;
      width: 100%;
}


.team__cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;

      gap: 10px;
      margin-top: 20px;
}

/* card */
.team__slider,
.team__slider .splide__track {
      overflow: visible;
}

.team__card {
      border: 1px solid var(--lines-color);
      border-radius: 20px;

      display: flex;
      align-items: center;

      gap: 20px;
      padding: 17px 12px;

      transition: all 0.3s ease;
}

.team__card:hover {
      transform: translateY(-10px);
      -webkit-box-shadow: 0px 16px 28px -12px rgba(0, 0, 0, 1);
      -moz-box-shadow: 0px 16px 28px -12px rgba(0, 0, 0, 1);
      box-shadow: 0px 16px 28px -12px rgba(0, 0, 0, 1);
}


.team__card img {
      border-radius: 11px;
}


.skills__list {
      list-style: none;
      padding: 0;
      margin: 10px 0;

      display: flex;
      flex-direction: column;
      gap: 15px;
}


.skills__list li {
      position: relative;
      display: flex;
      align-items: center;
      gap: 25px;
      padding-left: 36px;
      font-family: "Poppins", sans-serif;
      font-weight: 700;
}

.skills__list li:before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);

      width: 32px;
      height: 32px;

      background-image: url("../img/landing/hero/card-hero/tick.svg");
      background-size: contain;
      background-repeat: no-repeat;
}

.team__slider {
      padding: 20px;
}

.team__slider .splide__list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
}

.team__slider .splide__slide {
      width: 100% !important;
      min-width: 0;
}

.team__slider .splide__slide>.team__card {
      width: 100%;
}

.team__slider .splide__arrows {
      display: none;
}

@media (max-width: 992px) {
      .team__slider .splide__list {
            display: flex;
            gap: 0;
      }

      .team__slider .splide__slide {
            width: 100%;
      }

      .team__slider .splide__arrows {
            display: block;
      }

      .team__card img {
            max-width: 300px;
            width: 100%;
      }

      .team__text h3 {
            font-weight: 800;
            font-size: 27px;
      }

      .team__text p {
            font-weight: 300;
            font-size: 18px;
      }

      .skills__list li {
            font-size: 20px;
      }


}

@media (max-width: 768px) {
      .team__slider .splide__list {
            display: flex;
            gap: 0;
      }

      .team__slider .splide__slide {
            width: auto;
      }

      .team__slider .splide__arrows {
            display: block;
      }



}

@media (max-width: 576px) {
      .team__text h3 {
            font-weight: 800;
            font-size: 20px;
      }

      .team__text p {
            font-weight: 300;
            font-size: 16px;
      }

      .skills__list li {
            font-size: 16px;
      }


      .skills__list li::before {
            padding-left: 16px;
      }

      .skills__list li:before {
            width: 30px;
            height: 30px;
      }
}

@media (max-width: 460px) {

      .team__text h3 {
            font-weight: 800;
            font-size: 18px;
      }

      .team__text p {
            display: none;
      }

      .skills__list li {
            font-size: 14px;
      }

      .skills__list .chage__skill {
            display: none;
      }

      .team__card img {
            max-width: 140px;
            width: 100%;
      }

      .skills__list {
            margin: 0;
            gap: 5px;
      }

      .skills__list li::before {
            padding-left: 16px;
      }


      .skills__list li:before {
            width: 26px;
            height: 26px;
      }
}

@media (max-width: 390px) {
      .team__card {
            gap: 5px;
      }

      .team__text h3 {
            font-weight: 800;
            font-size: 16px;
      }

      .skills__list {
            margin: 5px;
            gap: 10px;
      }

      .skills__list li {
            font-size: 14px;

      }

      .skills__list .chage__skill {
            display: none;
      }

      .team__text p {
            display: none;
      }
}

@media (max-width: 360px) {
      .team {
            display: none;
      }
}


/* End */

/* Target Courses */

.text__section__target {
      font-family: "Poppins", sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
}

.text__section__target h2 {
      font-size: 40px;
      font-weight: 900;
}

.text__section__target p {
      font-size: 20px;
      font-weight: 200;
}

.target__cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 65px;
}

.target__card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      border: 2px solid var(--lines-color);
      border-radius: 20px;
      padding: 45px 15px 25px 15px;
      font-family: "Poppins", sans-serif;
      transition: all 0.3s ease;
}

.target__card::before {
      content: "";

      position: absolute;

      width: 70px;
      height: 70px;

      border-radius: 50%;

      background-color: #8BC53F;

      top: -35px;
      left: 50%;

      transform: translateX(-50%);

      background-position: center;
      background-repeat: no-repeat;
      background-size: 35px;
}

.target__icon {
      position: absolute;

      width: 70px;
      height: 70px;

      color: #fff;
      background: #8BC53F;
      border-radius: 50%;

      top: -35px;
      left: 50%;
      transform: translateX(-50%);

      display: flex;
      align-items: center;
      justify-content: center;
}


.icon__kid {
      width: 45px;
      height: 45px;
}

.target__card:hover {
      transform: translateY(-10px);
      -webkit-box-shadow: 0px 16px 28px -12px rgba(0, 0, 0, 1);
      -moz-box-shadow: 0px 16px 28px -12px rgba(0, 0, 0, 1);
      box-shadow: 0px 16px 28px -12px rgba(0, 0, 0, 1);
}

.target__card img {
      border-radius: 11px;
}

.target__card p {
      text-align: center;
      color: #717171;
}

/* Responsive Target Courses */


@media (max-width: 768px) {

      .target__cards {
            grid-template-columns: 1fr;
            justify-items: center;
            gap: 54px;
      }

      .target__card {
            width: 100%;
            max-width: 440px;
      }

      .target__card img {
            width: 100%;
            max-width: 380px;
            height: auto;
            object-fit: cover;
      }


      .text__section__target {
            text-align: center;
      }

}

/* End */

/* Reviews Slider */

.text__section__reviews {
      margin-bottom: 20px;
}

.text__section__reviews h2 {
      font-family: "Poppins", sans-serif;
      font-size: 30px;

}

.review-card {
      height: 100%;

      border: 1px solid var(--lines-color);
      border-radius: 18px;

      padding: 20px;

      background: #fff;

      display: flex;
      flex-direction: column;
      justify-content: space-between;

      transition: all 0.3s ease;
}

.content__review {
      width: 100%;
      aspect-ratio: 9 / 16;
      overflow: hidden;
      border-radius: 16px;
}

.content__review img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
}

.review-video {
      position: relative;
      width: 100%;
      aspect-ratio: 9 / 16;
      overflow: hidden;
      border-radius: 14px;
}

.review-video__media {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 14px;
      display: block;
}

.review-video__sound {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 42px;
      height: 42px;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      background: rgba(255, 255, 255, 0.9);
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
}

.review-video__sound.is-muted {
      background: rgba(255, 255, 255, 0.9);
}

.review-video__sound.is-active {
      background: #111;
      color: #fff;
}

.review-card video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 14px;
      margin-bottom: 18px;
}

.review-author {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-top: 15px;
}

.review-author img {
      border-radius: 50%;
      max-width: 60px;
}

.user__nikname {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
}

.reviews__slider {
      position: relative;
}

.splide__arrow--prev {
      position: absolute !important;
      left: 0 !important;
      top: auto !important;
      bottom: -40px !important;
      transform: none !important;
      color: #1364CF !important;
}

.splide__arrow--next {
      position: absolute !important;
      left: 60px !important;
      right: auto !important;
      top: auto !important;
      bottom: -40px !important;
      transform: none !important;
}

.splide__arrow svg {
      fill: var(--primary-color);
}

/* End */


/* FAQ */

.text__section__faq {
      font-family: "Poppins", sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin-bottom: 40px;
}

.text__section__faq h2 {
      font-size: 40px;
      font-weight: 900;
}

/* Main row */
.question__content {
      display: flex;
      align-items: flex-start;

      gap: 32px;
      min-height: 760px;
}

/* Left column */
.question__list {
      flex: 1 1 68%;
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-width: 0;
}

.question__item {
      background: #ffffff;
      border-radius: 20px;
      overflow: hidden;
}

.faq__question {
      width: 100%;
      border: none;
      background: #f3f3f3;
      padding: 24px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      text-align: left;
      cursor: pointer;
      font-size: 20px;
      font-weight: 600;
      color: #111111;
      border-radius: 20px;

}

.faq__icon {
      flex-shrink: 0;
      font-size: 34px;
      line-height: 1;
      transition: transform 0.25s ease;
}

.question__item.active .faq__icon {
      transform: rotate(45deg);
}

.faq__answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
      background: #f3f3f3;
      padding: 0 28px;
      border-radius: 0 0 20px 20px;
      margin: 0 15px;
}

.question__item.active .faq__answer {
      max-height: 220px;
      margin: 0 15px;
      padding: 0 28px 24px;
}

.faq__answer p {
      margin: 0;
      font-size: 17px;
      line-height: 1.6;
      color: #444444;
}

/* Right column */
.faq__form__wrapper {
      flex: 0 0 420px;
      width: 380px;
      background: #ffffff;
      border-radius: 24px;
      padding: 36px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.faq__form__title {
      font-size: 24px;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 24px;
      color: #111111;
}

.faq__form {
      display: flex;
      flex-direction: column;
      gap: 16px;
}

.faq__form__input,
.faq__form__textarea {
      width: 100%;
      border: none;
      border-radius: 16px;
      background: #f7f7f7;
      padding: 18px 20px;
      font-size: 18px;
      outline: none;
      transition: box-shadow 0.2s ease, background 0.2s ease;
      box-sizing: border-box;
}

.faq__form__input:focus,
.faq__form__textarea:focus {
      background: #ffffff;

      box-shadow: 0 0 0 2px rgba(0, 119, 255, 0.15);
}

.faq__form__textarea {
      min-height: 140px;
      resize: vertical;
}

.faq__form__button {
      margin-top: 8px;
      border: none;
      border-radius: 999px;
      padding: 18px 24px;
      background: var(--primary-color);
      color: #ffffff;
      font-size: 20px;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.2s ease, transform 0.2s ease;
}

.faq__form__button:hover {
      opacity: 0.92;
}

.faq__form__button:disabled {
      opacity: 0.7;
      cursor: not-allowed;
}

.faq__form__message {
      min-height: 24px;
      font-size: 15px;
      margin-top: 4px;
}

.faq__form__message.success {
      color: #1f8b3a;
}

.faq__form__message.error {
      color: #d13131;
}

@media (max-width: 992px) {

      .navigation,
      .button__course,
      .wrapper__social,
      .phone__number {
            display: none;
      }

      .burger__button {
            display: flex;
      }

      .header__right {
            gap: 0;
      }

      .logo__header img {
            max-width: 170px;
      }

      /* FAQ */
      .question__content {
            flex-direction: column;
            gap: 24px;
            min-height: auto;
      }

      .question__list {
            width: 100%;
      }

      .faq__form__wrapper {
            width: 100%;
            flex: none;
      }

}

@media (max-width: 576px) {
      .wrapper__header {
            padding: 12px 0;
      }

      .logo__header img {
            max-width: 150px;
      }

      .wrapper__call {
            transform: scale(0.9);
      }

      .mobile__menu__link {
            font-size: 24px;
      }

      .mobile__menu__button {
            width: 100%;
            max-width: 300px;
      }
}

@media (max-width: 576px) {
      .text__section__faq {
            margin-bottom: 28px;
      }

      .text__section__faq h2 {
            font-size: 32px;
            line-height: 1.1;
      }

      .question__content {
            flex-direction: column;
            gap: 20px;
            min-height: auto;
      }

      .question__list {
            width: 100%;
            gap: 14px;
      }

      .question__item {
            border-radius: 18px;
      }

      .faq__question {
            padding: 20px 20px;
            font-size: 18px;
            line-height: 1.35;
            gap: 14px;
            border-radius: 18px;
      }

      .faq__icon {
            font-size: 28px;
      }

      .faq__answer {
            padding: 0 20px;
            margin: 0 10px;
            border-radius: 0 0 18px 18px;
      }

      .question__item.active .faq__answer {
            max-height: 260px;
            padding: 0 20px 18px;
            margin: 0 10px;
      }

      .faq__answer p {
            font-size: 15px;
            line-height: 1.55;
      }

      .faq__form__wrapper {
            flex: none;
            width: 100%;
            padding: 28px 20px;
            border-radius: 22px;
            box-sizing: border-box;
      }

      .faq__form__title {
            font-size: 22px;
            line-height: 1.2;
            margin-bottom: 20px;
      }

      .faq__form {
            gap: 14px;
      }

      .faq__form__input,
      .faq__form__textarea {
            padding: 16px 18px;
            font-size: 16px;
            border-radius: 18px;
      }

      .faq__form__textarea {
            min-height: 130px;
      }

      .faq__form__button {
            width: 100%;
            padding: 18px 20px;
            font-size: 18px;
            border-radius: 999px;
            margin-top: 10px;
      }
}

/* End */


/* Contact */

.contact__us {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      align-items: stretch;
}

.contact__card {
      background: #f7f7f7;
      border-radius: 24px;
      padding: 28px 24px;
      min-height: 170px;

      display: flex;
      flex-direction: column;
      justify-content: space-between;
}

.contact__card h3 {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: #111111;
}

.contact__card__info {
      display: flex;
      align-items: center;
      gap: 8px;
}

.contact__card__info img {
      width: 44px;
      height: 44px;
      object-fit: contain;
      flex-shrink: 0;
      color: #fff;
}

.contact__card__info span {
      font-size: 16px;
      line-height: 1.4;
      color: #333333;
      word-break: break-word;
}

.contact__card__socials {
      display: flex;
      align-items: center;
      gap: 14px;
}

.contact__card__socials a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
}

.contact__card__socials img {
      width: 44px;
      height: 44px;
      object-fit: contain;
      color: #fff;
}


.contact__icon {
      width: 35px;
      height: 35px;

      padding: 7px;

      background: var(--secondary-color);
      border-radius: 50%;

      display: flex;
      align-items: center;
      justify-content: center;

      flex-shrink: 0;
}

.contact__icon img {
      width: 30px;
      height: 30px;

      filter: brightness(0) invert(1);
}


@media (max-width: 1100px) {
      .contact__us {
            grid-template-columns: repeat(2, 1fr);
      }
}

@media (max-width: 640px) {
      .contact__us {
            grid-template-columns: 1fr;
      }
}

/* End */

/* Footer */

.footer {
      background: #1f6aa5;
      padding: 28px 0;
}

.footer__content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
}

.footer__logo img {
      height: 38px;
}

.footer__nav {
      display: flex;
      align-items: center;
      gap: 34px;
      flex-wrap: wrap;
      color: #ffffff;
}

.footer__nav a {
      text-decoration: none;
      font-size: 16px;
      font-weight: 500;
      transition: opacity 0.2s ease;
}

.footer__nav h3 {
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      transition: opacity 0.2s ease;
}

.footer__nav h3:hover {
      opacity: 0.7;
}

.footer__nav a:hover {
      opacity: 0.7;
}

.footer__copy {
      color: #ffffff;
      font-size: 16px;
      white-space: nowrap;
}


@media (max-width: 900px) {

      .footer__content {
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 20px;
      }

      .footer__nav {
            justify-content: center;
      }

}

/* End */


/* Modal Window */

.modal {
      position: fixed;
      inset: 0;
      z-index: 2000;

      opacity: 0;
      visibility: hidden;
      pointer-events: none;

      transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
}

.modal__overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
}

.modal__dialog {
      position: relative;
      z-index: 1;

      width: min(100% - 32px, 520px);
      margin: 40px auto;
      background: #ffffff;
      border-radius: 32px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);

      max-height: calc(100vh - 80px);
      overflow-y: auto;
}

.modal__content {
      padding: 44px 40px 36px;
}

.modal__title {
      margin: 0 0 28px;
      font-size: 48px;
      line-height: 1.1;
      font-weight: 700;
      color: #111111;
      max-width: 560px;
}

.modal__close {
      position: absolute;
      top: 18px;
      right: 18px;

      width: 48px;
      height: 48px;

      border: none;
      background: transparent;
      cursor: pointer;

      font-size: 34px;
      line-height: 1;
      color: #111111;
}

body.modal-open {
      overflow: hidden;
}

@media (max-width: 768px) {
      .modal__dialog {
            width: min(100% - 24px, 100%);
            margin: 20px auto;
            border-radius: 24px;
            max-height: calc(100vh - 40px);
      }

      .modal__content {
            padding: 28px 20px 24px;
      }

      .modal__title {
            font-size: 28px;
            margin-bottom: 22px;
      }

      .modal__close {
            top: 12px;
            right: 12px;
            width: 40px;
            height: 40px;
            font-size: 28px;
      }
}