* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: 'Arial', sans-serif;

}

body {

  background-color: #0f172a; /* Tamna tema za cijeli body */

  color: white;

}

/* --- 1. NAVIGACIJA (Flexbox) --- */

.nav {

  display: flex;

  justify-content: space-between; /* Logo lijevo, linkovi desno */

  align-items: center;

  padding: 20px 8%;

  background-color: #0f172a;

}

.nav-logo {

  font-size: 24px;

  font-weight: bold;

  color: #22d3ee; /* Tirkizna boja sa slike */

}

.nav-links {

  display: flex;

  list-style: none;

  gap: 25px;

}

.nav-links a {

  text-decoration: none;

  color: #cbd5e1;

  font-weight: 500;

  transition: color 0.3s ease; /* ZAHTJEV: Tranzicija boje */

}

.nav-links a:hover {

  color: #22d3ee;

}

/* --- 2. HERO SEKCIJA --- */

.hero {

  display: flex;

  align-items: center;

  padding: 60px 8%;

  min-height: 500px;

  background-color: #0f172a;

}

.hero-sadrzaj {

  flex: 1;

}

.hero-sadrzaj h1 {

  font-size: 3.5rem;

  margin-bottom: 20px;

}

.hero-sadrzaj p {

  font-size: 1.1rem;

  color: #94a3b8;

  margin-bottom: 30px;

  max-width: 500px;

}

/* Hero gumb */

.gumb {

  display: inline-block;

  padding: 15px 30px;

  background-color: #22d3ee;

  color: #0f172a;

  text-decoration: none;

  font-weight: bold;

  border-radius: 8px;

  transition: all 0.3s ease; /* ZAHTJEV: Tranzicija */

}

.gumb:hover {

  background-color: #06b6d4;

  transform: scale(1.1); /* ZAHTJEV: Malo naraste */

  box-shadow: 0 0 15px rgba(34, 211, 238, 0.5);

}

.hero-slika {

  flex: 1;

  text-align: right;

}

.hero-slika img {

  max-width: 100%;

  border-radius: 12px;

}

/* --- 3. SEKCIJA USLUGA (Grid) --- */

.usluge {

  background-color: #f8fafc; 

  color: #0f172a;

  padding: 80px 8%;

  text-align: center;

}

.usluge h2 {

  font-size: 2.5rem;

  margin-bottom: 50px;

}

.usluge-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr); 

  gap: 30px;

  perspective: 1000px; 

}


.kartica {

  background: white;

  border-radius: 15px;

  overflow: hidden;

  padding-bottom: 25px;

  box-shadow: 0 4px 6px rgba(0,0,0,0.05);

  transition: all 0.4s ease; 

}

.kartica img {

  width: 100%;

  height: auto;

  margin-bottom: 20px;

}

.kartica h3 {

  margin: 10px 20px;

  font-size: 1.4rem;

}

.kartica p {

  margin: 0 20px;

  color: #64748b;

}


.kartica:hover {

  transform: translateY(-10px) scale(1.05); 
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

}



.kartica-3d:hover {

  transform: rotateY(15deg) translateY(-10px); 

}



.footer {

  background-color: #0f172a;

  padding: 30px;

  text-align: center;

  color: #94a3b8;

}



@media (max-width: 768px) {

  .nav {

    flex-direction: column; 

    gap: 15px;

  }

  .hero {

    flex-direction: column;

    text-align: center;

  }

  .hero-slika {

    margin-top: 40px;

    text-align: center;

  }

  .usluge-grid {

    grid-template-columns: 1fr; 

  }

}