@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

:root {
  --mon:"Monstserrat", sans-serif;
  --orb: "Orbitron", sans-serif;
  --raj:"Rajdhani", sans-serif;
    --primary:#131313;
  --secondary:#0971CE;
  --light:#878F57;
  --textwhite:#F6F8EB;
  --landing-width:68.89vw;
  --landing-width-mobile:86vw;
  --boxshadow:0px 0px 30px 0px #0000000F;
 
--d15:0.78vw;
 --d16:0.89vw;
    --d18:0.94vw;
    --d24:1.25vw;
    --d25:1.3vw;
    --d48:2.5vw;
    --d80:4.17vw;


    --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;
    --m24:6.67vw;
    --m25:6.94vw;
    --m32:8.89vw;
    --m36:10vw;
    --m40:11.11vw;
    --m48:13.33vw;
    --m64:17.78vw;


     --fw-thin: 100;
    --fw-extralight: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;


  






 

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

.pchide{
  display: none;
}

.ds-version{
  display: block;
}
.mob-version{
  display: none;
}
.hideall{
  display: none!important;
}
body{
    margin: 0;
    padding: 0;
    font-family: var(--mon);
    overflow-x: hidden;
    background-color: #000000;
}

header{
  height:5.21vw ;
  width: 100vw;
  background-color: var(--primary);
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 4px 29.1px 0px #FFE618;
  position: relative;
  z-index: 5;

}

header img{
  width:4.20vw ;
  margin-left: 10.42vw;
}
header nav{
  align-content: center;
}
header nav ul{
  list-style-type: none;
  width: 36.72vw;
  display: flex;
  justify-content: space-between;
}
header nav ul li a{
  text-decoration: none;
  color: #FFFFFF;
  font: var(--d15);
  font-weight: var(--fw-semibold);
  font-size:0.78vw;

}


.header__lang{
  display: flex;
  align-content: center;
  margin-right: 10.42vw;
			ul{
        list-style-type: none;
        display: flex;
        align-content: center;
        
				li{
           align-content: center;
					

					&:last-child{
						a{
							border-right:0px;
						}
					}
					a{
						padding:0px 10px;
						color: #ffffff;
						
						font-weight: 500;
						letter-spacing: -0.07px;
						text-transform: uppercase;
            text-decoration: none;
						border-right:2px solid #fff;
						font-size:0.78vw;
            
  font-weight: var(--fw-semibold);
  display: flex;
					}
				}
			}
		}



.main .main-hero-img,.main-hero-img{
  width: 100vw;
}

.about{
  display: flex;
  justify-content: space-between;
  width: 100vw;
  position: relative;
}
.about .about-arm img{
  width: 46.77vw;
 transform-origin: left center;
  transform: rotate(-15deg); 
  transition: transform 3s ease-out; 
  margin-left: -2.8vw;
}

.about-text{
  
}

.about-text h1{
  font-size: 2.49vw;
  font-family: var(--orb);
  font-weight: var(--fw-bold);
  color: white;
  margin: 0;
  margin-left: 5.98vw;
  margin-top: 3.82vw;
  width: 27.37vw;

}

.about-text p{
  font-size: 1vw;
  font-family: var(--raj);
  font-weight: 400;
  color: white;
      margin-right: 4.42vw;
      margin-left: 5.98vw;
      margin-top: 3.23vw;
      width: 38.87vw;

}

.saraf1{
  position: absolute;
  top: 24.09vw;
  right: 28.88vw;
  width: 7.60vw;

}
.saraf2{
  position: absolute;
  top:24.15vw;
  right:10.82vw;
  width: 21.90vw;

}

.saraf3{
  position: absolute;
  top: 26.54vw;
  right: 6.30vw;
  width: 4.99vw;

}
.about-h2{
  font-size: 2.49vw;
  font-family: var(--orb);
  font-weight: var(--fw-bold);
  color: white;
  margin: 0;
 position: absolute;
 bottom: -8vw;
 left: 50%;
  transform: translateX(-50%);

}


/* slider start*/


    .slider {
      max-width: 79.19vw;
      margin: 4.16vw auto;
      width:79.19vw;
      margin-top: 15vw;
    }

    .card {
      transition: all 0.3s ease;
     position: relative;
      text-align: center;
      background: transparent;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      
      width: 15.19vw;
      height:18.94vw;
      transform: scale(0.8);
      opacity: 0.5;
       display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: 16vw;
    }

    .card img {
      width: 100%;
      
     
    }

    
    .card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card p {
  max-width: 41.26vw;
  width: 41.26vw;
  text-align: center;
  color:white;
  display: none;
      font-size: 1.44vw;
      margin-top: 5.46vw;
      
}


    .slick-center .card {
      width: 27.47vw !important;
      height: 34.34vw !important;
      transform: scale(1);
      opacity: 1;
    }

    .slick-center .card p {
      display: block;
    }

    .slick-slide {
      display: flex !important;
      justify-content: center;
    }
    .slick-track{
        min-height:60vw ;
    }
    .slider .slick-slide {
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  width: 33.33%;
}


/* SLider End*/


.support{
  position: relative;
  width: 100vw;
}
.support h1{
  font-size: 2.49vw;
    font-family: var(--orb);
    font-weight: var(--fw-bold);
    color: white;
    margin: 0;
    width: 100vw;
    text-align: center;
    
    margin-top: 3.82vw;
}

.support p{
  text-align: center;
  width: 40.32vw;
  margin: auto;
  font-family: var(--raj);
  font-weight: var(--fw-regular);
  font-size: 1.44vw;
  color: white;
  margin-top: 6.82vw;
  margin-bottom: 10vw;
}

.firms{
  width: 69.25vw;
  margin: auto;
  height:13.42vw ;
  background-image: url('./img/firms-placeholder.svg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 3.14vw;


  

}

.row1{
    display: flex;
    justify-content: center;
    gap:4.89vw;
    padding-top: 5vw;
    align-items: flex-end; /* Ovo poravnava sve slike po dnu */
  
  
  
}
.row2{
    display: flex;
    justify-content: center;
    gap:1.87vw;
    padding-top: 2vw;
    align-items: flex-end; /* Ovo poravnava sve slike po dnu */
  
  
  
}

.firms .row1 a, .firms .row2 a{
  text-decoration: none;
  
  text-align: center;
  display: flex;
  align-items: flex-end;

}

.firms .row1 img,.firms .row2 img{
  height: 1.87vw;
}


.maticafirms{
  position: absolute;
  width: 21.49vw;
     top: -23vw;
    left: -1vw;
}

.saraffirms{
position: absolute;
    width: 11.08vw;
    top: -10vw;
    right: 3vw;
}



.sponzors{
  width: 69.25vw;
  margin: auto;
  height:13.42vw ;
  background-image: url('./img/firms-placeholder.svg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 3.14vw;
  

}

.sarafsponzors{
  position: absolute;
    width: 32.05vw;
    top: 1vw;
    left: 2vw;
    z-index: 5;
}

.maticasponzors{
position: absolute;
    width: 10.56vw;
     top: 1vw;
    right: 0vw;
}



.partneri{
  width: 69.25vw;
  margin: auto;
  height:13.42vw ;
  background-image: url('./img/firms-placeholder.svg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 3.14vw;
  

}

#partneri-h1{
  margin-bottom: 2vw;
  margin-top:11vw ;
}



.media{
  width: 69.25vw;
  margin: auto;
  height:13.42vw ;
  background-image: url('./img/firms-placeholder.svg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 3.14vw;
  

}

.sarafmedia{

  position: absolute;
    width: 27.99vw;
        top: 8vw;
    right: 6vw;
    z-index: 5;


}
.javite{
  width: 100vw;
  background-image: url('./img/javite-bg.svg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 13.16vw;
    position: relative;
    margin-top: 10vw;
    z-index: 0;

}

.javite h1{
    font-size: 2.49vw;
    font-family: var(--orb);
    font-weight: var(--fw-bold);
    color: white;
    position: absolute;
     left: 50%;
  transform: translateX(-50%);
  top: 4vw;

    
    
    

}

.contact-form{
  display: flex;
  width:78.93vw;
  justify-content: space-between;
  margin: auto;
 
}

.contact-form form{
  width: 44vw;
}
.contact-form p{
  font-weight: var(--fw-semibold);
  font-family: var(--orb);
  font-size:1.44vw ;
  color: white;
  width: 30.91vw;
  margin-top: 2.81vw;
}

.contact-form form input[name="ime"]{
  background-image: url('./img/imeiprezime.svg');
  background-size: cover;
  background-repeat: no-repeat;
  width: 41.30vw;
  height: 4.73vw;
  
  
  border: none;
  outline: none;
  margin-bottom: 4.11vw;
  color: white;
  font-size: 1.44vw;
  font-weight: var(--fw-regular);
  font-family: var(--raj);
  padding-left: 2vw;
}

.contact-form form input[name="email"]{
  background-image: url('./img/email.svg');
  background-size: cover;
  background-repeat: no-repeat;
  width: 41.30vw;
  
  
  height: 4.73vw;
  
  
  border: none;
  outline: none;
   margin-bottom: 4.11vw;
  color: white;
  font-size: 1.44vw;
  font-weight: var(--fw-regular);
  font-family: var(--raj);
  padding-left: 2vw;
}


.contact-form form input[name="poruka"]{
  background-image: url('./img/poruka.svg');
  background-size: cover;
  background-repeat: no-repeat;
  width: 41.30vw;
  height: 4.73vw;
  
  border: none;
  outline: none;
   margin-bottom: 4.11vw;
  color: white;
  font-size: 1.44vw;
  font-weight: var(--fw-regular);
  font-family: var(--raj);
  padding-left: 2vw;
}

.contact-form button,.contact-form button img{
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  width: 25.91vw;
  height: 5.36vw;
  
}

.contact-form button{
  margin-left: 10vw;
}
footer{
  width: 100vw;
  text-align: center;
  margin-top: 0vw;
  height: 61.65vw;
  background-image: url('./img/footerbg.svg');
  background-size: cover;
  background-repeat: no-repeat;
}
footer .footer-logo-gold{
  width: 9.63vw;
  display: block;
  margin: auto;
  margin-top: 0vw;
 
}

footer .footer-golden-champ{
  width: 48.80vw;
  display: block;
  margin: auto;
  margin-top: 3.54vw;
 
}
.footer-h3{
  font-size: 2.49vw;
    font-family: var(--orb);
    font-weight: var(--fw-regular);
    color: white;
    margin: 0;
    
    margin-top: 1vw;
    width: 100vw;

}
.footer-kontaktiraj{
  width: 19.30vw;
  height: 2.76vw;
  margin: auto;
  margin-top: 4.42vw;

}

.footer-p{
  font-family: var(--orb);
  font-weight: 600;
  font-size: var(--d25);
  color: white;
  width: 43vw;
  margin: auto;
  margin-top: 4.42vw;
}
.footer-links{
  display: flex;
  justify-content: space-between;
  width: 43vw;
  margin: auto;
  margin-top: 4.42vw;
}
.footer-links a{
  text-decoration: none;
  font-family: var(--orb);
  font-weight: 400;
  color: white;
  font-size: 1.2vw;
}


.socials{
  width:17.95vw ;
  margin: auto;
  margin-top: 2.86vw;
  display: flex;
  gap: 2.03vw;
  margin-bottom: 5.91vw;

}


.about-main{
  width: 100vw;
  height: 52.50vw;
  background-image: url('./img/csvizualabout.svg');
  background-size: cover;
  background-repeat: no-repeat;
}

.container {
    width: 1200px;
    max-width: 100%;
    height: auto;
    margin: 0px auto;
    
}

    .unlimitedi {
        display: flex
;
        flex-wrap: wrap;
        margin-top: 1px;
        margin-bottom: 10px;
    }

    .about__page-block {
    flex-basis: 20%;
    margin-top: 7vw;
}

.about__page-block img {
    width: 80%;
}

    .about__page-block a {
        position: relative;
        z-index: 3;
        padding: 0px 4px;
        border: 2px solid #F3EA9E;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0.92px;
        line-height: 24px;
        text-transform: uppercase;
        margin-top: 0px;
        display: block;
        width: 73%;
        place-self: center;
        font-family: var(--orb);
        text-decoration: none;
    }
     .about__page-block a:hover{
      border: 2px solid white;
        color: black;
        background:#F3EA9E ;

     }












  @media screen and (max-width:900px){
      
      .hideall{
  display: none!important;
}


    .ds-version{
  display: none!important;
}
.mob-version{
  display: block;
  background-color:#0a0a0a ;
}

.header-mob .navigation{
  display: flex;
  justify-content: space-between;
  height: 17.91vw;
  background-color: black;
}

.mobile-header-logo{
  width: 7.44vw;
  margin-left: 8.60vw;

}

.mobile-header-hamburger{
  margin-right: 8.6vw;
  width: 5.58vw;
}
.hero-mobilna{
  width: 100vw;
}

.about-mobile{
  position: relative;
}
.about-mobile h1{
  font-size:4.23vw ;
  color: white;
  font-family: var(--orb);
  font-weight: bold;
  width: 45.35vw;
  margin: auto;
  margin-top: var(--m24);

}

.about-mobile p{
  font-size:3.72vw ;
  color: white;
  font-family: var(--raj);
  font-weight: 400;
  width: 74vw;
  margin: auto;
  margin-top: var(--m24);

}

.aboutsaraf{
  position:absolute;
  width: 34vw;
  top: -27vw;
  right: 0;
}

.aboutsarafblur{
position: absolute;
        width: 10.47vw;
        top: -13vw;
        right: 21vw;
 


}

.aboutmaticamobile{
        width: 30.47vw;
        position: absolute;
        left: -6vw;
        bottom: -31vw;


}

.card p {
    max-width: 65.26vw;
    width: 65.26vw;
    text-align: center;
    color: white;
    display: none;
    font-size: 3.26vw;
    margin-top: 5.46vw;
    font-family: var(--raj);
}

.slick-center .card {
    width: 34.47vw !important;
    height: 74.34vw !important;
    transform: scale(1);
    opacity: 1;
}

.slick-next{
      right: -4vw!important;
      top: 72vw!important;
     

}

.slick-prev{
    left: -4vw!important;
    top: 72vw!important;
    

}

.mobile-h{
  font-family: var(--orb);
  font-weight: bold;
  text-align: center;
  color: white;
  margin-top: 12vw;
  font-size: 4.24vw;
}
.slider{
  margin-top: 5vw;
  height:100vw;
}

.support {
  width: 67vw;
  margin: auto;
  height: 19.42vw;
  display: flex;
  align-items: center; /* centriranje vertikalno */
  
  overflow: hidden;
  position: relative;
  margin-top: 5vw;

}

.support-mask{
  background-image: url('./img/supportbgmobile.svg');
  background-size: cover;
   width: 73.26vw;
  margin: auto;
  height: 19.42vw;
  position: relative;
  
}

.slider-track {
  display: flex;
  animation: scroll 30s linear infinite;
  gap: 5vw;
}

.support .slider-track a img {
  height: 5.81vw;
  display: block;
  margin-top: 2vw;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.supportsarafmobile{
  position: absolute;
  width: 32.79vw;
  left: -13vw;
  top: 3vw;

}


footer {
    width: 100vw;
    text-align: center;
    margin-top: 0vw;
    height: 118.37vw;
    background-image: url(./img/footerbgmobile.svg);
    background-size: cover;
    background-repeat: no-repeat;
}


footer .footer-logo-gold {
    width: 14vw;
    display: block;
    margin: auto;
    margin-top: 0vw;
    padding-top: 7vw;
}

footer .footer-golden-champ {
    width: 72.79vw;
    display: block;
    margin: auto;
    margin-top: 5.54vw;
}

.footer-h3 {
    font-size: 3.72vw;
    font-family: var(--orb);
    font-weight: var(--fw-regular);
    color: white;
    margin: 0;
    margin-top: 3vw;
    width: 100vw;
}

.footer-kontaktiraj {
    width: 44vw;
    height: 7.21vw;
    margin: auto;
    margin-top: 4.42vw;
}

.footer-p {
    font-family: var(--orb);
    font-weight: 400;
    font-size: 3.26vw;
    color: white;
    width: 72.79vw;
    margin: auto;
    margin-top: 5.42vw;
}

.footer-links {
    display: block
;
    
    width: 100vw;
    margin: auto;
    margin-top: 4.42vw;
}


.footer-links a {
    text-decoration: none;
    font-family: var(--orb);
    font-weight: 400;
    color: white;
    font-size: 3.26vw;
    display: block;
    margin-bottom: 3vw;
}



.socials {
    width: 100vw;
    margin: auto;
    margin-top: 2.86vw;
    display: flex;
    justify-content: center;
    gap: 4.88vw;
    margin-top: 7vw;
    margin-bottom: 3.91vw;
}
.socials img{
  width: 6.98vw;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: -120%; /* skriveno izvan ekrana */
  width: 100%;
  height: 100vh;
  background: #0a0a0a;
  z-index: 999;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  transition: right 0.3s ease-in-out;
}

.mobile-menu.active {
  right: 0;
  width: 92vw;
}

.menu-header {
  display: flex;
  justify-content: flex-end;
  font-size: 2rem;
}

.menu-header span {
  cursor: pointer;
  font-size: 2.5rem;
  font-weight: bold;
  color: white;
}

.mobile-menu ul {
  list-style: none;
  padding: 2rem 0 0 2rem;
  margin: 0;
}

.mobile-menu ul li {
  margin-bottom: 1.5rem;
}

.mobile-menu ul li a {
  text-decoration: none;
  font-size: 1.3rem;
  color: white;
  font-family: var(--orb);
}
.header-mob{
  width: 100vw;


}





    





    









    

    
  }