/*  BOJE:
    color: #1D1A16;
    color: #000000;
    color: #C34921;
    
    */


    .container-fluid { width: 100%;}

    body { 
        font-family: "Barlow", sans-serif;
        background-color: #1D1A16;
        font-size: 17px;
        line-height: 28px;
        font-weight: 200;
        color: #ffffff;
        position: relative;
        }  
    a:hover {
        text-decoration: none;
        }     

        @media (min-width: 500px) {
            body { 
                font-size: 19px;
                }  
            }

    #top-of-site-pixel-anchor {
        position: absolute;
        width: 1px;
        height: 1px;
        top: 100px;
        left: 0;
        }
    


/* SECTIONS */ 

.rv-landing {
    position: relative;
    background-color: #1D1A16;
    width: 100%;
    height: 130%;
    padding: 1px;
    overflow: hidden;
    margin-bottom: 0;
    }

    .o-meni,
    .usluge {
        position: relative;
        background-color: #36322e;
        width: 100%;
        padding: 6rem 5%;
        height: auto;
        text-align: center;
        }

        .usluge {
            position: relative;
            background-color: #1D1A16;
            text-align: center;
            }

            .popis-usluga {
                display: grid;
                grid-template: auto / 1fr;
                gap: 4rem 2rem;
            }

    @media (min-width: 992px) {

        .popis-usluga {
            grid-template: auto / repeat(2, 1fr);
        }

        .rv-landing {
            height: 140%;
            }
    }

    @media (min-width: 1200px) {

        .rv-landing {
            height: 114vh;
            }
            .usluge {
                padding: 12rem 3%;
            }

            .o-meni {
                padding: 6rem 22%;
                }

            .popis-usluga {
                grid-template: auto / repeat(3, 1fr);
                gap: 6rem 4rem;
            }
        }

    @media (min-width: 1600px) {
            .usluge {
                padding: 12rem 10%;
            }
            .o-meni {
                padding: 6rem 28%;
            }
        }

    @media (min-width: 1922px) {
            .usluge {
                padding: 12rem 22%;
            }

            .o-meni {
                padding: 6rem 32%;
            }
        }


/* ELEMENTI */ 

.red-box1,
.red-box2,
.gray-circle {
    position: absolute;
    background-color: #C34921;
    }

.red-box1 {
    width: 14.8%;
    aspect-ratio: 1/0.88;
    top: 0;
    left: 24%;
    }

.gray-circle {
    position: absolute;
    background-color: #cfcfcf29;
    width: 112%;
    aspect-ratio: 1/1;
    top: 34%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    }

.red-box2 {
    width: 3%;
    aspect-ratio: 1/29;
    top: 40%;
    right: 0;
    }
    
    @media (min-width: 1200px) {
        .red-box1 {
            width: 4.8%;
            left: 448px;
        }
        .red-box2 {
            width: 2.6%;
            aspect-ratio: 1/8;
            }
        .gray-circle {
            background-color: #cfcfcf14;
            width: 77%;
            top: unset;
            bottom: -70%;
            left: 29%;
            }
    }

    @media (min-width: 1600px) {
        .red-box1 {
            width: 4.8%;
            left: 448px;
        }
        .red-box2 {
            width: 2.6%;
            aspect-ratio: 1/8;
            }

        .gray-circle {
            width: 56%;
            }
    
    }

    @media (min-width: 1920px) {
        .gray-circle {
            width: 66%;
            }
    }
    
    @media (min-width: 1922px) {

        .gray-circle {
            width: 56%;
            }
        .red-box1 {
            left: 552px;
            }
        .red-box2 {
            width: 2%;
            aspect-ratio: 1/10;
            }
    }
    

.menu {
    position: relative;
    margin: 84px 0 0 50px;
    }

.logo {
    width: 230px;
    display: block;
    }

    @media (min-width: 500px) {
        .logo {
            width: 300px;
            margin-right: 300px;
            display: inline-block;
            }
        }

.menu a {
    display: inline-block;
    }   
    
.rv-landing--content {
    margin: 10px auto 0 auto;
    margin-left: 32px;
    width: 90%;
    }
img.rozita {
    position: relative;
    margin-bottom: 20px;
    width: 108%;
    left: 46%;
    transform: translateX(-50%);
    }
.rv-landing--content--text {
    position: relative;
    width: 90%;
    margin: 0;
    }

    @media (min-width: 1200px) {
        .menu {
            margin: 83px 0 0 76px;
        }
        .logo {
            width: 300px;
            margin-right: 300px;
            }
        img.rozita {
            position: absolute;
            height: 79%;
            width: auto;
            margin: unset;
            bottom: 0;
            left: 28%;
            }
        .rv-landing--content {
            margin: 72px auto 0 auto;
            width: 75%;
            }
        .rv-landing--content--text {
            width: 52%;
            margin: 0 0 auto auto;
            }
        }

    
    @media (min-width: 1600px) {
        .menu {
            margin: 83px 0 0 76px;
        }
        .logo {
            width: 300px;
            margin-right: 300px;
            }
        img.rozita {
            height: 83%;
            }
        .rv-landing--content {
            margin: 172px auto 0 auto;
            width: 75%;
            }
        .rv-landing--content--text {
            width: 784px;
            }
        }

        @media (min-width: 1921px) {
            .menu {
                margin: 140px 0 0 114px;
                }  
            .logo {
                margin-right: 400px;
                } 
            img.rozita {
                bottom: 0;
                left: 28%;
                }
            .rv-landing--content {
                margin: 342px auto 0 auto;
                width: 68%;
                }
            .rv-landing--content--text {
                width: 910px;
                margin: 150px 0 auto auto;
                }

            }

    .my-img-fluid {
        width: 100%;
        height: auto;
        }


            footer {
                padding: 3rem 0 2rem 0;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            
            footer p {
                font-size: 15px;
                line-height: 20px;
                padding-top: 10px;
                margin-top: 10px;
                text-align: center;
                /* border-top: 1px solid #d16319; */
                width: 50%;
                color: #ffffff;
            }
            
            .foot-logo {
                width: 150px;
            }
            
            .backtotop {
                position: fixed;
                display: flex;
                flex-direction: column;
                align-items: center;
                bottom: -8px;
                right: 23px;
                p {
                    margin-top: -12px;
                }
            }
            
            .arrow-text {
                font-size: 18px;
                color: #5f5f5f;
            }
            
            a:hover .arrow-text {
                color: #7a7a7a;
                text-decoration: none!important;
            }

/* TYPOGRPHY */                    



h1 {
    font-family: "Antonio", sans-serif;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 42px;
    line-height: 49px;
    font-weight: 700;
    margin-bottom: 30px;
    } 

    .usl h1 {
        font-size: 46px;
        line-height: 62px;
        letter-spacing: 1px;
        margin-bottom: 30px;
        padding-inline: 0rem;
    }

    .menu a {
        color: #ffffff;
        text-transform: uppercase;
        font-family: "Mukta Mahee", sans-serif;
        font-weight: 700;
        font-size: 15px;
        line-height: 22px;
        margin-right: 14px;
        }

    @media (min-width: 500px) {
            h1 {
                font-size: 65px;
                line-height: 79px;
                margin-bottom: 34px;
            }

            body {
                font-size: 18px;
                line-height: 27px;
            }
        }

    @media (min-width: 768px) {
        .usl h1 {
            padding-inline: 4rem;
        }
    }

    @media (min-width: 1600px) {
        body {
            font-size: 19px;
            line-height: 28px;
        }
        h1 {
            font-size: 80px;
            line-height: 97px;
            margin-bottom: 50px;
            }

        .o-meni h1 {
            font-size: 77px;
            line-height: 114px;
            margin-bottom: 42px;
            }
        .rv-landing--content--text p,
        button.contact-cta {
            margin-left: 100px;
            }
        button.contact-cta {
            margin-bottom: 10px;
            padding: 16px 52px;
            }
        .rv-landing--content--text p {
            font-size: 21px;
            line-height: 30px;
            margin-bottom: 50px;
            }
        .menu a {
            margin-right: 20px;
            font-size: 22px;
            letter-spacing: 1px;
            }
    }

    @media (min-width: 1921px) {
        h1 {
            font-size: 94px;
            line-height: 114px;
            margin-bottom: 62px;
            }
        
    }


    button.contact-cta {
        font-family: "Mukta Mahee", sans-serif;
        font-weight: 800;
        text-transform: uppercase;
        font-size: 21px;
        letter-spacing: 2.5px;
        margin-top: 10px;
        margin-bottom: 50px;
        padding: 16px 28px;
        color: #ffffff;
        background-color: transparent;
        border: 4px solid #C34921;
        border-radius: 32px;
        }
        
        button.contact-cta:hover {
            text-decoration: none;
            color: #f5d7a0;
            border: 4px solid #c39021;
            }
    
        button.contact-cta:focus {
            outline: none;
            }

        @media (min-width: 1800px) and (max-width: 1921px) {
            button.contact-cta {
                margin-left: 182px;
            }
        }

    


/* ANIMACIJA */ 



    .usl:nth-child(2) img {
        animation-delay: -5s;
        }

    .usl:nth-child(3) img {
        animation-delay: -3s;
        }

    .usl:nth-child(4) img {
        animation-delay: -1s;
        }

    .usl:nth-child(5) img {
        animation-delay: -6s;
        }


.usl img {
    width: 50%;
    margin-bottom: 30px;
    animation: float 7s linear infinite;
    animation-delay: -7s;
    }

    @keyframes float {
        0% { transform: translatey(0px); }
        50% { transform: translatey(-40px); }
        100% { transform: translatey(0px); }
        }

    
/* FOOTER */

       
    



/* MEDIA QUERIES */
    
    
@media (min-width: 576px) {
    
}

@media (min-width: 768px) {

}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {

}

@media (min-width: 1600px) {

}

@media (min-width: 1900px) {

}