* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 html {
   scroll-behavior: smooth;
   scroll-padding-top: 100px;
 }

 body {
   font-family: 'Poppins', sans-serif;
   background-color: #fff;
   animation: fadeIn 1.2s ease-in-out;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(30px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .hero-section {
   background-color: #0072ce;
   color: white;
   height: 1007px;
   position: relative;
   overflow: hidden;
   padding: 2rem 1rem 4rem;
 }

 .hero-bg-svg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   pointer-events: none;
 }

 .hero-container {
   max-width: 1400px;
   margin: 0 auto;
   position: relative;
   z-index: 2;
 }

 .navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   padding-bottom: 2rem;
   position: relative;
 }

 .logo img {
   height: 80px;
 }

 .nav-links {
   list-style: none;
   display: flex;
   gap: 2rem;
 }

 .nav-links a {
   color: white;
   text-decoration: none;
   font-size: 1rem;
   font-weight: 700;
   transition: opacity 0.3s;
 }

 .nav-links a:hover {
   opacity: 0.85;
 }

 .burger {
   display: none;
   flex-direction: column;
   justify-content: space-between;
   width: 30px;
   height: 21px;
   background: none;
   border: none;
   cursor: pointer;
   z-index: 4;
 }

 .burger span {
   display: block;
   width: 100%;
   height: 3px;
   background: white;
   border-radius: 2px;
   transition: all 0.3s ease;
 }

 .burger.open span:nth-child(1) {
   transform: rotate(45deg) translateY(8px);
 }

 .burger.open span:nth-child(2) {
   opacity: 0;
 }

 .burger.open span:nth-child(3) {
   transform: rotate(-45deg) translateY(-8px);
 }

 .hero-content h1 {
   text-align: center;
   font-size: 79px;
   margin-bottom: 3rem;
   font-weight: 700;
 }

 .phones-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
 }

 .carousel {
   display: none;
 }

 .phones {
   display: flex;
   gap: 2rem;
   justify-content: center;
   flex-wrap: wrap;
 }

 .phone.small {
   width: 241px;
   height: 511px;
   object-fit: contain;
   will-change: transform;
 }

 .phone.large {
   width: 296px;
   height: 629px;
   object-fit: contain;
   will-change: transform;
 }

 .social-column {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
 }

 .vertical-line {
   width: 2px;
   height: 40px;
   background-color: rgba(255, 255, 255, 0.3);
 }

 .social-links {
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
 }

 .social-links img {
   width: 24px;
   height: 24px;
   filter: brightness(0) invert(1);
   transition: transform 0.3s;
 }

 .social-links img:hover {
   transform: scale(1.1);
 }

 @media (max-width: 768px) {
   .nav-links {
     display: none;
     flex-direction: column;
     background-color: #005fa3;
     position: absolute;
     top: 90px;
     right: 1rem;
     padding: 1rem;
     border-radius: 8px;
     z-index: 3;
     width: 180px;
   }

   .nav-links.active {
     display: flex;
   }

   .burger {
     display: flex;
   }

   .phones {
     display: none;
   }

   .carousel {
     display: block;
     width: 100%;
     text-align: center;
   }

   .carousel img {
     width: 240px;
     height: auto;
     max-height: 600px;
     object-fit: contain;
   }

   .social-column {
     display: none;
   }
 }

 .features {
   padding: 60px 20px;
   background: #fff;
 }

 .container {
   max-width: 1600px;
   margin: 0 auto;
 }

 .section-title {
   text-align: center;
   font-size: 2rem;
   font-weight: bold;
   margin-bottom: 40px;
 }

 .features-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 30px;
 }

 .feature-item {
   text-align: center;
   padding: 20px;
 }

 .feature-item img {
   max-width: 60px;
   margin-bottom: 15px;
 }

 .feature-item h3 {
   font-size: 1.2rem;
   font-weight: bold;
   margin-bottom: 10px;
 }

 .feature-item p {
   font-size: 1rem;
   color: #555;
   line-height: 1.5;
 }

 .predstavljanje-sekcija {
   width: 100%;
   margin: 0;
   padding: 60px 20px;
   background-color: #4ba3d6;
   overflow-x: hidden;
   box-sizing: border-box;
 }

 .kontejner {
   max-width: 1600px;
   margin: 0 auto;
   padding: 0 20px;
   box-sizing: border-box;
 }

.informativni-blok {
  position: absolute;
  bottom: 0;
  left: -90px;
  background-color: #1d6fa5;
  color: #fff;
  padding: 20px 90px;
  border-radius: 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  transition: left 0.3s ease;
}
 .uvod-sadrzaj {
   display: flex;
   align-items: center;
   gap: 40px;
   flex-wrap: wrap;
 }

 .uvod-tekst {
   flex: 1 1 500px;
   color: #fff;
 }

 .uvod-tekst h2 {
   font-size: 2rem;
   font-weight: bold;
   margin-bottom: 20px;
 }

 .uvod-tekst p {
   font-size: 1.2rem;
   line-height: 1.6;
   margin-bottom: 30px;
 }

 .dugme {
   display: inline-block;
   padding: 14px 28px;
   background-color: #1d6fa5;
   color: #fff;
   border-radius: 10px;
   text-decoration: none;
   font-weight: bold;
   transition: background-color 0.3s ease, transform 0.2s ease;
   will-change: transform;
 }

 .dugme:hover {
   background-color: #155d82;
   transform: translateY(-2px);
 }

 .dugme:active {
   transform: translateY(0);
 }

 .uvod-slika-okvir {
   flex: 1 1 500px;
   position: relative;
 }

 .uvod-slika-okvir img {
   width: 100%;
   height: auto;
   border-radius: 10px;
   display: block;
 }

 .informativni-blok p {
   font-size: 1.1rem;
   margin: 0;
 }

 .informativni-blok span {
   font-size: 2rem;
   font-weight: bold;
 }

 @media (max-width: 768px) {
   .uvod-sadrzaj {
     flex-direction: column;
     text-align: center;
   }

   .informativni-blok {
     position: static;
     margin: 20px auto 0;
     padding: 10px 20px;
   }
 }
.sekcija-racuni {
    padding: 4rem 1rem;
}

.okvir {
    max-width: 1600px;
    margin: 0 auto;
    text-align: center;
}

.naslov {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: #222;
}

.kartice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

.kartica-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.kartica {
    backdrop-filter: blur(12px);
    border-radius: 1.5rem;
    padding: 2rem 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
    cursor: pointer;
}

.kartica-link:hover .kartica {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 114, 206, 0.15);
}

.slika-okvir {
    overflow: hidden;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}

.slika {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
    will-change: transform;
}

.kartica-link:hover .slika {
    transform: scale(1.05);
}

.opis {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.3px;
}

.futer {
    background: #252525;
    padding-top: 2rem;
}

.futer-okvir {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    padding: 0 1rem;
}

.futer-logo-blok {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.futer-logo {
    height: 55px;
}

.futer-tagline {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.futer-sekcija {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.futer-naslov {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0072ce;
}

.futer-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.futer-lista a {
    color: #ffffff;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.futer-lista a:hover {
    color: #dddddd;
}

.futer-mreze {
    display: flex;
    gap: 1rem;
}

.mreza-ikonica {
    width: 28px;
    height: 28px;
    transition: transform 0.2s ease, opacity 0.3s ease;
}

.mreza-ikonica:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.futer-dno {
    margin-top: 2rem;
    padding: 1rem;
    background: #252525;
    text-align: center;
    font-size: 0.85rem;
    color: #ffffff;
}