/* ----- POcetna ------ */

.mt-50{
    margin-top: 50px;
}

.dropdown-menu{
    background-color: var(--orange-color);
    padding: 7px 9px;
}
.dropdown-item{
    color: white;
}
.dropdown-item:hover{
    border-radius: 5px;
    background-color: white;
    color: var(--orange-color);
}



.category-dropdown{
    list-style: none;
    margin: 0;
    padding: 0;
}

p.dropdown-item{
    font-size: 1rem;
    display: block;
    padding: 10px;
    margin: 0;
    line-height: 1.2;
}


.dropdown-submenu {
    position: relative;
}
  
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%; /* Position submenu to the right of parent */
    margin-top: -1px; /* Adjust for the border */
}

.submenu-link{
    color: white !important;
    font-size: 1rem !important;
    font-weight: normal !important;
    font-family: "Poppins",sans-serif !important;
    text-transform: none !important;
    padding: 4px 18px !important;
}
.submenu-link:hover{
    border-radius: 5px;
    background-color: white;
    color: var(--orange-color) !important;
}



.dropdown-submenu{
    position: relative;
}

.submenu-dropdown{
    padding: 5px 5px;
    text-align: left;
    position: absolute;
    right: -160px;
    background-color: var(--orange-color);
    border: 0.5px solid rgb(68, 64, 64);
    top: 0;
    display: none;
    list-style: none;
}

.dropdown-submenu:hover .submenu-dropdown{
    display: block;

}




.navbar-scroll .nav-link,
.navbar-scroll .fa-bars,
.navbar-scroll .navar-brand {
  color: var(--gray-color);
  font-size: var(--fs-400);
  font-weight: bold;
  text-transform: uppercase;
  font-family: "Jost",sans-serif;
}

.navbar-scroll .nav-link:hover {
  color: var(--orange-color);
}





/* An optional height of the navbar AFTER scroll */
.navbar.navbar-scroll.navbar-scrolled {
  padding-top: 5px;
  padding-bottom: 5px;
}


.active-link{
    color: var(--orange-color) !important;
}


.carousel-caption{
    text-align: left;
}



.tab-1,.tab-2,.tab-3,.tab-4,.tab-5{
    background-size: cover;
    height: 820px;
    
}

.tab-1{
    background-image: url('../images/front_end/pocetna-tab1.jpg');
}
.tab-2{
    background-image: url('../images/front_end/pocetna-tab2.jpg');
}
.tab-5{
    background-image: url('../images/front_end/pocetna-tab3.jpg');
}
.tab-4{
    background-image: url('../images/front_end/pocetna-tab4.jpg');
}
.tab-3{
    background-image: url('../images/front_end/pocetna-tab5.jpg');
}

.tab-hover-background{
    background: linear-gradient(rgba(255, 121, 43, 0.7), rgb(255, 121, 43,0.2)), url('../images/front_end/pocetna-tab1.jpg');
}


.col-20{
    width: 20%;
}


.overlay-text{
    text-align: left !important;
    width: 90%;
}



.pocetna-tab-1, .pocetna-tab-2, .pocetna-tab-3, .pocetna-tab-4, .pocetna-tab-5 {
    text-decoration: none;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    height: 820px;
    background-size: cover;
    background-position: center;
    transition: background 0.3s ease-in-out; /* Smooth transition */
}


.pocetna-tab-1 .overlay-text,.pocetna-tab-2 .overlay-text,.pocetna-tab-3 .overlay-text,.pocetna-tab-4 .overlay-text,.pocetna-tab-5 .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.5rem;
    opacity: 0;
    visibility: hidden;
    text-align: center;
    transition: opacity 0.3s ease-in-out;
    z-index: 2;
}

.pocetna-tab-1:hover .overlay-text,.pocetna-tab-2:hover .overlay-text,.pocetna-tab-3:hover .overlay-text,.pocetna-tab-4:hover .overlay-text,.pocetna-tab-5:hover .overlay-text {
    opacity: 1;
    visibility: visible;
}

.pocetna-tab-1:hover {
    background: linear-gradient(
                rgba(255, 121, 43, 0.5), 
                rgba(255, 121, 43, 0.5)
              ),
              url('../images/front_end/pocetna-tab1.jpg');
    background-size: cover;
    background-position: center;
}


.pocetna-tab-2:hover{
    background: linear-gradient(
                rgba(255, 121, 43, 0.5), 
                rgba(255, 121, 43, 0.5)
              ),
              url('../images/front_end/pocetna-tab2.jpg');
    background-size: cover;
    background-position: center;
}
.pocetna-tab-3:hover{
    background: linear-gradient(
                rgba(255, 121, 43, 0.5), 
                rgba(255, 121, 43, 0.5)
              ),
              url('../images/front_end/pocetna-tab5.jpg');
    background-size: cover;
    background-position: center;
}

.pocetna-tab-4:hover{
    background: linear-gradient(
                rgba(255, 121, 43, 0.5), 
                rgba(255, 121, 43, 0.5)
              ),
              url('../images/front_end/pocetna-tab4.jpg');
    background-size: cover;
    background-position: center;
}

.pocetna-tab-5:hover{
    background: linear-gradient(
                rgba(255, 121, 43, 0.5), 
                rgba(255, 121, 43, 0.5)
              ),
              url('../images/front_end/pocetna-tab3.jpg');
    background-size: cover;
    background-position: center;
}


.pocetna-tab-1:hover .tab-heading,.pocetna-tab-2:hover .tab-heading,.pocetna-tab-3:hover .tab-heading,.pocetna-tab-4:hover .tab-heading,.pocetna-tab-5:hover .tab-heading{
    display: none;
}

.pocetna-tab-1 i,
.pocetna-tab-1 h3,
.pocetna-tab-2 i,
.pocetna-tab-2 h3,
.pocetna-tab-3 i,
.pocetna-tab-3 h3,
.pocetna-tab-4 i,
.pocetna-tab-4 h3,
.pocetna-tab-5 i,
.pocetna-tab-5 h3 {
    z-index: 2; /* Ensure icon and heading remain visible above the background */
}




body > footer > div.container.p-4 > div > div:nth-child(n) > table > tbody > tr:nth-child(n) > td:nth-child(n){
    background-color: var(--orange-color);
    color: var(--blue-color);
    font-weight: bold;
}



/* ----  o nama  ---- */

:root {
    --clr-neutral-100: hsl(0, 0%, 100%);
    --clr-primary-100: hsl(205, 15%, 58%);
    --clr-primary-400: hsl(215, 25%, 27%);
    --clr-primary-800: hsl(217, 33%, 17%);
    --clr-primary-900: hsl(218, 33%, 9%);
  }


.onama-heading{
    background-image: url('../images/front_end/onama-pozadina-fin.jpg');
    background-size: cover;
    background-position: center;
    height: 700px;
    position: relative;
}


.scroller {
    max-width: 1200px;
  }
  
  .scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(
      90deg,
      transparent,
      white 20%,
      white 80%,
      transparent
    );
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
  }
  
  .scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s)
      var(--_animation-direction, forwards) linear infinite;
  }
  
  .scroller[data-direction="right"] {
    --_animation-direction: reverse;
  }
  
  .scroller[data-direction="left"] {
    --_animation-direction: forwards;
  }
  
  .scroller[data-speed="fast"] {
    --_animation-duration: 20s;
  }
  
  .scroller[data-speed="medium"] {
    --_animation-duration: 40s;
  }

  .scroller[data-speed="slow"] {
    --_animation-duration: 60s;
  }
  
  @keyframes scroll {
    to {
      transform: translate(calc(-50% - 0.5rem));
    }
  }

  
  .scroll-img{
    width: auto;
    height: 60px;
    
  }


  .tag-list {
    margin: 0;
    padding-inline: 0;
    list-style: none;
  }
  
  .tag-list li {
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-primary-900);
  }


/* -- - Kontakt --- */

.kontakt-ikonica{
    
    border: 2px solid white;
    border-radius: 50%; 
    padding: 25px;
    width: 36%;
    height: auto;
}


.kontakt-pozadina{
    height: 700px;
    background-image: url('../images/front_end/pozadina\'primer.jpg');
    background-size: cover;
    background-position: bottom;
    position: relative;
}


.sistemi-ugradnje-pozadina{
    background-image: url('../images/front_end/sistemi-ugradnje.jpg');
    background-size: cover;
    background-position: top;
    height: 550px;
    position: relative;
}

.oprema-delovi-pozadina{
    background-image: url('../images/front_end/oprema-delovi1.webp');
    background-size: cover;
    background-position: top;
    height: 550px;
    position: relative;
}

.solarni-sistem-pozadina{
    background-image: url('../images/front_end/solarni-sistem-test.jpg');
    background-size: cover;
    background-position: top;
    height: 550px;
    position: relative;
}

.text-validate::placeholder{
    color: red !important;
}

.product-table{
    width: 100% ;
    border-collapse: collapse;
}

.product-table>thead{
    background-color: rgb(59, 55, 55);
    width: 100%;
}

.product-table-heading{
   height: 60px;
   width: 100%;
   padding: 20px;
}

.product-table-heading>th{
    padding: 10px;
}


thead>tr>th{
    color: rgb(182, 157, 157);
}


.table-img{
    width: 50px;
    height: 50px;
}


.product-table-row>th{
    padding: 10px;
}

table.product-table>tbody>tr.product-table-row:nth-child(2n+2){
    background-color: rgb(148, 140, 140);
}



#uploaded-images{
    flex-wrap: wrap;
}

.btn-close-image{
    position: absolute;
    right: 0%;
    top: 0%;
}



/* ----- ETEK ----- */


.main-category-card{
    background-color: var(--light-gray-color);
    border-radius: 10px;
    padding: 12px 14px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.main-category-card:hover{
    background-color: var(--orange-color);
    transition: 0.15s background-color,0.15s color;
}

.main-category-card:hover>p{
    color: white;
}

.main-category-card>p{
    text-decoration: none;
    color: black;
    display: flex;
    align-items: center;
    gap: 6px;
}

.main-category-card-cicrle{
    justify-content: center;
    font-size: var(--fs-500);
    

}

.specific-category-link{
    position: relative;
    color: var(--blue-color);
    text-decoration: none;
}
.specific-category-link:hover{
    color: var(--orange-color);
    text-decoration: underline;
}

.specific-category-link::before{

    position: absolute;
    content: ">";
    font-size: var(--fs-350);
    color: var(--blue-color);
    left: -15px;
    top: 1px;
}


.card-link{
    color: var(--gray-color-dark);
    text-decoration: none;
    transition: 0.2s color;
}

.card-link:hover{
    color: var(--orange-color);
}


.card{
    height: 560px;
    border: 1px solid var(--gray-color); 
    padding-bottom: 30px; 
    overflow: hidden !important;
}

.card-img-top {
    width: 100%;          /* Ensure the image fits the card width */
    height: 300px;        /* Set a fixed height for the image container */
    object-fit: cover;    /* Crop the image to fit within the container */
    overflow: hidden;     /* Hide the overflowed part of the image */
    transition: 0.3s transform;
}



.product-img:hover {
    transform: scale(1.1);  /* Slight zoom effect on hover */
}


.img-thumbs{
    width: 100px;
    height: 100px;
}

.img-thumbs:hover{
    border: 1px solid var(--orange-color);
}

.active-main-category{
    background-color: var(--orange-color);
    color: white ;
    border-radius: 10px;
    padding: 12px 14px;
}


.active-specific-category{
    position: relative;
    color: var(--orange-color);
    text-decoration: underline;
}

.active-specific-category::before{
    position: absolute;
    content: ">";
    font-size: var(--fs-350);
    color: var(--orange-color);
    left: -15px;
    top: 1px;
}




.black-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.55); /* Black with 70% opacity */
    z-index: 2; /* Overlay above content */
}

.black-overlay-medium {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35); /* Black with 70% opacity */
    z-index: 2; /* Overlay above content */
}


.black-overlay-light {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* Black with 70% opacity */
    z-index: 2; /* Overlay above content */
}




.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove the gap so it doesn't close */
}






.sistem-za-skladistenje-pozadina{
    background-image: url('../images/front_end/sistem-za-skladistenje.jpg');
    background-size: cover;
    height: 500px;
}

.punjaci-pozadina{
    background-image: url('../images/front_end/punjaci-pozadina.jpg');
    background-size: cover;
    background-position: center;
    height: 500px;
}

.e-mobilnost-pozadina{
    background-image: url('../images/front_end/e-mobilnost-pozadina-2.jpg');
    background-size: cover;
    background-position: center;
    padding-top: 50px;
    height: 600px;
}


.e-materijal-pozadina{
    background-image: url('../images/front_end/elektro-materijal-test1.jpg');
    background-size: cover;
    background-position: center;
    padding-top: 50px;
    height: 600px;
}

.solarna-energija-pozadina-g{
    background-image: url('../images/front_end/solarna-energija-test.jpg');
    background-size: cover;
    background-position: center;
    padding-top: 50px;
    height: 600px;
}


.ups-sistemi-pozadina{
    background-image: url('../images/front_end/ups-sistem-pozadina.jpg');
    background-size: cover;
    height: 500px;
}

.sistem-za-skladistenje-footer-pozadina{
    background-image: url('../images/front_end/sistem-za-skladistenje-footer.png');
    background-size: cover;
    
}



.solarna-energija-pozadina{
    background-image: url('../images/front_end/solarna-energija-pozadina.jpg');
    background-size: cover;
    height: 500px;
}


.raise-z-index>*{
    z-index: 5 !important;
    position: relative !important;
}


.my-img-thumbnail{
    width: 100px;
    height: 100px;
    object-fit: contain;
}


.usluge-naslov{
    padding: 10px 33px;
    font-weight: normal;
    color: white;
    display: inline-block;
    background: linear-gradient(to right, rgba(255,118,41,.45),rgb(255,118,41),rgba(255,118,41,.45));
}



.usluge-naslov{
    padding: 10px 33px;
    font-weight: normal;
    color: white;
    display: inline-block;
    background: linear-gradient(to right, rgba(161, 146, 146,.45),rgb(161, 146, 146),rgba(161, 146, 146,.45));
}



.usluge-naslov{
    padding: 10px 33px;
    font-weight: normal;
    color: white;
    display: inline-block;
    background: linear-gradient(to right, rgba(36, 69, 160,.45),rgb(7, 32, 99),rgba(36, 69, 160,.45));
}


.usluge-naslov{
    text-transform: uppercase;
    padding: 10px 33px;
    font-weight: normal;
    color: white;
    display: inline-block;
    background: linear-gradient(to right, rgba(54, 54, 54,.45),rgb(17, 17, 17),rgba(54, 54, 54,.45));
}