/* opcenito */

body {
    background-color: #fffbf4;
    font-family: 'Cardo', serif;
    /* font-family: 'Gilda Display', serif; */
}

header, footer {
    background-color: #f5ebdb;
}



/* header */

header .navbar-brand {
    font-size: 18px;
}

.nav-link {
    display: block;
    color: black;
    padding: 10px 20px;
    text-align: center;
}



.nav-link:hover, .nav-link:active {
    color: rgb(216, 147, 53);
}




.nav-item, .nav-link:focus {
    color: black;
    
}

header a, header a:visited, header a:hover {
    color: black;
}




/* slider */

.carousel-caption h5 {
    font-size: 4vw;
    padding-bottom: 32%;
    
}

.carousel-item img {
    width: 100%;
    
}


/* sec1 */

.sec1 {
    text-align: center;
}

.sec1 span {
    font-size: 24px;
}


/* sec2 */

.sec2 .gumb {
    width: 250px;
}

 .gumb {
    width: 200px;
    margin: 0 auto;
    border: 1px solid rgb(41, 41, 41);
    background-color: rgb(41, 41, 41);
    color: #f5f0e9;
    padding: 10px 20px;
    border-radius: 30px;
    text-align: center;
}

.gumb:hover {
    color: rgb(41, 41, 41);
    background-color: #f5f0e9;
    transition: all linear 0.5s;
}

.sec2 a,.sec2 a:visited {
    text-decoration: none;
    
}

.sec2 p {
    text-align: center;
}

/* sec3 */

.sec3 .lijevo img {
    width: 50%;
}

.sec3 .lijevo {
    text-align: center;
}

.sec3 .vr {
    height: 80%;
    text-align: center;
}

.sec3 .sredina {
    text-align: center;
}

.sec3 .desno img {
    max-width: 60%;
    z-index: 3;
}

.sec3 .desno .preko {
    position: relative;
    left: 40%;
    bottom: 70px;
}

.sec3 .desno .cvijet {
    width: 25%;
    position: relative;
    right: 55%;
    transform: rotate(-50deg);
}

/* sec4 */

.sec4 .lijevo {
    text-align: center;
}

.sec4 .lijevo img {
    width: 60%;
    
}

.sec4 .desno h3{
    text-align: right;
    font-size: 35px;
    font-weight: normal;
}

.sec4 .desno img {
    width: 40%;
}

.sec4 .desno .preko {
    position: relative;
    left: 30%;
    bottom: 90px;
}


.sec4 .desno .cvijet {
    width: 20%;
    position: relative;
    right: 37%;
    bottom: 50px;
    
}

.sec4 .lijevo, .sec4 .desno {
    padding: 0 !important ;
}


/* sec5 */

.sec5 {
    text-align: center;
}

.sec5 article {
    padding: 0 !important;
}


.sec5 figure img {
    width: 50%;
}

.sec5 .cvijet {
    width: 10%;
    
}

.sec5 a, .sec5 a:active, .sec5 a:hover, .sec5 a:visited {
    text-decoration: none;
    color: black;
    font-size: 22px;
}

.sec5 a .gumb {
    font-size: 16px;
}

/* sec6 */

.sec6 figure img {
    width: 100%;
}

.sec6 .i1 {
    position: relative;
    left: 5vw;
    z-index: 3;
}

.sec6 .i2 {
    position: relative;
    right: 3%;
    bottom: 6vh;
    z-index: 1;
}

.sec6 .i3 {
    width: 40%;
    position: relative;
    right: 15%;
    bottom: 13%;
}

.sec6 .i4 {
    position: relative;
    right: 89%;
}

.sec6 .i5 {
    width: 50%;
    position: relative;
    left: 330%;
    bottom: 80%;
}

.sec6 .i6 {
    width: 50%;
    position: relative;
    left: 250%;
    top: 10%;
}

.sec6 .i7 {
    
    position: relative;
    left: 30%;
    top: 10%;
}

.sec6 h2 {
    width: 30%;
    font-size: 40px;
    position: relative;
    left: 30%;
    bottom: 200px;
}

.sec6 p {
    text-align: justify;
    width: 50%;
    margin: 0 auto;
    position: relative;
    bottom: 100%;
}

/* footer */

footer {
    text-align: center;
    padding: 15px 0px;
}

footer p {
    margin: 0 !important;
    font-size: 13px;
}

footer a, footer a:visited {
    text-decoration: none;
    color: rgb(41, 41, 41);
    font-size: 15px;
}

footer a:hover {
    color: rgb(216, 147, 53);
}

/* mobile */

@media (max-width:576px) {
    .nav-link {
        display: block;
        padding: 10px 100%;    
    }

    header .navbar-brand {
        font-size: 3vw;
    }

    .nav-item {
        margin: 0 auto;
        width: 90vw;
    }
}


@media (max-width:992px) {
 

    /* slider */

    .carousel-caption h5 {
        padding-bottom: 22%;
    
    }

    /* sec3 */

    .sec3 .sredina {
        display: none;
    }

    .sec3 img {
        width: 100%;
        
    }
    
    .sec3 .desno img  {
        max-width: 100%;
        
    }

    .sec3 .desno .cvijet {
        display: none;
    }

    .sec3 .desno .preko, .sec3 .desno .cvijet {
        position: static;
        
    }

    .sec3 p {
        display: none;
    }

    .sec3 .gumb {
        margin-top: 20px;
    }
    
    /* sec4 */

    .sec4 .cvijetmob {
        max-width: 30%;
        margin: 0 auto;
        padding-bottom: 20px;
    }

    .sec4 p {
        width: 80%;
        margin: 0 auto;
    }

.sec4 .lijevo {
    text-align: center;
}

.sec4 .lijevo img {
    width: 80%;
    padding-top: 20px;
}

.sec4 .desno h3, .sec4 .desno p{
    text-align: center;
}

.sec4 .desno img {
    width: 80%;
    margin: 0 auto;
}

.sec4 .desno .preko {
    position: static;
    
}


.sec4 .desno .cvijet {
    display: nonew;
    
}

.sec4 .lijevo, .sec4 .desno {
    text-align: center;
}

/* sec5 */

.sec5 .cvijet {
    width: 20%;
    margin: 0 auto;
}

.beige {
    background-color: #f5f0e9;
}


/* sec6 */

.sec6 {
    text-align: center;
    margin: 0 auto;
}



.sec6 .i1, .sec6 .i2, .sec6 .i3, .sec6 .i4, .sec6 .i5, .sec6 .i6, .sec6 .i7{
    position: static;
    
}


.sec6 .skupa  {
    display: flex;
    justify-content: space-between;
}

.sec6 .skupa img {
    width: 48%;
}


.sec6 h2 {
    display: none;
}

.sec6 p {
    text-align: justify;
    width: 80%;
    margin: 0 auto;
    position: static;
}

}

@media (min-width:577px) and (max-width:768px) {
    .nav-link {
        text-align: left;
        
    }

        /* slider */

        .carousel-caption h5 {
            padding-bottom: 25%;
        }
    
}