@font-face {
  font-family: "Montreal";
  src: url("fonts/PPNeueMontreal-Thin.woff2") format("woff2"),
    url("fonts/PPNeueMontreal-Thin.woff") format("woff"),
    url("fonts/PPNeueMontreal-Thin.ttf") format("truetype"),
    url("fonts/PPNeueMontreal-Thin.otf") format("opentype");
  font-weight: 100; /* Thin */
}

@font-face {
  font-family: "Montreal";
  src: url("fonts/PPNeueMontreal-Light.woff2") format("woff2"),
    url("fonts/PPNeueMontreal-Light.woff") format("woff"),
    url("fonts/PPNeueMontreal-Light.ttf") format("truetype"),
    url("fonts/PPNeueMontreal-Light.otf") format("opentype");
  font-weight: 300; /* Light */
}

@font-face {
  font-family: "Montreal";
  src: url("fonts/PPNeueMontreal-Regular.woff2") format("woff2"),
    url("fonts/PPNeueMontreal-Regular.woff") format("woff"),
    url("fonts/PPNeueMontreal-Regular.ttf") format("truetype"),
    url("fonts/PPNeueMontreal-Regular.otf") format("opentype");
  font-weight: 400; /* Normal */
}

@font-face {
  font-family: "Montreal";
  src: url("fonts/PPNeueMontreal-Bold.woff2") format("woff2"),
    url("fonts/PPNeueMontreal-Bold.woff") format("woff"),
    url("fonts/PPNeueMontreal-Bold.ttf") format("truetype");
  font-weight: 700; /* Bold */
}

body,
.section-title,
.project-title,
.project-description,
.project-tags,
.custom-btn {
  font-family: "Montreal", sans-serif;
}

/* Reset default styles */
body,
html {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.7;
  font-family: "Montreal", sans-serif; /* Primena fonta na sve elemente */
  color: #000000;
}


#send-dugme svg {
  pointer-events: none;
}


.desktop-right-30 {
  margin-right: 30px;
  --bs-gutter-x: 0rem !important;
}

.nav-link.active {
  color: #ffd03c !important;
}

.desk-margin-top-0 {
  margin-top: 0px !important;
}

.visina-videa {
  max-height: 398px;
}

.wwa-hero-content {
  color: white;
  width: 100%;
  z-index: 1;
  text-align: center;
  max-width: 1025px;
  padding-right: 15px;
  display: flex;
}

.wwa-ispod-hedera {
  border: 1px solid white;
  border-radius: 30px;
  margin-top: -100px;
  padding: 60px;
  color: white;
  background-color: black;
  position: relative;
  border: 1px solid #fff;
  max-width: 1296px;
  margin-left: auto;
  margin-right: auto;
}

.wwa-footer-section {
  position: relative;
  padding-left: 0px;
}

.text-ispod-hedera {
  font-size: 34px;
  font-weight: 300;
  line-height: 47.6px;
}

.wwa-naslov-header {
  color: #828697;
  font-size: 20px;
}

.wwa-podnaslov-header {
  color: #fff;
  font-size: 20px;
}

.wwa-velikitekst-header {
  font-weight: 500;
  line-height: 41.14px;
  color: #fff;
  font-size: 34px;
}

.wwa-zvezdica {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  width: 49px;
  height: 49px;
}

.wwa-zvezdica svg {
  position: absolute;
  top: -25%;
}

.team-card-title {
  font-size: 83px;
  font-weight: 700;
  text-align: center !important;
}

.team-ime {
  font-weight: 700;
  font-size: 34px;
  color: black;
}

.team-titula {
  font-weight: 300;
  font-size: 24px;
  color: #828697;
}

.team-text {
  padding-top: 10px;
  font-size: 28px;
  line-height: 40px;
  text-align: left;
  font-weight: 300;
}

.team-text-bold {
  padding-top: 10px;
  font-size: 38px;
  text-align: left;
  font-weight: 500;
  line-height: 121%;
}

.team-card {
  border-radius: 30px;
  overflow: hidden;
  margin-top: 10px;
}
.team-card img {
  width: 100%;
  border-radius: 30px;
}
.team-card h5 {
  margin-top: 35px;
  font-weight: bold;
}
.team-card p {
  color: gray;
  margin-bottom: 15px;
  line-height: 32px;
}

.kaz-block {
  text-align: center;
  align-items: center;
  display: contents;
}

.container-custom {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 15px;
}

.zaobljeni-uglovi {
  border-radius: 30px;
}

.menu-no-scroll {
  max-width: 1296px;
}

.scroll-to-top.hide {
  opacity: 0;
}

input::placeholder {
  color: #828697;

  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}

.instagram-btn {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4486_398)'%3E%3Cpath d='M17.625 3.17388C22.3342 3.17388 22.8918 3.19453 24.7438 3.27715C26.465 3.35288 27.3945 3.64204 28.0141 3.88301C28.8334 4.19971 29.4255 4.58525 30.0382 5.198C30.6579 5.81763 31.0365 6.40283 31.3532 7.22212C31.5942 7.84175 31.8834 8.77808 31.9591 10.4924C32.0417 12.3513 32.0624 12.9089 32.0624 17.6112C32.0624 22.3204 32.0417 22.8781 31.9591 24.7301C31.8834 26.4513 31.5942 27.3807 31.3532 28.0003C31.0365 28.8196 30.651 29.4117 30.0382 30.0245C29.4186 30.6441 28.8334 31.0228 28.0141 31.3395C27.3945 31.5804 26.4582 31.8696 24.7438 31.9453C22.885 32.0279 22.3273 32.0486 17.625 32.0486C12.9158 32.0486 12.3582 32.0279 10.5062 31.9453C8.78496 31.8696 7.85552 31.5804 7.23589 31.3395C6.4166 31.0228 5.82451 30.6372 5.21177 30.0245C4.59214 29.4048 4.21348 28.8196 3.89678 28.0003C3.65581 27.3807 3.36665 26.4444 3.29092 24.7301C3.2083 22.8712 3.18765 22.3135 3.18765 17.6112C3.18765 12.9021 3.2083 12.3444 3.29092 10.4924C3.36665 8.77119 3.65581 7.84175 3.89678 7.22212C4.21348 6.40283 4.59902 5.81074 5.21177 5.198C5.8314 4.57837 6.4166 4.19971 7.23589 3.88301C7.85552 3.64204 8.79185 3.35288 10.5062 3.27715C12.3582 3.19453 12.9158 3.17388 17.625 3.17388ZM17.625 0C12.8401 0 12.2411 0.0206543 10.3616 0.103271C8.48892 0.185889 7.20147 0.488818 6.08613 0.922559C4.92261 1.37695 3.93809 1.97593 2.96045 2.96045C1.97593 3.93809 1.37695 4.92261 0.922559 6.07925C0.488818 7.20147 0.185889 8.48203 0.103271 10.3547C0.0206543 12.2411 0 12.8401 0 17.625C0 22.4099 0.0206543 23.0089 0.103271 24.8884C0.185889 26.7611 0.488818 28.0485 0.922559 29.1639C1.37695 30.3274 1.97593 31.3119 2.96045 32.2896C3.93809 33.2672 4.92261 33.873 6.07925 34.3206C7.20147 34.7543 8.48203 35.0572 10.3547 35.1398C12.2342 35.2225 12.8332 35.2431 17.6181 35.2431C22.403 35.2431 23.002 35.2225 24.8815 35.1398C26.7542 35.0572 28.0417 34.7543 29.157 34.3206C30.3136 33.873 31.2981 33.2672 32.2758 32.2896C33.2534 31.3119 33.8593 30.3274 34.3068 29.1708C34.7405 28.0485 35.0435 26.768 35.1261 24.8953C35.2087 23.0158 35.2293 22.4168 35.2293 17.6319C35.2293 12.847 35.2087 12.248 35.1261 10.3685C35.0435 8.4958 34.7405 7.20835 34.3068 6.09302C33.873 4.92261 33.2741 3.93809 32.2896 2.96045C31.3119 1.98281 30.3274 1.37695 29.1708 0.929443C28.0485 0.495703 26.768 0.192773 24.8953 0.110156C23.0089 0.0206543 22.4099 0 17.625 0Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: filter 0.3s ease;
}

.instagram-btn:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 36 36' fill='white'%3E%3Cpath d='M17.625 3.17388C22.3342 3.17388 22.8918 3.19453 24.7438 3.27715C26.465 3.35288 27.3945 3.64204 28.0141 3.88301C28.8334 4.19971 29.4255 4.58525 30.0382 5.198C30.6579 5.81763 31.0365 6.40283 31.3532 7.22212C31.5942 7.84175 31.8834 8.77808 31.9591 10.4924C32.0417 12.3513 32.0624 12.9089 32.0624 17.6112C32.0624 22.3204 32.0417 22.8781 31.9591 24.7301C31.8834 26.4513 31.5942 27.3807 31.3532 28.0003C31.0365 28.8196 30.651 29.4117 30.0382 30.0245C29.4186 30.6441 28.8334 31.0228 28.0141 31.3395C27.3945 31.5804 26.4582 31.8696 24.7438 31.9453C22.885 32.0279 22.3273 32.0486 17.625 32.0486C12.9158 32.0486 12.3582 32.0279 10.5062 31.9453C8.78496 31.8696 7.85552 31.5804 7.23589 31.3395C6.4166 31.0228 5.82451 30.6372 5.21177 30.0245C4.59214 29.4048 4.21348 28.8196 3.89678 28.0003C3.65581 27.3807 3.36665 26.4444 3.29092 24.7301C3.2083 22.8712 3.18765 22.3135 3.18765 17.6112C3.18765 12.9021 3.2083 12.3444 3.29092 10.4924C3.36665 8.77119 3.65581 7.84175 3.89678 7.22212C4.21348 6.40283 4.59902 5.81074 5.21177 5.198C5.8314 4.57837 6.4166 4.19971 7.23589 3.88301C7.85552 3.64204 8.79185 3.35288 10.5062 3.27715C12.3582 3.19453 12.9158 3.17388 17.625 3.17388ZM17.625 0C12.8401 0 12.2411 0.0206543 10.3616 0.103271C8.48892 0.185889 7.20147 0.488818 6.08613 0.922559C4.92261 1.37695 3.93809 1.97593 2.96045 2.96045C1.97593 3.93809 1.37695 4.92261 0.922559 6.07925C0.488818 7.20147 0.185889 8.48203 0.103271 10.3547C0.0206543 12.2411 0 12.8401 0 17.625C0 22.4099 0.0206543 23.0089 0.103271 24.8884C0.185889 26.7611 0.488818 28.0485 0.922559 29.1639C1.37695 30.3274 1.97593 31.3119 2.96045 32.2896C3.93809 33.2672 4.92261 33.873 6.07925 34.3206C7.20147 34.7543 8.48203 35.0572 10.3547 35.1398C12.2342 35.2225 12.8332 35.2431 17.6181 35.2431C22.403 35.2431 23.002 35.2225 24.8815 35.1398C26.7542 35.0572 28.0417 34.7543 29.157 34.3206C30.3136 33.873 31.2981 33.2672 32.2758 32.2896C33.2534 31.3119 33.8593 30.3274 34.3068 29.1708C34.7405 28.0485 35.0435 26.768 35.1261 24.8953C35.2087 23.0158 35.2293 22.4168 35.2293 17.6319C35.2293 12.847 35.2087 12.248 35.1261 10.3685C35.0435 8.4958 34.7405 7.20835 34.3068 6.09302C33.873 4.92261 33.2741 3.93809 32.2896 2.96045C31.3119 1.98281 30.3274 1.37695 29.1708 0.929443C28.0485 0.495703 26.768 0.192773 24.8953 0.110156C23.0089 0.0206543 22.4099 0 17.625 0Z' fill='white'/%3E%3C/svg%3E");
}

.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  background-color: #ffd03c;
  border-radius: 50%;
}

.providno {
  background: #000;
}

.crno {
  background: #000;
}

.final-title-box {
  width: 70%;
}

.margintop {
  margin-top: 100px;
}

.padding-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

/*animacija na kontakt formi */

.box {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 800px;
}
.box__input {
  border: none;
  outline: none;
  height: 64px;
  width: 98%;
  padding: 0;
  font-size: 2rem;
  box-sizing: border-box;
}
.box__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 90px;
  width: 299.7%;
  transform: translateX(-66.66%);
  opacity: 0.1;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDYwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIGQ9Ik0wLDU2LjVjMCwwLDI5OC42NjYsMCwzOTkuMzMzLDBDNDQ4LjMzNiw1Ni41LDUxMy45OTQsNDYsNTk3LDQ2Yzc3LjMyNywwLDEzNSwxMC41LDIwMC45OTksMTAuNWM5NS45OTYsMCw0MDIuMDAxLDAsNDAyLjAwMSwwIj48L3BhdGg+PC9zdmc+);
  background-position: center bottom;
  background-repeat: repeat-x;
  pointer-events: none;
  touch-action: none;
  transition: transform 0s cubic-bezier(0, 0.25, 0.5, 1), opacity 0.4s;
}
.box__input:focus + .box__line {
  opacity: 1;
  transform: translateX(0);
  transition-duration: 0.8s, 0.4s;
  
}


/*image to video tebela */

.image-container-alteryx {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 30px;
}

.project-breakdown {
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 10px;
  padding: 10px 20px;
  z-index: 9999;
  width: auto;
  display: inline-block;
  height: auto;
  position: absolute;
  top: 20px;
  left: 20px;
}

.image-container-alteryx img {
  opacity: 1;
}
.image-container-alteryx img,
.image-container-alteryx video {
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
  border-radius: 30px;
}
.image-container-alteryx video {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  pointer-events: none;
  border-radius: 30px;
}
.image-container-alteryx:hover video {
  opacity: 1;
}
.image-container-alteryx:hover img {
  opacity: 1;
}

.client-voice-box {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("images/client_voice_bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 657px;
  color: #fff;
  border-radius: 30px;
  margin: 40px 20px 40px 20px;
  position: relative;
}

.zvezda-gold {
  margin: -40px 0 0 0px;
  position: absolute;
}

.zvezda-gold img {
  width: 44px;
  height: 44px;
}

.quoteParent {
  position: relative;
}

.quote-gold {
  position: absolute;
  top: 44px;
  right: 44px;
}

.logo-alteryx-text {
  font-size: 28px;
  padding-top: 56px;
  text-align: center;
}

.logo-minacord-text {
  font-size: 28px;
  padding-top: 56px;
  text-align: center;
}

.logo-alteryx-text-credits {
  font-size: 14px;
  padding-top: 64px;
  text-align: center;
}

.logo-minacord-text-credits {
  font-size: 14px;
  padding-top: 30px;
  text-align: center;
}

.the-impact {
  color: #fff;
  font-size: 34px;
  font-style: normal;
  font-weight: 500;
  line-height: 121%;
}

.width-logo-alteryx {
  width: 50%;
}

/* Stil za image-container */
.image-container-next-project {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  max-width: 636px; /* Maksimalna širina slike i videa */
  margin: 0 auto;
  border-radius: 30px;
}

/* Stil za kategorijsku ikonicu */
.image-container-next-project .category-icon-next {
  position: absolute;
  top: 20px;
  left: 20px;
  opacity: 0.8;
  z-index: 3;
  width: 144px !important;
  height: 19px;
  pointer-events: none;
  border-radius: 0px !important;
}

.section-decorative-line {
  max-width: 370px;
  text-align: center;
}

/* Stil za kategorijsku ikonicu TECH */
.image-container-next-project .category-icon-next-tech {
  position: absolute;
  top: 20px;
  left: 20px;
  opacity: 0.8;
  z-index: 3;
  width: 64px !important;
  height: 14px;
  pointer-events: none;
  border-radius: 0px !important;
}

/* Dimenzije slike i videa */
.image-container-next-project img,
.image-container-next-project video {
  width: 100%;
  height: 100%; /* Postavlja sliku i video na istu visinu */
  object-fit: cover; /* Sprečava rastezanje i osigurava da proporcije ostanu iste */
  transition: opacity 0.3s ease;
}

.broj {
  font-size: 58px;
  font-weight: 100;
  color: #ffd03c;
  margin-right: 15px;
}

/* Video na hover */
.hover-video-next-project {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  border-radius: 30px !important;
}

/* Hover efekat */
.image-container-next-project:hover .hover-video-next-project {
  opacity: 1;
}

.image-container-next-project:hover img {
  opacity: 0;
}

/* Ikonica ostaje vidljiva na hover */
.image-container-next-project:hover .category-icon-next {
  opacity: 0.8;
}

/* Stil za tekst */
.project-title,
.project-tags {
  text-align: left; /* Poravnanje teksta levo */
  max-width: 636px; /* Tekst poravnat sa slikom */
  margin: 10px auto 0; /* Centrirano po horizontalnoj osi */
}

/*image to video tebela - kraj */

.menu-no-scroll {
  padding: 3px;
  border-radius: 30px;
  background: #000;
  text-align: center;
  color: white !important;
  font-size: 1.2rem;
  font-weight: 900;
}

.menu-no-scroll-contact {
  padding: 3px;
  border-radius: 30px;
  background: #000;
  text-align: center;
  color: white !important;
  font-size: 1.2rem;
  font-weight: 900;
}

.logo {
  padding: 0 30px; /* Podešavanje paddinga kada nije skrolovano */
  margin-top: -2px;
}
.nav-link {
  color: white !important;
  padding: 12px;
}

.nav-item {
  padding: 0px 20px;
}
.nav-mobi {
  background-color: black !important;
  z-index: 1000;
  border-radius: 50px;
  margin-top: 20px;
  width: 1296px;
  padding: 10px 0px 5px 20px;
  right: unset;
  left: unset;
}

/* Custom Navbar */

#lottie-razzle-container {
  margin-top: -7px;
}

.navbar-brand {
  font-size: 2rem;
  font-weight: 700;
}

.navbar-toggler {
  border: 0;
}
.navbar-toggler:focus {
  box-shadow: none;
}

.lets-razzle-dazzle {
  border: 2px solid white !important;
  padding: 10px 25px; /* Povecano za bolje centriranje */
  border-radius: 25px;
  color: white !important;
  font-size: 1.28rem;
  font-weight: 700;
  margin-left: auto; /* Centriranje u odnosu na meni */
}

/* Hero Section Home i Kontakt */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wwa-hero {
  height: 1200px;
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  background-color: #000;
}

.wwa-background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -1;
  background-color: black;
}

.background-video-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.hero-content {
  color: white;
  width: 100%;
  z-index: 1;
  text-align: center;
  padding-bottom: 150px;
  padding-top: 28px;
}

.text-above-grab {
  font-size: 2rem;
}

.fixed-height {
  height: 408px; /* Postavi fiksnu visinu */
  object-fit: cover; /* Osigurava proporcionalno skaliranje */
}

.row > .col-auto {
  margin-right: 30px; /* Razmak između kolona */
  --bs-gutter-x: 0rem;
}

.row > .col-auto:last-child {
  margin-right: 0; /* Uklanja razmak posle poslednjeg elementa */
  --bs-gutter-x: 0rem;
}

.hero-content h1 {
  font-size: 4rem;
  font-weight: bold;
}

/* Hero Section za Minacord projekt */
.hero-minacord {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url("images/minacord-back.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Hero Section za Alteryx projekt */
.hero-alteryx {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url("images/HeaderAlteryx.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.background-video-alteryx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  background-color: #000;
}

.share-input-group {
 
  width: 100% !important;
}



.hero-content-alteryx {
  color: white;
  width: 100%;
  z-index: 1;
  text-align: left;
  padding-bottom: 202px;
}

.divider-alteryx {
  padding: 20px 0px;
}

.videoplayer-alteryx-header {
  margin-top: -250px;
}

.plyr {
  --shadow-color: 197deg 32% 65%;
  border-radius: 30px;
  box-shadow: 0 0.5px 0.6px hsl(var(--shadow-color) / 0.36),
    0 1.7px 1.9px -0.8px hsl(var(--shadow-color) / 0.36),
    0 4.3px 4.8px -1.7px hsl(var(--shadow-color) / 0.36),
    -0.1px 10.6px 11.9px -2.5px hsl(var(--shadow-color) / 0.36);
}

.hero-content-alteryx h1 {
  font-size: 4rem;
  font-weight: bold;
}

.text-above-grab-alteryx {
  font-size: 66px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}

.slider-text-alteryx {
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px;
  text-align: left;
}

/* Play Button */
.play-button {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 20px auto;
  cursor: pointer;
}

.play-icon {
  width: 100%;
  height: 100%;
}

.preview-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  display: none;
  object-fit: cover;
}

/* Kraj Hero za Alteryx*/

.share-link-box {
  width: 620px;
}

.podnaslov h4 {
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  color: black;
  margin-bottom: 20px;
}



.podnaslov {
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}

.podnaslov-tro {
  margin-top: 100px;
}

.fun-fact {
  font-size: 20px;
  font-weight: 700;
}

.fun-fact-text {
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
}

/* Play Button */
.play-button {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 20px auto;
  cursor: pointer;
}

.play-icon {
  width: 100%;
  height: 100%;
}

.preview-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  display: none;
  object-fit: cover;
}

.small-button {
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  text-align: center;
  border-radius: 30px;
  border: 2px solid black;
  color: black;
  padding: 0px 15px;
}

.small-button:hover {
  background-color: #ffd03c;
}

.sound {
  width: 24px;
  height: 20px;
  background-image: url('images/svg/sound_icon_white.svg');
  background-repeat: no-repeat;
 display: inline-block !important;
 margin-left: 10px;
 cursor: pointer;
 position: relative;
  top: 5px;
}

.sound:hover {
  width: 24px;
  height: 20px;
  background-image: url('images/svg/sound_icon_yellow.svg');
  background-repeat: no-repeat;
  display: inline-block !important;
  margin-left: 10px;
  cursor: pointer;
}

/* Logo Carousel */
.logo-carousel {
  position: absolute;
  bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
  z-index: 1;
  padding: 10px 0; /* Razmak izmedu logotipa i ivica pozadine */
}

.logo-carousel img {
  width: auto;
  max-height: 80px; /* Smanjeno kako bi se izbeglo preklapanje */
  padding: 0 25px;
}

.slider-container {
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;
  font-size: 24px;
  text-align: center;
  font-weight: bold;
}

.slider-text {
  font-size: 82px;
  position: absolute;
  width: 100%;
  opacity: 0;
  animation: slide 20s infinite; /* Ukupno vreme animacije */
  background-image: radial-gradient(white, grey);
  color: transparent;
  background-clip: text;
}

/* Responsive velicine fonta */
@media (max-width: 1200px) {
  /* Tablet */
  .slider-text {
    font-size: 60px; /* Velicina fonta za tablete */
  }
}

@media (max-width: 992px) {
  /* Laptop/Notebook */
  .slider-text {
    font-size: 48px; /* Velicina fonta za laptop/notes */
  }

  .logo-carousel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

.slider-text.word1 {
  opacity: 1; /* Prva rec je odmah vidljiva */
}

@keyframes slide {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  } /* Nova rec dolazi */
  5% {
    transform: translateY(0);
    opacity: 1;
  } /* Nova rec postaje vidljiva */
  20% {
    transform: translateY(0);
    opacity: 1;
  } /* Nova rec ostaje u centru */
  25% {
    transform: translateY(100%);
    opacity: 0;
  } /* Trenutna rec odlazi */
  30% {
    transform: translateY(100%);
    opacity: 0;
  } /* Nova rec ostaje na dnu */
  100% {
    transform: translateY(100%);
    opacity: 0;
  } /* Nova rec nestaje */
}

.word1 {
  animation-delay: 0s;
}
.word2 {
  animation-delay: 4s;
}
.word3 {
  animation-delay: 8s;
}
.word4 {
  animation-delay: 12s;
}
.word5 {
  animation-delay: 16s;
}

/* Play Button Container */
.play-button-container {
  position: relative;
  width: 350px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

.wwa-play-button-container {
  position: relative;
  width: 1100px;
  margin: 0 auto;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  margin-top: 0px;
}

#lottie-razzle-centar {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ispod-lottie {
  margin-top: 40px;
  margin-bottom: 100px;
}
.height-392-desktop {
  height: 392px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.black-circle {
  position: absolute;
  width: 70%;
  height: 70%;
  background-color: black;
  border-radius: 50%;
  transition: transform 1.3s ease;
}

.top-left {
  top: -20%;
  left: -20%;
}
.top-right {
  top: -20%;
  right: -20%;
}
.bottom-left {
  bottom: -20%;
  left: -20%;
}
.bottom-right {
  bottom: -20%;
  right: -20%;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 52px;
  color: white;
  transition: color 0.3s ease;
}

.plyr--full-ui input[type="range"] {
  color: #ffd03c !important;
}

.showreel-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 14px;
  font-weight: bold;
  color: white;
  opacity: 0;
  transition: all 0.5s ease;
}

.play-button-container:hover .black-circle.top-left {
  transform: translate(-150%, -150%);
}

.play-button-container:hover .black-circle.top-right {
  transform: translate(150%, -150%);
}

.play-button-container:hover .black-circle.bottom-left {
  transform: translate(-150%, 150%);
}

.play-button-container:hover .black-circle.bottom-right {
  transform: translate(150%, 150%);
}

.play-button-container:hover .play-button {
  color: yellow;
}

.play-button-container:hover .showreel-text {
  opacity: 1;
  transform: translate(-50%, 30px);
}

/* Hamburger ikona bela */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Pozadina padajuceg menija crna */

.plyr__control--overlaid {
  background: #615d5d !important;
  border: 5px solid #fff !important;
  padding: 25px !important;
}

.plyr__control--overlaid:hover {
  background: #615d5d !important;
  border: 5px solid #ffd03c !important;
}

.plyr__control:hover {
  background: #000 !important;
  color: #ffd03c !important;
}

.plyr__control--overlaid {
  color: #fff !important;
}

.plyr__control--overlaid:hover {
  color: #ffd03c !important;
  background: rgba(97, 93, 93, 0.9) !important;
}

.plyr {
  box-shadow: none !important;
}

.responsive-div {
  width: 100%;
  overflow: hidden;
}

.responsive-div-2 {
  width: 100%;
  overflow: hidden;
}

.responsive-div-3 {
  width: 100%;
  overflow: hidden;
}

.responsive-div-4 {
  width: 100%;
  overflow: hidden;
}

/* video icons */

.video-icons {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.strelica-alteryx {
  position: absolute;
  right: 12px;
  top: 9px;
  background-image: url("images/arrow-black.svg");
  width: 17px;
  height: 17px;

  background-repeat: no-repeat;
}

.strelica-alteryx:hover {
  position: absolute;
  right: 12px;
  top: 9px;
  background-image: url("images/arrow-yellow.svg");
  width: 17px;
  height: 17px;

  background-repeat: no-repeat;
}

.abtn {
  color: black;
  text-decoration: none;
}

.abtn:hover {
  color: #ffd03c;
  text-decoration: none;
}

.mob-margine-top-20 {
  margin-top: 30px;
}

.mob-margine-top-20-minacord {
  margin-top: 20px;
}
.video-icons img {
  opacity: 0;
}

.video-icons img,
.video-icons video {
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
  border-radius: 30px;
}
.video-icons video {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  pointer-events: none;
  object-fit: contain; /* Sprečava obsecanje */
}
.video-icons:hover video {
  opacity: 1;
}
.video-icons:hover img {
  opacity: 0;
}

.a3 {
  height: 730px;
}

/* video-icons end */

.section-title-final-design {
  font-size: 66px;
  font-weight: 900;
  color: #000;
  width: 500px;
}

/* Kolor karta */

.colorcard-box {
  padding: 84px 180px;
  border-radius: 30px;
  background: #f2f4f7;
  box-shadow: 0px 0px 150px 0px #dfe1e4 inset;
  max-width: 1296px;
}

.mobile {
  display: none !important;
}

.desktop {
  display: block !important;
}

.inline {
  display: inline;
  display: flex;
}

.testimonial-title h2 {
  font-size: 34px;
  font-weight: 700;
}

.color-card {
  padding: 15px 15px 0px 15px;
  text-align: left;
}
.color-box {
  height: 44px;
  border-radius: 8px;
  position: relative;
  margin-bottom: 5px;
}
.color-box span {
  position: absolute;
  top: 5px;
  left: 10px;
  font-weight: bold;
  color: white;
  letter-spacing: 2px;
  font-size: 14px;
}

.color-details-title {
  font-weight: 700;
  letter-spacing: 1px;
  color: #5a6771;
}

.color-details {
  font-size: 10px;
  color: #5a6771;
  letter-spacing: 2px;
  line-height: 1.5;
}
.color-details div {
  margin-bottom: 5px;
}

.projects-section {
  padding: 100px 0;
}

.section-title {
  font-size: 66px;
  font-weight: 900;
  color: #000;
}

.section-decorative-line {
  margin-top: -10px;
  margin-bottom: 60px;
}

.section-decorative-line img {
  max-width: 636px;
  height: auto;
}

.section-decorative-line-alteryx img {
  max-width: 370px;
  height: auto;
}

#share {
  margin-top: 5px;
}

.desk-margine-top-20 {
  margin-top: 0px;
}

.project-item {
  align-items: center;
  padding-bottom: 60px;
}

.project-item .image-container {
  position: relative;
  overflow: hidden;
  border-radius: 30px !important;
}

.project-item img {
  border-radius: 30px !important;
 /* transition: opacity 0.3s ease; */
}

.project-description {
  color: #828697;
  padding: 20px 0px 20px 0;
  border-bottom: 1px solid;
  text-align: left;
  font-size: 1.2em;
}

.zuti-slash {
  color: #ffd03c;
}

.hover-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.image-container:hover img {
  opacity: 0;
}

.image-container-no-hover:hover img {
  opacity: 1;
}

.image-container:hover .hover-video {
  opacity: 1;
}

.copyright-contact {
  display: none;
}

.image-container {
  position: relative;
}

.ul-alteryx {
  font-size: 20px;
}

.project-title {
  font-size: 2.2rem;
  font-weight: 500;
  text-align: left;
  color: #000;
}

.project-description {
  color: #6c757d;
}

.project-tags {
  font-size: 1.15em;
  padding: 10px 0;
  color: #000 !important;
  text-align: left;
}

.wwa-zvezda-gold img {
  
  position: absolute;
}

.mb-4.textarea-wrapper {
  position: relative;
}

.char-counter {
  position: absolute;
  bottom: 10px;
  right: 20px;
  color: #828697;
}

.project-content {
  text-align: left;
}

.custom-btn {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 10px 20px;
  color: black;
  border: 1px solid black;
  overflow: hidden;
  transition: color 0.3s ease;
  border-radius: 50px;
}

.custom-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background-color: #000;
  transition: left 0.3s ease;
  z-index: -1;
}

.custom-btn:hover {
  color: #ffd03c !important;
  border: 1px solid black;
}

.custom-btn:hover::before {
  left: 0;
}

.wwa-accordion-text {
  font-size: 20px;
  color: white;
  font-weight: 300;
}

.wwa-accordion-text-li {
  font-size: 20px;
  color: white;
  font-weight: 700;
  padding-top: 20px;
}

.www-accordion-body {
  padding: 0px 0px 54px 0px !important;
}

.accordion-collapse {
  padding-left: 0px !important;
}
.wwa-custom-btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  transition: color 0.3s ease, border-color 0.3s ease;
  border-radius: 50px;
  border: 1px solid white;
  font-size: 26px;
  color: white;
  font-weight: 300;
  padding: 10px 50px;
  background-color: transparent;
  z-index: 1;
}

.wwa-custom-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%; /* Početna pozicija izvan dugmeta s desne strane */
  width: 100%;
  height: 100%;
  background-color: #ffd03c;
  transition: left 0.3s ease-in-out;
  z-index: -1;
}

.wwa-custom-btn:hover {
  color: black !important;
  border: 1px solid transparent;
}

.wwa-custom-btn:hover::before {
  left: 0; /* Animacija koja pomera boju s desna na levo */
}

.where-we-shine {
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  color: #fff;
  position: relative;
  padding-top: 100px;
}

.wws-title {
  font-size: 83px;
  font-weight: 700;
  color: white;
  padding-bottom: 50px;
}

.strelica-btn {
  font-size: 22px;
  margin-left: 10px;
}

.btnn {
  background-color: black;
  color: #ffd03c;
  padding: 20px 100px;
  border: none;
  outline: none;
  position: relative;
  cursor: pointer;
  font-size: 34px;
  font-weight: 700;
  border-radius: 10px;

  --background-color: black;
  --border-size: 2px;
  --accent-color: #ffd03c;
}

.btnn.btn-background-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  background-color: none;
  
}


.btnnn {
  background-color: white;
  
  border: none;
  outline: none;
  position: relative;
  cursor: pointer;
 

}

.hover-mail:hover {
  color: #ffd03c;
}

.hover-mail {
  color: white;
  text-decoration: none;
  margin-left: 10px;
}

.btn-outline-dark {
  font-weight: bold;
}

/* Hover efekat za stavke u meniju sa linijom */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;

  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link:hover {
  color: #ffd03c !important;
}

/* Stil za ikonu kategorije na slici projekta */
.image-container .category-icon {
  position: absolute;
  top: 20px;
  left: 20px;

  opacity: 0.8;
  z-index: 3;
  border-radius: 0px !important;
}

.category-icon {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3; /* Da se uveri� da nije prekrivena */
  pointer-events: none; /* Da hover na video ne utice na ikonu */
}

.image-container:hover .category-icon {
  opacity: 1; /* Osigurava da je vidljiva na hover */
}

.scrolling-container {
  display: flex;
  width: 600%; /* Povecana sirina za neprekidan efekat */
  position: absolute;
  bottom: 0px;
  height: 30px; /* Visina trake */
  overflow: hidden;
  z-index: 2;
  will-change: transform; /* Optimizacija za glatke transformacije */
  animation: scrollContinuous 30s linear infinite; /* Animacija za pomeranje */
}

.scrolling-container-brand-desktop {
  display: flex;
  position: absolute;
  bottom: 10px;
  height: 117px;
}

.scrolling-item-desktop {
  flex-shrink: 0;
  width: auto; /* Sirina slika ostaje proporcionalna */
  height: 100%;
}

.scrolling-item-desktop img {
  border-radius: 0px !important;
  height: 97px;
}

/* next project */

.next-project {
  background-color: #ecf2fc;
  background-size: cover;
  background-position: center;
  border-radius: 60px;
  color: #000;
  padding: 60px 0px !important;
  position: relative;
  text-align: left;
  z-index: 123;
}

.footer-section-next-project {
  margin-top: -70px;
  z-index: 1;
  padding-top: 130px !important;
}

/* What We Do Stranica */

.wwa-instagram {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: url("images/instagram.svg");
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 15px;
}

.wwa-instagram:hover {
  background-image: url("images/instagram-yellow.svg");
}

.wwa-linkedin {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: url("images/linkedin.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.wwa-linkedin:hover {
  background-image: url("images/linkedin-yellow.svg");
}

.wwa-what-we-do-section {
  background-image: url("images/Optical_illusion_bg.webp");
  background-size: cover;
  background-position: center;
  border-radius: 30px;
  color: #ffffff;
  padding: 50px 90px !important;
  position: relative;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  max-width: 1296px;
}


.padding100top {
  padding-top: 100px;
}
.margin50top {
  margin-top: 50px;
}

.margin150top {
  margin-top: 150px;
}
.wwa-what-we-do-section-title {
  font-size: 34px;
  font-weight: 700;
  line-height: 40px;
}

.wwa-what-we-do-section-text {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  margin-bottom: 0px;
}

.wwa-scrolling-item-desktop {
  margin-top: 30px;
}

.wwa-scrolling-item-desktop img {
  border-radius: 0px !important;
  height: 78px;
  max-width: 1296px;
}

/* What We Do Best */

.what-we-do-section {
  background-image: url("images/Optical_illusion_bg.webp"); /* Putanja do PNG slike */
  background-size: cover;
  background-position: center;
  border-radius: 15px;
  color: #ffffff;
  padding: 100px 0px  117px 0px !important;
  position: relative;
  text-align: left;
  margin: 12px;
}

.section-title-what-we-do {
  font-size: 4rem;
  font-weight: 900;
  text-align: center;
}

.text-highlight {
  /* color: #ffd03c; */
}

.section-description {
  max-width: 1320px;
  margin: 0 auto;
  color: #fff;
  padding: 60px 0px;
  text-align: left;
  font-size: 25px;
}

.divider-icon {
  color: #ffd03c;
  margin-top: 20px;
}

.column-title {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 34px;
}

.title-underline {
  text-align: left;
}

.what-we-do-divider {
  text-align: center;
}

.our-works {
  text-align: left;
}

.find-out-more {
  font-size: 2.35rem;
  position: relative; /* Kljuc za ::before */
  display: inline-block;
  font-weight: 900;
  padding: 10px 50px;
  color: #fff; /* Tekst ostaje beo */
  border: 1px solid #fff; /* Beli border */
  overflow: hidden; /* Sprecava izlazak pseudoelementa iz okvira */
  border-radius: 50px;
  transition: color 0.3s ease; /* Glatka promena boje */
  z-index: 1; /* Zadr�ava tekst i border iznad pozadine */
}

.find-out-more::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%; /* Pocetna pozicija */
  width: 100%;
  height: 100%;
  background-color: #ffd03c; /* �uta boja */
  z-index: -1; /* Pozadina ispod teksta i bordure */
  transition: left 0.3s ease; /* Glatko klizanje pozadine */
  border-radius: 50px; /* Isti zaobljeni ugao kao dugme */
}

.find-out-more:hover {
  color: #000; /* Tekst postaje crn */
  border-color: #fff; /* Border ostaje beo */
}

.accordion-button {
  padding-left: 10px !important;
}

.accordion-button::after {
  flex-shrink: 0;
  width: 40px; /* Postavite konkretne dimenzije */
  height: 40px;
  margin-left: auto;
  content: "";
  background-image: url("images/plus.svg");
  background-repeat: no-repeat;
  background-size: 60%; /* Smanjuje veličinu slike unutar kvadrata */
  background-position: center;
  transition: var(--bs-accordion-btn-icon-transition);
  padding: 5px; /* Razmak unutar kvadrata */
  box-sizing: border-box; /* Omogućava padding unutar dimenzija kvadrata */
}

.strelica {
  color: #ffd03c;
  font-weight: 100;
  font-size: 2.3rem;
  padding-left: 20px;
}

.strelica:hover {
  color: #000;
  border-color: #fff; /* Border ostaje beo */
}

.find-out-more:hover::before {
  left: 0; /* Klizanje pozadine na hover */
}

/* Testimonial slajder */

#testimonial-slider {
  background-color: #ecf2fc;
}

.testimonial-slide {
  background-color: #fff;
  border-radius: 30px !important;
  box-shadow: 12px 12px 30px 0px rgba(182, 186, 204, 0.2) !important;
  position: relative;
}

.testimonial-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 5%;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

.blinking {
  animation: blink 1s infinite;
}

.testimonial-content {
  max-width: 730px;
  min-height: 350px;
}

.testimonial-text {
  font-size: 16px;
  line-height: 25px;
  color: #535763;
}

.lyyke-info {
  padding-top: 135px;
}

.josh-info {
  padding-top: 150px;
}

.navjeet-info {
  padding-top: 90px;
}
.testimonial-author {
  font-size: 0.9rem;
  color: #555;
}

.testimonial-logo {
  height: 40px;
}

.copyright-contact-desktop {
  font-size: 0.7rem;
  color: #828697;
}

.footer-kontakt-desktop {
  padding-left: 0px !important;
}

.tekst-ispod-desktop {
  display: block;
  font-size: 12px;
  margin-top: 10px;
}

.tekst-ispod-mob {
  display: none;
}

.rumor-title {
  font-size: 4rem;
  font-weight: 700;
  padding: 40px;
  color: #000;
}

.decor-star {
  position: absolute;
  top: -2px;
  left: -2px;
  display: flex;
  gap: 10px;
  z-index: 2;
}

.decor-quote {
  position: absolute;
  top: 0px;
  right: 90px;
  display: flex;
  gap: 10px;
  z-index: 2;
  width: 146px;
  height: 104px;
}

/* Style for the navigation icons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 24px; /* Adjust icon size if needed */
  height: 24px;
  background-size: 100% 100%;
  background-image: url("images/Arrow.svg");
}

.carousel-control-next-icon {
  background-image: url("images/Arrow.svg") 0 0 repeat;
  transform: rotate(180deg);
}

.carousel-control-prev-icon {
  background-image: url("images/Arrow.svg") 0 0 repeat;
}

/* Hover effect for the navigation buttons */
.carousel-control-prev:hover,
.carousel-control-next:hover {
  background-color: #ffd03c; /* Hover color */
}

.footer-section {
  position: relative;
  padding-left: 80px;
}

ul li::marker {
  color: #ffd03c; /* Postavlja boju kružića na žutu */
}

.footer-title {
  color: #fff;
  font-size: 83px;
  font-style: normal;
  font-weight: 700;
  line-height: 108.5%; /* 90.055px */
  padding-bottom: 50px;
}

.highlight {
  color: #fff;
  cursor: pointer;
  position: relative;
  display: inline-block;
}

.highlight .star {
  font-size: 1.2rem;
  position: absolute;
  top: -25px;
  right: -25px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.highlight:hover .star {
  opacity: 1;
  color: #ffd03c;
}

.highlight::after {
  content: "";
  position: absolute;
  bottom: -5px;
  right: 0;
  width: 100%;
  height: 3px;
  background-color: #ffd03c;
  transition: all 0.3s ease;
}

.highlight:hover::after {
  width: 0;
}

.highlight:hover {
  color: #ffd03c;
}

.footer-text {
  font-size: 22px;
  font-style: normal;
  font-weight: 300;
  line-height: 33.5px; /* 139.583% */
}

.footer-bottom {
  padding-top: 60px;
}

.email {
  font-size: 1.2rem;
}

.footer-logo img {
  max-width: 100px;
}

.social-links {
  font-size: 0.7rem;
}

.social-links a {
  font-size: 0.7rem;
  text-decoration: none;
}

.social-links a:hover {
  color: #ffd03c !important;
}

.copyright {
  font-size: 0.7rem;
  color: #828697;
  margin-bottom: -10px !important;
}

.footer-logo .social-links a:hover {
  color: #ffd03c;
}

.social-links-mob {
  display: none;
}

.scrolling-container-brand {
  display: none;
}

/* contact strana */

.custom-navbar-contact {
  background-color: black !important;
  z-index: 1000;
  border-radius: 50px;
  margin-top: 20px;
  width: 1296px;
  padding: 10px 0px 5px 20px;
  right: unset;
  left: unset;
}

.hero-contact {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.i-need {
  max-width: 1296px;
  margin-top: 184px;
}

.i-need h2 {
  font-size: 3.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}

.tekst-ispod-titla {
  font-size: 26px;
  font-style: normal;
  font-weight: 500;
  line-height: 121%;
  margin-bottom: 66px;
}

.serviceButton,
.projectButton {
  text-align: center;
  /* Body/B1 Regular */
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 150% */
  border-radius: 20px;
  border: 1px solid #828697;
  padding: 20px;
  color: black;
  background: white;
}

.accordion-button:focus {
  border-color: #000;
}

.btn-secondary {
  padding: 15px;
  margin-bottom: 10px;
  background-color: #6c757d;
  border-radius: 20px;
}
.serviceButton.selected,
.projectButton.selected {
  border: 1px solid #fff;
  background-color: #ffd03c;
  color: black;
}
.accordion {
  --bs-accordion-btn-icon-transform: none;
  --bs-accordion-bg: transparent;
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='42' height='2' viewBox='0 0 42 2'%3e%3crect width='42' height='2' fill='black'/%3e%3c/svg%3e") !important;
}

.accordion-button:not(.collapsed) {
  background-color: #ecf2fc !important;
  color: #000;
}


.projectButton {
  padding: 15px 80px;
  margin-right: 10px;
  color: black;
}

.projectButton:hover, .serviceButton:hover {
  background: #ffd03c;
  border: 1px solid #ffd03c;
}

#kontakt-forma {
  padding-left: 65px;
}

.form-label {
  color: #828697;

  /* Headline/H2 Bold */
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}

.tell-us-more {
  color: #000;
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}

.a-picture {
  color: #000;
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

.attachment {
  margin-right: 5px;
}

.upload {
  width: 50%;
}

.or-company {
  color: #828697;
  font-size: 34px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  padding-left: 10px;
}

.optional {
  color: #000;
  font-size: 34px;
  font-style: normal;
  font-weight: 100;
  line-height: 100%;
  padding-left: 10px;
}



.star-small {
  color: black;
  font-weight: 300;
}

/* Stil za grupu polja */
.input-group {
  display: inline-flex;
  gap: 20px; /* Razmak između input polja */
  align-items: center; /* Poravnaj polja vertikalno */
  overflow: hidden;
  width: 49%;
}



/* Stil za input polja (isti za oba) */
.form-control-custom,
.form-control-custom-email {
  flex: 1; /* Polja zauzimaju jednak prostor */
  padding: 0.375rem 0.75rem;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border-bottom: 1px solid #828697;
  border-top: none;
  border-left: none;
  border-right: none;
  appearance: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.share-a-link {
  color: #828697;
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}

/* stil za razmak između label i input */
.mb-4 label {
  display: block;
  margin-bottom: 0.5rem;
}

.form-control-text {
  display: block;
  width: 100%;
  padding: 20px !important;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #000;
  background-color: #ecf2fc;
  background-clip: padding-box;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 20px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.project-budget {
  margin: 80px 0px 40px 0px;
  color: #000;
}

.upload-size {
  padding-left: 10px;
}

.slanje {
  background: #ffd03c;
  padding: 25px 100px;
  text-align: center;
  margin-top: 60px;
  border-radius: 50px;
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.68px;
}

.slanje:hover {
  background: #ffd03c;
  padding: 25px 100px;
  text-align: center;
  margin-top: 60px;
  border-radius: 50px;
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.68px;
  border: 1px solid #000;
}

.faq {
  padding: 80px 0px;
  background-color: #ecf2fc;
}

.container.kontakt {
  padding-bottom: 80px;
}

.faq-title {
  font-size: 66px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  border-bottom: 1px solid #000;
  padding-bottom: 30px;
}

.accordion-button {
  color: #000;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px; /* 142.857% */
  background-color: #ecf2fc;
  border-bottom: 1px solid #000;
  padding-left: 0px;
  padding-bottom: 30px;
  padding-top: 10px;
}

.wwa-accordion-button {
  background-color: #000 !important;
  color: white !important;
  font-size: 58px;
  font-weight: 500;
}

#fileContainer {
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  border-radius: 20px;
  padding: 0px 20px;
  margin-bottom: 10px;
  color: #fff;
  background: #b5bace;
}

/* Raspored na mobilnom */
@media (max-width: 768px) {

.image-container:hover img {
  opacity: 1;
}

  .iskljuci-video-na-mob {
    visibility: hidden;
    pointer-events: none;
  }

  .highlight {
    color: #fff;
    cursor: pointer;
    position: relative;
    display: inline-block;
  }
  
  .highlight .star {
   display: none;
  }
  
  .highlight:hover .star {
    display: none;
  }
  
  .highlight::after {
    content: "";
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 100%;
    height: 3px;
    background-color: #ffd03c;
  }
  
  .highlight:hover::after {
    width: 0;
  }
  
  .highlight:hover {
    color: #ffd03c;
  }
  
  .color-card {
    padding: 0px;
  }

  .input-group-wrapper {
    display: block;
    gap: 20px;
  }

  .input-group {
   width: 100%;
    margin-bottom: 30px;
  }
  .copyright-mob {
  font-size: 0.7rem;
  color: #828697;
  padding-bottom: 20px;
  }

  .btnn {
    font-size: 20px;
  }

  .sakrij {
    display: none;
  }

  .hero-content-alteryx {
    margin-left: 5px;
    padding-top: 75px;
  }

  .padding-minacord-2 {
    padding: 0 12px;
  }

  .hero-alteryx {
    height: 400px;
  }

  .wwa-hero {
    display: block;
    height: 667px !important;
  }

  .wwa-naslov-header {
    color: #828697;
    font-size: 14px;
  }

  .wwa-velikitekst-header{
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; /* 150% */
  }

  .wwa-podnaslov-header {
    font-size: 14px;
  }

.wwa-podnaslov-header {
  font-size: 14px;
}

  .wwa-naslov-header {
    font-size: 14px;
  }
  .wwa-hero-content {
    margin-top: 70px;
    margin-bottom: 40px;
  }
  .slider-text-alteryx {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    text-align: left;
    width: 92%;
  }

  .final-title-box {
    width: 100%;
  }

.team-text {
  font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: 30px;
}

.team-text-bold {
  font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 121%;
}

.wwa-what-we-do-section {
	margin-left: 10px;
	margin-right: 10px;
  padding: 26px !important;
}

.padding20top {
  padding-top: 20px;
}
.margin40top {
  margin-top: 40px;
}
  .text-above-grab-alteryx {
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: 118%;
    padding-top: 160px;
  }

  .wwa-scrolling-container {
    overflow-x: auto; /* Omogućava horizontalno skrolovanje */
    white-space: nowrap; /* Sprečava prelamanje */
    -webkit-overflow-scrolling: touch; /* Poboljšava iskustvo na mobilnim uređajima */
  }
  
  .wwa-scrolling-item-desktop {
    display: inline-block; /* Sprečava prelamanje na novu liniju */
    min-width: 100%; /* Prilagođava širinu slike */
  }
  
  .wwa-zvezda-gold img {
    width: 34px;
    height: 34px;
  }

  .wws-title {
    color: white;
    padding-bottom: 36px;
    font-size: 39.677px;
    font-style: normal;
    font-weight: 700;
    line-height: 56.681px;
  }

.broj {
  font-size: 32px;
font-style: normal;
margin-right: 10px;
}

.margin60-top {
  margin-top: 60px;
}
  .wwa-what-we-do-section-title {
    margin-top: 40px;
    font-size: 34px;
font-style: normal;
font-weight: 700;
line-height: 100%;
  }

  .divider-alteryx {
    padding: 0px 0px;
  }

  .videoplayer-alteryx-header {
    margin-top: -75px;
    --plyr-video-background: #ccc;
  }

  .padding-100 {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .zvezda-gold {
    margin: -20px 0 0 0px;
    position: absolute;
  }

  .zvezda-gold img {
    width: 24px;
    height: 24px;
  }

  .quote-gold {
    position: absolute;
    top: -44px;
    right: -41px;
  }

  .mob-margine-top-20 {
    margin-top: 14px;
  }

  .ul-alteryx {
    font-size: 16px;
  }

  .image-container-alteryx {
    border-radius: 10px;
  }

  .project-breakdown {
    padding: 3px 10px;
    font-size: x-small;
    top: 10px;
    left: 10px;
  }

  .plyr {
    border-radius: 10px;
  }

  .colorcard-box {
    padding: 30px 20px !important;
  }

  .color-box span {
    font-size: 12px;
  }
  .podnaslov h4 {
    font-size: 20px;
  }

  .podnaslov {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
  }

  .section-title-final-design {
    font-size: 32px;
  }

  .hero-alteryx {
    background-image: url("images/HeaderAlteryx-mob.webp");
    background-repeat: no-repeat;
    height: 400px;
  }

  .fun-fact-text {
    font-size: 14px;
    line-height: 25px;
  }

  .wwa-ispod-hedera {
    margin-top: -44px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .team-card h5 {
    margin-top: 20px;
    font-size: 28px;
  }

  .team-titula {
    font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: 36.05px;
  }

  .team-card-title {
    font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 100%;
  }

  .text-ispod-hedera {
    
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
  }
  .client-voice-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("images/client_voice_bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 360px;
    color: #fff;
    border-radius: 30px;
    margin: 64px 10px 64px 10px;
  }

  .quote-gold img {
    position: absolute;
    top: -31px;
    right: 72px;
    width: 70px;
    height: 70px;
  }

  .navbar {
    padding: 0 12px;
  }

  .where-we-shine {
    padding-top: 46px; 
  }

  .next-project-item {
    margin-top: 20px;
  }

  .logo-alteryx-text {
    padding: 35px;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
  }

  .logo-minacord-text {
    padding: 30px 30px 0px 30px;

    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
  }

  .logo-alteryx-text-credits {
    padding: 0 15px;
    text-align: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
  }

  .logo-minacord-text-credits {
    padding: 30px 15px 0px 15px;
    text-align: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
  }

  .width-logo-alteryx {
    width: 85%;
  }

  .logo-alteryx img {
    width: 77px;
  }

  .next-project {
    border-radius: 0 0 24px 24px;
    padding: 30px 10px 1px 10px !important;
    margin-top: 64px;
  }

  .next-project-minacord {
    margin-top: 0px;
  }

  .fixed-height {
    height: 221px; /* Postavi fiksnu visinu */
    object-fit: cover; /* Osigurava proporcionalno skaliranje */
  }

  .row > .col-auto {
    margin-right: 0px; /* Razmak između kolona */
    --bs-gutter-x: 0rem;
  }

  .row > .col-auto:last-child {
    margin-right: 0;

    --bs-gutter-x: 1.5rem;
    width: 100%;
  }

  .mob-margine-top-20-minacord {
    margin-top: 6px;
  }

  .providno {
    background: #000;
  }

  .providno-alteryx {
    background: #000;
  }

  #fileContainer {
    margin-bottom: 0px;
  }

  #addAttachmentButton {
    min-height: 72px;
  }

  #fileContainer {
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: initial;
    color: black;
  }

  .tekst-ispod-desktop {
    display: none;
    font-size: 12px;
  }

  .tekst-ispod-mob {
    display: block;
    font-size: 12px;
  }

  .upload {
    width: 100%;
  }

  .i-need {
    margin-top: 60px;
    padding-left: 10px;
  }

  .zaobljeni-uglovi {
    border-radius: 14px;
  }

  .nav-mobi {
    background-color: black !important;
    z-index: 1000;
    border-radius: 30px;
    margin-top: 20px;
    width: 100%;
    padding: 3px 0px;
    right: 0;
    left: unset;
    height: 44px;
  }

  .desk-margin-top-0 {
    margin-top: 14px !important;
  }

  .main-section {
    padding-top: 45px;
  }

  #postedFile {
    border: none;
  }

.colorcard-box {
	max-width: 95%;
}

  .tekst-ispod-titla {
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 146%;
    margin-bottom: 45px;
  }

  .i-need h2 {
    font-size: 32px;
  }
  .serviceButton,
  .projectButton {
    text-align: center;
    font-size: 14px;
    font-style: normal;
    line-height: initial;
    font-weight: 400;
    margin-bottom: 0px;
    border-radius: 20px;
    border: 1px solid #000;
    padding: 10px 15px;
  }

   

  .kontakt-forma {
    margin: 0px !important;
    padding-top: 0px !important;
  }

  .no-padding-top-bottom {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }

  .form-label {
    font-size: 22px;
  }

  .or-company {
    font-size: 22px;
  }

  .optional {
    font-size: 22px;
  }

  .section-decorative-line-alteryx img {
    max-width: 190px;
    height: auto;
  }

  .tell-us-more,
  .optional {
    font-size: 22px !important;
  }

  .project-budget {
    margin: 60px 0px 40px 0px;
    color: #000;
  }

  .projectButton {
    margin-right: 0px;
  }

  .optional {
    padding-left: 0px;
  }

  .a-picture {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .tekst-ispod {
    position: absolute;
    bottom: 85px;
    font-size: 12px;
  }

  .upload-size {
    padding-left: 10px;
  }

  .the-impact {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
  }

  .btn-secondary {
    margin-bottom: 0px;
    width: 50%;
  }

  .share-a-link {
    margin-top: 30px;
    font-size: 22px;
    padding-left: 2px;
  }

  .slanje {
    padding: 25px 80px !important;
    font-size: 20px !important;
  }

  .lazy-video {
    width: 100% !important;
  }

  .hero-minacord {
    max-height: 495px;
  }

  .scrolling-container-brand {
    display: flex;
    width: 200%;
    position: absolute;
    bottom: 10px;
    height: 117px;
    will-change: transform;
  }

  .container.kontakt {
    padding-bottom: 30px;
  }

  .faq {
    padding: 30px 0px;
  }

  .faq-title {
    font-size: 36px;
  }

  .accordion-button {
    font-size: 20px;
  }

  .testimonial-content {
    max-width: 100%;
    min-height: 350px;
    padding: 5px;
  }

  .faq {
    padding: 30px 0px 50px 0px;
    margin-bottom: 50px;
  }

  .scrolling-container-brand-desktop {
    display: none;
  }

  .scrolling-item-desktop {
    display: none;
  }

  .nav-link {
    margin-right: 0px;
  }

  input::placeholder {
    color: #828697;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
  }

  .scrolling-container-brand {
    animation: scrollContinuous 50s linear infinite;
  }

  .footer-logo {
    display: none;
  }

  .a3 {
    height: 200px;
  }

  .video-icons img,
  .video-icons video {
    border-radius: 10px;
  }

  .image-container-alteryx img,
  .image-container-alteryx video {
    border-radius: 10px;
  }

  .top-margin-6 {
    margin-top: 24px;
  }

  .kaz-block {
    display: block;
  }

  .desktop-right-30 {
    margin-right: 0px;
  }

  .we-are {
    display: block ruby;
    font-size: 20px;
    padding-top: 10px;
  }

  .social-links {
    display: none;
  }

  .social-links-mob {
    display: block;
  }

  .copyright {
    text-align: left !important;
    position: absolute;
    bottom: 20px;
  }

  .footer-social-links {
    padding: 5px 0;
    font-size: 14px;
  }

  .footer-bottom {
    padding-top: 0px;
  }

  .section-decorative-line {
    display: none;
  }

  .footer-section {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 100px !important;
    margin-top: -50px;
    z-index: 1;
    overflow: visible;
  }

  .footer-title {
    color: #fff;
    font-size: 34px;
    padding-bottom: 20px;
    line-height: 142.5%;
  }

  .email {
    font-size: 20px;
  }

  .footer-text {
    font-size: 14px;
    line-height: 23px;
  }

  .read-more {
    color: #007bff;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    background: linear-gradient(
      to right,
      #1875ff 10%,
      #1875ff 20%,
      #ff0263 70%,
      #ff0263 90%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
  }

  .footer-kontakt {
    padding: 60px 0 10px 0 !important;
    margin-top: -50px;
  }

  .copyright-contact {
    font-size: 0.7rem;
    color: #828697;
    display: block;
  }

  .copyright-contact-desktop {
    display: none;
  }

  .logo-top {
    width: 61px;
    height: 30px;
  }

  .star-mobile img {
    position: absolute;
    width: 23px;
    height: 22px;
    margin-top: 4px;
    margin-left: 5px;
  }

  .hero {
    height: 400px;
  }

  .hero-content {
    padding-bottom: 0px;
    padding-top: 0px;
   
    margin-top: -60px;
    
  }

  .slider-container {
    height: 89px;
  }

  .play-button-container {
    width: 150px;
  }

  .wwa-play-button-container {
    width: 331px;
  }

  #lottie-razzle-centar {
    /* bilo height: 100px; */
    height: 140px;
  }

  .slider-text {
    font-size: 27.43px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
  } /* Velicina fonta za mobilne uredaje */

  .hero-content h1 {
    font-size: 2.5rem;
  }

  .text-above-grab {
    font-size: 1.2rem;
  }

  .project-content {
    padding: 10px 15px;
  }

  .text-above-grab {
    font-size: 12.914px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%; /* 12.914px */
    letter-spacing: 1.808px;
    text-transform: uppercase;
    margin-bottom: -30px;
  }

.visina-za-mob {
  height: 160px !important;
}

  .play-button-container {
    margin: -30px auto;
  }

  .logo-top {
    width: 36px;
  }

  .scrolling-container-brand {
    width: 900%;
    animation: scrollContinuous 80s linear infinite;
    height: 54px;
  }

  .star-mobile-what-we-do {
    top: 39px;
    right: 30px;
    position: absolute;
    margin-top: 6px;
  }

  .find-out-more {
    font-size: 1.5rem;
    padding: 10px 20px;
  }

  .strelica {
    font-size: 1.5rem;
  }

  .what-we-do-divider {
    display: none;
  }

  .our-works {
    padding-left: 10px;
  }

  .section-title {
    text-align: left !important;
    padding: 5px 0px 15px 0px;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
  }

  .section-title-alteryx-padding {
    padding-bottom: 0px;
  }

  .mobile {
    display: block !important;
  }

  .desktop {
    display: none !important;
  }

  .ispod-lottie {
    margin-top: 0px;
    margin-bottom: 20px;
    padding: 0px 70px;
  }

  .section-title-alteryx {
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
  }

  .next-project-center {
    text-align: center !important;
  }

  .image-container .category-icon {
    height: 15px;
  }

  .image-container .category-icon {
    top: 7px;
    left: 6px;

    opacity: 0.8;
  }

  .hover-video {
    border-radius: 10px;
  }

  .logo {
    padding: 0px 20px; /* Podešavanje paddinga kada nije skrolovano */
  }

  .project-item .image-container {
    border-radius: 10px !important;
  }

  .project-item img {
    border-radius: 10px !important;
  }
  .project-title {
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
  }

  .project-description {
    padding-top: 1px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    padding-right: 17px;
    padding-bottom: 15px;
  }

  .hide-on-mobile {
    display: none;
  }

  .height-392-desktop {
    height: 0px;
  }

  .padding-nula {
    padding: 0 !important;
  }

  .project-tags {
    padding: 8px 0 10px 0;
    color: #000 !important;
    text-align: left;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14.427px;
  }

  .slider-container {
    margin-top: 30px;
  }

  .logo-carousel {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 logotipa po redu */
    gap: 10px;
  }

  .logo-carousel img {
    max-height: 50px;
    width: auto;
    padding: 0 10px;
  }

  .lyyke-info {
    display: none;
  }

  .josh-info {
    display: none;
  }
  .navjeet-info {
    display: none;
  }

  .lyyke-info-mob {
    max-width: 100%;

    bottom: 135px;
  }

  .josh-info-mob {
    max-width: 100%;

    bottom: 135px;
  }

  .navjeet-info-mob {
    max-width: 100%;

    bottom: 135px;
  }
.accord {
  --bs-gutter-x: 0.5rem;
}
  .carousel-controls-container {
    position: absolute;
    bottom: 0px;
    right: 0px !important;
    display: flex;
    gap: normal;
    z-index: 2;
    padding: 0 10px;
    width: 100%;
  }

  .carousel-item {
    padding: 0px !important;
  }

  #carouselExample .carousel-indicators {
    position: absolute;
    bottom: 40px;
    left: 35%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  #carouselExample .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ffe8a0; /* Boja kru�ica, prilagodite po potrebi */
  }

  #carouselExample .carousel-indicators .active {
    background-color: #ffd03c; /* Boja aktivnog kru�ica, prilagodite po potrebi */
  }

  .decor-star {
    display: none !important;
  }

  .decor-quote {
    display: none;
  }

  .decor-quote-mob {
    position: absolute;
    right: 20px;
    width: 80px;
    padding-top: 20px;
  }

  .rumor-title {
    font-size: 32px !important;
    font-weight: 700;
    padding: 20px 0px;
    text-align: left !important;
  }

  .projects-section {
    padding: 20px 0px 0px 0px !important;
  }

  .project-item {
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
  }

  .custom-btn {
    font-size: 15px;
  }

  .section-description {
    padding: 30px 10px 0 !important;
    text-align: left;
  }

  .what-we-do-section {
    border-radius: 30px;
  }

  .column-title {
    font-size: 32px;
  }

  .list-unstyled {
    padding-left: 0;
    list-style: none;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    padding-bottom: 20px;
  }

  .what-we-do-section {
    padding: 30px 0px 10px 0 !important;
  }

  #testimonial-slider {
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    padding-bottom: 25px !important;
    z-index: 111;
    position: relative;
  }
  .section-description {
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
  }
  .testimonial-slide {
    padding: 15px 15px 27px 15px !important;
    overflow: hidden;
  }

  .testimonial-title h2 {
    font-size: 22px;
    font-weight: 500;
  }

  .logo {
    padding-left: 10px;
  }

  .section-title-what-we-do {
    font-size: 1.9rem !important;
    padding-top: 30px !important;
    padding-left: 10px;
    text-align: left;
  }
}

@media (min-width: 768px) {
  .lyyke-info-mob {
    display: none;
  }

  .josh-info-mob {
    display: none;
  }

  .navjeet-info-mob {
    display: none;
  }

  .decor-quote-mob {
    display: none;
  }

  .read-more {
    display: none;
  }

  .star-mobile {
    display: none;
  }

  .star-mobile-what-we-do {
    display: none;
  }
  .project-content {
    padding-left: 40px;
  }

  .carousel-item {
    padding: 50px !important;
  }
}

/* Responsive Design for Tablet (between 768px and 992px) */
@media (min-width: 768px) and (max-width: 991px) {
  /* Hero Section */
  .hero-content h1 {
    font-size: 3rem;
  }
  .text-above-grab {
    font-size: 1.5rem;
  }

  /* Navbar */
  .navbar-brand {
    font-size: 1.8rem;
  }
  .nav-link {
    font-size: 1.1rem;
    margin-right: 15px;
  }
  .lets-razzle-dazzle {
    padding: 8px 20px;
    font-size: 1.1rem;
  }

  /* Logo Carousel */
  .logo-carousel {
    gap: 15px;
    padding: 5px 0;
  }
  .logo-carousel img {
    max-height: 60px;
  }

  /* Slider Text */
  .slider-text {
    font-size: 50px;
  }

  /* Section Titles */
  .section-title {
    font-size: 3rem;
  }
  .rumor-title {
    font-size: 3.5rem;
    padding: 30px;
  }

  /* Projects Section */
  .projects-section {
    padding: 70px 0;
  }
  .project-title {
    font-size: 2rem;
  }
  .project-description {
    font-size: 1.1em;
  }
  .project-item {
    padding-bottom: 50px;
  }

  /* Buttons */
  .custom-btn {
    padding: 8px 16px;
    font-size: 1rem;
  }
  .find-out-more {
    font-size: 1.4rem;
    padding: 8px 16px;
  }

  /* Testimonial Section */
  .testimonial-slide {
    padding: 20px;
  }
  .testimonial-content {
    max-width: 500px;
  }
  .testimonial-text {
    font-size: 0.9rem;
  }

  /* What We Do Section */
  .section-title-what-we-do {
    font-size: 3rem;
  }
  .section-description {
    padding: 40px 20px;
  }
  .column-title {
    font-size: 1.15rem;
  }

  /* Carousel Controls */
  .carousel-controls-container {
    right: 73px;
    bottom: 40px;
  }
  .carousel-control-prev,
  .carousel-control-next {
    width: 60px;
    height: 60px;
  }

  .project-content {
    padding-top: 50px;
    padding-left: 0;
    text-align: center;
  }

  .footer-section {
    padding-left: 0px;
  }
}

.scroll-to-top {
  position: fixed;
  bottom: 20px; /* Razmak od donje ivice ekrana */
  right: 20px; /* Razmak od desne ivice ekrana */
  z-index: 1000;
  background-color: #000;

  border-radius: 0px; /* Za o�tre ivice */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.scroll-to-top:hover {
  transform: scale(1.1); /* Lagano povecanje na hover */
}

#success-modal {
  max-width: 400px;
  width: 90%;
}

#modal-overlay {
  cursor: pointer;
}

/* Custom styling for the input field */
.form-control-custom-email,
.form-control-custom {
  color: #828697;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  border: none;
  outline: none;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

/* Remove focus border and box shadow */
.form-control-custom-email:focus,
.form-control-custom:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

/* Hide placeholder on focus */
.form-control-custom-email::placeholder,
.form-control-custom::placeholder {
  color: #b5bace;
}

.form-control-custom-email:focus::placeholder,
.form-control-custom:focus::placeholder {
  color: transparent; /* Hide the placeholder on focus */
}

.accordion-body {
  border-bottom: 1px solid;
}

.accordion-button:not(.collapsed) {
  border-bottom: none;
  box-shadow: none;
}

.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

#removeFileButton {
  width: 30px;
  height: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  cursor: pointer;
  border: 1px solid #fff;
  color: #fff;
  background-color: transparent;
  font-weight: 100;
}
#removeFileButton:hover {
  background-color: #ffd03c;
  color: black;
}

@keyframes scrollContinuous {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%); /* Pomeraj za celu �irinu */
  }
}

.scrolling-item {
  flex-shrink: 0;
  width: auto; /* Sirina slika ostaje proporcionalna */
  height: 100%;
}

.scrolling-item img {
  border-radius: 0px !important;
}

/* Neprekidna animacija */
@keyframes scrollContinuous {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.gx-3 {
  --bs-gutter-x: 30px; /* Razmak između kolona za desktop */
}

@media (max-width: 768px) {
  .gx-3 {
    --bs-gutter-x: 14px; /* Razmak između kolona za mobilne uređaje */
  }
}