*{box-sizing:border-box;}

html, body {
  overflow-x: hidden;
}

body{padding:0px;
	margin:0px;
	font-family: 'Open Sans', sans-serif;}

img{max-width:100%;
	height:auto;}
	
background{max-width:100%;
	height:auto;}
	
a{color:#ffffff;
	text-decoration:none;}
	
a:hover{color:goldenrod;
	transition: 0.6s ease;}
	
html{scroll-behavior:smooth;}

h1{font-size:2rem;}

@font-face {
  font-family: 'Surgena';
  src: url('fonts/Surgena.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;}




	/* ******************************************************************************************************************** */
	
	/* PAGE LAYOUT - raspored glavnih elemenata *************************************************************************** */

.grid_container{display:grid;
	min-height:100vh;
	/*min-width:100vw;*/}
	/*grid-template-rows:auto 1fr auto auto;
	grid-template-columns:1fr minmax(280px,1200px) 1fr;*/
	
	
	
	
	/* UREĐIVANJE ELEMENATA STRANICE ************************************************************************************** */
	
	/* PAGE HEADER ******************************************************************************************************** */
	
.page_header{width:100%;
	height:auto;
	display:grid;
	grid-column:1/4;
	padding:0px;
	margin:0px;}
	
.page_header_gdpr{min-height:30vh;
	display:grid;
	grid-column:1/4;
	background-image:url(images/pocetna/pocetna_header_image.jpg);
	background-size:cover;
	padding:0px;
	margin:0px;}
	
	
	
	
	
.header_background_image{width:100vw;
	position:relative;
	min-height:auto;
	aspect-ratio: 48 / 23;
	display:grid;
	grid-column:1/4;
	background-image:url(images/pocetna/pocetna_header_image.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center top;
	padding:0px;
	margin:0px;}

.o_nama_header_background_image{width:100vw;
	min-height:auto;
	aspect-ratio: 48 / 23;
	display:grid;
	grid-column:1/4;
	background-image:url(images/onama/onama_header_image.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center top;
	padding:0px;
	margin:0px;}
	
.usluge_header_background_image{width:100vw;
	min-height:auto;
	aspect-ratio: 48 / 23;
	display:grid;
	grid-column:1/4;
	background-image:url(images/usluge/usluge_header_image.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center top;
	padding:0px;
	margin:0px;}
	
.kontakt_header_background_image{width:100vw;
	min-height:auto;
	aspect-ratio: 48 / 23;
	display:grid;
	grid-column:1/4;
	background-image:url(images/kontakt/kontakt_header_image.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center top;
	padding:0px;
	margin:0px;}
	
#header_background_image_gdpr{height:0px;
	background-image:none;
	display:grid;
	grid-column:1/4;
	padding:0px;
	margin:0px;}
	
	
	
	
	
.nav_btn{display:none;}


.site_navigation{display:grid;
	/*justify-content:center;*/
	background-color:#000000;
	grid-template-columns:1fr 0.1fr 1fr;
	padding:0px;
	margin:0px;
	color:white;
	height:6vw;}
	
.site_navigation p{margin:0;
	padding-left:10%;
	display:flex;
	align-items:center;
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	font-size:16px;
	color:#ffffff;}
	
.site_navigation nav{margin:0;
	padding-right: 10%;
	display:flex;
	align-items:center;
	list-style-type:none;
	justify-content:right;}
	
.site_navigation nav ul{display:flex;
	grid-gap:50px;
	list-style-type:none;
	padding:0px;
	margin:0px;
	overflow:hidden;
	justify-content:right;
	min-width:100%;}
	
.site_navigation nav ul li{font-family: 'Open Sans', sans-serif;
	font-weight:400;
	font-size:16px;
	color:#004261;
	white-space:nowrap;}
	
.header_logo{padding-left:10%;
	display:flex;
	align-items:center;
	height:auto;
	width:50%;}
	
.responsive_img{width:auto;
		height:auto;}
	
.dropdown li{position:relative;
	display:inline-block;
	color:#ffffff;}
	
#dropbtn{color:#ffffff;}
	
.dropdown_content{display:none;
	position:absolute;
	background-color:white;
	width:80px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	text-align:left;}
	
.dropdown_content a{color:black;			/* linkovi unutar dropdowna */
	padding:12px 16px;
	text-decoration:none;
	display:block;
	background-color:white;}
	
.nav_btn{display:none;
	color:white;}
	
.dropdown_content a:hover {background-color:#ddd;}
.dropdown:hover .dropdown_content{display:block;}
	
	
.header_image_text{color:white;
	font-family: 'Open Sans', sans-serif;
	text-align:left;
	padding-left:10%;
	position:absolute;
	top:50%;
	-ms-transform: translateY(-70%);
	transform: translateY(-50%);}
	
#header_image_text_1{font-size:550%;
	text-shadow:2px 2px 8px #000000;}
#header_image_text_1b{display:none}
	
	
#menu_icons{display:flex;
	grid-gap:20px;
	list-style-type:none;
	padding:0px;
	margin:0px;
	overflow:hidden;
	justify-content:right;}
	

	
	
	
	


	
	
	/* PRIMARY ************************************************************************************************************ */

.primary{display:grid;
	grid-column:1/4;
	grid-template-columns:1fr minmax(280px,800px) 1fr;
	/*min-height:100vh;*/
	margin:0px;
	padding:0px 0px 0px 0px;
	background-color:#073D29}
	
.primary_gdpr{display:grid;
	grid-column:1/4;
	/*grid-template-columns:1fr minmax(280px,800px) 1fr;*/
	min-height:100vh;
	margin:0px;
	padding:0% 20% 0% 20%;
	background-color:#073D29;
	text-align:center;}
	
.primary_text{/*grid-column:2/3;*/
	text-align:center;
	margin:0px;
	padding:140px 0px 140px 0px;
	color:#ffffff;
	/*font-weight:bold;*/
	grid-row:1;
	grid-column:2;}
	
.primary_text h1{color:#B7B7B7;
	font-family: 'Surgena', sans-serif;
	margin-bottom: 0.0em;}
.primary_text h2{color:#B7B7B7;
	margin-top:0px;}

.main_image{justify-content:center;
	grid-row:2;
	grid-column:2;
	text-align:center;
	margin-bottom:20%}
	
	
	
	
	
	
	
.primary_usluge{grid-column:1/4;
	text-align:center;
	background-color:#073D29;
	margin:0px;}
	
.primary_usluge_grid{display:grid;
	grid-template-columns:repeat(2,1fr);
	margin:0px 150px 0px 150px;}

.primary_usluge_article{display:block;
	/*background-color:#ffffff;*/
	margin:30px 50px 30px 50px;
	padding:20px;
	color:#ffffff;}

.primary_usluge_article img{margin-bottom:4%;}
	
#naslov_article{color:#ffffff;}



.contact_info{display:grid;
	grid-column:2/3;
	grid-template-columns:repeat(2,1fr);
	margin:0%;
	padding:0% 0% 20% 0%;}
	
.contact_text_container{
	margin:0px;
	padding:0px;
	color:#ffffff;}
	
.contact_text{display:flex;
	/*align-items:center;*/
	grid-template-columns:repeat(2,1fr);
	gap:30px;}
	
.contact_text img{width:42px;
	height:42px;
	margin-bottom:20px;}
	
.contact_text p{align-items:flex-start;
	margin:0px;
	padding:0px;}



.contact_form{display:grid;
	margin:0%;
	padding:0%;
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	font-size:20px;}
	
input{background-color:#ffffff;
	width:100%;
	padding:5px 16px;
	border:0px;
	border-radius:16px;
	border-color:#000000;
	margin-bottom:10px;}

#ime{background-color:#ffffff;
	width:100%;
	padding:12px 16px;
	border:0px;
	border-radius:12px;
	border:1px solid black;
	margin-bottom:15px;
	color:#8E8E8E;}
	
#e-mail{background-color:#ffffff;
	width:100%;
	padding:12px 16px;
	border:0px;
	border-radius:12px;
	border:1px solid black;
	margin-bottom:15px;
	color:#8E8E8E;}
	
#telefon{background-color:#ffffff;
	width:100%;
	padding:12px 16px;
	border:0px;
	border-radius:12px;
	border:1px solid black;
	margin-bottom:15px;
	color:#8E8E8E;}
	
#predmet{background-color:#ffffff;
	width:100%;
	padding:12px 16px;
	border:0px;
	border-radius:12px;
	border:1px solid black;
	margin-bottom:15px;
	color:#8E8E8E;}
	
#mtext{background-color:#ffffff;
	width:100%;
	padding:12px 16px;
	border:0px;
	border-radius:12px;
	border:1px solid black;
	margin-bottom:15px;
	color:#8E8E8E;}
	
#info{width:auto;}
	
#button_kontakt{background-color:#B7B7B7;
	width:50%;
	color:#000000;
	padding:10px;
	font-size:100%;
	font-family: 'Open Sans', sans-serif;
	border:none;
	border-radius:15px;
	transition-duration:0.4s;}
#button_kontakt:hover{background-color:#9B9B9B;
	cursor:pointer;}

	
	
	
	
	
	
	
	/* SECONDARY ************************************************************************************************************ */


	
	
	
	/* FOOTER ************************************************************************************************************ */	
	
.page_footer{display:grid;
	grid-column:1/4;
	grid-template-columns:1fr 1fr;
	padding-top:2%;
	padding-bottom:2%;
	color:#ffffff;
	background-color:#000000;}
	
.footer_menu_left{margin-left:30%;}

.footer_menu_right{text-align:right;
	margin-right:30%;}
	
.footer_menu{list-style-type:none;}
	
#footer_link{color:#ffffff;}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/* RWD **************************************************************************************************************** */
	/* RWD **************************************************************************************************************** */
	/* RWD **************************************************************************************************************** */
	/* RWD **************************************************************************************************************** */

@media(max-width:1900px){
	.header_logo{display:flex;
		align-items:center;
		text-align:center;
		justify-content:center;
		width:50%;
		height:auto;}
	
	.responsive_img{width:100%;
		height:auto;
		max-width:200px;}
		
	.primary_usluge_grid{grid-template-columns:repeat(2,1fr);
		grid-gap:50px;}
		html, body {
	  overflow-x: hidden;}

@media(max-width:1800px){
	.header_logo{display:flex;
		align-items:center;
		text-align:center;
		justify-content:center;
		width:50%;
		height:auto;}
	
	.responsive_img{width:100%;
		height:auto;
		max-width:180px;}
	
	.primary_usluge_grid{grid-template-columns:repeat(2,1fr);
		grid-gap:50px;}
		html, body {
	  overflow-x: hidden;}

@media(max-width:1600px){
	.header_logo{display:flex;
		align-items:center;
		text-align:center;
		justify-content:center;
		width:50%;
		height:auto;}
	
	.responsive_img{width:100%;
		height:auto;
		max-width:150px;}
			
	#header_image_text_1{display:none;}
	#header_image_text_1b{display:block;
		font-size:400%;
		font-weight:900;
		margin:0px;
		padding:0px;
		text-align:left;
		text-shadow:2px 2px 8px #000000;}
	
	.primary_usluge_grid{grid-template-columns:repeat(2,1fr);
		grid-gap:50px;}
		html, body {
	  overflow-x: hidden;}
	  
@media(max-width:1200px){
	.header_logo{display:flex;
		align-items:center;
		text-align:center;
		justify-content:center;
		width:50%;
		height:auto;}
	
	.responsive_img{width:100%;
		height:auto;
		max-width:100px;}
	
	.site_navigation nav ul{grid-gap:30px;}
	
	.site_navigation{display:grid;
		grid-template-columns:1fr 0.001fr 1fr;}
		
	#header_image_text_1{display:none;}
	#header_image_text_1b{display:block;
		font-size:300%;
		font-weight:900;
		margin:0px;
		padding:0px;
		text-align:left;
		text-shadow:2px 2px 8px #000000;}
	
	.primary_usluge_grid{grid-template-columns:repeat(2,1fr);
		grid-gap:50px;}
		html, body {overflow-x: hidden;}
	  
}

@media(max-width:900px){
	.header_logo{display:flex;
		align-items:center;
		text-align:center;
		justify-content:center;
		width:50%;
		height:auto;}
		
	.responsive_img{width:100%;
		height:auto;
		max-width:200px;}
	
	
	
	.primary_usluge_grid{grid-template-columns:repeat(2,1fr);
	grid-gap:50px;}
	html, body {
  overflow-x: hidden;
}
}

@media(max-width:600px){
	.header_logo{display:flex;
		align-items:center;
		text-align:center;
		justify-content:center;
		width:50%;
		height:auto;}
		
	.responsive_img{width:100%;
		height:auto;
		max-width:200px;}
	
	.primary_usluge_grid{grid-template-columns:repeat(1,1fr);
	grid-gap:50px;}
	html, body {
  overflow-x: hidden;
}
}

@media(max-width:900px){
	.content_columns_kontakt{grid-template-columns:repeat(1,1fr);
	padding:0px;
	margin:0px;}
	html, body {
  overflow-x: hidden;
}	
}





@media(min-width:901px){
	.site_navigation ul{display:row !important;}
	.page_footer{display:grid;}
	#page_footer_grid_2{display:none;}					/* ovo je da se vertikalni mobilni footer ne pokazuje na desktopu */
	#menu_icons_mob{display:none;}						/* ovo je da se ikone za društvene mreže u mobilnom obliku ne pokazuju na desktopu */
	
}


@media(max-width:900px){
	
/* ************************************** MOBILNA VERZIJA --- PAGE HEADER ************************************** */	
	*{box-sizing:border-box;}
	html, body {overflow-x: hidden;}
	
	.page_header{width:100%;
		height:auto;
		display:grid;
		grid-column:1/4;
		padding:0px;
		margin:0px;}
	
	.page_header ul{grid-template-columns:1fr;
							display:none;}
		
	.site_navigation ul{grid-template-columns:1fr;
							display:none;}
	
	.header_logo{display:flex;
		align-items:center;
		width:50%;
		height:auto;
		margin:0px;
		padding:0px;}
		
	.responsive_img{width:100%;
		height:auto;
		max-width:200px;}
		
	/*.empty_space{display:none;}*/
							
							

	
	.site_navigation{background-color:#000000;
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		width:100%;
		height:25vh;
		margin:0px;
		padding:0px;
		position:relative;
		min-height:15vh;}
		
	.site_navigation p{display:none;
		margin:0px;
		padding:0px;}
		
	.site_navigation nav{padding:0px;}
	
	.site_navigation nav ul{display:none;
		margin:0px;
		padding:0px;}
		
	.nav_btn{display:flex;
		margin:0px;
		padding:0px;
		justify-content:center;
		text-align:center;
		color:#ffffff;
		font-size:200%;}
		
		
	.header_menu {
		position: absolute;
		top:100%;					/* kad je 100%, onda padajući izbornik uvik ide ispod hamburger menija! */
		left: 0;
		width: 100%;
		z-index: 1000;
		list-style-type: none;
		padding: 0px;
		margin: 0px;
		background-color: #000000;}
		
	.header_menu.active{display:flex;}
		
	.site_navigation nav ul li {
        padding: 16px 0;  /* Space between items */
        margin: 0;
        display: flex;  /* Flexbox for li */
        justify-content: center;  /* Center each individual list item */
        align-items: center;  /* Vertically align list items */
        width: 100%;  /* Ensure li spans the full width */}
		
	.dropdown{display:none;}
	/* ovo zadnje je dodano jer se iz nekog razloga bez ovoga u izborniku u mobilnoj verziji pojavljuje veći razmak između stavki koje imaju dodatni dropdown menu */
	
	
	#menu_icons{display:none;}
	
	
	
	
	
	
	.header_background_image{width:100vw;
		position:relative;
		min-height:auto;
		aspect-ratio: 1 / 1;
		display:grid;
		grid-column:1/4;
		background-image:url(images/pocetna/pocetna_header_mobile.jpg);
		background-repeat:no-repeat;
		background-size:cover;
		background-position:center top;
		padding:0px;
		margin:0px;
		overflow-x:hidden;} /* ************************************************* */

	.o_nama_header_background_image{width:100vw;
		min-height:auto;
		aspect-ratio: 1 / 1;
		display:grid;
		grid-column:1/4;
		background-image:url(images/onama/onama_header_mobile.jpg);
		background-repeat:no-repeat;
		background-size:cover;
		background-position:center top;
		padding:0px;
		margin:0px;}
		
	.usluge_header_background_image{width:100vw;
		position:relative;
		min-height:auto;
		aspect-ratio: 1 / 1;
		display:grid;
		grid-column:1/4;
		background-image:url(images/usluge/usluge_header_mobile.jpg);
		background-repeat:no-repeat;
		background-size:cover;
		background-position:center top;
		padding:0px;
		margin:0px;
		overflow-x:hidden;}
		
	.kontakt_header_background_image{width:100vw;
		min-height:auto;
		aspect-ratio: 1 / 1;
		display:grid;
		grid-column:1/4;
		background-image:url(images/kontakt/kontakt_header_mobile.jpg);
		background-repeat:no-repeat;
		background-size:cover;
		background-position:center top;
		padding:0px;
		margin:0px;}
	
	
	.header_image{text-align:center;
		margin:0px;
		padding:0px;
		justify-content:center;}
	
	.header_image_text{color:white;
		font-family: 'Open Sans', sans-serif;
		text-align:center;
		position:relative;
		margin:0px;
		padding:0px;
		top:50%;
		-ms-transform: translateY(-70%);
		transform: translateY(-50%);}
		
	#header_image_text_1{display:none;}
	#header_image_text_1b{display:block;
		font-size:200%;
		font-weight:900;
		margin:0px;
		padding:0px;
		text-align:center;
		text-shadow:2px 2px 8px #000000;}
	/*#header_image_text_2{display:none;}
	#header_image_text_2b{display:block;
		font-size:16px;
		font-weight:700;
		margin:0px 40px 10px 40px;
		padding:0px;
		text-shadow:2px 2px 8px #000000;}
	#header_image_text_3{font-size:16px;
		font-weight:500;
		margin:0px 0px 10px 0px;
		padding:0px 40px 0px 40px;}
	#header_image_text_4{font-size:16px;
		font-weight:700;
		margin:0px;
		padding:0px 40px 0px 40px;}*/
		
	.button{background-color:#004261;
		color:white;
		padding:20px;
		margin-top:20px;
		font-size:100%;
		font-family: 'Open Sans', sans-serif;
		border:none;
		border-radius:20px;
		transition-duration:0.4s;}
	.button:hover{background-color:#00699B;
		cursor:pointer;}
	
	


/* ************************************** MOBILNA VERZIJA --- PRIMARY ************************************** */

	.primary{padding:0px;
		margin:0px;
		width:100%; 
		overflow-x:hidden;}

	.primary_text{padding:0px;
		margin:0px;
		width:100%; 
		overflow-x:hidden;}
	
	.primary_pocetna{padding:0% 10% 10% 10%;
		margin:0px;
		width:100%; 
		overflow-x:hidden;}
		
		
		
		
		
	.primary_usluge{grid-column:1/4;
		text-align:center;
		background-color:#073D29;
		margin:0px;
		overflow-x:hidden;}
		
	.primary_usluge_grid{display:grid;
		margin:0px;}

	.primary_usluge_article{display:block;
		/*background-color:#ffffff;*/
		margin:30px 30px 30px 30px;
		padding:20px;
		color:#ffffff;}
		
	.primary_usluge_article img{margin-bottom:10%;}
		
	#naslov_article{color:#ffffff;}
	
	
	
	
	
	
	
	
	.contact_info{grid-template-columns:repeat(1,1fr);
		margin:0px;
		padding:0px;}
		
	.contact_text_container{margin:0px;
		padding:0px;}
		
	.contact_text{display:flex;
		grid-template-columns:repeat(2,1fr);
		gap:30px;
		padding:10px 60px 0px 60px;}
		
	.contact_text img{width:42px;
		height:42px;
		margin-bottom:20px;}
		
	.contact_text p{align-items:flex-start;
		margin:0px;
		padding:0px;}
		
	.contact_form{padding:40px;
		text-align:center;}
	
	.button_kontakt{justify-content:center;}
	






/* ************************************** MOBILNA VERZIJA --- FOOTER ************************************** */
	
	.page_footer{grid-template-columns:1fr;
		padding:10% 0%;
		margin:0%;
		color:#ffffff;
		background-color:#000000;
		text-align:center;
		justify-content:center;}
	
	.footer_menu_left{text-align:center;
		padding:0px;
		margin:0px;}

	.footer_menu_right{text-align:center;
		padding:0px;
		margin:0px;}
		
	.footer_menu{list-style-type:none;
		margin:0px;
		padding:0px;}
		
	#footer_link{color:#ffffff;}
		
		
}