/* ========================================== */
/* ДОБАВЕНО ЗА ПЛАВНО СКРОЛИРАНЕ              */
/* ========================================== */
html {
    scroll-behavior: smooth;
}

#info, #istorija, #kadar {
    scroll-margin-top: 100px; /* За да не се скрива заглавието под хедъра */
}

/* 1. ГЛОБАЛНИ НАГОДУВАЊА */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    overflow-x: hidden;
    background-color: #000000;
}

/* 2. ГЛАВЕН ХЕДЕР (Транспарентен над видеото) */
.main-header {
    width: 100%;
    position: absolute; 
    top: 0;
    left: 0;
    z-index: 100; 
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
    color: white;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
}

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

.logo img {
    height: 60px;
    width: auto;
}

.school-name {
    font-size: clamp(1.2rem, 4vw, 2.2rem);
    font-weight: bold;
    font-family: montserrat;
}

/* Навигација за Компјутер (се скрива на мобилен) */
.nav-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.top-nav {
    display: flex;
    gap: 15px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.top-nav a {
    text-decoration: none;
    color: #ddd;
    transition: 0.3s;
}

.main-nav {
    display: flex;
    list-style: none;
    gap: 20px;
}

.main-nav li a {
    text-decoration: none;
    color: white;
    font-size: 0.9rem;
    font-weight: bold;
}

/* 3. HERO СЕКЦИЈА СО ВИДЕО */
.hero-video-section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;  
    z-index: 1;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: white;
    padding: 0 20px;
    width: 100%;
}

.hero-title {
    font-size: clamp(2.2rem, 8vw, 5rem);
    font-weight: 900;
    font-family: montserrat;
    letter-spacing: 4px;
    line-height: 1.1;
    margin-bottom: 15px;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 
                 0px 0px 25px rgba(0, 0, 0, 0.7);
}

.hero-subtitle {
    font-size: clamp(0.9rem, 3vw, 1.2rem);
    margin-bottom: 30px;
    font-weight: 300;
}

.hero-btns {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-main, .btn-outline {
    padding: 12px 25px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    transition: 0.3s;
}
/*  */
.btn-main:hover {
    background: #1e40af;
    transform: translateY(-2px);
}

.btn-outline:hover {
    background: rgb(208, 195, 15);
    color: black;
    transform: translateY(-2px);
}

/*  */
.side-menu-links a:hover {
    background-color: #1a1a1a;
    color: #f1b418;
    padding-left: 35px;
}

.btn-main { background: #2563eb; color: white; border: none; }
.btn-outline { border: 2px solid rgb(208, 195, 15); color: white; }

/* 4. МОБИЛНО ХАМБУРГЕР КОПЧЕ */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 1001;
}

.menu-toggle span {
    width: 30px;
    height: 3px;
    background-color: white;
    border-radius: 2px;
}

/* 5. МОДЕРНО СТРАНИЧНО МЕНИ (SIDEBAR) */
.side-menu {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 10000;
    top: 0;
    right: 0;
    background-color: #000;
    overflow-x: hidden;
    transition: 0.5s ease;
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
}

.side-menu-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 300px;
    justify-content: flex-start;
}

.menu-header {
    padding: 40px 0 20px;
    text-align: center;
}

.small-menu-logo {
    height: 80px;
    width: auto;
}

.side-menu-links a {
    padding: 15px 25px;
    text-decoration: none;
    font-size: 1rem;
    color: white;
    display: block;
    border-bottom: 1px solid #111;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.3s;
}

/* Стил за паѓачките делови (Submenu) */
.has-dropdown {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    background-color: #050505;
}

.submenu {
    max-height: 0;
    overflow: hidden;
    background-color: #0c0c0c;
    transition: max-height 0.3s ease;
}

.submenu.open {
    max-height: 500px;
}

.submenu a {
    padding-left: 50px !important;
    font-size: 0.85rem !important;
    color: #bbb !important;
    text-transform: none !important;
}

/* Социјални мрежи на дното */
.menu-footer {
    margin-top: auto;
    padding-bottom: 40px;
    text-align: center;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-icons a {
    width: 45px;
    height: 45px;
    background: #f1b418; /* Златна боја на Пупин */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: none !important;
}

.side-menu .closebtn {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 30px;
    color: white;
    text-decoration: none;
}
/* Стил за Dropdown на компјутер */
/* Стил за Dropdown на компјутер */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    /* ПРОМЕНЕТО: Наместо display: none, користиме opacity за смут ефект */
    display: block; 
    opacity: 0;
    visibility: hidden;
    position: absolute;
    background-color: rgba(4, 47, 108, 0.571);
    min-width: 200px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    top: 100%;
    left: 0;
    list-style: none;
    padding: 10px 0;
    border-top: 2px solid #f1b418;
    
    /* ДОДАДЕНО: Анимација на појавување */
    transform: translateY(10px); /* Почнува 10 пиксели подолу */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.dropdown-content li a {
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    font-size: 0.8rem;
    transition: 0.3s;
    border-bottom: 1px solid #ffffff;
}

.dropdown-content li a:hover {
    background-color: #f1b418;
    color: rgb(255, 6, 197);
}

/* ПРОМЕНЕТО: Прикажи го менито на Hover со анимација */
.dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Се враќа на първоначалното място */
}

/* Мала стрелка за визуелен ефект */
.arrow-small {
    font-size: 0.7rem;
    margin-left: 5px;
    transition: 0.3s;
    display: inline-block; /* За да може да ротира */
}

.dropdown:hover .arrow-small {
    transform: rotate(180deg);
}

/* Секција за картички */
.values-section {
    padding: 100px 5%;
    background-color: #e6e9eb;
    /* Овој линиски код прави многу суптилни сиви точки во позадина */
    background-image: radial-gradient(#b3c5db 0.5px, transparent 0.5px);
    background-size: 30px 30px;
    position: relative;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Главна картичка */
.value-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 25px; /* Модерен заоблен изглед */
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bounce ефект */
    border: 1px solid rgba(0,0,0,0.03);
    position: relative;
}

.value-card:hover {
    transform: translateY(-15px); /* Картичката се крева повеќе */
    box-shadow: 0 25px 50px rgba(37, 99, 235, 0.15);
    border: 1px solid #2563eb;
}

/* СТИЛ ЗА ОКРУГЛА СЛИКА ШТО СЕ ВРТИ */
.value-image {
    width: 150px;
    height: 150px;
    margin: 0 auto 25px;
    border-radius: 50%; /* Го прави кругот */
    overflow: hidden;
    border: 0px solid #ffffff; /* Златна рамка */
    perspective: 1000px; /* Овозможува 3D вртење */
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.value-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Вртење на сликата кога ќе се помине врз картичката */
.value-card:hover .value-image img {
    transform: rotateY(360deg); /* Целосен круг */
}

.value-card h3 {
    font-size: 1.5rem;
    color: #1a2e5a;
    margin-bottom: 15px;
    font-weight: bold;
}

.value-card p {
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 20px;
}

/* Копчето Дознај повеќе */
.btn-more {
    display: inline-block;
    padding: 10px 25px;
    border: 2px solid #1062e6;
    color: #e8cb09;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    font-size: 0.9rem;
    transition: 0.3s ease;
}

.btn-more:hover {
    background-color: #2b2822;
    color: #fff;
}
.pupin-bio-section {
    padding: 100px 5%;
    background-color: #232019;
}

.bio-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px; /* Простор помеѓу текстот и сликата */
}

/* Текст дел */
.bio-text {
    flex: 1;
}

.section-title {
    font-size: 3.2rem;
    color: #08338f;
     -webkit-text-stroke: 1px #a4a4a4;
    font-weight: 700;
    font-family: montserrat;
    margin-bottom: 10px;
}


.bio-content p {
    font-size: 1.1rem;
    color: #aa9797;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Копче */
.btn-bio {
    display: inline-block;
    padding: 15px 35px;
    background-color: transparent;
    border: 2px solid  #0b3ca5;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: 0.3s ease;
    margin-top: 20px;
}

.btn-bio:hover {
    background-color: #ce9d0c;
    color: #fff;
    transform: translateY(-3px);
}

/* Слика дел */
.bio-image {
    flex: 1;
    position: relative;
}

.bio-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 20px 20px 0px #cb9816; /* Ефект на златна сенка зад сликата */
    display: block;
}

/* Респонзивност за мобилен */
@media (max-width: 992px) {
    .bio-container {
        flex-direction: column;
        text-align: center;
    }
    
    .title-line {
        margin: 0 auto 30px;
    }

    .bio-image img {
        box-shadow: 10px 10px 0px #83610b;
    }
}

.partners-slider {
    padding: 60px 0;
    background-color: #fff;
    overflow: hidden; /* Да не излегуваат сликите од екранот */
    border-top: 1px solid #eee;
}

.slider-title {
    text-align: center;
    margin-bottom: 50px;
    padding-top: 30px;
    position: relative;
}

.slider-title h3 {
    font-size: 2.2rem;
    color: #1a2e5a; /* Темно сина боја од логото на Пупин */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    position: relative;
    display: inline-block;
}

/* Линијата под насловот */
.slider-title h3::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px; /* ТУКА БЕШЕ ГРЕШКАТА (беше 800px) */
    height: 4px;
    background-color: #f1b418; /* Златна боја за контраст */
    border-radius: 2px;
}

/* Мал ефект на линијата за да изгледа подинамично */

.logos-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.logos-track {
    display: inline-flex;
    align-items: center;
    gap: 80px; /* Растојание меѓу логоата */
    animation: scrollLogos 30s linear infinite; /* 30 секунди за цел круг */
}

.logos-track img {
    height: 60px; /* Висината на логоата */
    width: auto;
    opacity: 1; /* Логоата да бидат скроз видливи */
    transition: transform 0.3s ease;
    /* Филтерот за grayscale е избришан за да останат во боја */
}

.logos-track img:hover {
    transform: scale(1.15); /* Мал зум кога ќе поминеш со глувчето */
}

/* АНИМАЦИЈА ЗА ДВИЖЕЊЕ */
@keyframes scrollLogos {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Се движи до половина бидејќи втората половина е иста со първата */
    }
}


/* --- СЕКЦИЈА ЗА ПРОФИЛИ --- */
.classic-edu-section {
    padding: 80px 5%;
    background-color: #f9fbfd;
    font-family: 'Inter', sans-serif;
}

.edu-layout {
    display: flex;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
}

/* Лева Страна - Мени */
.edu-sidebar { flex: 1; }

.section-header-left { margin-bottom: 30px; }
.section-header-left h2 { font-size: 2.2rem; color: #1a2e5a; font-weight: 800; margin-bottom: 10px; font-family:montserrat;}
.yellow-divider-left1 { 
    width: 500px; /* ТУКА БЕШЕ ГРЕШКАТА (беше 600px) */
    height: 4px; 
    background-color: #f1b418; 
    border-radius: 2px; 
    margin-bottom: 15px; 
}
.section-header-left p { color: #666; font-size: 1rem; line-height: 1.5; }

/* Акордион */
.acc-group { margin-bottom: 10px; }

.acc-btn {
    width: 100%;
    text-align: left;
    background: #1a2e5a;
    color: white;
    padding: 18px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(26, 46, 90, 0.15);
}

.acc-btn:hover { background: #25407b; }

.acc-content {
    display: none;
    flex-direction: column;
    background: #ffffff;
    border-left: 3px solid #1a2e5a;
    margin-top: 5px;
    border-radius: 0 5px 5px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.sub-link {
    padding: 15px 20px;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 500;
    transition: 0.2s;
    font-size: 0.95rem;
}

.sub-link:last-child { border-bottom: none; }
.sub-link:hover { color: #1a2e5a; background-color: #f4f7fa; padding-left: 25px; }

.sub-link.active-sub {
    color: #1a2e5a;
    font-weight: 700;
    background-color: #f4f7fa;
    border-left: 4px solid #f1b418;
    padding-left: 21px;
}

/* Десна Страна - Картички */
.edu-display-area { flex: 1.2; }

.profile-card {
    display: none;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    padding: 30px;
    animation: fadeIn 0.4s ease;
}

.profile-card.active { display: block; }

.profile-img-wrap {
    position: relative;
    margin-bottom: 25px;
    border-radius: 10px;
}

.profile-img-wrap::before {
    content: '';
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 90%;
    height: 90%;
    background-color: #f1b418;
    border-radius: 10px;
    z-index: 1;
}

.profile-img-wrap img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    position: relative;
    z-index: 2;
}

.badge-blue { background: #e8eff9; color: #1a2e5a; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; margin-bottom: 10px; display: inline-block; }
.badge-yellow { background: #fdf5e0; color: #b38500; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; margin-bottom: 10px; display: inline-block; }

.profile-info h3 { color: #1a2e5a; font-size: 1.6rem; margin-bottom: 15px; }
.profile-info p { color: #666; line-height: 1.7; margin-bottom: 10px; }
/* --- СЕКЦИЈА ЗА НОВОСТИ --- */
/* --- СЕКЦИЈА ЗА НОВОСТИ (МОДЕРНИЗИРАНА) --- */
/* --- СЕКЦИЈА ЗА НОВОСТИ (ПОДОБРЕНА СО ПОТЕМНА ПОЗАДИНА) --- */
.news-section {
    padding: 80px 5%;
    background-color: #f2f4f6; /* Бледо сивкаста позадина за да се истакнат картичките */
    font-family: 'Montserrat', sans-serif;
}

.news-layout {
    display: flex;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
}

/* --- Лева страна - Листа со вести --- */
.news-sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.news-list-item {
    display: flex;
    gap: 15px;
    padding: 12px;
    background-color: #ffffff; /* Картичките остануваат бели */
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid #e0e0e0; /* Поистакната граница */
    border-left: 5px solid transparent;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); /* Нежна сенка */
}

.news-list-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* Посилна сенка на hover */
    border-left-color: #f1b418; /* Жолта граница на hover */
}

/* Активна вест од левата страна */
.news-list-item.active {
    background-color: #ffffff;
    border-left: 5px solid #f1b418;
    box-shadow: 0 10px 25px rgba(241, 180, 24, 0.2); /* Блага жолта сенка */
    transform: translateY(-3px);
}

/* Ефект на сликата при hover на картичката */
.news-list-item .img-wrapper {
    overflow: hidden;
    border-radius: 8px;
    flex-shrink: 0;
}

.news-list-item img {
    width: 110px;
    height: 85px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.5s ease;
}

.news-list-item:hover img, .news-list-item.active img {
    transform: scale(1.08);
}

.news-item-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-date {
    font-size: 0.75rem;
    color: #f1b418;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.news-item-text h4 {
    font-size: 1.05rem;
    color: #1a2e5a;
    margin: 0;
    line-height: 1.4;
    font-weight: 600;
}

/* Копче за сите новости */
.btn-all-news {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background-color: transparent;
    border: 2px solid #1a2e5a;
    color: #1a2e5a;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-all-news:hover {
    background-color: #1a2e5a;
    color: #ffffff;
    transform: translateX(5px);
}

/* --- Десна страна - Приказ на главната вест --- */
.news-display-area {
    flex: 1.6;
    background: #ffffff; /* Главната област останува бела */
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.06); /* Блага сенка */
    border: 1px solid #e0e0e0; /* Поистакната граница */
}

.news-content {
    display: none;
}

.news-content.active {
    display: block;
    animation: fadeUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.news-main-img {
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 25px;
}

.news-main-img img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.6s ease;
}

.news-content:hover .news-main-img img {
    transform: scale(1.03);
}

.news-date-large {
    display: inline-block;
    background: rgba(241, 180, 24, 0.1);
    color: #d49a0b;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.news-main-info h3 {
    font-size: 2rem;
    color: #1a2e5a;
    margin: 0 0 15px;
    line-height: 1.2;
}

.news-main-info p {
    color: #555;
    line-height: 1.8;
    font-size: 1.1rem;
}

/* Респонзивност */
@media (max-width: 992px) {
    .news-layout {
        flex-direction: column;
        gap: 40px;
    }
    .news-display-area {
        padding: 20px;
    }
    .news-main-img img {
        height: 300px;
    }
}

/* --- СТАТИСТИЧКА ХОРИЗОНТАЛНА ЛЕНТА --- */
.stats-horizontal-banner {
    background-color: #030757; /* Пупин Темно сина */
    padding: 30px 5%; /* Тенка лента, не зазема многу простор */
    border-top: 3px solid #f1b418; /* Жолта линија горе */
    border-bottom: 3px solid #f1b418; /* Жолта линија долу за естетска рамка */
}

/* Овој контејнер ги држи трите блока во ЕДНА ЛИНИЈА */
.stats-row-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;
}

/* Индивидуалниот блок (Видео + Текст) */
.stat-box-inline {
    display: flex;
    flex-direction: row; /* Видеото лево, текстот десно */
    align-items: center;
    gap: 20px;
    flex: 1; /* Прави сите 3 блока да имаат иста широчина */
    background: rgba(255, 255, 255, 0.05); /* Многу бледа транспарентна позадина */
    padding: 15px 25px;
    border-radius: 10px;
}

/* Коцката за видеото */
.stat-vid-mini {
    width: 110px;
    height: 75px;
    border: 2px solid #f1b418; /* Жолта рамка */
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0; /* Не дозволува видеото да се згмечи */
    background: #000; /* Црна позадина додека се вчита видеото */
}

.stat-vid-mini video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Го пополнува просторот без да се деформира */
}

/* Делот за текстот и бројките */
.stat-info-right {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #f1b418; /* Жолти бројки */
    line-height: 1;
    margin-bottom: 5px;
}

/* --- PARALLAX СЕКЦИЈА --- */
.parallax-section {
    /* ВАЖНО: Замени го линкот со твоја слика од училиштето (на пр. групна слика од ученици) */
    background-image: 
        /* Темен слој со Пупин-сина боја за читливост */
        linear-gradient(rgba(10, 25, 47, 0.7), rgba(10, 25, 47, 0.7)),
        /* Твојата слика */
        url('plavv.png');
    
    /* Ова го прави ефектот на "мрдање" додека скролаш */
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    /* Висина на секцијата и центрирање */
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}

/* Стил за насловот во средина */
.parallax-content h2 {
    color: #ffffff;
    font-size: 3rem;
    font-weight: 800;
    font-family: montserrat;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    padding: 20px;
    /* Силна сенка за да отскокнува од позадината */
    text-shadow: 2px 2px 20px rgba(0,0,0,0.7);
     /* Жолта линија под текстот за акцент */
    display: inline-block; /* За линијата да биде широка колку текстот */
}

/* --- ЗОШТО ПУПИН: ТЕКСТ И КАРТИЧКИ --- */
.why-choose-us-content {
    padding: 80px 5%;
    background-color: #ffffff;
}

.why-intro-text {
    max-width: 900px;
    margin: 0 auto 60px;
    text-align: center;
}

.why-intro-text p {
    font-size: 1.2rem;
    color: #444;
    line-height: 1.8;
    font-weight: 500;
}

/* Мрежата со 4 картички */
.why-reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Изгледот на секоја картичка */
.reason-box {
    background: #f9fbfd;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    border-bottom: 4px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.reason-box:hover {
    transform: translateY(-10px);
    border-bottom: 4px solid #f1b418; /* Жолтата линија се појавува на ховер */
    box-shadow: 0 15px 30px rgba(26, 46, 90, 0.08);
    background: #ffffff;
}

/* Иконите */
/* Иконите - НОВ ИЗГЛЕД */
.reason-icon {
    width: 70px;
    height: 70px;
    /* background: #e8eff9; <--- ОВА Е СТАРОТО СИВО ШТО ГО БРИШЕМЕ */
    
    background: #fff4d6; /* НОВО: Многу бледа златна позадина */
    color: #1a2e5a; /* Иконата внатре е темно сина */
    border: 1px solid #f1b418; /* НОВО: Тенка златна рамка за дефиниција */
    
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    margin: 0 auto 20px;
    transition: 0.3s;
}

/* Ховер ефектот останува ист - станува темно сино со жолта икона */
.reason-box:hover .reason-icon {
    background: #1a2e5a;
    color: #f1b418;
    border-color: #1a2e5a;
}

.reason-box h4 {
    font-size: 1.2rem;
    color: #1a2e5a;
    margin-bottom: 15px;
    font-weight: 700;
}

.reason-box p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* --- Респонзивност за мобилни --- */
@media (max-width: 768px) {
    /* На телефони parallax ефектот може да кочи, па го исклучуваме за подобро искуство */
    .parallax-section {
        background-attachment: scroll;
        height: 300px;
    }
    .parallax-content h2 {
        font-size: 2rem;
    }
}
.stat-label {
    font-size: 0.9rem;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* --- СЕКЦИЈА: МИСИЈА И ВИЗИЈА --- */
.mission-vision-section {
    padding: 100px 5%;
    background-color: #f4f7fa; /* Нежна позадина за да отскокнува главната картичка */
}

.mv-container {
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(26, 46, 90, 0.08); /* Сина мека сенка */
    overflow: hidden;
}

/* Лева страна (Сликата) */
.mv-image-col {
    flex: 1;
    position: relative;
    min-height: 400px;
}

.mv-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Десна страна (Содржината) */
.mv-content-col {
    flex: 1.2;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Контејнер за анимацијата */
.mv-slider-container {
    position: relative;
    min-height: 320px; /* Спречува да „скока“ висината */
}

/* Самите слајдови */
.mv-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateX(30px);
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.mv-slide.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    position: relative;
}

/* Дизајн на текстот */
.mv-step-badge {
    display: inline-block;
    background: #fff4d6;
    color: #b38500;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 0.9rem;
    border: 1px solid #f1b418;
}

.mv-step-badge span {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1a2e5a;
}

.mv-title {
    font-size: 2.2rem;

    color: #1a2e5a;
    margin-bottom: 35px;
    font-family: 'Montserrat';
    font-weight: 800;
}

.mv-item {
    margin-bottom: 25px;
    border-left: 4px solid #f1b418; /* Златна линија лево */
    padding-left: 20px;
}

.mv-item-title {
    font-size: 1.2rem;
    color: #1a2e5a;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-weight: 700;
}

.mv-item-title i {
    color: #f1b418;
}

.mv-item p {
    color: #666;
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Контроли (Копчиња и Прогрес лента) */
.mv-controls {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 20px;
}

.mv-btn {
    background: transparent;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    color: #1a2e5a;
    font-size: 1rem;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mv-btn:hover {
    border-color: #1a2e5a;
    background: #1a2e5a;
    color: #fff;
    transform: scale(1.05);
}

.mv-progress-bar {
    flex: 1;
    height: 4px;
    background: #e8eff9;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.mv-progress-fill {
    height: 100%;
    background: #f1b418;
    width: 50%; /* Почнува на пола бидејќи сме на първ слајд */
    transition: width 0.4s ease;
}

     /* ========================================== */
/* ОФИЦИЈАЛЕН ФУТЕР - CSS                     */
/* ========================================== */

/* 1. БАНЕР ЗА КОНТАКТ */
.footer-cta-banner {
    position: relative;
    background-image: url('https://mihajlopupin.edu.mk/wp-content/uploads/2023/08/mihajlopupinslikistrana_00005-e1692367348515.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
    padding: 35px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 4px solid #f1b418;
    border-bottom: 4px solid #f1b418;
}

.cta-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(14, 42, 71, 0.90);
    z-index: 1;
}

/* СОВРШЕНО ПОРАМНУВАЊЕ НА БАНЕРОТ СО ФУТЕРОТ */
.cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between; 
    width: 100%;
    max-width: 1200px; /* Ова го прави ист како футерот */
    margin: 0 auto; 
    padding: 0 5%; 
    box-sizing: border-box;
}

.cta-heading {
    margin: 0; 
    color: white; 
    text-align: left;
    line-height: 1.2;
}

.cta-serif {
    font-family: 'Times New Roman', Times, serif;
    font-size: 2.2rem;
    font-weight: bold;
    display: block;
}

.cta-italic {
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    color: #fca311;
    font-size: 1.6rem;
    font-weight: normal;
}

.btn-cta-contact {
    background-color: #fca311;
    color: #ffffff;
    padding: 12px 30px;
    font-weight: bold;
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: 4px;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(252, 163, 17, 0.3);
    white-space: nowrap; 
}

.btn-cta-contact:hover {
    background-color: #e08f09;
    transform: translateY(-3px);
}

/* 2. ГЛАВЕН ФУТЕР */
.complex-footer {
    background-color: #143058;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
}

.footer-grid-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.2fr 1fr;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 5% 50px;
}

.f-col h4 {
    color: #ffffff;
    font-size: 1.2rem;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}

.diamond-bullet { color: #fca311; font-size: 0.9rem; }

.f-about-text {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 25px;
    color: #bac4d1;
}

/* --- СОЦИЈАЛНИ МРЕЖИ ВО КРУГОВИ --- */
.f-social-modern {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.f-social-modern a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px; 
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(252, 163, 17, 0.4);
    border-radius: 50%;
    text-decoration: none;
    transition: 0.3s;
}

.f-social-modern a i {
    color: #fca311; /* Иконите се златни за да се гледаат */
    font-size: 1.1rem;
    transition: 0.3s;
}

.f-social-modern a:hover {
    background: #fca311;
    transform: translateY(-3px);
    border-color: #fca311;
}

.f-social-modern a:hover i {
    color: #143058;
}

/* --- ЛИНКОВИ --- */
.f-links { list-style: none; padding: 0; margin: 0; }
.f-links li { margin-bottom: 12px; }

.f-links a {
    color: #bac4d1;
    text-decoration: none;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}

.f-arrow { color: #fca311; font-size: 0.9rem; transition: 0.3s; }
.f-links a:hover { color: #ffffff; transform: translateX(5px); }

/* --- Е-БИЛТЕН (NEWSLETTER) --- */
.f-newsletter {
    display: flex;
    width: 100%;
    height: 45px;
    margin-top: 15px;
}

.f-newsletter input {
    flex: 1;
    padding: 0 15px;
    border: none;
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    font-size: 0.9rem;
    border-radius: 5px 0 0 5px;
    border: 1px solid rgba(255,255,255,0.1);
    border-right: none;
}

.f-newsletter input::placeholder { color: #8a9bb0; }

.f-newsletter button {
    width: 50px;
    border: none;
    background: #fca311;
    color: #143058;
    font-size: 1.2rem;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: 0.3s;
}

.f-newsletter button:hover { background: #e08f09; }

/* --- КОНТАКТ --- */
.f-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #bac4d1;
}

.f-contact-row i {
    color: #fca311;
    font-size: 1.2rem;
    margin-top: 4px;
}

.f-contact-row a { color: #ffffff; text-decoration: none; transition: 0.3s; }
.f-contact-row a:hover { color: #fca311; }

/* 3. ДОЛНА ЛЕНТА */
.footer-bottom-line {
    background-color: #0c1f3b;
    border-top: 1px solid rgba(255,255,255,0.05);
    position: relative;
}

.fb-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: #8a9bb0;
}

.fb-container b { color: #ffffff; }

.fb-center img { height: 40px; opacity: 0.9; }

/* Копче за горе */
.back-to-top-btn {
    position: absolute;
    right: 30px;
    bottom: 15px;
    width: 40px;
    height: 40px;
    background-color: #fca311;
    color: #143058;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
}

.back-to-top-btn:hover {
    background-color: #ffffff;
    transform: translateY(-3px);
}

/* Респонзивност */
@media (max-width: 992px) {
    .mv-container { flex-direction: column; }
    .mv-image-col { min-height: 300px; }
    .mv-content-col { padding: 40px 20px; }
    .mv-slider-container { min-height: 380px; }
}

/* Мобилна верзија - само на телефон ќе бидат едно под друго */
@media (max-width: 900px) {
    .stats-row-wrapper {
        flex-direction: column;
    }
    .stat-box-inline {
        width: 100%;
    }
}

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

@media (max-width: 992px) {
    .edu-layout { flex-direction: column; }
}

/* 6. РЕСПОНЗИВНОСТ */
@media screen and (max-width: 900px) {
    .nav-menu { display: none !important; }
    .menu-toggle { display: flex !important; }
    
    .header-container {
        padding: 15px 5%;
    }
}
/* ========================================== */
/* РЕСПОНЗИВНОСТ ЗА МОБИЛЕН (МОРА ДА Е НАЈДОЛУ)*/
/* ========================================== */

/* --- ЗА ТАБЛЕТИ (Под 992px) --- */
@media (max-width: 992px) {
    /* Футерот се собира во 2 колони */
    .footer-grid-container { 
        grid-template-columns: 1fr 1fr; 
        gap: 40px; 
    }
    /* Банерот се центрира */
    .cta-content { 
        flex-direction: column; 
        text-align: center; 
        justify-content: center; 
        gap: 20px;
    }
    .cta-heading { text-align: center; }
}

/* --- ЗА ТЕЛЕФОНИ / ВРАЌАЊЕ НА ХАМБУРГЕРОТ (Под 900px) --- */
@media (max-width: 900px) {
    /* Го крие компјутерското мени и го покажува хамбургерот */
    .nav-menu { display: none !important; }
    .menu-toggle { display: flex !important; }
    
    .header-container { padding: 15px 5%; }
    
    /* Ги реди статистиките (бројките) една под друга */
    .stats-row-wrapper { flex-direction: column; }
    .stat-box-inline { width: 100%; }
}

/* --- ЗА МАЛИ ТЕЛЕФОНИ (Под 600px) --- */
@media (max-width: 600px) {
    /* Футерот се собира во 1 колона (едно под друго) */
    .footer-grid-container { grid-template-columns: 1fr; }
    
    /* Долната лента се центрира */
    .fb-container { 
        flex-direction: column; 
        gap: 15px; 
        text-align: center; 
    }
    /* Се крие копчето за нагоре за да не смета на мал екран */
    .back-to-top-btn { display: none; }
}
html, body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    background-color: #000;
}
/* ВАКА ТРЕБА ДА ИЗГЛЕДА */
.slider-title h3::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px; /* ТУКА БЕШЕ ГРЕШКАТА (беше 800px) */
    height: 4px;
    background-color: #f1b418;
    border-radius: 2px;
}
/* ВАКА ТРЕБА ДА ИЗГЛЕДА */
.yellow-divider-left { 
    width: 200px; /* ТУКА БЕШЕ ГРЕШКАТА (беше 600px) */
    height: 4px; 
    background-color: #f1b418; 
    border-radius: 2px; 
    margin-bottom: 15px; 
}
/* ========================================== */
/* СТРАНИЧНА СКОРЛ НАВИГАЦИЈА (SCROLL SPY)    */
/* ========================================== */
.side-scroll-nav {
    position: fixed;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #143058;
    padding: 30px 15px;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 1px solid rgba(252, 163, 17, 0.2);
}

.side-scroll-nav.visible {
    opacity: 1;
    visibility: visible;
}

.nav-line {
    position: absolute;
    top: 40px;
    bottom: 40px;
    width: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.side-dot {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    text-decoration: none;
}

.side-dot span {
    display: block;
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    transition: 0.3s;
}

.side-dot.active span {
    background-color: #fca311;
}

.side-dot.active::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #fca311;
    border-radius: 50%;
    animation: popIn 0.3s ease;
}

@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.side-dot::after {
    content: attr(data-title);
    position: absolute;
    right: 40px;
    background-color: #143058;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif; /* Твојот фонт */
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: 0.3s;
    border: 1px solid rgba(252, 163, 17, 0.3);
}

.side-dot:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

@media (max-width: 1200px) {
    .side-scroll-nav { display: none; }
}
/* ========================================== */
/* СТРАНИЧНА СКОРЛ НАВИГАЦИЈА (SCROLL SPY)    */
/* ========================================== */
.side-scroll-nav {
    position: fixed;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #143058; /* Темно сината на Пупин */
    padding: 30px 15px;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 1px solid rgba(252, 163, 17, 0.2);
}

.side-scroll-nav.visible {
    opacity: 1;
    visibility: visible;
}

.nav-line {
    position: absolute;
    top: 40px;
    bottom: 40px;
    width: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.side-dot {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    text-decoration: none;
}

.side-dot span {
    display: block;
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    transition: 0.3s;
}

.side-dot.active span {
    background-color: #fca311; /* Златна */
}

.side-dot.active::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #fca311;
    border-radius: 50%;
    animation: popIn 0.3s ease;
}

@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.side-dot::after {
    content: attr(data-title);
    position: absolute;
    right: 40px;
    background-color: #143058;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: 0.3s;
    border: 1px solid rgba(252, 163, 17, 0.3);
}

.side-dot:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Криење на мали екрани за да не смета */
@media (max-width: 1200px) {
    .side-scroll-nav { display: none; }
}
.f-social-modern a {
    width: 45px;  /* Зголемено од 40px */
    height: 45px; /* Зголемено од 40px */
    font-size: 1.3rem; /* Зголемена иконата внатре */
    /* другото останува исто */
}
/*---------------------------------------------------------*/
/* ========================================== */
/* СТИЛОВИ ЗА ПОДСТРАНИЦИ (ЗА НАС, УПИСИ...)  */
/* ========================================== */

/* Универзален Банер за подстраници */
.subpage-banner {
    position: relative;
    width: 100%;
    height: 400px;
    background-image: url('mETA.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 80px; /* Простор за хедерот */
}

.banner-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 25, 47, 0.85); /* Темно сина Пупин боја */
}

.banner-content {
    position: relative;
    z-index: 2;
    color: white;
    max-width: 800px;
    padding: 0 20px;
}

.banner-content h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 15px;
    text-transform: uppercase;
    color: #f1b418;
}

.banner-content p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #e0e6ed;
}

/* Централен наслов за секции */
.section-header-center {
    text-align: center;
    margin-bottom: 50px;
}

.section-header-center h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    color: #1a2e5a;
    font-weight: 800;
}

.yellow-divider-center {
    width: 660px;
    height: 4px;
    background-color: #f1b418;
    margin: 15px auto;
    border-radius: 2px;
}

.section-header-center p {
    color: #666;
    font-size: 1.1rem;
}

/* Секција: Чекори за упис */
.enrollment-process {
    padding: 80px 5%;
    background-color: #f9fbfd;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.step-card {
    background: white;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-bottom: 4px solid transparent;
    transition: 0.3s;
}

.step-card:hover {
    transform: translateY(-10px);
    border-color: #f1b418;
}

.step-number {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a2e5a;
    color: white;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 800;
    border-radius: 50%;
    border: 4px solid #f9fbfd;
}

.step-icon {
    font-size: 2.5rem;
    color: #f1b418;
    margin: 20px 0;
}

.step-card h3 {
    color: #1a2e5a;
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.step-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Секција: Потребни Документи */
.required-documents {
    padding: 80px 5%;
    background-color: white;
}

.doc-container {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.doc-text { flex: 1; }

.doc-list {
    list-style: none;
    margin-top: 30px;
}

.doc-list li {
    font-size: 1.05rem;
    color: #444;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    line-height: 1.5;
}

.doc-list li i {
    color: #1aa54a; /* Зелена боја за "штиклирано" */
    font-size: 1.2rem;
    margin-top: 3px;
}

.mt-20 { margin-top: 20px; display: inline-block; }

.doc-image {
    flex: 1;
    position: relative;
}

.doc-image img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.doc-badge {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: #f1b418;
    color: #1a2e5a;
    padding: 20px 30px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 20px rgba(241, 180, 24, 0.3);
}

.doc-badge i { font-size: 1.8rem; }

/* Респонзивност */
@media (max-width: 992px) {
    .doc-container { flex-direction: column; }
    .banner-content h1 { font-size: 2.2rem; }
    .doc-badge { left: 50%; transform: translateX(-50%); bottom: -30px; width: 80%; justify-content: center; }
}
/* Секција: Чекори за упис */
.enrollment-process {
    padding: 80px 5%;
    background-color: #f9fbfd;
    /* ДОДАЈ ГО ОВА: */
    background-image: radial-gradient(#cbd5e1 0.8px, transparent 0.8px);
    background-size: 30px 30px;
}

/* Секција: Потребни Документи */
.required-documents {
    padding: 80px 5%;
    background-color: white;
     /* ДОДАЈ ГО ОВА: */
    background-image: radial-gradient(#e5e7eb 0.8px, transparent 0.8px);
    background-size: 30px 30px;
}
/* ========================================== */
/* ПРИЛОУДЕР - CSS, ТРЕПКАЊЕ И РАСКОШЕН РАДАР */
/* ========================================== */
/* ========================================== */
/* ПРИЛОУДЕР - CSS, ТРЕПКАЊЕ И РАСКОШЕН РАДАР */
/* ========================================== */
/* ========================================== */
/* ЕНЕРГЕТСКА КОНВЕРГЕНЦИЈА - CSS             */
/* ========================================== */
.pupin-preloader {  
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    /* Длабока вселенска позадина */
    background: radial-gradient(ellipse at center, #07286b 0%, #000000 100%);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    overflow: hidden;
}

.pupin-preloader.hidden { opacity: 0; visibility: hidden; }

.preloader-stage {
    position: relative;
    width: 80vw; height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- ЦЕНТРАЛЕН ДЕЛ (ИМЕ) --- */
.center-core {
    position: relative;
    z-index: 10;
    padding: 40px;
}

.core-title {
    font-family: 'Montserrat';
    font-size: 2.5rem;
    font-weight: 900;
    color: #c47c09; /* Основна златна */
    letter-spacing: 4px;
    text-align: center;
    line-height: 1.3;
    margin: 0;
    /* Почетен слаб сјај */
    text-shadow: 0 0 10px rgba(252, 163, 17, 0.3);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Класата за БУМ ефектот кога ќе стигнат линиите */
.core-title.fully-charged span {
    animation: none !important;
    color: #ffffff !important; /* Блескаво бело */
    /* Екстремен златен/син сјај */
    text-shadow: 
        0 0 15px #fff, 
        0 0 30px #fca311, 
        0 0 60px #fca311, 
        0 0 80px #00eaff !important; /* Малку сина за електрицитет */
    transform: scale(1.05); /* Малку се зголемува текстот од енергијата */
}

/* (Истите анимации за трепкање од претходно) */
.flicker-1 { animation: faultyFlicker1 2s linear infinite; }
.flicker-2 { animation: faultyFlicker2 3s linear infinite; }
.flicker-3 { animation: faultyFlicker3 1.5s linear infinite; }

/* --- ВИБРИРАЧКИ СИГНАЛИ ОКОЛУ ИМЕТО --- */
.signal-vibe {
    position: absolute;
    width: 60px; height: 60px;
}
.vibe-top-left { top: 0; left: 0; transform: rotate(-45deg); }
.vibe-bottom-right { bottom: 0; right: 0; transform: rotate(135deg); }

.wave {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 100%;
    border-top: 3px solid #d7e86a;
    border-radius: 50%;
    opacity: 0;
    animation: signalRipple 2s ease-out infinite;
}
/* Тајминг за брановите */
.vibe-top-left .w1 { animation-delay: 0s; } .vibe-top-left .w2 { animation-delay: 0.5s; } .vibe-top-left .w3 { animation-delay: 1s; }
.vibe-bottom-right .w1 { animation-delay: 0.2s; } .vibe-bottom-right .w2 { animation-delay: 0.7s; } .vibe-bottom-right .w3 { animation-delay: 1.2s; }

@keyframes signalRipple {
    0% { transform: scale(0.5) translateY(20px); opacity: 0; }
    50% { opacity: 0.8; }
    100% { transform: scale(1.5) translateY(-40px); opacity: 0; }
}

/* --- ПАТУВАЧКИ ЕНЕРГЕТСКИ ЛИНИИ --- */
.energy-stream {
    position: absolute;
    width: 300px; height: 200px; /* Дефинира област за линиите */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

/* Позиционирање и ротација на групите */
.stream-top-right {
    top: -100px; right: -100px;
    transform: rotate(-135deg); /* Ги насочуваме кон центарот */
}
.stream-bottom-left {
    bottom: -100px; left: -100px;
    transform: rotate(45deg); /* Ги насочуваме кон центарот */
}

/* Самите линии */
.e-line {
    height: 4px;
    width: 0%; /* Почнуваат со должина 0 */
    background: linear-gradient(90deg, transparent, #e6e455, #fff); /* Опаш од енергија */
    box-shadow: 0 0 10px #f58906;
    border-radius: 2px;
    /* Анимацијата на патување */
    animation: energyFlow 2.5s cubic-bezier(0.1, 0.6, 0.3, 1) forwards;
}

/* Различна брзина за секоја од 5-те линии за "органски" ефект */
.l1 { animation-delay: 0.2s; animation-duration: 2.4s; }
.l2 { animation-delay: 0.4s; animation-duration: 2.2s; }
.l3 { animation-delay: 0.1s; animation-duration: 2.5s; }
.l4 { animation-delay: 0.5s; animation-duration: 2.1s; }
.l5 { animation-delay: 0.3s; animation-duration: 2.3s; }

@keyframes energyFlow {
    0% { width: 0%; opacity: 0; transform: translateX(-50px); }
    20% { opacity: 1; }
    /* Во 2.5 секунда стигнуваат до центарот */
    100% { width: 150%; transform: translateX(100px); opacity: 0; } 
}

/* Респонзивност */
@media (max-width: 768px) {
    .core-title { font-size: 1.8rem; letter-spacing: 2px; }
    .energy-stream { width: 200px; }
}

/* ========================================== */
/* HIGH-TECH БРЗО МЕНИ - CSS                  */
/* ========================================== */
.corner-hub-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 998; /* Го држиме високо, но под прилоудерот */
    /* Ова додава сјај на целиот исечен елемент */
    filter: drop-shadow(2px -2px 10px rgba(252, 163, 17, 0.4));
}

/* Самиот правоаголен триаголник */
.corner-triangle {
    width: 90px;
    height: 90px;
    background: #fca311; /* Златната боја на Пупин */
    /* МАГИЈАТА: Го сече во правоаголен триаголник во долниот лев агол */
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

/* Иконата (молња) внатре во триаголникот */
.corner-triangle i {
    position: absolute;
    bottom: 15px;
    left: 15px;
    font-size: 1.8rem;
    color: #143058; /* Темно сина */
    animation: hubPulse 1.5s infinite alternate;
}

@keyframes hubPulse {
    0% { transform: scale(1); text-shadow: 0 0 0 transparent; }
    100% { transform: scale(1.15); text-shadow: 0 0 15px #ffffff; color: #ffffff; }
}

/* Ховер ефект на самиот триаголник */
.corner-hub-wrapper:hover .corner-triangle {
    background: #ffffff;
}
.corner-hub-wrapper:hover .corner-triangle i {
    color: #ff4000;
}

/* --- МЕНИТО ШТО ИСКАЧА --- */
.corner-menu {
    position: absolute;
    bottom: 20px;
    left: 80px; /* Почнува веднаш до триаголникот */
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Скриено по дифолт */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-30px) scale(0.9);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: bottom left;
}

/* Се појавува кога ќе поминеш со маус врз триаголникот */
.corner-hub-wrapper:hover .corner-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
}

.corner-menu-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    color: #fca311;
    font-weight: 800;
    margin-left: 10px;
    letter-spacing: 1px;
}

.corner-menu a {
    background: #143058;
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 3px solid #fff202;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: 0.3s;
    white-space: nowrap; /* Спречува кршење на текстот во два реда */
}

/* Ховер на линковите внатре во менито */
.corner-menu a:hover {
    background: #fca311;
    color: #143058;
    border-left: 3px solid #ffffff;
    transform: translateX(10px); /* Благо се поместува надесно */
}

/* Да се скрие на многу мали екрани за да не пречи */
@media (max-width: 768px) {
    .corner-hub-wrapper {
        display: none; 
    }
}
/* ========================================== */
/* "INNOVATION SPARK" СИЈАЛИЧКА - CSS         */
/* ========================================== */
.idea-spark-wrapper {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 995; /* Над футерот, но под менијата */
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Порамнување десно */
}

/* --- КОПЧЕТО СИЈАЛИЧКА (ТРИГЕР) --- */
.idea-bulb-trigger {
    width: 65px;
    height: 65px;
    background: #fca311; /* Пупин златна */
    border-radius: 50%; /* Совршен круг */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    box-shadow: 0 5px 15px rgba(252, 163, 17, 0.4);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}

.bulb-icon {
    font-size: 1.8rem;
    color: #143058; /* Темно сина */
    transition: 0.3s;
    z-index: 2;
}

/* Ефект на пулсирачка светлина околу сијалицата */
.bulb-glow {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: rgba(252, 163, 17, 0.6);
    z-index: 1;
    animation: bulbPulse 2s infinite;
}

@keyframes bulbPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; } /* Се шири и исчезнува */
}

/* Ховер ефект на сијалицата */
.idea-bulb-trigger:hover {
    transform: scale(1.1) rotate(10deg); /* Малку се зголемува и врти */
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(252, 163, 17, 0.6);
}
.idea-bulb-trigger:hover .bulb-icon {
    color: #fca311;
}

/* --- КУТИЈАТА СО ПОРАКА --- */
.idea-message-box {
    background: #143058; /* Темно сина позадина */
    color: #ffffff;
    padding: 20px 25px;
    border-radius: 15px;
    margin-bottom: 20px; /* Простор над сијалицата */
    max-width: 300px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border: 2px solid #fca311;
    /* Почетна состојба: Скриено */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* "Скокачка" анимација */
}

/* Класата што ја додаваме со JS за да се појави */
.idea-message-box.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.message-content {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.message-icon {
    font-size: 1.5rem;
    color: #fca311;
    margin-top: 5px;
}

.message-content p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    font-family: 'Inter', sans-serif;
}

.message-content strong {
    color: #fca311;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* Малото опавче што покажува кон сијалицата */
.box-tail {
    position: absolute;
    bottom: -10px;
    right: 25px;
    width: 20px;
    height: 20px;
    background: #143058;
    border-bottom: 2px solid #fca311;
    border-right: 2px solid #fca311;
    transform: rotate(45deg);
}

/* ========================================== */
/* 2. НАСТАВЕН КАДАР - МИНИМАЛИЗАМ            */
/* ========================================== */
.premium-staff {
    padding: 100px 5%;
    background-color: #f9fbfd; /* Многу нежна светла позадина */
}

.staff-category-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    color: #143058;
    border-bottom: 2px solid #e0e6ed;
    padding-bottom: 10px;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mt-50 { margin-top: 60px; }

/* Грид за 5 колони на голем екран */
.staff-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
}

.staff-member {
    text-align: center;
    transition: transform 0.3s ease;
}

.staff-member:hover {
    transform: translateY(-8px);
}

/* Сликата (Без комплицирани картички, само чисто) */
.staff-img-box {
    width: 100%;
    aspect-ratio: 3/4; /* Совршена пропорција за портрети */
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
    background-color: #eef2f6; /* Placeholder боја ако нема слика */
    box-shadow: 0 10px 20px rgba(0,0,0,0.06);
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.staff-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%); /* Суптилно сивило за професионалност */
    transition: 0.4s ease;
}

.staff-member:hover .staff-img-box {
    border-color: #fca311; /* Златна рамка на ховер */
    box-shadow: 0 15px 30px rgba(252, 163, 17, 0.15);
}

.staff-member:hover .staff-img-box img {
    filter: grayscale(0%); /* Станува целосно во боја */
    transform: scale(1.05);
}

.staff-member h4 {
    font-family: 'Inter', sans-serif;
    color: #1a2e5a;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.staff-role {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 8px;
    line-height: 1.4;
}

.staff-email {
    font-size: 0.8rem;
    color: #fca311;
    text-decoration: none;
    font-weight: 600;
}

.staff-email:hover { text-decoration: underline; }

/* Респонзивност */
@media (max-width: 1200px) { .staff-grid-5 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 992px) { .staff-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
    .staff-grid-5 { grid-template-columns: repeat(2, 1fr); }
    .circuit-line { left: 30px; }
    .circuit-timeline::before { left: 30px; }
    .circuit-node { flex-direction: column !important; padding-left: 60px; position: relative; }
    .node-dot { position: absolute; left: 18px; top: 20px; }
    .node-content { width: 100%; text-align: left !important; }
    .left-node .node-year { left: auto; right: 20px; }
}
@media (max-width: 480px) { .staff-grid-5 { grid-template-columns: repeat(1, 1fr); } }

/* ========================================== */
/* ИСТОРИЈА - ТЕМНА РАЗГРАНЕТА ЛИНИЈА         */
/* ========================================== */
.branch-history-section.dark-mode {
    padding: 100px 5%;
    background: #0a1128; /* Темно сина Пупин боја */
}

.text-white { color: #ffffff !important; }

.branch-timeline {
    position: relative;
    max-width: 900px;
    margin: 60px auto 0;
    padding: 20px 0;
}

/* Централната тенка линија */
.branch-timeline::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 50%; width: 2px; 
    background: rgba(255, 255, 255, 0.1); /* Темна линија */
    transform: translateX(-50%);
}

.branch-item {
    position: relative;
    width: 50%;
    padding: 30px 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.branch-item.left { left: 0; justify-content: flex-end; text-align: right; }
.branch-item.right { left: 50%; justify-content: flex-start; text-align: left; }

/* --- МАГИЈАТА ЗА КРУГЧИЊАТА --- */
.branch-dot {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: #0a1128;
    border: 3px solid #fca311;
    border-radius: 50%;
    z-index: 5;
    cursor: pointer;
    /* Анимација за пулсирање */
    animation: pulseGlow 2s infinite;
    transition: 0.3s;
}

/* Кога ќе поминеш со маус врз кругчето, тоа се пали */
.branch-dot:hover {
    background: #fca311;
    transform: translateY(-50%) scale(1.3);
    box-shadow: 0 0 20px #fca311;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(252, 163, 17, 0.6); }
    70% { box-shadow: 0 0 0 15px rgba(252, 163, 17, 0); }
    100% { box-shadow: 0 0 0 0 rgba(252, 163, 17, 0); }
}

.branch-item.left .branch-dot { right: -11px; }
.branch-item.right .branch-dot { left: -11px; }

/* --- СЛИКАТА ШТО СЕ ПОЈАВУВА НА ХОВЕР --- */
/* --- СЛИКАТА ШТО СЕ ПОЈАВУВА НА ХОВЕР --- */
.hover-image-popup {
    position: absolute;
    width: 220px; /* Малку ја зголемив за да изгледа помоќно во празниот простор */
    height: 140px;
    border-radius: 8px;
    border: 2px solid #fca311;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
    pointer-events: none; /* За да не пречи на маусот */
}

.hover-image-popup img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================== */
/* ПОЗИЦИОНИРАЊЕ НА СПРОТИВНАТА СТРАНА        */
/* ========================================== */

/* 1. Ако картичката е ЛЕВО -> Сликата излегува ДЕСНО од кругчето */
.branch-item.left .hover-image-popup { 
    top: 50%; 
    left: 45px; /* Ја туркаме во десната празнина */
    right: auto;
    transform: translateY(-50%) translateX(-20px) scale(0.8);
}

/* 2. Ако картичката е ДЕСНО -> Сликата излегува ЛЕВО од кругчето */
.branch-item.right .hover-image-popup { 
    top: 50%; 
    right: 45px; /* Ја туркаме во левата празнина */
    left: auto;
    transform: translateY(-50%) translateX(20px) scale(0.8);
}

/* Прикажување на сликата на ховер (Мазно доаѓа на место) */
.branch-item.left .branch-dot:hover .hover-image-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
}

.branch-item.right .branch-dot:hover .hover-image-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
}

/* --- ТЕМНИ КАРТИЧКИ --- */
.branch-card {
    background: #111c33; 
    padding: 25px 35px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border-left: 4px solid #fca311;
    width: 100%;
    max-width: 420px;
    transition: 0.3s ease;
}

.branch-card:hover { transform: translateY(-5px); border-color: #ffffff; }

.branch-year { display: block; color: #fca311; font-weight: 800; font-size: 1.2rem; margin-bottom: 8px; }
.branch-title { font-family: 'Montserrat', sans-serif; color: #ffffff; font-size: 1.3rem; margin-bottom: 12px; font-weight: 700; }
.branch-card p { color: #a1aab8; font-size: 0.95rem; margin: 0; line-height: 1.6; }

/* Респонзивност */
/* ========================================== */
/* РЕСПОНЗИВНОСТ ЗА МОБИЛЕН ТЕЛЕФОН           */
/* ========================================== */
@media (max-width: 768px) {
    .branch-timeline::before { 
        left: 30px; 
    }
    .branch-item { 
        width: 100%; 
        padding-left: 70px; 
        padding-right: 20px; 
    }
    .branch-item.left, 
    .branch-item.right { 
        left: 0; 
        justify-content: flex-start; 
        text-align: left; 
    }
    .branch-item.left .branch-dot, 
    .branch-item.right .branch-dot { 
        left: 19px; 
        right: auto; 
    }
    
    /* РЕШЕНИЕТО: Ги гасиме лебдечките слики на мобилен */
    .hover-image-popup {
        display: none !important;
    }
}
/* ========================================== */
/* КОМПАКТНА СЕКЦИЈА (ИНФО + МИСИЈА/ВИЗИЈА)   */
/* ========================================== */
.compact-info-section {
    padding: 70px 5%; /* Помало растојание горе-долу за да биде компактно */
    background: #f8fafc; /* Многу нежна светла позадина */
}

/* Делиме на 3 колони: Првата е поголема (за текстот), другите две се помали */
.compact-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr;
    gap: 30px;
    align-items: stretch;
    max-width: 1200px;
    margin: 0 auto;
}

/* Текстот лево */
.info-text-box {
    padding: 20px 40px 20px 0; /* Простор само од десно за да не се лепи до картичките */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.compact-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem;
    color: #143058;
    font-weight: 800;
    margin-bottom: 10px;
}

.yellow-line-short {
    width: 60px;
    height: 4px;
    background: #fca311;
    margin-bottom: 20px;
    border-radius: 2px;
}

.info-text-box p {
    color: #555;
    line-height: 1.7;
    font-size: 1.05rem;
    margin: 0;
}

/* Малите картички за Мисија и Визија */
.mv-mini-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.04);
    border-top: 3px solid transparent; /* Подготовка за ховер линијата */
    transition: all 0.3s ease;
}

.mv-mini-card:hover {
    transform: translateY(-5px);
    border-top-color: #fca311;
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.mini-icon {
    width: 50px;
    height: 50px;
    background: #fef5e0; /* Многу светло жолта */
    color: #fca311;
    font-size: 1.4rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.mv-mini-card h4 {
    color: #143058;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.mv-mini-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Респонзивност за мобилен */
@media (max-width: 992px) {
    .compact-grid {
        grid-template-columns: 1fr; /* На мали екрани сè оди во една колона */
        gap: 20px;
    }
    .info-text-box {
        padding: 0 0 20px 0;
        text-align: center;
        align-items: center;
    }
}
/* ========================================== */
/* СТРУКИ И ПРОФИЛИ - ТЕХНОЛОШКИ КАРТИЧКИ     */
/* ========================================== */

.profiles-section {
    padding: 100px 5%;
}

.bg-light { background-color: #f4f7fa; }
.dark-mode-profiles { background-color: #0a1128; } /* Темно сина */

.text-white { color: #ffffff !important; }
.text-light-gray { color: #a1aab8 !important; }

/* Мрежата за картичките */
.tech-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Самата картичка */
.tech-card {
    background: #ffffff;
    border-radius: 15px;
    padding: 40px 30px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-top: 4px solid #e0e6ed;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    z-index: 1;
}

/* Ховер ефектот на картичката */
.tech-card:hover {
    transform: translateY(-15px);
    border-top-color: #fca311;
    box-shadow: 0 20px 40px rgba(252, 163, 17, 0.15);
}

/* Темната верзија на картичката (За 3 години) */
.dark-card {
    background: #111c33;
    border-top-color: #1a2e5a;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.dark-card:hover { box-shadow: 0 20px 40px rgba(252, 163, 17, 0.2); border-top-color: #fca311;}

/* Иконата горе */
.tc-icon-wrapper {
    width: 80px;
    height: 80px;
    background: #f9fbfd;
    border: 2px solid #e0e6ed;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    transition: 0.4s;
    /* Се местиме да "крши" малку од картичката */
    margin-top: -20px; 
}

.dark-card .tc-icon-wrapper {
    background: #0a1128;
    border-color: #1a2e5a;
}

.tc-icon-wrapper i {
    font-size: 2.2rem;
    color: #143058;
    transition: 0.4s;
}
.dark-card .tc-icon-wrapper i { color: #ffffff; }

/* На ховер иконата станува жолта и свети */
.tech-card:hover .tc-icon-wrapper {
    background: #143058;
    border-color: #fca311;
    transform: scale(1.1) rotate(5deg);
}
.tech-card:hover .tc-icon-wrapper i { color: #fca311; }

/* Беџови (Најбарано, Иновативно...) */
.tc-badge {
    position: absolute;
    top: 25px;
    right: 25px;
    background: #fff4d6;
    color: #b38500;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 20px;
}
.blue-badge { background: #e8eff9; color: #1a2e5a; }
.green-badge { background: #e6f4ea; color: #1aa54a; }

/* Текстот во картичката */
.tc-content h3 {
    font-family: 'Montserrat', sans-serif;
    color: #143058;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.3;
}

.tc-desc {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1; /* Ја бутка листата надолу за сите картички да се исти */
}

/* Листата на предмети / карактеристики */
.tc-features {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #eef2f6;
    padding-top: 20px;
}

.dark-card .tc-features { border-top-color: rgba(255,255,255,0.1); }

.tc-features li {
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.tc-features li i {
    color: #fca311;
    margin-top: 3px;
}

/* Call to Action на дното */
.enrollment-cta {
    text-align: center;
    margin-top: 80px;
    padding: 40px;
    background: rgba(255,255,255,0.05);
    border: 1px dashed rgba(252, 163, 17, 0.3);
    border-radius: 15px;
}

.enrollment-cta h3 { color: white; font-family: 'Montserrat'; font-size: 1.8rem; margin-bottom: 10px;}
.enrollment-cta p { color: #bac4d1; margin-bottom: 25px; }

/* Респонзивност */
@media (max-width: 768px) {
    .tech-cards-grid { grid-template-columns: 1fr; }
    .tc-badge { top: 15px; right: 15px; }
}

/* ========================================== */
/* ЧИСТ ПРЕЛОАДЕР ЗА СТРУКИ                   */
/* ========================================== */
#clean-struki-preloader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    background-color: #050814; /* Темна, чиста Пупин позадина */
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.csp-content {
    text-align: center;
    width: 100%;
    padding: 0 20px;
}

.csp-title {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 6px; /* Многу простор меѓу буквите за елеганција */
    margin-bottom: 50px;
    opacity: 0;
    animation: fadeInTitle 1s ease forwards;
}

.csp-sequence {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Простор меѓу елементите */
    max-width: 800px;
    margin: 0 auto;
}

/* Чекорите (Иконите) */
.csp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0.2; /* Почетно се изгаснати */
    transform: translateY(10px);
}

.csp-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: #ffffff;
    transition: 0.4s ease;
}

.csp-label {
    color: #8a9bb0;
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Линиите меѓу иконите */
.csp-line {
    height: 2px;
    width: 60px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    margin-bottom: 25px; /* За да биде во линија со иконите, а не со текстот долу */
}

/* Анимирање на светлото низ линијата */
.csp-line::after {
    content: '';
    position: absolute;
    top: 0; left: 0; height: 100%; width: 0%;
    background: #fca311;
    box-shadow: 0 0 10px #fca311;
}

/* ========================================== */
/* АНИМАЦИИ (РЕДОСЛЕД НА ПАЛЕЊЕ)              */
/* ========================================== */

/* Анимација за палење на иконата */
@keyframes lightUpStep {
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes lightUpIcon {
    100% {
        background: rgba(252, 163, 17, 0.1);
        border-color: #fca311;
        color: #fca311;
        box-shadow: 0 0 20px rgba(252, 163, 17, 0.4);
    }
}
@keyframes drawLine {
    100% { width: 100%; }
}
@keyframes fadeInTitle {
    100% { opacity: 1; }
}

/* Времиња (Тајминг) */
/* 1. Се пали КТА */
#step-kta { animation: lightUpStep 0.5s ease forwards 0.5s; }
#step-kta .csp-icon { animation: lightUpIcon 0.5s ease forwards 0.5s; }

/* 2. Линија 1 се црта */
.line-1::after { animation: drawLine 0.4s linear forwards 1s; }

/* 3. Се пали ЕТ */
#step-et { animation: lightUpStep 0.5s ease forwards 1.4s; }
#step-et .csp-icon { animation: lightUpIcon 0.5s ease forwards 1.4s; }

/* 4. Линија 2 се црта */
.line-2::after { animation: drawLine 0.4s linear forwards 1.9s; }

/* 5. Се пали ЕЕ */
#step-ee { animation: lightUpStep 0.5s ease forwards 2.3s; }
#step-ee .csp-icon { animation: lightUpIcon 0.5s ease forwards 2.3s; }

/* 6. Линија 3 се црта */
.line-3::after { animation: drawLine 0.4s linear forwards 2.8s; }

/* 7. Се палат ЗАНАЕТИ */
#step-zan { animation: lightUpStep 0.5s ease forwards 3.2s; }
#step-zan .csp-icon { animation: lightUpIcon 0.5s ease forwards 3.2s; }

/* Респонзивност за мобилен */
@media (max-width: 768px) {
    .csp-title { font-size: 1.4rem; letter-spacing: 3px; margin-bottom: 40px; }
    .csp-sequence { gap: 8px; }
    .csp-icon { width: 45px; height: 45px; font-size: 1.1rem; }
    .csp-line { width: 30px; margin-bottom: 20px; }
    .csp-label { font-size: 0.7rem; }
}
/* ========================================== */
/* ЗАВРШЕН ИСПИТ - АКАДЕМСКИ ДИЗАЈН И ПАРАЛАКС*/
/* ========================================== */

.exam-intro-section, .exam-details-section {
    padding: 70px 5%;
}

.exam-container {
    max-width: 1100px;
    margin: 0 auto;
}

.bg-light { background-color: #f8fafc; }

.exam-intro-text .lead-text {
    font-size: 1.2rem;
    color: #143058;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 20px;
}

.exam-intro-text p { 
    color: #555; 
    line-height: 1.7; 
    font-size: 1.05rem; 
    margin-bottom: 30px;
}

/* Alert Кутии (Известувања) */
.alert-box {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.danger-alert {
    background-color: #fff0f0;
    border-left: 5px solid #ff4d4d;
}

.warning-alert {
    background-color: #fffbeb;
    border-left: 5px solid #fca311;
}

.alert-icon { font-size: 2rem; margin-top: 5px; }
.danger-alert .alert-icon { color: #ff4d4d; }

.alert-content h4 { color: #cc0000; margin-bottom: 5px; font-size: 1.2rem; }
.alert-content p { margin: 0; color: #333; }

.sm-alert { padding: 15px 20px; font-size: 0.95rem; line-height: 1.5; color: #555; }

/* ЕДИНСТВЕН БЛОК ЗА РЕДОВНИ И ВОНРЕДНИ */
.unified-exam-block {
    display: flex;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); /* Убава длабока сенка */
    border: 1px solid #e0e6ed;
    margin-top: 40px;
    overflow: hidden; /* За да се задржат заоблените агли */
}

.exam-col {
    flex: 1; /* И двете страни земаат по 50% од просторот */
    padding: 40px 50px;
}

/* Левата страна (Редовни) е целосно бела */
.exam-left {
    border-right: 1px solid #e0e6ed; /* Тенка линија во средината */
    background: #ffffff;
}

/* Десната страна (Вонредни) има многу нежна сива/синкава позадина */
.exam-right {
    background: #f8fafc;
}

.card-header-badge {
    display: inline-block;
    background: #e8eff9;
    color: #143058;
    padding: 6px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 20px;
}
.dark-badge { background: #143058; color: #ffffff; }

.card-desc { color: #666; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.5; }

/* Документи копчиња */
.document-links-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
}

.doc-download-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f4f7fa;
    color: #143058;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: 0.3s;
    border: 1px solid transparent;
}

.doc-download-btn i { color: #fca311; font-size: 1.2rem; }
.doc-download-btn:hover { background: #ffffff; border-color: #fca311; box-shadow: 0 4px 10px rgba(252, 163, 17, 0.1); transform: translateX(5px); }

.info-list p { margin-bottom: 10px; font-size: 0.95rem; color: #555; }
.info-list i { width: 20px; color: #143058; text-align: center; margin-right: 5px; }
.text-green { color: #1aa54a !important; }

/* Слика од Уплатница */
.uplatnica-preview {
    margin-top: 15px;
    border: 2px dashed #d1d9e6;
    border-radius: 8px;
    padding: 10px;
    background: #ffffff;
}
.uplatnica-preview img { width: 100%; height: auto; border-radius: 4px; }

/* Спроведување и предмети */
.exam-subtitle { font-family: 'Montserrat', sans-serif; font-size: 1.8rem; color: #143058; margin-bottom: 20px; }
.mt-50 { margin-top: 50px; }
.mt-30 { margin-top: 30px; }
.mt-10 { margin-top: 10px; }

.subject-box {
    background: #ffffff;
    padding: 25px;
    border-radius: 10px;
    border-left: 4px solid #143058;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.mandatory-box { border-left-color: #ff4d4d; }
.info-box { border-left-color: #fca311; }

.subject-box h4 { font-size: 1.2rem; color: #143058; margin-bottom: 10px; }
.subject-box p { color: #555; margin: 0; }

/* Изборни предмети Грид */
.elective-subjects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.elective-box {
    background: #ffffff;
    padding: 25px;
    border-radius: 10px;
    border-top: 3px solid #e0e6ed;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.profile-color-1 { color: #007bff; font-size: 1.1rem; margin-bottom: 5px; }
.profile-color-2 { color: #1aa54a; font-size: 1.1rem; margin-bottom: 5px; }
.profile-color-3 { color: #ff8c00; font-size: 1.1rem; margin-bottom: 5px; }

.sub-text { font-size: 0.9rem; color: #888; margin-bottom: 15px; }

.clean-ul { list-style: none; padding: 0; margin: 0 0 20px 0; }
.clean-ul li { font-size: 0.95rem; color: #555; margin-bottom: 10px; padding-left: 15px; position: relative; }
.clean-ul li::before { content: '•'; color: #fca311; position: absolute; left: 0; font-weight: bold; }

.text-link-dl { color: #143058; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: 0.3s; }
.text-link-dl:hover { color: #fca311; }

/* --- ФИКС ЗА ПРОЕКТНА ЗАДАЧА (БЕЛИ БУКВИ) --- */
.project-task-box {
    background: #071342 !important; /* Темно сина позадина */
    padding: 30px !important;
    border-radius: 12px !important;
    margin-top: 30px !important;
    display: block !important;
}

/* Присилно златен наслов */
.project-task-box h4 { 
    color: #fca311 !important; 
    margin-bottom: 10px !important; 
    font-size: 1.3rem !important; 
}

/* Присилно бели букви за текстот */
.project-task-box p { 
    color: #ffffff !important; 
    line-height: 1.6 !important; 
    margin-bottom: 20px !important; 
}

/* ФИКС ЗА КОПЧЕТО (ЛИНКОТ) - ОВА Е ДЕЛОТ ШТО ТИ БИЛ ПЛАВ */
.project-task-box a.btn-outline-small {
    color: #fca311 !important; /* Текстот на линкот да е златен */
    border: 1px solid #fca311 !important;
    text-decoration: none !important;
    padding: 10px 20px !important;
    display: inline-block !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* Ховер ефект за копчето */
.project-task-box a.btn-outline-small:hover {
    background: #fca311 !important;
    color: #071342 !important; /* Буквите стануваат темно сини на ховер */
}

/* Иконата внатре во копчето да ја следи бојата на текстот */
.project-task-box a.btn-outline-small i {
    color: inherit !important;
}

.btn-outline-small {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid #fca311;
    color: #fca311;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: 0.3s;
}
.btn-outline-small:hover { background: #fca311; color: #143058; }

/* Дополнителни линкови долу */
.extra-links-flex {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.extra-doc-link {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: #eed302;
    padding: 15px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.extra-doc-link i { color: #fca311; font-size: 1.2rem; }
.extra-doc-link:hover { background: #143058; color: #ffffff; transform: translateY(-3px); }

/* ========================================== */
/* ПАРАЛАКС ЕФЕКТИ ЗА ЗАВРШЕН ИСПИТ           */
/* ========================================== */

/* Паралакс на почетокот (Интро) */
.parallax-exam-intro {
    background-image: 
        linear-gradient(rgba(10, 25, 47, 0.90), rgba(10, 25, 47, 0.90)), 
        url('https://mihajlopupin.edu.mk/wp-content/uploads/2023/08/mihajlopupinslikistrana_00005-e1692367348515.jpg');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    border-bottom: 4px solid #fca311;
}

.parallax-exam-intro .lead-text {
    color: #ffffff !important;
    font-size: 1.3rem;
}
.parallax-exam-intro p {
    color: #bac4d1 !important;
}

/* Паралакс на крајот (Дополнителни информации) */
.parallax-exam-outro {
    background-image: 
        linear-gradient(rgba(13, 62, 137, 0.93), rgba(10, 25, 47, 0.93)), 
        url('https://scontent.fskp2-1.fna.fbcdn.net/v/t1.6435-9/60410228_2267753319951131_3354549533269819392_n.jpg?_nc_cat=103&ccb=1-7&_nc_sid=7b2446&_nc_ohc=kbK8bz0AVcoQ7kNvwEVcOU1&_nc_oc=AdmKn8j8VYwtDHCsm9VPuSDJ1G4RwXzaQPCm4qcRLWFpRW67Bdz2GoMvlMFZRi7RqC8&_nc_zt=23&_nc_ht=scontent.fskp2-1.fna&_nc_gid=s0GcZpl2I9aHTZFeiCTERQ&oh=00_AfvIOY1EXhOVCWqj7vQs0LZLS-8-kgeYqpEq6WxJ2sN3vw&oe=69C40E30');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    border-top: 4px solid #fca311;
}

.parallax-exam-outro .exam-subtitle {
    color: #fca311 !important;
}
.parallax-exam-outro p {
    color: #ffffff !important;
}

/* ========================================== */
/* РЕСПОНЗИВНОСТ ЗА ЗАВРШЕН ИСПИТ             */
/* ========================================== */
@media (max-width: 992px) {
    .unified-exam-block { flex-direction: column; }
    .exam-left { border-right: none; border-bottom: 1px solid #e0e6ed; padding: 30px 20px; }
    .exam-right { padding: 30px 20px; }
    .extra-links-flex { flex-direction: column; }
}

@media (max-width: 768px) {
    /* На мобилен го гасиме фиксниот паралакс за да не кочи */
    .parallax-exam-intro, .parallax-exam-outro {
        background-attachment: scroll;
    }
}

/* Ова директно ја менува позадината на секцијата што ми ја прати */
section.exam-details-section {
    background-color: #ffffff !important; /* Бела позадина */
    color: #333333 !important; /* Темен текст за да се чита на бело */
}

/* Ова ги средува насловите и текстот внатре да не бидат бели (бидејќи на бела позадина нема да се гледаат) */
section.exam-details-section h2, 
section.exam-details-section h4, 
section.exam-details-section p {
    color: #143058 !important; /* Темно сина боја */
}

/* Средување на описот во картичките */
section.exam-details-section .card-desc {
    color: #555555 !important;
}/* АНИМАЦИЈА ЗА ВЕЕЊЕ НА ЗНАМЕТО */
@keyframes waveEffect {
    0%, 100% { 
        transform: rotateY(0deg) skewY(0deg); 
    }
    50% { 
        transform: rotateY(20deg) skewY(-2deg); 
    }
}

/* Респонзивност - на мобилен ги редиме едно под друго за да не биде тесно */
@media (max-width: 650px) {
    .mandatory-box { 
        flex-direction: column !important; 
        text-align: center !important; 
    }
    .flag-side-container { 
        margin-left: 0 !important; 
        margin-top: 30px !important; 
        width: 140px !important; 
    }
}
/* --- СТИЛ ЗА ЕКЗАМ ПРЕЛОАДЕР --- */
#exam-preloader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    background: radial-gradient(circle, #226bd3 0%, #182558 100%); /* Длабока сина */
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.6s ease;
}

.preloader-content { text-align: center; }

/* Иконата со скенер */
.exam-icon {
    font-size: 5rem;
    color: #fca311; /* Златна */
    position: relative;
    margin-bottom: 20px;
    display: inline-block;
}

.scan-line {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px #ffffff;
    animation: scanning 2s infinite ease-in-out;
}

@keyframes scanning {
    0%, 100% { top: 0; opacity: 0; }
    50% { top: 100%; opacity: 1; }
}

/* Анимиран текст */
.loading-text {
    font-family: 'Montserrat';
    font-weight: 900;
    font-size: 1.5rem;
    color: #ffffff;
    letter-spacing: 5px;
    margin-bottom: 15px;
}

.letter {
    display: inline-block;
    animation: letterGlow 2s infinite;
}

@keyframes letterGlow {
    0%, 100% { opacity: 0.3; transform: translateY(0); color: #fff; }
    50% { opacity: 1; transform: translateY(-5px); color: #fca311; }
}

/* Прогрес лента */
.progress-container {
    width: 250px; height: 6px;
    background: rgba(2, 213, 255, 0.1);
    border-radius: 10px;
    margin: 0 auto 15px;
    overflow: hidden;
}

.progress-bar {
    width: 0%; height: 100%;
    background: #ff5e00;
    box-shadow: 0 0 10px #fca311;
    animation: fillBar 2.5s forwards ease-in-out;
}

@keyframes fillBar {
    0% { width: 0%; }
    100% { width: 100%; }
}

.status-msg {
    color: #bac4d1;
    font-size: 0.9rem;
    font-style: italic;
    opacity: 0.8;
}
/* РЕШЕНИЕ ЗА МАКЕДОНСКОТО ЗНАМЕ НА МОБИЛЕН */
@media screen and (max-width: 650px) {
    /* Ги редиме текстот и знамето едно под друго */
    .mandatory-box {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px !important;
    }

    /* Го центрираме делот со знамето и му средуваме простор */
    .flag-side-container {
        margin-left: 0 !important;
        margin-top: 25px !important;
        width: 140px !important; /* Малку помало знаме за телефон */
    }

    /* Ги центрираме насловот и копчето внатре во текстот */
    .mandatory-box div:first-child {
        text-align: center !important;
    }

    .mandatory-box a.btn-outline-small {
        margin-top: 15px !important;
    }
}   
/* ========================================== */
/* МЕЃУНАРОДНА СОРАБОТКА - CSS РАСПОРЕД       */
/* ========================================== */

.coop-section {
    padding: 60px 5%;
    background-color: #f4f7fa;
}

.coop-layout {
    display: grid;
    /* Ова е магијата: Лево е 2.2 пати поголемо од Десно */
    grid-template-columns: 2.2fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start; /* Важно за sticky sidebar-от */
}

/* --- ЛЕВА СТРАНА --- */
.partners-box {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.04);
    margin-bottom: 40px;
    border-top: 4px solid #143058;
}

.partners-box h3 {
    color: #143058;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    margin-bottom: 15px;
}
.partners-box h3 i { color: #fca311; margin-right: 10px; }
.partners-box p { color: #555; margin-bottom: 25px; line-height: 1.6; }

.partners-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.partners-list li {
    padding: 12px 15px;
    background: #f9fbfd;
    margin-bottom: 10px;
    border-radius: 8px;
    border-left: 3px solid #fca311;
    color: #333;
    transition: 0.3s;
}
.partners-list li:hover { background: #143058; color: #fff; transform: translateX(5px); }
.partners-list li i { color: #fca311; margin-right: 10px; }

/* Големи картички за вести */
.big-news-card {
    display: flex;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    transition: 0.3s;
}
.big-news-card:hover { box-shadow: 0 15px 30px rgba(0,0,0,0.1); transform: translateY(-5px); }

.bn-img {
    flex: 0 0 250px; /* Фиксна широчина за сликата */
}
.bn-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bn-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bn-date { font-size: 0.85rem; color: #888; font-weight: bold; margin-bottom: 10px; }
.bn-date i { color: #fca311; margin-right: 5px; }

.bn-content h4 {
    font-size: 1.3rem;
    color: #143058;
    margin-bottom: 15px;
    line-height: 1.4;
}

.bn-read-more {
    color: #fca311;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.95rem;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bn-read-more:hover { color: #143058; gap: 12px; }

/* --- ДЕСНА СТРАНА (SIDEBAR) --- */
.coop-sidebar {
    position: sticky;
    top: 100px; /* Колку да биде оддалечено од горе кога лебди */
}

/* Пребарување */
.search-widget {
    display: flex;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden;
}
.search-widget input {
    flex: 1;
    padding: 15px 20px;
    border: none;
    outline: none;
    background: #fff;
}
.search-widget button {
    padding: 0 25px;
    background: #fca311;
    border: none;
    color: #143058;
    cursor: pointer;
    transition: 0.3s;
}
.search-widget button:hover { background: #143058; color: #fca311; }

/* Виџет за новости (Малки сликички) */
.latest-news-widget {
    background: #ffffff;
    padding: 30px 25px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.latest-news-widget h3 {
    font-family: 'Montserrat', sans-serif;
    color: #143058;
    font-size: 1.2rem;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

/* ОВА Е ТОА ШТО ГО БАРАШЕ - Мали картички */
.mini-news-item {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f4f7fa;
    transition: 0.3s;
}
.mini-news-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.mini-news-item img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    transition: 0.3s;
}

.mn-text { flex: 1; }
.mn-text h5 {
    color: #333;
    font-size: 0.9rem;
    margin: 0 0 5px 0;
    line-height: 1.3;
    transition: 0.3s;
}
.mn-text span { font-size: 0.75rem; color: #a1aab8; }
.mn-text span i { color: #fca311; }

.mini-news-item:hover img { transform: scale(1.05); }
.mini-news-item:hover .mn-text h5 { color: #fca311; }

/* --- РЕСПОНЗИВНОСТ ЗА МОБИЛЕН --- */
@media screen and (max-width: 992px) {
    .coop-layout { grid-template-columns: 1fr; } /* Едно под друго */
    .coop-sidebar { position: static; } /* Нема повеќе лебдење на мобилен */
    .big-news-card { flex-direction: column; } /* Сликата над текстот */
    .bn-img { flex: auto; height: 200px; }
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* --- ВИЏЕТ ЗА ПОВИК ЗА СОРАБОТКА (Замена за Search) --- */
.coop-cta-widget {
    background: linear-gradient(135deg, #143058 0%, #0a182c 100%); /* Темно сина Пупин боја */
    padding: 35px 25px;
    border-radius: 12px;
    text-align: center;
    color: white;
    margin-bottom: 30px;
    box-shadow: 0 10px 25px rgba(20, 48, 88, 0.2);
    border-top: 4px solid #fca311; /* Златна линија горе */
}

.cta-icon-wrapper {
    width: 65px;
    height: 65px;
    background: rgba(252, 163, 17, 0.1);
    color: #fca311;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: 0 auto 20px;
    border: 1px solid rgba(252, 163, 17, 0.3);
    transition: 0.3s;
}

.coop-cta-widget:hover .cta-icon-wrapper {
    transform: scale(1.1) rotate(10deg);
    background: rgba(252, 163, 17, 0.2);
}

.coop-cta-widget h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: #ffffff;
}

.coop-cta-widget p {
    font-size: 0.95rem;
    color: #bac4d1;
    line-height: 1.5;
    margin-bottom: 25px;
}

.btn-coop-contact {
    display: inline-block;
    background: #fca311;
    color: #143058;
    padding: 12px 25px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    transition: 0.3s;
    width: 100%; /* Го прави копчето широко колку блокот */
    box-sizing: border-box;
}

.btn-coop-contact:hover {
    background: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* --- СТИЛ ЗА ПОПАП ВЕСТИ (MODAL) --- */
.news-modal {
    display: none; /* Скриен по дифолт */
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 25, 47, 0.85); /* Темна полупровидна позадина */
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.news-modal-content {
    background-color: #fff;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    border-radius: 15px;
    overflow-y: auto; /* Скролање ако текстот е долг */
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    animation: modalFadeIn 0.4s ease-out;
}

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

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #fff;
    background: #d21f3c;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.close-modal:hover { background: #143058; }

#modalImg {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-bottom: 4px solid #fca311;
}

.modal-text-wrap {
    padding: 40px;
}

#modalTitle {
    color: #143058;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    margin: 15px 0 25px 0;
    line-height: 1.4;
}

#modalText p {
    color: #444;
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
    .modal-text-wrap { padding: 25px; }
    #modalImg { height: 250px; }
    #modalTitle { font-size: 1.4rem; }
}
/* ========================================== */
/* ПРИСТАП ДО ИНФОРМАЦИИ - CSS                */
/* ========================================== */

/* Листа со општи документи */
.clean-doc-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.doc-list-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.doc-list-item i {
    color: #fca311;
    font-size: 1.2rem;
    width: 30px; /* Фиксна ширина за иконите да се порамнети */
    transition: 0.3s ease;
}

.doc-list-item:hover {
    background: #143058;
    color: #ffffff;
    border-color: #143058;
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(20, 48, 88, 0.15);
}

/* МОДЕРЕН ДАТА-ГРИД (Замена за табела) */
.modern-data-grid {
    border: 1px solid #e0e6ed;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0,0,0,0.03);
}

.grid-header {
    display: flex;
    background: #143058;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
}

.grid-row {
    display: flex;
    border-bottom: 1px solid #e0e6ed;
    transition: background 0.3s;
}

.grid-row:last-child {
    border-bottom: none;
}

/* Наизменична боја (Zebra striping) за лесно читање */
.grid-row:nth-child(even) {
    background-color: #f8fafc;
}
.grid-row:nth-child(odd) {
    background-color: #ffffff;
}

.grid-row:hover {
    background-color: #f0f4f8;
}

.grid-col-info {
    flex: 1.2;
    padding: 20px 25px;
    font-weight: 600;
    color: #2c3e50;
    border-right: 1px solid #e0e6ed;
    display: flex;
    align-items: center;
}

.grid-col-loc {
    flex: 1;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

/* Линковите внатре во табелата */
.grid-col-loc a {
    color: #3b82f6;
    text-decoration: none;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.2s;
}

.grid-col-loc a i {
    color: #fca311;
    font-size: 1.1rem;
}

.grid-col-loc a:hover {
    color: #143058;
    text-decoration: underline;
}

/* Респонзивност за мобилен */
@media screen and (max-width: 768px) {
    .grid-header {
        display: none; /* Го криеме хедерот на мал екран */
    }
    
    .grid-row {
        flex-direction: column;
        border-bottom: 3px solid #143058;
    }

    .grid-col-info {
        border-right: none;
        border-bottom: 1px dashed #ccc;
        background: #f1f5f9;
    }
}
/* ========================================== */
/* БИОГРАФИЈА - EDITORIAL СТИЛ                */
/* ========================================== */

.pupin-editorial-section {
    padding: 100px 5%;
    font-family: 'Inter', sans-serif;
}

/* Позадини */
.bg-white { background-color: #ffffff; }
.bg-light-gray { background-color: #f7f9fc; }
.bg-dark-blue { background-color: #0c1a30; }

.editorial-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Типографија */
.gold-accent-text {
    display: block;
    color: #fca311;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.editorial-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    color: #143058;
    margin-bottom: 25px;
    line-height: 1.2;
}

.editorial-subtitle {
    font-size: 1.3rem;
    color: #555;
    margin-top: -15px;
    margin-bottom: 25px;
    font-weight: 600;
}

.editorial-p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 20px;
}

.text-white { color: #ffffff !important; }
.text-gray-light { color: #bac4d1; font-size: 1.1rem; line-height: 1.7; }

/* Распореди (Layouts) */
.flex-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.align-center { align-items: center; }

.editorial-text { flex: 1; min-width: 300px; }
.editorial-image { flex: 1; min-width: 300px; }

/* Простори (Падинзи) */
.pr-50 { padding-right: 60px; }
.pl-50 { padding-left: 60px; }
.mb-50 { margin-bottom: 50px; }
.mb-80 { margin-bottom: 80px; }

/* Сликите */
.editorial-image img {
    width: 100%;
    height: auto;
    border-radius: 4px; /* Многу мали, елегантни агли */
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Грид за 3 колони во темната секција */
.three-col-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.text-column {
    text-align: left;
    border-top: 2px solid #fca311;
    padding-top: 20px;
}

/* Респонзивност за Мобилен */
/* Поправен дел за респонзивност (Избриши ја .reverse) */
/* РЕСПОНЗИВНОСТ ЗА МОБИЛЕН (ПОПРАВЕНО) */
@media screen and (max-width: 992px) {
    /* Ги тргаме големите празни простори од страните */
    .pr-50, .pl-50 { padding: 0 !important; } 
    
    /* Го намалуваме насловот да го собере на екран */
    .editorial-title { font-size: 2.2rem !important; }
    
    /* Ги редиме сликата и текстот едно под друго */
    .flex-layout { flex-direction: column !important; gap: 40px !important; }
    .editorial-image { width: 100% !important; margin-bottom: 20px !important; } 
    
    /* МАГИЈАТА ЗА 3-ТЕ КОЛОНИ: На телефон стануваат 1 колона */
    .three-col-grid { 
        grid-template-columns: 1fr !important; /* Една колона наместо три */
        gap: 40px !important; /* Простор меѓу нив */
    }
    
    /* Го центрираме текстот за да изгледа поубаво на телефон */
    .text-column {
        text-align: center !important;
        border-top: 3px solid #fca311 !important;
        padding-top: 25px !important;
    }
}
/* ========================================== */
/* ПРЕЛОАДЕР - ПРИСТАП ДО ИНФОРМАЦИИ          */
/* ========================================== */

#info-preloader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    background: radial-gradient(circle, #143058 0%, #050814 100%); /* Тъмносин фон */
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.6s ease;
}

.preloader-content { 
    text-align: center; 
}

/* Анимирана папка */
.info-icon {
    font-size: 5.5rem;
    color: #fca311;
    margin-bottom: 20px;
    display: inline-block;
    animation: pulseFolder 2s infinite ease-in-out;
}

@keyframes pulseFolder {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; text-shadow: 0 0 25px rgba(252, 163, 17, 0.6); }
    100% { transform: scale(0.95); opacity: 0.8; }
}

/* Вълнообразен светещ текст */
.loading-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.6rem;
    color: #ffffff;
    letter-spacing: 6px;
    margin-bottom: 20px;
}

.letter {
    display: inline-block;
    animation: waveGlow 1.5s infinite;
}

/* Закъснение за всяка буква, за да се получи вълна */
.letter:nth-child(1) { animation-delay: 0.1s; }
.letter:nth-child(2) { animation-delay: 0.2s; }
.letter:nth-child(3) { animation-delay: 0.3s; }
.letter:nth-child(4) { animation-delay: 0.4s; }
.letter:nth-child(5) { animation-delay: 0.5s; }
.letter:nth-child(6) { animation-delay: 0.6s; }
.letter:nth-child(7) { animation-delay: 0.7s; }

@keyframes waveGlow {
    0%, 100% { opacity: 0.4; transform: translateY(0); color: #fff; }
    50% { opacity: 1; transform: translateY(-8px); color: #fca311; }
}

/* Лента за зареждане */
.progress-container {
    width: 260px; height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin: 0 auto 15px;
    overflow: hidden;
}

.progress-bar {
    width: 0%; height: 100%;
    background: #fca311;
    box-shadow: 0 0 10px #fca311;
    animation: fillBar 1.5s forwards ease-in-out;
}

@keyframes fillBar {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* Допълнителен текст */
.status-msg {
    color: #bac4d1;
    font-size: 0.95rem;
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
    opacity: 0.8;
}
/* ========================================== */
/* ДОКУМЕНТИ - СТИЛОВИ ЗА КАРТИЧКИ И ЧЕКОРИ   */
/* ========================================== */

/* --- ПРОЦЕДУРА ЗА ДУПЛИКАТ (ЧЕКОРИ) --- */
.steps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.step-card {
    background: #f9fbfd;
    border: 1px solid #e0e6ed;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    gap: 20px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    transition: 0.3s;
}

.step-card:hover {
    box-shadow: 0 10px 25px rgba(20, 48, 88, 0.1);
    transform: translateY(-3px);
}

.full-width-step {
    grid-column: span 2;
}

.step-number {
    background: #fca311;
    color: #143058;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(252, 163, 17, 0.4);
}

.step-content h4 {
    color: #143058;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    margin: 0 0 10px 0;
}

.step-content p {
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* Слики од уплатници */
.uplatnica-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 2px dashed #bac4d1;
    margin-top: 15px;
    transition: 0.3s;
}
.uplatnica-img:hover { border-color: #fca311; }

/* --- МРЕЖА ЗА КАТЕГОРИИ ДОКУМЕНТИ --- */
.docs-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}

.doc-cat-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.05);
    overflow: hidden;
    border-top: 5px solid #143058;
    transition: 0.3s;
}

.doc-cat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(20, 48, 88, 0.15);
}

.doc-cat-header {
    background: #f4f7fa;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #eaeaea;
}

.doc-cat-header i {
    font-size: 2rem;
    color: #fca311;
}

.doc-cat-header h3 {
    margin: 0;
    color: #143058;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    line-height: 1.4;
}

.doc-links-wrapper {
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Модерни линкови */
.modern-doc-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: #ffffff;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    color: #4a5568;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.modern-doc-link i {
    color: #bac4d1;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.modern-doc-link:hover {
    background: #143058;
    color: #ffffff;
    border-color: #143058;
    transform: translateX(5px);
}

.modern-doc-link:hover i {
    color: #fca311;
}

/* Респонзивност */
@media screen and (max-width: 768px) {
    .steps-grid { grid-template-columns: 1fr; }
    .full-width-step { grid-column: span 1; }
    .step-card { flex-direction: column; text-align: center; align-items: center; }
}

/* ========================================== */
/* ИНФОРМАЦИИ - ГЛАВНИ СТИЛОВИ ЗА ЛИСТИТЕ     */
/* ========================================== */

.infopg-main-wrapper {
    padding: 60px 5%;
    background-color: #f4f7fa;
}

.infopg-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 40px;
    align-items: start;
}

.infopg-section {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    margin-bottom: 40px;
    scroll-margin-top: 100px; /* За скролањето */
}

.infopg-section-title {
    color: #143058;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    border-bottom: 3px solid #fca311;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Изглед на самите огласи/конкурси */
.infopg-item {
    border-bottom: 1px solid #eaeaea;
    padding: 15px 0;
}

.infopg-item:last-child {
    border-bottom: none;
}

.infopg-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 10px;
}

.infopg-item-title {
    margin: 0;
    font-size: 1.05rem;
    color: #143058;
    line-height: 1.5;
    flex: 1;
}

.infopg-item-date {
    font-size: 0.9rem;
    color: #fca311;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(252, 163, 17, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
}

.open-info-btn {
    display: inline-block;
    color: #4a5568;
    font-size: 0.9rem;
    text-decoration: none;
    font-weight: 600;
    transition: 0.2s;
}

.open-info-btn:hover {
    color: #143058;
    text-decoration: underline;
}

/* ДЕСНА СТРАНА - СТИКИ МЕНИ */
.infopg-sidebar {
    position: sticky;
    top: 100px;
}

.sticky-nav-box {
    background: #143058;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(20, 48, 88, 0.2);
}

.sticky-nav-box h3 {
    color: #ffffff;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #fca311;
    font-family: 'Montserrat', sans-serif;
}

.sticky-nav-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sticky-nav-box ul li a {
    color: #bac4d1;
    text-decoration: none;
    display: block;
    padding: 10px 0;
    transition: 0.3s;
    font-size: 1.05rem;
}

.sticky-nav-box ul li a:hover {
    color: #ffffff;
    padding-left: 10px;
}

.sticky-nav-box ul li a i {
    color: #fca311;
    margin-right: 5px;
}

/* РЕСПОНЗИВНОСТ */
@media screen and (max-width: 992px) {
    .infopg-container { grid-template-columns: 1fr; }
    .infopg-sidebar { display: none; }
    .infopg-item-header { flex-direction: column; gap: 5px; }
    .infopg-item-date { align-self: flex-start; }
}
/* =========================================
   ПРЕЛОАДЕР ЗА ЗА НАС (СВЕТИЛКА / ИДЕЈА)
   ========================================= */

#zanas-preloader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #142AA3; /* Темно сина Пупин боја */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

#zanas-preloader-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.zanas-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bulb-container {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Векторската Светилка */
.bulb-svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #ffffff; /* Бела контура на почеток */
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    position: relative;
    z-index: 2;
    transition: stroke 0.5s ease;
}

/* Анимација на исцртување на светилката */
.bulb-outline {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: drawBulb 1.5s ease-in-out forwards;
}

/* Зраците на светлината се скриени на почеток */
.bulb-rays path {
    stroke: #f59e0b; /* Златна боја */
    opacity: 0;
    transform-origin: center;
    transform: scale(0.5);
    animation: popRays 0.5s ease-out 1.2s forwards; /* Блеснуваат по 1.2 секунди */
}

/* Сјајот зад светилката */
.bulb-glow {
    position: absolute;
    top: 40%; /* СМЕНЕТО: Подигнато малку погоре за да одговара на цртичките */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: #f59e0b;
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0;
    z-index: 1;
    animation: turnOnGlow 1s ease 1.2s forwards;
}

/* Текстот под светилката */
.zanas-text {
    margin-top: 30px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 3px;
    opacity: 0;
    transform: translateY(15px);
    animation: textFadeUp 0.8s ease 1.5s forwards;
}

/* КОГА СВЕТИЛКАТА ЌЕ СВЕТНЕ, СЕ БОИ ВО ЖОЛТО */
.zanas-scene:hover .bulb-svg, 
.bulb-outline {
    animation: drawBulb 1.5s ease-in-out forwards, colorChange 0.5s ease 1.2s forwards;
}

/* --- КЛУЧЕВИ ЗА АНИМАЦИЈА --- */
@keyframes drawBulb {
    0% { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}

@keyframes colorChange {
    to { stroke: #f59e0b; }
}

@keyframes turnOnGlow {
    to { opacity: 0.6; }
}

@keyframes popRays {
    to { opacity: 1; transform: scale(1); }
}

@keyframes textFadeUp {
    to { opacity: 1; transform: translateY(0); }
}
/* =========================================
   ПРЕЛОАДЕР ЗА ИНФОРМАЦИИ (СИГНАЛ / РАДАР)
   ========================================= */

#info-preloader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #142AA3; /* Темно сина боја на Пупин */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#info-preloader-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.info-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.signal-container {
    width: 90px;
    height: 90px;
    margin-bottom: 20px;
}

.signal-svg {
    width: 100%;
    height: 100%;
}

/* Точката долу пулсира постојано */
.signal-dot {
    animation: dotPulse 1.5s infinite ease-in-out;
}

/* Брановите светат секвенцијално */
.signal-wave {
    opacity: 0.2; /* Изгаснати по дифолт */
}

.wave-1 {
    animation: wavePulse 1.5s infinite ease-in-out 0.2s;
}

.wave-2 {
    animation: wavePulse 1.5s infinite ease-in-out 0.4s;
}

.wave-3 {
    animation: wavePulse 1.5s infinite ease-in-out 0.6s;
}

/* Текстот има нежно пулсирање */
.info-text {
    color: #ffffff;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    animation: textPulse 1.5s infinite ease-in-out;
}

/* --- АНИМАЦИИ --- */

/* Пулсирање на брановите (блеснуваат и стануваат портокалови) */
@keyframes wavePulse {
    0%, 100% { 
        opacity: 0.2; 
        stroke: #ffffff; 
    }
    50% { 
        opacity: 1; 
        stroke: #f59e0b; /* Златна/Портокалова боја */
        filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.8)); /* Лесен сјај */
    }
}

/* Пулсирање на точката */
@keyframes dotPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; transform-origin: center bottom; }
    50% { transform: scale(1.3); opacity: 1; transform-origin: center bottom; }
}

/* Пулсирање на текстот */
@keyframes textPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
/* Позадината го покрива екранот, но видеото е мало */
#pupin-preloader {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-color: #000047; /* Темна позадина */
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Ова го прави видеото мало и тркалезно со сјај */
.video-circle {
    width: 200px; /* Големина на видеото */
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #4db8ff;
    box-shadow: 0 0 25px rgba(77, 184, 255, 0.6), inset 0 0 15px rgba(77, 184, 255, 0.4);
    margin-bottom: 20px;
}

#small-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.loading-text {
    font-family: 'Montserrat', sans-serif;
    color: #4db8ff;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 3px;
    animation: pulse-text 1s infinite alternate;
}

@keyframes pulse-text {
    0% { opacity: 0.5; text-shadow: 0 0 5px rgba(77, 184, 255, 0.3); }
    100% { opacity: 1; text-shadow: 0 0 15px rgba(77, 184, 255, 0.8); }
}

/* Класа за гасење на прелоадерот */
.hide-preloader {
    opacity: 0;
    visibility: hidden;
}
.quiz-navigator {
    padding: 40px 0;
    background-color: #f8f9fa; /* Светла позадина за да се одвои */
    display: flex;
    justify-content: center;
}

.quiz-box {
    display: flex;
    align-items: center;
    background: white;
    padding: 25px;
    border-radius: 15px;
    text-decoration: none;
    color: #333;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 5px solid #ffc107; /* Жолтата боја на училиштето */
    max-width: 700px;
    margin: 0 auto;
}

.quiz-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.quiz-icon-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    margin-right: 30px;
    flex-shrink: 0;
}

.main-square {
    width: 100%;
    height: 100%;
    background: #002d5a; /* Темно сина */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffc107;
    font-size: 30px;
    z-index: 2;
    position: relative;
}

/* Прашалници околу квадратот */
.quiz-icon-wrapper i[class*="q-"] {
    position: absolute;
    color: #ffc107;
    opacity: 0.6;
    animation: float 3s infinite ease-in-out;
}

.q-1 { top: -10px; left: -10px; font-size: 20px; }
.q-2 { top: -15px; right: 0; font-size: 16px; animation-delay: 0.5s !important; }
.q-3 { bottom: -5px; left: -15px; font-size: 18px; animation-delay: 1s !important; }
.q-4 { bottom: 10px; right: -10px; font-size: 22px; animation-delay: 1.5s !important; }

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

.quiz-text h3 {
    margin: 0 0 5px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    color: #002d5a;
}

.quiz-text p {
    margin: 0;
    font-size: 15px;
    color: #666;
}

.quiz-text i {
    margin-left: 10px;
    transition: margin-left 0.3s ease;
}

.quiz-box:hover .quiz-text i {
    margin-left: 20px;
}
/* --- СТИЛ ЗА КОПЧЕТО ВО ХЕДЕРОТ --- */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
}

.theme-switch {
    display: inline-block;
    height: 28px; /* Малку го намаливме за убаво да собере во менито */
    position: relative;
    width: 54px;
    margin: 0;
}

.theme-switch input {
    display: none;
}

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: 0.4s;
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
}

.slider:before {
    background-color: #fff;
    bottom: 3px;
    content: "";
    height: 22px;
    left: 3px;
    position: absolute;
    transition: 0.4s;
    width: 22px;
    border-radius: 50%;
    z-index: 2;
}

input:checked + .slider {
    background-color: #1a2e5a;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider i {
    color: #fff;
    font-size: 12px;
    z-index: 1;
}
.fa-moon { color: #f1b418; }
.fa-sun { color: #f1b418; }
/* --- ГЛАВНИ DARK MODE БОИ --- */
body.dark-mode {
    background-color: #121212 !important;
    color: #f0f0f0 !important;
}

/* --- ХЕДЕР И НАВИГАЦИЈА ВО DARK MODE --- */
body.dark-mode .main-header {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #333;
}

/* Боја на главните линкови во менито */
body.dark-mode .main-nav > li > a {
    color: #e0e0e0 !important;
}

body.dark-mode .main-nav > li > a:hover {
    color: #f1b418 !important; /* Жолта на hover */
}

/* Боја на малите линкови најгоре (за да ги победиме inline стиловите) */
body.dark-mode .top-nav a {
    color: #bbbbbb !important;
}

body.dark-mode .top-nav a:hover {
    color: #ffffff !important;
}

/* Паѓачко мени (Dropdown) во Dark Mode */
body.dark-mode .dropdown-content {
    background-color: #242424 !important;
    border: 1px solid #333;
}

body.dark-mode .dropdown-content a {
    color: #e0e0e0 !important;
}

body.dark-mode .dropdown-content a:hover {
    background-color: #333 !important;
    color: #f1b418 !important;
}

/* Име на училиштето */
body.dark-mode .school-name {
    color: #ffffff !important;
}

/* --- СЕКЦИИ КАКО ОБРАЗОВНИ ПРОФИЛИ И НОВОСТИ --- */
/* ===================================================================== */
/* 🌙 MASTER DARK MODE - ГЛОБАЛНИ ПРЕГАЗУВАЊА ЗА СИТЕ СЕКЦИИ НА САЈТОТ 🌙 */
/* ===================================================================== */

/* --- 1. ГЛАВНА ПОЗАДИНА НА СИТЕ СВЕТЛИ СЕКЦИИ --- */
body.dark-mode,
body.dark-mode .values-section,
body.dark-mode .partners-slider,
body.dark-mode .classic-edu-section,
body.dark-mode .news-section,
body.dark-mode .why-choose-us-content,
body.dark-mode .mission-vision-section,
body.dark-mode .enrollment-process,
body.dark-mode .required-documents,
body.dark-mode .premium-staff,
body.dark-mode .compact-info-section,
body.dark-mode .profiles-section,
body.dark-mode .exam-intro-section,
body.dark-mode section.exam-details-section,
body.dark-mode .coop-section,
body.dark-mode .pupin-editorial-section,
body.dark-mode .infopg-main-wrapper,
body.dark-mode .quiz-navigator,
body.dark-mode .bg-light,
body.dark-mode .bg-white {
    background-color: #121212 !important;
    background-image: none !important; /* Ги гасиме сивите точки од позадините */
    color: #e0e0e0 !important;
}

/* --- 2. КАРТИЧКИ И БОКСОВИ (Темно сиви/црни за контраст) --- */
body.dark-mode .value-card,
body.dark-mode .profile-card,
body.dark-mode .news-list-item,
body.dark-mode .news-display-area,
body.dark-mode .reason-box,
body.dark-mode .mv-container,
body.dark-mode .step-card,
body.dark-mode .tech-card,
body.dark-mode .unified-exam-block,
body.dark-mode .exam-left,
body.dark-mode .exam-right,
body.dark-mode .subject-box,
body.dark-mode .elective-box,
body.dark-mode .partners-box,
body.dark-mode .partners-list li,
body.dark-mode .big-news-card,
body.dark-mode .latest-news-widget,
body.dark-mode .search-widget input,
body.dark-mode .doc-cat-card,
body.dark-mode .modern-doc-link,
body.dark-mode .infopg-section,
body.dark-mode .quiz-box,
body.dark-mode .mv-mini-card,
body.dark-mode .sticky-nav-box,
body.dark-mode .news-modal-content,
body.dark-mode .doc-list-item {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
    color: #e0e0e0 !important;
}

/* Специфични hover ефекти за темните картички */
body.dark-mode .news-list-item:hover,
body.dark-mode .partners-list li:hover,
body.dark-mode .modern-doc-link:hover,
body.dark-mode .doc-list-item:hover {
    background-color: #2a2a2a !important;
    border-color: #fca311 !important;
}

/* --- 3. НАСЛОВИ И ПОДНАСЛОВИ (Бела боја) --- */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode .value-card h3,
body.dark-mode .slider-title h3,
body.dark-mode .section-header-left h2,
body.dark-mode .section-header-center h2,
body.dark-mode .tc-content h3,
body.dark-mode .editorial-title,
body.dark-mode .compact-title,
body.dark-mode .mv-title,
body.dark-mode .infopg-section-title,
body.dark-mode .partners-box h3,
body.dark-mode .bn-content h4,
body.dark-mode .exam-subtitle,
body.dark-mode .quiz-text h3,
body.dark-mode #modalTitle,
body.dark-mode section.exam-details-section h2,
body.dark-mode section.exam-details-section h4 {
    color: #ffffff !important;
}

/* --- 4. ПАРАГРАФИ И ТЕКСТ (Светло сива за читање) --- */
body.dark-mode p:not(.hero-subtitle),
body.dark-mode .value-card p,
body.dark-mode .section-header-left p,
body.dark-mode .reason-box p,
body.dark-mode .mv-item p,
body.dark-mode .tc-desc,
body.dark-mode .exam-intro-text p,
body.dark-mode .editorial-p,
body.dark-mode .infopg-item-title,
body.dark-mode .tc-features li,
body.dark-mode .doc-list li,
body.dark-mode .quiz-text p,
body.dark-mode section.exam-details-section p,
body.dark-mode section.exam-details-section .card-desc {
    color: #bac4d1 !important;
}

/* --- 5. ХЕДЕР, НАВИГАЦИЈА И ПАЃАЧКО МЕНИ --- */
body.dark-mode .main-header {
    background-color: rgba(18, 18, 18, 0.95) !important;
    border-bottom: 1px solid #333;
}
body.dark-mode .main-nav > li > a { color: #e0e0e0 !important; }
body.dark-mode .main-nav > li > a:hover { color: #f1b418 !important; }
body.dark-mode .top-nav a { color: #bbbbbb !important; }
body.dark-mode .top-nav a:hover { color: #ffffff !important; }
body.dark-mode .dropdown-content { background-color: #1e1e1e !important; border: 1px solid #333; }
body.dark-mode .dropdown-content a { color: #e0e0e0 !important; border-bottom: 1px solid #333 !important; }
body.dark-mode .dropdown-content a:hover { background-color: #333 !important; color: #f1b418 !important; }
body.dark-mode .school-name { color: #ffffff !important; }

/* --- 6. МОДЕРЕН DATA-GRID (ТАБЕЛИ) --- */
body.dark-mode .modern-data-grid { border-color: #333 !important; }
body.dark-mode .grid-header { background: #1a1a1a !important; color: #fca311 !important; }
body.dark-mode .grid-row:nth-child(even) { background-color: #1a1a1a !important; }
body.dark-mode .grid-row:nth-child(odd) { background-color: #121212 !important; }
body.dark-mode .grid-row:hover { background-color: #242424 !important; }
body.dark-mode .grid-col-info { border-right-color: #333 !important; color: #e0e0e0 !important; }

/* --- 7. АКЦЕНТИ И ИКОНИ --- */
body.dark-mode .reason-icon { background: #242424 !important; border-color: #fca311 !important; color: #fca311 !important; }
body.dark-mode .acc-btn { background: #1e1e1e !important; color: #fca311 !important; border-bottom: 1px solid #333 !important; }
body.dark-mode .acc-content { background: #121212 !important; border-color: #fca311 !important; }
body.dark-mode .sub-link { color: #bac4d1 !important; border-bottom-color: #333 !important; }
body.dark-mode .sub-link:hover { background: #1e1e1e !important; color: #fca311 !important; }
body.dark-mode .doc-cat-header { background: #1a1a1a !important; border-bottom-color: #333 !important; }
body.dark-mode .tc-icon-wrapper { background: #121212 !important; border-color: #333 !important; }
body.dark-mode .tc-icon-wrapper i { color: #fca311 !important; }

/* --- 8. ЛИНКОВИ ВНАТРЕ ВО СЕКЦИИТЕ --- */
body.dark-mode .text-link-dl,
body.dark-mode .bn-read-more,
body.dark-mode .open-info-btn,
body.dark-mode .grid-col-loc a {
    color: #fca311 !important;
}
body.dark-mode .text-link-dl:hover,
body.dark-mode .bn-read-more:hover,
body.dark-mode .open-info-btn:hover,
body.dark-mode .grid-col-loc a:hover {
    color: #ffffff !important;
}
@media (max-width: 1024px) {
    .parallax-section, 
    .footer-cta-banner, 
    .parallax-exam-intro, 
    .parallax-exam-outro, 
    .subpage-banner {
        background-attachment: scroll !important;
    }
}
/* Оптимизација на хардверско забрзување */
.idea-bulb-trigger, 
.signal-wave, 
.corner-triangle i,
.branch-dot,
.logos-track {
    will-change: transform, opacity;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
/* --- СТИЛ ЗА ГЛОБУСОТ И ПРЕВОДОТ --- */
.lang-wrapper {
    position: relative;
    margin-left: 15px;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    transition: 0.3s ease;
    cursor: pointer;
    overflow: hidden; /* Спречува Google да се излее надвор */
}

.lang-wrapper:hover {
    background-color: #f1b418; /* Златна боја на ховер */
}

.lang-wrapper i {
    color: #ffffff;
    font-size: 1.1rem;
    z-index: 1;
    transition: 0.3s;
}

.lang-wrapper:hover i {
    color: #143058; /* Темно сино на ховер */
}

/* Го правиме Google Translate НЕВИДЛИВ, но кликабилен врз глобусот */
#google_translate_element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Целосно проѕирно */
    z-index: 2;
}

#google_translate_element select {
    width: 50px;
    height: 40px;
    cursor: pointer;
}

/* Гасење на горната лента на Google што го турка сајтот */
.skiptranslate iframe {
    display: none !important;
    visibility: hidden !important;
}
body {
    top: 0 !important;
}
/* Стил за јазичните копчиња на мобилен */
.m-lang-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
}

.m-lang-btn:hover, .m-lang-btn:active {
    background: #f1b418;
    color: #143058;
    border-color: #f1b418;
}

/* Скриј го глобусот од десктоп кога сме на многу мал екран ако пречи */
@media (max-width: 480px) {
    .custom-lang-menu {
        margin-left: 10px;
    }
}
/* ДЕСКТОП ГЛОБУС */
.custom-lang-menu { position: relative; margin-left: 15px; }
.lang-globe {
    width: 32px; height: 32px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%; display: flex;
    justify-content: center; align-items: center;
    cursor: pointer; transition: 0.3s;
}
.lang-globe:hover { background-color: #f1b418; }
.lang-globe i { color: #ffffff; font-size: 1.1rem; }
.lang-globe:hover i { color: #143058; }

.lang-options {
    position: absolute; top: 100%; right: 0;
    background-color: #143058; list-style: none;
    padding: 10px 0; min-width: 140px;
    border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    opacity: 0; visibility: hidden;
    transform: translateY(15px); transition: 0.3s;
    z-index: 1000; border-top: 2px solid #f1b418;
}
.custom-lang-menu:hover .lang-options { opacity: 1; visibility: visible; transform: translateY(5px); }
.lang-options li a {
    color: #ffffff; text-decoration: none; padding: 10px 20px;
    display: block; font-size: 0.85rem; font-weight: 600;
}
.lang-options li a:hover { background-color: #f1b418; color: #143058; }

/* МОБИЛНИ КОПЧИЊА */
.m-lang-btn {
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
    color: white; padding: 8px 15px; border-radius: 5px;
    font-weight: bold; cursor: pointer; transition: 0.3s;
}
.m-lang-btn:hover, .m-lang-btn:active { background: #f1b418; color: #143058; }

/* ТРГАЊЕ НА ГОРНАТА ЛЕНТА ОД GOOGLE */
.skiptranslate iframe { display: none !important; }
body { top: 0 !important; }
/* Ова ќе ја скрие лентата на Google на сите страни, дури и ако немаат копче */
.skiptranslate iframe {
    display: none !important;
    visibility: hidden !important;
}
body {
    top: 0 !important;
}

/* --- СЕКЦИЈА ЗА ТРАНСПОРТ СТИЛОВИ --- */
.transport-section {
    background-color: #001847; /* јас ја ставив вака за да одговара со естетиката на училиштето */
    padding: 60px 20px;
    font-family: Arial, sans-serif;
}

.transport-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 50px;
}

.transport-info-col {
    flex: 1;
    min-width: 300px;
}

.transport-title {
    font-size: 28px;
    color: white;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.transport-cards-wrapper {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

/* Стил за картичките / табелите */
.transport-card {
    flex: 1;
    min-width: 200px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    padding: 20px;
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.red-line {
    width: 6px;
    height: 24px;
    background-color: #d11212;
    border-radius: 3px;
    margin-right: 12px;
}

.card-header h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

/* Изглед на вертикална табела */
.lines-table {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lines-table li {
    padding: 10px 5px;
    border-bottom: 1px solid #eee;
    color: #555;
    font-size: 15px;
}

.lines-table li:last-child {
    border-bottom: none;
}

/* Десен дел - Автобус и Анимација */
/* Десен дел - Автобус (Статичен и Поголем) */
/* --- Десен дел - Автобус (Статичен, Голем и Центриран во кругот) --- */
.transport-bus-col {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.bus-animation-wrapper {
    position: relative;
    width: 100%;
    max-width: 1500px; /* ЗГОЛЕМЕНО: од 750px на 900px за да има повеќе простор */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center; 
}



.bus-pedestal {
    width: 100%;
    max-width: 850px; /* ЗГОЛЕМЕНО: кругот да одговара на големиот автобус */
    position: relative;
    z-index: 1; 
    margin-top: -160px; /* ЗГОЛЕМЕНО ПОВЛЕКУВАЊЕ: од -130px на -160px бидејќи автобусот е поголем */
}


.bus-pedestal svg {
    width: 100%;
    height: auto;
    display: block;
}

.bus-caption {
    margin-top: 20px;
    font-size: 16px;
    color: #ffffff;
    
    text-align: center;
    width: 100%;
}

/* Избриши го и делот @keyframes driveSmooth бидејќи повеќе не ни треба */

/* Keyframes за анимацијата на автобусот */
@keyframes driveSmooth {
    0% { transform: translateX(-20px); }
    100% { transform: translateX(20px); }
}

/* Респонзивност за мобилни уреди */
/* =======================================================
   ПОПРАВКИ ЗА МОБИЛЕН ТЕЛЕФОН (Екрани помали од 768px) 
   ======================================================= */
/* --- ОСНОВЕН CSS ЗА ДЕСКТОП И ТАБЛЕТ --- */
.transport-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px; /* Простор меѓу текстот и сликата */
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.transport-info-col {
    flex: 1; /* Зема 50% од просторот */
}

.transport-cards-wrapper {
    display: flex;
    gap: 20px;
}

.transport-card {
    flex: 1;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.transport-bus-col {
    flex: 1; /* Зема други 50% од просторот */
    display: flex;
    justify-content: center;
}

.bus-animation-wrapper {
    width: 100%;
    max-width: 600px; /* Сликата никогаш нема да биде поширока од 600px */
}

/* Клучниот дел за сликата да не бега */
.moving-bus {
    width: 100%; /* Се прилагодува на родителот */
    height: auto; /* Ја задржува пропорцијата */
    display: block;
    border-radius: 12px; /* Мало заоблување за модерен изглед */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* Убава сенка */
    object-fit: cover;
}

.bus-caption {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
    color: #555;
    font-style: italic;
}


/* --- CSS ЗА МОБИЛЕН (Под 768px) --- */
@media (max-width: 768px) {
    .transport-container {
        flex-direction: column; /* Ги реди едно под друго */
        padding: 20px 15px;
        gap: 30px;
    }
    
    .transport-cards-wrapper {
        flex-direction: column; /* Картичките со линии паѓаат една под друга */
        width: 100%;
    }
    
    .transport-card {
        width: 100%;
        margin-bottom: 10px;
    }

    .transport-bus-col {
        width: 100%;
    }
}
/* Основни стилови */
body {
    margin: 0;
    font-family: sans-serif;
    background-color: #f0f0f0;
}

/* =========================================
   AERIS LUX - ДЕСКТОП ВЕРЗИЈА
   ========================================= */
.aeris-promo-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2e8b57;
    padding: 40px;
    border-radius: 10px;
    color: white;
    width: 100%;
    box-sizing: border-box;
    gap: 20px;
}

.aeris-logo-col {
    flex: 1;
    max-width: 25%;
    text-align: center;
}

.aeris-logo-col img {
    max-width: 100%;
    height: auto;
}

.aeris-text-col {
    flex: 2;
    text-align: center;
    padding: 0 20px;
}

.aeris-text-col h2 {
    font-style: italic;
    font-size: clamp(2.5rem, 4vw, 4rem);
    margin: 0;
    font-weight: bold;
    text-transform: uppercase;
}

.aeris-text-col h3 {
    color: #ccffcc;
    margin-top: 5px;
    font-size: 1.2rem;
}

.aeris-text-col p {
    font-size: 1.1rem;
    line-height: 1.5;
}

.aeris-video-col {
    flex: 1;
    max-width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aeris-video-col video {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    background-color: #000;
}


/* =========================================
   AERIS LUX - МОБИЛНА ВЕРЗИЈА (ПОД 768px)
   ========================================= */
@media (max-width: 768px) {
    .aeris-promo-wrapper {
        flex-direction: column; /* Ги реди едно под друго наместо едно до друго */
        padding: 30px 20px; /* Намалуваме празен простор од страните */
        gap: 30px; /* Простор меѓу лого, текст и видео */
    }

    .aeris-logo-col {
        max-width: 55%; /* КЛУЧНО: Ова го прави логото многу поголемо на телефон! */
        margin: 0 auto;
    }

    .aeris-text-col {
        padding: 0; /* Тргаме вишок празен простор за текстот */
    }

    .aeris-text-col h2 {
        font-size: 2.8rem;
    }

    .aeris-video-col {
        max-width: 100%; /* Видеото сега зема цел екран во ширина */
        width: 100%;
    }
}
/* Контејнерот за лисјата да биде преку цела зелена секција */
/* Контејнерот за лисјата */
.leaves-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* КЛУЧНО: Ова дозволува маусот да "поминува" низ лисјата за да кликнеш Play */
    z-index: 10; /* СМЕНЕТО: Сега лисјата се НАД зелената позадина! */
}

/* Дизајнот на едно ливче */
.aeris-leaf {
    position: absolute;
    width: 35px;
    height: 35px;
    background-color: rgba(144, 238, 144, 0.7); /* Направив бојата да биде малку повидлива */
    border-radius: 0 50% 0 50%;
    box-shadow: inset 2px 2px 5px rgba(255,255,255,0.5);
    right: 15%;
    top: 40%;
    opacity: 0;
}
/* =========================================
   DARK MODE СТИЛОВИ
   ========================================= */

/* Главна позадина и текст */
body.dark-mode {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

/* Позадини на секциите */
body.dark-mode .access-info-section,
body.dark-mode .general-docs-section,
body.dark-mode .data-grid-section {
    background-color: #1a1a1a !important;
}

/* Наслови и параграфи */
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4,
body.dark-mode .access-text-content p,
body.dark-mode .grid-col-info {
    color: #f0f0f0 !important;
}

/* Специфичен блок за контакт */
body.dark-mode .contact-highlight-box {
    background-color: #2d2d2d !important;
    border-left-color: #fca311 !important;
}

body.dark-mode .contact-highlight-box h4,
body.dark-mode .contact-highlight-box p,
body.dark-mode .contact-highlight-box i {
    color: #e0e0e0 !important;
}

/* Линкови и документи */
body.dark-mode .doc-list-item,
body.dark-mode .grid-col-loc a {
    background-color: #2a2a2a !important;
    color: #66b2ff !important; /* Светло сина за да се читаат линковите */
    border: 1px solid #444 !important;
}

body.dark-mode .doc-list-item:hover,
body.dark-mode .grid-col-loc a:hover {
    background-color: #3d3d3d !important;
    color: #ffffff !important;
}

/* Наслов на табелата (Grid Header) */
body.dark-mode .grid-header {
    background-color: #2a2a2a !important;
    border-bottom: 2px solid #fca311 !important;
}

body.dark-mode .grid-row {
    border-bottom: 1px solid #333 !important;
}
.see-all-btn {
    display: block;
    text-align: center;
    margin-top: 15px;
    padding: 12px 20px;
    border: 2px solid #333;
    border-radius: 5px;
    color: #1a3a6b;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.see-all-btn:hover {
    background-color: #1a3a6b;
    color: white;
}