*{margin: 0;
border: 0;
padding: 0;
text-decoration:none;}

html{max-width:100%;}

body { 
		background-color: #f2f2f2;
		background-position: center top;
		height:100px;
		width: 100vw;
		-webkit-background-size: cover;
		-moz-background-size:cover;
		background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: right;
		justify-content: right;
		align-items: right;}

.navbar-mobile {
	 overflow: none;
  background-color: none;
	padding: 0 0px;
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  margin: 0 auto 0px auto;
	display:none;}

.navbar {
  overflow: none;
  background-color: none;
	padding: 0;
  top: 0; /* Position the navbar at the top of the page */
  width: 1600px; /* Full width */
  height:120px;
  margin: 0 auto 60px auto;
}

.navbar ul li a {
  font-family:'Rajdhani', sans-serif;
font-weight:400;
font-size: 16px;
line-height: 100%;
color:#fff;
}

.language {margin-right: 20px;}

.language a {
float: right;
text-align: right;
font-family:'Rajdhani', sans-serif;
font-weight:400;
font-size: 16px;
line-height: 100%;
color:#fff;
padding: 0 10px;
margin-top: 30px;

}

.logo {float: left;}
.logo-mobile {float: left;
margin-left: 20px;}


.language a:hover{ opacity: 0.7;
text-decoration: none;
	
}
.container-main {width: 1600px;
  margin: auto;
  padding-bottom: 100px;
  color: #fff;}
  
.title-box {padding:0px 0 0 15px;
	
}


.text-box {
padding: 0px 56px 0px 3vw;}


.subtitle-box { height: 100%;
padding: 0px 0px 0px 0vw;
margin: 10px 0 10px 0;
background-color: #fff;
box-shadow:  
  0 6.7px 5.3px rgba(0, 0, 0, 0),
  0 6.5px 10px rgba(0, 0, 0, 0),
  0 6.3px 17.9px rgba(0, 0, 0, 0),
  0 6.8px 20px rgba(0, 0, 0, 0.055),
  0 100px 40px rgba(0, 0, 0, 0.0);}


a:hover {text-decoration:none;}	


.image-displayed {
	background-image: url(images/polepitev-vozil-img.jpg);
		background-repeat: no repeat;
		background-position: center right;
		background-attachment: none;
		height:250px;
		width: 100%;
		-webkit-background-size: cover;
		-moz-background-size:cover;
		background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: right;
		justify-content: right;
		align-items: right;
			background-color: #323232;
			margin-top: 30px;}


.image-displayed-oznacevalne-table {
	background-image: url(images/oznacevalne-table-img.png);
		background-repeat: no repeat;
		background-position: center right;
		background-attachment: none;
		height:250px;
		width: 100%;
		-webkit-background-size: cover;
		-moz-background-size:cover;
		background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: right;
		justify-content: right;
		align-items: right;
			background-color: #323232;margin-top: 30px;}




.image-displayed-nalepke {
	background-image: url(images/nalepke-img.png);
		background-repeat: no repeat;
		background-position: center right;
		background-attachment: none;
		height:250px;
		width: 100%;
		-webkit-background-size: cover;
		-moz-background-size:cover;
		background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: right;
		justify-content: right;
		align-items: right;
			background-color: #323232;margin-top: 30px;}





#hover-box:hover {
box-shadow:  
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.0);
  margin: 0 0 70px 0;	
}
/*IMAGE hover effect*-START*/

#hover-box {
        position: relative;
        width: auto;
        height: auto;
		display: block; }





/*IMAGE hover effect*-END*/


.pillar-mobile{display:none;
width: 100vw;}

/***********************BLOCKS*********************************/
.block.banner {
	position:relative;
	width:100%;
	margin-top:0px;
	height:300px;
	padding:0px 0;}	

.block.product-title {
	position:relative;
	width:100%;
	margin-top:0px;
	height:auto;
	padding:0px 0;
	background-color: #231f20;}	
		
.block.bannerpillar {
	position:relative;
	width:100%;
	background: url(images/header-tech.jpg);
		background-repeat: no repeat;
	background-attachment: fixed;
	margin-top:0px;
	height:50%;
	padding: 12% 0;}	
	
	
.block.bannerpillarsc {
	position:relative;
	width:100%;
	background: url(images/sc-header-tech.jpg);
		background-repeat: no repeat;
	background-attachment: fixed;
	margin-top:0px;
	height:50%;
	padding: 12% 0;}	
	
		
.block.usability {
	position:relative;
	width:100%;
	background-color: #fff;	
	padding: 0 0 60px 0;}
	
	.block.ref {
	position:relative;
	width:100%;
	background-color: #fff;	
	padding: 0 0 0 0;}


#feautures-title{ 
color: #FFFFFF;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 140%;
    margin-top: 70px;
    margin-bottom: 40px;
    padding-bottom: 8px;
    border-bottom: 3px solid #0e4b99;
    display: block; /* Ensures it takes full width */
    width: fit-content; /* Makes the width fit the content, so it's based on text width */
    margin-left: auto; /* Centers the element horizontally */
    margin-right: auto; /* Centers the element horizontally */
text-align: center; /* Centers the text inside the element */}



	
.feautures-text{font-family: 'Rajdhani', sans-serif;
line-height: 24px;
font-size: 22px;
text-align: left justify;
font-weight: 400;
padding-bottom: 10px;
padding-top: 10px;
color:#FFFFFF;

}
.feautures-text-center{font-family: 'Rajdhani', sans-serif;
line-height: 36px;
font-size: 28px;
text-align: center;
font-weight: 400;
padding-bottom: 10px;
padding-top: 10px;
color:#FFFFFF;

}


	
.block.feautures {
	position:relative;
	width:100vw;
	background: url(images/basalt.jpg);
	background-repeat: no repeat;
	background-position: center center;
	margin-top:0px;
	height:900px;
	padding: 80px 0;}	
	
	
	.block.feauturesmobile {display:none;
	position:relative;
	width:100vw;
	background-color: #231f20;
	margin-top:0px;
	height:900px;
	padding: 20px 0;}	
	
	

.block.feautures1 {
	position:relative;
	width:100vw;
		background: url(images/basalt2.jpg);
	background-repeat: no repeat;
	background-position: top center;
	margin-top:0px;
	height:900px;
	padding: 80px 0;}	
	
	
	.block.feautures1mobile {display: none;
	position:relative;
	width:100vw;
	background-color: #231f20;
	margin-top:0px;
	height:900px;
	padding: 20px 0;}	
	
	.block.feautures2 {
	position:relative;
	width:100vw;
	background: url(images/delta2.jpg);
	background-repeat: no repeat;
	background-position: top center;
	margin-top:0px;
	height:1000px;
	padding: 20px 0 300px 0;}

	.block.feautures2mobile {display:none;
	position:relative;
	width:100vw;
	background-color: #231f20;
	margin-top:0px;
	height:1000px;
	padding: 20px 0 20px 0;}	
		
	
	
	.block.alpha {
	position:relative;
	width:100vw;
	background: url(images/alpha.jpg);
	background-repeat: no repeat;
	background-position: center center;
	margin-top:0px;
	height:900px;
	padding: 80px 0;}	
	
	.block.alphamobile {display:none;
	position:relative;
	width:100vw;
	background-color: #231f20;
	margin-top:0px;
	height:900px;
	padding: 80px 0;}	
	
	
		
	.block.alpha1 {
	position:relative;
	width:100vw;
	background: url(images/alpha2.jpg);
	background-repeat: no repeat;
	background-position: top center;
	margin-top:0px;
	height:900px;
	padding: 20px 0 300px 0;}	
	
	.block.alpha1mobile {display:none;
	position:relative;
	width:100vw;
	background-color: #231f20;
	margin-top:0px;
	height:900px;
	padding: 20px 0 20px 0;}	
	
	
	
	
	
	.block.eta {
	position:relative;
	width:100vw;
	background: url(images/eta.jpg);
	background-repeat: no repeat;
	background-position: center center;
	margin-top:0px;
	height:900px;
	padding: 80px 0;}	
	
	.block.etamobile {display:none;
	position:relative;
	width:100vw;
	background-color: #231f20;
	margin-top:0px;
	height:900px;
	padding: 20px 0 300px 0;}	
	
	
	.block.eta1 {
	position:relative;
	width:100vw;
	background: url(images/eta2.jpg);
	background-repeat: no repeat;
	background-position: top center;
	margin-top:0px;
	height:900px;
	padding: 20px 0 300px 0;}	

	.block.eta1mobile {display:none;
	position:relative;
	width:100vw;
	background-color: #231f20;
	margin-top:0px;
	height:900px;
	padding: 20px 0 20px 0;}	
	
	
	.block.feauturessc {
	position:relative;
	width:100%;
	background: url(images/sc-banner-features.jpg);
	background-repeat: no repeat;
	background-position: center center;
	margin-top:0px;
	height:800px;
	padding: 80px 0;}	
	
.block.night {
	position:relative;
	width:100vw;
	background: url(images/delta.jpg);
	background-repeat: no repeat;
	background-position: center center;
	margin-top:0px;
	height:900px;
	padding: 80px 0;}	
	
	
	.block.nightmobile {
	display:none;
	position:relative;
	width:100vw;
	background-color: #231f20;
	margin-top:0px;
	height:auto;
	padding: 80px 0;}	
	
	
.block.nightsc {
	position:relative;
	width:100%;
	background: url(images/sc-night1.png);
	background-repeat: no repeat;
	background-position: center center;
	margin-top:0px;
	height:760px;
	padding: 80px 0;}	
	
	

.block.nightx {
	position:relative;
	width:100%;
	background: url(images/bike2.png);
	background-color: #f8f8f8;
	background-repeat: no repeat;
	background-position: center center;
	height:500px;
	margin: 0 auto;}	
	
	
.block.technical {
	position:relative;
	width:100%;
	background: #fff;
	background-repeat: no repeat;
	background-position: center center;
	margin-top:0px;
	height:900px;
	padding: 80px 0 0 0;}	

.icon{padding: 0 10px 0 10px;
width: 48px;}	
	
.icons{margin-bottom: 100px;}	


/***********************BLOCKS-END*********************************/	

/*Btn hover effect*-START*/

    #hover-box {
        position: relative;
        width: auto;
		display: block;
    }

   .btn {font-family:'Rajdhani', sans-serif;
		font-weight:700;
		font-size: 14px;
		letter-spacing: 2px;
       
		color: #0E4B99;
        bottom: 56px;
        left: 56px;
        padding: 12px 16px 10px 16px;
		border: solid 1px #0E4B99;
        background: none;
        text-decoration: none;
        text-align: center;

    }



/*Btn hover effect*-END*/












.icons {}


.icons-mobile {display:none;
padding: 60px 56px 32px 56px;
}


h1{text-align: left;
font-family:'Rajdhani', sans-serif;
font-weight:400;
font-size: 56px;
line-height: 100%;
color:#242424;
padding:0 0 15px 0;
margin-top: 0px;
margin-bottom: 0px;}

.light {text-align: center;
color: #0e4b99;}

h2{text-align: left;
font-family:'Rajdhani', sans-serif;
font-weight:700;
font-size: 19px;
line-height: 24px;
color:#0E4B99;
letter-spacing: 1px;
padding:0;
margin-top: 0px;
margin-bottom: 0px;}

.black {color:#242424;
	
}

h3{text-align: left;
font-family:'Rajdhani', sans-serif;
font-weight:400;
font-size: 19px;
line-height: 24px;
color:#fff;
letter-spacing: 1px;
padding:0;
margin-top: 0px;
margin-bottom: 0px;}

p{text-align: left;
font-family:'Rajdhani', sans-serif;
font-weight:400;
font-size: 18px;
line-height: 22px;
color:#242424;
letter-spacing: 2px;
padding:0 0 5px 0;
margin-top: 0px;
margin-bottom: 0px;}





.footer-mobile {display: none;}

.footer-mobile {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 64px;
  background-color: #0e4b99;
  padding:15px 24px 15px 24px;
}

.footer-mobile ul li{display: inline;
  text-align: left;
font-family:'Rajdhani', sans-serif;
font-weight:700;
font-size: 18px;
line-height: 22px;
}




.footer-mobile a{
 text-align: left;
font-family:'Rajdhani', sans-serif;
font-weight:700;
font-size: 18px;
line-height: 22px;
color:#efefef;
letter-spacing: 2px;

}




						 
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 64px;
  background-color: #0e4b99;
  padding:15px 24px;
 }

.footer ul li{display: inline;
  text-align: left;
font-family:'Rajdhani', sans-serif;
font-weight:700;
font-size: 18px;
line-height: 22px;
color:#efefef;
  padding:0 50px 0 0;
}

.footerright {float: right;}

.footer a{
 text-align: left;
font-family:'Rajdhani', sans-serif;
font-weight:700;
font-size: 18px;
line-height: 22px;
color:#efefef;
letter-spacing: 2px;

}

.footer a:hover{
opacity: 0.7;
text-decoration: none;

}

/**********************MENU*********************************/
.menu-collapsed {
	transition:all .25s;
	position:fixed;
	top:90vh;
	left:0vw;
	height:64px;
	width:420px;
	z-index:1;
	cursor:pointer;
	display:none;}



.menu-collapsed ul {
      transition:all .05s;
      position:fixed;
      left:-9000px;
    }


.menu-collapsed .bar {
    position:fixed;
     left:85vw;
    top:90vh;
    height:0px;
    width:32px;
    border-radius:50px;
  background-color:none;}

.has-top-banner .menu-collapsed .bar {
	top: 84px;
	}
	


.menu-collapsed .bar:before {
      transition:all .25s;
      content:"";
      position:fixed;
     left:86vw;
      bottom:24px;
      height:14px;
      width:3px;
      border-radius:80px;
      background-color:#fff;
	  transform: rotate(45deg);
    }


.menu-collapsed .bar:after {
      transition:all .25s;
      content:"";
      position:fixed;
     left:86vw;
      bottom:24px;
      height:14px;
      width:3px;
	  margin-left:8px;
      border-radius:80px;
      background-color:#fff;
	  transform: rotate(-45deg)
    }



.menu-expanded {
  transition:all .25s;
  text-align:left;
  line-height:350%;
  margin-bottom:0;
  height:100%;
  width:100%;
  border-radius:0px;
  top:40vh;
  left:0;
background-color:#0e4b99;
opacity:1;
}





.menu-expanded .bar {
    background-color:transparent;
  transition:all .25s;

}

.menu-expanded .bar:before {
      transition:all .25s;
      content:"";
      transform:rotate(-45deg);
      bottom:28px;
	     background-color:#fff;
    }
.menu-expanded .bar:after {
      transition:all .25s;
      content:"";
      transform:rotate(45deg);
      bottom:28px;
	     background-color:#fff;
    }




.menu-expanded ul {

    transition:all .05s;
    position:relative;
    left:0px;
    z-index:2;
	padding-top: 30px;
	margin:0;
  }


.menu-expanded ul li  {
    transition:all .15s;
    text-decoration:none;
	text-align:left;
    color:#fff;
    font-size:18px;
	font-weight: 700;
	line-height: 250%;
    font-family: 'Rajdhani', sans-serif;
	letter-spacing: 0px;
	padding: 10px 40px;
	display: block;}


.menu-expanded ul li a {
    transition:all .15s;
    text-decoration:none;
	font-weight: 400;
    color:#fff;
	display: block;}

.menu-expanded li a:hover {
      transition:all .15s;

    }




/***********************NAV-mobile-END*********************************/
.arrow {
    position:relative;
	margin-top:0px;
	margin-left: 8px;
content:"";
    height:3px;
    width:16px;
    border-radius:50px;
  background-color:#fff;
}

 


.arrow:after{
    position:relative;
	margin-top:0px;
	margin-right: 8px;
content:"";
    height:3px;
    width:16px;
    border-radius:50px;
  background-color:#fff;
  transform:rotate(-45deg);
}

img {
    width: 100%; /* Ensures the image fits the width of its container */
    max-width: 100vw; /* Prevents the image from being larger than the viewport */
}







/*****************POP-UP**************************/


.bg-popup {width: 100%; height: 100%;
background-color: rgba(0,0,0, 0.7);
position: absolute;
top:0;
z-index: 1;
display:flex;
justify-content: center;
align-items: center;
display:none;
}

.popup {width: 740px;
height: 550px;
background-color: #fff;
border-radius: 4px;
text-align: center;
position:relative;
padding: 20px;}

input { width: 280px;
background-color: #f2f2f2;
height: 56px;
padding: 16px 12px 0 12px;
font-family: 'Rajdhani', sans-serif;
margin: 20px 20px;
border-radius:0;
	
}

.btnpop {
border: solid 2px #0e4b99;
font-family: 'Rajdhani', sans-serif;
font-size:16px;
font-weight: 700;
color: #0e4b99;
padding: 8px 20px 6px 20px;
width:100px;
text-align:center;
margin-top:50px;}


.btnpop:hover {opacity:0.7; text-decoration:none;}

.popup-image {margin:20px 0 40px 0; }

.close {position:absolute;
	font-family: 'Rajdhani', sans-serif;
font-weight: 400;
font-size: 36px;
color: #282828;
transform: rotate(45deg);
margin: 20px;
line-height:50%;
top:12px;
right:12px;
cursor: pointer;}




textarea {width:600px;
vertical-align: top;
background-color: #f2f2f2;
padding: 16px 12px 0 12px;
font-family: 'Rajdhani', sans-serif;
margin: 20px 0px 50px 0px;}



.blue {color:#787878;
text-align: center;
font-weight: 400;
margin-bottom:20px;}













/*mobile addaptive homepage**********************************************************************************
******************************************************************************
*********************************************************************
*****************************************************************************************************
********************************************************************************************/

/***************************************************/
/************** SCREEN MAX 765 ********************/
/***************************************************/


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


.text-box {
padding: 0px 56px 0px 10vw;}
}


#hover-box-mobile: {
box-shadow:  
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.0);
  padding: 0px 0;	
}
/*IMAGE hover effect*-START*/

#hover-box-mobile {display: none;
        position: relative;
        width: auto;
        height: auto;
		display: block; }


   




/*IMAGE hover effect*-END*/

/*Btn hover effect*-START*/

    #hover-box {
        position: relative;
        width: auto;
        height: auto;
		display: block;
    }

 .btn{
		font-family:'Rajdhani', sans-serif;
		font-weight:700;
		font-size: 14px;
		letter-spacing: 2px;
        opacity: 1;
        bottom: 10px;
        left: 10px;
        padding: 0;
		border: none;
		border-radius:0;
        color: #0E4B99;
        background: none;
        text-decoration: none;
        text-align: center;
        
        
    }



/*Btn hover effect*-END*/









































/***************************************************/
/************** SCREEN MAX 1400 ****START***********/
/***************************************************/

@media screen and (max-width: 1400px) {
	
	.container-main {width: 1140px;
  margin: auto;}
  
  .navbar {
  width: 1140px; /* Full width */
}
  
}



/***************************************************/
/************** SCREEN MAX 1024 ****START***********/
/***************************************************/

@media screen and (max-width: 1024px) {
	
.container-main {width: 980px;
  margin: auto;}
  
 .navbar {
  width: 980px; /* Full width */
}

h1{
font-size: 44px;
}



 
 .navbar {
  margin: 0 auto 40px auto;
}

.navbar {display:none;}
.navbar-mobile{display:inline;}



/***************************************************/
/************** SCREEN MAX 1024 ****END*************/
/***************************************************/






/***************************************************/
/************** SCREEN MAX 800 ****START************/
/***************************************************/

@media screen and (max-width: 800px) {
	
.container-main {width: auto;
  margin: auto;}
  
 .navbar {display:none;}
 .navbar-mobile {display: inline;}
 .footer {display:none;}
 .footer-mobile {display: inline;}
 
 h1{font-size: 40px;
 padding: 0 0 5px 0;}


h2{
font-size: 16px;
}

p{
font-size: 16px;
}

  
.title-box {padding:24px 0 0 24px;}
.box {display:none;}
.box-mobile {display: inline;}


.subtitle-box { height: 80px;
padding: 0px 32px 0px 32px;}


#hover-box .details{
        opacity: 0; }
#hover-box:hover .details {
        opacity: 1; }



.navbar-mobile {display:inline;}

    #hover-box .btn{left: 34px;}
	
	.menu-collapsed {display:inline;}

.col-md-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 100%;
    max-width: 100%;}
	
	
.menu-collapsed .bar {
    position:fixed;
     left:85vw;
    top:90vh;
    height:0px;
    width:32px;
    border-radius:50px;
  background-color:none;}

.has-top-banner .menu-collapsed .bar {
	top: 84px;
	}
	


.menu-collapsed .bar:before {
 left:88vw; }


.menu-collapsed .bar:after {
     left:88vw;
    }

 

}

/***************************************************/
/************** SCREEN MAX 768 ***END**************/
/***************************************************/



/***************************************************/
/************** SCREEN MAX 420 ****START************/
/***************************************************/

@media screen and (max-width: 420px) {
	
.container-main {width: 100%;
max-width:100px;
  margin: auto;}
  
 .navbar {display:none;}
 .navbar-mobile {display: inline;}
 .footer {display:none;}
 .footer-mobile {display: inline;}
 
.block.feautures {height:auto;}	
	
.block.night {height:auto;}	

.pillar-mobile{display:inline;}

.block.feauturesmobile {display:inline;
height:auto;}
.block.feautures {display:none;}

.block.feautures1mobile {display: inline;}
.block.feautures1 {display: none;}
.block.nightmobile {display: inline;}
.block.night {display: none;}

.block.feautures2{display: none;}
.block.feautures2mobile{display: inline;}

.block.alpha{display: none;}
.block.alphamobile{display: inline;}
 
 .block.alpha1{display: none;}
 .block.alpha1mobile {display: inline;}

.block.eta {display: none;}
.block.etamobile {display: inline;}


.block.eta1 {display: none;}
.block.eta1mobile {display: inline;}

}

/***************************************************/
/************** SCREEN MAX 400 ***END**************/
/***************************************************/