/* ==========================================================================
   Globalne ispravke za specifične sekcije
========================================================================== */
.brands-grid.flex.flex-between {
    flex-wrap: wrap !important;
    justify-content: center !important;
}



/* ==========================================================================
   Mobilni meni (prikaz ispod 768px)
========================================================================== */
@media (max-width: 768px) {
    /* Prikazujemo hamburger dugme */
    .hamburger-toggle {
        display: flex; 
    }

    .grid-2, 
    .grid-3, 
    .grid-4 {
        grid-template-columns: 1fr !important;
    }
    .brands-grid {
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
    }
    .footer__bottom .flex-between {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    .section {
        padding: 3rem 0;
    }
    .home-hero {
        text-align: center;
        height: auto;
        min-height: 450px; /* I dalje ne sme biti manja od 450px */
        padding: 4rem 0;
    }
    
    .hero__actions {
        flex-direction: column; /* Dugmad u hero sekciji idu jedno ispod drugog na mobilnom */
        width: 100%;
    }
    
    .hero__actions .btn {
        width: 100%; /* Dugmad zauzimaju punu širinu ekrana za lakši klik */
    }

    /* Sakrivamo navigaciju po defaultu i stilizujemo je kao padajući meni */
    .nav {
        position: absolute;
        top: 80px; /* Visina headera */
        left: 0;
        width: 100%;
        background-color: var(--color-white, #ffffff);
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        display: none; /* Sakriveno */
        flex-direction: column;
        padding: 1.5rem 0;
    }

    /* Kada JS doda klasu .active, meni se prikazuje */
    .nav.active {
        display: flex; 
    }

    .nav__list {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    
    /* Dodatak: Animacija hamburger ikonica u "X" kada je otvoren */
    .hamburger-toggle span {
        transition: all 0.3s ease;
    }
    .hamburger-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    /* =========================================
       Mobilni header: Ikona telefona umesto teksta
       ========================================= */
    
    /* Sakrivamo tekstualni broj telefona na mobilnom */
    .header-phone .phone-number {
        display: none;
    }

    /* Stilizujemo ikonicu telefona da izgleda kao dugme (okruglo, slično Viberu) */
    .header-phone {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px; /* Ista veličina kao Viber ikonica */
        height: 36px;
        background-color: var(--color-primary, #0056b3); /* Tvoja glavna boja */
        color: #ffffff !important;
        border-radius: 50%;
        text-decoration: none;
        padding: 0;
    }

    /* Sklanjamo desnu marginu sa ikonice jer više nema teksta pored nje */
    .header-phone .phone-icon {
        margin: 0;
        font-size: 1.1rem;
    }

    /* Podesavamo razmak izmedju tri ikonice desno (Telefon, Viber, Meni) */
    .header__actions {
        gap: 0.5rem;
    }



}


@media (max-width: 992px) {
    .footer__container.grid-4 {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 kolone umesto 4 na tabletima i manjim ekranima */
        gap: 2rem;
    }
    .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}