@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* 🌐 Omotač za centriranje banera */
.imab-banner-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* 🟦 Sam baner */
.imab-banner {
  position: relative;
  width: 324px;
  height: 500px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  font-family: 'Open Sans', sans-serif;
  transition: all 0.3s ease-in-out;
}

/* 🖼️ Statična pozadina */
.imab-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/imab-banner-bg-1.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
}

/* ✨ Animirana slika preko pozadine */
.imab-banner::after {
  content: '';
  position: absolute;
  top:-20%;
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: 110%;
  background-image: url('../images/imab-banner-books.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 2;
  animation: imabBgFade 8s infinite;
}

/* Animacija fade in/out za drugu sliku - ostaje vidljiva duže */
@keyframes imabBgFade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 🟫 Tekst unutar banera */
.imab-text-slider {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  padding-top: 95%;
  text-align: center;
  z-index: 3; /* Tekst iznad pozadinskih slika */
}

.imab-text-slide {
  font-family: 'Open Sans', sans-serif;
  position: absolute;
  color: #ff0000;
  text-shadow: 1px 1px #290000;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 800;
  opacity: 0;
  animation: imabCrossfade 8s infinite;
  transition: opacity 1s ease-in-out;
  text-align: center;
  width: 100%;
  left: 0;
}

.imab-text-slide:nth-child(1) { animation-delay: 0s; }
.imab-text-slide:nth-child(2) { animation-delay: 4s; }

/* Animacija teksta - pojavljuje se nakon slike */
@keyframes imabCrossfade {
  0%   { opacity: 0; }
  45%  { opacity: 0; }
  50%  { opacity: 1; }
  95%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 🔗 Link oko banera */
.imab-banner-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* 🖱 Hover efekat */
.imab-banner-link:hover {
  cursor: pointer;
}

/* 🌐 RESPONSIVE STILOVI */
@media (max-width: 480px) {
  .imab-banner {
    width: 90vw;
    height: calc(90vw * 1.54);
  }

  .imab-text-slider {
    padding-top: 97%;
  }

  .imab-text-slide {
    font-size: 40px;
    padding: 0 15px;
  }
}

@media (max-width: 360px) {
  .imab-text-slide {
    font-size: 40px;
    line-height: 1.2;
  }
}