/*
Theme Name: ttehs-theme
Theme URI: https://example.com
Author: DenysYA
Description: Кастомна тема WordPress з нуля
Version: 1.0
*/

body {
  margin: 0;
  padding: 0;
  font-family: 'Garet', 'Inter', sans-serif;
  color: #222;
  line-height: 1.6;
}

html {
  scroll-behavior: smooth;
}


h1, h2, h3, h4, h5 {
  font-family: 'Garet', sans-serif;
  font-weight: 700;
}

p, li, a, span {
  font-family: 'Garet', sans-serif;
  font-weight: 400;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* --- Base --- */
.container {
  width: calc(100% - 90px);
  margin: 0 auto;
}

h1 {
  font-size: clamp(28px, 2vw + 10px, 48px);
}

/* --- Mobile --- */
@media (max-width: 768px) {
  h1 {
    font-size: 22px;
  }
}


/* ======================================= */

/* HEADER */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  z-index: 1000;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: background 0.4s ease, box-shadow 0.3s ease, transform 0.3s ease;
}


@media (max-width: 1024px) {
  .site-header {
    position: sticky;
    top: 0;
    background: #4C7ED5;
    box-shadow: none;
  }
}


body.admin-bar .site-header.is-stuck { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header.is-stuck { top: 46px; }
}

@media (max-width: 1024px) {
  .site-header.is-stuck { background: #4C7ED5; }
}

/* Перемикач мов */
.site-header.is-stuck .lang-switcher {
  position: static !important;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  margin-left: 16px;
}

/* Меню стискається та віддає місце перемикачу */
.site-header.is-stuck .main-nav {
  min-width: 0;
  margin-right: 0;
  padding: 0 27px;
  height: 80px;
  border-radius: 40px;
}

.site-header.is-stuck .main-menu-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

/* Тумблер мов */
.site-header.is-stuck .lang-toggle {
  width: auto;
  height: 40px;
  padding: 6px 10px;
  border-radius: 28px;
}
.site-header.is-stuck .lang-toggle a {
  font-size: 20px;
  padding: 6px 10px;
}

/* Планшети/мобілка: у прилиплому стані лишається бургер */
@media (max-width: 1024px) {
  .site-header.is-stuck {
    justify-content: space-between;
    height: 80px;
    padding: 0;
  }
  .site-header.is-stuck .main-nav { display: none; }
  .site-header.is-stuck .lang-switcher { margin-left: 0; }
}

/* === STICKY/FIXED режим — тільки десктоп ≥ 1025px === */
@media (min-width: 1025px) {

  .site-header.is-stuck {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 40px;
  }

  .site-header.is-stuck .lang-switcher {
    position: static !important;
    top: auto;
    right: auto;
    flex: 0 0 auto;
    margin-left: 16px;
  }

  .site-header.is-stuck .main-nav {
    min-width: 0;
    margin-right: 0;
    padding: 0 27px;
    height: 80px;
    border-radius: 40px;
  }

  .site-header.is-stuck .main-menu-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
  }

  .site-header.is-stuck .lang-toggle {
    width: auto;
    height: 40px;
    padding: 6px 10px;
    border-radius: 28px;
  }

  .site-header.is-stuck .lang-toggle a {
    font-size: 20px;
    padding: 6px 10px;
  }

}


/* === MENU === */

.main-nav {
  background-color: #F9F6F5;
  height: 80px;
  border-radius: 40px;
  padding: 0 47px;
  margin-right: 146px;
  display: flex;
  align-items: center;
}

.main-nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: #23B8E4;
  text-decoration: none;
  font-size: 25px;
  font-weight: 400;
  transition: opacity 0.3s;
  text-transform: uppercase;
}

.main-nav a:hover {
  opacity: 0.6;
}

@media (max-width: 1024px) {
  .main-nav {
    margin-right: 60px;
    padding: 0 40px;
  }
}

@media (max-width: 768px) {
  .main-nav {
    margin-right: 30px;
    padding: 0 25px;
    height: 70px;
    border-radius: 30px;
  }
}

/* фон над hero на мобілці */
@media (max-width: 768px) {
  .hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 290px;
    background-color: #4C7ED5;
  }

  .hero__content {
    position: relative;
    z-index: 2;
  }
}


/* === LANGUAGE SWITCHER === */

.lang-switcher {
  position: absolute;
  top: 115px;
  right: 146px;
  z-index: 30;
}

.lang-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 181px;
  height: 64px;
  background: #F9F6F5;
  border-radius: 40px;
  padding: 8px 10px;
  box-shadow: 0 0 25px rgba(5, 157, 200, 0.48);
  overflow: hidden;
}

.lang-toggle a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-size: 25px;
  font-weight: 400;
  color: #23B8E4 !important;
  line-height: 1;
  border-radius: 40px;
  transition: all 0.3s ease;
  padding: 20px 28px 21px;
}

.lang-toggle a.active {
  background-color: #F9F6F5;
  color: #23B8E4;
  box-shadow: 2px 4px 25.5px rgba(5, 157, 200, 0.48);
}

.lang-toggle a:hover:not(.active) {
  opacity: 0.7;
}


/* === ACTIVE MENU ITEM === */

.main-menu-list a.active {
  background-color: #F9F6F5;
  color: #23B8E4;
  border-radius: 40px;
  padding: 10px 25px;
  box-shadow: 2px 4px 25.5px rgba(5, 157, 200, 0.48);
  transition: all 0.3s ease;
}

.main-menu-list li a:hover {
  opacity: 0.8;
}

.main-menu-list li a {
  display: inline-block;
  padding: 10px 10px;
  border-radius: 40px;
  transition: all 0.3s ease;
}


/* === BURGER MENU MOBILE === */

.burger {
  display: none;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  background-image: url('/wp-content/themes/ttehs-theme/assets/img/burger.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 33px 33px;
  box-shadow: 0 0 25px rgba(5, 157, 200, 0.48);
  margin-right: 13px;
  cursor: pointer;
  z-index: 31;
  order: 2;
}

.burger.is-open {
  background-image: url('/wp-content/themes/ttehs-theme/assets/img/close-menu.svg');
  box-shadow: 0 0 25px rgba(5, 157, 200, 0.48);
}

/* показуємо бургер на мобілках/планшетах */
@media (max-width: 1024px) {
  .burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .main-nav {
    display: none;
  }
}

/* ховаємо бургер на десктопі */
@media (min-width: 1025px) {
  .burger {
    display: none;
  }
}


/* == Мобільне меню == */

@media (max-width: 1024px) {

  .mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    background: #4A82D5;
    border: none;
    border-radius: 0;
    z-index: 40;
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    box-shadow: none;
    transition: transform .3s ease, opacity .3s ease;
  }

  .mobile-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-nav__inner {
    margin: 20px 27px 20px;
    padding: 16px 20px;
    max-height: calc(100vh - 27px - 32px - 32px);
    overflow: auto;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 8px;
  }

  .mobile-menu-list li {
    list-style: none;
    z-index: 1000;
  }

.mobile-menu-list a {
    display: block;
    padding: 10px 8px;
    border-radius: 53px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid transparent;
    text-align: center;
    box-shadow: none;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }

  .mobile-menu-list a:hover {
    border-color: #FFFFFF;
    opacity: 0.9;
  }

  .mobile-menu-list a.is-active {
    border: 1px solid #FFFFFF;
    border-radius: 53px;
  }
  
  .mobile-lang {
    display: none;
  }

  .mobile-lang .lang-toggle {
    display: flex;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 53px;
    border: 1px solid #FFFFFF;
    background: transparent;
  }

  .mobile-lang .lang-toggle a {
    font-size: 14px;
    color: #FFFFFF !important;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 53px;
    border: 1px solid transparent;
    transition: background .2s ease, border-color .2s ease, opacity .2s ease;
  }

  .mobile-lang .lang-toggle a.active {
    border-color: #FFFFFF;
  }

  .mobile-lang .lang-toggle a:hover {
    opacity: 0.8;
  }

  .mobile-menu-list .current-menu-item > a,
  .mobile-menu-list .current_page_item > a,
  .mobile-menu-list .current_page_ancestor > a,
  .mobile-menu-list a.active {
    border: 1px solid #FFFFFF;
    border-radius: 53px;

  }
}


/* === Контейнер для бургеру і перемикача на мобілці === */
@media (max-width: 1024px) {

  .site-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 1000;
    background: #4C7ED5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: -3px;
  }

  /* Перемикач мов */
  .lang-switcher {
    position: static;
  }

  .lang-toggle {
    width: 100px;
    height: 45px;
    background: none;
    box-shadow: none;
    padding: 26px;
    border-radius: 53px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .lang-toggle a {
    font-size: 16px;
    font-weight: 400;
    color: #ffffff !important;
    background: none;
    border: none;
    padding: 10px 10px;
    border-radius: 53px;
    transition: all 0.3s ease;
  }

  .lang-toggle a.active {
    border: 1px solid #ffffff;
    color: #ffffff !important;
    background: none;
    box-shadow: none;
  }

  .lang-toggle a:hover {
    opacity: 0.8;
  }

  .lang-switcher {
    top: auto;
    right: auto;
  }

  .main-nav {
    display: none;
  }

  .hero picture,
  .hero__bg {
    transform: translateY(10px);
  }
}


/* ↓ 1600px */

@media (max-width: 1600px) {
  .site-header {
    left: -82px;
  }

  .main-nav {
    height: 60px !important;
    padding: 0 30px;
    margin-right: 80px;
  }

  .main-nav a {
    font-size: 18px;
  }

  .lang-switcher {
    top: 100px;
    right: 80px;
  }

  .lang-toggle {
    width: 110px;
    height: 44px;
  }

  .lang-toggle a {
    font-size: 18px;
    padding: 13px 15px;
  }

    .hero picture, .hero__bg {
    transform: translateY(-29px) !important;
  }
}

/* ↓ 1440px */

@media (max-width: 1440px) {
  .site-header {
    left: -66px;
  }

  .main-nav {
    height: 60px !important;
    padding: 0 30px;
    margin-right: 80px;
  }

  .main-nav a {
    font-size: 18px;
  }

  .lang-switcher {
    top: 100px;
    right: 80px;
  }

  .lang-toggle {
    width: 110px;
    height: 44px;
  }

  .lang-toggle a {
    font-size: 18px;
    padding: 13px 15px;
  }

  .hero picture,
  .hero__bg {
    transform: translateY(-24px) !important;
  }
}

/* ↓ 1280px */

@media (max-width: 1280px) {
  .main-nav {
    height: 60px !important;
    padding: 0 30px;
    margin-right: 80px;
  }

  .main-nav a {
    font-size: 18px;
  }

  .lang-switcher {
    top: 100px;
    right: 80px;
  }

  .lang-toggle {
    width: 110px;
    height: 33px;
  }

  .lang-toggle a {
    font-size: 18px;
    padding: 10px 0px;
  }

  .hero picture,
  .hero__bg {
    transform: translateY(-20px) !important;
  }

  .main-menu-list li a {
    padding: 10px 1px;
  }

  .site-header {
    left: -51px;
  }
}

/* ↓ 1024px — планшети */

@media (max-width: 1024px) {
  .site-header {
    justify-content: space-between;
    height: 90px;
    left: 0;
    right: 0;
    z-index: 50;
  }

  .main-nav {
    display: none;
  }

  .lang-switcher {
    position: static;
    margin-left: 0px;
  }

.hero picture, .hero__bg {
    position: relative;
    z-index: 0;
    transform: translateY(43px) !important;
}

  .mobile-nav {
    top: calc(90px + 27px);
  }
}

@media (max-width: 1024px) {
  .mobile-nav {
    top: calc(75px + 0px) !important;
  }
}


/* === HERO SECTION - Slider === */

.hero-section {
  position: relative;
  height: 120vh;
  overflow: hidden;
}

.hero {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  transition: opacity 0.4s ease, transform 0.5s ease;
}

.hero.is-hidden {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.hero picture,
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  object-fit: cover;
  z-index: 0;
  transform: translateY(-43px);
}

.hero__content {
  position: relative;
  z-index: 2;
  color: #fff;
}

.hero__content h1 {
  font-size: clamp(32px, 4vw + 10px, 72px);
  margin-bottom: 20px;
}

.hero__content p {
  font-size: clamp(16px, 1vw + 8px, 22px);
  font-weight: 300;
}


@media (max-width: 1024px) {
  .hero-section {
    height: 38vh;
    overflow: hidden;
  }

  .hero {
    height: 100vh;
  }

  .energy-intro {
    min-height: auto !important;
  }
  
  .hero picture,
.hero__bg {
  transform: translateY(-43px);
}
}

@media (max-width: 768px) {
  .hero picture, .hero__bg {
  transform: translateY(60px) !important;
}

  .hero-section {
    height: 100vh;
    overflow: hidden;
  }

  }

/* === ENERGY INTRO SECTION === */

:root {
  --c-primary: #133447;
  --bg: #fff;
}

/* Базовий стиль секції, без жорсткого min-height/margin-top */
.energy-intro {
  position: relative;
  background-color: var(--bg);
  text-align: center;
  overflow: hidden;
  padding-top: clamp(80px, 12vw, 137px);
  z-index: 2;
}

/* Обгортка контенту */
.energy-intro__content {
  position: relative;
  padding: 0 30px;
}

/* Заголовок */

.energy-intro__title {
  font-size: 115px;
  color: var(--c-primary);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0 auto;
  display: inline-block;
}

.energy-intro__title strong {
  font-weight: 700;
}

/* Лінія під заголовком */

.energy-intro__line {
  width: clamp(180px, 42vw, 820px);
  height: 3px;
  background-color: var(--c-primary);
  margin: clamp(16px, 1.7vw, 24px) auto 0;
}

/* Текст під лінією */

.energy-intro__text {
  font-size: clamp(16px, 1.8vw, 28px);
  line-height: 1.4;
  color: var(--c-primary);
  margin-top: clamp(18px, 2.2vw, 39px);
  max-width: clamp(540px, 62vw, 900px);
  margin-left: auto;
  margin-right: auto;
}

.energy-intro__text strong {
  font-weight: 700;
}

/* Кнопка + обгортка */

.energy-intro__btn-wrap {
  position: relative;
  margin-top: clamp(28px, 3.5vw, 57px);
  margin-bottom: clamp(48px, 7vw, 115px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.energy-intro__btn {
  background-color: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: clamp(24px, 2.8vw, 40px);
  font-size: clamp(18px, 2.4vw, 40px);
  line-height: 1.2;
  padding: clamp(12px, 1.8vw, 28px) clamp(28px, 4.5vw, 80px);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 5;
  box-shadow: 0 10px 18px 0 rgba(19, 52, 71, 0.23);
}

.energy-intro__btn:hover {
  background: #22464F;
}

/* Декоративні SVG-кола */

.energy-intro__circles {
  position: absolute;
  z-index: 1;
  transform: translateY(-97%);
  pointer-events: none;
}

/* Кола з боків: легкий виїзд за контейнер */

.energy-intro__circles--left {
  left: -6vw;
}

.energy-intro__circles--right {
  right: -6vw;
}

/* === Адаптивність === */

/* Десктопи: тягнемо секцію на весь екран і зсуваємо вгору на 20vh, як було в дизайні */
@media (min-width: 1025px) {
  .energy-intro {
    min-height: 100vh;
    margin-top: -20vh;
  }
}

/* 1440 */

@media (max-width: 1440px) {
  .energy-intro__title {
    line-height: 1.2;
    font-size: 76px;
  }
}

/* Планшети + iPad Air/Pro (до 1024px) */
@media (max-width: 1024px) {

  .energy-intro {
    text-align: center;
    min-height: auto;  /* головне: не фіксуємо 100vh */
    margin-top: 0;     /* прибираємо -20vh, щоб не було білого "колодязя" */
    padding-top: clamp(80px, 10vw, 120px);
  }

  .energy-intro__text {
    line-height: 1.45;
  }

  .energy-intro__circles--left {
    left: -6vw;
  }

  .energy-intro__circles--right {
    right: -6vw;
  }

  .energy-intro__title {
    font-size: 44px;
  }
}

/* Мобілка + iPad mini (до 768px) */

@media (max-width: 768px) {

  .energy-intro__content {
    padding: 0 20px;
  }

  .energy-intro__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 400;
  }

  .energy-intro__title br {
    display: none;
  }

  .energy-intro__title strong {
    font-weight: 700;
  }

  .energy-intro__title span {
    display: block;
  }

  .energy-intro__title .line-1 {
    font-size: 38px;
  }

  .energy-intro__title .line-2 {
    font-size: 25px;
    border: 2px solid #133447;
    border-radius: 9px;
    padding: 10px 13px;
    margin: 8px -24px;
    display: inline-block;
  }

  .energy-intro__title .line-3 {
    font-size: 44px;
  }

  .energy-intro__text {
    font-size: 18px;
    line-height: 1.5;
    margin-top: 24px;
  }

  .energy-intro__btn-wrap {
    margin-top: 40px;
    margin-bottom: 80px;
  }

  .energy-intro__btn {
    width: 187px;
    height: 86px;
    border-radius: 11px;
    background-color: var(--c-primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 15px;
    line-height: 1.8;
  }

  .energy-intro__btn strong {
    display: block;
    font-size: 24px;
    line-height: 1;
  }

  .energy-intro__circles--right {
    display: none;
  }

  .energy-intro__circles--left {
    left: -65px;
    margin: 0 auto;
    transform: translateY(-84%);
  }
}

/* Стрілки в енергетичній секції */

.energy-intro__arrow {
  position: absolute;
  top: 20%;
  transform: translateY(-50%);
  z-index: 6;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

.energy-intro__arrow img {
  width: 111px;
  height: 111px;
  display: block;
}

.energy-intro__arrow--left {
  left: 65px;
}

.energy-intro__arrow--right {
  right: 65px;
}

.energy-intro__arrow:hover img {
  opacity: .85;
}

.energy-intro__arrow:focus-visible {
  outline: 2px solid #133447;
  border-radius: 8px;
}

@media (max-width: 1024px) {
  .energy-intro__arrow {
    display: none !important;
  }
}


/* === MISSION SECTION === */

.mission {
  position: relative;
  width: 100%;
  text-align: center;
  background-color: #fff;
  padding: 0;
  margin: 0;
  overflow: hidden;
  margin-bottom: 163px;
}

/* Верхній фон */
.mission__bg {
  background-color: #3B2418;
  height: 325px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mission__title {
  font-size: 158px;
  color: #FFFFFF;
  margin: 0;
  line-height: 1;
  text-transform: uppercase;
}

/* Текст під фоном */
.mission__text {
  margin-top: 133px;
  max-width: 1150px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.mission__text p {
  font-size: 28px;
  line-height: 1.5;
  color: #3B2418;
  margin: 0;
}

.mission__text strong {
  font-weight: 700;
}

/* === Адаптивність === */
@media (max-width: 1440px) {
  .mission__title { font-size: 120px; }
  .mission__text p { font-size: 24px; }
}

@media (max-width: 1024px) {
  .mission__title { font-size: 90px; }
  .mission__text { margin-top: 100px; max-width: 900px; }
  .mission__text p { font-size: 22px; }
  
  .mission {
  margin-bottom: 110px;
}
}

@media (max-width: 768px) {

  .mission {
    margin-bottom: 39px;
  }

  .mission__bg {
    height: 127px;
    background-color: #3B2418;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mission__title {
    font-size: 64px;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    margin: 0;
  }

  .mission__text {
    margin-top: 39px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .mission__text p {
    font-size: 16px;
    line-height: 1.5;
    color: #3B2418;
    margin: 0;
  }

  .mission__text strong {
    font-weight: 700;
  }
}

.mission{
  position: relative;
}

.mission__arrow{
  position: absolute;
  top: 53%;
  transform: translateY(-50%);
  z-index: 5;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

.mission__arrow img{
  width: 111px;
  height: 111px;
  display: block;
}

.mission__arrow--left{  left: 12px; }
.mission__arrow--right{ right: 12px; }

.mission__arrow:hover img{ opacity: .85; }
.mission__arrow:focus-visible{ outline: 2px solid #133447; border-radius: 8px; }

@media (max-width: 1024px){
  .mission__arrow{ display: none !important; }
}

@media (min-width: 1025px){
  .mission__arrow{ z-index: 6; }
  .mission__arrow--left{  left: 184px; }
  .mission__arrow--right{ right: 185px; }
}


/* === SOLUTIONS SECTION === */

.solutions {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: radial-gradient(
    circle at bottom left,
    #C19773 0%,
    #FBFBFB 39%,
    #FFFFFF 69%,
    #4F8997 100%
  );
  overflow: hidden;
}

.solutions__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.solutions__title {
  position: relative;
  line-height: 0.9;
  text-transform: uppercase;
  z-index: 1;
}

.solutions__title-top {
  display: block;
  color: #3B2418;
  font-size: 630px;
  font-weight: 400;
}

.solutions__title-bottom {
  display: block;
  font-size: 350px;
  font-weight: 700;
  background: linear-gradient(90deg, #133447 0%, #3B2418 43%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.solutions__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -16%);
  z-index: 2;
}

.solutions__logo img {
  width: 608px;
  height: auto;
  max-width: 100%;
}

/* 1600px */
@media (max-width: 1600px) {
  .solutions__title-top { font-size: 500px; }
  .solutions__title-bottom { font-size: 267px; }
  .solutions__logo img { width: 480px; }
}

/* 1400–1200px */

@media (max-width: 1400px) {
  .solutions__title-top { font-size: 420px; }
  .solutions__title-bottom { font-size: 230px; }
  .solutions__logo img { width: 400px; }
}

/* 769–1200px */

@media (min-width: 769px) and (max-width: 1200px) {

  .solutions {
    min-height: 520px;
  }

  .solutions__title {
    line-height: 0.95;
  }

  .solutions__title-top {
    font-size: 260px;
  }

  .solutions__title-bottom {
    font-size: 150px;
  }

  .solutions__logo {
    transform: translate(-50%, -10%);
  }

  .solutions__logo img {
    width: 300px;
  }
}

/* MOBILE ≤768px */

@media (max-width: 768px) {

  .solutions {
    min-height: 348px;
    height: 348px;
    background: radial-gradient(
      circle at bottom left,
      #C19773 0%,
      #FBFBFB 39%,
      #FFFFFF 69%,
      #4F8997 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
  }

  .solutions__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  /* Логотип */
  .solutions__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 6%);
    z-index: 2;
  }

  .solutions__logo img {
    width: 187px;
    height: auto;
  }

  /* Заголовки */
  .solutions__title {
    line-height: 1;
    position: relative;
    margin-top: 40px;
  }

  .solutions__title-top {
    position: relative;
    display: block;
    font-size: 129px;
    font-weight: 400;
    color: #3B2418;
    text-transform: uppercase;
  }

  /* Лінія над словом НАШІ */
  .solutions__title-top::before {
    content: "";
    display: block;
    width: 287px;
    height: 1px;
    background-color: #3B2418;
    border-radius: 50px;
    margin: 0 auto 12px;
  }

  .solutions__title-bottom {
    display: block;
    font-size: 64px;
    font-weight: 700;
    background: linear-gradient(90deg, #133447 0%, #3B2418 43%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
  }
}


/* === SERVICES SECTION === */

:root {
  --transition-speed: 0.8s;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
}

/* Контейнер */
.services__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 118px;
  max-width: 1600px;
  width: 100%;
  position: relative;
}

/* === ГОЛОВНА КАРТКА === */
.service-card {
    background: #fff;
    border-radius: 40px;
    padding: 80px 100px;
    width: 975px;
    height: 391px;
    position: relative;
    color: var(--c-text, #133447);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: color var(--transition-speed) ease;
    margin-bottom: 0;
}

.services {
  height: auto;
  padding: 200px 0 160px;
  background: linear-gradient(180deg, #4F8997 0%, #22464F 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.services__title {
    position: absolute;
    top: -284px;
    left: 80px;
    font-size: clamp(60px, 8vw, 150px);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    z-index: 5;
    user-select: none;
    pointer-events: none;
}

.service-card__subtitle {
  font-size: 48px;
  font-weight: 800;
  margin: 0;
}

.service-card__subsubtitle {
  font-size: 36px;
  font-weight: 400;
  margin: 10px 0 30px;
}

.service-card__content p {
  font-size: 24px;
  line-height: 1.5;
  margin: 20px 0;
  position: relative;
  padding-left: 15px;
}

.service-card__content p:nth-of-type(-n+2)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--c-text, #133447);
  border-radius: 999px;
}

.service-card__content strong {
  font-weight: 700;
}

/* Кнопка */
.service-card__btn {
    position: absolute;
    left: 100px;
    bottom: -58px;
    transform: translateY(0%);
    border: none;
    border-radius: 40px;
    font-size: 48px;
    font-weight: 600;
    padding: 24px 99px;
    background: var(--c-btn, #4F8997);
    color: #fff;
    cursor: pointer;
    transition: background var(--transition-speed);
    text-decoration: none;
     box-shadow: 0 20px 12.8px rgba(53, 62, 47, 0.27);
}

.service-card__btn:hover {
background: #6F7A62;
}

/* === ПРЕВʼЮ === */
.service-preview {
    background: #fff;
    width: 317px;
    height: 551px;
    border-radius: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    z-index: 1;
}

.service-preview span {
  font-size: 48px;
  font-weight: 400;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #133447;
  line-height: 1.5;
}

.service-preview strong {
  font-weight: 700;
  text-transform: uppercase;
}

 /* === СТРІЛКИ === */

/* Базова стрілка */
.services__arrow {
  width: 111px;
  height: 111px;
  border: none;
  background: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  z-index: 10;
  outline: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

/* Загальний hover (для правої ок) */
.services__arrow:not(.is-disabled):hover {
  transform: scale(1.05);
}

/* Ліва стрілка — БАЗА: має дивитись ВПРАВО (2-й, 3-й слайд і далі) */
.services__arrow--left {
  background-image: url('/wp-content/themes/ttehs-theme/assets/img/left-slide1.svg');
  position: absolute;
  left: -55px;
  top: 46%;
  transform-origin: center center;
  transform: translateY(-50%) rotate(0deg); /* ← вправо */
}

/* Hover для НЕ повернутої лівої (вправо + scale) */
.services__arrow--left:not(.is-disabled):hover {
  transform: translateY(-50%) rotate(0deg) scale(1.05);
}

/* Ліва стрілка на ПЕРШОМУ слайді — має дивитись ВГОРУ */
.services__arrow--left.rotated {
  transform: translateY(-50%) rotate(0deg); /* ← вгору */
}

/* Hover для повернутої вгору */
.services__arrow--left.rotated:not(.is-disabled):hover {
  transform: translateY(-50%) rotate(0deg) scale(1.05);
}

.services__arrow--left.is-disabled {
  opacity: 1;
  pointer-events: none;
  cursor: default;
}


/* Права стрілка */
.services__arrow--next {
  position: absolute;
  inset: 0;
  margin: auto;
}

.services__arrow--next.is-disabled {
  opacity: 0;
  pointer-events: none;
  cursor: default;
}

/* === Стрілка вниз === */
.services__arrow--down {
  position: absolute;
  inset: 0;
  margin: auto;
  background-image: url('/wp-content/themes/ttehs-theme/assets/img/down-arrow.svg');
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.services__arrow--down.active {
  opacity: 1;
  pointer-events: auto;
}

.services__arrows-inline {
  position: absolute;
  right: calc(230px + 30px);
  top: 46%;
  transform: translateY(-50%);
  width: 111px;
  height: 111px;
  z-index: 10;
}

/* Плавна зміна бекграунду секції */
.services {
  transition: background var(--transition-speed) ease;
}

.service-card,
.service-preview {
  transition: transform 0.45s ease, opacity 0.45s ease;
}

.service-card--slide-out-left,
.service-preview--slide-out-left {
  transform: translateX(-60px);
  opacity: 0;
}

.service-card--slide-out-right,
.service-preview--slide-out-right {
  transform: translateX(60px);
  opacity: 0;
}

.service-card--slide-in-right,
.service-preview--slide-in-right {
  transform: translateX(60px);
  opacity: 0;
}

.service-card--slide-in-left,
.service-preview--slide-in-left {
  transform: translateX(-60px);
  opacity: 0;
}

.services__arrow.is-disabled {
  pointer-events: none;
  cursor: default;
}

/* === Адаптивність SERVICES SECTION === */

/* 1600px ↓ */
@media (max-width: 1600px) {
  .services {
    height: auto;
    padding: 140px 0 90px;
    
  }
  
  .services__title {
        top: -180px;
        left: 166px;
}

  .service-card {
    width: 770px;
    height: 350px;
    padding: 60px 80px;
  }

  .service-card__subtitle {
    font-size: 40px;
  }

  .service-card__subsubtitle {
    font-size: 28px;
  }

  .service-card__content p {
    font-size: 20px;
  }

  .service-card__btn {
        padding: 18px 78px;
        font-size: 40px;
        bottom: -45px;
        border-radius: 40px;
  }

  .service-preview {
    width: 260px;
    height: 460px;
  }

  .service-preview span {
    font-size: 38px;
  }
  
  .services__inner {
  gap: 60px;
  }
  
    .services__arrow--left {
        left: 30px;
        top: 49%;
    }
  
  .services__arrows-inline {
    position: absolute;
    right: calc(268px + 30px);
    top: 49%;
    }
  
}

/* 1366px ↓ */
@media (max-width: 1366px) {
  .services {
    height: auto;
    
  }

  .service-card {
    width: 700px;
    height: 320px;
    padding: 50px 60px;
  }

  .service-card__subtitle {
    font-size: 34px;
  }

  .service-card__subsubtitle {
    font-size: 24px;
  }

  .service-card__content p {
    font-size: 18px;
  }

  .service-card__btn {
        padding: 18px 78px;
        font-size: 40px;
        bottom: -45px;
        border-radius: 40px;
  }

  .service-preview {
    width: 220px;
    height: 420px;
  }

  .service-preview span {
    font-size: 32px;
  }
  
      .services__arrow--left {
        left: 75px;
        top: 49%;
    }
}

/* 1280px ↓ */
@media (max-width: 1280px) {
  .services {
    height: auto;
    
  }

  .service-card {
    width: 600px;
    height: 300px;
    padding: 40px 50px;
  }

  .service-card__title {
    top: -130px;
    left: 40px;
  }

  .service-card__subtitle {
    font-size: 28px;
  }

  .service-card__subsubtitle {
    font-size: 22px;
  }

  .service-card__content p {
    font-size: 16px;
  }

  .service-card__btn {
        padding: 18px 78px;
        font-size: 40px;
        bottom: -45px;
        border-radius: 40px;
  }

  .service-preview {
    width: 180px;
    height: 360px;
  }

  .service-preview span {
    font-size: 26px;
  }
  
        .services__arrow--left {
        left: 110px;
        top: 49%;
    }
}

/* === MOBILE ADAPTATION (max-width: 768px) === */

@media (max-width: 1024px) {

  .services {
    padding: 120px 0 80px;
    position: relative;
  }

  .services__inner {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .service-card {
    width: 560px;
    height: auto;
    padding: 40px 40px 70px;
  }

  .service-preview {
    order: 3;
  }

  .services__arrow {
    width: 40px;
    height: 40px;
  }

  .services__arrow--left {
    position: absolute;
    top: 50%;
    left: calc(50% - 560px / 2 - 110px / 2);
    transform: translateY(-50%);
  }

  .services__arrows-inline {
    position: absolute;
    top: 50%;
    left: calc(50% + 560px / 2 - 64px / 2);
    transform: translateY(-50%);
    width: 64px;
    height: 64px;
  }

      .service-card__btn {
        padding: 11px 26px;
        font-size: 20px;
        bottom: -25px;
        border-radius: 20px;
        left: 165px;
    }
}

/* ===== Мобілка (≤768px) ===== */
@media (max-width: 768px) {

  .services {
    padding: 60px 0 60px;
    position: relative;
  }

  .services__title,
  .service-preview {
    display: none;
  }

  .services__inner {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .service-card {
    width: 293px;
    height: auto;
    padding: 26px 22px 64px;
  }

  .services__arrow--left {
    position: absolute;
    top: 50%;
    left: calc(50% - 293px / 2 - 80px / 2);
    transform: translateY(-50%);
  }

  .services__arrows-inline {
    position: absolute;
    top: 50%;
    left: calc(50% + 293px / 2 - 0px / 2);
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
  }
}

/* ===== Планшети (iPad Air / Pro, 769–1199px) ===== */
@media (min-width: 769px) and (max-width: 1199px) {

  .services {
    padding: 140px 0 80px;
    position: relative;
  }

  .services__inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
  }

  .service-card {
    width: 640px;
    height: auto;
    padding: 48px 48px 80px;
  }

  .service-card__subtitle {
    font-size: 32px;
  }

  .service-card__subsubtitle {
    font-size: 24px;
    margin: 8px 0 20px;
  }

  .service-card__content p {
    font-size: 18px;
    margin: 10px 0;
  }

  .service-card__btn {
    font-size: 22px;
    padding: 14px 40px;
    bottom: -30px;
    left: 80%;
    transform: translateX(-50%);
  }

  .service-preview {
    display: none;
  }

  .services__arrow {
    width: 56px;
    height: 56px;
  }

  .services__arrow--left {
    position: absolute;
    top: 50%;
    left: calc(50% - 640px / 2 - 147px / 2);
    transform: translateY(-50%);
  }

  .services__arrows-inline {
    position: absolute;
    top: 50%;
    left: calc(50% + 670px / 2 - 0px / 2);
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
  }
}


/* iPad Air та інші «менші» планшети: 769–1023px */
@media (min-width: 769px) and (max-width: 1023px) {
    .services__title {
        position: absolute;
        top: -34px;
        left: 28%;
        transform: translateX(-50%);
        font-size: clamp(40px, 6vw, 80px);
        text-align: center;
        z-index: 5;
    }
}

/* iPad Pro (портрет) та великі планшети: 1024–1199px */
@media (min-width: 1024px) and (max-width: 1199px) {
  .services__title {
    position: absolute;
    top: -48px;
    left: 35%;
    transform: translateX(-50%);
    font-size: clamp(48px, 6vw, 96px);
    text-align: center;
    z-index: 5;
  }
}

/* Маленькі планшети: 769–880px */
@media (min-width: 769px) and (max-width: 880px) {
    .services__title {
        position: absolute;
        top: -34px;
        left: 27%;
        transform: translateX(-50%);
        font-size: clamp(40px, 6vw, 80px);
        text-align: center;
        z-index: 5;
    }
}

/* Середні планшети: 881–1023px (тут якраз 963px) */
@media (min-width: 881px) and (max-width: 1023px) {
  .services__title {
    position: absolute;
    top: -38px;
    left: 31%;
    transform: translateX(-50%);
    font-size: clamp(44px, 5.5vw, 88px);
    text-align: center;
    z-index: 5;
  }
}




/* === CONSULTATION SECTION === */

.consultation {
  background-color: #505944;
  width: 100%;
  padding: clamp(40px, 6vw, 100px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -2px;
}

.consultation .container {
  max-width: 1720px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: 44px;
  box-sizing: border-box;
}

.consultation__image-wrapper {
  position: relative;
  width: min(1720px, 100%);
  aspect-ratio: 1720 / 880; /* десктопна пропорція */
  overflow: hidden;
}

/* Картинки */
.consultation__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* показуємо потрібну */
.consultation__image--mobile { display: none; }

/* Кнопка — у правому нижньому куті */
.consultation__btn {
  position: absolute;
  right: clamp(16px, 2.5vw, 50px);
  bottom: clamp(16px, 2.9vw, 50px);
  width: clamp(260px, 29vw, 566px);
  height: clamp(52px, 6.8vw, 130px);
  background-color: #353E2F;
  color: #fff;
  font-size: clamp(14px, 1.3vw, 25px);
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
  border-radius: 40px;
  transition: background 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  z-index: 2;
}

.consultation__btn:hover {
  background-color: #4E5944;
  transform: scale(1.03);
}

/* --- МОБІЛЬНА ВЕРСІЯ --- */
@media (max-width: 768px) {
  /* Прибираємо фіксоване співвідношення сторін */
  .consultation__image-wrapper {
    aspect-ratio: auto;
  }

  /* Показуємо мобільну картинку */
  .consultation__image--desktop { display: none; }
  .consultation__image--mobile { display: block; }

  /* Кнопка під картинкою */
  .consultation__btn {
    position: static;
    width: 100%;
    margin-top: 16px;
    height: clamp(50px, 12vw, 80px);
    font-size: clamp(14px, 4vw, 18px);
    z-index: 2;
  }
}




/* === PROJECTS SECTION === */
.projects {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 164px;
  overflow: hidden;
}

/* фон */
.projects picture,
.projects__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* напівпрозора плашка */
.projects__overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* білий контейнер */
.projects__label {
  width: 1137px;
  height: 232px;
  background: #FFFFFF;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.projects__label h2 {
  font-size: 147px;
  color: #353E2F;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1;
  margin: 0;
}

/* адаптивність */
@media (max-width: 1440px) {
  .projects__label { width: 900px; height: 190px; }
  .projects__label h2 { font-size: 110px; }
}

@media (max-width: 1024px) {
  .projects__label { width: 700px; height: 160px; }
  .projects__label h2 { font-size: 80px; }
  .projects { padding-top: 120px; }
}

/* ===== Планшети (iPad Air / Pro, 769–1199px) ===== */
@media (min-width: 769px) and (max-width: 1199px) {

  .projects {
    height: auto;
    min-height: 520px;
    padding-top: 120px;
    padding-bottom: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .projects__overlay {
    align-items: center;
  }

	.projects__label {
        width: 80%;
        max-width: 718px;
        height: auto;
        padding: 47px 0px;
        border-radius: 40px;
    }
    
  .projects__label h2 {
    font-size: clamp(56px, 7vw, 80px);
    text-align: center;
  }
}


@media (max-width: 768px) {
  .projects {
    height: 440px;
    padding-top: 100px;
  }

  .projects__label {
    width: 90%;
    height: 140px;
    border-radius: 30px;
  }

  .projects__label h2 {
    font-size: 48px;
  }
}

@media (max-width: 480px) {
  .projects {
    height: 419px;
  }

  .projects__label {
    height: 120px;
    border-radius: 26px;
  }

  .projects__label h2 {
    font-size: 48px;
  }
}


/* ====== PROJECTS SECTION SLIDE ====== */
.home-projects {
  padding: clamp(60px, 8vw, 120px) 0;
  background: #F6F7F4;
  --hp-size-scale: 1;           /* масштаб карток (1 = оригінал) */
  --hp-gap: clamp(16px, 2vw, 32px);  /* швидкість автопрокрутки */
}

.home-projects .container {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 20px;
}

/* В'юпорт і трек */
.home-projects__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.home-projects__track {
  display: flex;
  align-items: center;
  will-change: transform;
}

.home-projects__set {
  display: flex;
  align-items: center;
  gap: var(--hp-gap);
}

.home-projects__set:first-child {
  padding-right: var(--hp-gap);
}


/* Картка */
.home-projects__card {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  border-radius: 24px;
  overflow: hidden;
  display: block;
  position: relative;
  background: #E9ECE3;
  transition: transform .3s ease;
}

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

/* ✅ РОЗМІРИ — тепер рахуються всередині кожного .set */
.home-projects__set .home-projects__card:nth-child(5n + 1) {
  width:  calc(556px * var(--hp-size-scale));
  height: calc(417px * var(--hp-size-scale));
}
.home-projects__set .home-projects__card:nth-child(5n + 2) {
  width:  calc(352px * var(--hp-size-scale));
  height: calc(239px * var(--hp-size-scale));
}
.home-projects__set .home-projects__card:nth-child(5n + 3) {
  width:  calc(352px * var(--hp-size-scale));
  height: calc(321px * var(--hp-size-scale));
}
.home-projects__set .home-projects__card:nth-child(5n + 4) {
  width:  calc(352px * var(--hp-size-scale));
  height: calc(417px * var(--hp-size-scale));
}
.home-projects__set .home-projects__card:nth-child(5n + 5) {
  width:  calc(464px * var(--hp-size-scale));
  height: calc(242px * var(--hp-size-scale));
}


/* Текстовий блок під каруселлю */
.home-projects__text {
  text-align: center;
  margin-top: clamp(24px, 4vw, 56px);
  color: #353E2F;
}

.home-projects__title {
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1.05;
  margin: 0 0 clamp(12px, 2vw, 16px);
  color: #353E2F;
  font-weight: 700;
  text-transform: uppercase;
}

.home-projects__subtitle {
  font-size: clamp(18px, 3vw, 40px);
  line-height: 1.3;
  margin: 0 0 clamp(20px, 3vw, 36px);
  color: #353E2F;
}

.home-projects__more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 48px;
  font-weight: 600;
  border-radius: 40px;
  background-color: #808B72;
  color: #fff;
  line-height: 1.2;
  text-decoration: none;
  width: 394px;
  height: 124px;
  padding: 0;
  box-shadow: 0 20px 12.8px rgba(53, 62, 47, 0.27);
}

.home-projects__more-btn:hover {
  background-color: #6F7A62;
}

/* Анімація безкінечного скролу:
   трек = [cards][cards], тому зсуваємо рівно на 50% */
@keyframes hp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Стрілки поверх картинок, по центру по вертикалі */
.home-projects__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

.home-projects__arrow img {
  width: 111px;
  height: 111px;
  display: block;
}

/* Позиція стрілок на десктопі */
@media (min-width: 1025px) {
  .home-projects__arrow--left  { left: 65px; }
  .home-projects__arrow--right { right: 65px; }
}

/* Ховаємо стрілки на планшетах/мобілках */
@media (max-width: 1024px) {
  .home-projects__arrow { display: none !important; }
}

/* Ховер/фокус стрілок */
.home-projects__arrow:hover img {
  opacity: .85;
}
.home-projects__arrow:focus-visible {
  outline: 2px solid #133447;
  border-radius: 8px;
}

/* Мобілка: той самий патерн розмірів, але зменшений */
@media (max-width: 768px) {
  .home-projects {
    --hp-size-scale: 0.6;  /* можеш змінити на 0.5/0.7 за відчуттями */
  }

  .home-projects__card {
    border-radius: 16px;
  }

    .home-projects__more-btn {
        position: static;
        margin-top: 26px;
        transform: none;
        font-size: 20px !important;
        width: 133px !important;
        height: 54px !important;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        color: #fff;
        line-height: 1.2;
        text-decoration: none;
        box-shadow: 0 20px 12.8px rgba(53, 62, 47, 0.27);
    }
}

@media (max-width: 1600px) {
.home-projects__more-btn {
  font-size: 40px;
  width: 319px;
  height: 100px;

}
}




/* === TECHNOLOGY SECTION === */

.technology {
  background-color: #133447;
  padding: 100px 0;
  color: #FFFFFF;
}

.technology__inner {
  max-width: 1630px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  padding-bottom: 140px;
}

/* Заголовок */
.technology__title {
    margin: 0 0 60px;
    text-align: center;
    font-size: 64px;
    line-height: 1.1;
    color: #FFFFFF;
    text-transform: uppercase;
}

.technology__title--desktop {
  margin: 0 0 60px;
  text-align: center;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1.1;
}

.technology__title--mobile {
  display: none; /* сховано на десктопі */
}

/* Дві колонки */
.technology__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 105px;
  flex-direction: row-reverse;
}


/* Ліва частина — текст */
.technology__text {
  flex: 1 1 0;
  font-size: 24px;
  line-height: 1.5;
  color: #FFFFFF;
}

.technology__text p {
  margin: 0 0 20px;
}

.technology__text p:last-child {
  margin-bottom: 0;
}

/* Права частина — картинка */
.technology__image-wrap {
  flex: 0 0 778px;
  max-width: 778px;
}

.technology__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 778px;
  border-radius: 40px;
  object-fit: cover;
  aspect-ratio: 778 / 436;
}

/* Кнопка */
.technology__btn {
  position: absolute;
  left: 50%;
  bottom: -62px;
  transform: translateX(-50%);
  background-color: #388A98;
  color: #FFFFFF;
  font-size: 48px;
  font-family: 'Garet', sans-serif;
  font-weight: 600;
  border: none;
  border-radius: 40px;
  width: 394px;
  height: 124px;
  cursor: pointer;
  box-shadow: 0 20px 12.8px rgba(53, 62, 47, 0.27);
  transition: background 0.3s ease, transform 0.3s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}



.technology__btn:hover {
  background-color: #2F7481;
}

/* ===== Адаптив ===== */

/* ↓ 1600px — зменшуємо картинку в блоці "Технологія" */
@media (max-width: 1600px) {
.technology__inner {
  max-width: 1320px;
}

  .technology__content {
    gap: 60px; /* трошки менший відступ між текстом і картинкою, щоб усе дихало */
  }

  .technology__image-wrap {
    flex: 0 0 600px;
    max-width: 600px;
  }

  .technology__image {
    max-width: 600px;
  }
  
  .technology__text {
  font-size: 20px;
  }
  
  .technology__btn {
    font-size: 40px;
    width: 319px;
    height: 100px;
}
}

@media (max-width: 1440px) {
  .technology__image-wrap {
    flex: 0 0 520px;
    max-width: 520px;
  }

  .technology__image {
    max-width: 100%;
  }
}


/* планшет */
@media (max-width: 1200px) {
  .technology__title {
    font-size: 52px;
  }

  .technology__content {
    gap: 32px;
  }

  .technology__image-wrap {
    flex: 0 0 50%;
  }
  
  .technology__btn {
   bottom: 0px;
}

}

/* вузькі планшети / великі мобілки */
@media (max-width: 992px) {
  .technology {
    padding: 60px 0;
  }

  .technology__title {
    font-size: 42px;
    margin-bottom: 32px;
  }

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

  .technology__image-wrap {
    width: 100%;
    max-width: 100%;
  }
}

/* мобілка: картинка → заголовок → текст → кнопка */
@media (max-width: 768px) {

  .technology {
    padding: 60px 0;
  }

  .technology__inner {
    padding: 0 20px;
    padding-bottom: 0;       /* кнопка вже не абсолютна */
  }

  /* Ховаємо десктопний заголовок */
  .technology__title--desktop {
    display: none;
  }

  /* Контент йде стовпчиком */
  .technology__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 23px; /* відступ картинка–заголовок–текст */
  }

  /* 1) Картинка зверху */
  .technology__image-wrap {
    order: 1;
    width: 100%;
    max-width: 100%;
  }

  .technology__image {
    width: 100%;
    max-width: 100%;
  }

  /* 2) Заголовок (мобільний) */
  .technology__title--mobile {
    display: block;
    order: 2;
    font-size: 32px;
    line-height: 1.2;
    margin: 23px 0 0;
    text-align: center;
    margin-bottom: 23px;
  }

  /* 3) Текст */
  .technology__text {
    order: 3;
    font-size: 18px;
    margin-top: 23px;   /* ще раз 23 між заголовком і текстом */
  }

  .technology__text p {
    margin: 0 0 18px;
    text-align: center;
  }

  /* 4) Кнопка – під текстом */
.technology__btn {
    position: static;
    margin: 26px auto 0;
    transform: none;
    font-size: 20px;
    width: 133px;
    height: 54px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: #fff;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 20px 12.8px rgba(53, 62, 47, 0.27);
}
}


/* === NEWS SECTION (desktop base) === */

.news .container {
  width: calc(100% - 165px);
  margin: 0 auto;
}


.news{
  position: relative;
  width: 100%;
  background: #FFFFFF;
  padding: 100px 0 120px;
  overflow: hidden;
  text-align: center;
  --news-card-h: 620px;
}

.news__header{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin-bottom: 20px;
}

.news__title{
  font-size: 96px;
  color: #133447;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

/* Кнопки-стрілки */
.news .swiper-button-prev,
.news .swiper-button-next{
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  width: 111px;
  height: 111px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 3;
  padding: 0; border: 0; cursor: pointer;
  transition: transform .2s ease, border-color .25s ease;
}
.news .swiper-button-prev::after,
.news .swiper-button-next::after{ content: none !important; }

.news__arrow img{ width: 100%; height: auto; }

.news .swiper-button-prev:hover,
.news .swiper-button-next:hover {
  transform: scale(1.05);
}

/* Обертання стрілок */
.news__arrow {
  transition: transform 0.3s ease !important;
}

.news__arrow--left.rotated {
  transform: rotate(-90deg) !important;
}

.news__arrow--right.rotated {
  transform: rotate(90deg) !important;
}


/* Кнопка "Усі новини"*/
.news__all{
  position: relative;
  z-index: 2;
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.news__btn{
  display: inline-block;
  background-color: #133447;
  color: #FFFFFF;
  font-size: 70px;
  font-weight: 600;
  padding: 25px 80px;
  border-radius: 40px;
  text-decoration: none;
  transition: background .25s ease;
  box-shadow: 0 20px 12.8px 0 rgba(53, 62, 47, 0.27);
}

.news__btn:hover{ background-color:#4F8997; }

/* Слайдер та картки — однакова висота */
.news__slider{ 
position: relative; 
z-index: 1; 
margin-top: -33px;
}
.news__slider .swiper-wrapper{ gap: 0; }
.swiper-slide{ height: auto; }

.news-card{
  height: var(--news-card-h);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 6px solid #133447;
  border-radius: 40px;
  overflow: hidden;
  padding: 22px;
  box-sizing: border-box;
  transition: border-color .25s ease;
}
.news-card:hover{ border-color: #4F8997; }

.news-card__image{
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 16px;
  flex: 0 0 auto;
}
.news-card__image img{
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}
.news-card__title{
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: #133447;
  margin: 0 0 10px;
  flex: 0 0 auto;
}
.news-card__excerpt{
  font-size: 18px;
  color: #133447;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;  /* підрізаємо, щоб висота карток збігалася */
  overflow: hidden;
  flex: 1 1 auto;
}

/* клікабельна вся картка */
.news-card-link{ text-decoration: none; color: inherit; display: block; }

/* Не блокуємо стрілки Swiper'а на краях */
.news .swiper-button-disabled {
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* ---- Breakpoints (desktop/tablet) ---- */
@media (max-width: 1600px){
  .news__title{ font-size: 72px; }
  .news__btn{ font-size: 50px; padding: 20px 60px; }
  .news{ --news-card-h: 560px; }
  
  .news-card__title {
  font-size: 26px;
  }
  
  .news-card__excerpt {
  font-size: 16px;
  }
  
}

@media (max-width: 1200px){
  .news{ --news-card-h: 520px; }
}
@media (max-width: 1024px){
  .news__title{ font-size: 60px; }
  .news-card__title{ font-size: 28px; }
  .news-card__excerpt{ font-size: 16px; }
  .news{ --news-card-h: 500px; }
  .news .swiper-button-prev,
  .news .swiper-button-next{ width: 56px; height: 56px; }
}

/* ==== MOBILE ≤768px — 1 слайд на екран, картка по центру ==== */
@media (max-width: 768px){
  .news{
    padding: 20px 0 60px;
  }

  .news .container {
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .news__header{
    gap: 24px;
    justify-content: center;
    margin-bottom: 12px;
    order: 0;
  }

  .news__slider{
    position: relative;
    padding: 0;
    margin-top: 0;
    order: 1;
  }

  .news__all{
    margin-top: -4px;
    order: 2;
  }

  .news__title{
    font-size: 36px;
    margin: 0 0 20px;
  }

  .news__slider {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .news__slider .swiper-wrapper{
    align-items: stretch;
  }

  .news__slider .swiper-slide{
    width: 100% !important;
    height: auto !important;
    display: flex;
    justify-content: center;
  }

  .news-card{
    width: 100%;
    max-width: none;
    padding: 16px;
    border-radius: 32px;
    border-width: 4px;
    box-sizing: border-box;
  }

  .news-card__image{
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 12px;
  }

  .news-card__image img{
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
  }

  .news-card__title{
    font-size: 24px;
    line-height: 1.15;
    margin: 0 0 8px;
    text-align: center;
  }

  .news-card__excerpt{
    font-size: 16px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    margin-bottom: 6px;
    text-align: center;
  }

  /* Стрілки: позиція однакова, напрямок фіксований, без "кручення" */

  .news .swiper-button-prev,
  .news .swiper-button-next{
    position: absolute !important;
    top: 50% !important;
    width: 40px;
    height: 40px;
    margin: 0 !important;
    background: transparent;
    padding: 0;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    /* тут БЕЗ rotate — тільки вертикальне вирівнювання */
    transform: translateY(-50%) !important;
  }

  .news .swiper-button-prev{ left: 0px; }
  .news .swiper-button-next{ right: 0px; }

  .news .swiper-button-prev::after,
  .news .swiper-button-next::after{ content: none !important; }

  /* Ліва стрілка завжди вліво — і з rotated, і без */
  .news__arrow--left,
  .news__arrow--left.rotated {
    transform: translateY(-50%) rotate(-90deg) !important;
  }

  /* Права стрілка завжди вправо — і з rotated, і без */
  .news__arrow--right,
  .news__arrow--right.rotated {
    transform: translateY(-50%) rotate(90deg) !important;
  }

  .news__btn{
    font-size: 20px;
    padding: 12px 24px;
    border-radius: 10px;
  }
}


/* === CONTACTS SECTION === */
.contacts {
  position: relative;
  width: 100%;
  height: 870px;
  background: linear-gradient(180deg, #4E8795 0%, #FFFFFF 40%);
  color: #133447;
  overflow: hidden;
}

/* Заголовок */
.contacts__title {
  position: absolute;
  top: 100px;
  left: 378px;
  font-size: 96px;
  color: #133447;
  font-weight: 700;
  margin: 0;
}

/* Контейнер вмісту */
.contacts__content {
  position: absolute;
  top: calc(100px + 96px + 31px);
  left: 274px;
  display: flex;
  gap: 90px;
}

/* Лівий блок — ОФІС */
.contacts__office {
  width: 754px;
  height: 443px;
  background: linear-gradient(90deg, #4F8997 0%, #275762 100%);
  border-radius: 40px;
  padding: 60px 70px;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.contacts__office h3 {
  font-size: 87px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #FFFFFF;
}

.contacts__office p {
  font-size: 40px;
  font-weight: 400;
  margin: 0;
  line-height: 1.4;
}

.contacts__office strong {
  font-weight: 700;
}

/* Соцмережі */
.contacts__socials {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 80px;
    justify-content: flex-end;
    padding-right: 0px;
    margin-right: -40px;
}

.contacts__socials span {
  font-size: 48px;
  color: #2D5E6A;
  font-weight: 600;
}

.contacts__socials img {
  width: 48px;
  height: 48px;
  display: inline-block;
  transition: transform 0.3s;
}

.contacts__socials img:hover {
  transform: scale(1.1);
}

/* Праві два блоки */
.contacts__right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 64px;
}

.contacts__box {
  width: 528px;
  height: 239px;
  border-radius: 40px;
  padding: 40px 50px;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.contacts__box h4 {
  font-size: 60px;
  font-weight: 700;
  margin: 0 0 15px;
  color: #FFFFFF;
}

.contacts__box p {
  font-size: 40px;
  font-weight: 400;
  margin: 0;
}

.contacts__box a {
  color: #FFFFFF;
  text-decoration: none;
}

.contacts__box--phone {
  background: linear-gradient(90deg, #808B72 0%, #465533 100%);
}

.contacts__box--email {
  background: linear-gradient(90deg, #C19773 0%, #A87B55 100%);
}

.contacts__socials--mobile {
  display: none;
}

.contacts__office .contacts__socials {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 80px;
  justify-content: flex-end;
}

/* === Адаптивність === */
@media (max-width: 1600px) {
  .contacts__title { left: 192px; font-size: 80px; }
  .contacts__content { left: 145px; gap: 60px; }
  .contacts__office { width: 650px; height: 400px; padding: 50px; }
  .contacts__office h3 { font-size: 70px; }
  .contacts__office p { font-size: 34px; }
  .contacts__box { width: 450px; height: 200px; }
  .contacts__box h4 { font-size: 50px; }
  .contacts__box p { font-size: 34px; }
}

@media (max-width: 1024px) {

  /* Секція – без фіксованої висоти, нормальні відступи */
  .contacts {
    height: auto;
    padding: 120px 0 60px;
  }

  /* Заголовок по центру, трохи менший */
  .contacts__title {
    position: static;
    left: auto;
    top: auto;
    font-size: 64px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    color: #133447;
  }

  /* Контент – стовпчиком, по центру */
  .contacts__content {
    position: static;
    top: auto;
    left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  /* ОФІС / ТЕЛЕФОН / EMAIL – однакові по ширині і стилю */
  .contacts__office,
  .contacts__box {
    width: 100%;
    max-width: 720px;
    height: auto;
    border-radius: 30px;
    padding: 40px 32px;
    box-sizing: border-box;
    text-align: center;
  }

  .contacts__right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .contacts__office h3 {
    font-size: 48px;
    margin-bottom: 16px;
  }

  .contacts__office p {
    font-size: 24px;
    line-height: 1.5;
  }

  .contacts__box h4 {
    font-size: 40px;
    margin-bottom: 12px;
  }

  .contacts__box p,
  .contacts__box a {
    font-size: 24px;
  }

  /* Соцмережі: як на мобілці – окремий блок знизу, нічого не перекриває */
  .contacts__office .contacts__socials {
    display: none;
  }

  .contacts__socials--mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 50px;
  }

  .contacts__socials--mobile span {
    font-size: 36px;
    font-weight: 600;
    color: #2D5E6A;
  }

  .contacts__socials--mobile img {
    width: 34px;
    height: 34px;
    transition: transform 0.3s ease;
  }

  .contacts__socials--mobile img:hover {
    transform: scale(1.1);
  }
}


@media (max-width: 768px) {

  /* === Основна секція === */
  .contacts {
    height: auto;
    padding: 60px 0px 0px;
    text-align: center;
  }

  /* === Заголовок === */
  .contacts__title {
    position: static;
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 42px;
    color: #133447;
  }

  /* === Контент === */
  .contacts__content {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 33px;
  }

  /* === Блок Офіс === */
  .contacts__office {
    width: 100%;
    background: linear-gradient(90deg, #4F8997 0%, #275762 100%);
    border-radius: 30px;
    padding: 40px 30px;
    height: auto;
  }

  .contacts__office h3 {
    font-size: 36px;
    margin-bottom: 15px;
  }

  .contacts__office p {
    font-size: 20px;
    line-height: 1.5;
    margin: 0;
  }

  .contacts__office strong {
    font-weight: 700;
  }

  /* === Телефон і Email === */
  .contacts__right {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 33px;
  }

  .contacts__box {
    width: 100%;
    border-radius: 30px;
    padding: 40px 30px;
    height: auto;
    text-align: center;
  }

  .contacts__box h4 {
    font-size: 36px;
    margin-bottom: 10px;
  }

  .contacts__box p,
  .contacts__box a {
    font-size: 20px;
    color: #fff;
    text-decoration: none;
  }

  .contacts__right .contacts__box:last-child {
    margin-bottom: 34px;
  }

  /* === Соцмережі — мобільна версія (окремий блок) === */
  .contacts__socials {
  	margin-right: 0px;
  }
  
  .contacts__socials--mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
  }

  .contacts__socials--mobile span {
    font-size: 24px;
    font-weight: 600;
    color: #2D5E6A;
  }

  .contacts__socials--mobile img {
    width: 34px;
    height: 34px;
    transition: transform 0.3s ease;
  }

  .contacts__socials--mobile img:hover {
    transform: scale(1.1);
  }

  /* Ховаємо десктопні соцмережі всередині .contacts__office */
  .contacts__office .contacts__socials {
    display: none;
  }
}


/* === CONTACT FORM SECTION (оновлено) === */

.contact-form-section {
  background-color: #fff;
}

.contact-form-section .container {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 130px;
}

/* === Заголовок === */
.contact-form__title {
  font-size: 96px;
  font-weight: 800;
  color: #133447;
  text-align: center;
  margin-bottom: 40px;
  width: 100%;
}

/* === GRID (нова розмітка) === */
.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  align-items: start;
  width: 100%;
}

/* === ЛІВА КОЛОНКА === */
.contact-form__left {
  display: flex;
  flex-direction: column;
}

.contact-form__left input[name="name"] {
  margin-bottom: 48px; /* після Ім’я */
}

.contact-form__label {
  font-size: 24px;
  color: #133447;
  font-family: 'Garet', sans-serif;
  margin-bottom: 23px; /* після “Як з вами краще зв’язатися” */
}

.contact-methods {
  display: flex;
  justify-content: flex-start;
  gap: 25px;
  border: 2px solid #000000;
  border-radius: 40px;
  padding: 14px 30px;
  width: 100%;
  box-sizing: border-box;
}

/* === ПРАВА КОЛОНКА === */

.contact-form__right {
	display: flex;
    flex-direction: column;
    gap: 22px;
    position: relative;
    top: 49px;
}

/* === VARIANTS === */
.contact-methods {
  display: flex;
  justify-content: flex-start;
  gap: 25px;
  border: 2px solid #000000;
  border-radius: 40px;
  padding: 14px 30px;
  width: 100%;
  box-sizing: border-box;
}

.contact-methods button {
  background: none;
  border: none;
  font-size: 24px;
  font-family: 'Garet', sans-serif;
  color: #133447;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}

.contact-methods button.active {
  color: #000000;
}

/* Опускаємо лише E-mail */
.contact-form__right input[name="email"] {
  margin-top: 40px; /* присаджуємо нижче */
}

/* === INPUTS === */
.contact-form input,
.contact-form textarea {
  font-size: 24px;
  font-family: 'Garet', sans-serif;
  font-weight: 400;
  color: #133447;
  border: none;
  border-bottom: 2px solid #133447;
  padding: 15px 0;
  outline: none;
  width: 100%;
  background: transparent;
  transition: border-color 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #4F8997;
}

/* === TEXTAREA === */
.contact-form__row {
  margin-top: 50px;
}

.contact-form textarea {
  border: 2px solid #133447;
  border-radius: 40px;
  padding: 25px 30px;
  width: 100%;
  max-width: 1635px;
  height: 260px;
  resize: none;
  box-sizing: border-box;
  color: #133447;
  font-family: 'Garet', sans-serif;
  font-size: 24px;
}

/* === КНОПКА === */
.contact-form__btn {
  display: block;
  background-color: #133447;
  color: #fff;
  font-family: 'Garet', sans-serif;
  font-size: 48px;
  font-weight: 600;
  border: none;
  border-radius: 40px;
  padding: 32px 67px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  margin: 25px auto 0;
  box-shadow: 0 20px 12.8px rgba(53, 62, 47, 0.27);
}

.contact-form__btn:hover {
  background-color: #0F2A37;
}

/* === При екранах до 1600px === */
@media (max-width: 1600px) {
  .contact-form__btn {
    font-size: 40px;
    padding: 22px 39px;
    margin-top: 20px;
  }
  
  .contact-form input, .contact-form textarea {
  font-size: 20px;
  }
  
  .contact-form__label {
  font-size: 20px;
  }
  
  .contact-methods {
  font-size: 20px;
  }
  
  .contact-form__title {
  margin-bottom: 20px;
  }
  
  .contact-form__left input[name="name"] {
    margin-bottom: 30px;
}

.contact-form__right {
    top: 31px;
}

.contact-form__row {
    margin-top: 40px;
}
}


.contact-form--mobile {
  display: none;
}


@media (max-width: 1024px) and (min-width: 769px) {

  .contact-form-section .container {
    max-width: 100%;
    padding: 0 21px;
    margin-bottom: 80px;
  }

  .contact-form__title {
    font-size: 64px;
    margin-bottom: 30px;
  }

  .contact-form__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 32px;
  }

  .contact-form__left input[name="name"] {
    margin-bottom: 30px;
  }

  .contact-form__right {
    position: static;
    top: 0;
    gap: 22px;
  }

  .contact-form__right input[name="email"] {
    margin-top: 0;
  }

  .contact-form__row {
    margin-top: 32px;
  }

  .contact-form__btn {
    font-size: 32px;
    padding: 24px 48px;
    margin-top: 20px;
  }
}



/* --- Мобільна форма --- */
@media (max-width: 768px) {
  .contact-form--desktop {
    display: none;
  }

  .contact-form--mobile {
    display: block;
    text-align: center;
    padding: 60px 0px;
  }
  
  .contact-form--mobile .contact-form__title {
    font-size: 40px;
    font-weight: 800;
    color: #133447;
    text-align: center;
    margin-bottom: 40px;
  }

  .contact-form-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
  }

  .contact-form-mobile input,
  .contact-form-mobile textarea {
    width: 100%;
    font-size: 20px;
    font-family: 'Garet', sans-serif;
    color: #133447;
    border: none;
    border-bottom: 2px solid #133447;
    padding: 12px 0;
    text-align: left;
    background: transparent;
    outline: none;
    box-sizing: border-box;
  }

  .contact-form__label {
    font-size: 24px;
    font-weight: 400;
    color: #133447;
    text-align: center;
    margin-bottom: 0;
  }

  .contact-methods-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border: 2px solid #133447;
    border-radius: 23px;
    padding: 20px 0;
    width: 100%;
  }

  .contact-methods-mobile button {
    background: none;
    border: none;
    font-size: 20px;
    color: #133447;
    cursor: pointer;
    font-family: 'Garet', sans-serif;
  }

  .contact-methods-mobile button.active {
    font-weight: 700;
  }

  .contact-form-mobile textarea {
    border: 2px solid #133447;
    border-radius: 23px;
    padding: 20px;
    min-height: 160px;
    resize: none;
    font-size: 20px;
    width: 100%;
    margin-top: 20px;
    box-sizing: border-box;
  }

    .contact-form__btn {
        font-size: 20px;
        padding: 18px 17px;
        border-radius: 10px;
        margin-top: 5px;
    }
  
  .contact-form-section .container {
  margin-bottom: 20px;
  }
}





/* === FOOTER (3-зонна сітка) === */
.site-footer {
    background-color: #133447;
    padding: 76px 0px 76px;
    color: #FFFFFF;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: start;
  gap: 80px;
}

/* ===== ЛІВА ЗОНА ===== */
.footer__col--logo img {
  width: 319px;
  height: auto;
  display: block;
  margin-top: 34px;
}

/* ===== ЦЕНТРАЛЬНА ЗОНА (МЕНЮ) ===== */
.footer__col--menu {
  display: flex;
  justify-content: center;
}

.footer-menu {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 18px 0px; /* вертикальний / горизонтальний геп */
  margin: 0;
  padding: 0;
  justify-content: center;
}

.footer-menu li a {
  color: #FFFFFF;
  font-size: 36px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.footer-menu li a:hover {
  opacity: 0.7;
}

/* ===== ПРАВА ЗОНА (КОНТАКТИ) ===== */
.footer__col--contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 25px;
}

.footer__contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-end; /* текст і іконка з правим вирівнюванням */
}

.footer__contact-item a {
  color: #FFFFFF;
  font-size: 36px;
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.3s ease;
}

.footer__contact-item img {
  width: 28px;
  height: 28px;
  order: 2; /* гарантуємо, що іконка завжди після тексту */
}

.footer__contact-item a:hover {
  opacity: 0.8;
}

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

/* ===== АДАПТИВНІСТЬ ===== */
@media (max-width: 1600px) {

.footer-menu li a {
  font-size: 22px;
}

.footer__contact-item a {
  font-size: 22px;
}
}


@media (max-width: 1440px) {
  .footer__grid {
    gap: 60px;
    grid-template-columns: 1fr 1.3fr 1fr;
  }
  .footer-menu {
    gap: 15px 0px;
  }
}

@media (max-width: 1024px) {

  .site-footer {
    padding: 60px 0;
    text-align: center;
  }

  .footer__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
    padding: 0 21px; /* поля як ти любиш :) */
    box-sizing: border-box;
  }

  /* ЛОГОТИП */
  .footer__col--logo {
    display: flex;
    justify-content: center;
  }

  .footer__col--logo img {
    width: 220px;
    height: auto;
    margin: 0 auto;
  }

  /* МЕНЮ В БОРДЕРІ (як на мобілці, але для всіх ≤1024) */
  .footer__col--menu {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .footer-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 0;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 25px 40px;
    margin: 0 auto;
    width: 100%;
    max-width: 420px;
    border: 1px solid currentColor;
    border-radius: 26px;
    box-sizing: border-box;
  }

  .footer-menu li {
    text-align: left;
  }

  .footer-menu li a {
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.3s ease;
  }

  .footer-menu li a:hover {
    opacity: 0.7;
  }

  /* КОНТАКТИ */
  .footer__col--contacts {
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
  }

  .footer__contact-item {
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }

  .footer__contact-item img {
    width: 28px;
    height: 28px;
  }

  .footer__contact-item a {
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
  }

  /* СОЦМЕРЕЖІ */
  .footer__socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    margin-top: 10px;
  }

  .footer__socials img {
    width: 42px;
    height: 42px;
    display: block;
  }
}


@media (max-width: 768px) {

  .site-footer {
    padding: 60px 0px;
    text-align: center;
  }

  .footer__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
  }

  /* === ЛОГОТИП === */
  .footer__col--logo img {
    width: 176px;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  /* === МЕНЮ (3 колонки, 2 рядки, з border) === */
  .footer__col--menu {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .footer-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 0px;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 25px 50px; /* всередині рамки */
    margin: 0 auto;
    width: 100%;
    max-width: 360px;
    border: 1px solid #FFFFFF;
    border-radius: 26px;
    box-sizing: border-box;
  }

  .footer-menu li {
    text-align: left;
  }

  .footer-menu li a {
    font-size: 16px;
    color: #FFFFFF;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.3s ease;
  }

  .footer-menu li a:hover {
    opacity: 0.7;
  }

  /* === КОНТАКТИ === */
  .footer__col--contacts {
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
  }

  .footer__contact-item {
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }

  .footer__contact-item img {
    width: 28px;
    height: 28px;
  }

  .footer__contact-item a {
    font-size: 24px;
    color: #FFFFFF;
    font-weight: 500;
    text-decoration: none;
  }

  /* === СОЦМЕРЕЖІ === */
  .footer__socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    margin-top: 10px;
  }

  .footer__socials img {
    width: 42px;
    height: 42px;
    display: block;
  }
}

/* === FOOTER THEME (dark, ties to --inner-accent) === */
.site-footer{
  background: var(--inner-accent, #133447) !important;
  color: #fff !important;
}

/* текст/лінки беруть колір від .site-footer */
.footer-menu li a,
.footer__contact-item a { color: currentColor !important; }

/* бордери/рамки теж від поточного кольору тексту */
@media (max-width: 768px){
  .footer-menu { border-color: currentColor !important; }
}

.footer__contact-item img,
.footer__socials img { /* лишаємо як є; або фарбуємо через inline SVG для exact-кольору */ }


/* === Footer color only on Projects page === */
body.page-template-page-projects .site-footer {
  background: #353E2F !important;
  color: #fff !important;
}

body.page-template-page-projects .site-footer a {
  color: #fff !important;
}

body.page-template-page-projects .site-footer a:hover {
  color: #6F7A62 !important;
}


/* === INNER PAGE HEADER === */

.site-header--inner {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  height: 120px;
  display: flex;
  align-items: center;
}

/* ===== STRUCTURE ===== */
.site-header--inner .header-inner__wrap {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: nowrap;
}

/* ===== LOGO ===== */
.site-header--inner .header-logo img {
  height: 60px;
  width: auto;
  display: block;
}

/* ===== MENU (desktop) ===== */
.site-header--inner .header-menu {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.site-header--inner .inner-menu__wrapper {
  display: flex;
  align-items: center;
  height: 60px;
  border: 3px solid var(--inner-accent);
  border-radius: 40px;
  padding: 4px 6px;
}

.site-header--inner .inner-menu {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header--inner .inner-menu a {
  color: var(--inner-accent);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 25px;
  padding: 2px 14px;
  border-radius: 40px;
  transition: all 0.3s ease;
}

.site-header--inner .inner-menu a:hover {
  color: color-mix(in srgb, var(--inner-accent), #55c2d3 35%);
}

.site-header--inner .inner-menu .current-menu-item a {
  border: 3px solid var(--inner-accent);
  font-size: 33px;
}

/* ===== LANGUAGE SWITCHER (desktop) ===== */
.site-header--inner .lang-switcher {
  flex: 0 0 auto;
  position: static !important;
  margin: 0;
}

.site-header--inner .lang-switcher__wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  border: 3px solid var(--inner-accent);
  border-radius: 40px;
  padding: 4px 6px;
}

.site-header--inner .lang-switcher a {
  font-size: 33px;
  color: var(--inner-accent);
  text-decoration: none;
  padding: 0 10px;
  border-radius: 40px;
  transition: all 0.3s ease;
}

.site-header--inner .lang-switcher a.active {
  border: 2px solid var(--inner-accent);
  font-weight: 700;
}

.site-header--inner .lang-switcher a:hover {
  color: color-mix(in srgb, var(--inner-accent), #55c2d3 35%);
}

/* ===== BURGER ===== */
.site-header--inner .burger {
  display: none;
  width: 60px;
  height: 60px;
  background: transparent url('/wp-content/themes/ttehs-theme/assets/img/burger-servise.svg') no-repeat center / 33px 33px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 31;
  box-shadow: none;
}

/* ===== MOBILE MENU ===== */
.site-header--inner .mobile-nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(84vw, 420px);
  background: #fff;
  z-index: 40;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.2);
}

.site-header--inner .mobile-nav.is-open {
  transform: translateX(0);
}

.site-header--inner .mobile-nav__inner {
  padding: 24px 24px 40px;
  height: 100%;
  overflow: auto;
}

.site-header--inner .mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-header--inner .mobile-menu-list a {
  display: block;
  padding: 14px 18px;
  border-radius: 14px;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--inner-accent);
  background: #fff;
  border: 3px solid var(--inner-accent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--inner-accent), #000 15%);
  transition: all 0.3s ease;
}

.site-header--inner .mobile-menu-list a:hover {
  background: var(--inner-accent);
  color: #fff;
}

/* ===== LANGUAGE SWITCHER (mobile) ===== */
.site-header--inner .mobile-lang {
  margin-top: 24px;
    justify-content: center;
    display: flex;
}

.site-header--inner .mobile-lang .lang-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 60px;
  border: 3px solid var(--inner-accent);
  border-radius: 40px;
  padding: 4px 6px;
  background: #fff;
}

.site-header--inner .mobile-lang .lang-toggle a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-size: 28px;
  font-weight: 500;
  color: var(--inner-accent);
  border-radius: 40px;
  padding: 6px 12px;
  transition: all 0.3s ease;
}

.site-header--inner .mobile-lang .lang-toggle a.active {
  border: 3px solid var(--inner-accent);
  background: var(--inner-accent);
  color: #fff;
}

.site-header--inner .mobile-lang .lang-toggle a:hover:not(.active) {
  background: color-mix(in srgb, var(--inner-accent), #ffffff 80%);
  color: var(--inner-accent);
}

/* ===== OVERLAY ===== */
.site-header--inner .mobile-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 35;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.site-header--inner .mobile-scrim.is-open {
  opacity: 1;
}

body.menu-open {
  overflow: hidden;
}

/* ===== RESPONSIVE ===== */
/* === MOBILE BURGER-МЕНЮ ДЛЯ .site-header--inner як на головній === */

/* <= 1024px: включаємо бургер, ховаємо десктоп-меню, перебудовуємо мобільне меню */
@media (max-width: 1024px) {

  /* Хедер як на головній: синій фон, елементи по краях */
  .site-header--inner {
    height: 90px;
    display: flex;
    align-items: center;
  }

  .site-header--inner .header-inner__wrap {
    width: 100%;
    padding: 0 12px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }

  /* Десктоп-меню + десктоп-перемикач мов ховаємо */
  .site-header--inner .header-menu {
    display: none;
  }
  .site-header--inner .lang-switcher {
    display: none;
  }

  /* Бургер – як на головній */
  .site-header--inner .burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background-color: transparent;
    background-image: url('/wp-content/themes/ttehs-theme/assets/img/burger-project.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 33px 33px;
    cursor: pointer;
    z-index: 31;
  }

  .site-header--inner .burger.is-open {
    background-image: url('/wp-content/themes/ttehs-theme/assets/img/close-inner-page.svg');
  }

  /* Фон на всю ширину екрану під меню (як на головній) */
  .site-header--inner .mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    background: #4A82D5;     /* той самий синій фон */
    border: none;
    border-radius: 0;
    z-index: 40;
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    box-shadow: none;
    transition: transform .3s ease, opacity .3s ease;
  }

  .site-header--inner .mobile-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Внутрішня "картка" з білим бордером */
  .site-header--inner .mobile-nav__inner {
    margin: 20px 27px 20px;
    padding: 16px 20px;
    max-height: calc(100vh - 27px - 32px - 32px);
    overflow: auto;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Пункти меню – 3 в ряд, як на головній */
  .site-header--inner .mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 8px;
  }

  .site-header--inner .mobile-menu-list li {
    list-style: none;
  }

  .site-header--inner .mobile-menu-list a {
    display: block;
    padding: 10px 8px;
    border-radius: 53px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 10px;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid transparent; /* без рамки за замовчуванням */
    text-align: center;
    white-space: nowrap;
    box-shadow: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }

  .site-header--inner .mobile-menu-list a:hover {
    border-color: #FFFFFF;
    opacity: 0.9;
  }

  /* Активний пункт – білий бордер, radius 53 */
  .site-header--inner .mobile-menu-list .current-menu-item > a,
  .site-header--inner .mobile-menu-list .current_page_item > a,
  .site-header--inner .mobile-menu-list .current_page_ancestor > a,
  .site-header--inner .mobile-menu-list a.active {
    border: 1px solid #FFFFFF;
    border-radius: 53px;
  }

  /* Мовний перемикач всередині меню для inner можна сховати, як на головній */
  .site-header--inner .mobile-lang {
    display: none;
  }
}

/* Позиція меню-картки відносно хедера (як на головній) */
@media (max-width: 1024px) {
  .site-header--inner .mobile-nav {
    top: calc(90px + 27px); /* висота хедера + відступ */
  }
}

@media (max-width: 768px) {
  .site-header--inner {
    height: 80px;
  }

  .site-header--inner .header-logo img {
    height: 35px;
  }

  .site-header--inner .mobile-nav {
    top: calc(80px + 0px);
  }
}



/* ====================================
   HEADER PROJECTS (внутрішні сторінки)
   ==================================== */

.site-header--projects {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
}

/* Контейнер хедера */
.site-header--projects .projects-header__wrap {
  width: calc(100% - 120px);
  max-width: 1830px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* ЛОГО (десктоп: 244×56) */
.site-header--projects .header-logo img {
  width: 244px;
  height: 56px;
  object-fit: contain;
  display: block;
}

/* =========================
   ГОЛОВНЕ МЕНЮ (десктоп)
   ========================= */

.site-header--projects .projects-nav {
  flex: 0 0 auto;                 /* блок між лого і мовами */
  display: flex;
  justify-content: center;
}

.site-header--projects .projects-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;

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

  width: 1050px;
  max-width: 100%;
  height: 80px;

  border: 3px solid #133447;
  border-radius: 40px;
  background: #F9F6F5;

  box-sizing: border-box;
  gap: 33px;
}

/* li */
.site-header--projects .projects-menu-list > li {
  margin: 0;
  padding: 0;
}

/* посилання меню */
.site-header--projects .projects-menu-list > li > a {
  display: inline-block;
  text-decoration: none;

  font-size: 25px;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;

  color: #133447;
  padding: 0;
  transition: opacity .2s ease;
}

.site-header--projects .projects-menu-list > li > a:hover {
  opacity: .7;
}

/* =========================
   ПЕРЕМИКАЧ МОВ (десктоп)
   ========================= */

.site-header--projects .lang-switcher {
  position: static;
  z-index: 30;
}

.site-header--projects .lang-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 169px;
  height: 58px;

  background: #ffffff;
  border: 3px solid #133447;
  border-radius: 999px;
  box-shadow: none;
  gap: 0;
  overflow: visible;
}

/* "слайдер" під активною мовою */
.site-header--projects .lang-toggle::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 10px;
  width: calc(50% - 18px);
  border: 2px solid #133447;
  border-radius: 999px;
  pointer-events: none;
  transition: left .25s ease;
}

/* Якщо активна EN — зсуваємо вправо */
.site-header--projects .lang-toggle.is-en::before {
  left: calc(50% + 8px);
}

/* Кнопки мов */
.site-header--projects .lang-toggle a {
  flex: 1 1 0;
  height: 100%;
  padding: 0 12px;

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

  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;

  color: #133447 !important;
  background: transparent;
  border-radius: 999px;
  border: 0;
  transition: opacity .2s ease, color .2s ease;
}

.site-header--projects .lang-toggle a.active {
  color: #133447 !important; /* фон дає рамка ::before */
}

.site-header--projects .lang-toggle a:hover:not(.active) {
  opacity: .7;
}

/* БУРГЕР (по замовчуванню ховаємо – покажемо в @media) */
.site-header--projects .burger {
  display: none;
  width: 60px;
  height: 60px;
  margin-left: 16px;

  background-color: transparent;
  background-image: url('/wp-content/themes/ttehs-theme/assets/img/burger-project.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 33px 33px;

  box-shadow: none;
  border: none;
  cursor: pointer;
  z-index: 31;
}

/* ВИЇЗНЕ МЕНЮ */
  .site-header--projects .mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 90px; /* висота внутрішнього хедера */
    width: 100%;
    background: #FFFFFF;          /* ✅ білий фон замість синього */
    border: none;
    border-radius: 0;
    z-index: 40;
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    box-shadow: none;
    transition: transform .3s ease, opacity .3s ease;
  }

  .site-header--projects .mobile-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .site-header--projects .mobile-nav__inner {
    margin: 20px 27px 20px;
    padding: 16px 20px;
    max-height: calc(100vh - 27px - 32px - 32px);
    overflow: auto;

    background: #FFFFFF;          /* ✅ фон всередині теж білий */
    border: 1px solid #133447;    /* ✅ темна рамка, як на сайті */
    border-radius: 26px;

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

  /* Сітка меню – така ж, як на головній */
  .site-header--projects .mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 8px;
  }

  .site-header--projects .mobile-menu-list li {
    list-style: none;
    z-index: 1000;
  }

  .site-header--projects .mobile-menu-list a {
    display: block;
    padding: 10px 8px;
    border-radius: 53px;
    text-decoration: none;
    text-transform: uppercase;

    font-size: 12px;
    color: #133447;               /* ✅ темний текст */
    background: transparent;
    border: 1px solid transparent;
    text-align: center;
    box-shadow: none;
    white-space: nowrap;

    transition: background .2s ease,
                color .2s ease,
                border-color .2s ease;
  }

  .site-header--projects .mobile-menu-list a:hover {
    border-color: #133447;
    opacity: 0.9;
  }

  /* Активний пункт – з рамкою */
  .site-header--projects .mobile-menu-list .current-menu-item > a,
  .site-header--projects .mobile-menu-list .current_page_item > a,
  .site-header--projects .mobile-menu-list .current_page_ancestor > a,
  .site-header--projects .mobile-menu-list a.is-active {
    border: 1px solid #133447;
    border-radius: 53px;
  }

  /* Мовний перемикач у мобільному меню – якщо треба, можна показати/заховати */
  .site-header--projects .mobile-lang {
    display: none; /* як на головній – поки ховаємо */
  }

  .site-header--projects .mobile-lang .lang-toggle {
    display: flex;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 53px;
    border: 1px solid #133447;
    background: transparent;
  }

  .site-header--projects .mobile-lang .lang-toggle a {
    font-size: 14px;
    color: #133447 !important;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 53px;
    border: 1px solid transparent;
    transition: background .2s ease,
                border-color .2s ease,
                opacity .2s ease;
  }

  .site-header--projects .mobile-lang .lang-toggle a.active {
    border-color: #133447;
  }

  .site-header--projects .mobile-lang .lang-toggle a:hover {
    opacity: 0.8;
  }

  /* Підкладка (можна залишити загальну, але підстрахуємось) */
  .site-header--projects .mobile-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 35;
    opacity: 0;
    transition: opacity .3s ease;
  }

  .site-header--projects .mobile-scrim.is-open {
    opacity: 1;
  }

/* =========================
   АДАПТИВ ( планшет і нижче )
   ========================= */
   
   /* === 1600px ↓: трохи компактніший хедер === */
@media (max-width: 1600px) {

  /* трохи менші бокові відступи і gap */
  .site-header--projects .projects-header__wrap {
    width: calc(100% - 118px);
    gap: 24px;
  }

  /* логотип менший */
  .site-header--projects .header-logo img {
    width: 200px;
    height: auto;
  }

  /* меню – вужче і нижче */
  .site-header--projects .projects-menu-list {
        width: 770px;
        height: 64px;
  }

  /* текст пунктів меню ≈ 18px */
  .site-header--projects .projects-menu-list > li > a {
    font-size: 18px;
  }

  /* перемикач мов теж компактніший */
  .site-header--projects .lang-toggle {
        width: 130px;
        height: 42px;
  }

  .site-header--projects .lang-toggle a {
    font-size: 16px;
  }
}

/* === 1366px ↓: ще компактніше === */
@media (max-width: 1366px) {

  .site-header--projects .projects-header__wrap {
    width: calc(100% - 60px);  /* ще менші поля */
    gap: 20px;
  }

  .site-header--projects .header-logo img {
    width: 180px;
    height: auto;
  }

  .site-header--projects .projects-menu-list {
    width: 760px;
    height: 56px;
    gap: 18px;
  }

  .site-header--projects .projects-menu-list > li > a {
    font-size: 16px;
  }

  .site-header--projects .lang-toggle {
    width: 130px;
    height: 44px;
  }

  .site-header--projects .lang-toggle a {
    font-size: 14px;
  }
}


@media (max-width: 1024px) {

  /* Контейнер – вужчий, без великого gap */
  .site-header--projects .projects-header__wrap {
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;
    justify-content: space-between;
    gap: 16px;
  }

  /* логотип менший */
  .site-header--projects .header-logo img {
    width: auto;
    height: 40px;
  }

  /* Ховаємо десктоп-меню і десктоп-перемикач мов */
  .site-header--projects .projects-nav,
  .site-header--projects .lang-switcher {
    display: none;
  }

  /* Показуємо бургер */
  .site-header--projects .burger {
    display: block;
  }
}

/* Дрібніші мобіли */
@media (max-width: 768px) {
  .site-header--projects .header-logo img {
    height: 35px;
  }

  .site-header--projects .projects-header__wrap {
    padding: 0 16px;
  }
}

/* Простенька анімація, якщо десь будеш використовувати */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Light BOX */

.gp-lightbox{
  position: fixed; inset:0;
  background: rgba(0,0,0,.8);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
}
.gp-lightbox[hidden]{ display:none; }
.gp-img{ max-width: 90vw; max-height: 90vh; }

.gp-close, .gp-prev, .gp-next{
  position: absolute;
  background: rgba(255,255,255,.15);
  color:#fff; border:0; cursor:pointer;
  width:56px; height:56px; border-radius:50%;
  font-size:32px; line-height:56px; text-align:center;
}
.gp-close{ top:20px; right:20px; }
.gp-prev { left:20px; }
.gp-next { right:20px; }
.gp-close:hover, .gp-prev:hover, .gp-next:hover{ background: rgba(255,255,255,.28); }




/* Privacy Policy Page */

.page-template-page-privacy-policy {
color: #133447;
}

body.page-template-page-privacy-policy .site-header--projects .header-logo img {
  content: url('/wp-content/themes/ttehs-theme/assets/img/news-logo.svg');
}

body.page-template-page-privacy-policy .site-header--projects .lang-toggle {
  border-color: #133447;
}

body.page-template-page-privacy-policy .site-header--projects .lang-toggle a {
  color: #133447 !important;
}

body.page-template-page-privacy-policy .site-header--projects .lang-toggle a.active {
  background-color: #F9F6F5;
  color: #133447 !important;
  box-shadow: inset 0 0 10px rgba(19, 52, 71, 0.25);
}

body.page-template-page-privacy-policy .site-header--projects .lang-toggle a:hover {
  opacity: 0.8;
  color: #133447 !important;
}

body.page-template-page-privacy-policy .site-header--projects .lang-toggle::before {
border: 3px solid #133447 !important;
}

body.page-template-page-privacy-policy .site-header--projects .burger {
  background-image: url('/wp-content/themes/ttehs-theme/assets/img/burger-news.svg') !important;
}

@media (max-width: 768px){
body.page-template-page-privacy-policy .container {
width: calc(100% - 40px) !important;
}
}


/* === 404 PAGE === */

.error-404 {
  min-height: calc(100vh - 200px);
  padding: 50px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #FFFFFF;
}

.error-404__inner {
  max-width: 900px;
  margin: 0 auto;
}

/* 404 */
.error-404__code {
  font-size: 256px;
  line-height: 1;
  color: #133447;
  margin: 0 0 32px;
  font-weight: 700;
}

/* Текст під заголовком */
.error-404__text {
  font-size: 40px;
  line-height: 1.3;
  color: #133447;
  margin: 0 0 32px;
}

/* Кнопка "На Головну" */
.error-404__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 48px;
  font-size: 48px;
  line-height: 1.1;
  background-color: #4F8997;
  color: #FFFFFF;
  border-radius: 40px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 20px 12.8px rgba(53, 62, 47, 0.27);
  transition: background-color 0.25s ease, transform 0.2s ease;
}

.error-404__btn:hover {
  background-color: #6F7A62;
  transform: translateY(-2px);
}

/* --- Адаптив --- */

@media (max-width: 1024px) {
  .error-404 {
    min-height: calc(100vh - 160px);
    padding: 60px 16px;
  }

  .error-404__code {
    font-size: 180px;
  }

  .error-404__text {
    font-size: 32px;
  }

  .error-404__btn {
    font-size: 32px;
    padding: 14px 36px;
  }
}

@media (max-width: 768px) {
  .error-404 {
    min-height: calc(100vh - 140px);
    padding: 40px 16px;
  }

  .error-404__code {
    font-size: 120px;
    margin-bottom: 24px;
  }

  .error-404__text {
    font-size: 22px;
    margin-bottom: 24px;
  }

  .error-404__btn {
    font-size: 22px;
    padding: 12px 28px;
    border-radius: 24px;
  }
}



/***************************************************
 * 1. РАМКА СЕКЦІЇ ПІД 1920×1080
 *    - фон по всій ширині: #505944
 *    - всередині рамка 1720×880 з картинкою
 ***************************************************/

/* Вся секція калькулятора по ширині екрану */
.econ-calc {
  background-color: #505944; /* вільне місце по боках і зверху/знизу */
  padding: 100px 0;          /* при 1080px висоти дає ~880px всередині (100+880+100) */
}

/* Розширюємо контейнер ТІЛЬКИ в цій секції до 1720px */
.econ-calc .container {
  max-width: 1720px;  /* ширина фрейму з макету */
  margin: 0 auto;
  padding: 0;
}

/* Основний фрейм 1720×880 з фоном-картинкою */
.econ-calc__layout {
  position: relative;
  width: 100%;
  aspect-ratio: 1720 / 880;
  font-family: "Garet", system-ui, -apple-system, sans-serif;
  overflow: visible;
}

/* Фонова картинка всередині фрейму (1720×880) */
.econ-calc__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* картинка заповнює фрейм, зберігаючи пропорції */
  border-radius: 32px;
  z-index: 0;
  pointer-events: none;        /* фон не заважає клікам по елементам зверху */
}

.econ-calc__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 32px;
}

/* Базовий клас для всіх живих елементів (кнопок, пігулок, полів) */
.econ-calc__spot {
  position: absolute;
}



/***************************************************
 * ПОЛЕ "ВВЕДІТЬ КІЛЬКІСТЬ" — ОДНЕ ПОЛЕ, 216 × 53
 ***************************************************/

/* Позиція поля відносно фону (координати підженеш під макет) */
.econ-calc__spot--amount {
    left: 9%;
    bottom: 33%;
    width: 216px;
    height: 53px;
}

/* Сам інпут: червона капсула, текст по центру, біла лінія під текстом */
.econ-calc__amount-input {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #E03F4F;
  border-radius: 37px;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  padding: 21px 21px;
  box-shadow: inset 0 -1px 0 #ffffff;
}

/* Колір placeholder'а "Введіть кількість" */
.econ-calc__amount-input::placeholder {
  color: #ffffff;
  opacity: 1; /* щоб точно був білий, не сірий */
}




/***************************************************
 * КНОПКА "ВИД" — 137 × 53 + ДРОПДАУН
 ***************************************************/

/* Позиція блоку кнопки "ВИД" відносно фону */
.econ-calc__spot--type {
  left: 9%;
  bottom: 23%;
  height: 64px;
  z-index: 5;
  overflow: visible;
  width: auto;
  white-space: nowrap;
}

/* Кнопка вибору виду біомаси:
   фон білий, бордер 3px #E03F4F, радіус 37, все по центру */
.econ-calc__type-trigger {
  width: auto;              /* кнопка розтягується під текст */
  height: 100%;
  display: inline-flex;
  border-radius: 37px;
  border: 3px solid #E03F4F;
  background: #ffffff;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  cursor: pointer;
  box-sizing: border-box;
}

/* Іконка vid.svg зліва — невелика */
.econ-calc__type-icon {
  width: 16px;
  height: 16px;
  display: block;
}

/* Текст "ВИД" — 24px, E03F4F, великими літерами, по центру разом з іконкою */
.econ-calc__type-text {
  font-size: 24px;
  font-weight: 700;
  color: #E03F4F;
  text-transform: uppercase;
  line-height: 1;
}

/* Випадаючий список — під кнопкою, поверх всього */
.econ-calc__type-list {
  position: absolute;
  top: 100%;          /* одразу під кнопкою */
  left: 0;
  margin-top: 6px;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);

  display: none;      /* по замовчуванню не видно */
  z-index: 9999;      /* поверх усіх елементів калькулятора */
}

/* Показуємо список, коли JS додає клас */
.econ-calc__type-list.is-open {
  display: block;
}

/* Окремий пункт списку */
.econ-calc__type-list li {
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}

/* Ховер по пункту списку */
.econ-calc__type-list li:hover {
  background: #ffe5e5;
}

.econ-calc__type-list li.is-active {
  background: #ffe5e5;
  font-weight: 600;
}

.econ-calc__type-list li.is-active:hover {
  background: #ffd4d4;
}


/***************************************************
 * ПОТУЖНІСТЬ (рекомендована, МВт)
 ***************************************************/

.econ-calc__spot--power {
  left: 54%;
  bottom: 30%;
  transform: translateX(-50%);
}

.econ-calc__pill--light {
  background: #ffffff;
  color: #30412f;
  border: 1px solid #30412f;
}




/***************************************************
 * 4. ТАБЛЕТКА "ГАЗ" (XXXX м³ газу)
 ***************************************************/

/* Позиція таблетки газу посередині під куполами */
.econ-calc__spot--gas {
    left: 36%;
    bottom: 32%;
    transform: translateX(-50%);
}

/* Спільний базовий стиль «пігулок»-результатів */
.econ-calc__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 16px 26px;
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
}

/* Числове значення всередині пігулки */
.econ-calc__pill span[data-result] {
  margin-right: 4px;
  font-weight: 700;
}

/* Темна пігулка (газ) */
.econ-calc__pill--dark {
  background: #30412f;
  color: #ffffff;
}



/***************************************************
 * 5. ТАБЛЕТКА "ТЕПЛО" (XXXX кВт тепла)
 ***************************************************/

/* Позиція пігулки тепла (верхня синя) */
.econ-calc__spot--heat {
    left: 53.5%;
    top: 17%;
    transform: translateX(-50%);
}

/* Синя пігулка */
.econ-calc__pill--blue {
  background: #0a4d68;
  color: #ffffff;
}



/***************************************************
 * 6. ТАБЛЕТКА "ЕНЕРГІЯ" + СОБІВАРТІСТЬ 1 кВт·год
 ***************************************************/

/* Позиція пігулки енергії праворуч */
.econ-calc__spot--energy {
	right: 19%;
  bottom: 34%;
  transform: translateX(50%);
}


/* Коричнева пігулка (енергія) */
.econ-calc__pill--brown {
  background: #3c2415;
  color: #ffffff;
}

/* Позиція тексту "Собівартість 1 кВт·год" */
.econ-calc__spot--cost {
	right: 4%;
    bottom: 25%;
}

/* Маленький текст собівартості */

.econ-calc__cost {
  display: inline-block;
  border-radius: 40px;
  border: 2px solid #3c2415;
  padding: 14px 18px;
  background: #ffffff;
  font-size: 18px;
  color: #3c2415;
  text-align: center;
  box-sizing: border-box;
}

/***************************************************
 * 7. БЛОК "ЕКОНОМІЯ ... НА X%"
 ***************************************************/

/* Позиція білого прямокутника з текстом «Економія» */
.econ-calc__spot--saving {
  right: 8%;
  top: 10%;
  width: 25%;
}

/* Картка економії */
.econ-calc__economy-card {
    border-radius: 24px;
    border: 2px solid #132019;
    padding: 16px 20px;
    background: #fffef7;
    font-size: 25px;
    text-align: center;
}

/* Заголовок «Економія» */
.econ-calc__economy-title {
    font-weight: 700;
    margin-bottom: 6px;
    text-align: center;
    text-transform: uppercase;
    font-size: 32px;
    color: #353E2F;
}

.econ-calc__economy-value span[data-result="savingPercent"] {
  font-weight: 700;
}


/***************************************************
 * 8. БЛОК "ОКУПНІСТЬ ЗА X МІСЯЦІВ"
 ***************************************************/

/* Позиція блоку окупності внизу зліва */
.econ-calc__spot--payback {
  left: 8%;
  bottom: 5%;
  width: 32%;
}

/* Картка окупності */
.econ-calc__payback-card {
    border-radius: 30px;
    border: 2px solid #000000;
    padding: 22px 20px;
    background: #ffffff;
    font-weight: 600;
    font-size: 32px;
    color: #353E2F;
    text-align: center;
    }

.econ-calc__payback-card .econ-calc__payback-value {
  font-weight: 700;
}



/***************************************************
 * 9. КНОПКА CTA "ЗАМОВТЕ КОНСУЛЬТАЦІЮ..."
 ***************************************************/

/* Позиція зеленої кнопки внизу справа */
.econ-calc__spot--cta {
	right: 8%;
    bottom: 5%;
    width: 35%;
}

/* Стиль зеленої кнопки */
.econ-calc__cta-btn {
    display: block;
    width: 100%;
    border-radius: 40px;
    border: none;
    padding: 18px 0px;
    background: #30412f;
    color: #ffffff;
    font-weight: 700;
    font-size: 25px;
    cursor: pointer;
    text-transform: uppercase;
    font-family: "Garet", system-ui, -apple-system, sans-serif;
}

/***************************************************
 * 10. ЗАГОЛОВОК "Калькулятор економічної вигоди"
 *     + ВСПЛИВАЮЧИЙ КОМЕНТАР (ТУЛТІП)
 ***************************************************/

/* Позиція заголовка в лівому верхньому куті фрейму 1720×880 */
.econ-calc__spot--title {
  left: 6%;     /* підженеш по макету */
  top: 8%;      /* підженеш по макету */
  width: 360px; /* приблизна ширина блоку з трьома рядками */
}

/* Обгортка заголовка + тултіп (щоб тултіп позиціонувався відносно заголовка) */
.econ-calc__title-wrap {
  position: relative;
  display: inline-block;
}


.econ-calc__title {
  margin: 0;
  font-family: "Garet", system-ui, -apple-system, sans-serif;
  font-size: 64px;
  line-height: 1.4;
  font-weight: 700;
  color: #353E2F;
}



/* Тултіп з описом (відкривається при hover) */

/* ОБГОРТКА ДЛЯ ПІДКАЗОК */
.econ-calc__tooltip-wrap {
  position: relative;
  display: inline-block;
}

/* БАЗОВИЙ ТУЛТІП (ПОТІМ ПЕРЕФАРБОВУЄМО ДЛЯ КОЖНОГО БЛОКУ) */
.econ-calc__tooltip {
  position: absolute;
  left: 0;
  top: 100%;
  max-width: 520px;         /* було ~420 – зробили ширшим */
  min-width: 260px;         /* щоб не був надто вузьким */
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(53, 62, 47, 0.96);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  font-family: "Garet", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 99999;           /* МАКСИМАЛЬНИЙ, ЩОБ БУТИ НАД УСІМ */
  pointer-events: none;     /* щоб тултіп не перехоплював hover */
}

.econ-calc__tooltip p {
  margin: 0 0 6px;
}

.econ-calc__tooltip p:last-child {
  margin-bottom: 0;
}

.econ-calc__tooltip::before {
  content: "";
  position: absolute;
  left: 18px;
  top: -8px;
  border-width: 0 8px 8px 8px;
  border-style: solid;
  border-color: transparent transparent rgba(53, 62, 47, 0.96) transparent;
}

/* Показ – для заголовка та всіх елементів з econ-calc__tooltip-wrap */
.econ-calc__title-wrap:hover .econ-calc__tooltip,
.econ-calc__tooltip-wrap:hover .econ-calc__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}



/***************************************************
 * АДАПТИВ: ЕКРАНИ ДО 1600 PX
 ***************************************************/
@media (max-width: 1600px) {

  .econ-calc {
    padding: 70px 0;
  }

  /* заголовок менший */
  .econ-calc__title {
    font-size: 52px;
  }

  /* поле "Введіть кількість" — злегка менше */
  .econ-calc__spot--amount {
    left: 8%;
    bottom: 33%;
    width: 190px;
    height: 48px;
  }

  .econ-calc__amount-input {
    font-size: 18px;
  }

  /* кнопка "ВИД" */
  .econ-calc__spot--type {
   		left: 8%;
        bottom: 25%;
        width: 120px;
        height: 41px;
  }

  .econ-calc__type-text {
    font-size: 18px;
  }

  /* пігулки (газ / тепло / енергія / потужність) */
  .econ-calc__pill {
    padding: 10px 32px;
    font-size: 12px;
  }

  /* економія + окупність + CTA */
  .econ-calc__economy-card {
    font-size: 20px;
  }

  .econ-calc__economy-title {
    font-size: 26px;
  }

  .econ-calc__payback-card {
    font-size: 26px;
    padding: 12px 18px;
  }

  .econ-calc__cta-btn {
    font-size: 20px;
    padding: 16px 0;
  }

  /* тултіп трохи менший */
  .econ-calc__tooltip {
    font-size: 12px;
  }
  
  .econ-calc__spot--heat {
    left: 53.5%;
    top: 17.5%;
}

.econ-calc__spot--gas {
        left: 36%;
        bottom: 35%;
}

.econ-calc__spot--power {
		left: 54%;
        bottom: 32%;
}

.econ-calc__spot--energy {
        right: 19%;
        bottom: 36%;
}

.econ-calc__cost {
	font-size: 12px;
	padding: 9px 18px;
}

.econ-calc__spot--cost {
        right: 6%;
        bottom: 28%;
}

.econ-calc__amount-input {
	padding: 10px 21px;
}
}

/***************************************************
 * АДАПТИВ: ЕКРАНИ ДО 1366 PX
 ***************************************************/
@media (max-width: 1366px) {

  .econ-calc {
    padding: 50px 0;
  }

  /* трохи зменшуємо фактичний фрейм всередині */
  .econ-calc .container {
    max-width: 1400px;
  }

  .econ-calc__title {
    font-size: 40px;
  }

  /* поле "Введіть кількість" */
  .econ-calc__spot--amount {
    left: 7%;
    bottom: 34%;
    width: 170px;
    height: 44px;
  }

  .econ-calc__amount-input {
    font-size: 16px;
  }

  /* кнопка "ВИД" */
  .econ-calc__spot--type {
    left: 7%;
    bottom: 24%;
    width: 110px;
    height: 44px;
  }

  .econ-calc__type-text {
    font-size: 16px;
  }

  .econ-calc__type-icon {
    width: 14px;
    height: 14px;
  }
  
  .econ-calc__cost {
  font-size: 11px;
  padding: 6px 18px;
  }

  /* пігулки – ще компактніші */
  .econ-calc__pill {
    padding: 8px 24px;
    font-size: 11px;
  }

  /* трохи зменшуємо позиції, щоб не упирались у краї */
  .econ-calc__spot--gas {
		left: 36%;
        bottom: 35%;
  }

  .econ-calc__spot--heat {
    left: 45%;
    top: 17%;
  }

  .econ-calc__spot--energy {
		right: 19%;
        bottom: 37%;
  }

    .econ-calc__spot--cost {
        right: 5.5%;
        bottom: 30%;
    }
    
        .econ-calc__spot--power {
		left: 54%;
        bottom: 33%;
    }

  /* економія */
  .econ-calc__spot--saving {
    right: 7%;
    top: 11%;
    width: 27%;
  }

  .econ-calc__economy-card {
    font-size: 18px;
    padding: 14px 16px;
  }

  .econ-calc__economy-title {
    font-size: 22px;
  }

  /* окупність */
  .econ-calc__spot--payback {
    left: 7%;
    bottom: 6%;
    width: 28%;
  }

  .econ-calc__payback-card {
    font-size: 22px;
    padding: 12px 16px;
  }

  /* CTA */
  .econ-calc__spot--cta {
    right: 7%;
    bottom: 6%;
    width: 36%;
  }

  .econ-calc__cta-btn {
    font-size: 18px;
    padding: 14px 0;
  }

  /* тултіп — ще компактніший */
  .econ-calc__tooltip {
    font-size: 12px;
    max-width: 360px;
  }
}


/*Тутлтіпи бекграунди */

.econ-calc__spot--amount .econ-calc__tooltip {
  background: #E03F4F;
  color: #ffffff;
}

.econ-calc__spot--amount .econ-calc__tooltip::before {
  border-color: transparent transparent #E03F4F transparent;
}

.econ-calc__spot--gas .econ-calc__tooltip {
  background: #30412f;
  color: #ffffff;
}

.econ-calc__spot--gas .econ-calc__tooltip::before {
  border-color: transparent transparent #30412f transparent;
}

.econ-calc__spot--heat .econ-calc__tooltip {
  background: #0a4d68;
  color: #ffffff;
}

.econ-calc__spot--heat .econ-calc__tooltip::before {
  border-color: transparent transparent #0a4d68 transparent;
}

.econ-calc__spot--energy .econ-calc__tooltip {
  background: #3c2415;
  color: #ffffff;
}

.econ-calc__spot--energy .econ-calc__tooltip::before {
  border-color: transparent transparent #3c2415 transparent;
}

.econ-calc__spot--power .econ-calc__tooltip {
  background: #ffffff;
  color: #30412f;
}

.econ-calc__spot--power .econ-calc__tooltip::before {
  border-color: transparent transparent #ffffff transparent;
}

.econ-calc__spot--cost .econ-calc__tooltip {
  background: #ffffff;
  color: #353E2F;
}

.econ-calc__spot--cost .econ-calc__tooltip::before {
  border-color: transparent transparent #ffffff transparent;
}

.econ-calc__spot--saving .econ-calc__tooltip {
  background: #fffef7;
  color: #353E2F;
}

.econ-calc__spot--saving .econ-calc__tooltip::before {
  border-color: transparent transparent #fffef7 transparent;
}

.econ-calc__spot--payback .econ-calc__tooltip {
  background: #ffffff;
  color: #353E2F;
}

.econ-calc__spot--payback .econ-calc__tooltip::before {
  border-color: transparent transparent #ffffff transparent;
}

.econ-calc__spot--cta .econ-calc__tooltip {
  background: #30412f;
  color: #ffffff;
}

.econ-calc__spot--cta .econ-calc__tooltip::before {
  border-color: transparent transparent #30412f transparent;
}


/***************************************************
 * МОБІЛЬНИЙ ВАРІАНТ (ВЕРТИКАЛЬНИЙ) ≤ 768px
 ***************************************************/
@media (max-width: 768px) {

  .econ-calc {
    padding: 40px 0;
  }

.econ-calc .container {
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto;
  }
  
  .econ-calc__layout {
    width: min(345px, 100vw);   /* не більше 345, але і не ширше екрана */
    aspect-ratio: 345 / 1187;
    margin: 0 auto;
  }

  .econ-calc__bg {
    object-fit: contain;
  }
  
  /* базово всі споти центруємо по X */
  .econ-calc__spot {
    left: 50%;
    transform: translateX(-50%);
  }

  /*********** Заголовок ***********/
  .econ-calc__spot--title {
    top: 6%;
    width: 80%;
    text-align: center;
  }

  .econ-calc__title {
    font-size: 20px;
    line-height: 1.3;
    text-align: left;
  }

  .econ-calc__title-wrap {
    display: grid;
    margin-top: -30px;
  }

  .econ-calc__title-wrap .econ-calc__tooltip {
    left: 50%;
    transform: translate(-50%, 6px);
  }

  /*********** Введіть кількість ***********/
  .econ-calc__spot--amount {
    top: 14%;
    width: 147px;
    height: 43px;
    left: 68%;
  }

  .econ-calc__amount-input {
    width: 100%;
    height: 100%;
    font-size: 13px;
    padding: 14px 6px;
    box-shadow: inset 0 -1px 0 #ffffff;
    text-decoration: underline;
  }

  /*********** ВИД ***********/
  .econ-calc__spot--type {
    top: 19%;
    width: 75px;
    height: 29px;
    left: 57%;
    position: absolute;
  }

  .econ-calc__type-trigger {
    width: 100%;
    height: 100%;
    padding: 0 8px;
  }

 .econ-calc__type-text {
    font-size: 13px;
    display: block;
    flex: 1 1 auto;
    min-width: 0;             /* критично для ellipsis у flex */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .econ-calc__type-icon {
    width: 12px;
    height: 12px;
  }

  
  .econ-calc__type-list {
    left: 50%;
    transform: translateX(-50%);
    max-width: 90vw;      /* не ширший за екран */
    width: max-content;   /* але не стискаємо зайве */
    white-space: normal;  /* дозволяємо перенос рядків */
  }

  .econ-calc__type-list li {
    white-space: normal;  /* кожен пункт може переноситися */
  }
  
  /*********** Пігулки (газ / тепло / енергія / потужність) ***********/
  .econ-calc__pill {
        width: 100%;
        height: 100%;
        padding: 10px 5px;
        font-size: 11px;
  }

.econ-calc__spot--gas {
    top: 34%;
    left: 59%;
    transform: translateX(-50%);
  }

  .econ-calc__spot--power {
    top: 43%;
    left: 65%;
    transform: translateX(-50%);
  }

  .econ-calc__spot--heat {
    top: 65%;
    left: 26%;
    transform: translateX(-50%);
  }

  .econ-calc__spot--energy {
    top: 70%;
    left: 73%;
    transform: translateX(-50%);
  }
  
    .econ-calc__spot--gas,
  .econ-calc__spot--power,
  .econ-calc__spot--heat,
  .econ-calc__spot--energy {
    width: auto;
    height: auto;
  }
  /*********** Окупність — ТІЛЬКИ ТЕКСТ ***********/
  .econ-calc__spot--payback {
        top: 78%;
        width: 100%;
        text-align: center;
  }

  .econ-calc__payback-card {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: 20px;
    text-align: center;
  }

  /*********** Економія (Вартість виробництва...) — ТІЛЬКИ ТЕКСТ ***********/
  .econ-calc__spot--saving {
    top: 82%;
    width: 100%;
  }

  .econ-calc__economy-card {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: 13px;
    text-align: center;
  }

  .econ-calc__economy-title {
    font-size: 16px;
    margin-bottom: 4px;
  }

  /*********** Собівартість 1 кВт·год (може лишатись як є, якщо ок) ***********/
  .econ-calc__spot--cost {
    top: 74%;
    width: 80%;
  }

  .econ-calc__cost {
    width: 100%;
    font-size: 13px;
    padding: 12px 0px;
    border-radius: 0;
    border: none;
    background: none;
  }

  /*********** Кнопка CTA — ТРЕТЬОЮ, ПІД "ВАРТІСТЬ" ***********/
  .econ-calc__spot--cta {
    top: 91%;
    bottom: auto;
    width: 80%;
  }

  .econ-calc__cta-btn {
    width: 100%;
    height: 92px;
    font-size: 14px;
    padding: 12px 16px;
    line-height: 1.3;
    border-radius: 9px;
  }

  /*********** Тултіп трохи компактніший на мобільному ***********/
  .econ-calc__tooltip {
    max-width: 280px;
    font-size: 11px;
    min-width: auto;
  }
}


/***************************************************
 * ПЛАНШЕТИ (iPad Air / Pro портрет) 769–1180px
 ***************************************************/
@media (min-width: 769px) and (max-width: 1180px) {

  .econ-calc {
    padding: 40px 23px;
  }

.econ-calc .container {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.econ-calc {
  overflow-x: clip;
}

  .econ-calc__layout {
    max-width: 1040px;
    margin: 0 auto;
  }

  /*********** Заголовок ***********/
  .econ-calc__spot--title {
    left: 5%;
    top: 7%;
    width: 320px;
  }

  .econ-calc__title {
    font-size: 32px;
    line-height: 1.3;
  }

  /*********** Введіть кількість ***********/
  .econ-calc__spot--amount {
    left: 6%;
    bottom: 31%;
    width: 150px;
    height: 40px;
  }

  .econ-calc__amount-input {
    font-size: 14px;
    padding: 10px 10px;
  }

  /*********** ВИД ***********/
  .econ-calc__spot--type {
    left: 6%;
    bottom: 20%;
    width: 100px;
    height: 40px;
  }

  .econ-calc__type-text {
    font-size: 11px;
  }

  .econ-calc__type-icon {
    width: 12px;
    height: 12px;
  }

  /*********** Пігулки ***********/
  .econ-calc__pill {
    padding: 5px 20px;
    font-size: 10px;
  }

  .econ-calc__spot--gas {
        left: 36%;
        bottom: 35%;
  }

  .econ-calc__spot--power {
		left: 54%;
        bottom: 32%;
  }

  .econ-calc__spot--heat {
        left: 54%;
        top: 18%;
  }

  .econ-calc__spot--energy {
		right: 20%;
        bottom: 36%;
  }

  /*********** Собівартість ***********/
  .econ-calc__spot--cost {
        right: 7%;
        bottom: 28%;
  }

  .econ-calc__cost {
    font-size: 11px;
    padding: 4px 14px;
  }

  /*********** Економія ***********/
  .econ-calc__spot--saving {
    right: 6%;
    top: 11%;
    width: 26%;
  }

  .econ-calc__economy-title {
    font-size: 14px;
  }
  
  .econ-calc__economy-text {
  font-size: 12px;
  }

  .econ-calc__economy-card {
    font-size: 14px;
    padding: 10px 12px;
  }

  /*********** Окупність ***********/
  .econ-calc__spot--payback {
    left: 6%;
    bottom: 6%;
    width: 28%;
  }

  .econ-calc__payback-card {
    font-size: 14px;
    padding: 10px 12px;
  }

  /*********** Кнопка CTA ***********/
  .econ-calc__spot--cta {
    right: 6%;
    bottom: 6%;
    width: 36%;
  }

  .econ-calc__cta-btn {
    font-size: 10px;
    padding: 12px 0;
  }

  /*********** Тултіп ***********/
  .econ-calc__tooltip {
    font-size: 11px;
    max-width: 320px;
  }
  
  .econ-calc__type-list li {
    font-size: 10px;
}
}