/* ==========================================
   RESPONSIVE STYLES
   Move IT Education - Organized Structure
   ========================================== */

/* ==========================================
   TABLE OF CONTENTS:
   
   1. Breakpoint Variables (comment reference)
   2. Mobile (max-width: 768px)
      - Navigation
      - Header & Typography
      - Decorations (hide)
      - Explanation Section
      - Gallery Section
      - Islands Section
      - Courses Section
   3. Small Mobile (max-width: 480px)
      - Islands
      - Courses
   ========================================== */

/* ==========================================
   BREAKPOINT REFERENCE
   ========================================== */
/*
   Mobile: max-width: 768px
   Small Mobile: max-width: 480px
   Tablet: min-width: 769px and max-width: 1024px (if needed)
   Desktop: min-width: 1025px (default, no media query)
*/

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

@media (max-width: 768px) {
    
    
    /* ===== GLOBAL ===== */
    
    body {
        padding-top: 110px !important; /* Mobile: space after navigation */
        font-size: 1.0625rem !important; /* ✅ ЗБІЛЬШЕНО: 17px замість 16px для кращої читабельності */
    }
    
    /* ✅ ГЛОБАЛЬНЕ ПЕРЕВИЗНАЧЕННЯ: всі параграфи на мобільних */
    p, 
    .island-description,
    .island-detail-item,
    .course-description,
    .lesson-description,
    .about-text,
    .mission-text,
    .timeline-description,
    .contact-text {
        font-size: 1.0625rem !important; /* 17px для ВСІХ текстів */
    }
    
    .container {
        padding: 0 15px !important;
    }
    
    /* ===== NAVIGATION ===== */
    
    .nav-menu {
        display: none;
    }
    
    .menu-toggle {
        display: flex;
    }
    
    /* КРИТИЧНО: Меню заховане за замовчуванням */
    .mobile-menu-overlay {
        right: -100% !important;
    }
    
    .mobile-menu-overlay.active {
        right: 0 !important;
    }
    
    .nav-container {
        padding: 16px 24px;
    }
    
    .brand-text {
        font-size: 20px;
    }
    
    .brand-icon {
        font-size: 24px;
    }
    
    /* ===== TYPOGRAPHY ===== */
    
    .title {
        font-size: 3.8rem;
    }
    
    .title-cursive {
        font-size: 3.5rem;
    }
    
    .section-title {
        font-size: 1.2rem;
        padding: 15px 35px;
    }
    
    .section-title::before,
    .section-title::after {
        font-size: 1.2rem;
        left: 10px;
        right: 10px;
    }

    .section-title h3 {
        font-size: 8px;
    }
    
    /* ===== DECORATIONS - HIDE ON MOBILE ===== */
    
    /* Breadcrumbs і Section dots - ховаємо ТІЛЬКИ на мобільних */
    .breadcrumb-nav,
    .section-dots {
        display: none !important;
    }
    
    /* General decorations */
    .search-decoration,
    .deco-circle,
    .organic-bubble,
    .right-decoration,
    .right-circle {
        display: none;
    }
    
    /* Explanation section decorations */
    .exp-organic-bubble,
    .exp-right-decoration,
    .exp-right-circle,
    .decoration-2,
    .decoration-3,
    .decoration-4 {
        display: none;
    }
    
    /* Gallery decorations */
    .gallery-organic-bubble,
    .gallery-right-decoration,
    .gallery-right-circle {
        display: none;
    }
    
    /* Islands decorations */
    .island-deco,
    .island-bubble {
        display: none;
    }
    
    /* Courses decorations */
    .courses-bubble,
    .courses-decoration {
        display: none;
    }
    
    /* ===== HEADER CARD ===== */
    
    .header-card,
    .block-card {
        padding: 35px 25px 130px;
    }
    
    .card-content {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .decoration-1 {
        right: 15px;
        top: -40px;
        width: 150px;
        height: 150px;
    }
    
    /* Navigation icons (if present) */
    .nav-icons {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .icon-btn {
        width: 58px;
        height: 58px;
    }
    
    .icon-btn svg {
        width: 28px;
        height: 28px;
    }
    
    /* ===== EXPLANATION SECTION ===== */
    
    .explanation-section {
        margin-top: 35px;
    }
    
    .explanation-card {
        padding: 40px 25px;
        min-height: auto;
    }
    
    .exp-text-box {
        max-width: 100%;
        margin: 0 0 25px 0 !important;
        padding: 4px; /* ✅ ЗМЕНШЕНО: було 6px → ще більше простору */
    }
    
    /* ✅ ДОДАНО: Ще менший padding для параграфів на мобільних */
    .exp-text-left p,
    .exp-text-right p {
        padding: 12px 15px !important; /* ✅ ЗМЕНШЕНО: було 15px 20px */
        font-size: 1.05rem !important; /* ✅ ЗБІЛЬШЕНО: краща читабельність (16.8px) */
        line-height: 1.65 !important; /* ✅ ДОДАНО: оптимальна висота рядка */
    }
    
    /* ✅ ДОДАНО: Заголовки по центру на мобільних */
    .exp-text-box h3,
    .exp-text-box h4 {
        font-size: 1.1rem;
        margin-bottom: 12px;
        text-align: center !important; /* ✅ ВІДЦЕНТРОВАНО для мобільних */
        padding: 0 10px; /* ✅ ДОДАНО: трохи padding, щоб не злипалось з краями */
    }
    
    .scroll-btn {
        padding: 18px 40px;
        font-size: 12px;
    }
    
    /* ===== GALLERY SECTION ===== */
    
    .gallery-section {
        margin-top: 35px;
    }
    
    .gallery-card {
        padding: 30px 20px;
    }
    
    .gallery-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .gallery-left {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .gallery-text h4 {
        font-size: 13px;
    }
    
    .gallery-text p {
        font-size: 11px;
    }
    
    .gallery-text-large h4 {
        font-size: 16px;
    }
    
    .gallery-text-large p {
        font-size: 12px;
    }
    
    .gallery-btn {
        width: 45px;
        height: 45px;
    }
    
    .gallery-btn svg {
        width: 22px;
        height: 22px;
    }
    
    .gallery-btn-add {
        width: 60px;
        height: 60px;
    }
    
    .gallery-btn-add svg {
        width: 30px;
        height: 30px;
    }
    
    /* ДОДАНО: Виправлення карусели */
    .carousel-3d,
    .carousel-container {
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .carousel-slide,
    .carousel-item {
        width: 90% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }
    
    .carousel-text,
    .carousel-description {
        font-size: 11px !important;
        line-height: 1.4 !important;
        padding: 15px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .carousel-title {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    
    /* ✅ ДОДАНО: Нові стилі для carousel-card */
    .carousel-card-title {
        font-size: 0.9rem !important; /* 14.4px для мобільних */
    }
    
    .carousel-card-description {
        font-size: 0.7rem !important; /* 11.2px для мобільних */
        line-height: 1.4 !important;
    }
    
    /* ===== ISLANDS SECTION ===== */
    
    .islands-main-card {
        padding: 40px 20px;
        border-radius: 35px;
    }
    
    .islands-grid {
        gap: 30px;
    }
    
    .island-item {
        min-height: auto;
        border-radius: 30px;
        grid-template-columns: 1fr;
        grid-template-rows: 250px auto;
    }
    
    .island-bg {
        order: 1 !important;
    }
    
    .island-content {
        order: 2 !important;
        padding: 25px 20px; /* ✅ ЗМЕНШЕНО: було 30px 25px */
        gap: 10px; /* ✅ ЗМЕНШЕНО: було 12px */
    }
    
    .island-overlay {
        background: linear-gradient(180deg,
            transparent 0%,
            rgba(45, 70, 40, 0.3) 70%,
            rgba(45, 70, 40, 0.7) 100%) !important;
    }
    
    .island-icon {
        font-size: 3rem;
        margin-bottom: 5px;
        margin: 0 auto;
    }
    
    .island-age {
        font-size: 1.6rem;
    }
    
    .island-subtitle {
        font-size: 1.1rem;
    }
    
    .island-description {
        font-size: 0.95rem;
        margin-bottom: 12px;
    }
    
    .island-details {
        padding: 15px 18px; /* ✅ ЗМЕНШЕНО: було 18px 20px */
        border-radius: 20px;
        margin-bottom: 15px;
    }
    
    .island-detail-item {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }
    
    .island-btn {
        padding: 12px 30px;
        font-size: 0.95rem;
        border-radius: 30px;
    }
    
    /* ===== ABOUT US - FORMATS SECTION ===== */
    
    .formats-grid {
        grid-template-columns: 1fr !important; /* ✅ ВИПРАВЛЕНО: одна колонка на мобільних */
        gap: 25px !important;
    }
    
    .format-card {
        padding: 25px 20px !important;
    }
    
    .format-icon {
        font-size: 2.5rem !important;
        margin-bottom: 15px !important;
    }
    
    .format-name {
        font-size: 1.1rem !important;
    }
    
    .format-features li {
        font-size: 0.95rem !important;
        padding: 8px 0 !important;
        padding-left: 30px !important;
    }
    
    .common-features {
        padding: 25px 20px !important;
    }
    
    /* ===== COURSES SECTION ===== */
    
    .courses-creative-card {
        padding: 40px 25px;
        border-radius: 35px;
    }
    
    .courses-creative-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .course-creative-content {
        padding: 20px 25px 25px;
    }
    
    .course-creative-title {
        font-size: 1.3rem;
    }
    
    .course-creative-desc {
        font-size: 0.9rem;
    }
    
    .course-hover-icon {
        font-size: 2.5rem;
        top: 15px;
        right: 15px;
    }

    h2 {
    font-size: 12px;
    }

    .emoji {
        width: 80px;
    }
}

/* ==========================================
   SMALL MOBILE STYLES (max-width: 480px)
   ========================================== */

@media (max-width: 480px) {
    
    /* ===== GLOBAL ===== */
    
    body {
        padding-top: 100px !important; /* Small mobile: space after navigation */
        font-size: 1.0625rem !important; /* ✅ ЗБІЛЬШЕНО: 17px для кращої читабельності */
    }
    
    /* ✅ ГЛОБАЛЬНЕ ПЕРЕВИЗНАЧЕННЯ: всі параграфи на малих мобільних */
    p, 
    .island-description,
    .island-detail-item,
    .course-description,
    .lesson-description,
    .about-text,
    .mission-text,
    .timeline-description,
    .contact-text {
        font-size: 1.0625rem !important; /* 17px для ВСІХ текстів */
    }

    /* ===== TYPOGRAPHY ===== */
    
    .section-title {
        font-size: 1.4rem;
        padding: 12px 25px;
    }
    
    /* ===== ISLANDS SECTION ===== */
    
    .islands-main-card {
        padding: 30px 15px;
        border-radius: 30px;
    }
    
    .island-item {
        min-height: auto;
        border-radius: 25px;
        grid-template-rows: 220px auto;
    }
    
    .island-content {
        padding: 20px 15px; /* ✅ ЗМЕНШЕНО: було 25px 20px */
        gap: 8px; /* ✅ ЗМЕНШЕНО: було 10px */
    }
    
    .island-icon {
        font-size: 2.5rem;
    }
    
    .island-age {
        font-size: 1.4rem;
    }
    
    .island-subtitle {
        font-size: 1rem;
    }
    
    .island-description {
        font-size: 0.9rem;
    }
    
    .island-details {
        padding: 12px 15px; /* ✅ ЗМЕНШЕНО: було 15px 18px */
    }
    
    .island-detail-item {
        font-size: 0.85rem;
    }
    
    .island-btn {
        padding: 10px 25px;
        font-size: 0.9rem;
    }
    
    /* ===== EXPLANATION SECTION ===== */
    
    .exp-text-box {
        padding: 3px; /* ✅ ЩЕ МЕНШЕ для малих екранів */
    }
    
    .exp-text-left p,
    .exp-text-right p {
        padding: 10px 12px !important; /* ✅ МІНІМАЛЬНИЙ padding для максимального простору */
        /* ✅ ПРИБРАНО font-size: тепер використовується базовий 1.0625rem з body */
    }
    
    .exp-text-box h3,
    .exp-text-box h4 {
        font-size: 1rem; /* ✅ Менший заголовок */
        margin-bottom: 10px;
        padding: 0 8px;
    }
    
    /* ===== CAROUSEL SECTION ===== */
    
    .carousel-card-title {
        font-size: 0.85rem !important; /* 13.6px для малих мобільних */
    }
    
    .carousel-card-description {
        font-size: 0.65rem !important; /* 10.4px для малих мобільних */
    }
    
    /* ===== COURSES SECTION ===== */
    
    .section-title {
        font-size: 1.5rem;
        padding: 12px 30px;
    }
    
    .courses-creative-card {
        padding: 30px 20px;
        border-radius: 30px;
    }
    
    .course-creative-inner {
        border-radius: 25px;
    }
    
    .course-creative-content {
        padding: 18px 20px 22px;
    }
    
    .course-creative-title {
        font-size: 1.2rem;
    }
    
    .course-creative-desc {
        font-size: 0.85rem;
        margin-bottom: 18px;
    }
    
    .course-creative-btn {
        padding: 10px 24px;
        font-size: 0.9rem;
    }
}

/* ==========================================
   NOTES FOR DEVELOPERS:
   
   - All mobile styles are now consolidated in ONE media query
   - Styles are grouped by section for easy navigation
   - Decorations are hidden on mobile for better performance
   - Small mobile (480px) has additional refinements
   
   - To add responsive styles for a new component:
     1. Add to the appropriate section in 768px breakpoint
     2. If needed, add refinements in 480px breakpoint
   
   ========================================== */

/* ==========================================
   МОБІЛЬНА ОПТИМІЗАЦІЯ - НАВІГАЦІЯ ТА ВІДСТУПИ
   Додати в кінець responsive-new.css
   ========================================== */

/* ==========================================
   ОПТИМІЗАЦІЯ НАВІГАЦІЇ ДЛЯ МОБІЛЬНИХ
   ========================================== */

@media (max-width: 768px) {
    /* ✅ ЗМЕНШУЄМО ВИСОТУ НАВІГАЦІЇ */
    .nav-container {
        padding: 10px 20px !important; /* Було: 16px 24px */
        border-radius: 25px !important; /* Було: 50px */
    }
    
    .brand-icon {
        width: 140px !important; /* Було: 150px */
    }
    
    /* ✅ ЗМЕНШУЄМО ВІДСТУПИ В МОБІЛЬНОМУ МЕНЮ */
    .mobile-menu-overlay {
        padding-top: 80px !important; /* Було: 100px */
    }
    
    .mobile-menu {
        padding: 0 20px !important; /* Було: 0 30px */
    }
    
    .mobile-nav-item {
        margin-bottom: 6px !important; /* Було: 8px */
    }
    
    .mobile-nav-link {
        padding: 14px 20px !important; /* Було: 18px 24px */
        font-size: 16px !important; /* Було: 18px */
        border-radius: 15px !important; /* Було: 20px */
    }
    
    .mobile-link-icon {
        font-size: 20px !important; /* Було: 24px */
    }
}

@media (max-width: 480px) {
    /* ✅ ЩЕ МЕНША НАВІГАЦІЯ ДЛЯ МАЛИХ ЕКРАНІВ */
    .nav-container {
        padding: 8px 15px !important;
        border-radius: 20px !important;
    }
    
    .brand-icon {
        width: 110px !important; /* Було: 120px */
    }
    
    .mobile-menu-overlay {
        padding-top: 70px !important;
    }
    
    .mobile-nav-link {
        padding: 12px 18px !important;
        font-size: 15px !important;
    }
}

/* ==========================================
   ОПТИМІЗАЦІЯ ВІДСТУПІВ ТЕКСТОВИХ БЛОКІВ
   ========================================== */

@media (max-width: 768px) {
    
    /* ===== HEADER / HERO БЛОК ===== */
    .block-card,
    .header-card {
        padding: 30px 20px 100px !important; /* Було: 35px 25px 130px */
    }
    
    /* ===== СЕКЦІЇ ===== */
    .about-section,
    .explanation-section,
    .gallery-section,
    .courses-creative-section,
    .timeline-section,
    .contacts-section {
        margin-top: 40px !important; /* Було: 50-60px */
    }
    
    /* ===== ОСНОВНІ КАРТКИ СЕКЦІЙ ===== */
    .about-main-card,
    .explanation-card,
    .gallery-card,
    .courses-creative-card,
    .islands-main-card,
    .contacts-main-card {
        padding: 35px 20px !important; /* Було: 40-45px 25-30px */
        border-radius: 30px !important; /* Було: 35-40px */
    }
    
    /* ===== INFO CARD (в header) ===== */
    .info-card {
        padding: 20px !important; /* Було: 30px */
        margin-top: 15px !important;
    }
    
    .info-card h2 {
        margin-bottom: 12px !important; /* Було: 16px */
        font-size: 16px !important; /* Було: 18px */
    }
    
    .info-card p {
        line-height: 1.6 !important; /* Було: 1.75 */
    }
    
    /* ===== EXPLANATION TEXT BOXES ===== */
    .exp-text-box {
        margin-bottom: 25px !important; /* Було: 35px */
        padding: 4px !important;
    }
    
    .exp-text-left p,
    .exp-text-right p {
        padding: 10px 14px !important; /* Було: 12px 15px */
    }
    
    .exp-text-box h3,
    .exp-text-box h4 {
        margin-bottom: 8px !important; /* Було: 12px */
        padding: 0 8px !important; /* Було: 0 10px */
    }
    
    /* ===== FORMATS GRID ===== */
    .formats-section {
        margin-bottom: 30px !important; /* Було: 40px */
    }
    
    .formats-title {
        margin-bottom: 30px !important; /* Було: 40px */
    }
    
    .format-card {
        padding: 25px 20px !important; /* Було: 28px 22px */
    }
    
    /* ===== ISLANDS SECTION ===== */
    .islands-grid {
        gap: 25px !important; /* Було: 30px */
    }
    
    .island-content {
        padding: 20px 18px !important; /* Було: 25px 20px */
        gap: 8px !important; /* Було: 10px */
    }
    
    .island-details {
        padding: 12px 15px !important; /* Було: 15px 18px */
        margin-bottom: 12px !important; /* Було: 15px */
    }
    
    .island-detail-item {
        margin-bottom: 8px !important; /* Було: 10px */
    }
    
    /* ===== COURSES SECTION ===== */
    .courses-creative-content {
        padding: 18px 22px 22px !important; /* Було: 20px 25px 25px */
    }
    
    .course-creative-desc {
        margin-bottom: 15px !important; /* Було: 20px */
    }
    
    /* ===== TIMELINE SECTION ===== */
    .timeline-item {
        margin-bottom: 30px !important; /* Було: 40px */
    }
    
    .timeline-text {
        padding: 20px !important; /* Було: 25px */
    }
    
    .timeline-description {
        margin-bottom: 12px !important; /* Було: 15px */
    }
    
    /* ===== ABOUT SECTION ===== */
    .intro-block {
        margin-bottom: 35px !important; /* Було: 50px */
    }
    
    .intro-title {
        margin-bottom: 18px !important; /* Було: 25px */
    }
    
    .intro-subtitle {
        margin-bottom: 15px !important; /* Було: 20px */
    }
    
    .mission-block {
        padding: 30px !important; /* Було: 40px */
        margin-bottom: 35px !important; /* Було: 50px */
    }
    
    .mission-title {
        margin-bottom: 15px !important; /* Було: 20px */
    }
    
    /* ===== CONTACTS SECTION ===== */
    .contact-items {
        gap: 20px !important; /* Було: 25px */
    }
    
    .contact-item {
        padding: 20px !important; /* Було: 25px */
    }
}

/* ==========================================
   ДОДАТКОВА ОПТИМІЗАЦІЯ ДЛЯ МАЛИХ ЕКРАНІВ
   ========================================== */

@media (max-width: 480px) {
    
    /* ===== ЩЕ МЕНШІ ВІДСТУПИ ===== */
    .block-card,
    .header-card {
        padding: 25px 15px 80px !important;
    }
    
    .about-main-card,
    .explanation-card,
    .gallery-card,
    .courses-creative-card,
    .islands-main-card,
    .contacts-main-card {
        padding: 25px 15px !important;
        border-radius: 25px !important;
    }
    
    .info-card {
        padding: 15px !important;
    }
    
    .exp-text-left p,
    .exp-text-right p {
        padding: 8px 12px !important;
    }
    
    .format-card {
        padding: 20px 18px !important;
    }
    
    .island-content {
        padding: 18px 15px !important;
        gap: 6px !important;
    }
    
    .island-details {
        padding: 10px 12px !important;
    }
    
    .courses-creative-content {
        padding: 15px 18px 18px !important;
    }
    
    .timeline-text {
        padding: 18px !important;
    }
    
    .mission-block {
        padding: 25px !important;
        margin-bottom: 30px !important;
    }
    
    .contact-item {
        padding: 18px !important;
    }
    
    /* ===== СЕКЦІЇ ===== */
    .about-section,
    .explanation-section,
    .gallery-section,
    .courses-creative-section,
    .timeline-section,
    .contacts-section {
        margin-top: 30px !important;
    }
}

/* ==========================================
   ОПТИМІЗАЦІЯ BODY PADDING-TOP
   ========================================== */

@media (max-width: 768px) {
    body {
        padding-top: 90px !important; /* Було: 110px - зменшуємо бо навігація менша */
    }
}

@media (max-width: 480px) {
    body {
        padding-top: 80px !important; /* Було: 100px */
    }
}


/* ==========================================
   ВИПРАВЛЕННЯ - НАВІГАЦІЯ ТА ФОРМАТИ
   Додати в кінець responsive-new.css або окремим файлом
   ========================================== */

/* ==========================================
   ВИПРАВЛЕННЯ 1: НАВІГАЦІЯ - ЗМЕНШУЄМО ШИРИНУ
   ========================================== */

/* Десктоп - обмежуємо max-width */
@media (min-width: 769px) {
    .nav-container {
        max-width: 1100px !important; /* Було: 1400px */
        padding: 10px 25px !important; /* Було: 10px 30px */
    }
    
    .main-nav {
        /* Обмежуємо ширину самої навігації */
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Планшети - ще менша ширина */
@media (min-width: 769px) and (max-width: 1024px) {
    .nav-container {
        max-width: 900px !important;
        padding: 10px 20px !important;
    }
}

/* Мобільні - компактна навігація */
@media (max-width: 768px) {
    .nav-container {
        max-width: 100% !important;
        padding: 10px 15px !important;
        margin: 0 10px !important; /* Відступи з боків */
        border-radius: 20px !important;
    }
    
    .brand-icon {
        width: 130px !important; /* Було: 140px */
    }
}

@media (max-width: 480px) {
    .nav-container {
        padding: 8px 12px !important;
        margin: 0 8px !important;
        border-radius: 18px !important;
    }
    
    .brand-icon {
        width: 100px !important; /* Було: 110px */
    }
}

/* ==========================================
   ВИПРАВЛЕННЯ 2: ФОРМАТИ (ОНЛАЙН/ОФЛАЙН)
   Вирівнюємо розмір шрифту з іншими текстами
   ========================================== */

/* Основний розмір для format-features */
.format-features li {
    font-size: 1.05rem !important; /* Було: 1rem (16px) → Стало: 1.05rem (16.8px) */
    line-height: 1.6 !important; /* Було: 1.5 → Краща читабельність */
    color: rgba(255, 255, 255, 0.95) !important; /* Було: 0.9 → Яскравіше */
}

/* Вирівнюємо на мобільних */
@media (max-width: 768px) {
    .format-features li {
        font-size: 1.0625rem !important; /* 17px - як інші параграфи на мобільних */
        line-height: 1.65 !important;
        padding: 8px 0 !important; /* Було: 10px - трохи компактніше */
        padding-left: 30px !important; /* Було: 35px */
    }
    
    .format-features li::before {
        font-size: 1.1rem !important; /* Трохи менша галочка */
    }
}

@media (max-width: 480px) {
    .format-features li {
        font-size: 1.0625rem !important; /* Залишаємо 17px */
        padding: 6px 0 !important;
        padding-left: 28px !important;
    }
}

/* ==========================================
   ДОДАТКОВО: ФОРМАТ КАРТКИ - ОПТИМІЗАЦІЯ
   ========================================== */

@media (max-width: 768px) {
    .format-card {
        padding: 28px 22px !important; /* Було: 35px 30px - трохи компактніше */
    }
    
    .format-name {
        font-size: 1.05rem !important; /* Вирівнюємо з іншими заголовками */
        margin-bottom: 15px !important; /* Було: 20px */
    }
    
    .format-icon {
        margin-bottom: 15px !important; /* Було: 20px */
    }
}

@media (max-width: 480px) {
    .format-card {
        padding: 22px 18px !important;
    }
    
    .format-name {
        font-size: 1rem !important;
        margin-bottom: 12px !important;
    }
    
    .format-icon {
        margin-bottom: 12px !important;
    }
}

/* ==========================================
   COMMON FEATURES - ВИРІВНЮЄМО ТЕКСТ
   ========================================== */

.common-text {
    font-size: 1.05rem !important; /* Було не вказано, тепер однаково з іншими */
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

@media (max-width: 768px) {
    .common-text {
        font-size: 1.0625rem !important; /* 17px - як всі параграфи на мобільних */
        line-height: 1.65 !important;
    }
}


/* ==========================================
   КРИТИЧНЕ ВИПРАВЛЕННЯ - МОБІЛЬНА НАВІГАЦІЯ
   Проблема: навігація занадто широка, деформує контент
   ========================================== */

/* ==========================================
   ВИПРАВЛЕННЯ ШИРИНИ НАВІГАЦІЇ НА МОБІЛЬНИХ
   ========================================== */

@media (max-width: 768px) {
    /* КРИТИЧНО: Зменшуємо ширину nav-container */
    .nav-container {
        max-width: calc(100% - 30px) !important; /* Було: 100% */
        margin: 0 15px !important; /* Було: 0 10px */
        padding: 8px 12px !important; /* Було: 10px 15px */
        border-radius: 18px !important; /* Було: 20px */
    }
    
    /* Зменшуємо лого ще більше */
    .brand-icon {
        width: 110px !important; /* Було: 130px */
        height: auto;
    }
    
    /* Зменшуємо кнопку меню */
    .menu-toggle {
        padding: 4px !important;
        margin-right: 0 !important;
    }
    
    .hamburger {
        width: 22px !important; /* Було: 28px */
        height: 2.5px !important; /* Було: 3px */
    }
    
    /* Зменшуємо gap між hamburger лініями */
    .menu-toggle {
        gap: 4px !important; /* Було: 5px */
    }
    
    /* Зменшуємо padding body зверху */
    body {
        padding-top: 80px !important; /* Було: 90px */
    }
}

@media (max-width: 600px) {
    /* Для екранів 580px (як на скріншоті) */
    .nav-container {
        max-width: calc(100% - 40px) !important; /* Ще більші бокові відступи */
        margin: 0 20px !important;
        padding: 7px 10px !important;
        border-radius: 16px !important;
    }
    
    .brand-icon {
        width: 100px !important;
    }
    
    .hamburger {
        width: 20px !important;
    }
    
    body {
        padding-top: 75px !important;
    }
}

@media (max-width: 480px) {
    /* Для малих мобільних */
    .nav-container {
        max-width: calc(100% - 24px) !important;
        margin: 0 12px !important;
        padding: 6px 10px !important;
        border-radius: 15px !important;
    }
    
    .brand-icon {
        width: 90px !important; /* Було: 100px */
    }
    
    .hamburger {
        width: 18px !important;
        height: 2px !important;
    }
    
    .menu-toggle {
        gap: 3px !important;
    }
    
    body {
        padding-top: 70px !important;
    }
}

@media (max-width: 390px) {
    /* Для дуже малих екранів (iPhone 12/13/14) */
    .nav-container {
        max-width: calc(100% - 20px) !important;
        margin: 0 10px !important;
        padding: 6px 8px !important;
    }
    
    .brand-icon {
        width: 85px !important;
    }
}

/* ==========================================
   ВИПРАВЛЕННЯ ДЕКОРАЦІЙ ТА ЗОБРАЖЕНЬ
   Щоб робот не деформувався
   ========================================== */

@media (max-width: 768px) {
    /* Зменшуємо декоративні бульбашки */
    .bubble-left-1,
    .bubble-left-2,
    .bubble-circle {
        display: none !important; /* Приховуємо на мобільних */
    }
    
    /* Зменшуємо робота */
    .decoration-1 {
        width: 120px !important; /* Було: 150px */
        height: 120px !important;
        top: -30px !important; /* Було: -40px */
        right: 10px !important; /* Було: 15px */
    }
    
    .decoration-1 img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
    
    /* Зменшуємо header card padding зверху */
    .block-card,
    .header-card {
        padding: 25px 18px 90px !important; /* Було: 30px 20px 100px */
    }
    
    /* Info card зменшуємо відступи */
    .info-card {
        margin-top: 10px !important;
    }
}

@media (max-width: 600px) {
    .decoration-1 {
        width: 110px !important;
        height: 110px !important;
        top: -25px !important;
        right: 8px !important;
    }
    
    .block-card,
    .header-card {
        padding: 20px 15px 80px !important;
    }
}

@media (max-width: 480px) {
    .decoration-1 {
        width: 100px !important;
        height: 100px !important;
        top: -20px !important;
        right: 5px !important;
    }
    
    .block-card,
    .header-card {
        padding: 18px 12px 70px !important;
    }
}

/* ==========================================
   ВИПРАВЛЕННЯ MAIN-NAV (фіксована позиція)
   ========================================== */

@media (max-width: 768px) {
    .main-nav {
        /* Переконуємось що навігація не розтягується */
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ==========================================
   ДОДАТКОВЕ: ЗМЕНШЕННЯ CONTAINER PADDING
   ========================================== */

@media (max-width: 768px) {
    .container {
        padding: 0 10px !important; /* Було: 0 15px */
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 8px !important;
    }
}


/* ==========================================
   КОНТАКТИ - МОБІЛЬНА АДАПТАЦІЯ
   Критичне виправлення для мобільних пристроїв
   ========================================== */

/* ==========================================
   ОСНОВНІ СТИЛІ ДЛЯ МОБІЛЬНИХ
   ========================================== */

@media (max-width: 768px) {
    /* Основна картка контактів */
    .contacts-main-card {
        padding: 35px 20px !important;
        border-radius: 30px !important;
    }
    
    /* Заголовок */
    .contacts-subtitle {
        font-size: 1.5rem !important;
        margin-bottom: 25px !important;
    }
    
    /* Приховуємо декоративні бульбашки */
    .contacts-bubble {
        display: none !important;
    }
    
    /* ===== SOCIAL MEDIA BLOCK ===== */
    .social-media-block {
        margin-bottom: 35px !important;
    }
    
    /* Social links вже адаптовані, але підсилюємо */
    .social-links-grid {
        gap: 12px !important;
        padding: 0 10px !important;
    }
    
    .social-link {
        width: 65px !important;
        height: 65px !important;
    }
    
    .social-icon svg {
        width: 28px !important;
        height: 28px !important;
    }
    
    /* ===== CONTACT ITEMS - КРИТИЧНО ===== */
    .contact-info-block {
        margin-bottom: 35px !important;
    }
    
    .contact-items {
        grid-template-columns: 1fr !important; /* Одна колонка на мобільних */
        gap: 18px !important;
        padding: 0 !important;
    }
    
    .contact-item {
        padding: 18px 15px !important;
        border-radius: 20px !important;
        gap: 15px !important;
    }
    
    .contact-icon {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        border-radius: 12px !important;
    }
    
    .contact-icon svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    .contact-label {
        font-size: 0.8rem !important;
    }
    
    .contact-value {
        font-size: 0.95rem !important;
    }
    
    /* ===== LOCATIONS GRID - КРИТИЧНО ===== */
    .locations-grid {
        grid-template-columns: 1fr !important; /* Одна колонка на мобільних */
        gap: 25px !important;
    }
    
    .location-card {
        padding: 25px 20px !important;
        border-radius: 25px !important;
    }
    
    .location-title {
        font-size: 1.2rem !important;
        margin-bottom: 15px !important;
    }
    
    /* Location content - стек вертикально */
    .location-content {
        grid-template-columns: 1fr !important; /* Одна колонка замість двох */
        gap: 12px !important;
        margin-bottom: 15px !important;
    }
    
    .location-image,
    .location-map {
        aspect-ratio: 16/9 !important; /* Ширший для мобільних */
        border-radius: 15px !important;
    }
    
    .location-badge {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
        top: 8px !important;
        right: 8px !important;
    }
    
    /* Location address */
    .location-address {
        padding: 15px !important;
        border-radius: 15px !important;
        gap: 12px !important;
        margin-bottom: 15px !important;
    }
    
    .address-icon {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
        border-radius: 10px !important;
    }
    
    .address-icon svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .location-address p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
    
    /* Location button */
    .location-btn {
        padding: 12px 24px !important;
        font-size: 0.95rem !important;
        border-radius: 20px !important;
    }
    
    .location-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ==========================================
   ДОДАТКОВА АДАПТАЦІЯ ДЛЯ МАЛИХ ЕКРАНІВ
   ========================================== */

@media (max-width: 600px) {
    .contacts-main-card {
        padding: 30px 18px !important;
        border-radius: 25px !important;
    }
    
    .contacts-subtitle {
        font-size: 1.4rem !important;
        margin-bottom: 20px !important;
    }
    
    /* Social links ще менші */
    .social-links-grid {
        gap: 10px !important;
    }
    
    .social-link {
        width: 58px !important;
        height: 58px !important;
    }
    
    .social-icon svg {
        width: 26px !important;
        height: 26px !important;
    }
    
    /* Contact items компактніші */
    .contact-items {
        gap: 15px !important;
    }
    
    .contact-item {
        padding: 15px 12px !important;
    }
    
    .contact-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
    
    .contact-icon svg {
        width: 22px !important;
        height: 22px !important;
    }
    
    /* Locations компактніші */
    .locations-grid {
        gap: 20px !important;
    }
    
    .location-card {
        padding: 20px 15px !important;
    }
    
    .location-title {
        font-size: 1.15rem !important;
    }
    
    .location-content {
        gap: 10px !important;
    }
    
    .location-address {
        padding: 12px !important;
    }
    
    .location-btn {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 480px) {
    .contacts-main-card {
        padding: 25px 15px !important;
        border-radius: 20px !important;
    }
    
    .contacts-subtitle {
        font-size: 1.3rem !important;
        margin-bottom: 18px !important;
    }
    
    /* Social links мінімальні */
    .social-links-grid {
        gap: 8px !important;
        padding: 0 5px !important;
    }
    
    .social-link {
        width: 52px !important;
        height: 52px !important;
    }
    
    .social-icon svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    .social-name {
        font-size: 0.7rem !important;
        padding: 4px 8px !important;
    }
    
    /* Contact items мінімальні */
    .contact-items {
        gap: 12px !important;
    }
    
    .contact-item {
        padding: 12px 10px !important;
        border-radius: 15px !important;
        gap: 12px !important;
    }
    
    .contact-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }
    
    .contact-icon svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .contact-label {
        font-size: 0.75rem !important;
    }
    
    .contact-value {
        font-size: 0.9rem !important;
    }
    
    /* Locations мінімальні */
    .location-card {
        padding: 18px 12px !important;
        border-radius: 20px !important;
    }
    
    .location-title {
        font-size: 1.1rem !important;
        margin-bottom: 12px !important;
    }
    
    .location-content {
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    
    .location-image,
    .location-map {
        border-radius: 12px !important;
    }
    
    .location-badge {
        padding: 5px 10px !important;
        font-size: 0.7rem !important;
        border-radius: 15px !important;
    }
    
    .location-address {
        padding: 10px !important;
        border-radius: 12px !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }
    
    .address-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
    
    .address-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    .location-address p {
        font-size: 0.9rem !important;
    }
    
    .location-btn {
        padding: 10px 18px !important;
        font-size: 0.85rem !important;
        border-radius: 18px !important;
    }
    
    .location-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ==========================================
   ВИПРАВЛЕННЯ ДЛЯ ДУЖЕ МАЛИХ ЕКРАНІВ
   ========================================== */

@media (max-width: 390px) {
    .contacts-main-card {
        padding: 20px 12px !important;
    }
    
    .social-link {
        width: 48px !important;
        height: 48px !important;
    }
    
    .social-icon svg {
        width: 22px !important;
        height: 22px !important;
    }
    
    .contact-item {
        padding: 10px 8px !important;
    }
    
    .location-card {
        padding: 15px 10px !important;
    }
}

/* ==========================================
   ДОДАТКОВІ ВИПРАВЛЕННЯ
   ========================================== */

/* Переконуємось що contact-items не має minmax на мобільних */
@media (max-width: 768px) {
    .contact-items {
        grid-template-columns: 1fr !important;
        /* Видаляємо minmax(280px, 1fr) для мобільних */
    }
}

/* Переконуємось що locations-grid не має minmax на мобільних */
@media (max-width: 768px) {
    .locations-grid {
        grid-template-columns: 1fr !important;
        /* Видаляємо minmax(450px, 1fr) для мобільних */
    }
}

/* Виправлення для iframe карт */
@media (max-width: 768px) {
    .location-map iframe {
        width: 100% !important;
        height: 100% !important;
    }
}