/* 3D carousel graphic design - početak */

.graphic-design-carousel-wrapper {
  position: relative; /* Isolate the carousel */
  overflow: hidden;   /* Prevent overflow */
  padding-top: 2rem;
  padding-bottom: 1.25rem;
  color: #000;            /* High-tech: black text */

  /* --- NEW: prevent initial flash and fade in smoothly --- */
  opacity: 0;
  animation: carouselFadeIn 970ms ease-out 720ms forwards;
  will-change: opacity;
}

/* NEW: fade-in keyframes for the whole carousel wrapper */
@keyframes carouselFadeIn {
  from { opacity: 0;}
  to   { opacity: 1;}
}

/* Respect reduced motion preferences for the fade-in too */
@media (prefers-reduced-motion: reduce) {
  .graphic-design-carousel-wrapper {
    animation: none;
    opacity: 1;
  }
}

#drag-container, #spin-container {
  position: relative;
  display: flex;
  margin: auto;
  transform-style: preserve-3d;
  transform: rotateX(-10deg);
}

#drag-container {
  padding-top: 1.25rem;
  padding-bottom: 4.375rem;
}

/* imgtext */
#spin-container .imgtext {
  position: absolute;
  width: 7.5rem; 
  height: 10.625rem;
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; 
  align-items: center; 
  font-size: 1rem; 
  text-align: center; 
  color: #000;                 /* was white */
  background: #fff;            /* was black */
  border-radius: 0.625rem; 
  box-shadow: 0 0 0.8rem rgba(0,0,0,1); /* neutral shadow (was white glow) */
  transform-style: preserve-3d;
  transition: transform 1s, box-shadow 0.3s ease-in-out;
  padding: 0.3125rem;
  background-image: url(/media/graphic-design/visual-identity.webp);
  background-position: center 1.25rem;
  background-size: 5rem;
  background-repeat: no-repeat;
}

#spin-container .imgtext:hover {
  box-shadow: 0 0 0.9375rem rgba(0,0,0,0.35); /* subtle hover, no color */
}

/* imgtextmarketing */
#spin-container .imgtextmarketing {
  position: absolute;
  width: 7.5rem; 
  height: 10.625rem;
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; 
  align-items: center; 
  font-size: 1rem; 
  text-align: center; 
  color: #000;                 /* was white */
  background: #fff;            /* was #efaa2a */
  border-radius: 0.625rem; 
  box-shadow: 0 0 0.8rem rgba(0,0,0,1);
  transform-style: preserve-3d;
  transition: transform 1s, box-shadow 0.3s ease-in-out;
  padding: 0.3125rem;
  background-image: url(/media/graphic-design/marketing-2.webp);
  background-position: center 1.25rem;
  background-size: 6.25rem;
  background-repeat: no-repeat;
}

#spin-container .imgtextmarketing:hover {
  box-shadow: 0 0 0.9375rem rgba(0,0,0,0.35);
}

/* imgtextui */
#spin-container .imgtextui {
  position: absolute;
  width: 7.5rem; 
  height: 10.625rem;
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; 
  align-items: center; 
  font-size: 1rem; 
  text-align: center; 
  color: #000;                 /* keep black on white */
  background: #fff; 
  border-radius: 0.625rem; 
  box-shadow: 0 0 0.8rem rgba(0,0,0,1);
  transform-style: preserve-3d;
  transition: transform 1s, box-shadow 0.3s ease-in-out;
  padding: 0.3125rem;
  background-image: url(/media/graphic-design/UI.webp);
  background-position: center 1.25rem;
  background-size: 6.25rem;
  background-repeat: no-repeat;
}

#spin-container .imgtextui:hover {
  box-shadow: 0 0 0.9375rem rgba(0,0,0,0.35);
}

/* imgtextpublication */
#spin-container .imgtextpublication {
  position: absolute;
  width: 7.5rem; 
  height: 10.625rem;
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; 
  align-items: center; 
  font-size: 1rem; 
  text-align: center; 
  color: #000;                 /* was white */
  background: #fff;            /* was #00226B */
  border-radius: 0.625rem; 
  box-shadow: 0 0 0.8rem rgba(0,0,0,1);
  transform-style: preserve-3d;
  transition: transform 1s, box-shadow 0.3s ease-in-out;
  padding: 0.3125rem;
  background-image: url(/media/graphic-design/publication-white.webp);
  background-position: center 1.25rem;
  background-size: 5.625rem;
  background-repeat: no-repeat;
}

#spin-container .imgtextpublication:hover {
  box-shadow: 0 0 0.9375rem rgba(0,0,0,0.35);
}

/* imgtextpackaging */
#spin-container .imgtextpackaging {
  position: absolute;
  width: 7.5rem; 
  height: 10.625rem;
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; 
  align-items: center; 
  font-size: 1rem; 
  text-align: center; 
  color: #000;                 /* was black */
  background: #fff;            /* was #6EC1E4 */
  border-radius: 0.625rem; 
  box-shadow: 0 0 0.8rem rgba(0,0,0,1);
  transform-style: preserve-3d;
  transition: transform 1s, box-shadow 0.3s ease-in-out;
  padding: 0.3125rem;
  background-image: url(/media/graphic-design/packing.webp);
  background-position: center 1.25rem;
  background-size: 6.25rem;
  background-repeat: no-repeat;
}

#spin-container .imgtextpackaging:hover {
  box-shadow: 0 0 0.9375rem rgba(0,0,0,0.35);
}

/* imgtextuserexperience */
#spin-container .imgtextuserexperience {
  position: absolute;
  width: 7.5rem; 
  height: 10.625rem;
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; 
  align-items: center; 
  font-size: 1rem; 
  text-align: center; 
  color: #000;                 /* was black */
  background: #fff;            /* was #976ED7 */
  border-radius: 0.625rem; 
  box-shadow: 0 0 0.8rem rgba(0,0,0,1);
  transform-style: preserve-3d;
  transition: transform 1s, box-shadow 0.3s ease-in-out;
  padding: 0.3125rem;
  background-image: url(/media/graphic-design/UX.webp);
  background-position: center 1.25rem;
  background-size: 5rem;
  background-repeat: no-repeat;
}

#spin-container .imgtextuserexperience:hover {
  box-shadow: 0 0 0.9375rem rgba(0,0,0,0.35);
}

/* imgtextwhiteboard */
#spin-container .imgtextwhiteboard {
  position: absolute;
  width: 7.5rem; 
  height: 10.625rem;
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; 
  align-items: center; 
  font-size: 1rem; 
  text-align: center; 
  color: #000;                 /* was black */
  background: #fff;            /* was #03C03C */
  border-radius: 0.625rem; 
  box-shadow: 0 0 0.8rem rgba(0,0,0,1);
  transform-style: preserve-3d;
  transition: transform 1s, box-shadow 0.3s ease-in-out;
  padding: 0.3125rem;
  background-image: url(/media/graphic-design/whiteboard.webp);
  background-position: center 1.25rem;
  background-size: 6.25rem;
  background-repeat: no-repeat;
}

#spin-container .imgtextwhiteboard:hover {
  box-shadow: 0 0 0.9375rem rgba(0,0,0,0.35);
}

#ground {
  width: 56.25rem;
  height: 56.25rem;
  position: absolute;
  top: 80%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotateX(90deg);
          transform: translate(-50%, -50%) rotateX(90deg);

  /* gradient (add standard syntax too) */
  background: radial-gradient(farthest-side at center, rgba(0,0,0,0.7), transparent);
  background: -webkit-radial-gradient(center center, farthest-side, rgba(0,0,0,0.7), transparent);

  /* fade-in */
  opacity: 0;
  animation: groundFadeIn 1.5s ease-out 0.2s forwards; /* duration + delay */
  will-change: opacity;
}

@keyframes groundFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  #ground {
    animation: none;
    opacity: 1;
  }
}

@keyframes spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

@keyframes spinRevert {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-360deg); }
}

body.creative-layout .graphicdesignmessage {
  color: #Dea5a4 !important;
}

/* Tekst - početak */

.graphic-design-first-text {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  width: 100%; /* Full width */
  padding-top: 1.25rem;
  padding-bottom: 4.375rem;
}

/* Column 1 styles */
.left-column {
  display: flex;
  justify-content: flex-start; /* Align content to the left */
  align-items: center; /* Center vertically */
  padding: 0 1.25rem; /* Optional padding */
  color: #000;        /* was black already */
}

/* Column 2 styles */
.right-column {
  display: flex;
  justify-content: flex-end;   /* Align content to the right */
  align-items: center;         /* Center vertically */
  padding: 0 1.25rem;          /* Optional padding */
  color: #000;                 /* default High-tech: black */
}

/* Text shadow for the left and right columns */
.left-column p, .right-column p {
  text-shadow: 0.125rem 0.125rem 0.75rem rgba(0, 0, 0, 0.15); /* soft dark shadow on white */
}

/* Creative keeps its accent color on right column */
body.creative-layout .right-column {
  color: #Dea5a4;
}

/* High-tech explicit override (remove prior green) */
body.high-tech-layout .right-column {
  color: #000; /* was #08FF08 */
}

/* General paragraph styles */
.graphic-design-first-text p {
  margin: 0;
  font-size: 2rem;
  color: inherit;
}

@media (max-width: 991px) {
  .left-column p {
    font-size: 1.2rem;
  }
  .right-column {
    display: none;
  }
  .for-mobile-text p {
    font-size: 1.2rem;
    color: #000; /* High-tech default: black (was #Dea5a4 globally) */
  }
  /* Creative keeps the pink on mobile text */
  body.creative-layout .for-mobile-text p {
    color: #Dea5a4;
  }
  .for-mobile-text {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 1.25rem;
    padding-top: 1.25rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 992px) {
  .for-mobile-text { display: none; }
}

/* Tekst - kraj */

/* 3D carousel graphic design - kraj */



/* Tehnologije seamless animacija Graphic Design page - početak */
.showcase-graphic {
  width: 100%;
  margin: 0 auto;
  overflow: hidden; /* Hide overflowing content */
  position: relative; /* Contain absolute-positioned children */
  color: #000;
}

.slider-graphic {
  display: flex;
  animation: slide-graphic 55s linear infinite; /* Smooth infinite scroll */
}

.item-graphic {
  width: 12.5rem; /* Item width */
  height: 12.5rem; /* Item height */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0; /* Prevent shrinking */
  margin-right: 1.25rem; /* Space between items */
}

.item-graphic img,
.item-graphic dotlottie-player {
  max-width: 100%; /* Fit within the container */
  max-height: 100%; /* Maintain aspect ratio */
}

/* Keyframes for seamless scrolling */
@keyframes slide-graphic {
  0%   { transform: translateX(0); }            /* Start at the beginning */
  100% { transform: translateX(-600%); }        /* Move total width for seamless loop */
}

/* For tablets or smaller screens */
@media (max-width: 768px) {
  .slider-graphic { animation: slide-graphic 25s linear infinite; }
}

/* For mobile phones */
@media (max-width: 480px) {
  .slider-graphic { animation: slide-graphic 15s linear infinite; }
}
/* Tehnologije seamless animacija Graphic Design page - kraj */