body 
{
    margin: 0rem;
    background-color: #edecec;

    font-family: "Asul", serif;
    font-weight: 400;
    font-style: normal;
}

a:hover
{
    transform: scale(1.05);
    opacity: 90%;
}

/***************** NAV & HERO SEKCIJA *****************/
/********************************************************/
/********************************************************/
/********************************************************/

@keyframes info_an 
{
    0% 
    {
        transform: translateX(70rem);
    }

    100%
    {
        transform: translateX(-70rem);
    }
}

nav 
{
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    color: white;
    gap: 3rem;
    position: sticky;
    top: 0rem;  
    z-index: 2;
}

.nav_ostalo
{
    position: sticky;
    top: 0rem;
    z-index: 2;
}

.info_bar
{
    transform: translateX(70rem);
    animation-name: info_an;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    padding: 0.2rem;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.info_bar_rod 
{
    background-color: rgb(110, 0, 0);
}

.info_bar a 
{
    color: white;
}

.fav 
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.fav:hover
{
    transform: scale(1.05);
}

.ponude_nav 
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 2rem;
    background-color: #1d1d1d;
    height: 3.5rem;
}

.ponude_nav a
{
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
}

#pretraga 
{
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: none;
}

/***************** PONUDE *****************/
/********************************************************/
/********************************************************/
/********************************************************/

#ime_sekcije 
{
    margin: 2.5rem;
    font-size: 2rem;
}

#opis_sekcije 
{
    margin: 2.5rem;
    font-size: 1.3rem;
}

.sve_ponude_sekcije 
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.ponuda_sekcije 
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #e6e6e6;
    width: 15rem;
    height: 32rem;
    padding: 1rem;
    border: 0.1rem solid rgb(209, 207, 207);
}

.ponuda_sekcije p 
{
    width: 14rem;
}

.ponuda_sekcije h2{
    text-align: center;
}

.ponuda_sekcije:hover 
{
    transform: scale(1.005);
    background-color: #e4e3e3;
    box-shadow: 2px 2px 7px gray;
}

.cene_pre_posle 
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.cene_pre_posle h2
{
    font-size: 1.5rem;
}

.dugmad
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.dugmad button{
    background-color: rgb(223, 223, 223);
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 0.1rem solid gray;
    width: 4rem;
}

.dugmad button:hover 
{
    transform: scale(1.05);
}

#saznaj_vise
{
    text-decoration: none;
}

#pogledaj_vise_ponude
{
    text-decoration: none;
    color: gray;
    margin-left: 2.5rem;
    font-size: 1.2rem;
}

#laptop 
{
    width: 10rem;
    height: 6rem;
}

/***************** GRADOVI *****************/
/********************************************************/
/********************************************************/
/********************************************************/

.mapa_div
{
    display: flex;
    justify-content: left;
    align-items: center;
    margin-left: 2.5rem;
    flex-direction: row;
    gap: 3.5rem;
}

video
{
    width: 55rem;
    box-shadow: rgb(82, 81, 81) 2px 2px 15px;
}

.gradovi 
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0.9rem;
    height: 32rem;
    gap: 1.5rem;
    border-radius: 0.5rem;
    overflow: scroll;
}

.gradovi a
{
    text-decoration: none;
    color: white;
    background-color: #2a2b2a;
    padding: 1rem;
    border-radius: 0.5rem;
    width: 10rem;
    text-align: center;
    font-size: 1rem;
    box-shadow: rgb(82, 81, 81) 2px 2px 10px;
}

/***************** KONATKT *****************/
/********************************************************/
/********************************************************/
/********************************************************/

form 
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.5rem;
}

form input 
{
    width: 35rem;
    height: 3rem;
    text-align: left;
    padding: 0.5rem;
    background-color: rgb(255, 255, 255);
    border-radius: 0.5rem;
    border: none;
}

form button 
{
    text-decoration: none;
    color: white;
    background-color: #8e8f8e;
    padding: 1rem;
    border-radius: 0.5rem;
    width: 20rem;
    text-align: center;
    font-size: 1rem;
    border: none;
    box-shadow: rgb(82, 81, 81) 2px 2px 10px;
}

form button:hover
{
    transform: scale(1.05);
    opacity: 90%;
}

form button:active
{
    background-color: green;
}

#poruka_input
{
    height: 8rem;
}

.kontakt 
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
}

.kontakt_div
{
    background-color: #d9d9d9;
    padding-top: 0.5rem;
    padding-bottom: 3rem;
}

#poruka_poslata
{
    text-align: center;
}

#slanje_dugme 
{
    width: 12rem;
    padding: 1rem;
    font-size: 1.2rem;
    border-radius: 0.5rem;
    border: none;
    box-shadow: 2px 2px 2px black;
}

#slanje_dugme:hover 
{
    transform: scale(1.04);
    opacity: 90%;
}

#slanje_dugme:active 
{
    opacity: 80%;
}

/***************** PITANJA *****************/
/********************************************************/
/********************************************************/
/********************************************************/

.FAQ 
{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 2.5rem;
}

.FAQ summary
{
    font-size: 1.5rem;
}

.FAQ p
{
    font-size: 1.2rem;
    width: 36em;
}

.app_rod
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#app_slika
{
    width: 25rem;
}

.button_app_div a
{
    text-decoration: none;
    color: white;
    background-color: #2a2b2a;
    padding: 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
    font-size: 1.5rem;
    box-shadow: rgb(82, 81, 81) 2px 2px 15px;

    animation-name: animacija_dugme;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.button_app_div
{
    display: flex;
    justify-content: center;
    align-items: center;
}

.GDE_NAS_NACI
{
    background-color: #d9d9d9;
    padding: 0.5rem;
}

/***************** FOOTER *****************/
/********************************************************/
/********************************************************/
/********************************************************/

footer
{
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
}

footer p 
{
    font-size: 1.3rem;
}

.drustvene_mreze
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.drustvene_mreze img 
{
    width: 3rem;
    height: 3rem;
}

.drustvene_mreze img:hover
{
    transform: scale(1.05);
    opacity: 90%;
}

.kartice img
{
    height: 1.5rem;
    border: 1rem;
}

.kartice 
{
    display: flex;
    gap: 1rem;
}

/***************** BUNDLE I REKLAME *****************/
/********************************************************/
/********************************************************/
/********************************************************/

@keyframes animacija_dugme
{
    0%
    {
        transform: scale(1.0);
    }

    100%
    {
        transform: scale(1.2);
    }
}

.bundle
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin: 1.5rem;
    gap: 2rem;
}

.bundle img:hover 
{
    transform: scale(1.005);
    box-shadow: 2px 2px 7px gray;
    opacity: 90%;
}

#hero
{
    width: 79.1rem;
    height: 46rem;
}

#bundle
{
    width: 36rem;
    height: 21rem;
}

#soba 
{
    width: 75rem;
    border-radius: 0.5rem;
}

/***************** KORPA *****************/
/********************************************************/
/********************************************************/
/********************************************************/

#naslov_korpa, #status_korpe{
    margin-left: 2.5rem;
}

.POLJA{
    margin: 2.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}

.POLJA p{
    background-color: white;
    padding: 1.5rem;
    width: 10rem;  
    font-size: 1.2rem; 
    border-radius: 0.5rem;
    box-shadow: 2px 2px 7px gray;
}

#prikaz_korpe, #reset{
    padding: 0.5rem;
    width: 8rem;
    margin-left: 2.5rem;
}

#cena_ukupno{
    margin: 2.5rem;
    font-size: 1.2rem;
}

.PAYMENT{
    border: 0.1rem solid gray;
    margin: 2.5rem;
    padding: 1rem;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;

    gap: 1.5rem;
}

select{
    font-size: 1.3rem;
    padding: 0.5rem;
}

#pay{
    padding: 0.5rem;
}

/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/

ul 
{
    font-size: 1.5rem;
}

.cene
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin: 2.5rem;
    gap : 2rem;
    background-color: #e6e6e6;
    border: 0.1rem solid rgb(209, 207, 207);
}

.custom_naslov 
{
    width: 95vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 2.5rem;
}

.custom_naslov h1 
{
    font-size: 3rem;
}

.custom_naslov p 
{
    font-size: 1.2rem;
}

.CUSTOM_DIV 
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 2rem;
}

.CUSTOM_DIV img 
{
    width: 40rem;
}

.unos 
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 1rem;
}

.unos p 
{
    color : rgb(0, 0, 0);
}

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

.PC p 
{
    font-size: 1.5rem;
    padding: 1rem;
    background-color: #d5d6d5;
    border-radius: 1rem;
}

.unos input 
{
    width: 25rem;
    height: 2rem;
    text-align: left;
    padding: 0.5rem;
    background-color: rgb(255, 255, 255);
    border-radius: 0.5rem;
    border: none;
}

.UNOS_KOMP
{
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

#konacno 
{
    width: 8rem;
    padding: 0.5rem;
}

.katalog 
{
    display: flex;
    justify-content: center;
    align-items: center;
}

#katalog 
{
    font-size: 1.5rem;
}

/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/

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

.unos_cene
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 1rem;
}

.unos_cene input 
{
    width: 20rem;
    height: 2rem;
    text-align: left;
    padding: 0.5rem;
    background-color: rgb(255, 255, 255);
    border-radius: 0.5rem;
    border: none;
}

.cena_rac
{
    display: flex;
    justify-content: center;
    align-items: center;
}

.RATE 
{
    margin: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}

.RATE div 
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #e6e6e6;
    padding: 2rem;
    border: 0.1rem solid rgb(209, 207, 207);
    border-radius: 0.5rem;
}

.RATE div:hover 
{
    transform: scale(1.005);
    background-color: #e4e3e3;
    box-shadow: 2px 2px 7px gray;
}

/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/ 
/*************RESPONSIVE DIZAJN ZA TELEFON***************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/

@media (max-width: 767px)
{
    /***************** PONUDE *****************/
    /********************************************************/
    /********************************************************/
    /********************************************************/

    #ime_radnje{
        font-size: 1rem;
    }

    .sve_ponude_sekcije 
    {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    #ime_sekcije 
    {
        margin: 2.5rem;
        font-size: 2rem;
        text-align: center;
    }

    #opis_sekcije 
    {
        margin: 1.5rem;
        font-size: 0.8rem;
        text-align: center;
    }

    .ponuda_sekcije 
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #e6e6e6;
        width: 25vw;
        height: 22rem;
        padding: 2rem;
        border: 0.1rem solid rgb(209, 207, 207);
    }

    .ponuda_sekcije p 
    {
        width: 30vw;
        font-size: 0.5rem;
    }

    .ponuda_sekcije h2{
        text-align: center;
        font-size: 1.2rem;
    }

    .ponuda_sekcije:hover 
    {
        transform: scale(1.005);
        background-color: #e4e3e3;
        box-shadow: 2px 2px 7px gray;
    }

    .cene_pre_posle 
    {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }

    .cene_pre_posle h2
    {
        font-size: 1rem;
    }

    .dugmad
    {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }

    .dugmad button{
        background-color: rgb(223, 223, 223);
        padding: 0.2rem;
        border-radius: 0.5rem;
        border: 0.1rem solid gray;
        width: 2rem;
        font-size: 0.5rem;
    }

    .dugmad button:hover 
    {
        transform: scale(1.05);
    }

    #saznaj_vise
    {
        text-decoration: none;
    }

    #pogledaj_vise_ponude
    {
        text-decoration: none;
        color: gray;
        margin-left: 2.5rem;
        font-size: 1rem;
    }

    #laptop 
    {
        width: 6rem;
        height: 6rem;
    }

    /***************** GRADOVI *****************/
    /********************************************************/
    /********************************************************/
    /********************************************************/

    .mapa_div
    {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        margin: 2.5rem;
        gap: 0.5rem;
    }

    video
    {
        width: 90vw;
        box-shadow: rgb(82, 81, 81) 2px 2px 15px;
    }

    .gradovi 
    {
        display: none;
    }

    .gradovi a
    {
        text-decoration: none;
        color: white;
        background-color: #2a2b2a;
        padding: 0.5rem;
        border-radius: 0.5rem;
        width: 3rem;
        text-align: center;
        font-size: 0.7rem;
        box-shadow: rgb(82, 81, 81) 2px 2px 10px;
    }

    /***************** KONATKT *****************/
    /********************************************************/
    /********************************************************/
    /********************************************************/

    form 
    {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1rem;
    }

    form input 
    {
        width: 80vw;
        height: 3rem;
        text-align: left;
        padding: 0.5rem;
        background-color: rgb(255, 255, 255);
        border-radius: 0.5rem;
        border: none;
    }

    form button 
    {
        text-decoration: none;
        color: white;
        background-color: #8e8f8e;
        padding: 1rem;
        border-radius: 0.5rem;
        width: 20vw;
        text-align: center;
        font-size: 1rem;
        border: none;
        box-shadow: rgb(82, 81, 81) 2px 2px 10px;
    }

    form button:hover
    {
        transform: scale(1.05);
        opacity: 90%;
    }

    form button:active
    {
        background-color: green;
    }

    #poruka_input
    {
        height: 8rem;
    }

    .kontakt 
    {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 2rem;
    }

    .kontakt_div
    {
        background-color: #d9d9d9;
        padding-top: 0.5rem;
        padding-bottom: 3rem;
    }

    #poruka_poslata
    {
        text-align: center;
    }

    #slanje_dugme 
    {
        width: 5rem;
        padding: 1rem;
        font-size: 1rem;
        border-radius: 0.5rem;
        border: none;
        box-shadow: 2px 2px 2px black;
    }

    #slanje_dugme:hover 
    {
        transform: scale(1.04);
        opacity: 90%;
    }

    #slanje_dugme:active 
    {
        opacity: 80%;
    }

    /***************** PITANJA *****************/
    /********************************************************/
    /********************************************************/
    /********************************************************/

    .FAQ 
    {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 0.5rem;
        margin: 2.5rem;
    }

    .FAQ summary
    {
        font-size: 1.2rem;
        margin: 2.5rem;
        max-width: 80vw;
        text-align: center;
    }

    .FAQ p
    {
        font-size: 0.8rem;
        margin: 2.5rem;
        max-width: 80vw;
        text-align: center;
    }

    .app_rod
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 2.5rem;
    }

    #app_slika
    {
        width: 55vw;
    }

    .button_app_div a
    {
        text-decoration: none;
        color: white;
        background-color: #2a2b2a;
        padding: 1.5rem;
        border-radius: 0.5rem;
        text-align: center;
        font-size: 1.5rem;
        box-shadow: rgb(82, 81, 81) 2px 2px 15px;

        animation-name: animacija_dugme;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }

    .button_app_div
    {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .GDE_NAS_NACI
    {
        background-color: #d9d9d9;
        padding: 0.5rem;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 0rem;
    }

    /***************** KORPA *****************/
    /********************************************************/
    /********************************************************/
    /********************************************************/

    #naslov_korpa, #status_korpe{
        margin-left: 1.5rem;
        text-align: center;
    }

    .POLJA{
        margin: 2.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .POLJA p{
        background-color: white;
        padding: 1rem;
        width: 6rem;  
        font-size: 0.8rem; 
        border-radius: 0.5rem;
        box-shadow: 2px 2px 7px gray;
    }

    #prikaz_korpe{
        padding: 0.5rem;
        width: 5rem;
        font-size: 0.8rem;
    }

    .PRIKAZ_KORPE{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        margin: 2.5rem;
    }

    #cena_ukupno{
        margin: 2.5rem;
        font-size: 1.2rem;
    }

    .PAYMENT{
        border: 0.1rem solid gray;
        margin: 2.5rem;
        padding: 1rem;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        gap: 1.5rem;
    }

    select{
        font-size: 1.3rem;
        padding: 0.5rem;
    }

    #pay{
        padding: 0.5rem;
    }

    /***************** BUNDLE I REKLAME *****************/
    /********************************************************/
    /********************************************************/
    /********************************************************/

    @keyframes animacija_dugme
    {
        0%
        {
            transform: scale(1.0);
        }

        100%
        {
            transform: scale(1.2);
        }
    }

    .bundle
    {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 2.5rem;
        gap: 2rem;
    }

    .bundle img:hover 
    {
        transform: scale(1.005);
        box-shadow: 2px 2px 7px gray;
        opacity: 90%;
    }

    #hero
    {
        width: 100vw;
        height: 30vh;
    }

    #bundle
    {
        width: 90vw;
        height: 13rem;
    }

    #soba 
    {
        width: 90vw;
        border-radius: 0.5rem;
    }

    /***************** FOOTER *****************/
    /********************************************************/
    /********************************************************/
    /********************************************************/

    footer
    {
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: white;
    }

    footer p 
    {
        font-size: 0.8rem;
    }

    .drustvene_mreze
    {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }

    .drustvene_mreze img 
    {
        width: 2rem;
        height: 2rem;
    }

    .drustvene_mreze img:hover
    {
        transform: scale(1.05);
        opacity: 90%;
    }

    .kartice img
    {
        height: 1rem;
        border: 1rem;
    }

    .kartice 
    {
        display: flex;
        gap: 1rem;
    }

    /***************** NAV & HERO SEKCIJA *****************/
    /********************************************************/
    /********************************************************/
    /********************************************************/

    #ime_ranje{
        font-size: 1rem;
    }

    #status_korpe_nav{
        font-size: 1rem;
    }

    @keyframes info_an 
    {
        0% 
        {
            transform: translateX(70rem);
        }

        100%
        {
            transform: translateX(-70rem);
        }
    }

    nav 
    {
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        color: white;
        gap: 1rem;
        
        position: sticky;
        top: 0rem;  
        z-index: 2;
    }

    .nav_ostalo
    {
        position: sticky;
        top: 0rem;
        z-index: 2;
    }

    .info_bar
    {
        display: none;
    }

    .info_bar_rod 
    {
        background-color: rgb(110, 0, 0);
    }

    .info_bar a 
    {
        color: white;
    }

    .fav 
    {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }

    .fav:hover
    {
        transform: scale(1.05);
    }

    .ponude_nav 
    {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 0.5rem;
        background-color: #1d1d1d;
        height: 3.5rem;
    }

    .ponude_nav a
    {
        color: white;
        text-decoration: none;
        font-size: 0.6rem;
    }

    #pretraga 
    {
        padding: 0.2rem;
        border-radius: 0.5rem;
        width: 30vw;
        border: none;
    }

    /********************************************************/
    /********************************************************/
    /********************************************************/
    /********************************************************/
    /********************************************************/
    /********************************************************/
    /********************************************************/
    /********************************************************/

    li
    {
        font-size: 0.8rem;
        width: 40vw;
    }

    #ime_sekcije{
        font-size: 1.5rem;
    }

    .cene
    {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap : 0rem;
        background-color: #e6e6e6;
        border: 0.1rem solid rgb(209, 207, 207);

        width: 100vw;
        overflow: scroll;
    }

    .cene_rod{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .custom_naslov 
    {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 2.5rem;
        width: 90vw;
    }

    .custom_naslov h1 
    {
        font-size: 1.5rem;
        text-align: center;
    }

    .custom_naslov p 
    {
        font-size: 0.8rem;
        text-align: center;
        max-width: 90vw;
    }

    .custom_naslov_rod{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .CUSTOM_DIV 
    {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 0.5rem;
    }

    .CUSTOM_DIV img 
    {
        display: none;
    }

    .unos 
    {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 0.5rem;
    }

    .unos p 
    {
        color : rgb(0, 0, 0);
    }

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

    .PC p 
    {
        font-size: 1.2rem;
        padding: 1rem;
        background-color: #d5d6d5;
        border-radius: 1rem;
    }

    .unos input 
    {
        width: 60vw;
        height: 1rem;
        text-align: left;
        padding: 0.5rem;
        background-color: rgb(255, 255, 255);
        border-radius: 0.5rem;
        border: none;
    }

    .UNOS_KOMP
    {
        display: flex;
        gap: 0.5rem;
        flex-direction: column;
    }

    #konacno 
    {
        width: 6rem;
        padding: 0.5rem;
    }

    .katalog 
    {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #katalog 
    {
        font-size: 1rem;
    }

    /********************************************************/
    /********************************************************/
    /********************************************************/
    /********************************************************/
    /********************************************************/
    /********************************************************/
    /********************************************************/
    /********************************************************/

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

    .naslov_opis h1{
        font-size: 1.5rem;
        text-align: center;
    }

    .naslov_opis p{
        font-size: 0.8rem;
        text-align: center;
        margin-left: 2.5rem;
        margin-right: 2.5rem;
    }

    .unos_cene
    {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 1rem;
    }

    .unos_cene input 
    {
        width: 10rem;
        height: 1rem;
        text-align: left;
        padding: 0.5rem;
        background-color: rgb(255, 255, 255);
        border-radius: 0.5rem;
        border: none;
    }

    .cena_rac
    {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .cena_rac_rod{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1.5rem;
    }

    #cena_ispis{
        font-size: 1rem;
    }

    .RATE 
    {
        margin: 2.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .RATE div 
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #e6e6e6;
        padding: 1rem;
        border: 0.1rem solid rgb(209, 207, 207);
        border-radius: 0.5rem;
        width: 6rem;
        height: 8rem;
    }

    .RATE div:hover 
    {
        transform: scale(1.005);
        background-color: #e4e3e3;
        box-shadow: 2px 2px 7px gray;
    }

    .rata h1{
        font-size: 1.5rem;
    }

    .rata p{
        font-size: 0.8rem;
    }
}   

/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/ 
/*************RESPONSIVE DIZAJN ZA TABLET****************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/
/********************************************************/


@media (min-width: 768px) and (max-width: 1024px)
{
    #hero
    {
        width: 100vw;
        height: 30rem;
    }

    #bundle
    {
        width: 90vw;
        height: 25rem;
    }

    .bundle
    {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 1.5rem;
        gap: 2rem;
    }

    .sve_ponude_sekcije 
    {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem;
    }

    .mapa_div
    {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 2.5rem;
        flex-direction: row;
        gap: 3.5rem;
    }

    video
    {
        width: 90vw;
        box-shadow: rgb(82, 81, 81) 2px 2px 15px;
    }

    .gradovi 
    {
        display: none;
    }

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

    #app_slika
    {
        width: 50vw;
    }

    .cene
    {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 2.5rem;
        gap : 2rem;
        background-color: #e6e6e6;
        border: 0.1rem solid rgb(209, 207, 207);
    }

    .custom_naslov_rod{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .CUSTOM_DIV 
    {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 0.5rem;
    }

    .CUSTOM_DIV img 
    {
        display: none;
    }

    .unos 
    {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 0.5rem;
    }

    .unos p 
    {
        color : rgb(0, 0, 0);
    }

    .PC
    {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1rem;
    }

    .PC p 
    {
        font-size: 1.2rem;
        padding: 1rem;
        background-color: #d5d6d5;
        border-radius: 1rem;
    }

    .unos input 
    {
        width: 70vw;
        height: 2rem;
        text-align: left;
        padding: 1rem;
        background-color: rgb(255, 255, 255);
        border-radius: 0.5rem;
        border: none;
    }

    .RATE div 
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #e6e6e6;
        padding: 1rem;
        border: 0.1rem solid rgb(209, 207, 207);
        border-radius: 0.5rem;
        width: 8rem;
        height: 8rem;
    }

    .RATE 
    {
        margin: 2.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }

}