/* ========================================
   PMG SCHOOL WEBSITE - MAIN STYLESHEET
   ======================================== */

/* ========================================
   1. RESET & BASE STYLES
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #F5F5F5;
}

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

.clearfix {
  clear: both;  
}

/* ========================================
   2. NAVIGATION
   ======================================== */
.navbar {
  background: rgb(215 238 175);
  border-bottom: 1px solid #000000;
  padding: 15px 60px;
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}



.nav-container {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 19px;
}

.nav-logo {
  display: none;
}

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

.nav-link {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #1C3F36;
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #14AA00;
}

.nav-dropdown {
  display: flex;
  align-items: center;
  gap: 4px;

}

.dropdown-icon {
  width: 24px;
  height: 24px;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.nav-button {

  background: #1C3F36;
  color: #E9F7D1;
  border: none;
  border-radius: 5px;
  padding: 11.5px 16px;
  font-family: 'Alexandria', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 27px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.nav-button:hover {
  background: #2a5a4a;
}

/* Link styled as nav button */
a.nav-button {
  background: #1C3F36;
  color: #E9F7D1;
  border: none;
  border-radius: 5px;
  padding: 11.5px 16px;
  font-family: 'Alexandria', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 27px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none !important;
  display: inline-block;
}

a.nav-button:visited {
  background: #1C3F36;
  color: #E9F7D1;
  text-decoration: none !important;
}

a.nav-button:hover,
a.nav-button:focus,
a.nav-button:active {
  background: #2a5a4a;
  color: #E9F7D1;
  text-decoration: none !important;
}

/* ========================================
   2.1. MOBILE MENU TOGGLE
   ======================================== */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 35px;
  height: 35px;
  background: linear-gradient(135deg, #1C3F36 0%, #2a5a4a 100%);
  border: 2px solid #14AA00;
  border-radius: 8px;
  cursor: pointer;
  padding: 6px;
  box-shadow: 0 4px 12px rgba(28, 63, 54, 0.3);
  transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(28, 63, 54, 0.4);
}

.mobile-menu-toggle.active {
  background: linear-gradient(135deg, #14AA00 0%, #1C3F36 100%);
  border-color: #FFFFFF;
  transform: scale(1.05);
}

.hamburger-line {
  width: 20px;
  height: 3px;
  background-color: #FFFFFF;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center;
  border-radius: 2px;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* ========================================
   2.2. MOBILE MENU OVERLAY
   ======================================== */
/* Overlay background */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  display: none;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 10000;
}
.mobile-menu-overlay.active {
  display: block;
  opacity: 1;
}

/* Container */
.mobile-menu {
  position: absolute;
  top: 0;
  right: 0;
  width: 85%;
  max-width: 420px;
  height: 100%;
  background: #fff;
  box-shadow: -5px 0 15px rgba(0,0,0,0.3);
  transform: translateX(100%);
  transition: transform 0.4s ease;
  display: flex;
  flex-direction: column;
}
.mobile-menu-overlay.active .mobile-menu {
  transform: translateX(0);
}

/* Header */
.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #1C3F36, #2a5a4a);
  padding: 18px 24px;
  border-bottom: 3px solid #14AA00;
}
.mobile-menu-header h3 {
  margin: 0;
  font-size: 20px;
  color: #fff;
  font-family: 'Roboto', sans-serif;
}
.mobile-menu-close {
  font-size: 26px;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
}

/* Links */
.mobile-menu-content {
  flex: 1;
  overflow-y: auto;
}
.mobile-menu-link {
  display: block;
  padding: 16px 24px;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #1C3F36;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}
.mobile-menu-link:hover {
  background: #E9F7D1;
  color: #14AA00;
}
.mobile-menu-link.active {
  background: linear-gradient(90deg, #14AA00, #1C3F36);
  color: #fff;
}

/* Dropdown */
.mobile-dropdown {
  border-bottom: 1px solid #eee;
}
.mobile-dropdown-toggle {
  width: 100%;
  padding: 16px 24px;
  background: #fff;
  border: none;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  color: #1C3F36;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-dropdown-toggle .arrow {
  transition: transform 0.3s ease;
}
.mobile-dropdown.open .arrow {
  transform: rotate(180deg);
}

/* Submenu */
.mobile-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  background: #F9F9F9;
}
.mobile-submenu li a {
  display: block;
  padding: 12px 36px;
  font-size: 15px;
  color: #1C3F36;
  text-decoration: none;
}
.mobile-submenu li a:hover {
  background: #E9F7D1;
}
.mobile-dropdown.open .mobile-submenu {
  display: block;
}


/* SUB-SUBMENU */
.mobile-submenu li.has-submenu {
  position: relative;
}

/* Линк с вложено подменю */
.mobile-submenu li.has-submenu > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 24px;
  cursor: pointer;
}

.mobile-submenu li.has-submenu > a::after {
  content: "▾";
  font-size: 13px;
  color: #1C3F36;
  transition: transform 0.3s ease;
}

/* Когато е отворено */
.mobile-submenu li.has-submenu.open > a::after {
  transform: rotate(180deg);
}

/* Вътрешното подменю */
.mobile-sub-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #F2F2F2;
  display: none;
  border-left: 3px solid #B9E769;
}

/* Линкове вътре */
.mobile-sub-submenu li a {
  display: block;
  padding: 10px 48px;
  font-size: 14.5px;
  color: #1C3F36;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}

.mobile-sub-submenu li a:hover {
  background: #E9F7D1;
  color: #14AA00;
}

/* Отворено състояние */
.mobile-submenu li.has-submenu.open > .mobile-sub-submenu {
  display: block;
  animation: slideDown .25s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ========================================
   2.3. MOBILE MENU ANIMATIONS
   ======================================== */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.mobile-menu-overlay.active .mobile-menu {
  animation: slideInRight 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-menu-link {
  animation: slideInUp 0.3s ease forwards;
  opacity: 0;
}

.mobile-menu-link:nth-child(1) { animation-delay: 0.1s; }
.mobile-menu-link:nth-child(2) { animation-delay: 0.15s; }
.mobile-menu-link:nth-child(3) { animation-delay: 0.2s; }
.mobile-menu-link:nth-child(4) { animation-delay: 0.25s; }
.mobile-menu-link:nth-child(5) { animation-delay: 0.3s; }
.mobile-menu-link:nth-child(6) { animation-delay: 0.35s; }
.mobile-menu-link:nth-child(7) { animation-delay: 0.4s; }
.mobile-menu-link:nth-child(8) { animation-delay: 0.45s; }
.mobile-menu-link:nth-child(9) { animation-delay: 0.5s; }
.mobile-menu-link:nth-child(10) { animation-delay: 0.55s; }
.mobile-menu-link:nth-child(11) { animation-delay: 0.6s; }
.mobile-menu-link:nth-child(12) { animation-delay: 0.65s; }
.mobile-menu-link:nth-child(13) { animation-delay: 0.7s; }
.mobile-menu-link:nth-child(14) { animation-delay: 0.75s; }
.mobile-menu-link:nth-child(15) { animation-delay: 0.8s; }
.mobile-menu-link:nth-child(16) { animation-delay: 0.85s; }
.mobile-menu-link:nth-child(17) { animation-delay: 0.9s; }
.mobile-menu-link:nth-child(18) { animation-delay: 0.95s; }
.mobile-menu-link:nth-child(19) { animation-delay: 1s; }





.nav-dropdown{
  position: relative;
  display: flex; align-items: center; gap: 6px;
}
.nav-trigger{
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; padding: 8px 0;
  cursor: pointer;
}
.nav-caret{
  transition: transform .25s ease;
  color: #1C3F36;
}
.nav-dropdown.is-open .nav-caret{ transform: rotate(180deg); }

/* панелът */
.nav-submenu{
  position: absolute; top: 100%; left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 2000;
}
.nav-submenu a{
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #1C3F36; text-decoration: none; font-weight: 500;
  font-size: 15px;
}
.nav-submenu a:hover{
  background: linear-gradient(90deg, #E9F7D1 0%, #F0F8E8 100%);
  color:#14AA00;
}

/* показване: 1) hover 2) клавиатура/клик */
.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu,
.nav-dropdown.is-open .nav-submenu{
  opacity: 1; transform: translateY(0); pointer-events: auto;
}

/* по-широки подменюта отдясно да не излизат от екрана */
.nav-dropdown:last-child .nav-submenu{
  left: auto; right: 0;
}

/* ============ MOBILE SUBMENUS (акордеон) 
.m-expander{
  position: relative;
}
.m-expander::after{
  content: '▾';
  position: absolute; right: 16px;
  transition: transform .2s ease;
}
.m-expander[aria-expanded="true"]::after{ transform: rotate(180deg); }
.m-submenu{
  background: #FAFAFA;
  padding: 6px 0 10px 10px;
  border-left: 3px solid #14AA00;
}
.m-submenu .mobile-menu-link{
  padding-left: 40px;
  background: #FAFAFA;
}
============ */


/* Tablet UX: показвай caret и при hover отвори плавно */
@media (max-width: 1024px){
  .nav-submenu{ /* малко по-големи тап-зони */
    padding: 12px;
  }
}

.nav-submenu li{
  list-style: none;      /* за всеки случай */
  margin: 0; padding: 0; /* нулира отстъпи на <li> */
}


/* ===== SECOND-LEVEL SUBMENU (submenu в submenu) ===== */
.nav-submenu li.has-submenu {
  position: relative;
}

.nav-submenu li.has-submenu > a::after {
  content: "▸";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
  font-size: 14px;
}

/* Второ ниво меню */
.sub-submenu {
  position: absolute;
  top: 0;
  left: 100%;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
  padding: 8px;
  min-width: 230px;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 9999;
}

/* Hover ефект — показване */
.nav-submenu li.has-submenu:hover > .sub-submenu {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Стилове на линковете вътре */
.sub-submenu a {
  display: block;
  padding: 9px 12px;
  color: #1C3F36;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
}

.sub-submenu a:hover {
  background: #E9F7D1;
  color: #14AA00;
}

/* За да не излиза извън екрана ако е последно вляво */
.nav-dropdown:last-child .sub-submenu {
  left: auto;
  right: 100%;
}


/* === LOGO STYLES === */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nav-logo img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.nav-logo-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: #1C3F36;
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
}

/* При hover лек ефект */
.nav-logo:hover .nav-logo-text {
  color: #14AA00;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .nav-logo img {
    height: 42px;
  }

  .nav-logo-text {
    display: none; /* скриваме текста при мобилен за по-чист изглед */
  }

  .nav-container {
    justify-content: space-between;
  }
}

/* ========================================
   3. HERO SECTION
   ======================================== */
:root{
  --green:#1C3F36;
  --arrow_green: #1f8a6f;
  --glass: rgba(255,255,255,.18);
  --dot:#ffffffcc;
  --dot-active:#B9E769;
}

/* HERO */
.hero{
  position:relative;
  width:100%;
  height: clamp(520px, 62vh, 720px); /* адаптивна височина */
  overflow:hidden;
  isolation:isolate;
}

.slider{ position:absolute; inset:0; }

.slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity .9s ease;
  pointer-events:none; will-change:opacity, transform;
}
.slide.is-active{ opacity:1; pointer-events:auto; }

.slide img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
 transition:transform 6s ease;
  filter:saturate(1.02) contrast(1.02) brightness(0.98);
}
.slide.is-active img{ transform:scale(1); }

.vignette{
  position:absolute; inset:0;
  background:linear-gradient(10deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.25) 20%, rgba(0,0,0,.25) 100%);
  pointer-events:none; z-index:1;
}

.hero-caption{
  position:absolute; inset:auto 0% 75% 26%;
  z-index:2; max-width:960px;
}

.hero-title{
  text-align: center;
  font-family:Poppins, sans-serif; font-weight:700; line-height:1.15;
  margin:0 0 6px; color:#eaf3ee; text-shadow:0 2px 14px rgba(0,0,0,.55);
  font-size:clamp(26px, 4.2vw, 54px);
}

.hero-sub{ margin:0; opacity:.9; font-size:clamp(14px, 1.3vw, 18px); }

/* ARROWS */
.nav{
  position:absolute; inset:0; display:flex; justify-content:space-between; align-items:center;
  padding:0 18px; z-index:3; pointer-events:none;
}
.arrow{
  pointer-events:auto; width:52px; height:52px; border-radius:50%;
  border:1px solid #ffffff33; background:var(--glass); backdrop-filter:blur(8px);
  display:grid; place-items:center; cursor:pointer;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
  color:var(--arrow_green); box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.arrow:hover{ transform:scale(1.07); background:#fff; }
.arrow:active{ transform:scale(.98); }
.arrow svg{ width:22px; height:22px; stroke:var(--arrow_green); stroke-width:3; fill:none; }

/* DOTS */
.dots{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; gap:10px; z-index:3;
}
.dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--dot); border:1px solid #ffffff88; cursor:pointer;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.dot:hover{ transform:scale(1.15); }
.dot.is-active{ background:var(--dot-active); border-color:transparent; box-shadow:0 0 0 6px rgba(185,231,105,.22); }

@media (max-width:768px){
  .arrow{ width:46px; height:46px; }
  .dots{ gap:8px; }
  .dot{ width:9px; height:9px; }
}

/* Divider ПОД хедъра (не е absolute) */

.hero-divider img{ width:100%; height:auto; display:block; }

/* Important Section – вече не е в header и няма отриц. марджин */
  .imp-wrap{ max-width:1200px; margin:0px auto 0px; padding:0 24px; position:relative; }
  .imp-title{
    font-family:Poppins, sans-serif; font-weight:700; text-align:center;
    color:var(--imp-green); margin:0 0 10px; line-height:1.15; font-size:clamp(24px,3.8vw,40px);
  }
  .imp-sub{ text-align:center; margin:0 0 22px; opacity:.8; }

  /* ===== COVERFLOW ===== */
  .imp-coverflow{ position:relative; perspective:1200px; perspective-origin:50% 40%; }
  .imp-track{ position:relative; height:420px; }
  .imp-flow-card{
    position:absolute; top:0; left:50%; width:360px; height:420px;
    transform:translateX(-50%);
    transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .55s ease, opacity .55s ease, z-index .55s step-end;
    opacity:.6; z-index:1;
  }
  .imp-flow-card.imp-center{ transform:translateX(-50%) scale(1.06); opacity:1; z-index:5; }
  .imp-flow-card.imp-left  { transform:translateX(calc(-50% - 240px)) rotateY(-20deg) scale(.94); z-index:3; }
  .imp-flow-card.imp-right { transform:translateX(calc(-50% + 240px)) rotateY( 20deg) scale(.94); z-index:3; }

  @media(min-width:1100px){
    .imp-flow-card.imp-left  { transform:translateX(calc(-50% - 280px)) rotateY(-20deg) scale(.95); }
    .imp-flow-card.imp-right { transform:translateX(calc(-50% + 280px)) rotateY( 20deg) scale(.95); }
  }
  @media(max-width:640px){
    .imp-flow-card{ width:88vw; max-width:420px; }
    .imp-flow-card.imp-left,.imp-flow-card.imp-right{ transform:translateX(-50%) scale(.92); opacity:.45; }
  }

  /* ===== CARD INNER ===== */
  .imp-card{ width:100%; height:100%; border-radius:14px; overflow:hidden; position:relative; background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.14);}
  .imp-ribbon{
    position:absolute; top:14px; left:-8px; z-index:3; color:#fff; font:700 12px/1 'Roboto',sans-serif;
    padding:8px 18px 8px 14px; 
    border-radius: 0 100px 100px 0;
    display:flex; align-items:center; gap:6px; letter-spacing:.5px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.2));
  }
  .imp-ribbon svg{ width:14px; height:14px; stroke:#fff; stroke-width:2; fill:none; }
  .imp-ribbon.imp-blue{ background:var(--imp-blue) }
  .imp-ribbon.imp-lime{ background:var(--imp-lime) }
  .imp-ribbon.imp-green{ background:var(--imp-green) }
  .imp-ribbon.imp-orange{ background:var(--imp-orange) }
  .imp-ribbon.imp-gray{ background:var(--imp-gray) }

  /* градиентен бордър по тема (само централната) */
  .imp-card::before{
    content:""; position:absolute; inset:0; border-radius:14px; padding:2px; z-index:2;
    background: var(--imp-border-grad, conic-gradient(from 0deg, #fff0, #fff0));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:.0; transition: opacity .4s ease;
  }
  .imp-flow-card.imp-center .imp-card::before{ opacity:.85 }

  .imp-media{ position:relative; height:270px; overflow:hidden }
  .imp-image{
    width:100%; height:100%; object-fit:cover; display:block; transform:scale(1);
    transition: transform .6s ease;
  }
  .imp-shine{
    position:absolute; inset:-25% -40%;
    background: linear-gradient(115deg, transparent 45%, rgba(255,255,255,.55) 50%, transparent 55%);
    transform: translateX(-120%) rotate(8deg);
    transition: transform .9s cubic-bezier(.2,.65,.2,1);
    ;
  }

  .imp-content{ padding:16px 16px 18px; text-align:center; background: var(--imp-cardBg, #fff); }
  .imp-title-card{ font:700 24px/1.3 'Roboto', sans-serif; color:var(--imp-green); margin:0 0 8px; }
  .imp-btn{
    display:inline-block; padding:10px 18px; border-radius:999px; text-decoration:none;
    font:600 14px/1 'Roboto',sans-serif; color:#E9F7D1; background:var(--imp-green);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    box-shadow: 0 6px 16px rgba(0,0,0,.18); cursor:pointer;
  }
  .imp-btn:hover{ transform: translateY(-2px); background:#2a5a4a }

  /* теми (фон + бордър градиент) */
  .imp-theme-blue   { --imp-cardBg: var(--imp-blueBg);   --imp-border-grad: conic-gradient(from 0deg, #ffffffaa, var(--imp-blue), #ffffff00 60%, var(--imp-blue)); }
  .imp-theme-lime   { --imp-cardBg: var(--imp-limeBg);   --imp-border-grad: conic-gradient(from 0deg, #ffffffaa, var(--imp-lime), #ffffff00 60%, var(--imp-lime)); }
  .imp-theme-green  { --imp-cardBg: var(--imp-greenBg);  --imp-border-grad: conic-gradient(from 0deg, #ffffffaa, var(--imp-green), #ffffff00 60%, var(--imp-green)); }
  .imp-theme-orange { --imp-cardBg: var(--imp-orangeBg); --imp-border-grad: conic-gradient(from 0deg, #ffffffaa, var(--imp-orange), #ffffff00 60%, var(--imp-orange)); }
  .imp-theme-gray   { --imp-cardBg: var(--imp-grayBg);   --imp-border-grad: conic-gradient(from 0deg, #ffffffaa, var(--imp-gray), #ffffff00 60%, var(--imp-gray)); }

  /* център — лек zoom на снимката и shine */
  .imp-flow-card.imp-center .imp-image{ transform:scale(1.06) }
  .imp-flow-card.imp-center .imp-shine{ transform: translateX(120%) rotate(8deg) }

  /* ===== CONTROLS ===== */
  .imp-controls{ margin-top:18px; display:flex; align-items:center; justify-content:center; gap:16px; }
  .imp-arrow{
    width:46px; height:46px; border-radius:50%; border:1px solid #ffffff33;
    background: rgba(255,255,255,.25); backdrop-filter: blur(6px);
    display:grid; place-items:center; cursor:pointer; transition: transform .2s ease, background .2s ease;
    color:var(--imp-green);
    box-shadow:0 4px 12px rgba(0,0,0,.15);
  }
  .imp-arrow:hover{ transform:scale(1.08); background:#fff; }
  .imp-arrow svg{ width:20px; height:20px; stroke:var(--imp-green); stroke-width:3; fill:none }

  .imp-dots{ display:flex; gap:10px }
  .imp-dot{
    width:10px; height:10px; border-radius:50%; background:#ffffffcc; border:1px solid #ffffff88; cursor:pointer;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .imp-dot:hover{ transform:scale(1.15) }
  .imp-dot.imp-active{ background:#B9E769; border-color:transparent; box-shadow:0 0 0 6px rgba(185,231,105,.22) }


  /* --- FIX: бутона "Научи повече" да е кликаем --- */
.imp-shine {
  pointer-events: none; /* shine вече не блокира клика */
}

.imp-content {
  position: relative;
  z-index: 3; /* над media и shine */
}

.imp-btn {
  position: relative;
  z-index: 4;
  cursor: pointer; /* показва ръчичката */
}

/* ако някои карти имат pointer-events:none, разреши ги само за централната */
.imp-flow-card {
  pointer-events: none;
}
.imp-flow-card.imp-center {
  pointer-events: auto;
}


  :root{
    --imp-green:#1C3F36;   --imp-greenBg:#D4E8E3;
    --imp-blue:#0069B2;    --imp-blueBg:#D4EEFF;
    --imp-lime:#14AA00;    --imp-limeBg:#E9FFE7;
    --imp-orange:#CE3F00;  --imp-orangeBg:#FFE4D9;
    --imp-gray:#777;       --imp-grayBg:#F0F0F0;
  }
  *{box-sizing:border-box}

  .imp-center-content {
  background: var(--imp-limeBg);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:100%;
  text-align:center;
  padding:24px 16px;
}

.imp-center-content p {
  max-width:240px;
  margin:0 auto 10px;
  color:#333;
}

/* БАЗА (остави си твоята) */
.imp-flow-card{
  position:absolute; top:0; left:50%; width:360px; height:420px;
  transform:translateX(-50%);
  transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .55s ease, opacity .55s ease, z-index .55s step-end;
  opacity:.6; z-index:1;
}

/* център / първи ляв/десен (както досега) */
.imp-flow-card.imp-center{ transform:translateX(-50%) scale(1.06); opacity:1; z-index:5; }
.imp-flow-card.imp-left  { transform:translateX(calc(-50% - 240px)) rotateY(-20deg) scale(.94); z-index:4; opacity:.85; }
.imp-flow-card.imp-right { transform:translateX(calc(-50% + 240px)) rotateY( 20deg) scale(.94); z-index:4; opacity:.85; }

/* НОВО: втори ляв/десен */
.imp-flow-card.imp-left2  { transform:translateX(calc(-50% - 480px)) rotateY(-35deg) scale(.9);  z-index:2; opacity:.55; }
.imp-flow-card.imp-right2 { transform:translateX(calc(-50% + 480px)) rotateY( 35deg) scale(.9);  z-index:2; opacity:.55; }

/* малко по-широко раздалечаване на десктоп XL */
@media (min-width:1100px){
  .imp-flow-card.imp-left  { transform:translateX(calc(-50% - 300px)) rotateY(-20deg) scale(.95); }
  .imp-flow-card.imp-right { transform:translateX(calc(-50% + 300px)) rotateY( 20deg) scale(.95); }
  .imp-flow-card.imp-left2 { transform:translateX(calc(-50% - 560px)) rotateY(-32deg) scale(.9); }
  .imp-flow-card.imp-right2{ transform:translateX(calc(-50% + 560px)) rotateY( 32deg) scale(.9); }
}

/* на мобилно – показваме по една (другите приглушени и подредени отдолу) */
@media (max-width:640px){
  .imp-flow-card{ width:88vw; max-width:420px; }
  .imp-flow-card.imp-left,
  .imp-flow-card.imp-right,
  .imp-flow-card.imp-left2,
  .imp-flow-card.imp-right2{
    transform:translateX(-50%) scale(.92);
    opacity:.35; z-index:1;
  }
}
/* ========================================
   4. ABOUT SECTION
   ======================================== */
/* ===== LAYOUT ===== */
.about-section{
  padding: 40px 60px 30px 100px;
}
.about-container{
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap; /* безопасно за по-тесни екрани */
}

/* ===== ABOUT — модерни добавки ===== */
.about-content{
  position: relative;          /* нужно за ::before */
  width: 100%;
  width: min(700px, 80%);
  border-radius: 14px;
  padding: 48px 36px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(185,231,105,.12), transparent 60%),
    #FFFFFF;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.about-content::before{
  content:"";
  position:absolute; inset:0; border-radius:14px; padding:1.5px;
  background: linear-gradient(135deg, #B9E769, #1C3F36);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:.65; pointer-events:none;
}

/* заглавие + разделител */
.section-title{ display:flex; flex-direction:column; gap:22px; }
.section-heading{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.2;
  letter-spacing:.2px;
  color:#1C3F36;
  text-align:center;
}
.divider{
  height: 6px; border-radius: 4px;
  background: linear-gradient(90deg, #1C3F36, #B9E769);
  position: relative; overflow:hidden;
}
.divider::after{
  content:""; position:absolute; inset:-60% -20%;
  background: linear-gradient(110deg, transparent 45%, rgba(255,255,255,.8) 50%, transparent 55%);
  transform: translateX(-120%) rotate(6deg);
  animation: about-shine 2.6s ease-in-out infinite;
}
@keyframes about-shine{
  0%   { transform: translateX(-120%) rotate(6deg) }
  60%  { transform: translateX(120%)  rotate(6deg) }
  100% { transform: translateX(120%)  rotate(6deg) }
}

/* текст – по-леко четене + 2 колони (десктоп) */
.section-text{
  font-family:'Roboto', sans-serif;
  font-weight:400;
  font-size: 17px;
  line-height: 26px;
  color: #333;
  opacity:.95;
  text-wrap: pretty;
}

/* бутон */
.btn-primary{
  margin-top: 10px;
  display:inline-flex; align-items:center; gap:10px;
  border:none; border-radius:999px;
  padding:12px 22px;
  background: linear-gradient(135deg, #1C3F36 0%, #2a5a4a 100%);
  color:#E9F7D1;
  font-family:'Alexandria', sans-serif;
  font-weight:600; font-size:18px; line-height:27px;
  box-shadow: 0 8px 18px rgba(28,63,54,.24);
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
  width: fit-content;
}
.btn-primary::after{
  content:"→"; font-weight:700; transform: translateX(0);
  transition: transform .25s ease;
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(28,63,54,.28);
  background: linear-gradient(135deg, #2a5a4a 0%, #1C3F36 100%);
}
.btn-primary:hover::after{ transform: translateX(4px); }

/* Link styled as button */
a.btn-primary{
  margin-top: 10px;
  display:inline-flex; align-items:center; gap:10px;
  border:none; border-radius:999px;
  padding:12px 22px;
  background: linear-gradient(135deg, #1C3F36 0%, #2a5a4a 100%);
  color:#E9F7D1;
  font-family:'Alexandria', sans-serif;
  font-weight:600; font-size:18px; line-height:27px;
  box-shadow: 0 8px 18px rgba(28,63,54,.24);
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
  width: fit-content;
  text-decoration: none !important;
}
a.btn-primary::after{
  content:"→"; font-weight:700; transform: translateX(0);
  transition: transform .25s ease;
}
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active,
a.btn-primary:visited{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(28,63,54,.28);
  background: linear-gradient(135deg, #2a5a4a 0%, #1C3F36 100%);
  color:#E9F7D1;
  text-decoration: none !important;
}
a.btn-primary:hover::after{ transform: translateX(4px); }

/* ===== IMAGE + ICONS ===== */
.image-wrapper{
  position: relative;
  display: inline-block;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.main-image{
  display:block;
  width: 450px;
  max-width: 100%;
  height: 520px;
  object-fit: cover;
  border: 10px solid #fff;
  border-radius: 16px;
}

/* иконки около снимката */
.icongirl{
  position:absolute;
  width: 80px; height: 80px;
  border-radius: 20px;
  border: 4px solid #FFFFFF;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  display:flex; align-items:center; justify-content:center;
  padding: 10px;
  transition: transform 0.3s ease;
  animation: float 4s ease-in-out infinite;
  background: #fff; /* базов фон, после цветове по позиция */
}
.icongirl img{ max-width:100%; max-height:100%; border-radius: 12px; }
.icongirl:hover{ transform: scale(1.12) rotate(4deg); }

/* позиции + цветове */
.icon-top-left  { top:-50px; left:70px;   background-color:#E9FFE7; }
.icon-bottom-left{ bottom:70px; left:-50px; background-color:#D4EEFF; }
.icon-bottom-right{ bottom:150px; right:-50px; background-color:#FFE4D9; }

@keyframes float{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ===== Reveal ===== */
.will-reveal{ opacity:0; transform: translateY(16px); }
.will-reveal.is-in{
  opacity:1; transform:none;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .55s ease;
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .about-section{ padding: 70px 40px 20px; }
  .about-container{ gap: 40px; }
  .section-text{ column-count: 1; } /* по-компактно на таблет */
  .main-image{ height: 480px; }
}
@media (max-width: 768px){
  .about-section{ padding: 30px 20px; }
  .about-container{ flex-direction: column; align-items: center; gap: 28px; }
  .about-content{ width: 100%; padding: 28px 22px; }
  .main-image{ width: 100%; height: 420px; }
  /* пренареждаме иконките, за да не излизат извън екрана */
  .icon-top-left   { top:-36px; left:12px; }
  .icon-bottom-left{ bottom:12px; left: -18px; }
  .icon-bottom-right{ bottom: 24px; right: -18px; }
}

/* ========================================
   5. BLOG/NEWS SECTION
   ======================================== */
.blog-section {
    background:#1C3F36;
    padding:50px 60px;
    border-radius:8px;
    margin:40px auto;
    max-width:1400px;
  }
  .section-title-center { text-align:center; margin-bottom:40px; }
  .section-heading-white {
    font-family:'Poppins',sans-serif;
    font-size:42px; font-weight:700;
    color:#E9F7D1; margin:0;
  }

  .blog-row { display:flex; gap:30px; flex-wrap:wrap; margin-bottom:30px; }
  .blog-card {
    background:#F9F9F9; border-radius:12px; overflow:hidden;
    box-shadow:0 6px 20px rgba(0,0,0,.15);
    display:flex; flex-direction:column;
    transition:transform .4s ease, box-shadow .4s ease;
    opacity:0; transform:translateY(30px);
  }
  .blog-card.revealed { opacity:1; transform:none; transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s ease; }
  .blog-card:hover { transform:translateY(-6px); box-shadow:0 10px 30px rgba(0,0,0,.2); }

  .blog-media { position:relative; overflow:hidden; }
  .blog-image { width:100%; height:240px; object-fit:cover; transition:transform .6s ease; }
  .blog-card:hover .blog-image { transform:scale(1.08); }
  .media-shine {
    position:absolute; inset:-30% -50%;
    background:linear-gradient(115deg,transparent 45%,rgba(255,255,255,.6) 50%,transparent 55%);
    transform:translateX(-120%) rotate(8deg); transition:transform 1s ease;
  }
  .blog-card:hover .media-shine { transform:translateX(120%) rotate(8deg); }

  .blog-badges { position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:6px; }
  .blog-badges a{
    text-decoration: none;
  }
  .chip { font-size:13px; padding:4px 10px; border-radius:20px; font-weight:500; color:#fff; }
  .chip-blue{background:#0069B2;}
  .chip-lime{background:#14AA00;} 
  .chip-green{background:#1C3F36;} 
  .chip-orange{background:#CE3F00;} 
  .chip-gray{background:#777;}
  .badge-date { background:rgba(255,255,255,.9); color:#1C3F36; font-size:12px; padding:2px 8px; border-radius:12px; }
  
  .blog-card-content { padding:20px; display:flex; flex-direction:column; gap:14px; background:#F9F9F9; }
  .blog-card-content a{
    text-decoration: none;
  }
  .blog-title, .blog-title-small { font-weight:700; color:#1C3F36; margin:0; position:relative; }
  .blog-title{font-size:22px;} .blog-title-small{font-size:17px;}
  .hover-underline::after{
    content:""; position:absolute; left:0; bottom:-4px;
    width:0%; height:2px; background:#B9E769; transition:width .3s ease;
  }
  .hover-underline:hover::after{width:100%;}
  .blog-excerpt, .blog-excerpt-small { color:#333; margin:0; font-size:15px; }
  .blog-excerpt-small{font-size:13px;}

  .btn-secondary,.btn-secondary-small {
    background:transparent; border:none; cursor:pointer; color:#1C3F36;
    display:flex; align-items:center; gap:6px; font-size:15px; font-weight:500;
  }
  .btn-arrow{transition:transform .3s ease;}
  .btn-secondary:hover .btn-arrow,.btn-secondary-small:hover .btn-arrow{transform:translateX(4px);}

  a.btn-secondary{
    text-decoration: none;
  }

  .blog-button-container{display:flex;justify-content:center;margin-top:20px;}
  .btn-gradient{
    background:linear-gradient(135deg,#B9E769 0%,#99BE59 100%);
    border:none; border-radius:30px; padding:12px 26px; font-size:16px; font-weight:600; cursor:pointer; color:#333;
    transition:transform .3s ease,box-shadow .3s ease;
  }
  .btn-gradient:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.2);}

  .blog-card-large{flex:1 1 480px;}
  .blog-card-small{flex:1 1 300px;}
  @media(max-width:900px){.blog-row{flex-direction:column;}}

  a.btn-gradient{
    text-decoration: none;
  }

/* ========================================
   6. VALUES SECTION
   ======================================== */
:root{
  --v2-ink:#0c3a31;
  --v2-text:#30413d;
  --v2-bg:#ECECEC;
}

/* контейнер и заглавие */
.v2-values{
  position:relative; isolation:isolate;
  padding: clamp(28px,6vw,60px) clamp(16px,5vw,60px);
  overflow:hidden;
  background:
    radial-gradient(900px 220px at 12% 0%, rgba(185,231,105,.18), transparent 65%),
    radial-gradient(900px 220px at 88% 0%, rgba(77,181,255,.16), transparent 65%),
    var(--v2-bg);
}
.v2-title{
  margin:0 0 clamp(18px,3vw,34px);
  text-align:center;
  font-family:'Poppins', sans-serif;
  font-weight:800;
  color:#083a71;
  letter-spacing:.2px;
  font-size: clamp(26px, 4.8vw, 48px);
}

/* странични декорации */
.v2-deco{ position:absolute; inset:0; pointer-events:none; z-index:-1; }
.v2-deco svg{ position:absolute; opacity:.35 }
.v2-starL{ left:-36px; top:36px; animation: v2-floatY 6s ease-in-out infinite; }
.v2-curveL{ left:6%; top:120px }
.v2-starR{ right:-36px; bottom:80px; animation: v2-floatY 6s ease-in-out infinite; }
.v2-curveR{ right:6%; bottom:110px }
.v2-dotsTop{ top:-10px; left:50%; transform:translateX(-50%); opacity:.25 }
.v2-dotsBottom{ bottom:-8px; left:10%; opacity:.25 }

/* grid */
.v2-grid{
  max-width:1200px; margin:0 auto;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.6vw, 36px);
  align-items:start;
}

/* втори ред центриран за десктоп */
.v2-row2{
  grid-column: 2 / span 2; /* за ≥901px — център */
  display:flex; justify-content:center; gap: clamp(16px, 2.6vw, 36px);
}

/* отзивчивост */
@media (max-width:900px){
  .v2-grid{ grid-template-columns: repeat(3, 1fr); }
  .v2-row2{ grid-column:auto; display:contents; } /* нормален flow */
}
@media (max-width:680px){
  .v2-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:440px){
  .v2-grid{ grid-template-columns: 1fr; }
}

/* item */
.v2-item{ text-align:center; padding:6px; opacity:0; transform: translateY(12px); }
.v2-badge{ width:120px; height:120px; margin:0 auto 10px; position:relative; }
.v2-badge img{ width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 1px 0 rgba(0,0,0,.06)); }

.v2-name{
  font-family:'Poppins', sans-serif;
  font-weight:800; color:var(--v2-ink);
  margin:8px 0 6px;
  font-size: clamp(18px, 2.6vw, 26px);
}
.v2-text{ margin:0 auto; max-width:30ch; color:#35554e; font-size:16px; }

/* reveal */
.v2-item.v2-in{
  opacity:1; transform:none;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .55s ease;
  min-width: 220px;
}

/* декоративна анимация */
@keyframes v2-floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* ========================================
   7. MISSION SECTION
   ======================================== */
:root{
    --msn-green:#1C3F36;
    --msn-lime:#B9E769;
    --msn-bg:#E9F7D1;
    --msn-panel:#F5F7F5;
}
  *{box-sizing:border-box}
   .mission-section{
    background: radial-gradient(1200px 300px at 50% 0, rgba(185,231,105,.22), transparent 1%) ,
    linear-gradient(180deg, transparent 0%, var(--msn-bg) 48%, transparent 100%);
    padding: clamp(24px,4vw,40px) clamp(20px,6vw,60px);
    text-align:center;
  }
  .mission-title{
    font-family:Poppins,sans-serif; font-weight:700; color:var(--msn-green);
    margin:0 0 26px; line-height:1.2; letter-spacing:.2px;
    font-size: clamp(26px,4vw,44px);
  }

  .important-title{
    font-family:Poppins,sans-serif; font-weight:700; color:var(--msn-green);
    margin:0 0 26px; line-height:1.2; letter-spacing:.2px;
    font-size: clamp(26px,4vw,44px);
    text-align: center;
    margin-bottom: 35px;
  }

  /* ===== LAYOUT ===== */
  .mission-container{ max-width:1200px; margin:0 auto; display:flex; flex-direction:column; gap:30px; }
  .mission-row{ display:flex; align-items:stretch; position:relative; }
  .mission-row-reverse{ flex-direction:row-reverse; }

  /* ===== IMAGE ===== */
  .mission-image{
    width: min(48%, 640px); height: 300px; position:relative; overflow:hidden; border-radius:16px;
    background:#ddd; box-shadow: 0 12px 32px rgba(0,0,0,.15);
  }
  .mission-image img{
    width:100%; height:100%; object-fit:cover; transform:scale(1.06);
    transition: transform 7s ease;
  }
  /* лек Ken Burns при hover/фокус на реда */
  .mission-row:hover .mission-image img{ transform:scale(1.12) }

  /* лайм лента + shine */
  .mission-overlay,
  .mission-overlay-left{
    position:absolute; bottom:0; height:34px; width:78%;
    border-radius:0 0 14px 0; overflow:hidden; isolation:isolate;
  }
  .mission-overlay{ right:0; background: linear-gradient(90deg, transparent 0%, var(--msn-lime) 100%); }
  .mission-overlay-left{ left:0; right:auto; border-radius:0 0 0 14px; background: linear-gradient(90deg, var(--msn-lime) 0%, transparent 100%); }
  .mission-overlay::after,
  .mission-overlay-left::after{
    content:""; position:absolute; inset:-40% -30%;
    background: linear-gradient(110deg, transparent 45%, rgba(255,255,255,.7) 50%, transparent 55%);
    transform: translateX(-120%) rotate(6deg);
    transition: transform 1.1s cubic-bezier(.2,.65,.2,1);
    pointer-events:none;
  }
  .mission-row:hover .mission-overlay::after,
  .mission-row:hover .mission-overlay-left::after{
    transform: translateX(120%) rotate(6deg);
  }

  /* ===== CARD ===== */
  .mission-content{ flex:1; display:flex; align-items:center; justify-content:center; }
  .mission-card{
    --padX: clamp(18px,3.6vw,40px);
    width:100%; max-width:720px;
    padding: clamp(18px,3vw,26px) var(--padX);
    border-radius:16px;
    background:
      radial-gradient(160% 120% at 0% 0%, rgba(185,231,105,.18), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.85));
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
    display:flex; flex-direction:column; gap:18px;
    text-align:left;
    transform: translateZ(0);
    transition: transform .35s ease, box-shadow .35s ease;
  }
  .mission-row:hover .mission-card{ transform: translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.15) }

  .mission-heading{
    font:700 clamp(20px,2.4vw,32px)/1.25 'Roboto',sans-serif;
    color:var(--msn-green); margin:0;
    position:relative;
  }
  .mission-heading::after{
    content:""; display:block; width:56px; height:3px; margin-top:8px;
    background: var(--msn-lime);
    border-radius:3px;
  }
  .mission-description{ margin: 2px 0 10px; font-size:16px; line-height:24px; color:#333; }

  .btn-gradient{
    align-self:flex-start;
    background: linear-gradient(135deg, var(--msn-lime) 0%, #99BE59 100%);
    color:#1b2a22; border:none; border-radius:999px; padding:12px 20px;
    font:600 15px/1 'Roboto',sans-serif; cursor:pointer;
    box-shadow:0 6px 16px rgba(0,0,0,.18);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .btn-gradient:hover{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.22) }

  /* ===== CORNER ICONS ===== */
  .mission-icon-left, .mission-icon-right{
    position:absolute; 
    width:78px; height:78px; padding:2px; border-radius:18px;
    background:#fff; border:1px solid #fff;
    box-shadow:0 10px 22px rgba(0,0,0,.18);
    display:grid; place-items:center;
    animation: iconFloat 3s ease-in-out infinite;
    transition: transform .25s ease;
  }
  .mission-icon-left{ left:-50px; top: 20px; }
  .mission-icon-right{ right:-14px; top: 20px; }
  .mission-icon-left img, .mission-icon-right img{ width:100%; height:100%; object-fit:cover; border-radius:12px; }
  .mission-icon-left:hover, .mission-icon-right:hover{ transform: translateY(-4px) rotate(-2deg) }

  @keyframes iconFloat{
    0%,100%{ transform: translateY(0) }
    50%     { transform: translateY(-6px) }
  }

  /* ===== REVEAL ===== */
  .mission-row{ opacity:0; transform: translateY(20px); }
  .mission-row.is-in{ opacity:1; transform:none; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease; }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 980px){
    .mission-row{ flex-direction:column; gap:16px; }
    .mission-row-reverse{ flex-direction:column; }
    .mission-image{ width:100%; height: 320px; }
    .mission-icon-left{ left: -8px; top: -12px; }
    .mission-icon-right{ right: -8px; top: -12px; }
    .mission-card{ text-align:left }
  }


  /* ========================================
   8. SERVICES SECTION
   ======================================== */
.services-section {
  padding: 30px 10px;
  text-align: center;
}

.services-header {
  margin-bottom: 28px;
}

.services-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 57.6px;
  color: #1C3F36;
}

/* Services decorations */
.services-section { position: relative; overflow: hidden; }
.scfx-deco{ position:absolute; inset:0; pointer-events:none; z-index:0; }

/* позиции */
.scfx-dots-left{
  position:absolute; left:-24px; top:40px; opacity:.5;
  animation: scfx-sway 10s ease-in-out infinite;
}
.scfx-curve-right{
  position:absolute; right:-20px; bottom:10%; opacity:.85;
  animation: scfx-drift 14s ease-in-out infinite;
}

/* плаващи емоджита */
.scfx-chip{
  position:absolute; font-size:28px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.15));
  animation: scfx-bob 5.5s ease-in-out infinite;
}
.scfx-chip--gear{ left:8%; top:22%; animation-delay:.1s; }
.scfx-chip--rocket{ right:10%; top:12%; animation-delay:.7s; }
.scfx-chip--microscope{ right:6%; bottom:12%; animation-delay:1.1s; }

/* картите остават над декорациите */
.services-container{ position:relative; z-index:1; }

/* animations */
@keyframes scfx-bob{
  0%,100%{ transform: translateY(0) }
  50%    { transform: translateY(-8px) }
}
@keyframes scfx-sway{
  0%,100%{ transform: translateY(0) rotate(0deg) }
  50%    { transform: translateY(6px) rotate(2deg) }
}
@keyframes scfx-drift{
  0%,100%{ transform: translateX(0) }
  50%    { transform: translateX(-14px) }
}

/* responsive – скрий част от декора за малки екрани */
@media (max-width: 768px){
  .scfx-dots-left{ display:none; }
  .scfx-curve-right{ right:-60px; opacity:.55; }
  .scfx-chip{ font-size:24px; }
  .scfx-chip--gear{ left:4%; top:auto; bottom:8%; }
}


.services-container {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;            /* flex контейнер */
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;                /* разстояние между секциите */
    justify-content: center;
}

.services-cards {
  display: flex;
  gap: 10px;
  flex: 2;                  /* две части */
  justify-content: center;
  flex-wrap: wrap;          /* пренасяне на нов ред при нужда */
}

.service-card {
  background: #F5F5F5;
  border-radius: 5px;
  padding: 10px 7.5px;
  width: 180px;
  flex: 1;
  min-width: 280px;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.service-icon {
  width: 130px;
  height: 130px;
  border: 1px solid #D6D6D6;
  border-radius: 70px;
  margin-bottom: 10px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 65px;
}

.service-content {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  justify-content: space-between;
}

.service-heading {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  color: #1C3F36;
}

.service-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 22.5px;
  color: #333333;
}

.services-divider {
  width: 3px;
  height: 450px;
  background: #1C3F36;
  margin: 0 auto;
}

.services-info {
  flex: 1;                  /* една част */
  width: 500px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.services-info-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 38.4px;
  color: #1C3F36;
}

.services-info-image {
  height: 92px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);
}

.services-info-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services-info-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  color: #333333;
}



:root{
    --scfx-green:#1C3F36;
    --scfx-text:#333333;
    --scfx-card:#F5F5F5;
    --scfx-ring1:#B9E769; /* лайм */
    --scfx-ring2:#00AEEF; /* син */
    --scfx-ring3:#FFC857; /* жълт */
  }

  /* ===== DEMO LAYOUT ===== */
  .scfx-page{
    max-width:1200px;
    margin:40px auto;
    padding:0 24px;
  }
  .scfx-title{
    margin:0 0 18px;
    color:var(--scfx-green);
    font-weight:700;
    text-align:center;
    font-size:28px;
  }

  .scfx-cards{
    display:flex;
    justify-content:center;
    align-items:stretch;
    gap:18px;
    flex-wrap:wrap;
    perspective:900px; /* сцена за наклон */

  }

  /* ВЪНШНАТА карта получава tilt от JS. НЯМА hover transform тук! */
  .scfx-card{
    width:100%;
    width: 300px;
    transform-style:preserve-3d;
    will-change:transform;
    transition:transform .18s ease, box-shadow .18s ease;
  }

  /* ВЪТРЕШЕН слой – всички визуални ефекти (за да не се бият с tilt-а) */
  .scfx-inner{
    position:relative;
    background:var(--scfx-card);
    border-radius:12px;
    padding:18px 14px;
    min-width: 30px;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
    animation:scfx-bob 6s ease-in-out infinite; /* леко „дишане“ */
    background-color: #fafafa;
  }

  /* Shine sweep при hover */
  .scfx-inner::after{
    content:"";
    position:absolute; inset:-120% -40%;
    background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
    transform:translateX(-120%) rotate(8deg);
    transition:transform .9s cubic-bezier(.2,.65,.2,1);
    pointer-events:none;
    z-index:1;
    
  }
  .scfx-inner:hover::after{
     transform:translateX(120%) rotate(8deg);

  }

  /* Икона + ореол + bounce */
  .scfx-icon{
    position:relative;
    width:130px;height:130px;
    border:1px solid #31d610;
    border-radius:70px;
    margin-bottom:12px;
    padding:5px;
    display:flex;align-items:center;justify-content:center;
    background:#fff; z-index:2;
  }
  .scfx-icon img{ width:100%;height:100%;object-fit:cover;border-radius:65px }



  /* Леко по-силен shadow, когато tilt-ът е активен (JS добавя клас) */
  .scfx-card.scfx-tilting .scfx-inner{ box-shadow:0 18px 28px rgba(0,0,0,.18)  }

  /* KEYFRAMES */
  @keyframes scfx-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
  @keyframes scfx-bounce{
    0%{transform:translateY(0) scale(1)}
    30%{transform:translateY(-10px) scale(1.03)}
    60%{transform:translateY(2px) scale(.98)}
    100%{transform:translateY(0) scale(1)}
  }
  @keyframes scfx-ring{ 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:.85;transform:scale(1.08)} }



/* ========================================
   9. GALLERY SECTION
   ======================================== */
.gallery-section { background:#1C3F36; padding:40px 60px; }
.gallery-header{
  max-width:1200px; margin:0 auto 42px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px;
}
.gallery-text{ flex:1; }
.gallery-title{
  font-family:'Poppins',sans-serif; font-weight:600; font-size:32px; line-height:30px;
  color:#E9F7D1; margin-bottom:30px;
}
.gallery-description{ font-family:'Inter',sans-serif; font-size:20px; line-height:30px; color:#F5F5F5; }
.btn-outline{
  background:transparent; color:#E9F7D1; border:2px solid;	
  border-image:linear-gradient(135deg,#B9E769 0%, #99BE59 100%) 1; padding:16.5px 20px; font:600 18px/27px 'Roboto',sans-serif; cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.btn-outline:hover{ background:linear-gradient(135deg,#B9E769 0%, #99BE59 100%); color:#333;  }

a.btn-outline{
  text-decoration: none;
}

.gallery-content{ max-width:1320px; margin:0 auto; display:flex; flex-direction:column; gap:15px; }

/* === Новият слайдер === */
.gallery-slider{ display:flex; align-items:center; gap:18px; }
.gallery-nav{
  width:52px; height:52px; border:none; border-radius:50%;
  background: rgba(185,231,105,.22); color:#173226;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 0 8px rgba(185,231,105,.18);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.gallery-nav:hover{ transform:scale(1.06); background:#fff; box-shadow:0 8px 18px rgba(0,0,0,.25); }

.gallery-viewport{
  position:relative; overflow:hidden; flex:1; border-radius:12px;
  mask-image: linear-gradient(to right,transparent 0, #000 5%, #000 95%, transparent 100%); /* меки краища */
}
.gallery-shine{
  position:absolute; inset:-40% -60%;
  background: linear-gradient(110deg, transparent 45%, rgba(255,255,255,.5) 50%, transparent 55%);
  transform: translateX(-120%) rotate(6deg);
  opacity:0; pointer-events:none;
}
.gallery-viewport.is-sliding .gallery-shine{
  opacity:1;
  animation: gal-shine 0.9s cubic-bezier(.2,.65,.2,1);
}
@keyframes gal-shine{
  from{ transform: translateX(-120%) rotate(6deg); }
  to  { transform: translateX(120%)  rotate(6deg); }
}

.gallery-track{
  display:flex; align-items:center; gap:20px;
  padding: 6px 10px;
  will-change: transform;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .55s ease;
}
.gallery-viewport.is-sliding .gallery-track{ filter: saturate(1.02) contrast(1.03); }

.gallery-item{
  flex:0 0 auto;
  width: 220px; height: 160px; border-radius:12px; overflow:hidden;
  transform-origin:center;
  transform: perspective(800px) translateZ(0) rotateY(0deg) scale(.94);
  transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.02); transition: transform .8s ease;
}

/* Подчертаваме централния елемент (coverflow усещане) */
.gallery-item.is-center{
  transform: perspective(800px) translateZ(22px) rotateY(0deg) scale(1.02);
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}
.gallery-item.is-prev  { transform: perspective(800px) rotateY( -16deg) translateX(-6px) scale(.92); }
.gallery-item.is-next  { transform: perspective(800px) rotateY(  16deg) translateX( 6px) scale(.92); }
.gallery-item.is-center img{ transform: scale(1.06); }

/* Dots */
.gallery-dots{ display:flex; justify-content:center; gap:10px; padding:8px 0 0; }
.gallery-dot{
  width:10px; height:10px; border-radius:50%; cursor:pointer; border:1px solid #ffffff88;
  background:#ffffffcc; transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.gallery-dot:hover{ transform: scale(1.15); }
.gallery-dot.is-active{ background:#B9E769; border-color:transparent; box-shadow:0 0 0 6px rgba(185,231,105,.22); }

/* Hover ефекти */
.gallery-item:hover{ box-shadow:0 10px 26px rgba(0,0,0,.22); }
.gallery-item:hover img{ transform: scale(1.08); }

/* Responsive */
@media (max-width: 1024px){
  .gallery-section{ padding:30px 28px; }
  .gallery-header{ gap:16px; margin-bottom:28px; }
  .gallery-item{ width: 200px; height: 148px; }
}
@media (max-width: 768px){
  .gallery-section{ padding:24px 20px; }
  .gallery-title{ font-size:28px; line-height:34px; }
  .gallery-description{ font-size:16px; line-height:24px; }
  .gallery-nav{ width:46px; height:46px; }
  .gallery-item{ width: 180px; height: 130px; }
}
@media (max-width: 480px){
  .gallery-item{ width: 160px; height: 118px; }
  .gallery-nav{ display:none; } /* оставяме swipe/drag на телефони */
}
/* ========================================
   10. CONTACT SECTION
   ======================================== */
:root{
  --cui-green:#1C3F36;
  --cui-lime:#B9E769;
  --cui-bg:#F5F5F5;
  --cui-panel:#ffffff;
  --cui-ink:#333;
}


/* ===== CONTACT LAYOUT ===== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 60px);
  margin: 0 auto 40px;
  max-width: 1000px;
  padding: 0 20px;
}

.contact-aside {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

/* ===== Контактна информация ===== */
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: 'Roboto', sans-serif;
  color: #1C3F36;
  font-size: 16px;
  line-height: 1.4;
}

.contact-icon {
  font-size: 20px;
  line-height: 1;
  min-width: 28px;
  text-align: center;
  opacity: 0.9;
}

.contact-list a {
  color: #1C3F36;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.25s ease;
}

.contact-list a:hover {
  color: #14AA00;
}

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

/* ===== TABLET – по-тесни екрани ===== */
@media (max-width: 980px) {
  .contact-layout {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 32px;
    max-width: 700px;
  }

  .contact-aside {
    justify-content: center;
  }

  .contact-list {
    align-items: center;
    gap: 16px;
  }

  .contact-list li {
    justify-content: center;
    text-align: center;
    font-size: 15px;
  }

  .contact-icon {
    font-size: 22px;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 560px) {
  .contact-layout {
    gap: 28px;
    margin-bottom: 20px;
    padding: 0 16px;
  }

  .contact-list li {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 14px;
  }

  .contact-icon {
    font-size: 20px;
    margin-bottom: 2px;
  }}
.cui-section{
  position:relative;
  padding: clamp(28px,4vw,48px) clamp(20px,6vw,65px);
  background:
    radial-gradient(800px 200px at 50% 0, rgba(185,231,105,.18), transparent 40%),
    #ECF0EC;
  overflow: hidden;
}

/* Слой за балончетата */
.contact-bubbles{
  position: absolute; inset: -40px -60px;   /* малко извън секцията за дълбочина */
  pointer-events: none; z-index: 0;          /* зад съдържанието, но над фона */
  filter: blur(0);                           /* за по-ясни краища; можеш да увеличиш */
}

/* Общ стил на балон */
.cbubble{
  position:absolute; display:block;
  width:180px; height:180px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(185,231,105,.35), rgba(185,231,105,.18) 60%, rgba(185,231,105,0));
  box-shadow: 0 20px 40px rgba(28,63,54,.12);
  animation: cfloat 12s ease-in-out infinite;
}

/* Различни позиции/размери/цветови нюанси */
.cb1{ top:-10px; left:-20px; width:220px; height:220px; 
      background: radial-gradient(closest-side, rgba(185,231,105,.45), rgba(185,231,105,.18) 60%, rgba(185,231,105,0)); 
      animation-delay: 0s; }
.cb2{ top:30%; left:-50px; width:140px; height:140px; 
      background: radial-gradient(closest-side, rgba(0,174,239,.25), rgba(0,174,239,.12) 60%, rgba(0,174,239,0)); 
      animation-delay: 1.2s; }
.cb3{ bottom:-20px; left:25%; width:160px; height:160px; 
      background: radial-gradient(closest-side, rgba(255,200,87,.28), rgba(255,200,87,.12) 60%, rgba(255,200,87,0)); 
      animation-delay: 2s; }
.cb4{ top:10%; right:-30px; width:210px; height:210px; 
      background: radial-gradient(closest-side, rgba(185,231,105,.35), rgba(185,231,105,.16) 60%, rgba(185,231,105,0)); 
      animation-delay: 0.6s; }
.cb5{ bottom:-40px; right:15%; width:130px; height:130px; 
      background: radial-gradient(closest-side, rgba(0,174,239,.22), rgba(0,174,239,.1) 60%, rgba(0,174,239,0)); 
      animation-delay: 1.8s; }

@keyframes cfloat{
  0%,100%{ transform: translateY(0) }
  50%    { transform: translateY(-12px) }
}

/* Ако имаш карта/карти вдясно с по-висок z-index, дай на контейнерите им z-index:1
   и на .contact-bubbles z-index:0, за да останат зад съдържанието, но над фона. */
.contact-container { position: relative; z-index: 1; }

/* По желание: деактивирай за хора с reduced motion */
@media (prefers-reduced-motion: reduce){
  .cbubble{ animation: none; }
}

.cui-header{ text-align:center; margin-bottom: 24px; }
.cui-title{
  font-family:Poppins, sans-serif; font-weight:700; color:var(--cui-green);
  font-size: clamp(28px,4vw,46px); line-height:1.15; margin:0 0 8px;
}
.cui-sub{
  color:#2c473e; opacity:.9; max-width:880px; margin:0 auto;
}

/* layout */
.cui-container{
  max-width: 1200px; margin: 16px auto 0;
  display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(18px,3vw,28px);
}
@media (max-width: 980px){
  .cui-container{ grid-template-columns: 1fr; }
}

/* форма */
.cui-form{
  position:relative;
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(185,231,105,.15), transparent 60%),
    rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.7);
  border-radius: 16px;
  padding: clamp(16px,3vw,26px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  backdrop-filter: blur(8px);
}

.cui-form-head{
  display:flex; align-items:center; gap:12px; margin-bottom: 8px;
}
.cui-avatar{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;font-size:20px;
  background: #E9F7D1; border:2px solid #fff; box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.cui-head-text h3{ margin:0; font:700 20px/1.2 'Roboto',sans-serif; color:var(--cui-green) }
.cui-head-text p{ margin:4px 0 0; color:#51645e; font-size:14px }

.cui-field{ display:block; margin-top:14px; }
.cui-field-label{ display:inline-block; margin-bottom:6px; color:#27463c; font-weight:600 }
.cui-input-wrap{
  position:relative; display:flex; align-items:center; gap:8px;
  border:1px solid #cdd7d2; border-radius:12px; background:#fff;
  padding: 10px 12px 10px 42px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cui-input-wrap:focus-within{
  border-color: var(--cui-lime);
  box-shadow: 0 0 0 4px rgba(185,231,105,.22);
}
.cui-icon{
  position:absolute; left:12px; width:20px; height:20px; fill:#68887e;
}
.cui-input{
  width:100%; border:0; outline:0; background:transparent;
  font: 500 16px/1.4 'Roboto',sans-serif; color:var(--cui-ink);
}
.cui-textarea{ padding-left:42px; }
.cui-textarea textarea{ resize:vertical; min-height:110px }

.cui-error{
  display:none; color:#C4472C; font-size:12px; margin-top:6px;
}
.cui-field.invalid .cui-error{ display:block; }
.cui-field.invalid .cui-input-wrap{ border-color:#E07A63; box-shadow:0 0 0 4px rgba(224,122,99,.14) }

/* бутон */
.cui-btn{
  position:relative; margin-top:16px;
  display:inline-flex; align-items:center; gap:10px;
  border:0; cursor:pointer;
  padding: 12px 18px; border-radius:999px;
  background: linear-gradient(135deg, var(--cui-lime), #99BE59);
  color:#143024; font-weight:700;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  overflow:hidden;
}
.cui-btn-shine{
  position:absolute; inset:-120% -40%;
  background: linear-gradient(110deg, transparent 45%, rgba(255,255,255,.6) 50%, transparent 55%);
  transform: translateX(-120%) rotate(8deg);
  transition: transform 1s ease;
  pointer-events:none;
}
.cui-btn:hover .cui-btn-shine{ transform: translateX(120%) rotate(8deg) }
.cui-btn-plane{
  width:18px; height:18px; fill:#143024;
  transform: translateX(0); transition: transform .25s ease;
}
.cui-btn:hover .cui-btn-plane{ transform: translateX(4px) }

.cui-privacy{ margin:10px 0 0; font-size:12px; color:#5a6b66 }
.cui-privacy a{ color:#2f7a3e; text-underline-offset: 2px }

/* карта и инфо */
.cui-info{ display:flex; flex-direction:column; gap:14px }
.cui-map{
  position:relative; border-radius:16px; overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.cui-map img{ display:block; width:100%; height:280px; object-fit:cover }
.cui-map-glass{
  position:absolute; left:14px; bottom:14px;
  display:flex; align-items:center; gap:10px;
  background: rgba(255,255,255,.85);
  padding: 10px 12px; border-radius: 12px; border:1px solid rgba(255,255,255,.7);
  backdrop-filter: blur(6px);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  color:#12362a;
}
.cui-pin{ font-size:18px }

.cui-chips{ display:flex; flex-wrap:wrap; gap:10px }
.cui-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 12px; border-radius:999px; background:#F0F5EF; color:#234236;
  font-weight:600; text-decoration:none; border:1px solid #e3ece6;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cui-chip:hover{ transform: translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.12) }
.cui-chip-ico{ font-size:15px }

.cui-socials{ display:flex; gap:10px }
.cui-social{
  display:grid; place-items:center; width:40px; height:40px; border-radius:10px;
  background:#E9F7D1; color:#214033; font-weight:800; text-decoration:none;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  transition: transform .15s ease, background .15s ease;
}
.cui-social:hover{ transform: translateY(-2px); background:#d9f09f }

/* дребни подобрения за таблетки/мобилни */
@media (max-width: 980px){
  .cui-map img{ height:240px }
}
@media (max-width: 560px){
  .cui-head-text h3{ font-size:18px }
  .cui-sub{ font-size:14px }
}


/* === Интерактивна карта === */
.contact-map {
  margin: 32px auto 0;
  max-width: 1200px; /* ограничаваме ширината */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  position: relative;
}

.contact-map iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
  filter: grayscale(25%) saturate(1.1) brightness(0.95);
  transition: filter 0.4s ease;
}

.contact-map iframe:hover {
  filter: grayscale(0%) saturate(1.2) brightness(1);
}

@media (max-width: 768px) {
  .contact-map iframe {
    height: 320px;
  }
}


/* === Contact page new layout === */
.contact-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: start;
  gap: clamp(20px, 4vw, 60px);
  margin-bottom: 40px;
}
@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* Заглавие и текст */
.contact-layout .cui-header {
  text-align: left;
}
@media (max-width: 900px) {
  .contact-layout .cui-header {
    text-align: center;
  }
}

/* Контактна информация */
.contact-aside {
  display: flex;
  justify-content: flex-start;
}
@media (max-width: 900px) {
  .contact-aside {
    justify-content: center;
  }
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: 'Roboto', sans-serif;
  color: #1C3F36;
}

.contact-icon {
  font-size: 22px;
  line-height: 1;
}

.contact-list a {
  color: #1C3F36;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.contact-list a:hover {
  color: #14AA00;
}

/* Картата долу */
.contact-map {
  margin-top: 20px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}
.contact-map img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}
@media (max-width: 768px) {
  .contact-map img {
    height: 300px;
  }
}



/* ========================================
   11. FOOTER
   ======================================== */
:root{
  --pf-green:#1C3F36;
  --pf-lime:#B9E769;
  --pf-bg:#F5F7F5;
  --pf-muted:#6b7a73;
  --pf-card:#ffffff;
}

/* ===== FOOTER WRAP ===== */
.pmg-footer{
  position: relative;
  background: linear-gradient(180deg,#f0f4f1 0%, #e9efe9 100%);
  color: var(--pf-green);
  margin-top: 40px;
  isolation: isolate;
}
.pmg-footer-accent{
  height: 6px;
  background: linear-gradient(90deg,var(--pf-lime), #99BE59);
}

/* ===== GRID ===== */
.pmg-footer-container{
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 12px;
  display: grid;
  gap: 28px;
  grid-template-columns: 1.2fr 1fr 1fr 1.4fr;
}
@media (max-width: 1000px){
  .pmg-footer-container{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px){
  .pmg-footer-container{
    grid-template-columns: 1fr;
  }
}

/* ===== BRAND ===== */
.pmg-footer-brand .pmg-footer-logo{
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
.pmg-footer-logo svg{
  width:44px; height:44px; fill: var(--pf-green);
}
.pmg-footer-brandtext h3{
  margin:0; font:700 18px/1.2 'Roboto', sans-serif; color: var(--pf-green);
}
.pmg-footer-brandtext p{
  margin:2px 0 0; color: var(--pf-muted); font-size: 14px;
}
.pmg-footer-desc{
  margin:8px 0 14px; color:#2b3b34; opacity:.9;
}

/* ===== HEADINGS ===== */
.pmg-footer-head{
  font:700 16px/1 'Roboto', sans-serif;
  margin:4px 0 12px; color: var(--pf-green); position:relative;
}
.pmg-footer-head::after{
  content:""; display:block; width:48px; height:3px; border-radius:2px; margin-top:8px;
  background: var(--pf-lime);
}

/* ===== LISTS ===== */
.pmg-footer-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.pmg-footer-list a{
  color:#2b3b34; text-decoration:none; display:inline-block; position:relative;
  transition: color .2s ease, transform .2s ease;
}
.pmg-footer-list a::after{
  content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px; background: var(--pf-lime);
  transition: width .25s ease;
}
.pmg-footer-list a:hover{ color: var(--pf-green); transform: translateX(2px); }
.pmg-footer-list a:hover::after{ width:100%; }

/* ===== CONTACTS ===== */
.pmg-footer-contacts{
  list-style:none; margin:0 0 12px; padding:0; display:grid; gap:10px;
}
.pmg-footer-contacts li{
  display:flex; align-items:flex-start; gap:8px; color:#2b3b34;
}
.pmg-footer-contacts svg{
  width:18px; height:18px; fill: var(--pf-green); flex: 0 0 18px; margin-top: 2px;
}
.pmg-footer-contacts a{ color:#2b3b34; text-decoration:none; }
.pmg-footer-contacts a:hover{ text-decoration:underline; }

/* ===== NEWSLETTER ===== */
.pmg-footer-news{
  display:flex; gap:8px; align-items:center; background: var(--pf-card);
  border:1px solid #e2e8e4; border-radius:10px; padding:6px; box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.pmg-footer-news input{
  flex:1; border:none; outline:none; padding:10px 12px; background:transparent; color:#2b3b34;
  font: 400 14px/1 'Roboto', sans-serif;
}
.pmg-footer-news button{
  display:flex; align-items:center; gap:8px; border:none; cursor:pointer;
  background: linear-gradient(135deg, var(--pf-lime), #99BE59);
  color:#1b2a22; padding:10px 14px; border-radius:8px; font-weight:600;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pmg-footer-news button svg{ width:16px; height:16px; fill: currentColor; }
.pmg-footer-news button:hover{ transform: translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.15); }

/* ===== SOCIAL ===== */
.pmg-footer-social{ display:flex; gap:10px; }
.pmg-social-btn{
  width:36px; height:36px; display:grid; place-items:center; border-radius:10px;
  background:#ffffff; border:1px solid #e2e8e4; box-shadow:0 4px 10px rgba(0,0,0,.06);
  color: var(--pf-green); transition: transform .2s ease, background .2s ease;
  text-decoration:none;
}
.pmg-social-btn svg{ width:18px; height:18px; fill: currentColor; }
.pmg-social-btn:hover{ background:#f3f8f2; transform: translateY(-2px); }

/* ===== BOTTOM BAR ===== */
.pmg-footer-bottom{
  margin-top:8px; padding:14px 24px 22px; border-top:1px solid #e2e8e4; text-align:center;
}
.pmg-footer-bottom p{
  margin:0; color:#2b3b34; font: 400 14px/1.6 'Roboto', sans-serif;
}
.pmg-footer-bottom a{ color: var(--pf-green); text-decoration: underline; }
.pmg-footer-bottom a:hover{ color:#0f2a21; }


/* ========================================
   12. RESPONSIVE DESIGN
   ======================================== */

/* ========================================
   12.1. TABLET STYLES (max-width: 1200px)
   ======================================== */
@media (max-width: 1200px) {
  .nav-container {
    padding: 0 20px;
  }
  
  .nav-links {
    gap: 15px;
  }
  
  .nav-link {
    font-size: 14px;
  }
  
  .cards-container {
    gap: 20px;
  }
  
  .card {
    width: 300px;
  }
  
  .about-container {
    flex-direction: column;
    gap: 40px;
  }
  
  .blog-row {
    flex-direction: column;
    gap: 20px;
  }
  
  .blog-card-large {
    width: 100%;
  }
  
  .blog-row-small {
    flex-direction: column;
    gap: 20px;
  }
  
  .blog-card-small {
    width: 100%;
  }
  
  .values-container {
    gap: 30px;
  }
  
  .values-row {
    flex-direction: column;
    gap: 30px;
  }
  
  .mission-row {
    flex-direction: column;
    gap: 20px;
  }
  
  .mission-row-reverse {
    flex-direction: column;
  }
  
  .mission-image {
    width: 100%;
    max-width: 651px;
  }
  
  .services-container {
    flex-direction: column;
    gap: 40px;
  }
  
  .services-cards {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .service-card {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
  }
  
  .services-divider {
    width: 100%;
    height: 3px;
  }
  
  .gallery-header {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .gallery-images {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }
  
  .gallery-image {
    width: 180px;
    height: 140px;
  }
  
  .contact-container {
    flex-direction: column;
    gap: 20px;
  }
}

/* ========================================
   12.2. MOBILE STYLES (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {
  .navbar {
    padding: 15px 20px;
  }
  
  .nav-container {
    flex-direction: row;
    justify-content: space-between;
    gap: 15px;
  }
  
  .nav-logo {
    display: block;
  }
  
  .nav-links {
    display: none;
  }
  
  .mobile-menu-toggle {
    display: flex;
  }
  
  .nav-button {
    display: none;
  }
  
  .hero {
    padding: 20px;
  }
  
  .cards-container {
    flex-direction: column;
    align-items: center;
  }
  
  .card {
    width: 100%;
    max-width: 380px;
  }
  
  .about-section {
    padding: 20px;
  }
  
  .section-heading {
    font-size: 28px;
    line-height: 34px;
  }
  
  .blog-section {
    margin: 0 20px;
    padding: 20px;
  }
  
  .section-heading-white {
    font-size: 32px;
    line-height: 38px;
  }
  
  .values-section {
    padding: 20px;
  }
  
  .values-title {
    font-size: 28px;
    line-height: 34px;
  }
  
  .value-shape {
    width: 100%;
    max-width: 400px;
  }
  
  .value-heading {
    font-size: 28px;
    line-height: 34px;
  }
  
  .mission-section {
    padding: 20px;
  }
  
  .mission-title {
    font-size: 28px;
    line-height: 34px;
  }
  
  .mission-text {
    padding-right: 0;
  }
  
  .mission-row-reverse .mission-text {
    padding-left: 0;
  }
  
  .services-section {
    padding: 20px;
  }
  
  .services-title {
    font-size: 32px;
    line-height: 38px;
  }
  
  .services-cards {
    flex-direction: row;
    gap: 20px;
    justify-content: center;
  }
  
  .service-card {
    flex: 1;
    min-width: 250px;
    max-width: 300px;
  }
  
  .gallery-section {
    padding: 20px;
  }
  
  .gallery-images {
    gap: 12px;
    justify-content: center;
  }
  
  .gallery-image {
    width: 160px;
    height: 130px;
  }
  
  .contact-section {
    padding: 20px;
  }
  
  .contact-title {
    font-size: 32px;
    line-height: 38px;
  }
  
  .footer {
    padding: 20px;
  }
  
  .footer-text {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ========================================
   12.3. SMALL MOBILE STYLES (max-width: 480px)
   ======================================== */
@media (max-width: 480px) {
  .navbar {
    padding: 10px 15px;
  }
  
  .mobile-menu-toggle {
    width: 32px;
    height: 32px;
    padding: 5px;
  }
  
  .hamburger-line {
    width: 18px;
    height: 2px;
  }
  
  .mobile-menu {
    width: 90%;
    max-width: 350px;
  }
  
  .mobile-menu-header {
    padding: 20px 25px;
  }
  
  .mobile-menu-header h3 {
    font-size: 20px;
  }
  
  .mobile-menu-close {
    width: 35px;
    height: 35px;
    font-size: 20px;
  }
  
  .mobile-menu-link {
    padding: 15px 25px;
    font-size: 15px;
  }
  
  .mobile-menu-link:hover {
    padding-left: 35px;
  }

  .card-title {
    font-size: 24px;
    line-height: 30px;
  }
  
  .section-heading {
    font-size: 24px;
    line-height: 30px;
  }
  
  .section-heading-white {
    font-size: 28px;
    line-height: 34px;
  }
  
  .values-title {
    font-size: 24px;
    line-height: 30px;
  }
  
  .value-heading {
    font-size: 24px;
    line-height: 30px;
  }
  
  .mission-title {
    font-size: 24px;
    line-height: 30px;
  }
  
  .services-title {
    font-size: 28px;
    line-height: 34px;
  }
  
  .contact-title {
    font-size: 28px;
    line-height: 34px;
  }
  
  .gallery-images {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  .gallery-image {
    width: 220px;
    height: 170px;
  }

}




  /* ========================================
   12.1.5 TABLET TUNE-UP (max-width: 1024px)
   ======================================== */
@media (max-width: 1024px) {

  /* NAVBAR */
  .navbar { padding: 12px 28px; }
  .nav-container { gap: 12px; }
  .nav-logo { display:block; }
  .nav-links { gap: 14px; flex-wrap: wrap; }
  .nav-link { font-size: 14px; line-height: 20px; }
  .nav-button { padding: 9px 14px; font-size: 16px; }
  /* ако искаш бургер и на таблет – разкоментирай следните 3 реда:
     .nav-links { display:none; }
     .mobile-menu-toggle { display:flex; }
     .nav-button { display:none; }
  */

  /* HERO */
  .hero { height: clamp(420px, 54vh, 580px); }
  .hero-caption { inset: auto 5% 10% 5%; max-width: 760px; }
  .hero-title { font-size: clamp(24px, 3.4vw, 40px); }
  .hero-sub { font-size: clamp(13px, 1.1vw, 16px); }
  .arrow { width: 46px; height: 46px; }
  .dots { bottom: 12px; }

  /* ABOUT */
  .about-section { padding: 60px 32px 24px; }
  .about-container { gap: 36px; }
  .section-heading { font-size: 34px; line-height: 42px; }

  /* BLOG – 2 колони */
  .blog-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; }
  .blog-card-large { grid-column: 1; }
  .blog-card-small { flex: 1 1 auto; }
  .blog-row-small { display: grid; grid-template-columns: 1fr; gap: 18px; }

  /* VALUES – стягаме етикети и икони */
  .values-section { padding: 24px; }
  .values-title { font-size: 34px; line-height: 40px; }
  .value-shape { width: 520px; height: 118px; }
  .value-icon, .value-icon2 { width: 84px; height: 84px; }
  .value-heading, .value-heading2 { font-size: 26px; line-height: 32px; }
  .value-text, .value-text2 { font-size: 15px; line-height: 22px; max-width: 360px; }
  .value-text2 { margin-left: 120px; }

  /* MISSION – по-ниска снимка и по-малко „шум“ */
  .mission-container { gap: 22px; }
  .mission-image { width: min(50%, 560px); height: 280px; }
  .mission-card { max-width: 680px; padding: 18px 26px; }
  .mission-heading { font-size: clamp(20px, 2.1vw, 28px); }
  .mission-description { font-size: 15px; line-height: 22px; }
  .mission-icon-left { left: -18px; top: 6px; }
  .mission-icon-right { right: -8px; top: 6px; }

  /* SERVICES – 2/3 карти на ред */
  .services-section { padding: 24px 20px; }
  .services-container { gap: 20px; }
  .services-cards { flex-wrap: wrap; gap: 16px; }
  .service-card { flex: 1 1 calc(50% - 16px); max-width: none; }
  /* ако имаш достатъчно ширина за 3 колони:
     .service-card { flex: 1 1 calc(33.333% - 16px); } */

  /* GALLERY */
  .gallery-section { padding: 28px; }
  .gallery-header { gap: 16px; }
  .gallery-images { gap: 14px; }
  .gallery-image { width: 180px; height: 140px; }

  /* CONTACT */
  .contact-container { gap: 22px; }
  .contact-form { max-width: 520px; }
  .contact-map { height: 280px; }
}

/* ========================================
   12.1.7 LARGE-PHONE / SMALL-TABLET (max-width: 900px)
   ======================================== */
@media (max-width: 900px) {

  /* BLOG – пада на една колона под 900 */
  .blog-row { grid-template-columns: 1fr; }
  .blog-card-large, .blog-card-small { width: 100%; }

  /* VALUES – 1 колона ако стане тясно */
  .values-container { grid-template-columns: 1fr; justify-items: center; }
  .value-shape { width: min(100%, 520px); }
  .value-text2 { margin-left: 90px; }

  /* MISSION – вертикално подредени */
  .mission-row,
  .mission-row-reverse { flex-direction: column; gap: 16px; }
  .mission-image { width: 100%; height: 300px; }
  .mission-card { max-width: 100%; }
}



/* ========================================
   TABLET NAV (max-width: 1024px)
   ======================================== */
@media (max-width: 1024px) {
  .navbar { padding: 12px 24px; }
  .nav-container { gap: 12px; }

  /* показваме логото и бургер бутона */
  .nav-logo { display: block; }

  /* скриваме хоризонталната навигация и бутона „контакт/действие“ */
  .nav-links { display: none; }
  .nav-button { display: none; }

  /* показваме toggle */
  .mobile-menu-toggle { display: flex; }

  /* по-широк панел за таблет */
  .mobile-menu { width: 82%; max-width: 520px; }

  /* по-големи tap-зони вътре */
  .mobile-menu-link { padding: 18px 28px; font-size: 16px; }
  .mobile-menu-header h3 { font-size: 22px; }
}


/* ============ NEWS/GALLERY PAGE ============ */	
/* ===== EXACT header like the mock ===== */
:root{
  --news-gallery-green:#1C3F36;
  --news-gallery-lime:#B9E769;
  --news-gallery-ivory:#E9F7D1;
}

/* контейнер */
.news-gallery-hero.news-gallery-hero--exact{
  padding: 20px;
}

/* самият бар */
.news-gallery-hero--exact .news-gallery-hero__inner{
  max-width: 1200px;
  margin: 0 auto;
  background: var(--news-gallery-green);
  color: var(--news-gallery-ivory);
  border-radius: 10px;
  padding: 18px 22px 20px;
  text-align: center;
  position: relative;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  overflow: hidden;
}

/* долната лайм лента */
.news-gallery-hero--exact .news-gallery-hero__inner::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 6px;
  background: var(--news-gallery-lime);
  border-radius: 0 0 10px 10px;
}

/* малкото „Галерия“ отгоре */
.news-gallery-hero--exact .news-gallery-hero__kicker{
  display:block;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1.8vw, 18px);
  line-height: 1.2;
  color: #F5F5F5;
  opacity: .95;
  margin-bottom: 10px;
}

/* огромното заглавие */
.news-gallery-hero--exact .news-gallery-hero__title{
  margin: 0 0 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 6vw, 50px);
  line-height: 1.1;
  color: var(--news-gallery-ivory);
}

/* подзаглавие */
.news-gallery-hero--exact .news-gallery-hero__sub{
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 1.6vw, 18px);
  color: #F5F5F5;
  opacity: .95;
}

/* компактност на мобилни */
@media (max-width: 560px){
  .news-gallery-hero--exact .news-gallery-hero__inner{ border-radius: 8px; padding: 16px 14px 18px; }
  .news-gallery-hero--exact .news-gallery-hero__inner::after{ height: 5px; border-radius:0 0 8px 8px; }
}

/* GRID */
.news-gallery-section{
  padding: 20px 16px 36px;
}
.news-gallery-grid{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 980px){
  .news-gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .news-gallery-grid{ grid-template-columns: 1fr; }
}

/* CARD */
.news-gallery-card{
  background: var(--news-card);
  border: 1px solid var(--news-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.news-gallery-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.news-gallery-card__media{
  display:block;
  aspect-ratio: 16/11;
  background: #f2f4f5;
  position: relative;
}
.news-gallery-card__media img{
  width:100%; height:265px; object-fit: cover; display:block;
}
.news-gallery-card__placeholder{
  position:absolute; inset:0; display:grid; place-items:center;
  color:#b8c1c0;
}
.news-gallery-card__placeholder svg{
  width: 56px; height:56px; fill:#cdd6d4;
}
.news-gallery-card__body{
  padding: 14px 14px 16px;
}
.news-gallery-card__title{
  margin: 0 0 8px;
  font: 700 18px/1.35 'Roboto', sans-serif;
  color: var(--news-ink);
}
.news-gallery-card__title a{
  color: inherit; text-decoration: none;
}
.news-gallery-card__title a:hover{
  color: #14AA00;
}

/* LOAD MORE */
.news-gallery-actions{
  display:flex; justify-content:center; margin-top: 18px;
}
.news-gallery-more{
  background: linear-gradient(135deg, #B9E769, #7fc83c);
  color:#0b2b24;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  font: 700 14px/1 'Roboto', sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(100,140,40,.25);
  transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
}
.news-gallery-more:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(100,140,40,.32); }
.news-gallery-more:active{ transform: scale(.98); }


    /* ===== ARTICLE/ALBUM ===== */ 
    :root{
      --ink: #333333;
      --bg:  #F5F5F5;
      --card:#FFFFFF;
      --green:#1C3F36;
      --lime:#B9E769;
      --ivory:#E9F7D1;
      --muted:#7b8a85;
      --radius:14px;
      --container:1100px;
      --shadow-sm:0 6px 18px rgba(0,0,0,.08);
      --shadow-md:0 10px 26px rgba(0,0,0,.12);
    }


    .container{
      max-width:var(--container);
      margin-inline:auto;
      padding: clamp(16px, 3vw, 28px);
    }

    /* ===== BREADCRUMB / BACK ===== */
    .back{
      display:inline-flex; align-items:center; gap:8px;
      text-decoration:none; font-weight:600;
      color:var(--green);
      padding:8px 10px; border-radius:999px;
      transition: background .2s ease, transform .2s ease;
    }
    .back:hover{ background: #E9F7D1; transform: translateX(-2px); }
    .back svg{ width:18px; height:18px; }

    /* ===== ARTICLE/ALBUM HEADER ===== */
    .article{
      background: var(--card);
      border:1px solid #e8eceb;
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      padding: clamp(18px, 3vw, 28px);
      margin-top: 10px;
    }
    .title{
      font: 700 clamp(18px, 5vw, 46px)/1.15 "Poppins", sans-serif;
      color: var(--green);
      text-align: center;
      margin: 8px 0 14px;
      letter-spacing:.2px;
    }
    .divider{
      height:1px; background:#dfe6e4;
      margin: 10px 0 22px;
    }

    /* ===== WRAPPED IMAGE + TEXT ===== */
    .content{
      --side-gap: clamp(14px, 2vw, 22px);
      --img-w: min(40%, 360px);
      hyphens: auto;
      text-wrap: pretty;
    }

    /* снимката „вътре“ в текста */
    .float-img{
      float: left;
      width: var(--img-w);
      margin: 0 var(--side-gap) var(--side-gap) 0;
      border-radius: 12px;
      box-shadow: var(--shadow-sm);
      background:#e9efee;
      /* по-гладко обтичане */
      shape-outside: inset(0 round 12px);
      -webkit-shape-outside: inset(0 round 12px);
      outline: 3px solid #ffffff;
      outline-offset: -3px;
    }

    .lead{
      font-size: clamp(18px, 2.2vw, 20px);
      line-height: 1.85;
      color:#2c3a36;
      margin-bottom: 10px;
    }
    .content p{ margin: 0 0 14px; }

    /* цитат (по избор) */
    .pull{
      background: linear-gradient(180deg, #ffffff, #f9fbfa);
      border: 1px solid #e7eeec;
      border-radius: 12px;
      padding: 14px 16px;
      margin: 18px 0;
      box-shadow: var(--shadow-sm);
      font-weight: 500;
      position: relative;
    }
    .pull::before{
      content:"";
      position:absolute; inset:auto 0 0 0; height:4px;
      background: linear-gradient(90deg, var(--lime), #8fcf4c);
      border-radius: 0 0 12px 12px;
    }

    /* мобилна корекция: снимката да падне над текста */
    @media (max-width: 640px){
      .float-img{
        float:none; width:100%;
        margin: 0 0 14px 0;
        shape-outside: none;
      }
    }

    /* ===== GALLERY SECTION ===== */
    .gallery{
      margin-top: clamp(26px, 5vw, 46px);
    }
    .gallery h2{
      text-align:center;
      font: 700 clamp(22px, 4.2vw, 34px)/1.2 "Poppins", sans-serif;
      color: var(--green);
      margin: 0 0 12px;
    }
    .gallery .sub{
      text-align:center; color:var(--muted);
      margin-bottom: 18px;
    }

    .grid{
      display:grid;
      gap: 18px;
      grid-template-columns: repeat(3, 1fr);
    }
    @media (max-width: 980px){ .grid{ grid-template-columns: repeat(2,1fr); } }
    @media (max-width: 560px){ .grid{ grid-template-columns: 1fr; } }

    .tile{
      position: relative;
      background: var(--card);
      border:1px solid #e8eceb;
      border-radius: 12px;
      overflow: clip;
      box-shadow: var(--shadow-sm);
      isolation:isolate;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .tile::after{
      content:""; position:absolute; inset:auto 0 0 0; height:4px;
      background: linear-gradient(90deg, var(--lime), #9dd35d);
      transform: translateY(4px); opacity:0; transition: .25s ease;
    }
    .tile:hover{
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-color:#dfe6e4;
    }
    .tile:hover::after{ transform: translateY(0); opacity:1; }

    .media{
      aspect-ratio: 16/11;
      width:100%;
      object-fit: cover;
      display:block;
      background:#eef2f1;
    }

    /* малък caption */
    .cap{
      padding: 10px 12px 12px;
      font: 600 15px/1.45 "Roboto", sans-serif;
      color: #24443b;
    }

/* ===== PAGES ===== */

:root {
      --green:#1C3F36;
      --lime:#B9E769;
      --bg:#F5F5F5;
      --card:#FFFFFF;
      --radius:14px;
      --shadow:0 6px 18px rgba(0,0,0,.08);
    }

    .page-container {
      max-width:1100px;
      margin:auto;
      padding:24px;
    }
    
    /* Title */
    .page-title {
      text-align:center;
      font-family:"Poppins",sans-serif;
      font-weight:700;
      font-size:clamp(26px,5vw,40px);
      color:var(--green);
      margin:0 0 12px;
    }

    .page-divider {
      height:2px;
      background:#ddd;
      margin: 0 auto 28px;
      max-width:900px;
    }

    /* Info section */
    .page-info {
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:24px 26px;
      margin-bottom:36px;
      border-left:6px solid var(--lime);
    }

    .page-info h2 {
      font-family:"Poppins",sans-serif;
      font-size:clamp(18px,3vw,22px);
      color:var(--green);
      margin-bottom:10px;
    }

    .page-info p {
      margin:0 0 12px;
      line-height:1.7;
    }

    /* Gallery */
    .page-gallery {
      margin-bottom:36px;
    }

    .page-gallery h2 {
      font-family:"Poppins",sans-serif;
      font-weight:600;
      font-size:clamp(20px,4vw,28px);
      color:var(--green);
      margin:0 0 18px;
      text-align:center;
    }

    .page-gallery-grid {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }
    @media(max-width:980px){ .page-gallery-grid{ grid-template-columns:repeat(3,1fr); } }
    @media(max-width:680px){ .page-gallery-grid{ grid-template-columns:repeat(2,1fr); } }
    @media(max-width:460px){ .page-gallery-grid{ grid-template-columns:1fr; } }

    .page-gallery-item {
      background:var(--card);
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
      transition:transform .25s ease, box-shadow .25s ease;
    }
    .page-gallery-item:hover {
      transform:translateY(-4px);
      box-shadow:0 10px 24px rgba(0,0,0,.15);
    }

    .page-gallery-item img {
      width:100%;
      aspect-ratio:1/1;
      object-fit:cover;
      display:block;
    }

    /* Files section */
    .page-files {
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:24px 26px;
    }

    .page-files h2 {
      font-family:"Poppins",sans-serif;
      font-weight:600;
      font-size:clamp(20px,4vw,26px);
      color:var(--green);
      margin:0 0 16px;
    }

    .page-file-link {
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:12px;
      background:#F0F8EE;
      padding:10px 14px;
      border-radius:8px;
      text-decoration:none;
      color:var(--green);
      font-weight:500;
      transition:background .2s ease, transform .2s ease;
    }
    .page-file-link:hover {
      background:#E9F7D1;
      transform:translateX(2px);
    }
    .page-file-link svg {
      width:22px;
      height:22px;
      flex-shrink:0;
    }


/* ==============================
   PAGINATION (PMG Style with icons)
   ============================== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 40px auto;
  list-style: none;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

/* Основен контейнер за елемент */
.page-item {
  display: inline-block;
}

/* Стандартен бутон */
.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  background: #ffffff;
  color: #1C3F36;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1.5px solid #dbe4e0;
  transition: all 0.25s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}

/* SVG икони */
.page-link svg {
  width: 18px;
  height: 18px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
}

/* Hover */
.page-link:hover {
  background: #E9F7D1;
  color: #1C3F36;
  border-color: #B9E769;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(185, 231, 105, 0.25);
}

/* Hover върху стрелки – малка анимация */
.page-link:hover svg {
  transform: translateX(2px);
}
.page-item:first-child .page-link:hover svg {
  transform: translateX(-2px);
}

/* Активна страница */
.page-item-active .page-link,
.page-item.active .page-link {
  background: linear-gradient(135deg, #B9E769, #9DC558);
  color: #1C3F36;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(185, 231, 105, 0.3);
  transform: none;
  cursor: default;
}

/* Disabled */
.page-item.disabled .page-link,
.page-item.disabled .page-link:hover {
  opacity: 0.55;
  background: #f4f6f5;
  color: #8a9a96;
  border-color: #e1e7e4;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Responsive */
@media (max-width: 560px) {
  .page-link {
    min-width: 34px;
    height: 34px;
    font-size: 14px;
    padding: 0 10px;
  }
  .page-link svg {
    width: 16px;
    height: 16px;
  }
}



/* ================================
   LOCAL FONT IMPORTS
   ================================ */

/* === Poppins === */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* === Roboto === */
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* === Alexandria === */
@font-face {
  font-family: 'Alexandria';
  src: url('fonts/Alexandria-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

/* === Inter === */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}