*{box-sizing:border-box;}

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:#004261;;
	text-decoration:none;
	text-transform:uppercase;}
	
a:hover{color:goldenrod;
	transition: 0.6s ease;}
	
html{scroll-behavior:smooth;}

h1{font-size:2rem;}




	/* ******************************************************************************************************************** */
	
	/* 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{min-height:100vh;
	display:grid;
	grid-column:1/4;
	background-image:url(images/header/header_image.jpg);
	background-size:cover;
	padding:0px;
	margin:0px;}
	
.page_header_gdpr{min-height:30vh;
	display:grid;
	grid-column:1/4;
	background-image:url(images/header/header_image.jpg);
	background-size:cover;
	padding:0px;
	margin:0px;}
	
.nav_btn{display:none;}
	
.site_navigation{display:grid;
	/*justify-content:center;*/
	background-color:white;
	grid-template-columns:1fr 0.1fr 1fr;
	padding:0px;
	margin:0px;
	color:white;
	height:3vw;}
	
.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:#004261;}
	
.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;}
	
	
/*.header_image{min-height:100vh;
	background-image:url(images/header/header_image.jpg);
	background-size:cover;}*/

.header_image_text{color:white;
	font-family: 'Open Sans', sans-serif;
	text-align:center;}
	
#header_image_text_1{font-size:450%;
	text-shadow:2px 2px 8px #000000;}
#header_image_text_1b{display:none}
#header_image_text_2{text-shadow:2px 2px 8px #000000;}
#header_image_text_2b{display:none;}
#header_image_text_3{text-shadow:2px 2px 8px #000000;}
#header_image_text_4{text-shadow:2px 2px 8px #000000;}
	
.header_button{text-align:center;
	margin-top:3%;}	
	
.button{background-color:#004261;
	color:white;
	padding:30px;
	font-size:160%;
	font-family: 'Open Sans', sans-serif;
	border:none;
	border-radius:30px;
	transition-duration:0.4s;}
.button:hover{background-color:#00699B;
	cursor:pointer;}
	
	
	
	
	
	
	
	
	
	/* 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:#F3FBFF}
	
.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:#F3FBFF;
	text-align:center;}
	
.primary_text{grid-column:2/3;
	text-align:center;
	margin:0px;
	padding:140px 0px 140px 0px;}
	
.primary_usluge{grid-column:1/4;
	text-align:center;
	background-color:#ADCEDF;
	margin:0px;
	padding:100px 0px 150px 0px;}
	
.primary_usluge_grid{display:grid;
	grid-template-columns:repeat(3,1fr);
	margin:0px 150px 0px 150px;}

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

.secondary{display:grid;
	grid-column:1/4;
	grid-template-columns:1fr minmax(280px,800px) 1fr;
	background-color:#ffffff;
	margin:0px;
	padding:140px 0px 140px 0px;}
	
.secondary_text{/*display:block;*/
	grid-column:1/4;
	text-align:center;
	margin-bottom:50px;}
	
.contact_info{display:grid;
	grid-column:2/3;
	grid-template-columns:repeat(2,1fr);
	margin:0px;
	padding:0px;}
	
.contact_text_container{
	margin:0px;
	padding:0px;}
	
.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:#004261;
	width:50%;
	color:white;
	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:#00699B;
	cursor:pointer;}
	
	
	
	
	
	/* FOOTER ************************************************************************************************************ */	
	
.page_footer{display:grid;
	grid-column:1/4;
	text-align:center;
	padding:2%;
	color:#ffffff;
	background-color:#004261;}
	
#footer_link{color:#ffffff;}
	
	
	
	
	
	
	
	
	/* RWD **************************************************************************************************************** */
	/* RWD **************************************************************************************************************** */
	/* RWD **************************************************************************************************************** */
	/* RWD **************************************************************************************************************** */
	
@media(max-width:1200px){
	.primary_usluge_grid{grid-template-columns:repeat(2,1fr);
	grid-gap:50px;}
}

@media(max-width:900px){
	.primary_usluge_grid{grid-template-columns:repeat(2,1fr);
	grid-gap:50px;}
}

@media(max-width:600px){
	.primary_usluge_grid{grid-template-columns:repeat(1,1fr);
	grid-gap:50px;}
}

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





@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 ************************************** */	
	
	.page_header{background-image:url(images/header/header_image_mobile.jpg)}
	
	.page_header ul{grid-template-columns:1fr;
							display:none;}
		
	.site_navigation ul{grid-template-columns:1fr;
							display:none;}
							
							
							

	/*.site_navigation nav ul{background-color:blue;}*/   /*LULIĆ!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
	
	.site_navigation{background-color:#ffffff;
		display:flex;
		justify-content:center;
		align-items:center;
		width:100%;
		height:80px;
		margin:0px;
		padding:0px;
		position:relative;
		min-height:10px;}
		
	.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:#004261;
		font-weight:bold;
		font-size:200%;}
		
		
	.header_menu {
		position: absolute;
		top: 80px;       
		left: 0;
		width: 100%;
		z-index: 1000;
		list-style-type: none;
		padding: 0px;
		margin: 0px;
		background-color: #ffffff;}
		
	.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 */
	
	
	#header_image_text_1{display:none;}
	#header_image_text_1b{display:block;
		font-size:40px;
		font-weight:900;
		margin:0px;
		padding:0px 40px 20px 40px;
		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_text{padding:40px;}
	.content_columns{row-gap:0px;}
	
	.primary_usluge{padding:40px 40px 100px 40px;}
	
	.primary_usluge_grid{margin:0px;}
	
	.primary_usluge_article{display:block;
	background-color:#ffffff;
	margin:30px 10px 00px 10px;
	padding:15px;}
	




/* ************************************** MOBILNA VERZIJA --- SECONDARY ************************************* */

	.secondary{margin:0px;
		padding:0px 0px 70px 0px;}

	.secondary_text{padding:40px;
		margin:0px;}
		
		
	.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:0px 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{padding:40px;}
		
		
}