*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Sen', sans-serif;
    word-wrap: normal;
}

//colors

@green: #56a689;
@light-gray: #acacac;
@white: #fff;
@dark-gray: #565555;
@brown: rgb(89, 76, 64);
@pink: rgb(242, 150, 202);
@dark-green: #43816a;

//mixins

.headings(){
    font-family: 'Italianno', cursive;
    color: @brown;
    font-size: 3rem;
}

//header start

header{
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(6px);
    z-index: 10;
    #logo{
        a{
            text-decoration: none;
            img{
                width: 50px;
                display: block;
            }
            h1{
                margin-bottom: 0px;
                font-family: 'Italianno', cursive;
                color: @brown;
                margin-top:10px;
            }
        }
    }
    nav{
        ul{
            li{
                a{
                    letter-spacing: 1px;
                    color: @brown !important;
                }
            }
        }
    }
}
.carousel-caption{
    background-color: rgba(255, 255, 255, 0.75) !important;
    border-radius: 25px;
    bottom: 25% !important;
    transform: translateY(-25%);
    h5{
        color: rgb(54, 47, 39);
        font-weight: bold;
    }
    p{
        color: rgb(54, 47, 39);
    }
    a{
        color: rgb(54, 47, 39);
        border-color: rgb(54, 47, 39);
        font-weight: bold;
    }
}
#about{
    .row{
        .img{
            img{
                width: 100%;
            }
        }
        .text{
            flex-direction: column;
            justify-content: space-around;
            .text1{
                color: @brown;
                margin-bottom: 20px;
            }
            .text2{
                color: @dark-gray;
                span{
                    color: @dark-green;
                    display: block;
                    margin-bottom: 10px;
                }
            }

        }
    }
}
#best{
    .row{
        .col-12{
            h2{
                .headings();
            }
        }
    }
}
.card{
    width:96%;
    margin: 0px auto;
    margin-bottom: 0px;
    .card-body{
        p{
            color: @dark-gray;
        }
        a, .d-inline{
            color: @dark-green;
        }
    }
}
#under20, #contact-us{
    width:100%;
    .row{
        .under{
            font-size: 18px;
            color:@white;
            background-color: @dark-green;
            border-radius: 5px;
            a{
                color: @white;
            }
        }
    }
}
.top-img{
    border-radius: 20px 0px 20px 0px;
}
.text-block-top{
    border-radius: 0px 20px 0px 0px;
    border-top: 1px solid @light-gray;
}
.text-block-bottom{
    border-radius: 0px 0px 0px 20px;
    border-bottom: 1px solid @light-gray;
}
.top-img2{
    border-radius: 20px 0px 0px 0px;
    border-top: 1px solid @light-gray;
}
.bottom-img2{
    border-radius: 0px 0px 20px 0px;
    border-bottom: 1px solid @light-gray;
}
.bg-nd{
    background-color: rgba(@green, 0.0);
}
.headings{
    .headings();
}
.green{
    color: @dark-green !important;
}
.brown-btn{
    width:fit-content;
    color: @dark-gray !important;
    border-color: @dark-gray !important;
}
.darkgray{
    color: @dark-gray;
}
footer{
    border-top: 1px solid @light-gray;
    p{
        color: @dark-gray;
        font-size: 13px;
    }
    ul{
        list-style-type: none;
        li{
            a{
                color: @dark-gray;
            }
        }
    }
}

//bouquets

#cover2{
    border-bottom: 1px dotted @light-gray;
   .cover3{
    background-image: url('../img/cover20.jpg');
    height: 270px;
    background-size: cover;
   }
   .tekst2{
    p{
       color: @brown;
    }
   }
}
#modaldugme{
    background-color: transparent;
    border: none;
    color:@dark-green;
    text-decoration: underline;
    i{
        margin-right: 2px;
    }
}
#roses{
    scroll-margin-top: 58px;
}
#soft, #under, #summer{
    scroll-margin-top: 50px;
}

//contact

#forma{
    padding-top: 58px;
    .forma-block{
        background-image: url('../img/cover2.jpg');
        background-size: cover;
        background-attachment: fixed;
        border-radius: 5px;
        form{
            input, textarea{
                width: 80%;
                margin-bottom: 15px;
                padding: 3px;
                margin: 10px auto;
            }
            input:first-child{
                margin-top: 30px;
            }
            input:last-child{
                margin-bottom: 30px;
            }
        }
    }
    h2{
        .headings();
    }
    a, p{
        color: @dark-gray;
        text-align: center;
    }
    .ikonice{
        a{
            margin: 0px 5px;
        }
    }
    #submit{
        background-color: @dark-green;
        color: @white;
        border: none;
    }
}

//author

#author-info{
    padding-top: 80px;
    margin-bottom: 20px;
    img{
        width: 90%;
        
    }
    h3{
        .headings();
    }
    .info-text{
        p:nth-child(odd){
            margin-bottom: 4px;
            text-decoration: underline;
        }
        p{
            font-size: 18px;
            color: @dark-gray;
        }
    }
}

//responsive

@media screen and (max-width: 769px){
    #cover{
        top: 55px !important;
        #carouselExampleAutoplaying{
            .carousel-inner{
                .carousel-item{
                    .carousel-caption{
                        display: block !important;
                        h5{
                            font-size: 28px;
                        }
                        p{
                            font-size: 18px;
                        }
                    }
                }
            }
        }
    }
    #about{
        .row{
            .img{
                margin-top: 60px;
            }
            .text{
                margin-bottom: 30px;
                .text2{
                    font-size: 16px;
                }
    
            }
        }
    }
}
@media screen and (max-width: 601px){
    #under20{
        .row{
            .col-md-6{
                margin-bottom: 0px;
                transform: skewx(0deg);
                h3{
                    transform: skewX(0deg);
                    font-size: 20px;
                }
                a{
                    transform: skewX(0deg);
                    margin: 8px auto;
                    font-size: 14px;
                    padding: 5px 7px;
                }
                p{
                    transform: skewX(0deg);
                    margin: 8px auto;
                    font-size: 15px;
                }
            }
            .first-col1{
                border-radius: 0px 0px 20px 20px;
                order: 2;
            }
            .second-col2{
                border-radius: 20px 20px 0px 0px;
                order: 1;
            }
        }
    }
    #under20{
        padding-bottom: 2rem !important;
    }
    #new-block{
        .text-block-bottom{
            border: none;
        }
        .text-block-top{
            border: none;
        }
        .first-one{
            order: 2;
        }
        .second-one{
            order: 1;
        }
    }
    #cover2{
        .tekst2{
            p{
                font-size: 20px;
            }
        }
    }
    .tekst-kontakt{
        order:2;
    }
    #forma{
        order:1;
    }
    #author-info{
        .info-text{
            p{
                text-align: center;
            }
        }
    }
}
@media screen and (max-width: 481px){
    h2, h3{
        font-size: 40px !important;
    }
    #cover{
        #carouselExampleAutoplaying{
            .carousel-inner{
                .carousel-item{
                    .carousel-caption{
                        bottom: 14% !important;
                        transform: translateY(-14%);
                        h5{
                            font-size: 18px;
                        }
                        p{
                            font-size: 11px;
                        }
                        a{
                            font-size: 12px;
                            padding: 3px 6px;
                        }
                    }
                }
            }
        }
    }
    #under20, #contact-us{
        .row{
            .under{
                font-size: 15px !important;
            }
        }
    }
    footer{
        p{
            font-size: 12px;
        }
    }
    #cover2{
        .cover3{
            height: 200px;
        }
    }
    #modal-blok{
        justify-content: center !important;
        #modaldugme{
            font-size: 14px;
            
        }
    }
    #forma{
        .forma-block{
            form{
                input, textarea{
                    width: 90%;
                }
            }
        }
    }
    #author-info{
        .info-text{
            p{
                font-size: 15px;
            }
        }
    }
}
@media screen and  (max-width: 376px){
    #about{
        .row{
           .text{
                .text1{
                    font-size: 21px;
                }
                .text2{
                    font-size: 13px;
                }
    
            }
        }
    }
    #under20, #contact-us{
        .row{
            .under{
                font-size: 14px !important;
            }
        }
    }
    #cover2{
        .tekst2{
            p{
                font-size: 17px;
            }
        }
    }
    .tekst-kontakt{
        p, .phone{
            font-size: 14px !important;
        }
    }
}
@media screen and (max-width: 321px){
    #cover{
        #carouselExampleAutoplaying{
            .carousel-inner{
                .carousel-item{
                    .carousel-caption{
                        bottom: 7% !important;
                        transform: translateY(-7%);
                    }
                }
            }
        }
    }
}