:root {
    --green-color: rgb(216, 10, 16);      /* glavna crvena */
    --green-hover: rgb(185, 18, 19);      /* hover */
    --dark-blue-color: rgb(43, 43, 43);   /* tamno siva */
    --text-color: rgb(245, 245, 245);     /* svetao tekst */
    --white-color: rgb(255, 255, 255);
    --orange-color: rgb(249, 115, 22);    /* akcent */
    --card-color: rgb(30, 30, 30);        /* kartice */
    --background-color: rgb(17, 17, 17);  /* glavna pozadina */
    --black-color: rgb(0, 0, 0);
    --border-color: rgb(64, 64, 64);      /* ivice */
}

html {
  scroll-behavior: smooth;
}

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

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
}

section {
   width: 100%;
}

.container {
  max-width: 1200px; 
  padding: 0 clamp(20px, 6vw, 150px);
}

a {
    color: var(--text-color);
    text-decoration: none;
}

h1 {
    font-family: "Montserrat", sans-serif; 
    color: var(--white-color);
    font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 4rem);
    letter-spacing: 1.2px;
    line-height: 1.1;
    text-shadow: 0 3px 10px rgba(0,0,0,0.5);
}

h2 {
    font-family: "Montserrat", sans-serif;   
    color: var(--white-color);
    font-weight: 700;
    font-size: 2.25rem;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    letter-spacing: 1px;
    padding-bottom: 10px;
}

h3 {
    font-family: "Montserrat", sans-serif;
    color: var(--text-color);
     font-size: clamp(1.1rem, 1.5vw, 1.4rem);
   font-weight: 600;
   line-height: 1.3;
    letter-spacing: 0.5px;
}

h4 {
    font-family: "Montserrat", sans-serif;
    color: var(--green-hover);
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    font-weight: 600;
    line-height: 1.4;
}

p {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.6;
  opacity: 0.9;
  letter-spacing: 0.5px;
}



/* BUTTONS */
.secondary-cta-btn {
    padding: clamp(10px, 1vw, 14px) clamp(24px, 2vw, 36px);
    border: 1px solid white;
    border-radius: 12px;
    transition: 0.3s;
    display: flex;
    gap: 10px;
    position: relative;
    color: white;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}
.secondary-cta-btn img {
  width: 24px;
  height: 24px;
}
.secondary-cta-btn:hover {
    background-color: var(--green-color);
   
    border-color: var(--green-color);
}

.btn {
  background: var(--green-color);
  padding: clamp(12px, 1vw, 16px) clamp(24px, 3vw, 48px);
  border-radius: 12px;
  color: var(--white-color);
  border: none;
  font-weight: 600;
  font-size: clamp(1rem, 1vw, 1.1rem);
  transition: all 0.3s ease;
  
}

.btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 18px var(--green-hover, 0.2);
}

.secondary-btn {
    padding: clamp(14px, 1vw, 18px) clamp(34px, 5vw, 58px);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: none;
    border-radius: 12px;

    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none;

    color: var(--white-color);

    background: linear-gradient(
        135deg,
        var(--green-color) 0%,
        var(--green-hover) 100%
    );

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

    cursor: pointer;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;

    position: relative;
    overflow: hidden;
}

.secondary-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );

    transition: 0.7s;
}

.secondary-btn:hover::before {
    left: 130%;
}

.secondary-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(220, 38, 38, 0.35),
        0 8px 18px rgba(0, 0, 0, 0.45);

    filter: brightness(1.05);
}

.secondary-btn:active {
    transform: translateY(0);

    box-shadow:
        0 6px 14px rgba(220, 38, 38, 0.2),
        0 3px 8px rgba(0, 0, 0, 0.35);
}

.copy-btn {
  background-color: var(--green-color);
  color: var(--white-color);
  border: none;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 1px 10px rgba(0,0,0,0.2);
}

.copy-btn:hover {
  transform: translateY(-1px);
  background: var(--green-hover);
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
}

.copy-btn:active {
  transform: scale(0.97);
}


/*///DECORARACIJA TEKSTA///*/

.bold-text {
  font-weight: 600;
}

.high-text {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--dark-blue-color);
}

.main-p {
  font-weight: 500;
  letter-spacing: 7px;
  opacity: 0.8;
  padding-bottom: 10px;
  color: var(--green-hover);
}

.line-dec {
  width: 70px;
  height: 2.5px;
  background-color: var(--green-color);
  margin: 10px auto;
}


/* HEADER */

.header {
  position: fixed;
  width: 100%;
  top: 0;
  display: flex;
  justify-content: center;
  z-index: 1000;
  transition: 0.3s;
  animation: slide-down 1s;
}

.nav-container {
  width: 100%;
  padding: 10px 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  margin:auto;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  transition: 0.3s;
}


/* LOGO */

.logo img {
  height: 50px;
  transition: 0.3s;
  display: block;
}

.logo {
  display: flex;
  align-items: center;
}


/* NAV */

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
  align-items: center;
}
.nav-container {
  display: flex;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: white;
  font-size: 1rem;
  position: relative;
  transition: 0.3s;
  display: flex;
  align-items: center;
  padding-bottom: 6px;
  
}


/* hover linija */

.nav-links a::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2.5px;
  background: var(--green-color);
  left: 0;
  bottom: 0;
  transition: 0.5s;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-links a:hover {
  color: var(--green-color);
}

.nav-container {
  position: relative; 
}

.nav-links li{
  display:flex;
  align-items:center;
}


/* HAMBURGER */

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: white;
  transition: 0.5s;
}

/* ANIMACIJA U X */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
}

/*////////////////////////////////////////////////////////////////////////////////////*/

/* ///HERO/// */

.hero .hero-green {
  color: var(--green-color);
}

.hero::after {
  pointer-events: none;
}

.hero {
    position: relative;
    padding-top: 100px;
    overflow: hidden;
    min-height: 90vh;
    padding-bottom: 20px;
    display: flex;
    align-items: center; 

}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(0,0,0,0.4),
      rgba(0,0,0,0.3),
      rgba(0,0,0,0.1)
    );
    z-index: 2;
}

.hero .background-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    
}

.hero .background-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;   
}

.hero .hero-wrapper {
    
    position: relative;
    z-index: 3;
    text-align: left;
    animation: fade-in 1s;
    max-width: 1100px;
    color: var(--white-color); 
} 

.hero .hero-wrapper h3 {
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 1.3px;
  padding-bottom: 10px;
  opacity: 0.9;
}

.hero p {
  padding-bottom: 60px;
  margin-top: 20px;
  text-shadow: 0 3px 10px rgba(0,0,0,0.6);
}
 


/*////////////////////////////////////////////////////////////////////////////////////*/




.line-decor {
  width: 100%;
  height: 20px;
  background-color: var(--dark-blue-color);
}
 

/*////////////////////////////////////////////////////////////////////////////////////*/


/* Proizvodi sekcija */

.proizvodi {
  margin: 20px auto;
  text-align: center;
  max-width: 1200px;
  padding: 0 20px;
}

.content-card li {
    display: flex;
    align-items: center;
    gap: 20px;  
    align-content: center; 
    margin-bottom: 5px;
}

.content-card h4 {                                      
    margin-bottom: 8px;
    font-size: 1.3rem;
}

.proizvodi h2 {
  margin-bottom: 10px;
}

.product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
   
} 

.product-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;  
}

.content-card {
    background-color: var(--card-color);
    border-radius: 12px;
    overflow: hidden;    
    border-bottom: 1px solid var(--green-color, 0.6);
    width: 330px;
    transition: 0.4s ease;
}

.content-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}

.content-card .product-wrapper {
  padding: 10px;  
}

.product-grid .product-wrapper .btn {
    margin-top: 10px;
    display: inline-block;
}

.padding-button {
  margin-top: 60px;
  margin-bottom: 30px;
  text-align: center;
}

.content-pr {
  padding: 15px 0;
  text-align: center;
}
 

/*////////////////////////////////////////////////////////////////////////////////////*/


/*/// O NAMA ///*/

.o-nama {
  padding: 50px 20px;
}

.o-nama-wrapper {
  max-width: 1200px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* LEVA STRANA */

.images-wrapper {
  flex: 1;
  max-width: 560px;
}

.images-wrapper img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* velika gornja slika */
.images-wrapper .top {
  height: 320px;
  border-top-right-radius: 130px;
  margin-bottom: 12px;
}

/* donje dve slike */
.img-wrp {
  display: flex;
  gap: 12px;
}

.img-wrp img {
  width: 50%;
  height: 190px;
}

/* dole LEVA slika */
.img-wrp .left {
  border-bottom-left-radius: 130px;
}

/* DESNA STRANA */

.onama-content {
  flex: 1;
  max-width: 540px;
  padding-left: 10px;
}

.o-nama .line-dec {
  width: 80px;
  height: 3px;
  background-color: var(--orange-color);
  margin-bottom: 20px;
  margin-left: 0;
}


/*////////////////////////////////////////////////////////////////////////////////////*/


/*///INFORMACIJE///*/

.information {
  margin: 0 auto;
  text-align: center;
  max-width: 1200px;
  padding: 0 20px;
  text-align: center;
}

.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 30px auto;
  text-align: center;  
}

.feature-img {
  max-width: 100px;
  height: 100px;
  margin: 0 auto 30px;
  overflow: hidden; 
  padding: 10px;
}

.feature-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feature h3 {
  margin-bottom: 8px;
}

.feature {
  transition: transform 0.3s ease; 
  background-color: var(--card-color);
  border-radius: 12px;
  padding: 20px 10px;

}

.feature:hover {
  transform: scale(1.03); 
}

/*////////////////////////////////////////////////////////////////////////////////////*/



/*////////////////////////////////////////////////////////////////////////////////////*/

/*///O NAMA///*/

.about-drone .line-dec {
  margin-left: 0;
}

.about-drone {
  padding: 30px 20px;
}

.about-drone h2 {
 margin-bottom: 20px;
}

.about-drone .drone-image {
  flex: 1;
  max-width: 650px; /* povećano */
  display: flex;
  justify-content: center;
  align-items: center;
   min-width: 300px;
  padding-right: 16px;
}

.about-drone .drone-image img {
  width: 100%;
  max-width: 500px;
  height: auto;   /* KLJUČNO */
  display: block;
  object-fit: contain;
  box-shadow: 16px -16px 0px 0px var(--card-color);
}

.o-nama-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
}

.drone-content {
  flex: 1;
  max-width: 600px;
}

.padding-top {
  padding-top: 10px;
}

.specifikacije {
  display: flex;
  margin: 0 auto;
  max-width: 1200px;
  gap: 90px;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
}

.specifikacije .spec-content {
  display: flex;
  gap: 20px;
  align-items: center;
}

.spec-content .number p {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--green-hover);
  
}

.spec-content .spec p {
  font-size: 1.3rem;
  line-height: 1.1;
  font-weight: 500;
}


/*////////////////////////////////////////////////////////////////////////////////////*/

/* Portfolio Section */
#portfolio {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}

/* Filter Buttons Container */
#filter-buttons {
    text-align: center;
    margin-bottom: 30px;
}

/* Filter Buttons Styles */
.filter-btn {
    background-color: #fff;
    color: #333;
    border: 2px solid #333;
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background-color: #333;
    color: #fff;
}

/* Portfolio Items Grid */
#portfolio-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Portfolio Item */
.portfolio-item {
    position: relative;
    width: calc(25% - 20px);
    margin: 10px;
    overflow: hidden;
    
    background-color: #fff;
    transition: transform 0.3s ease;
}

/* Portfolio Item Image */
.portfolio-item img {
    width: 100%;
    height: auto;
    display: block;
}

.btns {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 10px;
}



.portfolio-item:hover {
    transform: scale(1.05);
}

/* Responsive Layouts */
@media (max-width: 992px) {
    .portfolio-item {
        width: calc(33.333% - 20px);
    }
}

@media (max-width: 768px) {
    .portfolio-item {
        width: calc(50% - 20px);
    }
}

@media (max-width: 576px) {
    .portfolio-item {
        width: 100%;
        margin: 10px 0;
    }
}

/* LIGHTBOX */

#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#lightbox-image {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 10px;
    animation: zoomIn 0.3s ease;
}

#close-lightbox {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 45px;
    cursor: pointer;
    z-index: 100000;
}

#prev-btn,
#next-btn {
    position: absolute;
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    font-size: 40px;
    cursor: pointer;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transition: 0.3s;
}

#prev-btn:hover,
#next-btn:hover {
    background: rgba(255,255,255,0.3);
}

#prev-btn {
    left: 30px;
}

#next-btn {
    right: 30px;
}

.portfolio-item img {
    cursor: pointer;
}

@keyframes zoomIn {
    from {
        transform: scale(.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media(max-width:768px){

    #prev-btn,
    #next-btn{
        width:50px;
        height:50px;
        font-size:30px;
    }

    #prev-btn{
        left:10px;
    }

    #next-btn{
        right:10px;
    }
}

/*////////////////////////////////////////////////////////////////////////////////////*/

/*///FAQ///*/

.faq-container {
  max-width: 800px;
  margin: 30px auto; 
  padding: 20px;
  color: var(--text-color); 
}

.faq-container h2 {
  text-align: center;
  margin-bottom: 40px;
}

.faq-item {
  border-bottom: 1px solid var(--green-color); 
  overflow: hidden; 
  margin-bottom: 20px;
  border-radius: 10px;
}

.faq-question {
  background-color: #999c9f;
  width: 100%;
  padding: 20px;
  text-align: left;
  font-size: 18px;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
}
.faq-container .main-p {
  text-align: center;
}


.faq-question:hover {
  background-color: #d0d7de;
}

/* Style for the arrow icon */
.faq-question .arrow {
  position: absolute;
  right: 20px;
  transition: transform 0.3s ease; 
  color: var(--green-hover);
}


.faq-question.active .arrow {
  transform: rotate(180deg); 
}


.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease; 
  background-color: var(--dark-blue-color); 
}


.faq-answer p {
  padding: 20px;
  font-size: 16px;
  line-height: 1.5; 
  color: var(--white-color); 
}

/*////////////////////////////////////////////////////////////////////////////////////*/


/* ///FOOTER/// */

footer {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: var(--dark-blue-color);
    align-content: center;
    color: var(--white-color);
    padding: 20px; 
}

footer p {
    font-size: 0.875rem;
    font-weight: 300;
}


/*////////////////////////////////////////////////////////////////////////////////////*/


/* ///KONTAKT/// */


.kontaktiraj-nas p.informacije {
    
    margin: auto;
    max-width: 1000px;
}

.kontaktiraj-nas {
    padding: 20px 40px;
    text-align: center;    
}

.kontaktiraj-nas .kontakt-wpr {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    padding-bottom: 50px;
}

.kontaktiraj-nas .kontakt-con .mail {
    display: flex;
    align-items: center;
    gap: 100px;  
    align-content: center;
    color: var(--text-color);
}

.kontaktiraj-nas .kontakt-con .phone {
    display: flex;
    align-items: center;
    gap: 100px;  
    align-content: center;
}

.kontaktiraj-nas .kontakt-con .location {
    display: flex;
    align-items: center;
    gap: 100px;  
    align-content: center;
}

.kontaktiraj-nas .kontakt-con .phone-1 {
    display: flex;
    align-items: center;
    gap: 20px;  
    align-content: center; 
}

.kontaktiraj-nas .kontakt-con .phone-1-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
    align-content: center;
}

.kontaktiraj-nas .kontakt-con .phone-wrapper .phone-1.margin {
    margin-top: 20px;
}

.kontakt-con hr {
    border: none;
    border-top: 1px solid var(--text-color);
    margin: 30px 0;
    width: 100%;
}

.kontaktiraj-nas .kontakt-con img {
    width: 40px;
    height: auto;
}

.kontaktiraj-nas .social img {
    width: 70px;
    height: 70px;
}

.kontaktiraj-nas .kontakt-con {
    padding-right: 20px;
}


.mail {
    margin-left: 20px;
}

.phone {
    margin-left: 20px;
}

.location {
    margin-left: 20px;
}

.social {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.mapa-section {
    padding: 20px 50px;
    margin: 0 auto;
    max-width: 1000px;

}



/*////////////////RESPONSIVE//////////////////////*/



@media (max-width: 1150px) {

.nav-container {
    padding: 10px 60px;
}

.features {
  gap: 20px;
  margin: 20px auto;
  padding: 10px;
}

.feature-img {
  max-width: 90px;
  height: 90px;
  margin: 0 auto 30px;
  overflow: hidden; 
}

.specifikacije {
    gap: 40px;
    justify-content: center;
  }

}

/* =========================
   TABLET
========================= */

@media (max-width: 992px) {

   .nav-links {
    position: absolute;
    top: 100px;
    right: 0;
    width: 70%;
  background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 25px 0;
    left: 0;
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
    transition: 1s;
    margin: auto;
  }

  .nav-links.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .hamburger {
    display: flex; 
  }

  .secondary-cta-btn {
    display: none;
  }

   .hero-description {
    max-width: 600px;
   }

  
  .clanci-sekcija {
    padding: 30px 20px;
  }

  .o-nama .line-dec {
  width: 60px;
  height: 2.5px;
  background-color: var(--orange-color);
  margin: 10px auto;
}

  .o-nama-wrapper {
    flex-direction: column;
    gap: 40px;
  }

  .o-nama {
    padding: 30px 80px;
  }

  .onama-content {
    max-width: 100%;
    text-align: center;
    padding: 20px 0 10px;
  }

  .line-dec {
    margin: 20px auto;
  }

  .images-wrapper .top {
    height: 240px;
  }

  .img-wrp img {
    height: 150px;
  }

  .features {
  
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin: 30px auto;
  padding: 40px;

}

.information {
  padding: 0 30px;

}

 .proizvodi {
    padding: 0 40px;
 }

  /* KONTAKT */
  .kontaktiraj-nas .kontakt-con .mail,
  .kontaktiraj-nas .kontakt-con .phone,
  .kontaktiraj-nas .kontakt-con .location {
    gap: 60px;
  }

  .kontaktiraj-nas .kontakt-con {
    padding-right: 0;
  }
}


/* =========================
   MOBILNI
========================= */

@media (max-width: 768px) {

  
   .o-nama {
    padding: 30px 60px;
  }

  .information {
  padding: 0 40px;

}

.btns {
    gap: 30px;
  }

  .features {
  
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 20px auto;
  padding: 10px;

}

.hero-description {
  max-width: 500px;
}

.about-drone {
    padding: 20px 40px;
}
.nav-container {
    padding: 10px 40px;

}

    .feature-img {
  max-width: 90px;
  height: 90px;
  margin: 0 auto 20px;
  overflow: hidden; 
  }

   .specifikacije {
    gap: 30px;
    justify-content:space-around;
    padding-top: 10px;
   
  }

  .faq-container {
    margin: 0 20px;
  }

  /* Kontakt */
  .kontaktiraj-nas .kontakt-con .mail,
  .kontaktiraj-nas .kontakt-con .phone,
  .kontaktiraj-nas .kontakt-con .location {
    gap: 40px;
  }
  .kontaktiraj-nas .kontakt-con img {
    width: 30px;
    height: 30px;
  }

  .kontaktiraj-nas .social img {
    width: 50px;
    height: 50px;
  }

   .kontaktiraj-nas .kontakt-con {
    padding-right: 0;

  }
   .kontaktiraj-nas p.informacije {
    margin-top: 10px;
  }

    .padding-button {
  margin-top: 40px;
  margin-bottom: 20px;
}
}


@media (max-width: 600px) {

  .btns {
       flex-direction: column;
      gap: 20px;
      align-items: center;
      padding: 10px;
  }


  #portfolio .padding-button {
  margin-top: 10px;
  margin-bottom: 10px;
}
  .hero-description {
    max-width: 400px; 
  }
  
  .specifikacije {
    gap: 20px; 
    padding-top: 10px;
  }

  .spec-content .number p {
    font-size: 2.2rem;
  }

  .spec-content .spec p {
    font-size: 1.1rem;
  }

    .section-title {
    margin-bottom: 35px;
    }

     .o-nama {
    padding: 30px;
  }

    .kontaktiraj-nas {
      padding: 20px;
    }

    .proizvodi {
    padding: 0 30px;
  }

  .information {
  padding: 0 20px;
  }

  .about-drone {
    padding: 20px 30px;
  }

  .faq-container {
    margin: 0;
  }

  .main-p {
    font-weight: 400;
     letter-spacing: 5px;
  }

  .logo img {
  height: 40px;
}


  .features {
 
    margin: 20px auto;
    padding: 5px;
  }
}

/* =========================
   MANJI TELEFONI
========================= */

@media (max-width: 480px) {

  .features {
    grid-template-columns: 1fr;
    gap: 40px;
    margin: 30px auto;
    margin-bottom: 0;
    padding: 10px 30px;
  }

  .hero h1 br {
    display: none;
  }

  h1 {
    letter-spacing: 1px;
    line-height: 1.1;
    font-size: clamp(2.2rem, 9vw, 2.5rem);
}

  .feature-img {

  margin: 0 auto 20px;
  overflow: hidden; 
  }

  .specifikacije .spec-content {
    gap: 5px;

  }

  .specifikacije {
    gap: 15px 5px;
    align-items: center;
  }


  .about-drone {
    padding: 15px;
  }

   

  .information {
  padding: 0 30px;
  }


  .proizvodi {
    padding: 0 20px;
  }
    .clanak-image {
        height: 190px;
    }

    .clanak-content {
        padding: 20px 16px;
    }

    .clanak-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .kontaktiraj-nas .phone .phone-1-wrapper {
    gap: 20px;
  }

  .kontaktiraj-nas .kontakt-con img {
    width: 24px;
    height: 24px;
  }

  .kontaktiraj-nas .social img {
    width: 40px;
    height: 40px;
  }


  /* KONTAKT */
  .kontaktiraj-nas .kontakt-con .mail,
  .kontaktiraj-nas .kontakt-con .phone,
  .kontaktiraj-nas .kontakt-con .location {
    gap: 15px;
  }
}


@media (max-width: 400px) {
 .images-wrapper .top {
    height: 180px;
  }

  .img-wrp img {
    height: 110px;
  }

  
  .information {
  padding: 0 20px;
  }


  .proizvodi {
    padding: 0 16px;
  }

  .clanci-sekcija {
        padding: 16px;
    }
}

/* RESPONSIVE */





.section-heading {
  margin-top: 100px;
}






.usluge-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 110px 20px;

}

.usluge-section h2 {
    text-align: center;
    margin-bottom: 10px;
}
.usluge-section > p {
    margin-bottom: 15px;
    text-align: center;
}

.usluge-lista {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
}

.usluge-item {
    width: 100%;
}

.usluge-item h3 {
    margin-bottom: 15px;
}

.usluge-item .line-dec {
    margin-bottom: 20px;
    margin-left: 0;
}

.usluge-item p {
    margin-bottom: 15px;
}

.usluge-item p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .usluge-section {
        padding: 100px 15px;
    }

    .usluge-lista {
        gap: 30px;
    }

    .section-heading {
  margin-top: 80px;
}
}

.kontakt-stranica {
  margin-top: 80px;
}

.garazna-vrata-page .hero {
  min-height: 50vh;
}

.hero-red {
  font-weight: 700;
}

.garazna-vrata-page .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(0,0,0,0.8),
      rgba(0,0,0,0.5),
      rgba(0,0,0,0.2)
    );
    z-index: 2;
}

/* Desktop */
.garazna-vrata-page .features,
.metalne-konstrukcije-page .features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Tablet */
@media (max-width: 992px) {
    .garazna-vrata-page .features,
    .metalne-konstrukcije-page .features {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Telefon */
@media (max-width: 768px) {
    .garazna-vrata-page .features,
    .metalne-konstrukcije-page .features {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 15px;
    }

    .garazna-vrata-page .feature,
    .metalne-konstrukcije-page .feature {
        max-width: 400px;
        margin: 0 auto;
    }
}

.garazna-vrata-page .information {
  margin-top: 30px;
}



.metalne-konstrukcije-page .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(0,0,0,0.8),
      rgba(0,0,0,0.5),
      rgba(0,0,0,0.2)
    );
    z-index: 2;
}




.metalne-konstrukcije-page .information {
  margin-top: 30px;
}

.metalne-konstrukcije-page .hero {
  min-height: 50vh;
}

.metal-constructions {
    padding: 50px 0;   
}

.metal-constructions .container-g {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.metal-constructions h2 {
    margin-bottom: 30px;
}

.metal-constructions h3 {
    margin-top: 50px;
    margin-bottom: 20px;
}

.metal-constructions p {
    margin-bottom: 20px;
}

.metal-constructions p:last-child {
    margin-bottom: 0;
}






/* ==========================================================================
   NOVA GALERIJA - GRID (Slike se vide cele, bez sečenja)
   ========================================================================== */

/* Glavni kontejner za mrežu slika */
.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Počinje red od leva na desno */
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 10px;
    /* Da bi se slike lakše uklopile ako su različitih visina */
    align-items: flex-start; 
}

/* Pojedinačna kartica/slika u novoj galeriji */
.gallery-grid .portfolio-item {
    position: relative;
    width: calc(25% - 20px); /* 4 stavke u redu na desktopu */
    margin: 10px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-radius: 8px; /* Blago zaobljeni uglovi */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* Dodajemo dno da bi kartica imala čistu belu pozadinu ako je slika uža */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hover efekat na karticu */
.gallery-grid .portfolio-item:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

/* KLJUČNI DEO: Stil same slike unutar kartice */
.gallery-grid .portfolio-item img {
    width: 100%;       /* Slika popunjava celu širinu kartice */
    height: 250px;      /* Visina se automatski prilagođava srazmeri slike */
    display: block;
    cursor: pointer;
    
    /* Ovo osigurava da se slika vidi CELA unutar svojih dimenzija */
    object-fit: cover; 
}


/* ==========================================================================
   RESPONSIVE ZA NOVU GALERIJU (.gallery-grid)
   ========================================================================== */

/* Tableti i manji laptopovi (3 slike u redu) */
@media (max-width: 992px) {
    .gallery-grid .portfolio-item {
        width: calc(33.333% - 20px);
    }
}

/* Mali tableti i jači telefoni (2 slike u redu) */
@media (max-width: 768px) {
    .gallery-grid .portfolio-item {
        width: calc(50% - 20px);
    }
}

/* Mobilni telefoni (1 slika u redu, preko celog ekrana) */
@media (max-width: 576px) {
    .gallery-grid .portfolio-item {
        width: 100%;
        margin: 10px 0; /* Smanjujemo bočne margine na mobilnom */
    }
    
    .gallery-grid {
        margin: 20px auto; /* Smanjen razmak cele galerije od ostatka stranice */
    }
}