/*=========================================================
Author       : Bestwebcreator.
Template Name: Shopwise - eCommerce Bootstrap 5 HTML Template
Version      : 1.3
==============================================================*/

/*=============================================================
    CSS INDEX
    =============================
    01.GENERAL STYLE (body, link color, section-title, buttons, overlay, section-padding etc...)
    02.START HEADER STYLE
	03.START BANNER,SLIDER STYLE
	04.START SHOP BANNER STYLE
	05.START CATEGORIES STYLE
	06.START ICON BOX STYLE
	07.START PORTFOLIO STYLE
	08.START TESTIMONIAL STYLE
	09.START BLOG STYLE
	10.START NEWLETTER STYLE
	11.START FOOTER STYLE
	12.START MAP STYLE
	13.START TEAM STYLE
	14.START CLIENT LOGO STYLE
	15.START BREADCRUMB STYLE
	16.START CONTACT STYLE
	17.START DIVIDER STYLE
	18.START ACCORDION STYLE
	19.START 404 ERROR STYLE
	20.START LOGIN REGISTER STYLE
	21.START COMMING SOON STYLE
	22.START DEAL OF THE DAY STYLE
	23.START SHOP DESIGN
	24.START ELEMENT DESIGN
		
*=============================================================*/

/*===================================*
  01.GENERAL STYLE
*===================================*/
body {
background: rgb(215, 227, 250);
}

#bodyContent{

	background-color: antiquewhite;
}

hr {
	color: blueviolet;
}

.utisak{

	background-color: azure;
}

#fq{

    background-color: aquamarine;
}

#Jq {


    background-color: burlywood;
}

/********************************************************************************/


#storeLogo{
    background-color: orchid;
}
.product-image {
    max-height: 600px;
    object-fit: cover;
}
.thumbnail {
    width: 120px;
    height: 120px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.thumbnail:hover, .thumbnail.active {
    opacity: 1;
}



.stepwizard {
  position: relative;
  width: 100%;
  margin-top: 1.5rem;
}

.stepwizard::before {
  content: '';
  position: absolute;
  top: 20px; /* centriraj liniju visinski prema krugovima */
  left: 0;
  right: 0;
  height: 2px;
  background-color: #dee2e6; /* siva kao Bootstrap border */
  z-index: 0;
}

.stepwizard-row {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  z-index: 1; /* krugovi iznad linije */
  padding: 0 10px;
}

.stepwizard-step {
  flex: 1;
  text-align: center;
  position: relative;
  min-width: 0;
}

.stepwizard-step p {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  word-wrap: break-word;
  max-width: 90px;
  margin-left: auto;
  margin-right: auto;
}

.btn-circle {
  width: 40px;
  height: 40px;
  padding: 6px 0;
  border-radius: 50%;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  position: relative;
  z-index: 2;
}

/* CAROUSEL */
  .carousel-item picture,
  .carousel-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
  }

  @media (min-width: 768px) {
    .carousel-item picture,
    .carousel-item img {
      height: 500px;
    }
  }

  .carousel-caption {
  background: rgba(0, 0, 0, 0.5); /* lagana crna pozadina radi čitljivosti */
  border-radius: 0.5rem;
}

@media (max-width: 576px) {
  .carousel-caption h2 {
    font-size: 1.25rem;
  }

  .carousel-caption p {
    font-size: 1rem;
  }

  .carousel-caption .btn {
    font-size: 0.9rem;
    padding: 0.4rem 1rem;
  }
}

/*                                                                    */


/* Breadcrumbs from http://bootsnipp.com/snippets/featured/triangle-breadcrumbs-arrows */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
/*
.breadcrumb-item + .breadcrumb-item::before {
  content: "›"; /* ili "»", "/", "→" – po želji
  padding: 0 0.5rem;
  color: #6c757d; /* Bootstrap-ova sekundarna boja
}
*/
.breadcrumb-separator {
  display: inline;
  margin: 0 0.5rem;
  color: #6c757d;
}
  
.tabla-manjifont {
  font-size: 0.9rem; /* ili npr. 12px */
}  


@media (max-width: 991.98px) {
  .navbar .nav-link {
    font-size: 0.85rem; /* manji tekst */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .navbar .bi {
    font-size: 1rem !important; /* manja veličina ikona */
  }

  .navbar form .form-control {
    max-width: 250px; /* manja širina input polja */
    font-size: 0.85rem;
  }

  .navbar form .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
  }

  .navbar .badge {
    font-size: 0.6rem;
    padding: 0.25em 0.4em;
  }

}

.navbar form {
  max-width: 380px;
  flex-shrink: 1;
}


.phone-marquee-wrapper {
  position: relative;
  height: 1.5rem;
}

.phone-marquee {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 8s linear infinite;
  font-weight: bold;
  font-size: 0.85rem;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}


.announcement-bar {
  background-color: #007bff;
  color: white;
  height: 2rem;
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  padding: 0 0.5rem;
  border-radius: 0.25rem;
  max-width: 100%;
  min-width: 0;
}

.announcement-track {
  white-space: nowrap;
  display: inline-block;
  animation: marquee-slide 15s linear infinite;
}

@keyframes marquee-slide {
  0% {
    transform: translateX(100%);
  }
  10% {
    transform: translateX(100%); /* Pauza */
  }
  100% {
    transform: translateX(-100%);
  }
}

.inputRequirement {
  color: #dc3545; /* Bootstrap "danger" crvena */
  font-size: 0.75em;
  vertical-align: top;
  margin-left: 0.25rem;
}