@import url(../css/clash-display.css);

:root {
  --c-dark: #212529;
  --c-brand: #0f4163;
  --c-brand-light: #6c74e9;
  --c-brand-rgb: 78, 87, 212;
  --c-body: #5a5a5c;
  --font_base: "ClashDisplay", sans-serif;
  --box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.2);
  --transition: all 0.08s ease;
  --pulseAnimation: pulseAnim 1s ease-out infinite;
  --pointWidth: 25px;
  --pointHeight: 25px;
  --pointWidthHover: 25px;
  --pointHeightHover: 25px;
}

body {
  font-family: var(--font_base);
  line-height: 1.7;
  color: var(--c-body);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 600;
  color: var(--c-dark);
}
a {
  text-decoration: none;
  color: var(--c-brand);
  transition: var(--transition);
}

a:hover {
  color: var(--c-brand-light);
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible{
  box-shadow: none !important;
  outline:none !important;
  background-color: transparent !important;
  
}
.navbar-toggler{
  max-width: 60px;
  margin-left: auto;

}

/* Zadana veličina slike */
.navbar-brand img {
  max-width: 360px; /* Normalna veličina slike */
  height: auto;
}

/* Smanjena veličina za manje ekrane */
@media (max-width: 768px) {
  .navbar-brand img {
    max-width: 220px; /* Smanjena slika na tabletima i manjim ekranima */
  }

  .navbar-brand {
    font-size: 26px; /* Smanjeni font brand naziva */
  }
}

@media (max-width: 480px) {
  .navbar-brand img {
    max-width: 160px; /* Još manja slika za mobilne uređaje */
  }

  .navbar-brand {
    font-size: 20px; /* Manji font za još manje ekrane */
  }
}

img {
  max-width: 100%;
  height: auto;
}

.brandcolor{
  color:rgb(139, 193, 236);
}

.section-padding {
  padding-top: 140px;
  padding-bottom: 20px; 

}


.theme-shadow {
  box-shadow: var(--box-shadow);
}

/*NAVBAR*/
.navbar {
  box-shadow: var(--box-shadow);
}

.navbar-nav .nav-link {
  font-size: 22px;
  font-weight: normal;
  color: var(--c-dark);
}

.navbar-nav .nav-link:hover {
  font-weight: 500;
  font-size: 24px;
  color: var(--c-brand);
}

.nav-link.active {
  font-weight: 500;
  font-size: 24px;
  color: var(--c-brand) !important;
}

/*PHASOR*/
#phasor {

  background: linear-gradient(#00000013, #00000025),
    url(../images/20211029_210413.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 20px;
}
/* Media query za manje ekrane */
@media (max-width: 768px) {
  #phasor h1 {
    font-size: 2rem; /* Manji naslov na mobitelima */
  }
  #phasor h5 {
    font-size: 1rem;
  }


  
}

/*COMFORTABLE*/
#comfortable {
  background: linear-gradient(#00000013, #d3d0d025);
  background-position: center;
  background-size: cover;
  
}

/*REFERENCES*/
#referenceimg {
  background: linear-gradient(#00000013, #00000025),
    url(../images/reference1.png);
  background-position: center;
  background-size: cover;
  flex: auto;
}

#contact{
  background-position: center;
  background-size: cover;
  
}

.section-title {
  margin-bottom: 50px;
}

.section-title .line {
  width: 120px;
  height: 5px;
  background-color: rgb(0, 174, 255);
  margin: 10px auto 24px auto;
}
.line {
  width: 120px;
  height: 5px;
  background-color: rgb(0, 174, 255);
  margin: 10px auto 24px auto;
}

/* PRODUCTS AND SERVICES  */

.button {
  display: inline-flex;
  visibility: hidden;
  width: 200px;
  height: 45px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 2%;
  background-color: rgb(192, 27, 69);
  font-size: 24px;
  font-weight: normal;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  cursor: grab;
}
.buttonrl {
  display: inline-flex;
  visibility: visible;
  width: 300px;
  height: 45px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 5%;
  background-color: rgb(192, 27, 69);
  font-size: 24px;
  font-weight: normal;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  cursor: grab;
}

.buttonrl:hover,
buttonrl:active {
  width: 300px;
  height: 45px;
  align-items: center;
  outline: none;
  border: none;
  border-radius: 5%;
  background-color: rgba(192, 27, 68, 0.473);
  font-size: 24px;
  font-weight: normal;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  cursor: grab;
  transition-delay: 0s;
}

/*Products and Services -  Automation engineering*/
.serprodaut {
  position: relative;
  background-color: white;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 370px;
  overflow: hidden;
  align-items: center;
  align-content: center;
  justify-content: center;
  box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.1);
  border-radius: 5%;
  z-index: 2;
}

.serprodaut::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(#03325e63, #5a93c963);
  transition: all 0.12s ease-in;
}

.serprodaut:hover::after {
  width: 100%;
  height: 100%;
  background: linear-gradient(#03325e63, #5a93c963),
    url(../images/20211210_205224.jpg);
  background-position: center;
  background-size: cover;
  z-index: -1;
}

.serprodaut:hover .button {
  display: inline-flex;
  visibility: visible;
  width: 200px;
  height: 45px;
  align-items: center;
  outline: none;
  border: none;
  border-radius: 2%;
  background-color: rgb(192, 27, 69);
  font-size: 24px;
  font-weight: normal;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  cursor: grab;
  transition-delay: 0.1s;
}

.serprodaut:hover .button:hover,
button:active {
  width: 200px;
  height: 45px;
  align-items: center;
  outline: none;
  border: none;
  border-radius: 2%;
  background-color: rgba(192, 27, 68, 0.473);
  font-size: 24px;
  font-weight: normal;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  cursor: grab;
  transition-delay: 0s;
}

.iconboxbefore {
  height: 80px;
  width: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  flex: none;
  color: rgb(104, 102, 102);
}

.serprodbtnaut {
  position: relative;
  background: linear-gradient(#03325e63, #5a93c963),
    url(../images/20211210_205224.jpg);
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 370px;
  overflow: hidden;
  align-items: center;
  align-content: center;
  justify-content: center;
  box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.1);
  border-radius: 5%;
  z-index: 2;
}



.serprodbtnaut .iconboxbefore {
  display: none;
  visibility: hidden;
}

.serprodbtnaut h5 {
  color: white;
  font-weight: lighter;
  font-size: 50px;
  padding-top: 50%;
  
}


.serprodbtnaut .button {
  display: none;
  visibility: hidden;
}

.serprodaut:hover {
  align-content: normal;
}
.serprodaut h5 {
  color: black;
  font-size: 28px;
  font-weight: normal;
}

.serprodaut:hover h5 {
  color: white;
  font-weight: lighter;
  font-size: 50px;
  padding-top: 50%;
  margin-bottom: 60px;
}

.serprodaut:hover .iconboxbefore {
  display: none;
  visibility: hidden;
}


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

/*Products and Services -  Electrical engineering*/
.serprodele {
  position: relative;
  background-color: white;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 370px;
  overflow: hidden;
  align-items: center;
  align-content: center;
  justify-content: center;
  box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.1);
  border-radius: 5%;
  z-index: 2;
}

.serprodele::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(#03325e63, #5a93c963);
  transition: all 0.12s ease-in;
}

.serprodele:hover::after {
  width: 100%;
  height: 100%;
  background: linear-gradient(#03325e63, #5a93c963),
    url(../images/electrical_engineering_cover2.jpg);
  background-position: center;
  background-size: cover;
  z-index: -1;
}

.serprodele:hover .button {
  display: inline-flex;
  visibility: visible;
  width: 200px;
  height: 45px;
  align-items: center;
  outline: none;
  border: none;
  border-radius: 2%;
  background-color: rgb(192, 27, 69);
  font-size: 24px;
  font-weight: normal;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  cursor: grab;
  transition-delay: 0.1s;
}

.serprodele:hover .button:hover,
button:active {
  width: 200px;
  height: 45px;
  align-items: center;
  outline: none;
  border: none;
  border-radius: 2%;
  background-color: rgba(192, 27, 68, 0.473);
  font-size: 24px;
  font-weight: normal;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  cursor: grab;
  transition-delay: 0s;
}

.serprodbtnele {
  position: relative;
  background: linear-gradient(#03325e63, #5a93c963),
    url(../images/electrical_engineering_cover2.jpg);
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 370px;
  overflow: hidden;
  align-items: center;
  align-content: center;
  justify-content: center;
  box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.1);
  border-radius: 5%;
  z-index: 2;
}

.serprodbtnele .iconboxbefore {
  display: none;
  visibility: hidden;
}

.serprodbtnele h5 {
  color: white;
  font-weight: lighter;
  font-size: 50px;
  padding-top: 50%;
}

.serprodbtnele .button {
  display: none;
  visibility: hidden;
}

.serprodele:hover {
  align-content: normal;
}
.serprodele h5 {
  color: black;
  font-size: 28px;
  font-weight: normal;
}

.serprodele:hover h5 {
  color: white;
  font-weight: lighter;
  font-size: 50px;
  padding-top: 50%;
  margin-bottom: 60px;
}

.serprodele:hover .iconboxbefore {
  display: none;
  visibility: hidden;
}
/********************************************************/

/*Products and Services -  Services*/
.serprodser {
  position: relative;
  background-color: white;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 370px;
  overflow: hidden;
  align-items: center;
  align-content: center;
  justify-content: center;
  box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.1);
  border-radius: 5%;
  z-index: 2;
}

.serprodser::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(#03325e63, #5a93c963);
  transition: all 0.12s ease-in;
}

.serprodser:hover::after {
  width: 100%;
  height: 100%;
  background: linear-gradient(#03325e63, #5a93c963),
    url(../images/support3.png);
  background-position: center;
  background-size: cover;
  z-index: -1;
}

.serprodser:hover .button {
  display: inline-flex;
  visibility: visible;
  width: 200px;
  height: 45px;
  align-items: center;
  outline: none;
  border: none;
  border-radius: 2%;
  background-color: rgb(192, 27, 69);
  font-size: 24px;
  font-weight: normal;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  cursor: grab;
  transition-delay: 0.1s;

}

.serprodser:hover .button:hover,
button:active {
  width: 200px;
  height: 45px;
  align-items: center;
  outline: none;
  border: none;
  border-radius: 2%;
  background-color: rgba(192, 27, 68, 0.473);
  font-size: 24px;
  font-weight: normal;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  cursor: grab;
  transition-delay: 0s;
}

.serprodbtnser {
  position: relative;
  background: linear-gradient(#03325e63, #5a93c963),
    url(../images/support3.png);
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 370px;
  overflow: hidden;
  align-items: center;
  align-content: center;
  justify-content: center;
  box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.1);
  border-radius: 5%;
  z-index: 2;
}

.serprodbtnser .iconboxbefore {
  display: none;
  visibility: hidden;
}

.serprodbtnser h5 {
  color: white;
  font-weight: lighter;
  font-size: 50px;
  padding-top: 50%;
}

.serprodbtnser .button {
  display: none;
  visibility: hidden;
}

.serprodser:hover {
  align-content: normal;
}
.serprodser h5 {
  color: black;
  font-size: 28px;
  font-weight: normal;
}

.serprodser:hover h5 {
  color: white;
  font-weight: lighter;
  font-size: 50px;
  padding-top: 50%;
  margin-bottom: 60px;
}

.serprodser:hover .iconboxbefore {
  display: none;
  visibility: hidden;
}
/********************************************************/

#prodcont {
  display: none;
  visibility: hidden;
}

#psdescribe {
  margin-top: 60px;
  position: relative;
  background: linear-gradient(#02203d, #02203dd3);
  /*  background: linear-gradient(#f4f5f763, #dbe5f0d2);
  border-radius: 1%;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); */
  width: auto;
  height: auto;
}

#psname {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  color: white;
  font-size: 50px;
  font-weight: 500;
}

.lineps {
  width: 120px;
  height: 8px;
  background-color: rgb(0, 174, 255);
  margin-left: 20px;
}

.detaildescrclass {
  color: white;
  font-size: 20px;
  
}
.detaildescrclasslarge{
  color: white;
  font-size: 22px;
}
.detaildescrclassmedium{
  color: white;
  font-size: 18px;
}
.detaildescrclasssmall{
  color: white;
  font-size: 16px;
}

.detaildescrclasssub {
  color: white;
  font-size: 28px;
  font-weight: normal;
  margin-left: 20px;
}

.itemc {
  height: 450px;
}
.cimg {
  height: 100%;
  object-fit: cover;
  filter: brightness(0.95);
}

/************ SUPPORT ***********/
.supportdescr {
  width: 100%;
  height: 100px;
  background: white;
}

.fasttime {
  height: 100px;
  width: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  flex: none;
  color: rgb(104, 102, 102);
}

/********************************************/
/*----------------REFERENCES ---------------*/
.mapref {
  position: relative;
  width: 100vw;
}

.mapref img {
  max-width: 100vw;
  position: relative;
}
/********************************************/
.pointGuate {
  position: absolute;
  top: 47.4%;
  left: 22.4%;
  width: var(--pointWidth);
  height: var(--pointHeight);
  border-radius: 50%;
  background: linear-gradient(#e70422, #f107a3b2);
}

.pointGuate:hover {
  width: var(--pointWidthHover);
  height: var(--pointHeightHover);
  background: linear-gradient(#dbcfd0, #f107a3f8);
}

.pointGuate:hover ~ .showTextRef {
  display: inline-block;
  visibility: visible;
  height: auto;
  width: auto;
  top: 52.4%;
  left: 10.4%;
  z-index: 2;
}

.pointGuate span {
  position: absolute;
  height: 100%;
  width: 100%;
  background: inherit;
  border-radius: inherit;
  opacity: 1;
  animation: var(--pulseAnimation);
}
/********************************************/
/********************************************/
.pointIsland {
  position: absolute;
  top: 20.4%;
  left: 43.3%;
  width: var(--pointWidth);
  height: var(--pointHeight);
  border-radius: 50%;
  background: linear-gradient(#e70422, #f107a3b2);
}

.pointIsland:hover {
  width: var(--pointWidthHover);
  height: var(--pointHeightHover);
  background: linear-gradient(#dbcfd0, #f107a3f8);
}

.pointIsland:hover ~ .showTextRef {
  display: inline-block;
  visibility: visible;
  height: auto;
  width: auto;
  top: 25%;
  left: 30.8%;
  z-index: 2;
}

.pointIsland span {
  position: absolute;
  height: 100%;
  width: 100%;
  background: inherit;
  border-radius: inherit;
  opacity: 1;
  animation: var(--pulseAnimation);
}
/********************************************/
/********************************************/

.pointGermany {
  position: absolute;
  top: 30%;
  left: 50%;
  width: var(--pointWidth);
  height: var(--pointHeight);
  border-radius: 50%;
  background: linear-gradient(#e70422, #f107a3b2);
}

.pointGermany:hover {
  width: var(--pointWidthHover);
  height: var(--pointHeightHover);
  background: linear-gradient(#dbcfd0, #f107a3f8);
}

.pointGermany:hover ~ .showTextRef {
  display: inline-block;
  visibility: visible;
  height: auto;
  width: auto;
  top: 35%;
  left: 38%;
  z-index: 2;
}

.pointGermany span {
  position: absolute;
  height: 100%;
  width: 100%;
  background: inherit;
  border-radius: inherit;
  opacity: 1;
  animation: var(--pulseAnimation);
}
/********************************************/
/********************************************/

.pointCroatia {
  position: absolute;
  top: 33.1%;
  left: 52.6%;
  width: var(--pointWidth);
  height: var(--pointHeight);
  border-radius: 50%;
  background: linear-gradient(#e70422, #f107a3b2);
}

.pointCroatia:hover {
  width: var(--pointWidthHover);
  height: var(--pointHeightHover);
  background: linear-gradient(#dbcfd0, #f107a3f8);
}

.pointCroatia:hover ~ .showTextRef {
  display: inline-block;
  visibility: visible;
  height: auto;
  width: auto;
  top: 10%;
  left: 8%;
  z-index: 2;
}
.pointCroatia:hover ~ .showTextRef1 {
  display: inline-block;
  visibility: visible;
  height: auto;
  width: auto;
  top: 27%;
  left: 8%;
  z-index: 2;
}
.pointCroatia:hover ~ .showTextRef2 {
  display: inline-block;
  visibility: visible;
  height: auto;
  width: auto;
  top: 38%;
  left: 8%;
  z-index: 2;
}
.pointCroatia:hover ~ .showTextRef3 {
  display: inline-block;
  visibility: visible;
  height: auto;
  width: auto;
  top: 55%;
  left: 8%;
  z-index: 2;
}

.pointCroatia span {
  position: absolute;
  height: 100%;
  width: 100%;
  background: inherit;
  border-radius: inherit;
  opacity: 1;
  animation: var(--pulseAnimation);
}
/********************************************/
/********************************************/

.pointBiH {
  position: absolute;
  top: 33.2%;
  left: 53.1%;
  width: var(--pointWidth);
  height: var(--pointHeight);
  border-radius: 50%;
  background: linear-gradient(#e70422, #f107a3b2);
}

.pointBiH:hover {
  width: var(--pointWidthHover);
  height: var(--pointHeightHover);
  background: linear-gradient(#dbcfd0, #f107a3f8);
}

.pointBiH:hover ~ .showTextRef {
  display: inline-block;
  visibility: visible;
  height: auto;
  width: auto;
  top: 38.2%;
  left: 42%;
  z-index: 2;
}

.pointBiH span {
  position: absolute;
  height: 100%;
  width: 100%;
  background: inherit;
  border-radius: inherit;
  opacity: 1;
  animation: var(--pulseAnimation);
}
/********************************************/
/********************************************/
.pointCiG {
  position: absolute;
  top: 34%;
  left: 53.5%;
  width: var(--pointWidth);
  height: var(--pointHeight);
  border-radius: 50%;
  background: linear-gradient(#e70422, #f107a3b2);
}

.pointCiG:hover {
  width: var(--pointWidthHover);
  height: var(--pointHeightHover);
  background: linear-gradient(#dbcfd0, #f107a3f8);
}

.pointCiG:hover ~ .showTextRef {
  display: inline-block;
  visibility: visible;
  height: auto;
  width: auto;
  top: 40%;
  left: 35%;
  z-index: 2;
}

.pointCiG span {
  position: absolute;
  height: 100%;
  width: 100%;
  background: inherit;
  border-radius: inherit;
  opacity: 1;
  animation: var(--pulseAnimation);
}

/********************************************/
/********************************************/
.pointNepal {
  position: absolute;
  top: 43%;
  left: 72.5%;
  width: var(--pointWidth);
  height: var(--pointHeight);
  border-radius: 50%;
  background: linear-gradient(#e70422, #f107a3b2);
}

.pointNepal:hover {
  width: var(--pointWidthHover);
  height: var(--pointHeightHover);
  background: linear-gradient(#dbcfd0, #f107a3f8);
}

.pointNepal:hover ~ .showTextRef {
  display: inline-block;
  visibility: visible;
  height: auto;
  width: auto;
  top: 48%;
  left: 60%;
  z-index: 2;
}

.pointNepal span {
  position: absolute;
  height: 100%;
  width: 100%;
  background: inherit;
  border-radius: inherit;
  opacity: 1;
  animation: var(--pulseAnimation);
}
/********************************************/
/********************************************/

@keyframes pulseAnim {
  50% {
    opacity: 0;
    transform: scale(1.8);
  }
  100% {
    opacity: 0.8;
    transform: scale(1.8);
  }
}

/********************************************/
.showTextRef {
  margin-right: 2%;
  position: absolute;
  display: none;
  visibility: hidden;
  top: 2%;
  left: 2%;
  width: 20%;
  height: 30%;
  border-radius: 3%;
  background: linear-gradient(#ece5e6, #fcfafbef);
}
.pShowTextRefTitle {
  color: var(--c-brand);
  font-size: 22px;
  font-weight: 500;
}
.pShowTextRefCont {
  color: var(--c-brand);
  font-size: 16px;
  font-weight: 400;
  margin-left: 10px;
  margin-right: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

/********************************************/
/********************************************/
.showTextRef1 {
  margin-right: 2%;
  position: absolute;
  display: none;
  visibility: hidden;
  top: 2%;
  left: 2%;
  width: 20%;
  height: 30%;
  border-radius: 3%;
  background: linear-gradient(#ece5e6, #fcfafbef);
}
.pShowTextRefTitle1 {
  color: var(--c-brand);
  font-size: 22px;
  font-weight: 500;
}
.pShowTextRefCont1 {
  color: var(--c-brand);
  font-size: 16px;
  font-weight: 400;
  margin-left: 10px;
  margin-right: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

/********************************************/
/********************************************/
.showTextRef2 {
  margin-right: 2%;
  position: absolute;
  display: none;
  visibility: hidden;
  top: 2%;
  left: 2%;
  width: 20%;
  height: 30%;
  border-radius: 3%;
  background: linear-gradient(#ece5e6, #fcfafbef);
}
.pShowTextRefTitle2 {
  color: var(--c-brand);
  font-size: 22px;
  font-weight: 500;
}
.pShowTextRefCont2 {
  color: var(--c-brand);
  font-size: 16px;
  font-weight: 400;
  margin-left: 10px;
  margin-right: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

/********************************************/
/********************************************/
.showTextRef3 {
  margin-right: 2%;
  position: absolute;
  display: none;
  visibility: hidden;
  top: 2%;
  left: 2%;
  width: 20%;
  height: 30%;
  border-radius: 3%;
  background: linear-gradient(#ece5e6, #fcfafbef);
}
.pShowTextRefTitle3 {
  color: var(--c-brand);
  font-size: 22px;
  font-weight: 500;
}
.pShowTextRefCont3 {
  color: var(--c-brand);
  font-size: 16px;
  font-weight: 400;
  margin-left: 10px;
  margin-right: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

/********************************************/
/********************************************/
/********************************************/
/*----------------TEAM ---------------*/

.teamMember {
  position: relative;
  width: 100%;
  height: 500px;
}

@keyframes change {
  0% {
    background-image: url(../images/20190624_102830.jpg);
  }
  10% {
    background-image: url(../images/20181027_115919.jpg);
  }
  20% {
    background-image: url(../images/IMG_5705.JPEG);
  }
  30% {
    background-image: url(../images/IMG_5751.JPEG);
  }
  40% {
    background-image: url(../images/IMG_7848.JPEG);
  }
  50% {
    background-image: url(../images/20231013_105435.jpg);
  }
  60% {
    background-image: url(../images/20231012_182735.jpg);
  }
  70% {
    background-image: url(../images/20231012_182930.jpg);
  }
  80% {
    background-image: url(../images/INTAKE.JPG);
  }
  90% {
    background-image: url(../images/20230420_121939.jpg);
  }
  100% {
    background-image: url(../images/Screenshot\ 2024-01-29\ 111417.png);
  }
}

   @media (max-width: 1699px) {
    #references {
        display: none;
    }
}


@media (min-width: 1600px) {
    #references {
        display: block;
    }
}

 @media (max-width: 1599px) {
  #sliderSection {
      display: block;
  }
}


@media (min-width: 1600px) {
  #sliderSection {
      display: none;
  }
}


.carousel-item img {
  width: 100%;   
  height: 500px; 
  object-fit: cover; 
  
}
   
.carousel-item::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5); /* Poluprozirna crna pozadina */
      z-index: 1;
  }
 
  @media (min-width: 1600px) {
    #sliderSection {
        display: none;
    }
}


   .carousel-caption {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    width: 80%;
    background: rgba(0, 0, 0, 0.4); 
    border-radius: 10px;
    display: block !important;
}

.carousel-caption h5 {
    font-size: 26px;
     color: white;
}

.carousel-caption p {
    font-size: 18px;
    color: white;
}

.carousel-control-prev {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
 
  border: none;
  padding: 4px;
  border-radius: 5px;
}

.carousel-control-prev-icon {
  display: block;
  width: 30px;
  height: 30px;
  background-size: contain;
  background-position: center;
}

.carousel-control-next {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
 
  border: none;
  padding: 4px;
  border-radius: 5px;
}

.carousel-control-next-icon {
  display: block;
  width: 30px;
  height: 30px;
  background-size: contain;
  background-position: center;
}



@media (max-width: 1000px){
  .serprodaut{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
  }
  
    .serprodaut:hover h5 {
      color: white;
      font-weight: bolder;
      font-size: 28px;
      white-space: normal;
    
      padding: 10px;
      margin-bottom: 20px;
    }
  
    .serprodbtnaut h5 {
      color: white;
      font-weight: bolder;
      font-size: 28px;
      white-space: normal;
    
      padding: 10px;
      margin-bottom: 20px;
      
    }

    .serprodele{
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
      align-items: center;
    }
    
      .serprodele:hover h5 {
        color: white;
        font-weight: bolder;
        font-size: 28px;
        white-space: normal;
      
        padding: 10px;
        margin-bottom: 20px;
      }
    
      .serprodbtnele h5 {
        color: white;
        font-weight: bolder;
        font-size: 28px;
        white-space: normal;
      
        padding: 10px;
        margin-bottom: 20px;
        
      }

      .serprodser{
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
      }
      
        .serprodser:hover h5 {
          color: white;
          font-weight: bolder;
          font-size: 28px;
          white-space: normal;
        
          padding: 10px;
          margin-bottom: 20px;
        }
      
        .serprodbtnser h5 {
          color: white;
          font-weight: bolder;
          font-size: 28px;
          white-space: normal;
        
          padding: 10px;
          margin-bottom: 20px;
          
        }
  }
  
  .cookie-info {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(15,65,99, 0.7); 
    color: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
   
    text-align: center;
    display: none;
}

.map-container {
  width: 100%;
  height: 400px;
  display:flex;
  justify-content: center;
  align-items: center;
}

.map-container iframe{
  width: 100%;
  height: 100%;
  border: 0;
}