.bg-gradient-orange {
    background: linear-gradient(90deg, #ff7e5f, #feb47b);
    color: white;
}

.navbar-nav .nav-item .nav-link {
    font-size: 0.8rem; /* Szöveg méretének növelése */
    font-weight: bold; /* Szöveg kiemelése */
    color: white; /* Szöveg színe */
    text-align: center;
}

    .navbar-nav .nav-item .nav-link i {
        font-size: 1rem; /* Ikon méretének növelése */
        margin-bottom: 0.1rem; /* Távolság az ikon és a szöveg között */
    }

    .navbar-nav .nav-item .nav-link:hover {
        color: #ffe4b5; /* Szöveg színe hover állapotban */
        text-decoration: none; /* Aláhúzás eltávolítása hover állapotban */
    }

    .navbar-nav .nav-item .nav-link.active {
        color: #ffe4b5; /* Szöveg színe a kiválasztott elemnél */
        text-decoration: none; /* Aláhúzás eltávolítása */
    }

.navbar-nav .nav-item .btn-link {
    font-size: 0.8rem; /* Szöveg méretének növelése a gombon */
    font-weight: bold; /* Szöveg kiemelése */
    color: white; /* Szöveg színe */
    text-align: center;
}

    .navbar-nav .nav-item .btn-link i {
        font-size: 1rem; /* Ikon méretének növelése a gombon */
        margin-bottom: 0.1rem; /* Távolság az ikon és a szöveg között */
    }

    .navbar-nav .nav-item .btn-link:hover {
        color: #ffe4b5; /* Szöveg színe hover állapotban a gombon */
        text-decoration: none; /* Aláhúzás eltávolítása hover állapotban */
    }

.navbar {
    position: fixed; /* Fixen marad az oldal alján */
    bottom: 0;
    width: 100%;
    height: 70px; /* Csökkentett magasság */
    display: flex; /* Flexbox használata az elemek igazításához */
    align-items: center; /* Elemek függőleges középre igazítása */
    justify-content: space-around; /* Elemek vízszintes elosztása */
}

@media (min-width: 768px) {
    .navbar {
        /* Felülírjuk a mobil nézet pozicionálását és méretezését */
        position: fixed;
        left: 0;
        top: 0;
        bottom: auto; /* Eltávolítjuk az alsó rögzítést */
        width: 100px; /* Fix szélesség a bal oldali sávnak (állítsd be igény szerint) */
        height: 100vh; /* Teljes magasság */
        flex-direction: column !important; /* Függőleges elrendezés */
        align-items: center; /* Középre igazítás a sávon belül */
        justify-content: flex-start !important; /* Elemek igazítása a tetejére */
        padding-top: 20px; /* Kis tér a tetején */
    }

    .navbar-nav {
        flex-direction: column !important; /* A nav elemek is függőlegesen */
        width: 100%; /* Teljes szélességet foglaljon el a szülő .navbar-on belül */
    }

        .navbar-nav .nav-item {
            width: 100%; /* Az elemek foglalják el a teljes szélességet */
            margin-bottom: 15px; /* Térköz az elemek között */
        }

            /* A linkek/gombok stílusát nem kell feltétlenül módosítani, */
            /* mivel az ikon és szöveg már függőlegesen van a flex-column miatt. */
            /* De ha szükséges, itt finomhangolhatod a paddingot stb. */
            .navbar-nav .nav-item .nav-link,
            .navbar-nav .nav-item .btn-link {
                padding: 10px 0; /* Vertikális padding növelése */
            }

    .content {
        margin-left: 100px !important; /* Ugyanaz a szélesség, mint a .navbar szélessége! */
        /* Opcionálisan további paddingot is adhatsz neki */
        padding: 10px !important;
    }
}

.content {
    margin-left: 0;
    margin-bottom: 70px;
}

.notification-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    background-color: red;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 0.6rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
}

.icon-wrapper {
    position: relative; /* Szükséges a badge pozícionálásához */
    display: inline-block;
}

.nav-link.d-flex.flex-column {
    align-items: center; /* Biztosítja a vízszintes középre igazítást */
}