:root {
	--main-color:#051F29;
	--main-secondary:#69797F;
	--accent-color:#00AEEF;
	--background:#ffffff;
	--background-accent:#F8F8F8;
	--border-radius-main:100px;
	--border-radius-big:30px;
	--border-radius-small:15px;
	--border-color:#69797F1A;
}

/* НЕ блокуємо тіло і html */
html, body { height: auto; }
body { overflow: visible;
overflow-x: hidden; }

html, body {
    	position:relative;
    	overflow-x:hidden;
    }

/* герой на весь екран без «обрізання» в iOS Safari */
.hero { min-height: 100dvh; }          /* або 100svh */
@supports (-webkit-touch-callout: none) {
  .hero { min-height: 100dvh; }
}

/* якщо у тебе є фоновий canvas/відео зверху — щоб не з’їдав скрол/колесо */
.canvas-bg { pointer-events: none; }

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	font-family: "Mulish", sans-serif;
	font-size: 16px;
	background: var(--background);
	font-weight: 300;
}

a {
	text-decoration: none;
	color: var(--main-color);
	transition: all .75s ease;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
}

h2 {
	font-size: 50px;
}

h3 {
	font-size: 20px;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
}

.header__content {
	display: flex;
	justify-content: space-between;
	padding: 10px 10px 10px 20px;
	background: var(--background-accent);
	align-items: center;
	border-radius: var(--border-radius-main);
	position: absolute;
	z-index: 9;
	width: 100%;
	max-width: 1200px;
	margin-top:30px;
}

.header__menu {
	display: flex;
	list-style: none;
	gap:40px;
}

.header__menu a:hover {
	color: var(--accent-color);
}

.header__menu a {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-top: 5px;
}

.header__menu a::after {
	content: "";
	display: flex;
	width: 0%;
	height: 1px;
	background: var(--accent-color);
	position: relative;
	left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: all ease .75s;
    margin-top: 5px;
}

.header__menu a:hover::after {
	width: 100%;
	opacity: 1;
}

.cta {
	font-size: 16px;
	padding: 12px 24px;
	color: var(--background);
	background: var(--accent-color);
	border-radius: var(--border-radius-main);
	border: 1px solid transparent;
}

.cta:hover {
	background: transparent;
	border: 1px solid var(--accent-color);
	color: var(--accent-color);
}

.hero {
	height: 100vh;
	position: relative;
}

.hero::before {
	content: "";
	display: flex;
	width: 100%;
	height: 100%;
	position: absolute;
	background: #0000004D;
	z-index: 0;
}

.offer {
	position: relative;
	z-index: 2;
	color: var(--background);
	display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    justify-content: flex-end;
    padding-bottom: 110px;
    gap:40px;
}

.hero__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:15px;
}

.offer__title {
	font-size: 70px;
	text-align: center;
}

.offer__desc {
	font-size: 20px;
	color: #FFFFFF99;
	max-width: 60%;
    text-align: center;
    line-height: 1.4em;
}

.btn__label {
	background: var(--accent-color);
	color: var(--background);
	border-radius: var(--border-radius-main);
	padding: 12px 24px;
	font-size: 18px;
}

.btn__extra {
	background: var(--accent-color);
	color: var(--background);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--border-radius-main);
	line-height: 0em;
	font-size: 18px;
	transition: all ease .75s;
}

.btn {
	display: flex;
}

.btn:hover .btn__extra {
	margin-left: 10px;
}

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

.about {
	padding-top: 110px;
}

.about__image {
	width: calc(50% - 30px);
	border-radius: var(--border-radius-big);
}

.about__text-content {
	width: calc(50% - 30px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.eyebrow:before {
	content: "";
	display: flex;
	width: 7px;
	height: 7px;
	background: var(--accent-color);
	margin-right: 10px;
	border-radius: var(--border-radius-main);
}

.eyebrow {
	display: flex;
	align-items: center;
	text-transform: uppercase;
	color: var(--main-secondary);
	font-size: 12px;
	margin-bottom: 10px;
}

.about__title {
	margin-bottom: 30px;
}

.about__desc {
	color: var(--main-secondary);
}

.about__icon {
	width: 35px;
	height: 35px;
	transition: all .75s ease;
}

.about__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap:15px;
}

.about__item {
	display: flex;
	align-items: center;
	gap:15px;
	font-weight: 500;
}

.about__item:hover .about__icon {
	transform: scale(0.9);
}

.services {
	padding-top: 110px;
	position: relative;
}

.section__header {
	display: flex;
	text-align: center;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

.service_bg {
	position: absolute;
	z-index: -1;
	left: 50%;
    margin-top: -240px;
    transform: translateX(-50%);
}

.services__list {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 40px 0px;
}

.services__item {
	width: calc(33.333% - 15px);
	background: var(--background-accent);
	border-radius: var(--border-radius-small);
	border:1px solid var(--border-color);
	padding: 20px;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	gap:60px;
	transition: all 1.75s ease;
}

.services__item:hover {
	transform: scale(1.05);
	border-color: var(--accent-color);
}

.services__icon {
	margin-bottom: 20px;
}

.services__item-desc {
	color: var(--main-secondary);
}

.services__desc {
	color: var(--main-secondary);
	font-size: 18px;
	text-align: center;
	display: flex;
    justify-content: center;
    align-items: center;
}

.services__desc p {
	max-width: 75%;
}

.results {
	margin-top: 110px;
	position: relative;
}

.result_bg {
	position: absolute;
	z-index: -1;
	margin-top: -220px;
}

.results__content {
	padding: 70px;
	background: var(--background-accent);
	border-radius: var(--border-radius-big);
	display: flex;
	flex-direction: column;
	gap:40px;
}

.results__list {
	list-style: none;
	display: flex;
	justify-content: space-between;
}

.results__item {
	width: calc(33.333% - 10px);
	display: flex;
	flex-direction: column;
	gap:60px;
	justify-content: space-between;
	padding: 20px;
	background: var(--background);
	border-radius: var(--border-radius-small);
	transition: all 1.75s ease;
}

.results__item:hover {
	transform: scale(1.03);
}

.results__item-title {
	font-size: 14px;
	text-transform: uppercase;
	color: var(--main-secondary);
}


.results__item:nth-child(2) {
	background: var(--accent-color);
	color: var(--background);
}

.results__item:nth-child(2) .results__item-title {
	color: var(--background);
}

.results__item-desc {
	font-size: 35px;
	color: var(--accent-color);
	font-weight: 500;
}

.results__item:nth-child(2) .results__item-desc {
	color: var(--background);
}

.gallery {
	padding-top: 110px;
}

.gallery__grid {
	margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  list-style: none; 
}
@media (max-width: 900px) {
  .gallery__grid { grid-template-columns: 1fr; gap: 16px; }
}
.gallery__item { position: relative; }

.gallery-card {
  display: block;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.gallery-card__media { display:block; position:relative; }
.gallery-card__img {
  width: 100%; height: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 1s ease;
}
.gallery-card:hover .gallery-card__img { transform: scale(1.03); }

/* pill */
.gallery-card__pill {
  position: absolute; left: 10px; bottom: 10px;
  display: inline-flex; align-items: center; 
  max-width: calc(100% - 10px);
  font-size: 12px;
}
.gallery-card__pill-text { 
	display: flex;
	align-items: center;
	gap:7px;
	padding: 15px 20px;
	background: var(--background);
	color: var(--main-secondary);
	text-transform: uppercase;
	font-weight: 300;
	border-radius: var(--border-radius-main);
 }

 .gallery-card__pill-text:before {
 	content: '';
 	display: flex;
 	width: 7px;
 	height: 7px;
 	background: var(--accent-color);
 	border-radius: var(--border-radius-main);
 }
.gallery-card__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius-main);
  transition: all 1s ease;
}

.gallery-card__pill:hover .gallery-card__plus {
	margin-left: 10px;
}

/* === Lightbox ============================================================= */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.88);
  display: grid; grid-template-columns: minmax(0,1fr);
  align-items: center; justify-items: center;
  padding: 24px;
}
.lightbox__stage { margin: 0; max-width: 96vw; max-height: 92vh; display:grid; gap:12px; }
.lightbox__img { max-width: 96vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: 12px; }
.lightbox__cap { color: #fff; text-align: center; font-size: 14px; opacity: .85; }

.lightbox__close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  background:#fff; border: 0; font-size: 28px; line-height: 1;
  box-shadow: 0 8px 24px rgba(0,0,0,.2); cursor: pointer;
}
.lightbox__nav {
	display: flex;
	align-items: center;
	justify-content: center;
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-color); border: 0; 
  transition: all 1s ease;
}

.lightbox__prev { left: 20px; }
.lightbox__next { right: 20px; }

body.is-lightbox-open { overflow: hidden; }

.contact {
	padding-top: 110px;
	position: relative;
}

.contact__content {
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
}

.contact__form {
	width: calc(50% - 15px);
	padding: 30px;
	background: var(--background-accent);
	border-radius: var(--border-radius-small);
	border:1px solid var(--border-color);
}

.contact__info {
	width: calc(50% - 15px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.contact__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap:30px;
}

.contact__icon img {
	width: 35px;
	height: auto;
	transition: all ease 1s;
}

.contact__item {
	display: flex;
	gap:15px;
}

.contact__caption {
	font-weight: 500;
	font-size: 12px;
	color: var(--main-secondary);
	margin-bottom: 5px;
}

.contact__value {
	font-size: 22px;
	transition: all 1s ease;
	font-weight: 500;
}

.contact__item:hover .contact__value {
	color: var(--accent-color);
}

.contact__item:hover .contact__icon img {
	transform: scale(0.9);
}

.section__subtitle {
	font-size: 20px;
	margin-bottom: 30px;
}

.section__desc {
	font-size: 16px;
	color: var(--main-secondary);
}

.contact__form form {
	display: flex;
	flex-wrap: wrap;
	gap:10px;
}

.contact__form form p {
	width: 100%;
}

.contact__form form p:nth-child(-n+3) {
	width: calc(50% - 5px);
}

.input__label {
	display: flex;
	flex-direction: column;
	gap:5px;
	width: 100%;
	font-size: 12px;
	font-weight: 500;
}

.form__input {
	width: 100%;
	font-weight: 300;
	padding: 12px;
	background: transparent;
	border-radius: var(--border-radius-main);
	border: 1px solid #69797F33;
	transition: all .75s ease;
		font-size: 16px;
	font-family: "Mulish", sans-serif;
}

.form__input:hover {
	border-color: var(--accent-color);
}

.form__input:focus-visible {
	border-color: var(--main-color);
	outline: none;
}

.form__textarea {
	border-radius: var(--border-radius-small);
	font-size: 16px;
	font-family: "Mulish", sans-serif;
}

.wpcf7-spinner {
	display: none!important;
}

.form__cta {
	width: 100%;
	padding: 12px 24px;
	outline: none;
	border: 1px solid var(--accent-color);
	background: var(--accent-color);
	color: var(--background);
	font-size: 18px;
	border-radius: var(--border-radius-main);
	transition: all 1s ease;
	font-family: "Mulish", sans-serif;
}

.form__cta:hover {
	background: transparent;
	color: var(--accent-color);
}

footer {
	margin-top: 110px;
	padding-bottom: 30px;
	position: relative;
}

.footer_svg {
	position: absolute;
	z-index: -1;
	margin-top: -220px;
}

.site-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	background:var(--background-accent);
	border-radius: var(--border-radius-main);
}

.company__rights {
	color: var(--main-secondary);
	font-size: 14px;
}


/* Базово: десктоп */
.burger{display:none}
.cta-mobile {
	display: none;
}

/* ===== MOBILE ≤992px ===== */
@media (max-width: 992px){
  /* бургер */
  .burger{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:10px; border:none;
    background: transparent; 
    cursor:pointer; gap:5px; z-index:1101;
    flex-direction: column;
  }
  .burger span{
    display:block; width:22px; height:2px; background:#111; border-radius:2px;
    transition:transform .25s ease, opacity .2s ease, top .25s ease;
    position:relative;
  }
  /* іконка "хрестик" при відкритті */
  .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

  /* ховаємо десктопну CTA */
  .cta-header{ display:none }

  /* офф-канвас меню */
  .main-navigation{
    position:fixed; top:0; right:0; bottom:0;
    width:min(92vw, 360px); background:#fff; z-index:1102;
    transform:translateX(100%); transition:transform .3s ease;
    padding:24px 22px; box-shadow:-6px 0 24px rgba(0,0,0,.08);
    display:flex; flex-direction:column; gap:16px;
  }
  .main-navigation[data-open="true"]{ transform:translateX(0) }
  .main-navigation[aria-hidden="true"]{ visibility:hidden } /* для скрінрідерів */

  /* список меню у стовпчик */
  .header__menu{ display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none }
  .header__menu a{ display:block; padding:12px 8px; font-size:18px; text-decoration:none; width: fit-content }

  /* CTA всередині меню */
  .cta-mobile{
    margin-top:auto; display:block; text-align:center;

  }

  /* напівпрозорий фон */
  .menu-backdrop{
    position:fixed; inset:0; background:rgba(17,24,39,.45);
    z-index:3; opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  body.is-menu-open .menu-backdrop{ opacity:1; pointer-events:auto }
  body.is-menu-open{ overflow:hidden }
  .header__menu li {
  	    display: flex;
    justify-content: flex-end;
  }
}

@media (max-width: 1400px) {
	.container {
		max-width: 1140px;
	}
	.header__content {
		max-width: 1140px;
	}
}


@media (max-width: 1200px) {
	.container {
		max-width: 960px;
	}
	.header__content {
		max-width: 960px;
	}
	.header__menu {
		gap:20px;
	}
	.header__menu a {
		font-size: 14px;
	}
	.offer__title {
		font-size: 60px;
	}
	.offer__desc {
		font-size: 18px;
	}
	.about__text-content {
		gap:40px;
	}
	.about__image {
		object-fit: cover;
	}
	h2 {
		font-size: 45px;
	}
}

@media (max-width: 992px) {
	.container {
		max-width: 720px;
	}
	.header__content {
		max-width: 720px;
	}
	.offer__title {
        font-size: 50px;
    }
    .offer__desc {
		max-width: 100%;
	}
	.about__content {
		flex-direction: column;
		gap:40px;
	}
	.about__text-content {
		width: 100%;
	}
	.about__image {
		width: 100%;
	}
	h2 {
		font-size: 40px;
	}
	.services__item {
		width: 100%;
	}
	.services__list {
		flex-direction: column;
		gap:20px;
	}
	.services__desc p {
	    max-width: 100%;
	}
	.results__content {
	    padding: 40px;
	    gap: 30px;
	}
	.results__list {
		flex-direction: column;
		gap:20px;
	}
	.results__item {
		width: 100%;
	}
	.contact__content {
		flex-direction: column;
		gap:20px;
	}
	.contact__form {
		width: 100%;
	}
	.contact__info {
		width: 100%;
		gap:40px;
	}
}

@media (max-width: 768px) {
    html, body {
    	position:relative;
    	overflow-x:hidden;
    }
	.container {
		max-width: 540px;
	}
	.header__content {
		max-width: 540px;
	}
	.offer__title {
        font-size: 40px;
    }
    .about {
    	padding-top: 80px;
    }
    .services {
    	padding-top: 80px;
    }
    .results {
    	margin-top: 80px;
    }
    .gallery {
    	padding-top: 80px;
    }
    .contact {
    	padding-top: 80px;
	}
	footer {
		margin-top: 80px;
	}
}

@media (max-width: 576px) {
	.container {
		max-width: 100%;
		padding: 0px 15px;
	}
	.header__content {
		max-width: calc(100% - 30px);
	}
	.offer__title {
        font-size: 33px;
    }
    .offer__desc {
    	font-size: 16px;
    }
    .offer {
    	gap:20px;
    }
    .cta__desc {
    	text-align: center;
    	font-size: 14px;
    }
    h2 {
        font-size: 29px;
    }
    .services__item-desc {
    	font-size: 14px;
    }
    .services__item {
    	gap:40px;
    	padding: 15px;
    }
    .services__desc {
    	font-size: 16px;
    }
    .results__content {
        padding: 15px;
    }
    .results__item-desc {
	    font-size: 25px; 
	}
	.results__item {
		gap:40px;
	}
	.gallery-card__pill-text {
		padding: 10px 15px;
	}
	.gallery-card__plus {
		width: 34px;
		height: 34px;
	}
	.contact__form form p:nth-child(-n+3) {
    width: 100%;
}
.contact__form {
	padding: 15px;
}
.site-info {
	flex-direction: column;
	gap:15px;
}

}