/* =========================================================
   РОЗШИРЕННЯ ГОЛОВНОГО МЕНЮ (УНІВЕРСАЛЬНЕ ДЛЯ ВСІХ СТОРІНОК)
   ========================================================= */
 
/* 1. Знаходимо і ховаємо колонку Login у будь-якій шапці сайту */
#t4-header .col-xl-3,
#t4-header-wrap .col-xl-3,
.t4-header-wrap .col-xl-3 {
    display: none !important;
}

/* 2. Жорстко перебиваємо Bootstrap-клас col-xl-9 для меню */
#t4-header div.t4-navbar-wrap.col-xl-9,
#t4-header-wrap div.t4-navbar-wrap.col-xl-9,
.t4-header-wrap div.t4-navbar-wrap {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 2. Змушуємо меню зайняти всі 100% ширини на всіх без винятку сторінках */
.t4-navbar-wrap {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
/* =========================================================
   АБСОЛЮТНЕ РОЗШИРЕННЯ МЕНЮ НА ВСІХ СТОРІНКАХ
   ========================================================= */

/* 1. Безжалісно ховаємо праву колонку (Login) у будь-якому хедері сайту */
header .row.no-gutters > .col-xl-3,
.t4-header-inner .col-xl-3 {
    display: none !important;
}

/* 2. Змушуємо обгортку меню ігнорувати сітку і займати 100% місця */
header .row.no-gutters > .t4-navbar-wrap,
.t4-header-inner .t4-navbar-wrap {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    min-width: 100% !important; /* Додаємо min-width для 100% гарантії */
}
/* =========================================================
   ГЛОБАЛЬНИЙ СТИЛЬ: "ОРГАНІЧНИЙ ТА АСИМЕТРИЧНИЙ" (ЕКО-СТИЛЬ)
   ========================================================= */

/* 1. Знімаємо жорсткі рамки та лінії з усього сайту */
.t4-wrapper {
    border: none !important;
    box-shadow: none !important;
    background-color: #fbfcfa !important; /* Дуже легкий, свіжий еко-фон замість сірого */
}

.t4-section {
    border: none !important;
    box-shadow: none !important;
}

/* Ховаємо стандартні сірі лінії між секціями шаблону */
.section-border-top::before, 
.section-border-bottom::before {
    display: none !important; 
}

/* 2. Форма "Природного листочка" для всіх карток (Факультети, Новини, Сервіси) */
.t4-module-content,
.acm-features,
.acm-clients,
.blog-item-content,
.article-list .item {
    background-color: #ffffff !important;
    
    /* Магія асиметрії: різні радіуси для кожного кута (Нагадує форму листка) */
    border-radius: 40px 8px 40px 8px !important; 
    
    padding: 35px !important;
    
    /* Легка, тепла зеленувата тінь замість брудно-сірої */
    box-shadow: 0 15px 35px rgba(11, 148, 68, 0.06) !important; 
    border: 1px solid rgba(11, 148, 68, 0.04) !important;
    
    /* Плавність для анімації */
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 3. Ефект "Живого перетікання" при наведенні мишки */
.t4-module-content:hover,
.acm-features:hover,
.blog-item-content:hover,
.article-list .item:hover {
    transform: translateY(-8px) !important;
    
    /* Форма дзеркально змінюється, створюючи ефект живого об'єкта */
    border-radius: 8px 40px 8px 40px !important; 
    
    box-shadow: 0 20px 40px rgba(11, 148, 68, 0.12) !important;
}

/* 4. Органічне накладання секцій (злам сітки) */
/* Підтягуємо секцію новин та сервісів трохи вгору, щоб вони "налізли" на попередній блок */
#t4-section-2, .t4-section-2 {
    margin-top: -30px !important;
    position: relative;
    z-index: 10;
    padding-top: 40px !important;
}

#t4-section-3, .t4-section-3 {
    margin-top: -40px !important;
    position: relative;
    z-index: 11;
    padding-top: 40px !important;
}


/* =========================================================
   ШЛІФУВАННЯ ЕКО-СТИЛЮ (ФІКС КАРТИНОК ТА ФОНІВ)
   ========================================================= */

/* 1. Обрізаємо квадратні фотографії новин по формі нашого "листочка" */
.blog-item-content,
.article-list .item,
.t4-module-content {
    overflow: hidden !important; 
}

/* 2. Прибираємо ефект "коробка в коробці" (робимо контейнери прозорими) */
.t4-section-2 .t4-module-content,
.t4-section-3 .t4-module-content,
.t4-section-4 .t4-module-content {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* 3. Оскільки ми забрали білий фон контейнера, додаємо його самим сервісам */
.acm-features .item {
    background-color: #ffffff !important;
    border-radius: 40px 8px 40px 8px !important;
    padding: 30px !important;
    box-shadow: 0 15px 35px rgba(11, 148, 68, 0.06) !important;
    transition: all 0.4s ease !important;
}

.acm-features .item:hover {
    transform: translateY(-8px) !important;
    border-radius: 8px 40px 8px 40px !important;
    box-shadow: 0 20px 40px rgba(11, 148, 68, 0.12) !important;
}


/* =========================================================
   КОНТРОЛЬ ВІДСТУПІВ МІЖ СЕКЦІЯМИ (ЗМЕНШЕННЯ ДІРОК)
   ========================================================= */

/* 1. Глобально зменшуємо стандартні гігантські відступи шаблону */
.t4-section {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
}

/* 2. Прибираємо зайвий простір під секцією "Новини" (під кнопкою) */
#t4-section-2, .t4-section-2 {
    padding-bottom: 0 !important;
}

/* 3. Підтягуємо секцію "Наші сервіси" ближче до новин */
#t4-section-3, .t4-section-3 {
    padding-top: 10px !important;
}


/* =========================================================
   ПЕРЕЗАПУСК: ІДЕАЛЬНА ВЕРХНЯ ПАНЕЛЬ (TOP BAR)
   ========================================================= */

/* 1. Головна панель (висота 36px для комфорту) */
.t4-topbar {
    background-color: #0b9444 !important;
    border-bottom: 2px solid #087535 !important;
    height: 32px !important; 
    display: flex;
    align-items: center;
    padding: 0 !important;
}

/* 2. Змушуємо контент триматися по центру (не розповзатися по краях) */
.t4-topbar .container {
    height: 100%;
}

/* Вбиваємо зайві рядки шаблону, які ламають сітку */
.t4-topbar .row {
    height: 100%;
    width: 100%;
    display: flex !important;
    justify-content: space-between !important; /* Розштовхує іконку і пошук по краях контейнера, а не екрана */
    align-items: center !important;
    margin: 0 !important;
}

/* Прибираємо внутрішні відступи колонок */

.t4-topbar .topbar-r {
    display: flex !important;
    align-items: center !important;
    padding: 0 15px !important;
    height: 100%;
}

/* 3. Ліва частина (Іконка будиночка) */
.t4-topbar .topbar-l .t4-module,
.t4-topbar .topbar-l .custom {
    margin: 0 !important;
    padding: 0 !important;
}





/* 4. Права частина (Сучасний, акуратний пошук) */
.t4-topbar .t4-module {
    margin: 0 !important;
}

.t4-topbar .search,
.t4-topbar form {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    height: 35px !important; /* Ідеальна висота для елементів форми */
}

/* Ховаємо зайві написи назавжди */
.t4-topbar label,
.t4-topbar .module-title {
    display: none !important;
}

/* Поле вводу пошуку */
.t4-topbar input {
    height: 25px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    border: none !important;
    border-radius: 4px 0 0 4px !important; /* Заокруглюємо тільки ліві кути */
    width: 220px !important; /* Комфортна ширина для вводу */
    outline: none !important;
}

/* Кнопка пошуку */
.t4-topbar .btn {
    height: 25px !important;
    padding: 0 15px !important;
    font-size: 12px !important;
    border-radius: 0 4px 4px 0 !important; /* Заокруглюємо тільки праві кути */
    background-color: #087535 !important; /* Робимо кнопку трохи темнішою за панель */
    color: white !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
    transition: background 0.3s ease;
}

.t4-topbar .btn:hover {
    background-color: #054f23 !important;
}

/* Прибираємо внутрішні відступи колонок, щоб Flexbox сам ідеально відцентрував по вертикалі */
.t4-topbar .topbar-l {
    display: flex !important;
  //  align-items: center !important; /* Це правило робить ідеальний центр по вертикалі */
  padding: 5px 5px 5px 5px; /* (верх, право, низ, ліво);  НУЛЬ зверху і знизу - це головний секрет! */
    height: 100% !important;
}

/* Жорстко центруємо саму іконку і вбиваємо приховані відступи шрифту */
.t4-topbar .topbar-l a,
.t4-topbar .topbar-l i {
    display: flex !important;
    align-items: center !important;
    color: #ffffff !important;
    font-size: 16px !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important; /* Приборкуємо невидиму рамку навколо іконки FontAwesome */
}

.t4-topbar .topbar-l a:hover {
    color: #e0e0e0 !important;
}

/* =========================================================
   ОРГАНІЧНІ ВИПАДАЮЧІ МЕНЮ (ЕКО-СТИЛЬ)
   ========================================================= */

/* 1. Форма "листочка" та тінь для самого блоку випадаючого меню */
.t4-navbar-wrap .dropdown-menu,
.t4-megamenu .dropdown-menu,
.t4-megamenu .mega-inner {
    border: none !important;
    border-radius: 20px 8px 20px 8px !important; /* Наша фірмова асиметрична форма */
    box-shadow: 0 15px 35px rgba(11, 148, 68, 0.1) !important; /* М'яка еко-тінь замість сірої */
    padding: 15px !important; /* Додаємо повітря всередині меню */
    background-color: #ffffff !important;
    /* Ми прибрали overflow: hidden, щоб підменю 3-го рівня могли вільно випадати збоку! */
}

/* 2. Робимо самі пункти меню всередині м'якими */
.t4-navbar-wrap .dropdown-menu .dropdown-item,
.t4-navbar-wrap .dropdown-menu li > a,
.t4-megamenu .dropdown-menu li > a,
.t4-megamenu .mega-inner li > a {
    border-radius: 10px 4px 10px 4px !important; /* Міні-листочок для кожного пункту */
    transition: all 0.3s ease !important;
    padding: 8px 15px !important;
    margin-bottom: 2px !important; /* Відстань між пунктами */
}

/* 3. Ефект при наведенні мишки на пункт меню (ніжний зелений фон) */
.t4-navbar-wrap .dropdown-menu .dropdown-item:hover,
.t4-navbar-wrap .dropdown-menu li > a:hover,
.t4-megamenu .dropdown-menu li > a:hover,
.t4-megamenu .mega-inner li > a:hover {
    background-color: rgba(11, 148, 68, 0.05) !important; /* Дуже світлий зелений фон */
    color: #0b9444 !important; /* Фірмовий темно-зелений текст */
    transform: translateX(5px) !important; /* Текст трішки і плавно від'їжджає вправо */
}