/* Базовий CSS reset */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
scroll-behavior: smooth;
height: 100%;
width: 100%;
font-family: sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
text-rendering: optimizeSpeed;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
border: none;
outline: none;
background: none;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ----------- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Inter:wght@400;500&display=swap');
body {
font-family: 'Inter', Arial, sans-serif;
background: #F7F9FC;
color: #262F3A;
margin: 0;
padding: 0;
min-height: 100vh;
font-size: 18px;
letter-spacing: 0.01em;
transition: background 0.3s;
}
h1, h2, h3, h4 {
font-family: 'Montserrat', Arial, sans-serif;
color: #3556A6;
font-weight: 700;
letter-spacing: 0.02em;
margin: 0 0 16px 0;
}
a {
color: #3556A6;
text-decoration: none;
transition: color 0.2s;
}
a:hover, a:focus {
color: #21B573;
text-decoration: underline;
}
button, .button {
background: linear-gradient(90deg, #3556A6 60%, #21B573 100%);
color: #fff;
border: none;
border-radius: 12px;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 700;
padding: 12px 28px;
font-size: 18px;
cursor: pointer;
transition: background 0.25s, transform 0.15s;
box-shadow: 0 4px 16px 0 rgba(53, 86, 166, 0.08);
}
button:hover, .button:hover {
background: linear-gradient(90deg, #21B573 30%, #3556A6 100%);
transform: translateY(-2px) scale(1.03);
}
img {
max-width: 100%;
display: block;
border-radius: 10px;
}
/* Контейнер */
.container {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
/* Мікроанімації */
.fade-in {
opacity: 0;
transform: translateY(24px);
animation: fadeInUp 1s forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: none;
}
}
/* Адаптивність */
@media (max-width: 700px) {
body { font-size: 16px; }
h1 { font-size: 2rem; }
.container { padding: 0 10px; }
}
/* Підключення Lucide через CDN (додай у HTML) */
.header {
position: sticky;
top: 0;
width: 100%;
z-index: 100;
background: rgba(247,249,252,0.86);
backdrop-filter: blur(12px);
box-shadow: 0 2px 16px 0 rgba(53,86,166,0.04);
padding: 0;
transition: background 0.25s;
animation: fadeInDown 0.9s both;
}
@keyframes fadeInDown {
from { opacity:0; transform:translateY(-36px);}
to { opacity:1; transform:translateY(0);}
}
.header__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 76px;
}
.header__logo {
display: flex;
align-items: center;
font-size: 2.2rem;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 700;
color: #3556A6;
letter-spacing: 0.04em;
gap: 12px;
transition: color 0.2s;
}
.header__logo-icon {
font-size: 2.3rem;
color: #21B573;
transition: transform 0.3s;
}
.header__logo:hover .header__logo-icon,
.header__logo:focus .header__logo-icon {
transform: rotate(70deg) scale(1.1);
}
.header__nav {
display: flex;
gap: 32px;
align-items: center;
}
.header__link {
display: flex;
align-items: center;
gap: 7px;
font-family: 'Inter', Arial, sans-serif;
font-size: 1.08rem;
font-weight: 500;
color: #262F3A;
padding: 8px 18px;
border-radius: 8px;
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
position: relative;
}
.header__link i {
font-size: 1.22rem;
color: #3556A6;
transition: color 0.2s;
}
.header__link:hover, .header__link:focus {
background: #E7EFFF;
color: #21B573;
}
.header__link:hover i, .header__link:focus i {
color: #21B573;
}
.header__link--button {
background: linear-gradient(90deg, #3556A6 70%, #21B573 100%);
color: #fff !important;
font-weight: 700;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(53,86,166,0.07);
padding: 9px 24px;
transition: background 0.18s, transform 0.14s;
margin-left: 18px;
}
.header__link--button:hover, .header__link--button:focus {
background: linear-gradient(90deg, #21B573 30%, #3556A6 100%);
color: #fff !important;
transform: translateY(-1px) scale(1.05);
}
@media (max-width: 820px) {
.header__container { height: 60px; }
.header__logo { font-size: 1.3rem; }
.header__logo-icon { font-size: 1.5rem; }
.header__nav { gap: 15px; }
.header__link { font-size: 0.97rem; padding: 8px 10px; }
.header__link--button { padding: 8px 14px; margin-left: 10px;}
}
@media (max-width: 480px) {
.header__container { flex-direction: column; height: auto; gap: 6px; padding: 10px 0; }
.header__nav { gap: 5px; width: 100%; flex-wrap: wrap;}
.header__logo { font-size: 1rem; }
}
.header__logo-icon [data-lucide],
.header__link [data-lucide] {
display: inline-block;
vertical-align: middle;
}
.header__logo-icon svg {
width: 2.3rem;
height: 2.3rem;
color: #21B573;
transition: transform 0.3s;
}
.header__logo:hover .header__logo-icon svg,
.header__logo:focus .header__logo-icon svg {
transform: rotate(70deg) scale(1.1);
}
.header__link [data-lucide] svg {
width: 1.22rem;
height: 1.22rem;
color: #3556A6;
transition: color 0.2s;
}
.header__link:hover [data-lucide] svg,
.header__link:focus [data-lucide] svg {
color: #21B573;
}
.header__link--button [data-lucide] svg {
color: #fff;
width: 1.25rem;
height: 1.25rem;
}
.footer {
background: #E7EFFF;
padding: 48px 0 0 0;
font-size: 1rem;
margin-top: 54px;
position: relative;
}
.footer__container {
display: grid;
grid-template-columns: 2fr 1fr 1.2fr 1.5fr;
gap: 32px;
align-items: flex-start;
}
.footer__col {
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
animation: fadeInUp 1s both;
}
.footer__logo-col {
gap: 10px;
}
.footer__logo {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Montserrat', Arial, sans-serif;
font-size: 1.45rem;
font-weight: 700;
color: #3556A6;
margin-bottom: 8px;
text-decoration: none;
transition: color 0.19s;
}
.footer__logo-icon [data-lucide], .footer__contacts [data-lucide] {
display: inline-block;
vertical-align: middle;
}
.footer__logo-icon svg {
width: 2rem;
height: 2rem;
color: #21B573;
transition: transform 0.3s;
}
.footer__logo:hover .footer__logo-icon svg,
.footer__logo:focus .footer__logo-icon svg {
transform: rotate(70deg) scale(1.1);
}
.footer__slogan {
font-size: 1.04rem;
color: #6E7CA0;
margin-top: 5px;
line-height: 1.5;
}
.footer__title {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 600;
color: #3556A6;
margin-bottom: 7px;
font-size: 1.1rem;
letter-spacing: 0.01em;
}
.footer__nav, .footer__info, .footer__contacts {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.footer__nav a,
.footer__info a {
color: #262F3A;
text-decoration: none;
transition: color 0.2s;
}
.footer__nav a:hover,
.footer__info a:hover {
color: #21B573;
text-decoration: underline;
}
.footer__contacts li {
display: flex;
align-items: flex-start;
gap: 8px;
color: #262F3A;
font-size: 0.99rem;
line-height: 1.4;
}
.footer__contacts [data-lucide] svg {
width: 1.23rem;
height: 1.23rem;
color: #3556A6;
flex-shrink: 0;
margin-top: 2px;
}
.footer__contacts a {
color: #262F3A;
text-decoration: none;
transition: color 0.2s;
}
.footer__contacts a:hover {
color: #3556A6;
text-decoration: underline;
}
.footer__bottom {
background: #3556A6;
color: #fff;
text-align: center;
font-size: 1rem;
font-family: 'Inter', Arial, sans-serif;
padding: 18px 0 16px 0;
margin-top: 30px;
letter-spacing: 0.01em;
border-radius: 0 0 20px 20px;
box-shadow: 0 -2px 16px 0 rgba(53,86,166,0.07);
}
@media (max-width: 900px) {
.footer__container {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.footer__col { gap: 10px; }
}
@media (max-width: 600px) {
.footer__container {
grid-template-columns: 1fr;
gap: 18px;
}
.footer {
padding: 36px 0 0 0;
}
.footer__logo { font-size: 1.08rem;}
.footer__slogan { font-size: 0.98rem;}
}
.hero {
position: relative;
background: linear-gradient(120deg, #E7EFFF 40%, #F7F9FC 100%);
overflow: hidden;
padding: 72px 0 54px 0;
min-height: 520px;
}
.hero__container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
position: relative;
z-index: 1;
}
.hero__content {
max-width: 540px;
display: flex;
flex-direction: column;
gap: 32px;
}
.hero__title {
font-size: 2.7rem;
line-height: 1.13;
color: #262F3A;
display: flex;
align-items: center;
gap: 16px;
margin: 0 0 18px 0;
letter-spacing: 0.01em;
}
.hero__icon [data-lucide] {
display: inline-block;
}
.hero__icon svg {
width: 2.7rem;
height: 2.7rem;
color: #3556A6;
animation: heroIconPulse 2s infinite alternate;
}
@keyframes heroIconPulse {
0% { transform: scale(1); color: #3556A6; }
100% { transform: scale(1.15); color: #21B573; }
}
.hero__subtitle {
font-size: 1.21rem;
color: #6E7CA0;
line-height: 1.55;
margin-bottom: 14px;
max-width: 440px;
}
.hero__uk-flag { font-size: 1.3rem; }
.hero__button {
width: fit-content;
font-size: 1.19rem;
letter-spacing: 0.02em;
margin-top: 10px;
box-shadow: 0 6px 28px 0 rgba(33,181,115,0.09);
animation: heroBtnPop 1.2s cubic-bezier(.45,1.8,.54,1.2) both;
}
@keyframes heroBtnPop {
0% { opacity:0; transform: translateY(32px) scale(0.97);}
70% { opacity:1; }
100% { opacity:1; transform: none; }
}
/* Картинка та декор */
.hero__image-block {
position: relative;
width: 350px;
min-width: 240px;
aspect-ratio: 1/1;
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 1;
}
.hero__image-bg {
position: absolute;
left: 10%;
bottom: 7%;
width: 100%;
height: 90%;
background: radial-gradient(ellipse at 60% 70%, #21B57322 80%, #E7EFFF00 100%);
border-radius: 49% 51% 42% 58%/50% 60% 40% 50%;
filter: blur(18px);
z-index: 0;
animation: heroBgMove 8s linear infinite alternate;
}
@keyframes heroBgMove {
0% { left:10%; bottom:7%; }
100% { left:16%; bottom:3%; }
}
.hero__image {
position: relative;
width: 90%;
height: auto;
border-radius: 18px;
box-shadow: 0 12px 38px 0 rgba(53,86,166,0.13);
z-index: 1;
transition: transform 0.35s;
}
.hero__image-block:hover .hero__image {
transform: scale(1.045) rotate(-1.4deg);
}
/* Хвиля знизу */
.hero__wave {
position: absolute;
left: 0; right: 0; bottom: -2px; z-index: 0;
width: 100%;
height: 56px;
background: url('data:image/svg+xml;utf8,') no-repeat center/cover;
opacity: .9;
}
@media (max-width: 900px) {
.hero__container { flex-direction: column; gap: 36px; }
.hero__content { max-width: 100%; }
.hero__image-block { width: 290px; }
.hero__title { font-size: 2.1rem; }
}
@media (max-width: 600px) {
.hero { padding: 44px 0 26px 0; }
.hero__container { gap: 18px; }
.hero__image-block { width: 96vw; min-width: 0;}
.hero__image { border-radius: 12px; }
}
.about {
background: #fff;
padding: 68px 0 56px 0;
position: relative;
z-index: 2;
}
.about__container {
display: flex;
flex-direction: column;
gap: 46px;
align-items: center;
}
.about__intro {
text-align: center;
max-width: 720px;
margin: 0 auto;
}
.about__intro h2 {
font-size: 2.1rem;
margin-bottom: 10px;
color: #3556A6;
}
.about__intro p {
color: #6E7CA0;
font-size: 1.16rem;
line-height: 1.55;
}
.about__flag { font-size: 1.2em; }
.about__cards {
display: flex;
gap: 38px;
justify-content: center;
width: 100%;
flex-wrap: wrap;
}
.about__card {
background: #F7F9FC;
border-radius: 18px;
box-shadow: 0 8px 32px 0 rgba(53,86,166,0.07);
padding: 38px 34px 28px 34px;
max-width: 330px;
flex: 1 1 270px;
min-width: 220px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.26s cubic-bezier(.48,.19,.44,1.25), box-shadow 0.23s;
cursor: pointer;
position: relative;
z-index: 1;
}
.about__card:hover, .about__card:focus {
transform: translateY(-9px) scale(1.033);
box-shadow: 0 16px 46px 0 rgba(33,181,115,0.12), 0 2px 8px rgba(53,86,166,0.04);
}
.about__icon [data-lucide] {
display: inline-block;
}
.about__icon svg {
width: 2.6rem;
height: 2.6rem;
color: #21B573;
margin-bottom: 16px;
transition: color 0.18s, transform 0.2s;
}
.about__card:hover .about__icon svg {
color: #3556A6;
transform: scale(1.17) rotate(-8deg);
}
.about__card h3 {
font-size: 1.29rem;
color: #3556A6;
margin-bottom: 12px;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 700;
letter-spacing: 0.01em;
}
.about__card p {
font-size: 1.06rem;
color: #6E7CA0;
line-height: 1.45;
}
@media (max-width: 900px) {
.about__cards {
flex-direction: column;
align-items: stretch;
gap: 22px;
}
.about__card {
max-width: 100%;
padding: 34px 18px 22px 18px;
}
}
@media (max-width: 600px) {
.about { padding: 36px 0 22px 0;}
.about__intro h2 { font-size: 1.4rem;}
}
.approach {
background: #F7F9FC;
padding: 72px 0 60px 0;
position: relative;
z-index: 2;
}
.approach__title {
font-size: 2rem;
text-align: center;
color: #3556A6;
margin-bottom: 36px;
}
.approach__timeline {
position: relative;
display: flex;
justify-content: space-between;
gap: 24px;
max-width: 980px;
margin: 0 auto;
padding: 38px 0 0 0;
min-height: 218px;
}
.approach__step {
flex: 1 1 170px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
z-index: 2;
position: relative;
padding: 0 10px;
cursor: pointer;
transition: transform 0.20s cubic-bezier(.55,.09,.55,1.2), box-shadow 0.20s;
}
.approach__step:hover {
transform: translateY(-8px) scale(1.05);
box-shadow: 0 8px 30px 0 rgba(33,181,115,0.11);
}
.approach__icon-wrap {
background: linear-gradient(120deg, #E7EFFF 60%, #21B57311 100%);
border-radius: 50%;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
box-shadow: 0 4px 22px 0 rgba(33,181,115,0.07);
position: relative;
z-index: 2;
transition: box-shadow 0.2s;
}
.approach__step:hover .approach__icon-wrap {
box-shadow: 0 8px 24px 0 rgba(53,86,166,0.10);
}
.approach__icon [data-lucide] {
display: inline-block;
}
.approach__icon svg {
width: 2.25rem;
height: 2.25rem;
color: #3556A6;
transition: color 0.18s, transform 0.21s;
}
.approach__step:hover .approach__icon svg {
color: #21B573;
transform: scale(1.16) rotate(8deg);
}
.approach__step-title {
font-size: 1.15rem;
color: #3556A6;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 600;
margin: 10px 0 7px 0;
letter-spacing: 0.01em;
}
.approach__step-desc {
font-size: 1.01rem;
color: #6E7CA0;
line-height: 1.42;
}
.approach__line {
position: absolute;
left: 8%;
right: 8%;
top: 53px;
height: 6px;
background: linear-gradient(90deg, #21B573 0%, #3556A6 85%);
border-radius: 6px;
z-index: 1;
opacity: 0.23;
pointer-events: none;
transition: opacity 0.2s;
}
@media (max-width: 900px) {
.approach__timeline {
flex-direction: column;
align-items: stretch;
gap: 24px;
min-height: 0;
padding: 22px 0 0 0;
}
.approach__line {
width: 6px;
height: 72%;
left: 33px;
top: 85px;
right: auto;
background: linear-gradient(180deg, #21B573 0%, #3556A6 95%);
opacity: 0.23;
}
.approach__step {
flex-direction: row;
align-items: center;
text-align: left;
padding: 18px 2px 18px 10px;
min-height: 0;
gap: 18px;
}
.approach__icon-wrap {
margin-bottom: 0;
margin-right: 20px;
width: 48px;
height: 48px;
}
.approach__step-title {
margin: 0 0 3px 0;
font-size: 1.08rem;
}
}
@media (max-width: 600px) {
.approach { padding: 32px 0 18px 0;}
.approach__title { font-size: 1.2rem;}
.approach__timeline { gap: 14px; }
}
.cta {
background: linear-gradient(120deg, #3556A6 60%, #21B573 100%);
position: relative;
padding: 72px 0 64px 0;
color: #fff;
z-index: 3;
overflow: hidden;
}
.cta__container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
}
.cta__content {
text-align: center;
max-width: 700px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 28px;
}
.cta__title {
font-size: 2.25rem;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 700;
letter-spacing: 0.01em;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.cta__icon [data-lucide] { display: inline-block; }
.cta__icon svg {
width: 2.6rem;
height: 2.6rem;
color: #FFD86C;
transition: transform 0.22s cubic-bezier(.65,.05,.86,.29);
filter: drop-shadow(0 2px 8px #ffd86c88);
will-change: transform;
}
.cta__title:hover .cta__icon svg,
.cta__title:focus .cta__icon svg {
transform: translateY(-10px) scale(1.15) rotate(-12deg);
}
.cta__subtitle {
font-size: 1.19rem;
color: #fff;
opacity: 0.97;
margin-bottom: 8px;
font-weight: 400;
}
.cta__button {
background: linear-gradient(90deg, #FFD86C 10%, #21B573 100%);
color: #3556A6;
font-size: 1.25rem;
padding: 15px 44px;
border-radius: 15px;
font-weight: 700;
box-shadow: 0 6px 28px 0 rgba(33,181,115,0.15);
margin-top: 16px;
transition: background 0.18s, color 0.16s, transform 0.13s;
}
.cta__button:hover, .cta__button:focus {
background: linear-gradient(90deg, #21B573 30%, #FFD86C 100%);
color: #fff;
transform: scale(1.06);
}
/* Хвиля внизу */
.cta__wave {
position: absolute;
left: 0; right: 0; bottom: -2px;
width: 100%;
height: 58px;
background: url('data:image/svg+xml;utf8,') no-repeat center/cover;
opacity: .85;
z-index: 1;
}
@media (max-width: 700px) {
.cta { padding: 38px 0 26px 0; }
.cta__title { font-size: 1.22rem; }
.cta__icon svg { width: 2.0rem; height: 2.0rem;}
.cta__button { font-size: 1.01rem; padding: 12px 24px;}
}
.cases {
background: #fff;
padding: 70px 0 64px 0;
position: relative;
z-index: 2;
}
.cases__container {
display: flex;
flex-direction: column;
align-items: center;
gap: 42px;
}
.cases__title {
text-align: center;
color: #3556A6;
font-size: 2rem;
font-family: 'Montserrat', Arial, sans-serif;
margin-bottom: 0;
}
.cases__slider {
display: flex;
gap: 34px;
justify-content: center;
width: 100%;
flex-wrap: wrap;
align-items: stretch;
}
.cases__slide {
background: #F7F9FC;
border-radius: 18px;
box-shadow: 0 8px 32px 0 rgba(53,86,166,0.06);
padding: 36px 30px 26px 30px;
max-width: 340px;
min-width: 240px;
flex: 1 1 240px;
display: flex;
flex-direction: column;
align-items: center;
transition: box-shadow 0.23s, transform 0.22s;
cursor: pointer;
position: relative;
z-index: 1;
}
.cases__slide:hover {
box-shadow: 0 16px 50px 0 rgba(33,181,115,0.13), 0 2px 8px rgba(53,86,166,0.04);
transform: translateY(-6px) scale(1.028);
}
.cases__logo {
width: 54px;
height: 54px;
border-radius: 50%;
overflow: hidden;
background: #E7EFFF;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
box-shadow: 0 2px 12px 0 rgba(53,86,166,0.07);
}
.cases__logo img {
width: 80%;
height: auto;
border-radius: 50%;
}
.cases__icon [data-lucide] {
display: inline-block;
}
.cases__icon svg {
width: 2.15rem;
height: 2.15rem;
color: #21B573;
margin-bottom: 8px;
margin-top: 2px;
transition: color 0.18s, transform 0.21s;
}
.cases__slide:hover .cases__icon svg {
color: #3556A6;
transform: scale(1.13) rotate(7deg);
}
.cases__company {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 700;
color: #3556A6;
font-size: 1.11rem;
margin-bottom: 10px;
margin-top: 3px;
}
.cases__desc {
color: #6E7CA0;
font-size: 1.02rem;
line-height: 1.47;
margin-bottom: 0;
text-align: left;
}
@media (max-width: 900px) {
.cases__slider {
flex-direction: column;
align-items: center;
gap: 18px;
}
.cases__slide {
max-width: 99vw;
min-width: 0;
padding: 30px 12px 18px 12px;
}
}
@media (max-width: 600px) {
.cases { padding: 36px 0 20px 0;}
.cases__title { font-size: 1.2rem;}
}
.contact {
background: #E7EFFF;
padding: 70px 0 54px 0;
position: relative;
z-index: 3;
}
.contact__container {
max-width: 600px;
margin: 0 auto;
background: #fff;
border-radius: 18px;
box-shadow: 0 8px 32px 0 rgba(53,86,166,0.07);
padding: 44px 34px 36px 34px;
display: flex;
flex-direction: column;
gap: 28px;
align-items: stretch;
}
.contact__info h2 {
font-size: 2rem;
color: #3556A6;
font-family: 'Montserrat', Arial, sans-serif;
margin-bottom: 8px;
}
.contact__info p {
color: #6E7CA0;
font-size: 1.13rem;
margin-bottom: 0;
}
.contact__form {
display: flex;
flex-direction: column;
gap: 22px;
}
.contact__fields {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.contact__input,
.contact__textarea {
font-family: 'Inter', Arial, sans-serif;
font-size: 1.07rem;
padding: 12px 16px;
border: 1.5px solid #E7EFFF;
border-radius: 12px;
background: #F7F9FC;
outline: none;
transition: border 0.18s, box-shadow 0.18s;
margin-bottom: 0;
color: #262F3A;
width: 100%;
resize: none;
}
.contact__input:focus,
.contact__textarea:focus {
border-color: #21B573;
box-shadow: 0 2px 16px 0 #21B57322;
}
.contact__fields .contact__input {
flex: 1 1 0;
min-width: 130px;
}
.contact__textarea {
min-height: 96px;
max-height: 230px;
}
.contact__captcha {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 0;
}
.contact__captcha-question {
color: #3556A6;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.01em;
}
.contact__input--captcha {
max-width: 100px;
text-align: center;
}
.contact__button {
display: flex;
align-items: center;
gap: 8px;
font-size: 1.12rem;
width: fit-content;
margin-top: 10px;
}
.contact__button [data-lucide] svg {
width: 1.2rem;
height: 1.2rem;
color: #fff;
}
.contact__success {
margin-top: 14px;
font-size: 1.12rem;
color: #21B573;
font-weight: 600;
min-height: 24px;
transition: opacity 0.19s;
}
@media (max-width: 600px) {
.contact__container {
padding: 18px 7vw 16px 7vw;
}
.contact__info h2 { font-size: 1.23rem;}
}
.cookie-popup {
position: fixed;
left: 50%;
bottom: 38px;
transform: translateX(-50%) translateY(120px);
background: #fff;
color: #3556A6;
box-shadow: 0 6px 34px 0 rgba(53,86,166,0.17);
border-radius: 19px;
z-index: 9999;
padding: 0;
min-width: 300px;
max-width: 97vw;
opacity: 0;
pointer-events: none;
transition: opacity 0.36s cubic-bezier(.61,.14,.43,.91), transform 0.46s cubic-bezier(.52,.1,.37,1.25);
font-size: 1rem;
}
.cookie-popup.cookie-popup--visible {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.cookie-popup__content {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 22px;
}
.cookie-popup__icon [data-lucide] { display: inline-block; }
.cookie-popup__icon svg {
width: 2.05rem;
height: 2.05rem;
color: #FFD86C;
filter: drop-shadow(0 2px 7px #FFD86C44);
}
.cookie-popup__text {
flex: 1 1 auto;
color: #262F3A;
}
.cookie-popup__text a {
color: #21B573;
text-decoration: underline dotted;
transition: color 0.17s;
}
.cookie-popup__text a:hover { color: #3556A6; }
.cookie-popup__button {
background: linear-gradient(90deg, #21B573 60%, #3556A6 100%);
color: #fff;
border: none;
border-radius: 10px;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 600;
padding: 8px 22px;
font-size: 1rem;
cursor: pointer;
box-shadow: 0 2px 12px 0 rgba(33,181,115,0.08);
transition: background 0.18s, transform 0.13s;
}
.cookie-popup__button:hover, .cookie-popup__button:focus {
background: linear-gradient(90deg, #3556A6 10%, #21B573 100%);
transform: scale(1.06);
}
@media (max-width: 600px) {
.cookie-popup__content { padding: 13px 6vw;}
.cookie-popup { min-width: 0; font-size: 0.97rem;}
.cookie-popup__icon svg { width: 1.4rem; height: 1.4rem;}
}
.pages {
background: #F7F9FC;
min-height: 70vh;
padding: 64px 0 54px 0;
font-size: 1.11rem;
color: #262F3A;
letter-spacing: 0.01em;
position: relative;
z-index: 2;
}
.pages .container {
max-width: 750px;
margin: 0 auto;
background: #fff;
border-radius: 20px;
box-shadow: 0 6px 38px 0 rgba(53,86,166,0.08);
padding: 48px 38px 40px 38px;
animation: fadeInUp 1s both;
}
.pages h1 {
font-family: 'Montserrat', Arial, sans-serif;
color: #3556A6;
font-size: 2.1rem;
margin-bottom: 32px;
line-height: 1.18;
text-align: left;
letter-spacing: 0.02em;
font-weight: 700;
}
.pages h2 {
color: #21B573;
font-family: 'Montserrat', Arial, sans-serif;
font-size: 1.19rem;
margin: 34px 0 12px 0;
font-weight: 700;
letter-spacing: 0.01em;
}
.pages p {
margin: 0 0 18px 0;
color: #6E7CA0;
line-height: 1.62;
}
.pages ul {
margin: 0 0 18px 0;
padding-left: 22px;
}
.pages li {
margin: 0 0 9px 0;
color: #262F3A;
line-height: 1.6;
position: relative;
}
.pages li strong {
color: #3556A6;
font-weight: 600;
}
.pages a {
color: #3556A6;
text-decoration: underline dotted;
transition: color 0.19s;
}
.pages a:hover {
color: #21B573;
text-decoration: underline;
}
@media (max-width: 700px) {
.pages .container {
padding: 18px 6vw 18px 6vw;
border-radius: 13px;
}
.pages h1 { font-size: 1.3rem; }
.pages h2 { font-size: 1rem; }
.pages { padding: 24px 0 14px 0; font-size: 1.01rem;}
}