
@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&display=swap');

body, html {width: 100%;background: #F7F7F6;}
body, th, td {font-size:18px; font-weight:300;line-height:160%;color: #4F4F4F;font-family: "Geologica", sans-serif;  font-optical-sizing: auto;  font-style: normal;  font-variation-settings:    "slnt" 0,    "CRSV" 0,    "SHRP" 0;}
body, form, object {margin: 0;padding: 0;}
img, table {border: none;}
table {border-collapse: collapse;}
table td {padding: 0;}
a { color:  #4F4F4F; text-decoration:underline; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -ms-transition:0.5s; -o-transition:0.5s; }
a:hover {text-decoration:none;}
:focus {outline:none!important;text-decoration:none!important;}
/* Заголовки секцій та елементів переведені з div у h2/h3 заради структури сторінки.
   :where() має нульову специфічність, тому це лише знімає стилі браузера —
   будь-яке правило теми, навіть за одним класом, і далі має пріоритет. */
:where(h2, h3, h4, h5, h6) {margin:0;font-size:inherit;font-weight:inherit;line-height:inherit;}
.f-20 {font-size:20px;line-height:180%;}


.simpleParallax {height:100%;}
.wrapper {padding:0px 0 0 0;position:relative;z-index:2;overflow:hidden;}
.sticky {position:fixed;}
.stop {  position: relative;}
.bold {font-weight:bold;}
.container-fluid {max-width:1400px;}
.italic {font-style:italic;}
img {max-width:100%; height:auto;}
button {border:0;outline: none!important; background:none; padding:0; transition:350ms cubic-bezier(.25,.74,.22,.99); -webkit-transition:350ms cubic-bezier(.25,.74,.22,.99); -moz-transition:350ms cubic-bezier(.25,.74,.22,.99); -ms-transition:350ms cubic-bezier(.25,.74,.22,.99); -o-transition:350ms cubic-bezier(.25,.74,.22,.99); }
.ic:before { transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -ms-transition:0.5s; -o-transition:0.5s; }
.ic { transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -ms-transition:0.5s; -o-transition:0.5s; }
.h-100 {    height: 100% !important;}
.menu-open {overflow:hidden;}

.margin-bottom {margin-bottom:180px!important;}


.gutters-40 {margin-right: -40px;margin-left: -40px;}
.gutters-40 > .col,.gutters-40 > [class*="col-"] {padding-right: 40px; padding-left: 40px;}
.gutters-10 {margin-right: -10px;margin-left: -10px;}
.gutters-10 > .col,.gutters-10 > [class*="col-"] {padding-right: 10px; padding-left: 10px;}

::-webkit-scrollbar { width: 6px; border-radius: 8px; background-color: transparent; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; }
::-webkit-scrollbar-thumb { border-radius: 8px; background-color: #FFE03C; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; }
::-webkit-scrollbar-track { border-radius: 8px; background-color: transparent; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; }
::-webkit-scrollbar:horizontal{display:none;}


.link-default {white-space: nowrap; position:relative;text-decoration:none;color: var(--Titles, #1D1D1B); font-family: Geologica;  font-size: 16px;  font-weight: 500;  text-transform: uppercase;}
.link-default .ic { font-size:20px; margin:0 0 0 8px; transition:0.5s ; -webkit-transition:0.5s ; -moz-transition:0.5s ; -ms-transition:0.5s ; -o-transition:0.5s ; }
.link-default .ic.ic2 { position:absolute; right:0; top:50%; transform:translateY(-50%) ; -webkit-transform:translateY(-50%) ; -moz-transform:translateY(-50%) ; -ms-transform:translateY(-50%) ; -o-transform:translateY(-50%) ; }
.link-default:hover .value {text-decoration: underline;}
.link-default:hover .ic:before {color:#EFD02B;}
.link-default:hover .ic.ic2 {right:-10px;}
.item:hover .link-default .value {text-decoration: underline;}
.item:hover .link-default .ic:before {color:#EFD02B;}
.item:hover .link-default .ic.ic2 {right:-10px;}


.btn-default { white-space: nowrap; text-decoration:none; border:0; padding:23px 48px;color: var(--Titles, #1D1D1B);  font-weight: 500;  line-height: 100%;  text-transform: uppercase; border-radius: 16px; background: var(--Akcent, #FFE03C); box-shadow: 0px 4px 20px 0px rgba(255, 224, 60, 0.60), 0px -2px 2px 0px rgba(0, 0, 0, 0.04) inset; -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; }
.btn-default:hover {background: var(--efd-02-b, #EFD02B);box-shadow:none;}

h1 {margin:0 0 48px 0;color: var(--Titles, #1D1D1B);  font-size: 88px;  font-weight: 600;  line-height: 100%;}
.content {padding:230px 0 0 0;}






.header.fix {background: #F7F7F6;box-shadow:0 2px 2px rgba(0,0,0,0.1);}
.header.out { transform:translateY(-100%) ; -webkit-transform:translateY(-100%) ; -moz-transform:translateY(-100%) ; -ms-transform:translateY(-100%) ; -o-transform:translateY(-100%) ; }



.header {z-index:100; padding:16px 0; position:fixed; top:0; left:0; right:0; transition:0.5s ; -webkit-transition:0.5s ; -moz-transition:0.5s ; -ms-transition:0.5s ; -o-transition:0.5s ; }
.header .logo {display:block;margin:0 65px 0 0;width:273px;min-width:273px;}
.header .main-menu {width:100%;}

.header .header-phones {position:relative;margin:0 0px 0 65px;}
.header .header-phones .phone-button {color: #1D1D1B;  padding:10px 0;  font-size: 20px;    font-weight: 700;    line-height: normal;  }
.header .header-phones .phone-button a {text-decoration:none;color: #1D1D1B;white-space: nowrap;  }

.header .header-phones .phone-button .ic {font-size:24px;}
.header .header-phones .phone-button .ic:first-child {margin:0 8px 0 0;}
.header .header-phones .phone-button .ic:last-child {margin:0 0px 0 8px;}

.header .header-phones .phones-dropdown {box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);  opacity:0; visibility: hidden; margin:30px 0 0 0; position:absolute; top:100%;  right:0px; background: #F7F7F6; padding:15px 15px 15px 15px; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -ms-transition:0.5s; -o-transition:0.5s; border-radius:16px; -webkit-border-radius:16px; -moz-border-radius:16px; -ms-border-radius:16px; -o-border-radius:16px; }
.header .header-phones .phones-dropdown .value {display:block;text-decoration:none;margin:0px 0 0px 0;color: #1D1D1B;    font-size: 16px;    font-weight: 600;    white-space: nowrap;   }
.header .header-phones .phones-dropdown .value:hover {color:#FFE03C;}

.header .main-menu .nav-item {display:block;text-decoration:none;padding:0 5px;color: var(--Titles, #1D1D1B);  font-size: 16px;  font-weight: 500;  text-transform: uppercase;}
/* Пункти, які лише розкривають підменю, — це button. Знімаємо стилі браузера, щоб вони не відрізнялись від посилань. */
.header .main-menu button.nav-item {background:none;border:0;line-height:inherit;font-family:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;}
.header .main-menu li {height:100%;vertical-align: middle;}
.header .main-menu li .nav-item .ic { font-size:20px; margin:0 0 2px 8px; transition:0.5s ; -webkit-transition:0.5s ; -moz-transition:0.5s ; -ms-transition:0.5s ; -o-transition:0.5s ; }
.header .main-menu li.li-drop:hover .nav-item .ic { transform:rotate(180deg) ; -webkit-transform:rotate(180deg) ; -moz-transform:rotate(180deg) ; -ms-transform:rotate(180deg) ; -o-transform:rotate(180deg) ; }
.header .header-container { position:relative; }
.header .drop-menu { opacity:0; visibility: hidden; margin:15px 0 0 0; position:absolute; top:100%; left:0; width:100%; padding:24px 14px; border-radius: 12px; background: var(--Total-white, #FFF); box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.10); -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; -o-border-radius: 12px; transition:0.5s ; -webkit-transition:0.5s ; -moz-transition:0.5s ; -ms-transition:0.5s ; -o-transition:0.5s ; }
.header .drop-menu li {width:100%;max-width:25%;}
.header .drop-menu li .drop-item {position:relative; height:312px; padding:24px;border-radius: 8px;  background: #F7F7F6;margin:0 10px;display:block;text-decoration:none;}
.header .drop-menu li .drop-item .menu-name {margin:0 0 20px 0;color: var(--Titles, #1D1D1B);  font-size: 24px;  font-weight: 600;  line-height: 100%;}
.header .drop-menu li .drop-item .menu-image {position:absolute;bottom:0;right:0;}
.header .li-drop:hover .drop-menu {opacity:1; visibility: visible; margin:0px 0 0 0;}



.footer {background: var(--Titles, #1D1D1B);padding:100px 0 0 0;}
.footer .footer-right {width:323px;}
.footer .footer-center {width:488px;}
.footer .footer-title {color: var(--Total-white, #FFF);  font-size: 40px;  font-weight: 600;  line-height: 100%;}
.footer .logo {width:323px;min-width:323px;margin:0 48px 0 0;}
.footer .footer-location {width:323px;min-width:323px;margin:0 48px 0 0;}
.footer .footer-bottom {background:rgba(66, 71, 83, 0.2);padding:24px 0;color:#929293;font-size: 14px;  line-height: 160%;}
.footer .footer-bottom a {color:#929293;text-decoration:none;}
.footer .footer-bottom a:hover {color:#fff;text-decoration: underline;}
.footer .footer-middle {margin:64px 0;}
.footer .footer-nav .nav a {display:block;text-decoration:none;color: var(--Total-white, #FFF); margin:0 0 27px 0;  font-size: 16px;  font-weight: 400;  text-transform: uppercase;}
.footer .footer-nav .nav li:last-child a {margin:0;}
.footer .footer-nav .nav a:hover {text-decoration: underline;}

.footer .footer-location .data {color: var(--Total-white, #FFF);  font-size: 28px;  font-weight: 600;  line-height: 100%;}
.footer .footer-location .value {display:block;margin:32px 0 0 0;color: var(--Total-white, #FFF);text-decoration:none;}
.footer .footer-location .value .ic {font-size:28px;margin:0 8px 0 0;}
.footer .phone {text-decoration:none;margin:0 0 32px 0;color: var(--Total-white, #FFF);  font-size: 28px;  line-height: 100%;}
.footer .phone .ic {font-size:28px;margin:0 8px 0 0;}
.footer .phone .ic:before  {color:#fff;}

.footer .email {text-decoration:none;color: var(--Total-white, #FFF);  font-size: 18px;  line-height: 100%;}
.footer .email .ic {font-size:32px;margin:0 8px 0 0;}
.footer .email .ic:before  {color:#fff;}
.footer a:hover .value {text-decoration: underline;}


.footer .socials {margin-top:52px;}
.socials {position:relative;margin:0 -10px;}
.socials .item { margin:0 10px; padding:10px 30px; text-decoration:none!important;color: var(--Total-white, #FFF);  font-size: 16px;  font-weight: 500;  text-transform: uppercase; border-radius: 16px; border: 2px solid var(--Akcent, #FFE03C); box-shadow: 0px -2px 2px 0px rgba(0, 0, 0, 0.04) inset; -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; }
.socials .item .value {text-decoration:none!important;}
.socials .item .ic {font-size:32px;}
.socials .item:hover {background:#FFE03C;color:#1D1D1B;}
.socials .item:hover .ic:before {color:#1D1D1B;}

.home .content {padding:126px 0 0 0;}

.main-hero .hero-container {position:relative;}
.main-hero .hero-info {padding:64px 0 58px 0;position:relative;z-index:3;}
.main-hero .hero-info .hero-title {margin:0 0 20px 0;color: var(--Titles, #1D1D1B);  font-size: 28px;  font-weight: 600;  line-height: 100%;  letter-spacing: 1.12px;  text-transform: uppercase;}
.main-hero .hero-info h1 {margin:0 0 32px 0;color: var(--Titles, #1D1D1B);  font-size: 204px;  font-weight: 600;  line-height: 100%;  letter-spacing: 24.48px;}
.main-hero .hero-info .hero-anons {margin:0 0 40px 0;max-width:420px;color: var(--Titles, #1D1D1B);  font-size: 20px;}
.main-hero .hero-counts {margin:58px 0 0px 0;}
.main-hero .hero-counts .item {margin:0 0 32px 0;}
.main-hero .hero-counts .item .data {color: var(--Titles, #1D1D1B);  font-size: 64px;  font-weight: 800;  line-height: 100%;}
.main-hero .hero-counts .item .value {margin:0 0 0 24px;max-width:210px;color: var(--Titles, #1D1D1B);  font-weight: 500;  line-height: 100%;}
.main-hero .hero-circle {position:absolute;top:0;left:46%;z-index:2;width:888px;}
.main-hero .hero-car {position:absolute;bottom:20px;left:20%;z-index:4;width:1385px;}



.modal-title {margin:0 0 16px 0;color: var(--Titles, #1D1D1B);  font-size: 40px;  font-weight: 600;  line-height: 100%;}
.modal-anons {margin:0 0 32px 0;color: var(--Titles, #1D1D1B);  font-size: 24px;  font-weight: 600;  line-height: 130%;}

.input-container {position:relative;margin:0 0 16px 0;}
.input {padding:23px 23px; color: var(--Titles, #1D1D1B);  line-height: 100%; display:block; width:100%; border-radius: 12px; border: 1px solid #D7D7D7; background: var(--Light-grey, #F7F7F6); -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; -o-border-radius: 12px; }
.focus .input {padding:22px 22px;border: 2px solid var(--Titles, #1D1D1B);}
.ok .input {padding:22px 22px;border: 2px solid var(--Titles, #1D1D1B);}

.textarea {padding:23px 23px; color: var(--Titles, #1D1D1B); resize:none; height:140px;  line-height: 100%; display:block; width:100%; border-radius: 12px; border: 1px solid #D7D7D7; background: var(--Light-grey, #F7F7F6); -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; -o-border-radius: 12px; }
.focus .textarea {padding:22px 22px;border: 2px solid var(--Titles, #1D1D1B);}
.ok .textarea {padding:22px 22px;border: 2px solid var(--Titles, #1D1D1B);}

.input.wpcf7-not-valid {padding:22px 22px; border: 2px solid red;}
.wpcf7-not-valid-tip {position:absolute;top:100%;font-size:12px;left:0;white-space: nowrap;line-height:12px;}
.wpcf7 form.invalid .wpcf7-response-output {display:none;}
.wpcf7-form-control-wrap {position:unset;}

.input::-webkit-input-placeholder {opacity:0.4;color: #1D1D1B;  }
.input::-moz-placeholder          {opacity:0.4;color: #1D1D1B;  }/* Firefox 19+ */
.input:-moz-placeholder           {opacity:0.4;color: #1D1D1B;  }/* Firefox 18- */
.input:-ms-input-placeholder      {opacity:0.4;color: #1D1D1B;  }
input:focus::-webkit-input-placeholder {color: transparent!important;}
input:focus::-moz-placeholder          {color: transparent!important;}
input:focus:-moz-placeholder           {color: transparent!important;}
input:focus:-ms-input-placeholder      {color: transparent!important;}


.textarea::-webkit-input-placeholder {opacity:0.4;color: #1D1D1B;  }
.textarea::-moz-placeholder          {opacity:0.4;color: #1D1D1B;  }/* Firefox 19+ */
.textarea:-moz-placeholder           {opacity:0.4;color: #1D1D1B;  }/* Firefox 18- */
.textarea:-ms-input-placeholder      {opacity:0.4;color: #1D1D1B;  }
.textarea:focus::-webkit-input-placeholder {color: transparent!important;}
.textarea:focus::-moz-placeholder          {color: transparent!important;}
.textarea:focus:-moz-placeholder           {color: transparent!important;}
.textarea:focus:-ms-input-placeholder      {color: transparent!important;}


#detach-button-host {display:none!important;}

.title {margin:0 0 54px 0;color: var(--Titles, #1D1D1B);  font-size: 88px;  font-weight: 600;  line-height: 100%;}
.title-container .title {margin:0;}
.title-container {margin:0 0 54px 0;}
.title-container .anons {margin:0 117px 0 20px;width:668px;}
.slider-navs {position:relative;width:148px;min-width:148px;height:64px;}
.title-small {color: var(--Titles, #1D1D1B);  font-size: 64px;  font-weight: 600;  line-height: 100%;}

.tab-nav {position:relative;margin:0 -10px 12px -10px;}
.tab-nav li {width:33.3%;min-width:33.3%;margin:0 0 20px 0;padding:0 10px;}
.tab-nav .nav-link {height:100%;min-height:68px;text-decoration:none; padding:14px 20px; border-radius: 16px; background: var(--Total-white, #FFF); -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; color: var(--Titles, #1D1D1B);  font-size: 18px;  font-weight: 500;  line-height: 110%;}
.tab-nav .nav-link .ic {font-size:28px;margin:0 16px 0 0;}
.tab-nav .nav-link.active {background:#FFE03C;}
.tab-nav .nav-link:hover {background:#FFE03C;}


.place-rozklad {padding:0 0 90px 0;margin:0 0 90px 0;background: url('../../images/shapes.svg') no-repeat left 300px bottom;}
.place-rozklad .tab-content {margin:0 0 66px 0;}
.place-rozklad .col-12 {padding-bottom:20px;}
.place-rozklad .place-item { padding:40px 40px; height:100%; align-items: center; margin:0 0 0px 0; border-radius: 16px; border: 1px solid #E9E9E9; background: #FFF; box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.04); -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; }
.place-rozklad .place-item .item-group {width:100%;margin:0 0px 30px 0;}
.place-rozklad .place-item .group-name {padding:8px 12px; color: var(--Total-white, #FFF);  font-size: 16px;  font-weight: 500;  line-height: 110%; margin:0 0 16px 0; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; }
.place-rozklad .place-item .group-name .ic {font-size:24px;margin:0 8px 0 0;}
.place-rozklad .place-item.vechir .group-name {background: var(--003488, #003488);}
.place-rozklad .place-item.desctop .group-name {background: #10A4AD;}
.place-rozklad .place-item.vih .group-name {background: #0EA742;}
.place-rozklad .place-item.utro .group-name  {background: #EE8625;}

.place-rozklad .place-item .groups {position:relative;margin:0 -20px;}
.place-rozklad .place-item .groups .group {padding:0 20px;position:relative;color: var(--Titles, #1D1D1B);  font-size: 48px;  font-weight: 700;  line-height: 100%;}
.place-rozklad .place-item .groups .group:after { content:""; display:block; position:absolute; background:rgba(29, 29, 27, 0.4); right:0; width:1px; height:40px; top:50%; transform:translateY(-50%) ; -webkit-transform:translateY(-50%) ; -moz-transform:translateY(-50%) ; -ms-transform:translateY(-50%) ; -o-transform:translateY(-50%) ; }
.place-rozklad .place-item .groups .group:last-child:after {display:none;}
.place-rozklad .place-item .btn-default {margin:20px 0 0 0;}

.place-rozklad .place-item .item-info {position:relative;margin:0 -10px;}
.place-rozklad .place-item .item-info .info-item {padding:0 10px; margin:0 0 12px 0;}
.place-rozklad .place-item .item-info .ic {font-size:28px;margin:0 20px 0px 0;}
.place-rozklad .place-item .item-info .data {margin:0 0 6px 0;color: var(--Titles, #1D1D1B);  font-size: 16px;  line-height: 110%;}
.place-rozklad .place-item .item-info .value {color: var(--Titles, #1D1D1B);  font-size: 20px;  font-weight: 600;  line-height: 110%;}




.place-rozklad .place-item.vechir .item-info .ic:before {color: var(--003488, #003488);}
.place-rozklad .place-item.desctop .item-info .ic:before {color: #10A4AD;}
.place-rozklad .place-item.vih .item-info .ic:before {color: #0EA742;}
.place-rozklad .place-item.utro .item-info .ic:before  {color: #EE8625;}









.what-section .what-container {padding:120px 0 0 0;position:relative;margin:0 -40px;}
.what-section .what-container .item {margin:0 0 120px 0;padding:0 40px;width:518px;position:relative;}
.what-section .what-container .item .icon {margin:0 0 24px 0;}
.what-section .what-container .item .data {margin:0 0 20px 0;color: var(--Titles, #1D1D1B);  font-size: 28px;  font-weight: 600;  line-height: 110%;}
.what-section .what-animation {width:884px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) ; -webkit-transform:translate(-50%,-50%) ; -moz-transform:translate(-50%,-50%) ; -ms-transform:translate(-50%,-50%) ; -o-transform:translate(-50%,-50%) ; }
.what-section .what-animation .circle-1 {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) ; -webkit-transform:translate(-50%,-50%) ; -moz-transform:translate(-50%,-50%) ; -ms-transform:translate(-50%,-50%) ; -o-transform:translate(-50%,-50%) ; }
.what-section .what-animation .car {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) ; -webkit-transform:translate(-50%,-50%) ; -moz-transform:translate(-50%,-50%) ; -ms-transform:translate(-50%,-50%) ; -o-transform:translate(-50%,-50%) ; }


.categorys-section .item-top {margin:0 0 64px 0;}
.categorys-section .item-top .anons {max-width:440px; margin:0 0 0 170px;color: var(--Body-text, #4F4F4F);  font-size: 20px;}
.categorys-section .item-top .title {margin:0;}
.categorys-section .item-bottom {position:relative;padding:0 0 36px 0;}
.categorys-section .item-bottom .item-letter {position:absolute;left:250px;top:0;bottom:32px;width:440px;}
.categorys-section .item-bottom .item-letter img {height:100%;}
.categorys-section .item-info {position:relative;z-index:3;}
.categorys-section .info-item {margin:0 0 48px 0;}
.categorys-section .info-item .ic {margin:0 0 8px 0;font-size:28px;display:block;}
.categorys-section .info-item .ic img {display:block;height:28px;}
.categorys-section .info-item .data {margin:0 0 12px 0;color: var(--Titles, #1D1D1B);  font-size: 16px;  line-height: 110%;}
.categorys-section .info-item .value {color: var(--Titles, #1D1D1B);  font-size: 28px;  font-weight: 600;  line-height: 110%;}
.categorys-section .item-bottom .link-default {margin:0 0 0 48px;}
.categorys-section .item-image {position:absolute;bottom:0;left:460px;}
.categorys-section .item-image img {max-width: none;}


.docs-section .docs-container {position:relative;margin:0 -10px;}
.docs-section .docs-container .item {color: var(--Titles, #1D1D1B);  font-size: 24px; font-weight: 600;  line-height: 110%; width:calc(57% - 20px);margin:0 10px 20px 10px; padding:12px;border-radius: 135px;  border: 2px solid var(--efd-02-b, #EFD02B);}
.docs-section .docs-container .item .number {margin:0 32px 0 0; width: 108px; height: 108px; min-width:108px; color: var(--Titles, #1D1D1B);  font-size: 28px;  font-weight: 600;  line-height: 110%; background:#FFE03C; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; }
.docs-section .docs-container .item:nth-child(2) {width:calc(43% - 20px);}
.docs-section .docs-container .item:nth-child(3) {width:calc(50% - 20px);}
.docs-section .docs-container .item:nth-child(4) {width:calc(50% - 20px);}

.cert-section {padding:136px 0 0 0;}
.cert-section .cert-container {background: #FFF;padding:120px 0;position:relative;}
.cert-section .cert-container .cert-text {position:absolute;left:0;right:0;bottom:-5px;text-align:center;}
.cert-section .cert-container .cert-left {position:relative;z-index:3;max-width:480px;}
.cert-section .cert-container .cert-title {margin:0 0 32px 0;color: var(--Titles, #1D1D1B);  font-size: 40px;  font-weight: 600;  line-height: 110%;}
.cert-section .cert-container .cert-right {width:325px;position:relative;z-index:3;}
.cert-section .cert-container .anons {margin:0 0 32px 0;color: var(--Body-text, #4F4F4F);  font-size: 20px;}
.cert-section .cert-image { z-index:2; position:absolute; bottom:0; left:50%; transform:translateX(-40%) ; -webkit-transform:translateX(-40%) ; -moz-transform:translateX(-40%) ; -ms-transform:translateX(-40%) ; -o-transform:translateX(-40%) ; }
ul:not(.nav) {list-style: none;padding:0;margin:0;}
ul:not(.nav) li {position:relative;margin:0 0 20px 0;padding:0 0 0 36px;}
ul:not(.nav) li:before {content:"";display:block;position:absolute;left:0;top:0;width:24px;height:24px;background: url('../../images/li.svg') no-repeat center;}


.reviews-section .item {height:100%; width: 498px; margin:0 32px 0 0; padding:32px; border-radius: 24px; background: var(--ffffff, #FFF); -webkit-border-radius: 24px; -moz-border-radius: 24px; -ms-border-radius: 24px; -o-border-radius: 24px; }
.reviews-section .item .item-name {margin:0 0 24px 0;color: var(--Titles, #1D1D1B);  font-size: 24px;  font-weight: 700;  line-height: 120%;}
.reviews-section .item .item-photo { width: 72px; height: 72px;margin:0 20px 0 0; min-width:72px; overflow:hidden; border-radius:50% ; -webkit-border-radius:50% ; -moz-border-radius:50% ; -ms-border-radius:50% ; -o-border-radius:50% ; }
.reviews-section .item .review {display: -webkit-box;line-clamp: 5;  -webkit-line-clamp: 5;  -webkit-box-orient: vertical;    overflow: hidden;color: var(--Body-text, #4F4F4F);  font-size: 16px;  font-weight: 300;  line-height: 160%;}
.reviews-section .open .item .review {display: block;line-clamp: 500;  -webkit-line-clamp: 500;  -webkit-box-orient: vertical;    overflow: visible;}
.reviews-section .reviews-bottom {margin:50px 0 0 0;}
.reviews-section .rev-title {max-width:510px;color: var(--Titles, #1D1D1B);  font-size: 24px;  font-weight: 600;  line-height: 130%;}
.reviews-section .reviews-slider { border-radius:24px 0 0 24px; overflow:hidden; -webkit-border-radius:24px 0 0 24px; -moz-border-radius:24px 0 0 24px; -ms-border-radius:24px 0 0 24px; -o-border-radius:24px 0 0 24px; }
.reviews-section .reviews-slider {position:relative;margin:0 -100% 0 0;}
.reviews-section .reviews-slider .slick-track {display: -ms-flexbox !important;  display: flex !important;}
.reviews-section .reviews-slider .slick-slide {float:none;height:unset;}
.reviews-section .reviews-slider .slick-slide .slide {height:100%;}
.reviews-section .reviews-slider .slick-slide > div {height:100%;}
.reviews-section .item .rev-more {margin:24px 0 0 0;}


.category-hero .category-info {position:relative;padding:0 0 32px 0;}
.category-hero .info-items .info-item {margin:0 48px 48px 0;}
.category-hero .info-items .info-item:last-child {margin:0 0 48px 0;}
.category-hero .info-items .info-item .ic {font-size:28px;margin:0 0 8px 0;}
.category-hero .info-items .info-item .data {margin:0 0 12px 0;color: var(--Titles, #1D1D1B);  font-size: 16px;  font-weight: 400;  line-height: 110%;}
.category-hero .info-items .info-item .value {color: var(--Titles, #1D1D1B);  font-size: 28px;  font-weight: 600;  line-height: 110%;}
.category-hero .info-anons {max-width:555px;margin:0 0 48px 0;}
.category-hero .category-info .item-letter {position:absolute;left:100%;top:0;width:440px;}
.category-hero .category-info .item-letter img {height:100%;}
.category-hero .category-info .item-image {position:absolute;left:100%;bottom:0;z-index:3;}
.category-hero .category-info .item-image img {max-width: none;}


.etapi-section .item .number {text-align:center;width:72px;min-width:72px;margin:0 40px 0 0;color: var(--Titles, #1D1D1B);  font-size: 40px;  font-weight: 600;  line-height: 100%;}
.etapi-section .item .number .icon {margin:0 0 20px 0;}
.etapi-section .item .item-name {margin:0 0 24px 0;color: var(--Titles, #1D1D1B);  font-size: 28px;  font-weight: 600;  line-height: 110%;}
.etapi-section .item .item-pidpys {margin:32px 0 0 0;color: var(--Titles, #1D1D1B);  font-size: 20px;  font-weight: 600;  line-height: 130%;}

.stages-section .stages-info {max-width:660px;}
.stages-section .stages-image {height:100%;max-width:833px; position:relative; margin:0 40px 0 -280px; overflow:hidden; border-radius: 0px 24px 24px 0px; -webkit-border-radius: 0px 24px 24px 0px; -moz-border-radius: 0px 24px 24px 0px; -ms-border-radius: 0px 24px 24px 0px; -o-border-radius: 0px 24px 24px 0px; }
.stages-section .stages-image img {-o-object-fit: cover;    object-fit: cover;width: 100%;  height: 100%;}
.stages-section .stages-info .item {margin:0 0 48px 0;}
.stages-section .stages-info .number { margin:0 20px 0 0; background:rgba(29, 29, 27, 0.06); width:52px; min-width:52px; line-height:52px; height:52px; text-align:center; color: var(--Titles, #1D1D1B); font-size: 20px; font-weight: 600; border-radius:50% ; -webkit-border-radius:50% ; -moz-border-radius:50% ; -ms-border-radius:50% ; -o-border-radius:50% ; }
.stages-section .stages-info .data {margin:0 0 16px 0;color: var(--Titles, #1D1D1B);  font-size: 28px;  font-weight: 600;  line-height: 100%;}
.stages-section .stages-info .value {line-height: 130%;}
.place-rozklad.inner {  padding: 0 0 0px 0;  margin: 0 0 0px 0;  background:none;}


.park-slider { position:relative; margin:0 -100% 0 0; overflow:hidden; border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; -ms-border-radius: 24px; -o-border-radius: 24px; }
.park-slider .item { margin:0 40px 0 0; width: 660px; height: 440px; overflow:hidden; border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; -ms-border-radius: 24px; -o-border-radius: 24px; }
.park-slider .item img {-o-object-fit: cover;    object-fit: cover;width: 100%;  height: 100%;}


.h1-container {margin:0 0 48px 0;}
.h1-container h1 {margin:0;}


.faq-hero .faq-container {position:relative;margin:0 0 104px 0;}
.faq-hero .faq-image {height:564px; border-radius:24px ; overflow:hidden; -webkit-border-radius:24px ; -moz-border-radius:24px ; -ms-border-radius:24px ; -o-border-radius:24px ; }
.faq-hero .faq-image img {-o-object-fit: cover;    object-fit: cover;width: 100%;  height: 100%;}
.faq-hero .faq-pidpys {color: var(--Titles, #1D1D1B); z-index:2;  font-weight: 500;  line-height: 110%; position:absolute; padding:24px 32px; border-radius: 16px; background: var(--Total-white, #FFF); box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.06); -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; }
.faq-hero .faq-pidpys.pidpys-1 {top:52px;left:-57px;}
.faq-hero .faq-pidpys.pidpys-2 {top:226px;left:47px;}
.faq-hero .faq-pidpys.pidpys-3 {top:80px;right:-32px;}
.faq-hero .faq-pidpys.pidpys-4 {bottom:80px;right:48px;}


.section-faq {max-width:1055px;margin:0 auto;}
.accordions .accord-item {text-align:left; margin:0 0 20px 0; border-radius: 16px; background: var(--Total-white, #FFF); -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; }
.accordions .accrodion-button {text-align:left;padding:29px 32px; color: var(--080808, #1D1D1B) font-size: 20px;  font-weight: 700;  line-height: 110%;}
.accordions .accrodion-button .link { margin:0 0 0 40px; position:relative; width: 40px; height: 40px; min-width:40px; border:2px solid #FFE03C; border-radius:50%; -webkit-border-radius:50% ; -moz-border-radius:50% ; -ms-border-radius:50% ; -o-border-radius:50% ; transform: rotate(45deg); transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
.accordions .accrodion-button .link:before { content:""; display:block; width:2px; background:#000; height:16px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) ; -webkit-transform:translate(-50%,-50%) ; -moz-transform:translate(-50%,-50%) ; -ms-transform:translate(-50%,-50%) ; -o-transform:translate(-50%,-50%) ; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; }
.accordions .accrodion-button .link:after { content:""; display:block;height:2px;background:#000;width:16px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) ; -webkit-transform:translate(-50%,-50%) ; -moz-transform:translate(-50%,-50%) ; -ms-transform:translate(-50%,-50%) ; -o-transform:translate(-50%,-50%) ; }

.accordions .accrodion-button.collapsed .link { transform:rotate(0) ; -webkit-transform:rotate(0) ; -moz-transform:rotate(0) ; -ms-transform:rotate(0) ; -o-transform:rotate(0) ; }
.accordions .accrodion-button:hover .link {background:#FFE03C!important;}
.accordions .accrodion-button.collapsed {color: var(--080808, #1D1D1B);}
.accordions .answer {padding:0 0 29px 32px;max-width:840px;}


.faq-form .form-container {padding:64px 80px; border-radius: 16px; border: 1px solid #E9E9E9; background: #FFF; box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.04); -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; }
.faq-form .form-container .form-image {margin:0 0 32px 0;}
.faq-form .form-container .form-title {margin:0 0 24px 0;max-width:628px;color: var(--Titles, #1D1D1B);  font-size: 56px;  font-weight: 600;  line-height: 100%;}
.faq-form .form-container .form-anons {max-width: 474px;}
.faq-form .form-container .form-right {width:475px;min-width:330px;margin:0 0 0 40px;}


.filials-section .tab-nav {margin:0 -10px 44px -10px;}
.filials-section .fil-top {margin:0 0 40px 0;}
.filials-section .item-groups {max-width:450px;margin:0 40px 0 0;}
.filials-section .item-groups .groups-title {margin:0 0 20px 0;color: var(--Titles, #1D1D1B);  font-size: 28px;  font-weight: 600;  line-height: 100%;}
.filials-section .item-groups .group-name {text-decoration:none; margin:0 16px 16px 0;padding:8px 12px; color: var(--Total-white, #FFF);  font-size: 16px;  font-weight: 500;  line-height: 110%; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; }
.filials-section .item-groups .group-name:hover {text-decoration:underline;}
.filials-section .item-groups .group-name:last-child {margin:0 0px 16px 0;}
.filials-section .item-groups .group-name .ic {font-size:24px;margin:0 8px 0 0;}
.filials-section .item-groups .group-name.vechir {background: var(--003488, #003488);}
.filials-section .item-groups .group-name.desctop {background: #10A4AD;}
.filials-section .item-groups .group-name.vih {background: #0EA742;}
.filials-section .item-groups .group-name.utro {background: #EE8625;}
.filials-section .item-grafik {margin:0 40px 0 0;}
.filials-section .item-grafik .data {margin:0 0 20px 0;color: var(--Titles, #1D1D1B);  font-size: 28px;  font-weight: 600;  line-height: 100%;}
.filials-section .item-grafik .value {margin:0 0 12px 0;color: var(--Titles, #1D1D1B);  font-weight: 500;  line-height: 110%; white-space: nowrap;}
.filials-section .item-grafik .value:last-child {margin:0 0 0px 0;}
.filials-section .btn-default {margin:24px 0 0 0;}
.filials-section .fil-map { height:688px;padding:24px; overflow:hidden; border-radius: 24px; background: #FFF; -webkit-border-radius: 24px; -moz-border-radius: 24px; -ms-border-radius: 24px; -o-border-radius: 24px; }
.filials-section .fil-map img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; -ms-border-radius: 24px; -o-border-radius: 24px; }


.contacts-section {margin:0 0 120px 0;}
.contacts-section .contacts-left {width:555px;margin:0 20px 0 0;}
.contacts-section .contacts-block .data {color: var(--Titles, #1D1D1B);  font-weight: 500;  line-height: 110%;}
.contacts-section .contacts-block .data .ic {font-size:28px;margin:0 10px 0 0;}
.contacts-section .contacts-block .value {display:block;text-decoration: none;margin:24px 0 0 0;color: var(--Titles, #1D1D1B);  font-size: 28px;  font-weight: 500;  line-height: 110%;}
.contacts-section .contacts-block a.value:hover {color:#FFE03C;}
.contacts-section .contacts-soc {margin:40px 0 0 0;}
.contacts-section .contacts-soc .data {color: var(--Titles, #1D1D1B);  font-weight: 500;  line-height: 110%;margin:0 0 24px 0;}
.contacts-section .contacts-soc .socials .item {color:#1D1D1B;}
.contacts-section .contacts-soc .socials .item .ic:before {color:#1D1D1B;}


.filials-section .title-container .title {width:555px;}

.shedule {overflow:hidden; padding:0px; border-radius: 16px; border: 1px solid #E9E9E9; background: #FFF; box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.04); -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; }
.shedule .shedule-top {padding:40px 32px 0 32px;margin:0 0 48px 0;background: var(--Titles, #1D1D1B);}
.shedule .vid {width:153px;min-width:153px;padding:0 0 0px 0;}
.shedule .shedule-cont {padding:0 32px 24px 32px;}

.shedule .th {color: var(--Titles, #1D1D1B);  font-size: 20px;  font-weight: 600; }
.shedule .th .day { padding:0 0 0 32px; height:72px; margin:0 0 8px 0; background:rgba(247, 247, 246, 0.5); border:1px solid rgba(237, 237, 237, 0.5); border-right:0; border-radius: 8px 0 0 8px; -webkit-border-radius:; -moz-border-radius:; -ms-border-radius:; -o-border-radius:; }
.shedule .td .day {padding:0px 0 0 0;text-align:center;height:72px;margin:0 0 8px 0;background:rgba(247, 247, 246, 0.5); border-top:1px solid rgba(237, 237, 237, 0.5);border-bottom:1px solid rgba(237, 237, 237, 0.5);}
.shedule .td:last-child .day {border-right:1px solid rgba(237, 237, 237, 0.5); border-radius:0 8px 8px 0 ; -webkit-border-radius:0 8px 8px 0 ; -moz-border-radius:0 8px 8px 0 ; -ms-border-radius:0 8px 8px 0 ; -o-border-radius:0 8px 8px 0 ; }

.shedule .shedule-top .td {padding:0 20px;position:relative;margin:0 0 -20px 0;}

.shedule .td .vid {padding:30px 0;}
.shedule .td .group-name {padding:6px 10px; color: var(--Total-white, #FFF);  font-size: 16px;  font-weight: 500;  line-height: 110%; margin:0 0 16px 0; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; }
.shedule .td .group-name .ic {font-size:24px;margin:0 8px 0 0;}
.shedule .td.vechir .group-name {border: 2px solid var(--003488, #003488);}
.shedule .td.desctop .group-name {border: 2px solid #10A4AD;}
.shedule .td.vih .group-name {border: 2px solid #0EA742;}
.shedule .td.utro .group-name {border: 2px solid #EE8625;}

.shedule .td .btn-default { padding:15px 28px; font-size: 14px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; }


.shedule .td .groups {position:relative;margin:0 -16px 16px -16px;}
.shedule .td .groups .group {padding:0 16px;position:relative;color: var(--Titles, #fff);  font-size: 32px;  font-weight: 700;  line-height: 100%;}
.shedule .td .groups .group:after { content:""; display:block; position:absolute; background:rgba(255, 255, 255, 0.2); right:0; width:1px; height:40px; top:50%; transform:translateY(-50%) ; -webkit-transform:translateY(-50%) ; -moz-transform:translateY(-50%) ; -ms-transform:translateY(-50%) ; -o-transform:translateY(-50%) ; }
.shedule .td .groups .group:last-child:after {display:none;}
.shedule .td .pochatok {margin:0 0 16px 0;color: var(--Titles, #fff);  font-size: 16px;  font-weight: 400;  line-height: 110%;}
.shedule .td .pochatok .data {color: #83837D;}
.shedule .td .pochatok .ic {margin:0 8px 0 0;font-size:28px;}
.shedule .td {width:100%;text-align: center;}


.shedule .td .day .date {margin:0 0 8px 0; display:inline-block; color: var(--White, #F4F3F3); padding:4px 8px; border-radius: 4px; font-size: 14px; font-weight: 600; line-height: 100%; letter-spacing: 0.56px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; }
.shedule .td .day .time {color: var(--Titles, #1D1D1B); font-size: 16px;  font-weight: 500;  line-height: 130%;}
.shedule .td .day .time .ic {font-size:24px;margin:0 8px 0 0;}
.shedule .td.vechir .day .time .ic:before {color: var(--003488, #003488);}
.shedule .td.desctop .day .time .ic:before {color: #10A4AD;}
.shedule .td.vih .day .time .ic:before {color: #0EA742;}
.shedule .td.utro .day .time .ic:before {color: #EE8625;}









@media (min-width: 1200px) {
  .header .header-phones:hover .phones-dropdown {opacity:1;visibility: visible;margin:0px 0 0 0;}
  .header .header-phones:hover .phone-button a {color:#FFE03C!important;}
  .header .header-phones:hover .phone-button .ic:last-child { transform:rotate(180deg) ; -webkit-transform:rotate(180deg) ; -moz-transform:rotate(180deg) ; -ms-transform:rotate(180deg) ; -o-transform:rotate(180deg) ; }
 
  .header .main-menu .nav-item.active {color:#FFE03C;}
  .header .main-menu .nav-item:hover {color:#FFE03C;}


}




/* ============================================================
   SEO/UX доповнення — злито з окремих файлів (Завдання 20:
   менше блокуючих CSS-запитів)
   ============================================================ */

/* ---------- breadcrumbs.css ---------- */
/* Breadcrumbs Styles */
.breadcrumbs {
    margin: 0 0 24px 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
}

.breadcrumbs a {
    color: #4F4F4F;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumbs a:hover {
    color: #FFE03C;
    text-decoration: underline;
}

.breadcrumbs span {
    color: #4F4F4F;
}

.breadcrumbs span.breadcrumb_last {
    color: #1D1D1B;
    font-weight: 500;
}

/* Separator styling */
/* Yoast сам обгортає роздільник пробілами, тому margin тут лише додає
   різницю до них — звідси невеликі значення.
   Гліф «›» дрібний відносно кегля тексту, тому збільшений окремо.
   line-height:1 не дає більшому кеглю розтягнути рядок, а vertical-align
   вирівнює шеврон по центру рядкових літер, а не по базовій лінії. */
.breadcrumbs .separator {
    margin: 0 2px;
    color: #BDBDBD;
    font-size: 1.35em;
    line-height: 1;
    vertical-align: -0.05em;
}

/* Responsive */
@media (max-width: 768px) {
    .breadcrumbs {
        font-size: 12px;
        margin: 0 0 16px 0;
    }
    
    .breadcrumbs .separator {
        margin: 0 1px;
    }
}

/* Integration with existing sections */
.hero-inner .breadcrumbs,
.category-hero .breadcrumbs,
.news-detail .breadcrumbs {
    margin-bottom: 20px;
}

.cat-page .category-info .breadcrumbs {
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .hero-inner .breadcrumbs,
    .category-hero .breadcrumbs,
    .news-detail .breadcrumbs {
        margin-bottom: 12px;
    }
}

/* ---------- Фіксований хедер і панель адміністратора ---------- */
/* .header має position:fixed; top:0, тому в залогіненого користувача
   його перекривала адмінпанель WordPress. Клас admin-bar є на <body>
   лише коли панель реально виводиться, тож на відвідувачів це не впливає.

   Висота панелі WordPress залежить від ширини екрана, тому тримаємо її в
   змінній: її використовує і хедер, і панель мобільного меню нижче. */
body.admin-bar {
    --wp-bar: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        --wp-bar: 46px;
    }
}

body.admin-bar .header {
    top: var(--wp-bar);
}

/* Панель мобільного меню (.menu-top) теж position:fixed, але з власним
   відступом від верху вікна: 90px при ширині ≤1200px і 74px при ≤767px
   (обидва значення — в media.css). Зсув хедера її не торкався, тому в
   залогіненого користувача логотип, телефон і хрестик налазили на панель.
   Значення 90 і 74 дублюються тут навмисно: перебиваємо саме їх, тож при
   зміні в media.css ці два рядки треба поправити разом. */
@media screen and (max-width: 1200px) {
    body.admin-bar .menu-top {
        top: calc(90px + var(--wp-bar));
    }
}

@media screen and (max-width: 767px) {
    body.admin-bar .menu-top {
        top: calc(74px + var(--wp-bar));
    }
}

/* ---------- menu-fix.css ---------- */
/* Menu Navigation Fix - Завдання 7, 22 */

/* Рядок меню вже має класи d-flex align-items-center у розмітці,
   тому окреме правило тут не потрібне: воно застосовувалось також
   до <div class="drop-menu"> і ламало сітку карток підменю. */

/* Desktop: Hover dropdown + clickable parent links */
@media (min-width: 1200px) {
    /* Parent link is clickable and goes to page */
    .header .main-menu .nav-item {
        pointer-events: auto;
        cursor: pointer;
    }
    
    /* Arrow is just visual on desktop (hover triggers dropdown) */
    .header .main-menu .ic-drop {
        pointer-events: none;
        cursor: default;
    }
    
    /* Hover behavior stays the same */
    .header .li-drop:hover .drop-menu {
        opacity: 1;
        visibility: visible;
        margin: 0px 0 0 0;
    }
    
    .header .main-menu li.li-drop:hover .ic-drop {
        transform: rotate(180deg);
    }
}

/* Mobile: Separate dropdown button */
@media (max-width: 1199px) {
    /* Li structure for mobile */
    .header .main-menu .li-drop {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    /* Top level wrapper */
    .header .main-menu .li-drop > div:first-child {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid rgba(29, 29, 27, 0.1);
    }
    
    /* Parent link - clickable */
    .header .main-menu .nav-item {
        flex: 1;
        padding: 8px 12px 8px 0;
    }
    
    /* Dropdown toggle button - clickable on mobile */
    .header .main-menu .ic-drop {
        cursor: pointer;
        padding: 8px 12px;
        margin: 0;
        font-size: 24px;
        flex-shrink: 0;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
    }
    
    /* Arrow rotation when open */
    .header .main-menu li.li-drop.open .ic-drop {
        transform: rotate(180deg);
    }
    
    /* Dropdown menu styling for mobile */
    .header .main-menu .drop-menu {
        position: static;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        transition: all 0.3s ease;
        box-shadow: none;
        background: #F7F7F6;
    }
    
    .header .main-menu li.li-drop.open .drop-menu {
        opacity: 1;
        visibility: visible;
        max-height: 2000px;
        padding: 12px 0;
        margin: 8px 0 0 0;
    }
    
    /* Mobile dropdown items */
    .header .main-menu .drop-menu li {
        width: 100%;
        max-width: 100%;
        margin: 8px 0;
    }
    
    .header .main-menu .drop-menu .drop-item {
        height: auto;
        min-height: auto;
        padding: 16px;
        margin: 0;
        display: flex;
        flex-direction: column;
    }
    
    .header .main-menu .drop-menu .drop-item .menu-name {
        margin: 0 0 8px 0;
        font-size: 18px;
    }
    
    .header .main-menu .drop-menu .drop-item .menu-image {
        position: relative;
        margin-top: 12px;
        max-width: 100%;
    }
    
    .header .main-menu .drop-menu .drop-item .menu-image img {
        max-width: 100%;
        height: auto;
    }
}

/* Prevent double-tap zoom */
.header .main-menu .ic-drop,
.header .main-menu .nav-item {
    touch-action: manipulation;
}

/* ---------- maps.css ---------- */
/* Google Maps Integration Styles */

/* Map container */
.fil-map {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #F7F7F6;
}

/* Google Maps iframe */
.fil-map iframe {
    width: 100%;
    height: 450px;
    border: 0;
    display: block;
}

/* Fallback image (if iframe not provided) */
.fil-map img {
    width: 100%;
    height: auto;
    display: block;
}

/* Map actions container */
.map-actions {
    margin-top: 20px;
    text-align: center;
}

/* Open in Google Maps button */
.btn-map {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background: #FFFFFF;
    border: 2px solid #FFE03C;
    border-radius: 12px;
    color: #1D1D1B;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-map .ic {
    font-size: 20px;
    margin-right: 8px;
    color: #FFE03C;
    transition: all 0.3s ease;
}

.btn-map:hover {
    background: #FFE03C;
    border-color: #FFE03C;
    color: #1D1D1B;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0px 4px 20px 0px rgba(255, 224, 60, 0.40);
}

.btn-map:hover .ic {
    color: #1D1D1B;
}

/* Contact info near map */
.fil-item {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.fil-top {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 24px;
    background: #FFFFFF;
    border-radius: 16px;
}

/* Responsive styles */
@media (max-width: 768px) {
    .fil-map iframe {
        height: 300px;
    }
    
    .btn-map {
        padding: 12px 24px;
        font-size: 14px;
        width: 100%;
    }
    
    .map-actions {
        margin-top: 16px;
    }
    
    .fil-top {
        flex-direction: column;
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .fil-map iframe {
        height: 250px;
    }
    
    .btn-map {
        padding: 10px 20px;
        font-size: 13px;
    }
}

/* Improve loading state */
.fil-map::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    background: #F7F7F6;
}

.fil-map iframe,
.fil-map img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fil-map:has(iframe)::before,
.fil-map:has(img)::before {
    display: none;
}

/* Фасад карти: скріншот замість iframe до першого кліку.
   Позиціонування абсолютне, бо .fil-map img вище вже абсолютний — вкладений
   постер має поводитись так само, інакше він випав би з контейнера. */
.map-facade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: inherit;
    overflow: hidden;
}

/* Притемнення під кнопкою: на світлих ділянках скріншота білу кнопку з жовтою
   рамкою було б погано видно. */
.map-facade::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(29, 29, 27, 0.18);
    transition: background 0.3s ease;
}

.map-facade:hover::after {
    background: rgba(29, 29, 27, 0.28);
}

/* Філія без залитого скріншота карти: щоб порожня плашка не виглядала збоєм,
   показуємо адресу над кнопкою. Притемнення тут зайве — фону немає. */
.map-facade-empty::after {
    background: none;
}

.map-facade-address {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, calc(-50% - 44px));
    width: 90%;
    color: #1D1D1B;
    font-size: 18px;
    text-align: center;
}

.map-facade-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    padding: 16px 32px;
    background: #FFFFFF;
    border: 2px solid #FFE03C;
    border-radius: 12px;
    color: #1D1D1B;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.map-facade-btn .ic {
    margin-right: 8px;
    color: #FFE03C;
    font-size: 20px;
    transition: all 0.3s ease;
}

.map-facade:hover .map-facade-btn {
    background: #FFE03C;
    box-shadow: 0px 4px 20px 0px rgba(255, 224, 60, 0.40);
}

.map-facade:hover .map-facade-btn .ic {
    color: #1D1D1B;
}

@media (max-width: 768px) {
    .map-facade-btn {
        padding: 12px 24px;
        font-size: 14px;
        /* На вузькому екрані підпис ламався на два рядки й кнопка ставала
           неоднорідно високою. */
        white-space: nowrap;
    }

    .map-facade-address {
        font-size: 15px;
        transform: translate(-50%, calc(-50% - 36px));
    }
}

/* ---------- reviews-rating.css ---------- */
/* Reviews Rating Styles - Завдання 18 */

/* Star rating container */
.review-rating {
    display: flex;
    align-items: center;
    margin: 16px 0;
    gap: 4px;
}

/* Individual star */
.review-rating .star {
    font-size: 20px;
    color: #E0E0E0;
    transition: color 0.3s ease;
}

/* Filled star */
.review-rating .star.filled {
    color: #FFE03C;
}

/* Half-filled star (optional) */
.review-rating .star.half-filled {
    background: linear-gradient(90deg, #FFE03C 50%, #E0E0E0 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Rating number */
.review-rating .rating-number {
    margin-left: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #1D1D1B;
}

/* Review meta info (date, location, etc) */
.review-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0;
    font-size: 14px;
    color: #828282;
}

.review-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.review-meta .meta-item .ic {
    font-size: 16px;
}

/* Update review item to accommodate rating */
.reviews-section .item-info {
    width: 100%;
}

.reviews-section .item .item-name {
    margin: 0 0 16px 0;
}

/* Star icon using CSS (fallback if no icon font) */
.star-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    position: relative;
}

.star-icon::before {
    content: '★';
    position: absolute;
    left: 0;
    color: inherit;
}

/* Hover effect on stars (for interactive rating - optional) */
.review-rating.interactive .star {
    cursor: pointer;
}

.review-rating.interactive .star:hover,
.review-rating.interactive .star:hover ~ .star {
    color: #FFD700;
}

/* Average rating summary */
.reviews-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    background: #FFFFFF;
    border-radius: 16px;
    margin-bottom: 32px;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
}

.reviews-summary .summary-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.reviews-summary .average-score {
    font-size: 48px;
    font-weight: 700;
    color: #1D1D1B;
    line-height: 1;
}

.reviews-summary .total-reviews {
    font-size: 16px;
    color: #828282;
    margin-top: 8px;
}

.reviews-summary .stars-large .star {
    font-size: 32px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .review-rating .star {
        font-size: 18px;
    }
    
    .review-rating .rating-number {
        font-size: 14px;
    }
    
    .reviews-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .reviews-summary .average-score {
        font-size: 36px;
    }
    
    .reviews-summary .stars-large .star {
        font-size: 24px;
    }
}

/* Integration with existing reviews slider */
.reviews-section .item .review {
    margin-top: 16px;
}

/* Review author verification badge (optional) */
.review-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #E8F5E9;
    border-radius: 4px;
    font-size: 12px;
    color: #2E7D32;
    font-weight: 500;
    margin-left: 8px;
}

.review-verified .ic {
    font-size: 14px;
}

/* Empty state for no reviews */
.reviews-empty {
    text-align: center;
    padding: 48px 24px;
    background: #F7F7F6;
    border-radius: 16px;
}

.reviews-empty .empty-icon {
    font-size: 48px;
    color: #BDBDBD;
    margin-bottom: 16px;
}

.reviews-empty .empty-text {
    font-size: 18px;
    color: #828282;
    margin-bottom: 24px;
}
