:root{
    --primary: #fcf5b0;
    --secondary: #F08A5D;
    --accent-1: #B83B5E;
    --accent-2: #6A2C70;
}

#herobgsmall{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    background-image: url("/photos/bg-1darkersmall.png");
   

    /* The image used */


    /* Set a specific height */
    min-height: 500px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(0.1rem);
}

#herobg{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    background-image: url("/photos/bg-1darker.png");
   

    /* The image used */


    /* Set a specific height */
    min-height: 500px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(0.1rem);
    --opacity: 0.95;

}

#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
}

#herobgmobile{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 100%;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    background-image: linear-gradient(180deg, var(--primary) 10%, #ffffff00 );
}

#nasispecijaliteti{
    border-top: 2rem solid rgba(248, 249, 250)
}

#borderresavanje{
    border-top: 2rem solid var(--primary)
}



.card > img{
    
    height: 250px;
    
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
margin: 5rem 0; /* Space out the Bootstrap <hr> more */
--border: 1rem solid rgba(248, 249, 250);
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
letter-spacing: -.05rem;
}

/* rtl:end:remove */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
/* Bump up size of carousel content */
.carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
}

.featurette-heading {
    font-size: 50px;
}
}

@media (min-width: 62em) {
.featurette-heading {
    --margin-top: 7rem;
}
}


#card1{
    background-image: url("./photos/proizvodnja.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 1/1;
    box-sizing: border-box;
    border: 1rem solid rgba(248, 249, 250);
    border-radius: 2rem;


}

#card2{
    background-image: url("./photos/nagrade.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 1/1;
    box-sizing: border-box;
    border: 1rem solid rgba(248, 249, 250);
    border-radius: 2rem;

}

#card3{
    background-image: url("./photos/proizvodi.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 1/1;
    box-sizing: border-box;
    border: 1rem solid rgba(248, 249, 250);
    border-radius: 2rem;

}

#card4{
    background-image: url("./photos/personal.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 1/1;
    box-sizing: border-box;
    border: 1rem solid rgba(248, 249, 250);
    border-radius: 2rem;

}

.svg1{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    aspect-ratio: 960/540;

}

.svg.svg1{
    background-image: url("./svg/layered-waves-haikei.svg");
}

.svgPozadina{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 540/960;
    display: flex;
    justify-content: center;
    align-items: center;
}

.svgPozadinaProizvod{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 540/960;
    display: flex;
    justify-content: center;
    align-items: center;
}



.svgPozadinaFooter{
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: -1;
    overflow-x: hidden;
}

.svgPozadinaFooter > *{
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

.svgPozadina > *{
    width: 100%;
    height: 100%;
    z-index: -1;
}

.svgPozadinaProizvod > *{
    width: 100%;
    height: 100%;
    padding: 10rem;
    z-index: -1;
}

.card{
    height: 30rem;
    background-color: #ffffffbe;
}

#herobgProizvodsmall{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 100%;

    background-image: url("/photos/proizvodismall.png");
   

    /* The image used */


    /* Set a specific height */
    min-height: 500px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    opacity: 0.9;
    filter: blur(0.1rem);
}

#herobgProizvod{
    
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 100%;

    background-image: url("/photos/proizvodi.jpg");
   

    /* The image used */


    /* Set a specific height */
    min-height: 500px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    opacity: 0.9;
    filter: blur(0.1rem);
}

#herobgmobileProizvod{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 100%;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    background-image: linear-gradient(180deg, var(--primary) 10%, #ffffff00 );
}



.categorySpacer{
    position: relative;
}

.svgTop{
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: -1;
    overflow-x: hidden;
}



.svgBottom{
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
    overflow-x: hidden;
}

.svgBottom > *{
    width: 100%;
    height: 100%;
    z-index: -1;
}

.svgTop > *{
    width: 100%;
    height: 100%;
    z-index: -1;
}


@media only screen and (max-width: 992px) {
    .svgPozadinaFooter > *{
        width: 150%;
    }

    .svgTop > *{
        width: 150%;
    }

    .svgBottom > *{
        width: 150%;
    }
}

@media only screen and (max-width: 768px) {
    .svgPozadinaFooter > *{
        width: 200%;

    }
    
    .svgTop > *{
        width: 200%;
    }

    .svgBottom > *{
        width: 200%;
    }

}
@media only screen and (max-width: 576px) {
    .svgPozadinaFooter > *{
        width: 400%;

    }
    .card{
        height: max-content;

    }
    .svgTop > *{
        width: 400%;
    }

    .svgBottom > *{
        width: 400%;
    }

    #borderresavanje{
        border-top: 2rem solid rgba(248, 249, 250)
    }

}

.carousel {
    margin-bottom: 4rem;
    
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    bottom: 3rem;
    z-index: 10;
  }
  
  /* Declare heights because of positioning of img element */
  .carousel-item {
    height: 44rem;
    overflow: hidden;
    position: relative;
    
  }

.imgContainer{
    height: 100%;
    width: 100%;
    background-position: center;
    background-size: cover;
}
.imgContainer.slika1{
    background-image: url("./photos/aboutme1.png");
    
}

.imgContainer.slika2{
    background-image: url("./photos/aboutme2.png");
    
}
.imgContainer.slika3{
    background-image: url("./photos/aboutme3.png");
    
}

@media only screen and (max-width: 1200px) {
    .imgContainer.slika1{
        background-image: url("./photos/aboutme143.png");
        
    }
    
    .imgContainer.slika2{
        background-image: url("./photos/aboutme243.png");
        
    }
    .imgContainer.slika3{
        background-image: url("./photos/aboutme343.png");
        
    }

    .carousel-item{
        height: 44rem;
    }
}

@media only screen and (max-width: 768px) {

    .carousel-item{
        height: 24rem;
    }
}

.gmaps{
    padding: 0;
    margin: 0;
}

.gmaps > *{
    width: 100%;
    height: 30rem;
}

.novProizvod{
    position: relative;
    overflow: hidden;
}

.novProizvod::after{
    content: "Ново!";
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 2rem;
    left: -6rem;
    width: 20rem;
    height: 4rem;
    color: white;
    font-size: 2rem;
    background-color: var(--secondary);
    rotate: -45deg;
}

.najProizvod{
    position: relative;
    overflow: hidden;
}

.najProizvod::after{
    content: "Најпродаванији!";
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 2rem;
    left: -6rem;
    width: 20rem;
    height: 4rem;
    color: white;
    font-size: 1.2rem;
    background-color: var(--secondary);
    rotate: -45deg;
}