/* =============================================
   GARTA CENTER — UI Design System
   ============================================= */

/* --- Design Tokens --- */
:root {
	--garta-teal:   #007b7c;
	--garta-dark:   #11251f;
	--garta-line:   rgba(92, 131, 116, 0.22);
	--garta-shadow: 0 24px 60px rgba(17, 37, 31, 0.10);
}


/* =============================================
   HEADER CTA BUTTON
   Uncode рендерить нативно через CTA menu location.
   Btn класи додаються через nav_menu_link_attributes.
   ============================================= */

/* navbar-cta has height:100% from Uncode (needed for layout).
   We make it a flex container to vertically center the button inside,
   without touching the height itself. */
#masthead .navbar-cta {
	display: flex !important;
	align-items: center;
}

#masthead .navbar-cta ul.menu-cta-inner {
	display: flex;
	align-items: center;
	height: auto;
}

/* Прибираємо автоматичну стрілку Uncode */
#masthead .navbar-cta .fa-dropdown {
	display: none !important;
}

/* Uncode обнуляє padding-right на останньому елементі navbar-nav-last.
   Для кнопки відновлюємо симетричний btn-lg padding (18px 44px). */
#masthead .navbar-cta .menu-cta-inner > li > a.btn-lg {
	padding-right: 44px !important;
}

/* Прозорий хедер (top of page): білий outline */
#masthead:not(.is_stuck) .navbar-cta .menu-cta-inner > li > a {
	color:        #fff !important;
	border-color: rgba(255, 255, 255, 0.65) !important;
	background:   transparent !important;
	transition:   background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

#masthead:not(.is_stuck) .navbar-cta .menu-cta-inner > li > a:hover {
	background:   #fff !important;
	color:        var(--garta-dark) !important;
	border-color: #fff !important;
}

/* Scrolled (is_stuck): темний бордер + темний текст */
#masthead.is_stuck .navbar-cta .menu-cta-inner > li > a.btn-outline {
	color:        var(--garta-dark) !important;
	border-color: var(--garta-dark) !important;
	background:   transparent !important;
	transition:   background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

/* Hover scrolled: темний фон + білий текст */
#masthead.is_stuck .navbar-cta .menu-cta-inner > li > a.btn-outline:hover {
	background:   var(--garta-dark) !important;
	color:        #fff !important;
	border-color: var(--garta-dark) !important;
}

/* Mobile: кнопка в off-canvas меню — повна ширина */
@media (max-width: 959px) {
	.navbar-cta .menu-cta-inner > li > a {
		display:       block !important;
		text-align:    center;
		margin-top:    16px;
		background:    var(--garta-teal) !important;
		color:         #fff !important;
		border-color:  var(--garta-teal) !important;
	}
}

/* =============================================
   НАША ІТОРІЯ — Swiper slider
   .garta-storia-swiper wraps swiper-slide(s).
   Fade transition; animated progress-bar pagination.
   ============================================= */

/* Prevent Swiper from overflowing into next section */
.garta-storia-swiper {
	overflow: hidden;
}

/* Pagination container */
.garta-storia-pagination {
	display:         flex;
	justify-content: center;
	align-items:     center;
	gap:             10px;
	margin-top:      20px;
}

/* Bullet — horizontal bar */
.garta-storia-pagination .swiper-pagination-bullet {
	display:       block;
	width:         28px;
	height:        5px;
	border-radius: 3px;
	background:    rgba(0, 123, 124, 0.22);
	opacity:       1 !important;
	transition:    width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
	               background 0.35s ease;
	cursor:        pointer;
}

.garta-storia-pagination .swiper-pagination-bullet:hover {
	background: rgba(0, 123, 124, 0.5);
}

/* Active bar — wider + teal */
.garta-storia-pagination .swiper-pagination-bullet-active {
	width:      56px;
	background: var(--garta-teal) !important;
}

.garta-client-stories {
	display: block;
}

.garta-client-stories__head {
	max-width:   860px;
	margin:      0 auto 64px;
	text-align:  center;
}

.garta-client-stories__head .garta-section-title {
	/* size inherits the 50px section-title standard from .garta-section-title */
	line-height: 1.12;
	text-wrap:   balance;
}

.garta-client-stories__slider .swiper-slide {
	height: auto;
}

.garta-client-stories .garta-storia-pagination {
	margin-top: 50px;
}

.garta-client-story {
	display:               grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items:           center;
	gap:                   42px clamp(40px, 4.5vw, 76px);
}

.garta-client-story__media {
	position:      relative;
	border-radius: 0;
	overflow:      hidden;
	background:    transparent;
	box-shadow:    none;
}

.garta-client-story__image {
	display:       block;
	width:         100%;
	aspect-ratio:  1 / 1;
	object-fit:    cover;
}

.garta-client-story__content {
	max-width: none;
}

.garta-client-story__subtitle {
	margin:         0 0 12px;
	font-family:    'Inter Tight', sans-serif;
	font-size:      12px;
	font-weight:    600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          rgba(0, 123, 124, 0.78);
}

.garta-client-story__title {
	margin:      0 0 20px;
	font-family: 'TTTravels-Bold', sans-serif;
	font-size:   clamp(32px, 2.7vw, 35px);
	line-height: 1.1;
	color:       var(--garta-teal);
	text-wrap:   balance;
}

.garta-client-story__text {
	margin: 0 0 30px;
}

.garta-client-story__text p {
	margin:      0;
	font-family: 'Inter Tight', sans-serif;
	font-size:   clamp(18px, 1.75vw, 20px);
	line-height: 1.74;
	color:       rgba(17, 37, 31, 0.78);
	text-wrap:   pretty;
}

.garta-client-story__btn {
	display: inline-block;
	width: auto !important;
	max-width: 100%;
}

.garta-client-stories .garta-client-story__btn .custom-link.btn,
.garta-client-stories .garta-client-story__btn .btn {
	display:           inline-block !important;
	width:             auto !important;
	max-width:         none !important;
	min-width:         0;
	padding:           18px 44px !important;
	border-radius:     2px !important;
	border:            1px solid #ddd !important;
	background:        transparent !important;
	color:             var(--garta-teal) !important;
	font-size:         17px !important;
	font-weight:       300 !important;
	letter-spacing:    0 !important;
	text-decoration:   none !important;
	text-align:        center;
	white-space:       normal;
	transform:         none !important;
	-webkit-transform: none !important;
	transition:        background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease !important;
}

/* Hover: selector specificity (0,6,0) deliberately beats Uncode's native
   `.style-light .btn-color-uydo.btn-text-skin.btn-outline:hover` (0,5,0)
   so the teal fill wins instead of the native grey one. */
.garta-client-stories .garta-client-story__btn .custom-link.btn.btn-outline:hover,
.garta-client-stories .garta-client-story__btn .custom-link.btn.btn-outline:focus,
.garta-client-stories .garta-client-story__btn .btn.btn-outline:hover,
.garta-client-stories .garta-client-story__btn .btn.btn-outline:focus {
	background:   var(--garta-teal) !important;
	border-color: var(--garta-teal) !important;
	color:        #fff !important;
}

/* "Наша історія" (storia) button — same teal hover instead of the native grey
   fill. Specificity (0,6,0) deliberately beats Uncode's native
   `.style-light .btn-color-uydo.btn-text-skin.btn-outline:hover` (0,5,0).
   Base look stays native; only the hover fill changes. */
.btn.garta-storia-btn.btn-color-uydo.btn-text-skin.btn-outline:hover,
.btn.garta-storia-btn.btn-color-uydo.btn-text-skin.btn-outline:focus {
	background:   var(--garta-teal) !important;
	border-color: var(--garta-teal) !important;
	color:        #fff !important;
}

/* Temporarily hidden sections (will be built/restored later) */
.garta-hidden-temp {
	display: none !important;
}

/* =============================================
   КОНТАКТИ — Simple two-column layout
   vc_row → vc_column (map 5/12 + info 7/12)
   No nesting. Clean and native WPBakery.
   ============================================= */

/* Row: columns stretch to equal height */
.gcc-row > .row-parent > .row-inner {
	align-items: stretch;
}

/* Map column: position:relative so iframe can absolute-fill it */
.gcc-map-col {
	position: relative;
}

/* The entire Uncode inner chain stretches to fill the column */
.gcc-map-col > .uncol,
.gcc-map-col .uncoltable,
.gcc-map-col .uncell,
.gcc-map-col .uncont,
.gcc-map-col .uncode_text_column,
.gcc-map-col .uncode_text_column > p {
	position: absolute !important;
	inset:    0 !important;
	width:    100% !important;
	height:   100% !important;
	margin:   0 !important;
	padding:  0 !important;
}

/* iframe fills the column absolutely */
.gcc-iframe {
	position: absolute !important;
	inset:    0 !important;
	width:    100% !important;
	height:   100% !important;
	border:   none;
	display:  block;
}

/* Info column */
.gcc-info-col .uncont {
	padding: 48px 56px !important;
}

/* Info content */
.gcc-info {
	display:        flex;
	flex-direction: column;
	gap:            0;
	font-family:    'Inter Tight', sans-serif;
}

.gcc-eyebrow {
	font-family:    'TTTravels-Regular', sans-serif;
	font-size:      10px;
	font-weight:    600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color:          var(--garta-teal);
	margin:         0 0 10px !important;
	opacity:        0.85;
}

.gcc-city {
	font-family:   'TTTravels-Bold', sans-serif;
	font-size:     clamp(28px, 3.5vw, 44px) !important;
	font-weight:   400;
	line-height:   1.1;
	color:         var(--garta-dark) !important;
	margin:        0 0 28px !important;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--garta-line);
}

.gcc-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   22px 40px;
	margin-bottom:         32px;
}

.gcc-grid > div {
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

.gcc-lbl {
	font-family:    'TTTravels-Regular', sans-serif;
	font-size:      10px;
	font-weight:    600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color:          rgba(17, 37, 31, 0.38);
}

.gcc-val {
	font-family: 'Inter Tight', sans-serif;
	font-size:   15px;
	line-height: 1.65;
	color:       var(--garta-dark);
}

.gcc-val a {
	color:           var(--garta-teal);
	text-decoration: none;
}

.gcc-val a:hover { opacity: 0.75; }

.gcc-btns {
	display:  flex;
	gap:      12px;
	flex-wrap: wrap;
}

.gcc-btns .custom-link.btn {
	margin:      0 !important;
	font-family: 'TTTravels-Regular', sans-serif !important;
}

/* ── MOBILE ── */
@media (max-width: 959px) {

	/* На мобільному position:absolute не працює без фіксованої висоти —
	   замінюємо на нормальний потік з фіксованою висотою карти */
	.gcc-map-col,
	.gcc-map-col > .uncol,
	.gcc-map-col .uncoltable,
	.gcc-map-col .uncell,
	.gcc-map-col .uncont,
	.gcc-map-col .uncode_text_column,
	.gcc-map-col .uncode_text_column > p {
		position: static !important;
		width:    100% !important;
		height:   auto !important;
		inset:    auto !important;
	}

	.gcc-iframe {
		position:   static !important;
		display:    block;
		width:      100% !important;
		height:     260px !important;
		min-height: 260px !important;
		inset:      auto !important;
		border:     none;
	}

	/* Відступи секції — менше на мобільному */
	.gcc-row {
		padding-top:    calc(var(--uc-sp, 40px) * 0.6) !important;
		padding-bottom: calc(var(--uc-sp, 40px) * 0.6) !important;
	}

	/* Інфо-колонка — менше padding */
	.gcc-info-col .uncont {
		padding: 28px 20px !important;
	}

	/* Місто — менший шрифт */
	.gcc-city {
		font-size:     clamp(24px, 7vw, 34px) !important;
		margin-bottom: 20px !important;
		padding-bottom: 18px;
	}

	/* Grid: одна колонка */
	.gcc-grid {
		grid-template-columns: 1fr 1fr;
		gap: 16px 20px;
		margin-bottom: 24px;
	}
}

@media (max-width: 600px) {
	.gcc-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

@media (max-width: 767px) {
	/* Контактні секції: один стовпець і стабільний порядок text -> map */
	.gcc-row > .row-parent {
		padding-top: 32px !important;
		padding-bottom: 32px !important;
	}

	.gcc-row > .row-parent > .row-inner {
		display:        flex !important;
		flex-direction: column !important;
	}

	.gcc-row > .row-parent > .row-inner > .gcc-info-col,
	.gcc-row > .row-parent > .row-inner > .gcc-map-col {
		display: block !important;
		width:   100% !important;
	}

	.gcc-row > .row-parent > .row-inner > .gcc-info-col {
		order:       1;
		padding-top: 0 !important;
	}

	.gcc-row > .row-parent > .row-inner > .gcc-map-col {
		order:       2;
		padding-top: 18px !important;
	}

	.gcc-info-col .uncont {
		padding: 0 16px 22px !important;
	}

	.gcc-iframe {
		height:     260px !important;
		min-height: 260px !important;
	}

	/* Кнопки: на всю ширину, менший gap */
	.gcc-btns {
		display:        flex !important;
		flex-direction: column;
		align-items:    stretch;
		width:          100%;
		gap:            10px;
	}

	.gcc-btns .custom-link.btn {
		display:         block !important;
		width:           100% !important;
		max-width:       none !important;
		text-align:      center;
		margin:          0 !important;
		transform:       none !important;
		-webkit-transform: none !important;
	}
}

/* =============================================
   НАШІ ЦЕНТРИ — Cards section
   Image full-bleed at top, text area padded,
   button pinned to bottom via flex.
   ============================================= */

/* Equal-height: Uncode's row is already flex with align-items:stretch.
   We only need height:100% on uncol to fill the stretched column. */

/* Card box */
.garta-center-card > .uncol {
	border-radius: 20px;
	background:    #fff;
	box-shadow:    0 4px 24px rgba(17, 37, 31, 0.07);
	transition:    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
	               box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1);
	/* Flex chain: uncol → uncoltable → uncell → uncont */
	display:        flex;
	flex-direction: column;
	height:         100%;
}

.garta-center-card:hover > .uncol {
	transform:  translateY(-6px);
	box-shadow: 0 28px 56px rgba(17, 37, 31, 0.13);
}

/* Override table display to enable flex pinning */
.garta-center-card .uncoltable {
	display:        flex !important;
	flex-direction: column;
	flex:           1;
	height:         100%;
}

.garta-center-card .uncell {
	display:        flex !important;
	flex-direction: column;
	flex:           1;
}

/* .uncont: flex column so button pins to bottom */
.garta-center-card .uncont {
	display:        flex;
	flex-direction: column;
	flex:           1;
	padding:        0 !important;
}

/* Disable per-element animations INSIDE card content —
   but NOT on .uncol itself which carries the card-level stagger animation */
.garta-center-card .uncol .animate_when_almost_visible {
	opacity:   1 !important;
	transform: none !important;
}

/* ── IMAGE: full bleed, fixed height, zoom on hover ── */
.garta-center-card .uncode-single-media {
	overflow:    hidden;
	flex-shrink: 0;
	/* Round top corners directly on image container (flex overflow fix) */
	border-radius: 20px 20px 0 0;
}

.garta-center-card .uncode-single-media-wrapper {
	position:      relative;
	height:        280px;
	overflow:      hidden;
	border-radius: 20px 20px 0 0;
}

.garta-center-card .uncode-single-media-wrapper .dummy {
	display: none;
}

.garta-center-card .uncode-single-media-wrapper img {
	position:   absolute;
	inset:      0;
	width:      100% !important;
	height:     100% !important;
	object-fit: cover;
	transition: transform 0.52s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.garta-center-card:hover .uncode-single-media-wrapper img {
	transform: scale(1.06) !important;
}

/* ── TEXT AREA: padding, flex grow ── */
.garta-center-card .vc_custom_heading_wrap {
	padding: 20px 22px 0;
}

/* Eyebrow above city name */
.garta-center-card .vc_custom_heading_wrap::before {
	content:        'Центр протезування та адаптації';
	display:        block;
	font-size:      10px;
	font-weight:    600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color:          var(--garta-teal);
	opacity:        0.72;
	margin-bottom:  8px;
}

/* City name */
.garta-center-card h3 {
	font-size:     20px !important;
	line-height:   1.2 !important;
	color:         var(--garta-dark) !important;
	margin:        0 0 10px !important;
	transition:    color 0.22s ease;
}

.garta-center-card:hover h3 {
	color: var(--garta-teal) !important;
}

/* Description — flex-grow pushes button down */
.garta-center-card .uncode_text_column {
	flex:    1;
	padding: 0 22px;
}

.garta-center-card .uncode_text_column p {
	font-size:   14px;
	line-height: 1.68;
	color:       rgba(17, 37, 31, 0.62);
	margin:      0;
}

/* ── BUTTON: pinned to bottom ── */
.garta-center-card .btn-container {
	padding: 20px 22px 26px;
	display: block;
}

.garta-center-card .btn-container .btn {
	display:         inline-flex !important;
	align-items:     center;
	justify-content: center;
	padding:         12px 28px !important;
	border-radius:   999px !important;
	border:          1.5px solid rgba(92, 131, 116, 0.4) !important;
	background:      transparent !important;
	color:           var(--garta-teal) !important;
	font-size:       13px !important;
	font-weight:     600 !important;
	letter-spacing:  0.04em;
	text-decoration: none !important;
	transition:      background 0.24s ease,
	                 border-color 0.24s ease,
	                 color 0.24s ease !important;
}

.garta-center-card .btn-container .btn:hover {
	background:   var(--garta-teal) !important;
	border-color: var(--garta-teal) !important;
	color:        #fff !important;
}

/* ── MOBILE ── */
@media (max-width: 767px) {
	/* Один механізм spacing: без margin-bottom на картках */
	.garta-centers-section .garta-center-card {
		margin-bottom: 0 !important;
	}

	/* На tablet mobile gap потрібен тільки перед новим рядом */
	.garta-centers-section .garta-center-card.col-md-clear {
		padding-top: 18px !important;
	}

	/* Full-width button on mobile */
	.garta-center-card .btn-container .btn {
		display:           block !important;
		width:             100%;
		transform:         none !important;
		-webkit-transform: none !important;
		text-align: center;
	}

	/* Slightly smaller image on mobile */
	.garta-center-card .uncode-single-media-wrapper {
		height: 220px;
	}
}

@media (max-width: 569px) {
	/* На вузькому mobile секція вже має top padding від Uncode —
	   просто зменшуємо його і прибираємо дублювання */
	.garta-centers-section .row-child > .row-inner > .garta-center-card {
		padding-top: 18px !important;
	}

	.garta-centers-section .row-child > .row-inner > .garta-center-card:first-child {
		padding-top: 0 !important;
	}
}

/* =============================================
   MODAL OVERLAY
   ============================================= */

.garta-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.garta-modal[hidden] {
	display: none !important;
}

body.garta-modal-open {
	overflow: hidden;
}

/* Backdrop */
.garta-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 37, 31, 0.62);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	opacity: 0;
	transition: opacity 0.30s ease;
	cursor: pointer;
}

.garta-modal.is-open .garta-modal__backdrop {
	opacity: 1;
}

/* =============================================
   MODAL DIALOG
   ============================================= */

.garta-modal .garta-modal__dialog--compact { max-width: 460px; }

.garta-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 540px;
	max-height: calc(100svh - 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border-radius: 24px;
	padding: 40px;
	box-shadow:
		0 32px 80px rgba(17, 37, 31, 0.20),
		0 8px 24px  rgba(17, 37, 31, 0.10);
	opacity: 0;
	transform: translateY(18px) scale(0.97);
	transition:
		opacity   0.30s ease,
		transform 0.30s cubic-bezier(0.34, 1.10, 0.64, 1);
}

.garta-modal.is-open .garta-modal__dialog {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Header row */
.garta-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 30px;
}

.garta-modal__eyebrow {
	margin: 0 0 10px;
	font-family: 'TTTravels-Regular', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	color: var(--garta-teal);
}

.garta-modal__title {
	margin: 0 0 8px;
	font-family: 'TTTravels-Bold', sans-serif;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.15;
	color: var(--garta-dark);
}

.garta-modal__subtitle {
	margin: 0;
	font-family: 'Inter Tight', sans-serif;
	font-size: 14px;
	line-height: 1.65;
	color: rgba(17, 37, 31, 0.52);
}

/* Close button */
.garta-modal__close {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1.5px solid var(--garta-line);
	border-radius: 50%;
	background: transparent;
	color: rgba(17, 37, 31, 0.45);
	cursor: pointer;
	padding: 0;
	transition: border-color 0.20s, color 0.20s, background 0.20s;
	-webkit-appearance: none;
	appearance: none;
}

.garta-modal__close:hover {
	border-color: rgba(17, 37, 31, 0.4);
	color: var(--garta-dark);
	background: rgba(17, 37, 31, 0.04);
}

/* =============================================
   FORM FIELDS
   ============================================= */

.garta-modal__form {
	display: grid;
	gap: 18px;
}

.garta-modal__row {
	display: grid;
	gap: 14px;
}

.garta-modal__row--2 {
	grid-template-columns: 1fr 1fr;
}

.garta-modal__field {
	display: grid;
	gap: 7px;
}

.garta-modal__label {
	font-family: 'TTTravels-Regular', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(17, 37, 31, 0.46);
}

.garta-modal__label span {
	color: var(--garta-teal);
}

.garta-modal__input {
	width: 100%;
	padding: 13px 16px;
	border: 1.5px solid rgba(92, 131, 116, 0.28);
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--garta-dark);
	background: #f9fbfb;
	outline: none;
	transition:
		border-color 0.20s ease,
		box-shadow   0.20s ease,
		background   0.20s ease;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	font-family: inherit;
}

.garta-modal__input::placeholder {
	color: rgba(17, 37, 31, 0.28);
}

.garta-modal__input:hover {
	border-color: rgba(92, 131, 116, 0.50);
}

.garta-modal__input:focus {
	border-color: var(--garta-teal);
	background:   #fff;
	box-shadow:   0 0 0 3.5px rgba(0, 123, 124, 0.10);
}

/* Custom service dropdown */
.garta-select {
	position: relative;
}

.garta-select__trigger {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             12px;
	width:           100%;
	padding:         13px 16px;
	border:          1.5px solid rgba(92, 131, 116, 0.28);
	border-radius:   12px;
	background:      #f9fbfb;
	color:           var(--garta-dark);
	font-size:       15px;
	line-height:     1.4;
	font-family:     inherit;
	text-align:      left;
	cursor:          pointer;
	transition:      border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	-webkit-appearance: none;
	appearance:      none;
}

.garta-select__trigger:hover { border-color: rgba(92, 131, 116, 0.50); }

.garta-select.is-open .garta-select__trigger {
	border-color: var(--garta-teal);
	background:   #fff;
	box-shadow:   0 0 0 3.5px rgba(0, 123, 124, 0.10);
}

.garta-select__value { flex: 1; }
.garta-select__value.is-empty,
.garta-select__option.is-placeholder { color: rgba(17, 37, 31, 0.40); }

.garta-select__arrow {
	flex-shrink: 0;
	color:       rgba(17, 37, 31, 0.45);
	transition:  transform 0.25s ease;
}
.garta-select.is-open .garta-select__arrow { transform: rotate(180deg); }

.garta-select__list {
	position:      absolute;
	left: 0; right: 0;
	top:           calc(100% + 6px);
	z-index:       20;
	margin:        0;
	padding:       6px;
	list-style:    none;
	background:    #fff;
	border:        1px solid rgba(92, 131, 116, 0.20);
	border-radius: 12px;
	box-shadow:    0 18px 44px rgba(17, 37, 31, 0.14);
	max-height:    240px;
	overflow-y:    auto;
	opacity:       0;
	visibility:    hidden;
	transform:     translateY(-6px);
	transition:    opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.garta-select.is-open .garta-select__list {
	opacity:    1;
	visibility: visible;
	transform:  none;
}

.garta-select__option {
	padding:       11px 14px;
	border-radius: 8px;
	font-size:     15px;
	color:         var(--garta-dark);
	cursor:        pointer;
	transition:    background 0.15s ease, color 0.15s ease;
}
.garta-select__option:hover { background: rgba(0, 123, 124, 0.08); }
.garta-select__option.is-selected {
	background:   rgba(0, 123, 124, 0.12);
	color:        var(--garta-teal);
	font-weight:  600;
}

/* Status / error message */
.garta-modal__status {
	margin:        0;
	padding:       11px 14px;
	border-radius: 10px;
	font-family:   'Inter Tight', sans-serif;
	font-size:     13.5px;
	line-height:   1.45;
	background:    rgba(207, 46, 46, 0.08);
	color:         #b3261e;
	border:        1px solid rgba(207, 46, 46, 0.20);
}

/* Textarea */
.garta-modal__textarea {
	resize: vertical;
	min-height: 90px;
}

/* =============================================
   ACTIONS
   ============================================= */

.garta-modal__actions {
	display: grid;
	gap: 14px;
	margin-top: 6px;
}

.garta-modal__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 54px;
	padding: 14px 28px;
	border: none;
	border-radius: 14px;
	background: var(--garta-teal);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.03em;
	cursor: pointer;
	font-family: inherit;
	transition:
		background  0.22s ease,
		transform   0.18s ease,
		box-shadow  0.22s ease;
	-webkit-appearance: none;
	appearance: none;
}

.garta-modal__submit:hover {
	background: #006667;
	transform:  translateY(-1px);
	box-shadow: 0 10px 28px rgba(0, 123, 124, 0.30);
}

.garta-modal__submit:active {
	transform: translateY(0);
}

.garta-modal__submit-icon {
	transition: transform 0.20s ease;
}

.garta-modal__submit:hover .garta-modal__submit-icon {
	transform: translateX(3px);
}

/* Success state */
.garta-modal__success {
	display: none;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 16px 0 8px;
	gap: 12px;
}

.garta-modal__success.is-visible {
	display: flex;
}

.garta-modal__form.is-hidden {
	display: none;
}

.garta-modal__success-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(0, 123, 124, 0.10);
	color: var(--garta-teal);
}

.garta-modal__success-title {
	margin: 0;
	font-family: 'TTTravels-Bold', sans-serif;
	font-size: 22px;
	font-weight: 400;
	color: var(--garta-dark);
}

.garta-modal__success-text {
	margin: 0;
	font-family: 'Inter Tight', sans-serif;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(17, 37, 31, 0.56);
}

.garta-modal__success-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	margin-top: 8px;
	border: 1.5px solid var(--garta-teal);
	border-radius: 999px;
	background: transparent;
	color: var(--garta-teal);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	font-family: 'TTTravels-Regular', sans-serif;
	transition: background 0.22s, color 0.22s;
}

.garta-modal__success-close:hover {
	background: var(--garta-teal);
	color: #fff;
}

/* Privacy */
.garta-modal__privacy {
	margin: 0;
	font-family: 'Inter Tight', sans-serif;
	font-size: 12px;
	line-height: 1.55;
	color: rgba(17, 37, 31, 0.36);
	text-align: center;
}

.garta-modal__privacy a {
	color: var(--garta-teal);
	text-decoration: none;
}

.garta-modal__privacy a:hover {
	text-decoration: underline;
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 600px) {
	.garta-modal__dialog {
		padding: 28px 22px;
		border-radius: 18px;
	}

	.garta-modal__row--2 {
		grid-template-columns: 1fr;
	}

	.garta-modal__title {
		font-size: 22px;
	}
}

/* =============================================
   BLOG / ARTICLES
   ============================================= */

.garta-section-eyebrow {
	margin:         0 0 12px;
	font-family:    'Inter Tight', sans-serif;
	font-size:      12px;
	font-weight:    600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color:          var(--garta-teal);
	opacity:        0.78;
}

.garta-section-title {
	margin:      0;
	font-family: 'TTTravels-Bold', sans-serif;
	/* Site standard section-title size — matches Uncode .fontsize-155944 exactly */
	font-size:   50px;
	line-height: 1.08;
	color:       var(--garta-dark);
}

/* =============================================
   ПРО ЦЕНТР (About) — Ідея / Місія / Візія
   Designed section: centred intro + two premium cards.
   ============================================= */

.garta-vision__head {
	max-width:  860px;
	margin:     0 auto;
	text-align: center;
}

.garta-vision .garta-vision__title {
	margin:      0;
	font-family: 'TTTravels-Bold', sans-serif;
	/* specificity (0,2,0) beats Uncode's h2:not([class*="fontsize-"]) 29px rule (0,1,1) */
	font-size:   50px;   /* matches site section-title standard (.fontsize-155944) */
	line-height: 1.06;
	color:       var(--garta-teal);   /* brand colour, like all other section titles */
}

/* Section-title responsive scale — identical to Uncode .fontsize-155944
   (50px desktop → 33.33px ≤959px → 28px ≤320px) for site-wide consistency. */
@media (max-width: 959px) {
	.garta-section-title,
	.garta-vision .garta-vision__title { font-size: 33.333px; }
}
@media (max-width: 320px) {
	.garta-section-title,
	.garta-vision .garta-vision__title { font-size: 28px; }
}

/* «Наша команда» (центри): єдиний чистий відступ між заголовком і слайдером.
   vc_empty_space прибрано — тут лишається один контрольований gap. */
.garta-team-row .owl-carousel-wrapper { margin-top: 36px !important; }
@media (max-width: 767px) {
	.garta-team-row .owl-carousel-wrapper { margin-top: 24px !important; }
}

.garta-vision__lead {
	margin:      24px auto 0;
	max-width:   760px;
	font-family: 'Inter Tight', sans-serif;
	font-size:   clamp(16px, 1.5vw, 19px);
	line-height: 1.75;
	color:       rgba(17, 37, 31, 0.74);
	text-wrap:   pretty;
}

.garta-vision__cards {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   28px;
	margin-top:            58px;
}

.garta-vision-card {
	position:      relative;
	overflow:      hidden;
	display:       flex;
	flex-direction: column;
	padding:       48px 44px;
	background:    #fff;
	border:        1px solid rgba(4, 13, 18, 0.08);
	border-radius: 24px;
	box-shadow:    0 2px 6px rgba(4, 13, 18, 0.03);
	transition:    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
	               box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
	               border-color 0.4s ease;
}

.garta-vision-card:hover {
	transform:    translateY(-6px);
	box-shadow:   0 26px 54px -22px rgba(4, 13, 18, 0.28);
	border-color: rgba(0, 123, 124, 0.32);
}

/* soft teal corner glow on hover */
.garta-vision-card::after {
	content:     "";
	position:    absolute;
	top:         -70px;
	right:       -70px;
	width:       200px;
	height:      200px;
	border-radius: 50%;
	background:   radial-gradient(circle, rgba(0, 123, 124, 0.13), transparent 70%);
	opacity:      0;
	transition:   opacity 0.45s ease;
	pointer-events: none;
}
.garta-vision-card:hover::after { opacity: 1; }

/* large outlined index number */
.garta-vision-card__num {
	position:           absolute;
	top:                28px;
	right:              32px;
	font-family:        'TTTravels-Bold', sans-serif;
	font-size:          66px;
	line-height:        1;
	color:              transparent;
	-webkit-text-stroke: 1px rgba(4, 13, 18, 0.09);
	letter-spacing:     0.02em;
	transition:         -webkit-text-stroke-color 0.4s ease;
	pointer-events:     none;
}
.garta-vision-card:hover .garta-vision-card__num {
	-webkit-text-stroke-color: rgba(0, 123, 124, 0.28);
}

/* teal icon badge */
.garta-vision-card__icon {
	display:       grid;
	place-items:   center;
	width:         62px;
	height:        62px;
	margin-bottom: 28px;
	border-radius: 17px;
	background:    linear-gradient(135deg, #0a9293, #00696a);
	box-shadow:    0 12px 24px -12px rgba(0, 123, 124, 0.65);
	transition:    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.garta-vision-card:hover .garta-vision-card__icon { transform: scale(1.06) rotate(-3deg); }
.garta-vision-card__icon svg { width: 30px; height: 30px; color: #fff; }

.garta-vision .garta-vision-card__title {
	margin:      0;
	font-family: 'TTTravels-Bold', sans-serif;
	font-size:   26px;
	line-height: 1.15;
	color:       var(--garta-dark);
}
/* short accent underline instead of the cliché full top border */
.garta-vision .garta-vision-card__title::after {
	content:       "";
	display:       block;
	width:         44px;
	height:        3px;
	margin-top:    16px;
	border-radius: 3px;
	background:    var(--garta-teal);
}

.garta-vision-card__text {
	margin:      18px 0 0;
	font-family: 'Inter Tight', sans-serif;
	font-size:   16px;
	line-height: 1.68;
	color:       rgba(17, 37, 31, 0.74);
	text-wrap:   pretty;
}

/* ── TABLET ── */
@media (max-width: 959px) {
	.garta-vision__cards { gap: 22px; }
	.garta-vision-card   { padding: 40px 34px; }
}

/* ── MOBILE ── */
@media (max-width: 767px) {
	.garta-vision__cards {
		grid-template-columns: 1fr;
		gap:        16px;
		margin-top: 40px;
	}
	.garta-vision-card        { padding: 32px 26px; border-radius: 20px; }
	.garta-vision-card__icon  { width: 56px; height: 56px; margin-bottom: 22px; }
	.garta-vision-card__num   { font-size: 56px; top: 22px; right: 24px; }
	.garta-vision .garta-vision-card__title { font-size: 23px; }
	.garta-vision__lead       { margin-top: 20px; }
}

.garta-blog-landing-page {
	background:   #fff;
	font-family:  'Inter Tight', sans-serif;
}

.garta-services-page {
	background:  #fff;
	font-family: 'Inter Tight', sans-serif;
}

.garta-center-page {
	background:  #fff;
	font-family: 'Inter Tight', sans-serif;
}

.garta-center-page-header .vc_custom_heading_wrap:last-of-type .heading-text,
.garta-center-page-header .uncode_text_column {
	text-wrap: balance;
}

.garta-center-page-header .vc_custom_heading_wrap:last-of-type h1,
.garta-center-page-header .vc_custom_heading_wrap:last-of-type h2,
.garta-center-page-header .vc_custom_heading_wrap:last-of-type h3 {
	text-wrap: balance;
}

.garta-center-page-header .uncode_text_column p {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
	text-wrap: balance;
}

.garta-center-page__content > .vc_row:nth-child(1) {
	background:
		linear-gradient(180deg, rgba(92, 131, 116, 0.94), rgba(92, 131, 116, 0.94)),
		url("http://localhost:8080/wp-content/uploads/2021/06/pattern_dark_blue_2.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.garta-center-page__content > .vc_row:nth-child(2) {
	background: #fff;
}

.garta-center-page__content > .vc_row:nth-child(1) .vc_custom_heading_wrap {
	margin-bottom: 0;
}

.garta-article-main-row .row.limit-width {
	max-width: 1180px;
}

.garta-blog-archive-row .row.limit-width,
.garta-blog-cta-row .row.limit-width,
.garta-related-row .row.limit-width,
.garta-services-archive-row .row.limit-width {
	max-width: 1380px;
}

.garta-blog-hero,
.garta-article-hero {
	overflow: hidden;
}

.garta-blog-hero .background-inner,
.garta-article-hero .background-inner {
	background-repeat:   no-repeat;
	background-position: center center;
	background-size:     cover;
}

.garta-blog-hero__eyebrow,
.garta-article-hero__meta,
.garta-story-hero__meta {
	display:         flex;
	justify-content: center;
	align-items:     center;
	flex-wrap:       wrap;
	gap:             10px 14px;
	margin:          0 0 18px;
	font-size:       11px;
	font-weight:     600;
	letter-spacing:  0.16em;
	text-transform:  uppercase;
	color:           rgba(255, 255, 255, 0.82);
}

.garta-blog-hero__eyebrow {
	margin:         0 0 20px !important;
	font-family:    'TTTravels-Regular', sans-serif;
	font-size:      14px;
	letter-spacing: 0.2em;
}

.garta-blog-hero__title,
.garta-article-hero__title,
.garta-story-hero__title {
	margin:      0;
	font-family: 'TTTravels-Regular', sans-serif;
	font-size:   clamp(42px, 6vw, 72px);
	line-height: 0.98;
	color:       #fff;
	text-wrap:   balance;
}

.garta-blog-hero__subtitle,
.garta-article-hero__excerpt,
.garta-story-hero__excerpt {
	max-width:   680px;
	margin:      28px auto 0 !important;
	font-family: 'TTTravels-Regular', sans-serif;
	font-size:   clamp(17px, 2.1vw, 19px);
	font-weight: 400 !important;
	line-height: 1.6;
	color:       rgba(255, 255, 255, 0.84);
	text-wrap:   balance;
}

.garta-article-hero__term,
.garta-story-hero__center {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-height:      34px;
	padding:         8px 16px;
	border:          1px solid rgba(255, 255, 255, 0.24);
	border-radius:   999px;
	background:      rgba(255, 255, 255, 0.08);
	color:           #fff;
	text-decoration: none;
	transition:      background 0.22s ease, border-color 0.22s ease;
}

.garta-article-hero__term:hover {
	background:   rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.38);
}

.garta-blog-archive__head,
.garta-services-archive__head {
	display:         flex;
	justify-content: space-between;
	align-items:     end;
	gap:             18px 24px;
	margin-bottom:   34px;
}

.garta-section-heading {
	max-width: 760px;
}

.garta-blog-archive__count,
.garta-services-archive__count {
	margin:      0;
	font-family: 'Inter Tight', sans-serif;
	font-size:   14px;
	line-height: 1.5;
	color:       rgba(17, 37, 31, 0.54);
	white-space: nowrap;
}

.garta-blog-filters {
	display:       flex;
	flex-wrap:     wrap;
	gap:           10px;
	margin-bottom: 28px;
}

.garta-blog-filter {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-height:      42px;
	padding:         10px 18px;
	border-radius:   999px;
	border:          1px solid rgba(92, 131, 116, 0.24);
	background:      #fff;
	font-family:     'TTTravels-Regular', sans-serif;
	color:           rgba(17, 37, 31, 0.72);
	font-size:       13px;
	font-weight:     600;
	text-decoration: none;
	transition:      background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.garta-blog-filter:hover,
.garta-blog-filter.is-active {
	background:   rgba(0, 123, 124, 0.08);
	color:        var(--garta-teal);
	border-color: rgba(0, 123, 124, 0.24);
}

.garta-blog-grid,
.garta-related-posts__grid,
.garta-services-grid {
	display:               grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap:                   32px 28px;
}

.garta-related-row {
	border-top: 1px solid rgba(92, 131, 116, 0.14);
	background: #fff;
}

.garta-services-archive-row {
	border-top: 1px solid rgba(92, 131, 116, 0.14);
	background: #fff;
}

.garta-related-posts__head {
	max-width:     760px;
	margin-bottom: 32px;
}

.garta-blog-card,
.garta-service-card {
	display:        flex;
	flex-direction: column;
	min-height:     100%;
	border-radius:  24px;
	background:     #fff;
	border:         1px solid rgba(92, 131, 116, 0.12);
	box-shadow:     0 14px 36px rgba(17, 37, 31, 0.05);
	overflow:       hidden;
	transition:     transform 0.28s ease, box-shadow 0.28s ease;
}

.garta-blog-card:hover,
.garta-service-card:hover {
	transform:  translateY(-5px);
	box-shadow: 0 22px 56px rgba(17, 37, 31, 0.10);
}

.garta-blog-card__media,
.garta-service-card__media {
	display:         block;
	aspect-ratio:    1.18 / 1;
	background:      linear-gradient(180deg, rgba(17, 37, 31, 0.10), rgba(17, 37, 31, 0.24));
	overflow:        hidden;
}

.garta-blog-card__image,
.garta-blog-card__placeholder,
.garta-service-card__image,
.garta-service-card__placeholder {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

.garta-blog-card__placeholder,
.garta-service-card__placeholder {
	background: linear-gradient(135deg, rgba(147, 177, 166, 0.32), rgba(92, 131, 116, 0.14));
}

.garta-blog-card__body,
.garta-service-card__body {
	display:        flex;
	flex-direction: column;
	flex:           1;
	padding:        24px 24px 26px;
}

.garta-blog-card__meta {
	display:         flex;
	align-items:     center;
	flex-wrap:       wrap;
	gap:             8px 14px;
	margin-bottom:   14px;
	font-family:     'Inter Tight', sans-serif;
	font-size:       11px;
	font-weight:     600;
	letter-spacing:  0.12em;
	text-transform:  uppercase;
	color:           rgba(17, 37, 31, 0.42);
}

.garta-blog-card__term {
	color:           var(--garta-teal);
	text-decoration: none;
}

.garta-blog-card__title {
	margin:      0 0 12px;
	font-family: 'TTTravels-Bold', sans-serif;
	font-size:   23px;
	line-height: 1.18;
}

.garta-blog-card__title a,
.garta-service-card__title a {
	color:           var(--garta-dark);
	text-decoration: none;
}

.garta-blog-card__title a:hover,
.garta-service-card__title a:hover {
	color: var(--garta-teal);
}

.garta-blog-card__excerpt,
.garta-service-card__excerpt {
	margin:      0 0 22px;
	font-family: 'Inter Tight', sans-serif;
	font-size:   15px;
	line-height: 1.68;
	color:       rgba(17, 37, 31, 0.62);
	text-wrap:   pretty;
}

.garta-blog-card__link,
.garta-service-card__link {
	display:           inline-flex !important;
	align-items:       center;
	justify-content:   center;
	width:             100%;
	min-height:        54px;
	margin-top:        auto;
	padding:           14px 22px !important;
	border-radius:     16px;
	font-family:       'TTTravels-Regular', sans-serif !important;
	text-align:        center;
	white-space:       nowrap;
	transform:         none !important;
	-webkit-transform: none !important;
}

/* Card button: teal (brand) hover fill instead of Uncode's grey #ddd.
   Specificity (0,6,0) beats Uncode native
   .style-light .btn-color-uydo.btn-text-skin.btn-outline:hover (0,5,0). */
.garta-blog-card__link.btn.btn-color-uydo.btn-text-skin.btn-outline:hover,
.garta-blog-card__link.btn.btn-color-uydo.btn-text-skin.btn-outline:focus,
.garta-service-card__link.btn.btn-color-uydo.btn-text-skin.btn-outline:hover,
.garta-service-card__link.btn.btn-color-uydo.btn-text-skin.btn-outline:focus {
	background:   var(--garta-teal) !important;
	border-color: var(--garta-teal) !important;
	color:        #fff !important;
}

/* Центри на головній: картки вирівняні по лівому краю
   (секція «Наші центри» центрована, тож скидаємо успадкований center). */
.garta-centers-grid,
.garta-centers-grid .garta-service-card,
.garta-centers-grid .garta-service-card__body,
.garta-centers-grid .garta-service-card__title,
.garta-centers-grid .garta-service-card__excerpt {
	text-align: left;
}

.garta-service-card__title {
	margin:      0 0 14px;
	font-family: 'TTTravels-Bold', sans-serif;
	font-size:   25px;
	line-height: 1.14;
}

.garta-service-card__excerpt {
	margin-bottom: 24px;
}

.garta-blog-card--compact .garta-blog-card__media {
	aspect-ratio: 1.3 / 1;
}

.garta-blog-card--compact .garta-blog-card__title {
	font-size: 20px;
}

.garta-blog-card--compact .garta-blog-card__excerpt {
	margin-bottom: 18px;
}

.garta-blog-pagination {
	display:         flex;
	justify-content: center;
	flex-wrap:       wrap;
	gap:             14px;
	margin-top:      38px;
}

.garta-blog-pagination__item {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           52px;
	height:          52px;
	border:          1px solid rgba(92, 131, 116, 0.24);
	border-radius:   14px;
	background:      #fff;
	font-family:     'TTTravels-Regular', sans-serif;
	color:           var(--garta-dark);
	font-size:       14px;
	font-weight:     600;
	text-decoration: none;
	transition:      background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.garta-blog-pagination__item:hover,
.garta-blog-pagination__item.is-active {
	background:   var(--garta-teal);
	color:        #fff;
	border-color: var(--garta-teal);
	transform:    translateY(-1px);
}

.garta-blog-empty {
	padding:       44px 36px;
	border:        1px solid rgba(92, 131, 116, 0.16);
	border-radius: 24px;
	background:    linear-gradient(180deg, rgba(247, 247, 247, 0.88), rgba(255, 255, 255, 1));
	text-align:    center;
}

.garta-services-empty {
	padding:       44px 36px;
	border:        1px solid rgba(92, 131, 116, 0.16);
	border-radius: 24px;
	background:    linear-gradient(180deg, rgba(247, 247, 247, 0.88), rgba(255, 255, 255, 1));
	text-align:    center;
}

.garta-blog-empty h3,
.garta-services-empty h3 {
	margin:      0 0 10px;
	font-family: 'TTTravels-Bold', sans-serif;
	font-size:   24px;
	color:       var(--garta-dark);
}

.garta-blog-empty p,
.garta-services-empty p {
	max-width:  620px;
	margin:     0 auto;
	font-family: 'Inter Tight', sans-serif;
	font-size:  15px;
	line-height: 1.72;
	color:      rgba(17, 37, 31, 0.58);
}

.garta-blog-cta {
	display:     block;
	padding:     0;
	background:  transparent;
}

.garta-blog-cta__content {
	max-width:     720px;
	margin-bottom: 34px;
}

.garta-blog-cta__text {
	max-width:   620px;
	margin:      18px 0 0;
	font-family: 'Inter Tight', sans-serif;
	font-size:   18px;
	line-height: 1.62;
	color:       rgba(17, 37, 31, 0.62);
	text-wrap:   balance;
}

.garta-blog-cta-row {
	border-top: 1px solid rgba(92, 131, 116, 0.14);
	background:
		radial-gradient(circle at top right, rgba(147, 177, 166, 0.14), transparent 26%),
		linear-gradient(180deg, rgba(239, 248, 245, 0.98), rgba(248, 252, 251, 1));
}

.garta-blog-cta__form .wpcf7 {
	width: 100%;
}

.garta-blog-cta__form-shell {
	padding:       30px 32px 32px;
	border:        1px solid rgba(92, 131, 116, 0.14);
	border-radius: 28px;
	background:    rgba(255, 255, 255, 0.96);
	box-shadow:    0 18px 48px rgba(17, 37, 31, 0.06);
}

.garta-blog-cta__form .wpcf7 form {
	display:     block;
	margin:      0;
}

.garta-blog-cta__form .wpcf7 form > p,
.garta-blog-cta__form .wpcf7-inline-wrapper {
	margin: 0;
}

.garta-blog-cta__form .wpcf7-inline-wrapper {
	display:               grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) 240px;
	gap:                   18px;
	align-items:           start;
}

.garta-blog-cta__form .wpcf7-inline-field,
.garta-blog-cta__form .wpcf7-inline-submit,
.garta-blog-cta__form .wpcf7 form > p:has(input[type="submit"]) {
	display: block;
	width:   auto;
	margin:  0;
	padding: 0;
	min-width: 0;
}

.garta-blog-cta__form .wpcf7-inline-field {
	display:          grid;
	grid-template-rows: auto auto;
	row-gap:          8px;
	align-content:    start;
}

.garta-blog-cta__form .wpcf7-inline-submit,
.garta-blog-cta__form .wpcf7 form > p:has(input[type="submit"]) {
	display:          grid;
	grid-template-rows: 13px auto;
	row-gap:          8px;
	align-content:    start;
}

.garta-blog-cta__form .wpcf7-inline-submit::before,
.garta-blog-cta__form .wpcf7 form > p:has(input[type="submit"])::before {
	content:    "";
	display:    block;
	min-height: 13px;
}

.garta-blog-cta__form .wpcf7-form-control-wrap {
	display:        flex;
	flex-direction: column;
	gap:            8px;
	width:          100%;
	min-width:      0;
}

.garta-blog-cta__form label + br {
	display: none;
}

.garta-blog-cta__form label {
	display:        block;
	gap:            0;
	margin:         0 !important;
	font-family:    'Inter Tight', sans-serif;
	font-size:      11px;
	font-weight:    600;
	line-height:    1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          rgba(17, 37, 31, 0.44);
}

.garta-blog-cta__form .wpcf7-inline-wrapper label + br + span input,
.garta-blog-cta__form .wpcf7-inline-wrapper label + br + span select {
	margin-top: 0 !important;
}

.garta-blog-cta__form input:not([type="submit"]),
.garta-blog-cta__form input[type="email"],
.garta-blog-cta__form input[type="tel"],
.garta-blog-cta__form input[type="text"],
.garta-blog-cta__form textarea {
	width:            100%;
	min-height:       64px;
	padding:          18px 20px;
	border:           1.5px solid rgba(92, 131, 116, 0.24);
	border-radius:    18px;
	background:       #fff;
	font-family:      'Inter Tight', sans-serif;
	color:            var(--garta-dark);
	font-size:        15px;
	line-height:      1.5;
	box-sizing:       border-box;
	transition:       border-color 0.20s ease, box-shadow 0.20s ease, background 0.20s ease;
}

.garta-blog-cta__form textarea {
	min-height: 136px;
	resize:     vertical;
}

.garta-blog-cta__form input:focus,
.garta-blog-cta__form textarea:focus {
	outline:      none;
	border-color: var(--garta-teal);
	box-shadow:   0 0 0 4px rgba(0, 123, 124, 0.08);
}

.garta-blog-cta__form .wpcf7-not-valid {
	border-color: rgba(0, 123, 124, 0.5);
	box-shadow:   0 0 0 4px rgba(0, 123, 124, 0.08);
}

.garta-blog-cta__form .wpcf7 form > p:has(textarea) {
	grid-column: 1 / -1;
}

.garta-blog-cta__form input[type="submit"],
.garta-blog-cta__fallback .btn {
	display:           inline-flex !important;
	align-items:       center;
	justify-content:   center;
	width:             100%;
	min-height:        64px;
	padding:           16px 24px !important;
	border:            none;
	border-radius:     18px;
	background:        var(--garta-teal) !important;
	font-family:       'TTTravels-Regular', sans-serif !important;
	color:             #fff !important;
	font-size:         14px !important;
	font-weight:       600 !important;
	letter-spacing:    0.08em;
	text-transform:    uppercase;
	box-shadow:        0 14px 32px rgba(0, 123, 124, 0.16);
	cursor:            pointer;
	transform:         none !important;
	-webkit-transform: none !important;
}

.garta-blog-cta__form .wpcf7-inline-submit input[type="submit"],
.garta-blog-cta__form .wpcf7 form > p:has(input[type="submit"]) input[type="submit"] {
	margin-top: 0 !important;
}

.garta-blog-cta__form .wpcf7-spinner {
	align-self:  center;
	margin:      12px 0 0;
}

.garta-blog-cta__form .wpcf7-not-valid-tip,
.garta-blog-cta__form .wpcf7-response-output {
	grid-column:    1 / -1;
	margin:         0 !important;
	font-family:    'Inter Tight', sans-serif;
	font-size:      14px;
	line-height:    1.45;
	border-radius:  12px;
}

.garta-blog-cta__form .wpcf7-not-valid-tip {
	display:    block;
	padding:    0 4px 2px;
	color:      rgba(0, 123, 124, 0.9);
	text-wrap:  pretty;
}

.garta-blog-cta__form .wpcf7-response-output {
	margin-top: 6px !important;
	padding:    14px 18px !important;
	background: rgba(0, 123, 124, 0.06);
}

.garta-article-content {
	font-family: 'Inter Tight', sans-serif;
	font-size:   18px;
	line-height: 1.84;
	color:       rgba(17, 37, 31, 0.82);
}

.garta-article-shell {
	max-width: 920px;
	margin:    0 auto;
}

.garta-article-content > :first-child {
	margin-top: 0 !important;
}

.garta-article-content > :last-child {
	margin-bottom: 0 !important;
}

.garta-article-content h2,
.garta-article-content h3,
.garta-article-content h4 {
	margin:      1.65em 0 0.62em;
	font-family: 'TTTravels-Bold', sans-serif;
	line-height: 1.08;
	color:       var(--garta-dark);
	text-wrap:   balance;
}

.garta-article-content h2 {
	font-size: clamp(30px, 3.2vw, 42px);
}

.garta-article-content h3 {
	font-size: clamp(24px, 2.4vw, 32px);
}

.garta-article-content h4 {
	font-size: clamp(20px, 2vw, 24px);
}

.garta-article-content p,
.garta-article-content ul,
.garta-article-content ol,
.garta-article-content blockquote {
	margin: 0 0 1.1em;
}

.garta-article-content p:first-of-type {
	font-size: 20px;
	line-height: 1.72;
	color: rgba(17, 37, 31, 0.76);
}

.garta-article-content ul,
.garta-article-content ol {
	padding-left: 1.25em;
}

.garta-article-content li + li {
	margin-top: 0.45em;
}

.garta-article-content ul li::marker,
.garta-article-content ol li::marker {
	color: var(--garta-teal);
}

.garta-article-content a {
	color:           var(--garta-teal);
	text-decoration: none;
}

.garta-article-content a:hover {
	text-decoration: underline;
}

.garta-article-content blockquote {
	padding:       28px 30px;
	border-left:   4px solid var(--garta-teal);
	border-radius: 0 20px 20px 0;
	background:    linear-gradient(180deg, rgba(0, 123, 124, 0.07), rgba(0, 123, 124, 0.03));
	color:         rgba(17, 37, 31, 0.72);
	font-size:     20px;
	line-height:   1.6;
}

.garta-article-content blockquote > :last-child {
	margin-bottom: 0;
}

.garta-article-content figure,
.garta-article-content .wp-block-image {
	margin: 34px 0 38px;
}

.garta-article-content figcaption {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.55;
	color: rgba(17, 37, 31, 0.5);
}

.garta-article-content img {
	display:       block;
	max-width:     100%;
	height:        auto;
	border-radius: 20px;
	box-shadow:    0 20px 42px rgba(17, 37, 31, 0.08);
}

.garta-article-content table {
	width:           100%;
	border-collapse: collapse;
	margin:          1.8em 0;
	overflow:        hidden;
	border-radius:   18px;
	background:      rgba(255, 255, 255, 0.98);
	box-shadow:      0 16px 34px rgba(17, 37, 31, 0.05);
}

.garta-article-content th,
.garta-article-content td {
	padding:       14px 16px;
	border-bottom: 1px solid rgba(92, 131, 116, 0.16);
	text-align:    left;
}

.garta-article-content th {
	font-size:      12px;
	font-weight:    700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          rgba(17, 37, 31, 0.54);
}

.garta-article-content hr {
	margin:     38px 0;
	border:     0;
	border-top: 1px solid rgba(92, 131, 116, 0.18);
}

.garta-article-content__footer {
	display:       flex;
	flex-wrap:     wrap;
	gap:           10px 20px;
	margin-top:    42px;
	padding-top:   22px;
	border-top:    1px solid var(--garta-line);
	font-size:     13px;
	line-height:   1.6;
	color:         rgba(17, 37, 31, 0.46);
}

.garta-single-gallery {
	margin-top: 0;
}

.garta-single-gallery__grid {
	display:               grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap:                   24px;
}

.garta-single-gallery__item {
	position:        relative;
	display:         block;
	aspect-ratio:    1 / 1;
	overflow:        hidden;
	background:      rgba(17, 37, 31, 0.06);
	text-decoration: none;
}

.garta-single-gallery__item::after {
	content:        "";
	position:       absolute;
	inset:          0;
	background:     linear-gradient(180deg, rgba(17, 37, 31, 0) 0%, rgba(17, 37, 31, 0.14) 100%);
	opacity:        0;
	transition:     opacity 0.22s ease;
	pointer-events: none;
}

.garta-single-gallery__item:hover::after,
.garta-single-gallery__item:focus-visible::after {
	opacity: 1;
}

.garta-single-gallery__image {
	display:    block;
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform 0.28s ease;
}

.garta-single-gallery__item:hover .garta-single-gallery__image,
.garta-single-gallery__item:focus-visible .garta-single-gallery__image {
	transform: scale(1.04);
}

@media (max-width: 1199px) {
	.garta-blog-grid,
	.garta-related-posts__grid,
	.garta-services-grid,
	.garta-single-gallery__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.garta-blog-cta__form .wpcf7-inline-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.garta-blog-cta__form .wpcf7-inline-submit,
	.garta-blog-cta__form .wpcf7 form > p:has(input[type="submit"]) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	.garta-client-stories__head {
		margin-bottom: 40px;
	}

	.garta-client-story {
		grid-template-columns: 1fr;
		gap:                   28px;
	}

	.garta-client-story__content {
		max-width: 100%;
		text-align: left;
	}

	.garta-client-story__title {
		font-size: clamp(30px, 8vw, 40px);
	}

	.garta-client-story__text {
		margin-bottom: 24px;
	}

	.garta-client-story__text p {
		font-size: 17px;
		line-height: 1.68;
	}

	.garta-center-page-header .uncode_text_column p {
		max-width: 320px;
	}

	.garta-blog-archive__head,
	.garta-services-archive__head {
		flex-direction: column;
		align-items:    flex-start;
		margin-bottom:  26px;
	}

	.garta-blog-grid,
	.garta-related-posts__grid,
	.garta-services-grid,
	.garta-single-gallery__grid {
		grid-template-columns: 1fr;
		gap:                   20px;
	}

	.garta-blog-hero__title,
	.garta-article-hero__title,
	.garta-story-hero__title {
		font-size: clamp(32px, 11vw, 48px);
	}

	.garta-blog-hero__subtitle,
	.garta-article-hero__excerpt,
	.garta-story-hero__excerpt {
		font-size: 15px;
		line-height: 1.58;
	}

	.garta-article-content__footer {
		margin-top: 34px;
		padding-top: 18px;
	}

	.garta-blog-cta__form-shell {
		padding: 22px 20px 24px;
	}

	.garta-blog-cta-row .row.limit-width {
		max-width: 100%;
	}

	.garta-blog-cta__form .wpcf7-inline-wrapper {
		grid-template-columns: 1fr;
	}

	.garta-blog-cta__form .wpcf7-inline-submit,
	.garta-blog-cta__form .wpcf7 form > p:has(input[type="submit"]) {
		gap: 8px;
	}

	.garta-blog-cta__form .wpcf7-inline-submit::before,
	.garta-blog-cta__form .wpcf7 form > p:has(input[type="submit"])::before {
		display: none;
	}

	.garta-article-content {
		font-size:   16px;
		line-height: 1.82;
	}

	.garta-article-content p:first-of-type {
		font-size: 18px;
	}
}

@media (max-width: 569px) {
	.garta-client-story__subtitle {
		font-size: 11px;
	}

	.garta-client-story__text p {
		font-size: 16px;
	}

	.garta-client-stories .garta-client-story__btn .custom-link.btn,
	.garta-client-story__btn .btn {
		width:     auto !important;
		min-width: 0;
	}

	.garta-blog-card__body,
	.garta-service-card__body {
		padding: 18px 18px 20px;
	}

	.garta-blog-card__title,
	.garta-service-card__title {
		font-size: 20px;
	}

	.garta-section-eyebrow {
		font-size: 11px;
	}

	.garta-blog-card__link,
	.garta-service-card__link,
	.garta-blog-cta__form input[type="submit"],
	.garta-blog-cta__fallback .btn,
	.garta-blog-filter,
	.garta-blog-pagination__item {
		transform:         none !important;
		-webkit-transform: none !important;
	}

	.garta-blog-card__link,
	.garta-service-card__link {
		padding: 14px 18px !important;
		white-space: normal;
	}

	.garta-blog-pagination {
		gap: 10px;
	}

	.garta-blog-pagination__item {
		width:  44px;
		height: 44px;
	}
}

/* =============================================
   SCROLL REVEAL — плавна поява блоків/карток при скролі.
   JS (garta-ui.js) додає .is-visible, коли елемент у в'юпорті.
   Вимикається для користувачів із prefers-reduced-motion.
   ============================================= */
@media (prefers-reduced-motion: no-preference) {
	.garta-reveal {
		opacity:     0;
		transform:   translateY(28px);
		transition:  opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		             transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
		will-change: opacity, transform;
	}
	.garta-reveal.is-visible {
		opacity:   1;
		transform: none;
	}
}

/* =============================================
   ФУТЕР — кнопка «Записатися» (відкриває модалку запису).
   Біла обводка на зеленому фоні; бірюзовий ховер; full-width на мобільному.
   ============================================= */
.garta-footer-cta {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	margin-top:      22px;
	padding:         14px 34px;
	border:          1px solid rgba(255, 255, 255, 0.55);
	border-radius:   0;
	background:      transparent;
	color:           #fff !important;
	font-family:     'TTTravels-Regular', sans-serif;
	font-size:       16px;
	line-height:     1;
	letter-spacing:  0.01em;
	text-decoration: none !important;
	transition:      background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.garta-footer-cta:hover,
.garta-footer-cta:focus {
	background:   #fff;
	border-color: #fff;
	color:        var(--garta-dark) !important;
}

@media (max-width: 767px) {
	.garta-footer-cta {
		display:    flex;
		width:      100%;
		margin-top: 18px;
		padding:    16px 24px;
	}
}

/* =============================================
   ПАРТНЕРИ — без сірого боксу; рівні відступи як в інших секціях.
   ============================================= */
.garta-partners-row .vc_custom_heading_wrap,
.garta-about-partners .vc_custom_heading_wrap {
	margin-bottom: 38px;
}

/* =============================================
   ФУТЕР — рівномірне центрування вмісту колонок,
   щоб проміжки між колонками виглядали однаковими.
   ============================================= */
#contacts .uncont { text-align: center; }
#contacts .uncont p { text-align: left; text-wrap: balance; }   /* слоган — ліворуч, рівні рядки */
#contacts .garta-footer-cta { margin-left: auto; margin-right: auto; }
#contacts .icon-box { justify-content: center; }      /* соцмережі по центру */
#contacts .single-image,
#contacts .single-image img { margin-left: auto; margin-right: auto; }

/* =============================================
   HERO-кнопка послуги (напр. «3Д-тур») — по центру внизу hero.
   Редагується в метабоксі на сторінці послуги (поле «Hero-кнопка»).
   ============================================= */
.garta-service-page-header { position: relative; }

.garta-hero-tour-btn {
	position:        absolute;
	left:            50%;
	bottom:          100px;
	transform:       translateX(-50%);
	z-index:         6;
	display:         inline-flex;
	align-items:     center;
	gap:             10px;
	padding:         14px 34px;                       /* same sizes as footer CTA */
	border:          1px solid rgba(255, 255, 255, 0.55);
	border-radius:   0;                               /* no rounding — like footer */
	background:      transparent;
	color:           #fff !important;
	font-family:     'TTTravels-Regular', sans-serif;
	font-size:       16px;
	line-height:     1;
	letter-spacing:  0.01em;
	text-decoration: none !important;
	white-space:     nowrap;
	transition:      background 0.3s ease, border-color 0.3s ease, color 0.3s ease,
	                 transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}
.garta-hero-tour-btn:hover,
.garta-hero-tour-btn:focus {
	background:    #fff;
	border-color:  #fff;
	color:         var(--garta-dark) !important;       /* white fill, dark text — like footer; no lift */
}
.garta-hero-tour-btn svg { flex-shrink: 0; }

/* Поява (fade + підйом) на завантаженні — той самий ефект, що в заголовків,
   зі збереженням горизонтального центрування translateX(-50%).
   Через CSS-анімацію, бо кнопка над згином і IntersectionObserver не встигає. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes garta-hero-tour-in {
		from { opacity: 0; transform: translateX(-50%) translateY(22px); }
		to   { opacity: 1; transform: translateX(-50%) translateY(0); }
	}
	.garta-hero-tour-btn {
		animation: garta-hero-tour-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.95s both;
	}
}

@media (max-width: 767px) {
	.garta-hero-tour-btn { bottom: 80px; padding: 14px 28px; font-size: 15px; }
}

/* Прибираємо Uncode-стрілку scroll-down на hero (не потрібна на сайті) */
.header-scrolldown { display: none !important; }