@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap');

body{
    background-image: url(img/pozadina.jpg);
}
main{
    overflow-x: hidden;
}
/*Carousel*/
.carouselPozadina{
    height:540px;
    /*background-image: url("img/onama.jpg");*/
}
#carouselExampleDark{
    width: 1000px;
    height: 600px;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
}
.carouselPozadina .carousel-item{
    height:600px;
}

.carouselPozadina .naziv{
    font-family: 'Balsamiq Sans', cursive;
    font-size: 34px;
   /* color: rgba(144,190,64,255);*/
    position: absolute;
    top:80px;
    left:140px;
}
.carouselPozadina .opis{
    list-style-type: none; 
    font-size: 17px;
    line-height: 2;
    position: absolute;
    left:85px;
    top:220px;
    width: 55%;
    margin:auto;
}
.carouselPozadina img{
    height: 400px;
    width: 400px;
    position: absolute;
    top:60px;
    right: 60px;
}

/*Proizvodi sekcija*/
.container{
    padding: 0;
}
#proizvodi{
    background-color: rgba(197,217,154,0.8);
    padding: 1rem 5rem;
    margin:3rem 7rem;
    border-radius: 20px;
    box-shadow: 0 0 20px 7px rgba(0, 0, 0, 0.1);
}
#proizvodi .row{
    width: 100%;
    margin: 0%;
}
#proizvodi .title{
    font-family: 'Poppins', sans-serif;
    text-align: center;
    padding:1.5rem 0 0 0;
    font-size: 16px;
    color: rgba(64,84,30,255);
}
#proizvodi h1{
    /*background-color: #6db784 ;*/
    font-weight: 900;
    font-family: 'Balsamiq Sans', cursive;
    color: rgba(144,190,64,255);
    font-size: 32px;
    padding-bottom: 0 0 0 0;
}
#proizvodi .card{
    height: 220px;
    /*width: 18rem;*/
    box-shadow: 0 0 20px 7px rgba(0, 0, 0, 0.1);
    margin: 10px auto;
}
#proizvodi .veca-card{
    width: 260px;
}
#proizvodi .gm-card{
    width: 260px;
    height: 460px;
}
.card-body{
    padding: 0 0;
}
#proizvodi .card-title{
    text-align: center;
    line-height: 3rem;
}
.manja-card
{
    width: 195px;
}
#proizvodi .manja-card a.btn{
    font-size: 14px;
}
#proizvodi a.btn{
    font-weight: bold;
    position: absolute;
    bottom: 0px;
    font-size: 16px;
    color: rgba(144,190,64,255);
}
/*Modals*/

/*Kuda do nas*/
.kudaDoNas{
    font-family: 'Balsamiq Sans', cursive;
    color: rgba(144,190,64,255);
    padding: 0;
    margin: auto;
}
.kudaDoNas p{
    font-family: 'Poppins', sans-serif;
    color: rgba(64,84,30,255);
}
.kudaDoNas .row{
    padding: 0;
    margin:0;
}
.kudaDoNas .col-12 {
    margin-top: 10px;
    margin-bottom: 10px;
}
.kudaDoNasTekst{
    text-align: center;
    padding:1.5rem 0 0 0;
    font-size: 16px;
}

@media (max-width: 1000px) { 
    #proizvodi .container {
        align-content: center;
        
    }
    #proizvodi{
        margin:0rem;
        padding: 0rem;
    }
    #proizvodi .mobcard a.btn{
        font-size: 14px;
        padding-bottom: 0%;
        margin-bottom: 0%;
    }
    #proizvodi .veca-card{
        width: 160px;
    }
    .mobcard{
        width: 160px;
    }
    .mobcard img{
        margin: 0;
        padding: 0;
        width: 158.67px;
    }
    #proizvodi .title p{
        margin-bottom: 0;
    }
    .carouselPozadina{
        margin-top:60px;
        width:100%;
        height:340px;
    }
    .proizvodiOdSoje{
        content:url("img/proizvodi/cardPozadine/proizvodiOdSojeCardMob.jpg")
    }
    .uljaSircaSosevi{
        content: url("img/proizvodi/cardPozadine/uljaSircaSoseviCardMob.jpg");
    }
    .razniDodaciIshrani{
        content: url("img/proizvodi/cardPozadine/dodaciIshraniMob.jpg");
    }
    .zdravijiNamazi{
        content: url("img/proizvodi/cardPozadine/zdravijiNamaziCardMob.jpg");
    }
    .brasnaTjestenina{
        content: url("img/proizvodi/cardPozadine/brasnoTjesteninaCardMob.jpg");
    }
    .zdravijiSlatkisi{
        content: url("img/proizvodi/cardPozadine/zdravijiSlatkisiCardMob.jpg");
    }
    .zdravijiZasladjivaci{
        content: url("img/proizvodi/cardPozadine/proizvodiOdZitaricaCardMob.jpg");
    }
    .kozmetikaHigijena{
        content: url("img/proizvodi/cardPozadine/kozmetikaHigijenaCardMob.jpg");
    }
    #carouselExampleDark{
        width:360px;
        height:340px;
    }
    .carousel-inner{
        width:360px;
        height:340px;
    }
    
    .carousel-item{
        width:360px;
        height:340px;
    }
    .carousel-item.active{
        width:360px;
        height:340px;
    }
    .carouselPozadina .naziv{
        font-size: 20px;
        position: absolute;
        top:20px;
        left:40px;
    }
    .carouselPozadina .opis{
        font-size: 12px;
        line-height: 1;
        position: absolute;
        left:15px;
        top:90px;
        width: 50%;
        margin:auto;
    }
    .carouselPozadina img{
        height: 150px;
        width: 150px;
        position: absolute;
        top:90px;
        right:25px;
    }
}