/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/


/* Add your custom styles here */

/* manrope-300 - cyrillic_latin */
@font-face {
  font-display: swap; 
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/manrope-v20-cyrillic_latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* manrope-regular - cyrillic_latin */
@font-face {
  font-display: swap; 
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/manrope-v20-cyrillic_latin-regular.woff2') format('woff2'); 
}

/* manrope-600 - cyrillic_latin */
@font-face {
  font-display: swap; 
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/manrope-v20-cyrillic_latin-600.woff2') format('woff2'); 
}

/* manrope-700 - cyrillic_latin */
@font-face {
  font-display: swap; 
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/manrope-v20-cyrillic_latin-700.woff2') format('woff2'); 
}

/*
@font-face {
    font-family: 'Primary-Font';
    src: url('/wp-content/uploads/2026/03/primari-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap; 
}

@font-face {
    font-family: 'Primary-Font';
    src: url('/wp-content/uploads/2026/03/primari-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

*/




/* ============================================================
   0. ЗМІННІ
   ============================================================ */
:root {
  --header-h:        76px;
  --header-h-scroll: 56px;
  --header-radius:   3.75rem;
  --header-gradient:
    radial-gradient(35rem 28.125rem at 30% 0, #b4bffc66 0, #0000),
    radial-gradient(35rem 30.625rem at 85% 90%, #71c6c233 0, #eef1fb 70%);
  --clr-navy: #1A2B4A;
  --clr-red:  #8091ED; /*#D0212A*/
  --clr-bg:   #B4BFFC;/*#eef1fb;*/
  --fn:       clamp(0.72rem, 0.68rem + 0.5vw, 1.5rem);
  --fnh:      clamp(0.875rem, 0.4224rem + 0.6897vw, 1.25rem);
  --tr:       0.28s ease;
}



/* типографіка  */
body {
    font-family: 'Manrope', sans-serif !important;
    /*font-size: clamp(1rem, 0.85rem + 0.75vw, 1.375rem);*/
    font-size: clamp(1rem, -0.1rem + 2.2vw, 1.375rem);
    line-height: 1.5;
    }

h1, h2, h3, h4 {
    font-family: 'Manrope', sans-serif !important;
    }

body a {color: #707b90;}

/* Адаптивна типографіка (360px -> 1920px) */

h1 {
  /* 28px -> 66px */
  font-size: clamp(1.75rem, 1.288rem + 2.05vw, 4.125rem);
  line-height: 1.1 !important;
  letter-spacing: -0.01em;
  font-weight: 700;
  /*hyphens: auto;*/
}

h2 {
  /* 24px -> 50px */
  font-size: clamp(1.5rem, 1.154rem + 1.54vw, 3.125rem);
  line-height: 1.2;
  font-weight: 700;
}

h3 {
  /* 20px -> 34px */
  font-size: clamp(1.25rem, 1.058rem + 0.85vw, 2.125rem);
  line-height: 1.3;
  font-weight: 600;
}

ul, ol {padding-bottom:10px;}

.elementor-button {font-size: clamp(1rem, 0.85rem + 0.75vw, 1.375rem);}
/*.services a.elementor-button {
    font-size: clamp(1rem, 0.7rem + 0.5vw, 1.5rem);}*/


/* ============================================================
   ГРАДІЄНТИ САЙТУ
   ============================================================ */
   
.home-top-1 {
    background-image:radial-gradient(35rem 28.125rem at 30% 0,#b4bffc66 0,#0000),radial-gradient(35rem 30.625rem at 85% 90%,#71c6c299 0,#eef1fb 70%);}
  
.home-top-2 {
    background-image:radial-gradient(672px 588px at 90% -90%, rgba(113, 198, 194, 0.8) 0px, rgb(238, 241, 251) 100%);}
  
.home .services, .services-bg {
    background-image:linear-gradient(272deg,#abd8d6 3.79%,#cad2ff 90.01%);}

.bg-price {
    background-image:radial-gradient(35rem 28.125rem at 20% -20%,#b4bffbe6 0,#0000),radial-gradient(35rem 30.625rem at 60% 110%,#71c6c299 0,#eef1fb 70%);}
.doctors-bg {
    background-image:radial-gradient(22.5rem 15.625rem at 30% 0,#b4bffcb3 0,#0000),radial-gradient(22.5rem 18.125rem at 85% 100%,#71c6c299 0,#eef1fb 70%);}

.doctors .top-left {
    background-image:radial-gradient(35rem 28.125rem at 30% 0,#b4bffccc 0,#0000),radial-gradient(35rem 30.625rem at 85% 90%,#71c6c299 0,#eef1fb 70%);
    border-radius: var(--header-radius);
  }

.bg-kontakt{
    background-image: radial-gradient(672px 540px at 30% 0px, rgba(180, 191, 252, 0.8) 0px, rgba(0, 0, 0, 0)), radial-gradient(672px 588px at 85% 90%, rgba(113, 198, 194, 0.6) 0px, rgb(238, 241, 251) 70%);}

/* ============================================================
   1. ШИРИНА САЙТУ
   ============================================================ */
#masthead,#colophon,.site-main,.elementor-section-boxed > .elementor-container,
.e-con-boxed > .e-con-inner {
  /*max-width: 97% !important;*/
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 2048px) {
  #masthead,  #colophon, .site-main {
    max-width: 1920px !important;
  }
  .elementor-section-boxed > .elementor-container,
  .e-con-boxed > .e-con-inner {
    max-width: 1820px !important;
  }
}


.top-bar-custom {
    background-color: #2D3A82; /* Глибокий синій, що пасує до #8091ED */
    color: #ffffff;
    font-size: 13px;
    padding: 6px 0;
}

.top-bar-custom a {
    color: #ffffff;
    text-decoration: none;
    transition: 0.3s;
}

.top-bar-custom a:hover {
    color: #B4BFFC; /* Світлий колір на ховер */
}

/*************HERO**************/
.hero-container {align-items: stretch; transition: all 0.3s ease-in-out;}
.hero-text {
    padding: clamp(20px, 4vw, 60px) !important;
    
}
.hero-container .btn-hover a{min-width:320px; }

@media (min-width: 1350px) { 
  .hero-text {font-size:25px;}
}


@media (max-width: 1350px) {
    /* Робимо батьківський контейнер вертикальним */
    .hero-container { 
        flex-direction: column !important;

    }
     .hero-text, .hero-foto {width: 100%}
     .hero-foto {min-height: 60vh;}
 
    /* Кожна колонка стає на 100% ширини */
    .hero-container .elementor-column {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Додаємо відступ між текстом і картинкою, коли вони один під одним */
    .left-text-column {
        padding-bottom: 40px !important;
        text-align: center; /* Опціонально: центруємо текст для краси на планшеті */
    }
}

/************END-HERO**************/




.menu-header {
    min-height: 56px;
    contain: layout; 
    display: flex;
    align-items: center;
}

.menu-header .dcn-nav, .menu-header .dcn-menu {
        min-height: 44px;
    }

.dcn-nav {
    contain: layout style;
}

/* Шрифт для меню — вказуємо одразу щоб не було перерендеру */
/*.dcn-nav,
.dcn-menu,
.dcn-link {
    font-family: 'Manrope', sans-serif;
}

/* Десктоп: меню видиме, бургер прихований */
@media (min-width: 1025px) {
    .burger-h { display: none !important; }
    .short-head-menu { display: block !important; }
}

/* Мобілка/планшет: бургер видимий, меню приховане */
@media (max-width: 1024px) {
    .short-head-menu { display: none !important; }
    .burger-h { display: block !important; }
}



/* ============================================================
   3. HEADER-WRAP
   JS додає .dcs-scrolled при прокрутці > 40px
   ============================================================ */
.footer-wrap {margin-top: 30px}   
.footer-wrap ul {list-style:none;}    
.header-wrap {
  border-radius: 3.75rem;
  background-image: var(--header-gradient) !important;
  background-color: var(--clr-bg) !important;
  height: 76px !important;
  min-height: 76px;
  contain: layout;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition:
    height var(--tr),
    box-shadow var(--tr),
    border-radius var(--tr),
    padding var(--tr);
  overflow: visible !important;
  position: relative !important;
  box-sizing: border-box !important;
  width: 95% !important;
  margin-top:5px ;
  margin-bottom:10px ;
}
.xtb-header-sticky.xtb-appear .xpro-theme-builder-header-nav {
  box-shadow: none;
}
.header-wrap.dcs-scrolled {
  /*height: var(--header-h-scroll) !important;*/
  /*box-shadow: 0 4px 28px rgba(26,43,74,0.10) !important;*/
  border-radius: 2.5rem !important;
  padding: 0 20px !important;
}

.header-wrap > .e-con-inner {
  display: contents !important;
}


/* ============================================================
   4. КОЛОНКИ ШАПКИ
   ============================================================ */

/* Логотип */
.logo-h {
  max-width: 120px;
 /* flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;*/
}

.logo-h img {
  height: clamp(30px, 3.2vw, 50px) !important;
  width: auto !important;
  /*display: block !important;*/
  transition: height var(--tr) !important;
}

.dcs-scrolled .logo-h img {
  height: clamp(24px, 2.6vw, 38px) !important;
}

/* Меню — займає весь простір по центру
   Всередині: HFE-меню (десктоп) + бургер (моб)
   Elementor сам ховає/показує через elementor-hidden-* */
.menu-h, .menu-header {
  flex: 1 1 0% !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}

/* Пошук */
.search-h {
  flex: 0 0 auto !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
}



/* Кнопка запису */
.button-h {
  flex: 0 0 auto !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  font-size: var(--fnh) !important;;
}

/* Акаунт */
.akk-h {
  flex: 0 0 auto !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
}

/* Мобільна колонка з попапом —
   ВАЖЛИВО: не ховаємо через display:none бо тоді
   шорткод не рендериться і JS не знаходить .mobile-popup
   Elementor ставить elementor-hidden-desktop = display:none
   Ми перекриваємо: елемент є в DOM але не займає місця */
/*.mob-menu-h {
  display: block !important;  /* перекриваємо elementor-hidden-desktop */
  /*position: fixed !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  visibility: hidden !important; /* ховаємо від юзера на десктопі */
}

/* На мобільному — повертаємо нормальний стан */
@media (max-width: 1024px) {
  .mob-menu-h {
    position: static !important;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    pointer-events: all !important;
  }
}

/* Popup завжди видимий для JS незалежно від стану батька */
./*mobile-popup {
  pointer-events: none !important; /* вимкнено поки не .is-open */
  /*visibility: hidden !important;*/
}

/* Бургер всередині .menu-h
   Elementor ховає на десктопі через elementor-hidden-desktop */
.burger-h {
  flex: 0 0 auto !important;
  width: auto !important;
  align-items: center !important;
  cursor: pointer !important;
}

.burger-h.is-active {
  opacity: 0.7 !important;
}

/* Показуємо бургер на мобільному як страховка */
@media (max-width: 1024px) {
  .burger-h {
    display: flex !important;
  }
}

/* ============================================================
   6. IVORY SEARCH (.search-h)
   Поле приховане — відкривається по кліку на лупу
   JS додає .dcs-search-open на .is-search-form
   ============================================================ */
.search-h .is-search-form {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

.search-h .is-search-submit {
  order: 1 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  transition: background var(--tr) !important;
}

.search-h .is-search-submit:hover {
  background: rgba(26,43,74,0.08) !important;
}

.search-h .is-search-submit svg {
  width: 24px !important;
  height: 24px !important;
  fill: var(--clr-navy) !important;
}

.search-h .is-search-input {
  order: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  border: none !important;
  border-bottom: 1.5px solid transparent !important;
  background: transparent !important;
  overflow: hidden !important;
  font-size: var(--fn) !important;
  color: var(--clr-navy) !important;
  outline: none !important;
  font-family: inherit !important;
  transition:
    width   0.35s cubic-bezier(0.4,0,0.2,1),
    opacity 0.3s ease,
    padding 0.3s ease,
    border-color 0.3s ease !important;
}

.search-h .is-search-form.dcs-search-open .is-search-input {
  width: clamp(120px, 12vw, 200px) !important;
  opacity: 1 !important;
  padding: 3px 8px !important;
  border-bottom-color: rgba(26,43,74,0.35) !important;
}

.search-h .is-screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
}

.search-h .is-loader-image { display: none !important; }


/* ============================================================
   7. ТЕЛЕФОН (.phone-h)
   ============================================================ */

.phone-h {
  flex: 0 0 auto !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
}

.phone-h .elementor-icon-box-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-direction: row !important;
}

.phone-h .elementor-icon-box-icon { margin: 0 !important; }

.phone-h .elementor-icon-box-icon a {
  display: flex !important;
  align-items: center !important;
  color: var(--clr-red) !important;
}

.phone-h .elementor-icon-box-icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: var(--clr-red) !important;
}

.phone-h .elementor-icon-box-title { display: none !important; }

.phone-h .elementor-icon-box-description {
  font-size: var(--fn) !important;
  font-weight: 600 !important;
  color: var(--clr-navy) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}


/* ============================================================
   8. КНОПКА "ЗАПИС НА ПРИЙОМ" (.button-h)
   Темно-синя заливка → при ховері червона
   ============================================================ */
.button-h .elementor-button {
  font-size: clamp(0.8rem, 0.48rem + 0.65vw, 1.2rem) !important;
  letter-spacing: 0.07em !important;
   /*color: #ffffff !important;*/
  /*background: var(--clr-navy) !important;*/
  border: 1.5px solid var(--clr-navy) !important;
  border-radius: 50px !important;
  padding: 9px 12px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: background var(--tr), border-color var(--tr) !important;
}

.button-h .elementor-button:hover {
  background: var(--clr-red) !important;
  border-color: var(--clr-red) !important;
}

@keyframes dcs-shake {
  0%,100% { transform: rotate(0); }
  15%      { transform: rotate(-20deg); }
  30%      { transform: rotate(20deg); }
  45%      { transform: rotate(-15deg); }
  60%      { transform: rotate(15deg); }
  75%      { transform: rotate(-8deg); }
  90%      { transform: rotate(8deg); }
}

.btn-shake .elementor-button:hover .elementor-button-icon {
  animation: dcs-shake 0.5s cubic-bezier(0.36,0.07,0.19,0.97) both;
}


/* ============================================================
   9. ІКОНКА АКАУНТУ (.akk-h)
   ============================================================ */
.akk-h .elementor-icon {
  cursor: pointer !important;
  transition: opacity var(--tr) !important;
}

.akk-h .elementor-icon:hover { opacity: 0.75 !important; }


/* ============================================================
   10. АДАПТИВ ≤ 1024px
   Шапка: [ Лого ] [ Кнопка запису ] [ Меню/Бургер ] [ Mob-popup ]
   ============================================================ */
@media (max-width: 1024px) {



  /* Шапка — компактна */
  .header-wrap {
    /*padding: 0 14px !important;
    gap: 8px !important;*/
  }

  /* Лого — ліворуч */
  .logo-h {
    flex: 1 1 auto !important;
    order: 1 !important;
  }

  /* Кнопка запису */
  .button-h {
    order: 2 !important;
    flex: 0 0 auto !important;
  }

  /* .menu-h містить бургер — праворуч */
  .menu-h, .menu-header {
    order: 3 !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
  }

  /* .mob-menu-h — після бургера (popup контент) */
  .mob-menu-h {
    order: 4 !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 480px) {
  .logo-h {
    max-width: 97px !important;
  }
 

  .button-h .elementor-button {
    font-size: 0.7rem !important;
    padding: 7px !important;
  }

  .mob-menu-h {
    max-width: 50px;
  }

}



/***********SERVICES-BUTTON**************/
.services .btn-hover {max-width: auto!important;}
.services .elementor-button-content-wrapper {justify-content: space-between;}
.services .btn-hover .elementor-button {background-color:#fff;}
.services .btn-hover .elementor-button:hover {background-color:#B4BFFC; }
.services a.elementor-button {position:relative; width:350px; }


@media (min-width: 1024px) and (max-width: 1300px) {
  .services a.elementor-button {width:300px; }

}
@media (min-width: 680px) and (max-width: 1024px) {
  .services a.elementor-button {position:relative; width:300px; }
  .services a.elementor-button {font-size: 17px; }
}



/***kardiologiya********/
@media (min-width: 1024px) and (max-width: 1300px) {
.page-id-118 .services a.elementor-button {
    max-width: 290px;
    font-size: 17px;
  }
  .services a.elementor-button {
    font-size: 17px;
  }
}

@media (min-width: 1300px)  {
 .services a.elementor-button {
       width:100%;
     }
  .home .services a.elementor-button {
       width:355px;
     }
}

@media (max-width: 768px)  {
 .services a.elementor-button {
       width:100%;
       min-width: 330px;
     }
}





/*---ANIMATION-HOVER--*/
.btn-hover .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 1.8s;
  transform-origin: center center;
}

.btn-hover .elementor-button:hover {background-color:#8091ED;}

/*****Сдвиг-вправо******/
.btn-hover .elementor-button:hover .elementor-button-icon,
.btn-hover .elementor-button:focus .elementor-button-icon {
    transform:translateX(10px);  }


/****Колокольчик*****/
@keyframes icon-shake {
  0%, 100% { transform: rotate(0deg); }
  15%       { transform: rotate(-20deg); }
  30%       { transform: rotate(20deg); }
  45%       { transform: rotate(-15deg); }
  60%       { transform: rotate(15deg); }
  75%       { transform: rotate(-8deg); }
  90%       { transform: rotate(8deg); }
}


.hover-shake .elementor-button:hover .elementor-button-icon,
.hover-shake .elementor-button:focus .elementor-button-icon {
  animation: icon-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Если иконка — SVG или i-тег внутри span */
.hover-shake .elementor-button:hover .elementor-button-icon svg,
.hover-shake .elementor-button:hover .elementor-button-icon i {
  animation: icon-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}





/*---Footer---*/


/*---Smart Slider---*/
/* ============================================================
   ДОКОС МЕДІКАЛ — Smart Slider 3
   Размер: 750×1000px | Скругление: 30px
   Точки: отключены | Стрелки: синеватые круглые
   ============================================================
   Вставить в: Appearance → Additional CSS
   ИЛИ: Smart Slider 3 → слайдер → Developer → CSS
   ============================================================ */


/* ============================================================
   1. РАЗМЕР И СКРУГЛЕНИЕ СЛАЙДЕРА
   ============================================================ */
.n2-ss-slider-wrapper,
.n2-ss-slider {
  width: 750px !important;
  max-width: 100% !important;
  height: 1000px !important;
  border-radius: 30px !important;
  overflow: hidden !important;
}

@media (max-width: 800px) {
  .n2-ss-slider-wrapper,
  .n2-ss-slider {
    width: 100% !important;
    height: 75vw !important;
    min-height: 400px !important;
  }
}


/* ============================================================
   2. СТЕКЛЯННЫЙ БЛОК
   CSS Class на слой в редакторе:  glass-card
   ============================================================ */
.n2-ss-layer.glass-card,
.n2-ss-layer .glass-card {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 18px !important;
  padding: 28px 28px 20px !important;
  box-sizing: border-box !important;
}

.n2-ss-layer.glass-card .n2-style-heading,
.n2-ss-layer.glass-card h2,
.n2-ss-layer.glass-card h3,
.n2-ss-layer.glass-card [class*="n2-font"] {
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}

.n2-ss-layer.glass-card .n2-ss-button-container a,
.n2-ss-layer.glass-card a.n2-ss-btn {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 50px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 14px 24px !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: background 0.25s ease !important;
  margin-bottom: 16px !important;
}

.n2-ss-layer.glass-card .n2-ss-button-container a:hover,
.n2-ss-layer.glass-card a.n2-ss-btn:hover {
  background: rgba(255, 255, 255, 0.28) !important;
}


/* ============================================================
   3. СТРЕЛКИ — круглые, синеватые
   ============================================================ */
.n2-ss-arrow-previous,
.n2-ss-arrow-next,
.nextend-arrow.n2-ss-arrow {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: rgba(90, 120, 190, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.30) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
  cursor: pointer !important;
}

.n2-ss-arrow-previous:hover,
.n2-ss-arrow-next:hover {
  background: rgba(90, 120, 190, 0.88) !important;
  transform: scale(1.08) !important;
}

.n2-ss-arrow-previous svg,
.n2-ss-arrow-next svg {
  width: 20px !important;
  height: 20px !important;
  fill: #ffffff !important;
}

.n2-ss-arrow-previous {
  position: absolute !important;
  bottom: 28px !important;
  right: 90px !important;
  left: auto !important;
  top: auto !important;
}

.n2-ss-arrow-next {
  position: absolute !important;
  bottom: 28px !important;
  right: 28px !important;
  left: auto !important;
  top: auto !important;
}

@media (max-width: 800px) {
  .n2-ss-arrow-previous {
    width: 42px !important;
    height: 42px !important;
    right: 74px !important;
    bottom: 20px !important;
  }
  .n2-ss-arrow-next {
    width: 42px !important;
    height: 42px !important;
    right: 20px !important;
    bottom: 20px !important;
  }
}


/* ============================================================
   4. ТОЧКИ — полностью отключены
   ============================================================ */
.n2-ss-dots,
.n2-ss-dot,
.n2-bullet,
.n2-ss-bullet-bar,
.nextend-bullet {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ============================================================
   ИНСТРУКЦИЯ:

   ШАГ 1 — Размер:
   Slider settings → Size → Width: 750 / Height: 1000

   ШАГ 2 — Скругление:
   Slider settings → General → Border radius: 30

   ШАГ 3 — Стеклянный блок:
   Слой (Row) → Style → CSS Class → glass-card
   Позиция: Bottom / Left, отступ 28px, ширина 100%

   ШАГ 4 — Стрелки:
   Controls → Arrows → включить, тип Default

   ШАГ 5 — Точки:
   Controls → Dots → выключить
   ============================================================ */


   /*********ЛІКАРІ*********************/

  .doctors .top-right {border-radius: var(--header-radius);}
  .doctors .top-right img{object-fit: cover;}


/************MOB-MENU**************/

/************************************/
/************************************/
#mobile-menu-container {
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    position: fixed;
    top: 0;
    left: 0; /* Повністю за лівим краєм */
    transform: translateX(-100%);
    width: 97%; /* Ширина твого меню */
    max-width: 360px;
    height: 100vh;
    background: #ffffff;
    z-index: 99999;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Плавний виїзд */
    box-shadow: 5px 0 15px rgba(0,0,0,0.2);
    padding: 10px 7px;
    
}

#mobile-menu-container.e-con.e-flex {
    flex-wrap: nowrap !important;
}

/* Клас, який активує видимість */
#mobile-menu-container.is-open {
    /*left: 0; /* Виїжджає на екран */
    transform: translateX(0); /* Включаем через transform */
}

/* Затемнення фону (Overlay) */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px); /* Гарне розмиття фону */
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
}



/* Общие отступы для списка */
.dd-menu-root li {
    margin-bottom: 5px; /* Расстояние между "островками" */
    padding: 0 10px;
}

/* Контейнер пункта меню */
.menu-item-content {
    display: flex;
    align-items: center;
    background: #e3f2fd; /* Светло-голубой */
    border-radius: 35px;
    transition: all 0.3s ease;
    overflow: hidden;
}


/* Элементы списка */
.dd-menu-root li a, .dd-menu-root li.back-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #333;
    cursor: pointer;
}

.dd-menu-root li.back-btn {
    background: #f9f9f9;
    font-weight: bold;
}


/* Ссылка */
.menu-link {
    flex-grow: 1;
    padding: 10px 20px;
    color: #0d47a1; /* Темно-синий текст */
    text-decoration: none;
    font-weight: 500;
}

/* Стрелочка в кружке */
.next-lvl-btn {
    width: 35px;
    height: 35px;
    background: #2196f3; /* Синий поярче */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
    padding:15px;
    margin-right:3px;
}

.next-lvl-btn i {
    font-style: normal;
    font-size: 22px;
    line-height: 0;
    margin-top: -2px;
}

/* Ховер эффекты */
.menu-item-content:hover {
    background: #bbdefb; /* Чуть темнее при наведении на весь островок */
}

.next-lvl-btn:hover {
    background: #1565c0; /* Совсем темный при наведении на саму кнопку */
}

/* Кнопка назад */
.back-btn {
    margin: 10px 15px 20px 15px;
    background: #f5f5f5;
    border-radius: 35px;
    padding: 10px 15px;
    color: #666;
    cursor: pointer;
    text-align: center;
    list-style: none;
}

/************FOOTER**************/
.footer-wrap ul li:hover a {color:rgba(255, 255, 255, 0.7) !important;} 
.elementskit-card-header a {border-radius: 35px; border: 1px #fff solid; background-color: rgba(33, 84, 82, 0.76) !important;}

.elementskit-card-body {padding: 0 10px 0 20px !important; }
.elementskit-card-body li a {font-size: 15px !important; color:rgba(255, 255, 255, 0.7); }
body .ekit-accordion--content ul li:hover a {color:#fff !important;}
.elementskit-card-body li a:hover {color:#fff !important;}
.elementskit-card-header {border: 1px solid #fff !important; border-radius: 35px; 	background: #fff !important;}
.elementskit-card-header a.elementskit-btn-link {color:#fff !important; background-color: rgba(33, 84, 82, 0.7) !important;}
.elementskit-card-header .ekit_accordion_active_icon svg {fill: #fff !important;}

@media (max-width: 800px){
.elementor-element-7a27baf {border-radius: 35px; border: 1px #fff solid; background-color: rgba(99, 135, 134, 1) !important;
    padding: 14px 30px; 
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}
}


/**********Всливашка СF1 footer****************/
/* Стилі для попапу */
.hidden-element { display: none !important; }

/* Стилі вікна */
.c-popup-overlay {
    display: none;
    position: fixed;
    top: 

0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    justify-content: center;
    align-items: center;
}
.c-popup-overlay.active { display: flex; }

.c-popup-content {
    background: #fff;
    padding: 40px 30px 30px;
    border-radius: 15px;
    position: relative;
    max-width: 500px;
    width: 95%;
}
.c-popup-close {
    position: absolute;
    top: 10px; right: 15px;
    background: none; border: none;
    font-size: 30px; cursor: pointer; color: #000;
}
/* Щоб форма всередині була видимою */
.c-popup-content .hidden-element { display: block !important; }

/* Стилі самого вікна */
.c-popup-content {
    background: #ffffff;
    padding: 

40px;
    border-radius: 20px; /* Більш закруглені кути */
    position: relative;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

/* Анімація при відкритті */
.c-popup-overlay.active .c-popup-content {
    transform: translateY(0);
}

/* Кнопка закриття (крестик) */
.c-popup-close {
    position: absolute;
    /* Піднімаємо вище та виносимо трохи вбік */
    top: -15px; 
    right: -15px; 
    
    width: 36px;
    height: 36px;
    background: #ffffff; /* Білий фон, щоб виділявся */
    border: 2px solid #333; /* Додаємо тонку рамку */
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Найважливіше: виносимо на самий перед */
    z-index: 999999 !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    padding: 0;
    transition: all 0.2s ease;
}
/* На мобільних пристроях робимо відступ зверху у форми, щоб вона не перекривала кнопку */
@media (max-width: 480px) {
    .c-popup-content {
        margin-top: 20px; /* Даємо місце для хрестика зверху */
        padding-top: 35px !important;
        width: 85%; /* Трохи звужуємо, щоб хрестик не вилазив за екран */
    }
    
    .c-popup-close {
        top:-10px;
        right: -10px;
        width: 40px; /* На мобілці робимо кнопку трохи більшою для пальця */
        height: 40px;
    }
}

/* Додатковий фікс: якщо форма Forminator має свій margin зверху, прибираємо його */
#popup-form-container form {
    margin-top: 0 !important;
}


.c-popup-close:hover {
    background: #e0e0e0;
    color: #000;
    transform: rotate(90deg); /* Ефект при наведенні */
}

/* Ефект розмиття фону */
.c-popup-overlay {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
@media (max-width: 480px) {
    .c-popup-content { padding: 25px 15px; }
}

/* Стиль заголовка форми (якщо він є) */
#popup-form-container .forminator-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #222;
}

/* Поля вводу */
#popup-form-container .forminator-input {
    border-radius: 8px !important;
    border: 1px solid #ddd !important;
    background: #fafafa !important;
}

/* Кнопка відправки форми */
#popup-form-container .forminator-button-submit {
    width: 100% !important; /* Кнопка на всю ширину */
    background: #0073aa !important; /* Ваш колір */
    border-radius: 8px !important;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    transition: background 0.3s !important;
}

#popup-form-container .forminator-button-submit:hover {
    background: #005177 !important;
}
/**********END*Всливашка СF1 footer****************/



/*************Post_Grid_filter_Doctors***********/
/* Стилі для сітки лікарів */
.doctors-filter-wrapper {
    margin-top: 20px;
}

#doctors-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.filter-buttons {
    margin-bottom: 35px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.filter-btn {
    padding: 10px 22px;
    cursor: pointer;
    border: 2px solid #B4BFFC;
    background: #fff;
    color: #8091ED;
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.filter-btn.active, .filter-btn:hover {
    background: #8091ED;
    border-color: #8091ED;
    color: #fff;
}

.doctor-card {
    border: 1px solid #eee;
    padding: 0;
    border-radius: 12px;
    text-align: center;
    background: #fff;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.doctor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(180, 191, 252, 0.3);
}

.doctor-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.doc-img-link img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.doc-content {
    padding: 15px;
    flex-grow: 1;
}

.doc-name {
    font-size: 18px;
    margin: 10px 0 5px;
    color: #333;
    line-height: 1.3;
}

.doctor-card:hover .doc-name {
    color: #8091ED;
}

.doc-exp {
    font-size: 14px;
    color: #777;
    margin: 0;
}

/* Адаптивність */
@media (max-width: 1024px) {
    #doctors-container { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    #doctors-container { grid-template-columns: 1fr; }
}
/*************END_Post_Grid_filter_Doctors***********/

/************Doctors-slider****************/
.dcs-doctors-block { margin: 32px 0; }

/* Шапка слайдера */
.dcs-slider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    min-height: 44px;
}
.dcs-block-title {
    font-family: 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 600;
    margin: 0;
}

/* Контейнер кнопок */
.dcs-nav-btns {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Скидаємо ВСІ стилі Elementor на кнопках — важливо! */
.dcs-nav-btns button,
.dcs-nav-btns button.dcs-btn-prev-icon,
.dcs-nav-btns button.dcs-btn-next-icon {
    all: unset /* скидає ВСЬОГО включно з Elementor */;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid #e0e4f5 !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s, border-color 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 0 !important;
    flex-shrink: 0;
    line-height: 1;
    font-size: 0; /* прибирає зайвий простір навколо svg */
}
.dcs-nav-btns button:hover {
    background: #8091ED !important;
    border-color: #8091ED !important;
}
.dcs-nav-btns button:hover svg path {
    stroke: #ffffff;
}
.dcs-nav-btns button.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* Стрілка НАЗАД — дзеркалимо через transform на svg */
.dcs-nav-btns .dcs-btn-prev-icon svg {
    transform: rotate(180deg);
    display: block;
    pointer-events: none;
}
.dcs-nav-btns .dcs-btn-next-icon svg {
    display: block;
    pointer-events: none;
}

/* Swiper */
.dcs-swiper-outer { overflow: hidden; }
.dcs-swiper-outer .swiper-slide { height: auto; }

/* Картка */
.dcs-doctors-block .doctor-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow 0.2s;
}
.dcs-doctors-block .doctor-card:hover {
    box-shadow: 0 8px 32px rgba(128,145,237,0.18);
}
.dcs-doctors-block .doc-img-link { display: block; }
.dcs-doctors-block .doc-img-link img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: top;
    display: block;
}
.dcs-doctors-block .doc-content {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.dcs-doctors-block .doc-name {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px;
    line-height: 1.3;
    color: inherit;
}
.dcs-doctors-block a { text-decoration: none; color: inherit; }
.dcs-doctors-block a:hover .doc-name { color: #8091ED; }
.dcs-doctors-block .doc-spec {
    font-size: 13px;
    color: #8091ED;
    font-weight: 500;
    margin: 0 0 6px;
    font-family: 'Manrope', sans-serif;
}
.dcs-doctors-block .doc-exp {
    font-size: 13px;
    color: #888;
    margin: 0;
    font-family: 'Manrope', sans-serif;
}
/*.dcs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
*/

.dcs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 340px));
    gap: 20px;
}

/*****************GRID***************/
@media (min-width: 750px) {
.grid-text2 .elementor-widget-heading {height: 75px; display:flex; align-items:end;}
.grid-text2 .elementor-widget-heading.elementor-heading-title {align-items: flex-end;}
}