/* Page background – bordo */
body {
  font-family: Arial, sans-serif;
  background-color: #80011f;
  display: flex;
  justify-content: center;
  padding: 20px;
  margin: 0;
}

/* Card – bež, zaobljeni rubovi, sve se reže po cardu */
.card {
  width: 95%;
  max-width: 420px;
  background-color: #f3e3d6;
  border-radius: 18px;
  overflow: hidden;           /* ovdje reže header slike po radijusu */
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  color: #3a2624;
  position: relative;         /* da logo može biti pozicioniran unutar kartice */
}

/* HEADER – slideshow s 2 slike */
.header {
  position: relative;
  height: 160px;
}

/* Wrapper za slideshow */
.header-slideshow {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Sve slike u slideshowu */
.header-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: headerFade 8s infinite;
}

/* 2 slike s delayem – 8s ciklus, svaka ~4s */
.header-slideshow img:nth-child(1) {
  animation-delay: 0s;
}

.header-slideshow img:nth-child(2) {
  animation-delay: 4s;
}

/* Animacija fade-a */
@keyframes headerFade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  45%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

/* LOGO – lebdi preko donjeg dijela headera, a NIJE u headeru */
/* Zato ga više ne reže overflow headera */
.logo {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  border: 3px solid #f3e3d6;
  object-fit: cover;
  background-color: #ffffff;
  position: absolute;
  left: 50%;
  top: 120px;                 /* kontrolira koliko "ulazi" u content */
  transform: translateX(-50%);
  z-index: 1;
  box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}

/* Content */
.content {
  padding: 70px 22px 28px;    /* 70 da ima mjesta jer logo ulazi unutra */
  text-align: center;
}

h1 {
  margin: 0;
  font-size: 26px;
  color: #80011f;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.subtitle {
  margin: 6px 0 4px;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a05b63;
}

.description {
  font-size: 13px;
  color: #7b5a57;
  margin: 8px 0 18px;
}

/* Info sekcija */
.info-section {
  margin: 10px 0 5px;
}

/* Grupe (Kontakt / Zaprati nas) */
.info-group {
  margin-bottom: 16px;
}

.group-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #80011f;
  margin: 10px 0 8px;
  text-align: left;
}

/* Linija između grupa */
.info-group + .info-group {
  border-top: 1px solid rgba(128, 1, 31, 0.25);
  padding-top: 12px;
}

/* Stavke u listi */
.info-item {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-bottom: 10px;
  color: #3a2624;
}

/* Ikona u krugu – bordo tema */
.icon-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #80011f;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
  background-color: transparent;
  font-size: 16px;
  transition: all 0.3s ease;
  color: #80011f;
}

/* Tekst pored ikone */
.info-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  justify-content: center;
}

.normal-text {
  font-size: 14px;
  color: #3a2624;
}

/* Hover efekti */
.info-item:hover .icon-circle {
  background-color: #80011f;
  color: #f3e3d6;
  border-color: #80011f;
}

.info-item:hover .normal-text {
  color: #80011f;
}