@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');



/* Light */
@font-face {
    font-family: 'DINPro';
    src: url('fonts/dinpro_light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Regular */
@font-face {
    font-family: 'DINPro';
    src: url('fonts/dinpro.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Medium */
@font-face {
    font-family: 'DINPro';
    src: url('fonts/dinpro_medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Bold */
@font-face {
    font-family: 'DINPro';
    src: url('fonts/dinpro_bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Black */
@font-face {
    font-family: 'DINPro';
    src: url('fonts/dinpro_black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
  --din:'DINPro';
  --lat: "Lato", sans-serif;

  --primary:#005ca7;
  --siva:#FFFFFF17;
  --light:#878F57;
  --textwhite:#F6F8EB;
  --landing-width:84.17vw;
  --landing-width-mobile:77.78vw;
  --boxshadow:0px 0px 30px 0px #0000000F;


--d10:0.52vw;
   --d11:0.57vw;
 
   --d12:0.63vw;
   --d13:0.68vw;
    --d14:0.73vw;
    --d15:0.78vw;
    --d16:0.83vw;
    --d18:0.94vw;
       --d19:0.99vw;
    --d20:1.04vw;
    --d22:1.15vw;
    --d24:1.25vw;
    --d25:1.3vw;
    --d28:1.46vw;
    --d30:1.56vw;
    --d32:1.67vw;
    --d34:1.77vw;
    --d36:1.88vw;
    --d44:2.29vw;
    --d40:2.08vw;
    --d48:2.5vw;
    --d54:2.81vw;
    --d56:2.92vw;
    --d64:3.33vw;
    --d70:3.65vw;
       --d75:3.91vw;
    --d80:4.17vw;
    --d84:4.38vw;
    --d100:5.21vw;
    --d110:5.73vw;
    --d120:6.25vw;
    --d156:8.13vw;
    --d904:47.08vw;


      --m10:2.78vw;
    --m11:3.06vw;
    --m12:3.33vw;
    --m13:3.61vw;
    --m14:3.89vw;
    --m15:4.17vw;
    --m16:4.44vw;
    --m18:5vw;
    --m20:5.56vw;
    --m22:6.11vw;
    --m24:6.67vw;
    --m25:6.94vw;
    --m28:7.78vw;
    --m30:8.33vw;
    --m32:8.89vw;
    --m34:9.44vw;
    --m36:10vw;
    --m40:11.11vw;
    --m44:12.22vw;
    --m45:12.50vw;
    --m48:13.33vw;
    --m56:15.56vw;
    --m64:17.78vw;
    --m68:18.89vw;
    --m80:22.22vw;
    --mmt: 27.78vw;

  






 

}
/* width */
::-webkit-scrollbar {
    width: 10px;
   
    
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: white;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--primary);
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
  }
.pcshow{
  display: block;
}

.pchide{
  display: none;
}

html{
  scroll-behavior: smooth;
}
body{
    margin: 0;
    padding: 0;
    font-family: var(--din);
    overflow-x: hidden;
    background-color: black;
}




.main-bg{
  height: 56.09vw;
  width: 100vw;
  position: relative;
  

}

#intro-video{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
   height: 56.09vw;
   width: 100vw;

}




header {
  display: flex;
  justify-content: space-between;
  margin: auto;
  padding-top: var(--d48);
  padding-bottom: var(--d48);
  width: 100vw;
  position: fixed;
  top: 0;
  z-index: 10;
  background: transparent; /* Osnovna pozadina */
}

/* Kreiramo sloj sa gradijentom koji je nevidljiv */
header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #003478 60%, rgba(102, 102, 102, 0) 100%);
  opacity: 0;
  transition: opacity 1.5s ease;
  z-index: -1; /* Postavljamo ga iza sadržaja headera */
}

/* Kada se doda klasa .show, samo pojačavamo vidljivost */
header.show::before {
  opacity: 1;
}

.lang{

  height: 2.34vw;
  border-radius: var(--d24);
  display: flex;
  justify-content: center;
  padding-left: var(--d25);
  padding-right: var(--d25);
  place-self: center;
  gap: var(--d30);
      align-items: center;
      margin-left: auto;

  
}




header .logo{
  width: 12.08vw;
  margin-left: var(--d70);
  margin-right: 15.68vw;
}
header .lang{

  margin-right: var(--d100);
}


.katalog-proizvoda{
    margin:auto;
}



.lang a{



font-weight: 400;

font-size: var(--d20);

line-height: 100%;
color: #FFFFFFE5;
text-decoration: none;
font-family: var(--din);
padding-bottom:8px;


}

.lang a.active{
  font-weight: 600;

}

header nav {

  display: flex;
  width: 51.51vw;
  
  justify-content: space-between;
  align-items: center;
  
}
header nav a {

font-weight: 600;

font-size: var(--d24);

line-height: 100%;
letter-spacing: 0%;
color:  #FFFFFFE5;

text-decoration: none;
font-family: var(--din);
padding-bottom:8px;
box-sizing: border-box;
text-transform: uppercase;



}

header nav a:hover{
  border-bottom: 1px solid #f8f8f8;

}

.upper-mask{
/* Rectangle 1 */

box-sizing: border-box;

position: absolute;
width: 100vw;
height: 31.51vw;
left: -2px;
top: 0px;

background: linear-gradient(180deg, #003478 0%, rgba(102, 102, 102, 0) 100%);


z-index: 7;

}

.lower-mask{
  /* Rectangle 4 */
  text-align: center;

position: absolute;
width: 100vw;
height: 25.85vw;
left: -1px;
bottom:0;

z-index: 7;

background: linear-gradient(0deg, rgba(0, 0, 0, 0.67) 19.23%, rgba(0, 0, 0, 0.443005) 58.17%, rgba(102, 102, 102, 0) 100%);


}



.amm-hero{
  position: absolute;
  width: 20vw;
  left: 40vw;
  z-index: 8;

}

.lower-mask h1{
  color: white;
  font-weight: 500;
  font-size: var(--d75);
  width: 40.61vw;
  line-height: var(--d64);
  margin: auto;
  margin-top: 3.64vw;

}


/* HERO SEKCIJA END*/




footer{
  width: var(--landing-width);
  margin: auto;
  margin-top: var(--d100);
  padding-bottom: var(--d64);
  display: flex;
  justify-content: space-between;
}

footer .info{
  width: 22.24vw;
 
}

.info img{
  width: 14.27vw;
  margin-bottom:var(--d40) ;
  
}

.info p{
  font-family: var(--din);
  font-size: var(--d19);
  color: #f8f8f8;
  font-weight: 400;
  line-height: var(--d25);
}

footer .link-group{
  display: flex;
  justify-content: space-between;
  width: 42.29vw;
}

.links h1{
  font-size: var(--d22);
  font-family: var(--lat);
   color: rgba(255, 255, 255, 0.5);
  line-height: var(--d30);
  font-weight: 900;
  margin: 0;
  margin-bottom:var(--d34) ;

}

.links a:hover{

     color: rgba(255, 255, 255, 0.5);

}

.links a{
  font-family: var(--lat);
  color: white;
  font-size: var(--d18);
  font-weight: 400;
  margin-bottom:var(--d20);
  text-decoration: none;
  display: block;
  line-height: var(--d25);
}
.nomargin{
  margin: 0!important;
}


.mobile-header{
  display:none;
}

.submenu,.aboutcompanymobile,.divider,.divider-proizvodi{
  display: none;
}

.main-nav .menu-btn{
  display: none;
}

.dropdown{
    display:none;
}
  @media screen and (max-width:900px){
    .main-nav .menu-btn{
  display: block;
}

    .divider-proizvodi{
      display: block;
    }

    header nav a:hover{
  border-bottom: none;

}
.hassubmenumobile.active{
  margin-left: 12.5vw;
  margin-bottom: 7.5vw;
}

    .dropdown {
    max-height: 0;
   
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    position: relative;
    width: 45vw;
    display: none;
}
.divider-proizvodi{
  position: absolute;
  top: -5vw;
  left: 0;
  width:43.89vw ;
}
/* otvoreno stanje */
.dropdown.active {
    max-height: 300px; /* dovoljno veliko */
    opacity: 1;
    margin-left: 12.5vw;
    display: block;
}

/* mali stil da izgleda kao submenu */
.submenu {
    display: block;
    
    font-size: var(--m15);
    font-weight: 600;
}
    header:before{
      display: none;
    }

   

#mainHeader .logo, #mainHeader .lang{
  display: none;
}
    #mainHeader{
    
    width: 100vw;
    height: auto;
    border-end-start-radius: var(--m25);
     border-end-end-radius: var(--m25);
    margin-top: var(--m80);
    background-color: var(--primary);

      transform: translateY(-110%);
    transition: transform 0.4s ease;


    
  }
  
     #mainHeader .lang{
           position: absolute;
    display: block;
    bottom: 11vw;
    right: 6vw;
   }
   
   
   .lang a {
    font-weight: 400;
    font-size: 4vw;
    line-height: 100%;
    color: #FFFFFFE5;
    text-decoration: none;
    padding-left: 3vw;
    font-family: var(--din);
    padding-bottom: 8px;
}

  .about-landing .right .aboutcompany{
    display: none;
  }
.meni {
    display: block;
    cursor: pointer;
}

.close {
    display: none;
    cursor: pointer;
}

/* toggle stanje */
.header-open .meni {
    display: none;
}

.header-open .close {
    display: block;
}

  #mainHeader.active {
    transform: translateY(0);
}

  .close{
    width: 1.94vw;
    padding-right: 8vw;
  }

  #mainHeader nav{
    flex-direction: column;

  }

    .divider {
        width: 103.5vw;
        margin: auto;
        position: static;
        z-index: 15;
        top: 15.61vw;
        left: 8.75vw;
        margin-left: -20vw;
        margin-top: 0vw;
        margin-bottom: 4vw;
    }
  header nav{
    align-items: flex-start;
    margin-left:15.83vw
  }

  header nav a {
    font-weight: 400;
    font-size: var(--m15);
    line-height: var(--m30);
    letter-spacing: 0%;
    color: #FFFFFFE5;
    text-decoration: none;
    font-family: var(--din);
    padding-bottom: var(--m10);
    box-sizing: border-box;
    text-transform: none;
}



  .mobile-header{
    display: flex;
    position: relative;
    z-index: 11;
    width:100vw;
    height: var(--m80);
    background-color: var(--primary);
    place-items: center;
    box-sizing: border-box;
    padding: var(--m24) var(--m28);
    justify-content: space-between;
  }

  .mobile-logo{
    width: 31.94vw;
    cursor: pointer;
  }

  .hamburger{
    width:25.28vw ;
     cursor: pointer;
  }

  .main-bg{
   
    width: 100vw;
    height:54.72vw ;
  }

  #intro-video{
      top:20.67vw;
  }
  .upper-mask{
    top:21.67vw;
    height: 23.60vw;
   


background: linear-gradient(180deg, #005CA7 9.18%, rgba(37, 96, 143, 0.46) 49.55%, rgba(255, 255, 255, 0) 89.92%);

  }
  .lower-mask{
    top:52.05vw;
    height: 24.90vw;


background: linear-gradient(0deg, #000000 9.18%, rgba(0, 0, 0, 0.34) 52.61%, rgba(255, 255, 255, 0) 89.92%);


  }


  .amm-hero{
    width:40vw ;
    left: 30vw;
    
  }

  .lower-mask h1{
    margin-top:5vw;
    line-height: var(--m13);
  }


    




.mobile-header{
      position: fixed;
      top: 0;
      left: 0;
    }

footer {
    width: 79.44vw;
    margin: auto;
    margin-top: var(--m44);
    padding-bottom: var(--m64);
    display: block;
    justify-content: space-between;
}

.info img{
  width:38.06vw ;
  margin-bottom: var(--m44);
}


footer .link-group {
    display: flex;
    justify-content: space-between;
    width:79.44vw;
    flex-wrap: wrap;
    gap: 7vw;
}

.info p{
  display: none;
}
.links h1{
  font-size:var(--m14);
  line-height: var(--m24);
  margin-bottom: var(--m14);
}
.links{
  width:36vw ;
}

.links a{
  font-size:var(--m12) ;
  line-height: var(--m30);
  margin-bottom:1vw ;
}














    

    
  }