@charset "utf-8";

@import url(../css2.css);

:root { --orange: #d27d2c; --green: #2a665b; --blue: #2a665b; --yellow: #ffbb10; --black: #1c1c1c; --red: #8b2e26; }

*, ::before, ::after { box-sizing: border-box; }

body { font-family: Poppins, sans-serif; font-weight: 400; }

img { display: block; width: 100%; }

h1, h2, button { line-height: 1.2; }

p, ul li, ol li, a { line-height: 1.5; }

.title { font-size: 36px; line-height: 1.2; font-weight: 600; margin-bottom: 16px; }

.text { font-size: 18px; line-height: 1.5; }

.list li { position: relative; margin-bottom: 16px; font-size: 20px; padding-left: 16px; }

.list li b { font-weight: 600; }

.list li:last-child { margin: 0px; }

.list li::before { content: ""; position: absolute; top: 11px; left: 0px; width: 8px; height: 8px; border-radius: 50%; background: var(--black); }

.container { max-width: 1208px; padding: 0px 40px; margin: 0px auto; }

.btn { display: table; border: none; background: var(--blue); color: rgb(255, 255, 255); padding: 16px 32px; border-radius: 4px; text-align: center; font-size: 18px; line-height: 24px; font-weight: 500; cursor: pointer; transition: 0.3s; }

.btn:hover { background: var(--green); transition: 0.3s; }

form label { display: flex; flex-direction: column; align-items: flex-start; width: 100%; position: relative; padding-bottom: 16px; margin-bottom: 8px; }

form label .field-name { color: rgb(255, 255, 255); font-size: 16px; line-height: 18px; margin-bottom: 4px; }

form label .error { position: absolute; color: rgb(255, 68, 0); bottom: 0px; left: 0px; font-size: 14px; line-height: 15px; opacity: 0; pointer-events: none; transition: 0.3s; }

form label.invalid .error { opacity: 1; pointer-events: painted; transition: 0.3s; }

form label.invalid input, form label.invalid select, form label.invalid textarea { border-color: rgb(255, 68, 0); transition: 0.3s; }

form label input, form label select, form label textarea { width: 100%; padding: 16px; border-radius: 12px; border: 1px solid var(--black); color: var(--black); transition: 0.3s; }

form label textarea { height: 150px; resize: none; }

form label .iti { color: var(--black); }

form .btn { background: rgb(255, 255, 255); color: rgb(34, 34, 34); }

form .btn:hover { background: rgb(255, 255, 255); color: rgb(34, 34, 34); scale: 1.02; box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 10px 4px; }

form .consent { display: flex; align-items: center; flex-direction: row; gap: 8px; }

form .consent__input { width: 20px; height: 20px; border: 1px solid var(--black); margin: 0px; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; position: relative; cursor: pointer; }
form .consent__input:checked::after { content: ''; position: absolute; left: 50%; top: 42%; width: 11px; height: 6px; border: 2px solid var(--black); border-top: none; border-right: none; transform: translate(-50%, -50%) rotate(-45deg); }

form .consent__text { color: rgb(255, 255, 255); font-size: 18px; line-height: 24px; }

form button[type="submit"] { width: 100%; background: var(--yellow); }

form button[type="submit"]:disabled { background: gray; color: rgb(255, 255, 255); cursor: not-allowed; box-shadow: none; scale: 1; }

form button[type="submit"]:hover { background: var(--orange); color: rgb(255, 255, 255); box-shadow: none; }

.wrapper { position: relative; overflow: hidden; }

.header { position: absolute; z-index: 100; top: 0px; left: 0px; width: 100%; }

.header__inner { padding: 12px 0px; display: flex; align-items: center; gap: 12px; justify-content: space-between; }

.header__logo { max-width: 100px; width: 100%; }

.header__nav-list { display: flex; align-items: center; justify-content: center; gap: 34px; }

.header__nav-list li button, .header__nav-list li a { color: rgb(255, 255, 255); background: transparent; font-size: 18px; line-height: 24px; border: none; cursor: pointer; position: relative; padding: 0px; }

.header__nav-list li button::before, .header__nav-list li a::before { content: ""; position: absolute; bottom: -10px; left: 0px; width: 100%; height: 2px; background: rgb(255, 255, 255); border-radius: 2px; opacity: 0; transition: 0.3s; }

.header__nav-list li button:hover::before, .header__nav-list li a:hover::before { bottom: -4px; opacity: 1; transition: 0.3s; }

.header__btn { display: none; }

.hero { padding-top: 80px; position: relative; background: url("../img/hero-bg.jpg") center center / cover no-repeat; }

.hero::before { content: ""; position: absolute; inset: 0px; background: rgba(0, 0, 0, 0.8); }

.hero__inner { position: relative; z-index: 1; padding: 96px 0px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: rgb(255, 255, 255); }

.hero__info { width: 100%; max-width: 900px; text-align: center; margin: 0px auto; }

.hero__info-title { font-size: 54px; margin-bottom: 24px; }

.hero__info-title b { color: rgb(255, 187, 17); }

.hero__info-text { max-width: 700px; margin: 0px auto 40px; font-size: 20px; }

.hero__info-btn { margin: 0px auto; }

.info { background: rgb(42, 102, 91); color: rgb(255, 255, 255); }

.info__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 56px 0px; }

.info__info { max-width: 750px; width: 100%; margin: 0px auto; text-align: center; }

.info__text { font-size: 24px; }

.info__btn { background: var(--yellow); color: var(--black); margin: 24px auto 0px; }

.info__btn:hover { background: var(--orange); color: rgb(255, 255, 255); }

.why__inner { padding: 96px 0px; }

.why__title { text-align: center; margin-bottom: 64px; }

.why__box { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; }

.why__item { flex: 1 1 0%; }

.why__item-icon { width: 50px; margin: 0px auto 8px; }

.why__item-text { font-size: 24px; text-align: center; }

.about__inner { padding: 96px 0px; display: flex; align-items: center; justify-content: space-between; gap: 40px; max-width: 1000px; margin: 0px auto; }

.about__img { max-width: 450px; height: 400px; object-fit: cover; object-position: center center; border-radius: 8px; }

.about__info-text { font-size: 20px; }

.services__inner { padding-bottom: 56px; }

.services h2.title { text-align: center; margin-bottom: 16px; }

.services p.text { margin-bottom: 40px; text-align: center; }

.services__box { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 800px; margin: 0px auto; }

.services__item { padding: 24px; }

.services__item:nth-of-type(1) { border-right: 1px solid rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 0, 0); }

.services__item:nth-of-type(2) { border-bottom: 1px solid rgb(0, 0, 0); }

.services__item:nth-of-type(4) { border-left: 1px solid rgb(0, 0, 0); }

.services__item-icon { width: auto; max-height: 70px; height: 100%; margin: 0px auto 16px; }

.services__item-text { text-align: center; font-size: 18px; line-height: 1.5; max-width: 300px; margin: 0px auto; }

.cta { margin: 56px 0px; }

.cta__inner { background: rgb(42, 102, 91); color: rgb(255, 255, 255); border-radius: 12px; padding: 24px; }

.cta h2.title { text-align: center; }

.cta h2.title b { color: rgb(255, 187, 17); }

.cta ul.list { display: flex; flex-direction: column; justify-content: center; max-width: max-content; margin: 0px auto 24px; }

.cta ul.list li::before { background: rgb(255, 255, 255); }

.cta .btn { background: rgb(255, 255, 255); color: rgb(42, 102, 91); margin: 0px auto; }

.cta .btn:hover { scale: 1.05; box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 10px 4px; }

.faq__title { text-align: center; margin-bottom: 40px; }

.faq__box { display: flex; gap: 40px; }

.faq__item { background: var(--green); color: rgb(255, 255, 255); padding: 40px; border-radius: 8px; flex: 1 1 0%; }

.faq__item:nth-child(2) { background: var(--yellow); color: rgb(0, 0, 0); }

.faq__item-quest { font-size: 22px; margin-bottom: 8px; }

.faq__item-answer { font-size: 18px; }

.contact__inner { padding: 96px 0px; position: relative; z-index: 1; }

.contact .title { margin-bottom: 16px; text-align: center; }

.contact .text { text-align: center; }

.contact__data { margin-top: 64px; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 40px; text-align: center; font-size: 20px; line-height: 24px; }

.contact__board { padding: 24px; border-radius: 12px; background: rgb(42, 102, 91); max-width: 600px; width: 100%; margin: 40px auto 0px; position: relative; }

.contact__board::before { content: ""; position: absolute; top: -16px; right: -16px; background: rgb(255, 187, 17); z-index: -1; width: 100%; height: 100%; border-radius: inherit; }

.contact__box { display: flex; align-items: center; justify-content: space-between; flex-direction: column; gap: 24px; }

.footer { background: rgb(42, 102, 91); }

.footer__inner { padding: 34px 0px; display: flex; align-items: center; justify-content: space-between; color: rgb(255, 255, 255); font-size: 20px; line-height: 24px; }

.footer__links { display: flex; align-items: center; gap: 24px; }

.privacy, .cookies { padding: 174px 0px 100px; }

.privacy h1, .cookies h1 { font-size: 50px; line-height: 60px; margin-bottom: 40px; }

.privacy section, .cookies section { margin-bottom: 40px; }

.privacy section:last-child, .cookies section:last-child { margin: 0px; }

.privacy h2, .cookies h2 { font-size: 30px; line-height: 40px; font-weight: 600; margin: 0px 0px 16px; }

.privacy p, .privacy ul li, .cookies p, .cookies ul li { font-size: 20px; line-height: 26px; }

.thanks-page { min-height: 100vh; background: rgb(42, 102, 91); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; text-align: center; padding: 0px 16px; }

.thanks-page .title { margin-bottom: 16px; }

.thanks-page .text { margin-bottom: 40px; }

.thanks-page .btn { width: 100%; background: rgb(255, 255, 255); color: rgb(0, 0, 0); padding: 12px 18px; max-width: 200px; margin: 0px auto; }

.thanks-page .btn:hover { background: rgb(255, 255, 255); scale: 1.02; }

.cookie-banner { padding: 24px; background: var(--black); z-index: 100; position: fixed; bottom: -100%; left: 0px; width: 100%; color: rgb(255, 255, 255); font-size: 18px; line-height: 24px; border-top: 1px solid rgb(255, 255, 255); box-shadow: rgba(28, 28, 28, 0.25) 0px 0px 20px 2px; opacity: 0; pointer-events: none; transition: 1s; }

.cookie-banner.active { bottom: 0px; opacity: 1; pointer-events: painted; transition: 0.7s; }

.cookie-banner .container { display: flex; align-items: center; justify-content: space-between; gap: 56px; }

@media (max-width: 1023px) {
  .hero__inner { flex-direction: column; align-items: center; padding: 64px 0px; }
  .hero__img { display: none; }
  .about__inner { flex-direction: column; }
  .about__info { max-width: 600px; width: 100%; }
  .about__img { height: 300px; max-width: 600px; }
  .contact__box { flex-direction: column; align-items: center; }
  .contact__data { align-items: center; }
  .footer__inner { gap: 40px; flex-direction: column-reverse; }
}

@media (max-width: 767px) {
  .btn { font-size: 18px; line-height: 1.5; }
  .container { padding: 0px 16px; }
  .title { font-size: 36px; line-height: 44px; margin-bottom: 16px; }
  .tex, .list li { font-size: 20px; line-height: 30px; }
  .header.nav-active .header__nav { top: 0px; pointer-events: painted; transition: 0.5s; }
  .header.nav-active .header__btn span:nth-child(1) { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 30px; rotate: 45deg; transition: 0.3s; }
  .header.nav-active .header__btn span:nth-child(2) { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 30px; rotate: -45deg; transition: 0.3s; }
  .header.nav-active .header__btn span:nth-child(3) { opacity: 0; transition: 0.3s; }
  .header__link { display: none; }
  .header__nav { position: fixed; left: 0px; top: -100%; background: var(--blue); padding: 64px 24px; z-index: 1000; width: 100%; transition: 1s; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 4px; }
  .header__nav-list { flex-direction: column; }
  .header__nav-list li { color: rgb(0, 0, 0); }
  .header__btn { position: relative; width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: transparent; border: none; cursor: pointer; z-index: 1001; }
  .header__btn span { display: block; width: 100%; height: 2px; background: rgb(255, 255, 255); transition: 0.3s; }
  .hero__inner { padding: 96px 0px; }
  .hero__img { display: none; }
  .hero__info-title { font-size: 40px; text-align: left; text-wrap: balance; margin-bottom: 16px; }
  .hero__info-text { text-align: left; font-size: 20px; line-height: 30px; }
  .hero__info-btn { width: 100%; }
  .why__inner { padding: 64px 0px; }
  .why__title { margin-bottom: 64px; }
  .why__item-text { font-size: 18px; }
  .info__text { text-wrap: balance; }
  .about__inner { padding: 64px 0px; }
  .cta { margin: 0px 0px 64px; }
  .services__box { flex-direction: column; }
  .services__item { flex: 1 1 0%; border: none !important; }
  .footer__inner { text-align: center; font-size: 16px; line-height: 24px; }
  .faq__title { margin-bottom: 64px; }
  .faq__box { gap: 24px; }
  .thanks-page .title { text-wrap: balance; }
  .thanks-page .text { font-size: 18px; line-height: 1.5; }
  .thanks-page .text br { display: none; }
}