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

@font-face {
    font-family: 'gt';
    src: url('fonts/GeniusTechno-Regular.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

:root {
  --mon:"Monstserrat", sans-serif;
  --mic: "Michroma", sans-serif;
   --gt: "gt";

    --primary:#131313;
    --zelena:#CCFC52;
  --secondary:#0971CE;
  --light:#878F57;
  --textwhite:#F6F8EB;
  --landing-width:68.89vw;
  --landing-width-mobile:86vw;
  --boxshadow:0px 0px 30px 0px #0000000F;
 
--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.33vw;
    --m11:2.56vw;
    --m12:2.79vw;
    --m13:3.02vw;
    --m14:3.26vw;
    --m15:3.49vw;
    --m16:3.72vw;
    --m18:4.19vw;
    --m20:4.65vw;
    --m24:5.58vw;
    --m25:5.81vw;
    --m30:6.98vw;
    --m32:7.44vw;
    --m36:8.37vw;
    --m40:9.30vw;
    --m48:11.16vw;
    --m64:14.88vw;


 

  






 

}




body{
    margin: 0;
    padding: 0;
    font-family: var(--mon);
    overflow-x: hidden;
    
    background: linear-gradient(0deg,#0C1F25 0%, #0C1F25 19%, #070A0C 70.07%);
    background-color: #070B0F;



}




.pchide{
  display: none;
}




.about-main-hero{
    width: 100vw;
    background-image: url('./img/aboutlanding.png');
    background-size: cover;
    height:57.29vw ;
}

.about-main-hero h1 {
      font-family: var(--gt);
    font-weight: 400;
    font-size: 8.39vw;
    line-height: 100%;
    letter-spacing: 6px;
    text-align: center;
    margin: 0;
    -webkit-text-stroke: 2px #CCFC52;
    color: transparent;
    padding-top: 13.04vw;
}

.about-main-hero h2{

  font-family: var(--gt);
font-weight: 400;

font-size: 8.39vw;
leading-trim: NONE;
line-height: 100%;
letter-spacing:3px;
text-align: center;
color: #CCFC52;
margin: auto;
width: 50%;


}
.about-main{
    position: relative;
    width: 100vw;
    display: flex;
}
.about-main .left{
    width: 41%;
}

.about-main .left img{
    position: absolute;
    width: 55.83vw;
    top: -28vw;
}


.about-main .right h1{
    font-family: var(--mic);
font-weight: 400;

font-size: var(--d40);

line-height: 100%;
color: white;
width: 40.26vw;
margin-top: 10.78vw;
margin-bottom: 0;
}


.about-main .right p{
    font-family: var(--mic);
font-weight: 400;

font-size: var(--d18);
leading-trim: NONE;
line-height: 125%;
color: white;
width: 40.99vw;
margin-top: var(--d24);


}

.ciljevi{
    width: 74.11vw;
    display: flex;
    justify-content: space-between;
    margin: auto;

}

.heading{

    font-family: var(--mic);
font-weight: 400;

font-size: var(--d40);

line-height: 100%;
color: white;
width: fit-content;
margin: auto;
margin-top: 8.33vw;
margin-bottom: var(--d100);

}

.cilj{
    text-align: center;

}

.cilj.prvi img{
    width:6.98vw ;
}

.cilj.drugi img{
    width:6.88vw ;
}


.cilj.treci img{
    width:5.89vw ;
}

.cilj h1{
    font-family: var(--mic);
    color: white;
font-weight: 400;
;
font-size: var(--d24);

line-height: 100%;

text-align: center;
width: 12vw;
margin-top: var(--d22);

}

.granica{
    text-align: center;
    margin-top: 6.88vw;
}



.granica h1{
  font-family: var(--gt);
font-weight: 400;

font-size: var(--d80);
margin: 0;
margin-top: 0vw;

line-height: 100%;
letter-spacing: 6px;
text-align: center;
color: #CCFC52;

}
.granica h2 {
    font-family: var(--gt);
    font-weight: 400;
    font-size: 5.10vw;
    line-height: 100%;
    letter-spacing: 6px;
    text-align: center;
    margin: 0;

   
    -webkit-text-stroke: 1px #CCFC52; 
    
   
    color: transparent; 
    margin-top: var(--d22);
    

}
.granica .heading{
    margin-top: 0;
    margin-bottom: var(--d16);
}

.odrzivost{
    width: 100vw;
    display: flex;
}

.odrzivost .left img{
    width: 44.17vw;
    margin-top: -20vw;
}

.odrzivost .right .heading{
    margin-top: var(--d120);
    margin-bottom: var(--d44);
}






.custom-lista {
  list-style: none; /* Uklanjamo defaultne tačkice */
  padding-left: 0;
}

.custom-lista li {
  position: relative;
  padding-left: var(--d84); /* Razmak između teksta i tačkice */
  margin-bottom: 0.5em;
  margin-top: 1vw;
  font-family: var(--mic);
font-weight: 400;

font-size: var(--d18);

line-height: 206.99999999999997%;
color: white;


}

.custom-lista li::before {
  content: "•"; /* Karakter za tačkicu */
  color: #CCFC52; /* Tvoja specifična boja */
  font-size: 4.78vw; /* Tvoja specifična veličina */
  
  /* Pozicioniranje */
  position: absolute;
  left: 0;
  top: -0.8vw;
}


.granica2{
  margin-top: -10vw;
}

.granica h3{


  font-family:var(--mic);
font-weight: 400;

font-size: var(--d40);
leading-trim: NONE;
line-height: 100%;

text-align: center;
width: 44%;
margin: auto;

margin-top: 3vw;
color: white;


}




.unlimitedi{
  width: 78.65vw;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap:  5.16vw 9.17vw;
  margin-top: var(--d100);
}

.unlimited{
  text-align: center;
}

.unlimited img{
  width:8.39vw ;
}


.unlimited a{
  font-family: var(--mic);
font-weight: 400; text-decoration: none;

font-size:var(--d16);
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: white;
margin: 0;
margin-top: var(--d24);
display: block;

}


.naslov{
    width:80vw;
}




  @media screen and (max-width:900px){
     


    .pcshow{display: none;}
    .pchide{display: block;}
      
      
  .about-main-hero{
    background-image: url('./img/ostalimob.png');
    height: 182.56vw;
  }

  .about-main-hero h1{
    padding-top: 64.88vw;
    font-size: 12.79vw;

  }

  .about-main-hero h2{
    font-size: 12.79vw;
    width: 100%;

  }

  .about-main .left img{
    display: none;
  }
.about-main .left {
    width: 0%;
}
.about-main .right h1 {
    font-family: var(--mic);
    font-weight: 400;
    font-size: var(--m18);
    line-height: 100%;
    color: white;
    width: 78.14vw;
    margin: auto;
    margin-top: 6.28vw;
    margin-bottom: 0;
    text-align: center;
    margin-left: 10.23vw;
}


.about-main .right p{
  margin-top: 5.81vw;
  font-size: var(--m16);
  width: 67.21vw;
  text-align: center;
  margin-left: 16.28vw;
  margin-bottom: 0;

}

.heading{

    font-family: var(--mic);
    font-weight: 400;
    font-size: var(--m18);
    line-height: 100%;
    color: white;
    width: 78.14vw;
    margin: auto;
    margin-top: 13.26vw;
    margin-bottom: 0;
    text-align: center;
    margin-left: 10.23vw;

}

.ciljevi{
  width: 100vw;
  flex-direction: column;
  text-align: center;
  margin-top: 12.33vw;
}

.cilj.prvi img{
    width:16.74vw ;
}

.cilj.drugi img{
    width:15.12vw ;
}


.cilj.treci img{
    width:14.65vw ;
}
.cilj h1{
  margin: auto;


  margin-top: var(--m12);
  font-size: var(--m16);
  width: 37.21vw;
  text-align: center;
  margin-left: auto;
  margin-bottom: 13.49vw;

}
.granica .heading{
  width: 50vw;
  margin: auto;
  margin-bottom: var(--m18);
}
.granica{
  margin-top: 0;
  display:block;
}

.granica h1{
  font-size: 8.84vw;
  letter-spacing: 0;
}

.granica h2{
  font-size: 8.84vw;

  }

  .odrzivost{
    flex-direction: column;
    position: relative;
  }

  .odrzivost .left img{
    width: 51.63vw;
        margin-top: -37vw;
  }

  .odrzivost .left{
    position: absolute;
  }


  
  .odrzivost .left img.dva{
    width:38.84vw;
        margin-top: 0vw;
        margin-left: 61vw;
  }

.odrzivost .right .heading{
  margin-top:34vw;
  font-size: var(--m24);
}

.custom-lista li:before{
  list-style-type: none;
  display: none;
  
}



.custom-lista li{
  position: static;
  text-align: center;
  padding: 0;
  font-size: var(--m16);
  line-height: 167%;
}


.granica2{
  margin-top: 19vw;
  display:block;
}

.granica2 h1{
  width: 81.21vw;
  margin: auto;
}
.granica h3{
  font-size: var(--m20);
  width: 75vw;
  line-height: 100%;
  margin-top: var(--m64);
}


.unlimitedi {
    width: 58.60vw;
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4vw 15.67vw;
    margin-top: 15vw;
}


.unlimited img {
    width: 20.70vw;
}

.unlimited a{
  font-size:var(--m16) ;
  margin-top: var(--m10);
}

}