/********************************************************************* BASE ***/

@media (max-width: 768px) {
	html, body {
		width: auto !important;
		overflow-x: hidden !important;
	}
}

@media (min-width: 1920px) {
	.container {
		max-width: 1582px;
	}
}

body, a {
	font-family: "Poppins", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: clamp(1.375rem, 0.375vw + 1.3rem, 1.75rem);
	line-height: clamp(1.925rem, 1.138vw + 1.697rem, 3.063rem);
	color: #252524;
}

p {
	margin: 0;
	padding: 0;
	margin-bottom: clamp(1.188rem, 1vw + 0.988rem, 2.188rem);
}

p:last-child {
	margin-bottom: 0;
}

h2 {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: clamp(1.875rem, 1.375vw + 1.6rem, 3.25rem);
	line-height: clamp(2.25rem, 1.65vw + 1.92rem, 3.9rem);
	color: #252524;
	margin-bottom: clamp(2rem, 1.7000rem + 1.5000vw, 3.5rem);
}

.btn-primary {
	font-size: 1.2rem;
	font-weight: 700;
	padding: 1.5rem 1.8rem;
	border-radius: 0;
	--bs-btn-color: #252524;
	--bs-btn-bg: #f3f3f3;
	--bs-btn-border-color: #252524;
	--bs-btn-hover-color: #cb532c;
	--bs-btn-hover-bg: #e0e0e0;
	--bs-btn-hover-border-color: #cb532c;
	--bs-btn-active-color: #FFFFFF;
	--bs-btn-active-bg: #000000;
	--bs-btn-active-border-color: #000000;
	--bs-btn-border-width: 3px;
}

@media (min-width: 768px) {

	.btn-primary {
		font-size: 1.6rem;
		padding: 1.8rem 2.2rem;
	}

}

@media (min-width: 1400px) {

	.btn-primary {
		font-size: 1.8rem;
		padding: 2.2rem 2.8rem;
	}

}

/******************************************************************* HEADER ***/

.header .logo img {
	height: clamp(5rem, 4.4000rem + 3.0000vw, 8rem);
	margin-top: clamp(2.125rem, 1.8000rem + 1.6250vw, 3.75rem);
	margin-bottom: clamp(2rem, 1.7750rem + 1.1250vw, 3.125rem);
}

.header .hero {
	height: clamp(20rem, 10.9500rem + 45.2500vw, 65.25rem);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/***************************************************************** SERVICES ***/

.services {
	background-color: #f3f3f3;
	padding-top: clamp(5rem, 4.0000rem + 5.0000vw, 10rem);
	padding-bottom: clamp(5rem, 4.0000rem + 5.0000vw, 10rem);
}

.services .btn {
	margin-top: 2rem;
}

.services .secondary img {
	max-width: 80%;
}

@media (min-width: 768px) {

	.services .secondary img {
		max-width: 400px;
	}

}

@media (min-width: 992px) {

	.services .secondary img {
		max-width: 85%;
	}

}

@media (min-width: 1900px) {

	.services .secondary img {
		max-width: 75%;
	}

}

/**************************************************************** PORTFOLIO ***/

.portfolio {
	padding-top: clamp(4rem, 2.9250rem + 5.3750vw, 9.375rem);
	padding-bottom: clamp(5rem, 3.9250rem + 5.3750vw, 10.375rem);
}


.portfolio .row {
	--bs-gutter-x: clamp(1rem, 0.8500rem + 0.7500vw, 1.75rem);
	--bs-gutter-y: clamp(1rem, 0.8500rem + 0.7500vw, 1.75rem);
}

.portfolio h2 {
	margin-bottom: clamp(3rem, 2.4000rem + 3.0000vw, 6rem);
}

/******************************************************************* FOOTER ***/

.footer {
	background-color: #f3f3f3;
	padding-top: clamp(3rem, 2.6000rem + 2.0000vw, 5rem);
	padding-bottom: clamp(3rem, 2.6000rem + 2.0000vw, 5rem);
}

.footer, .footer a {
	font-size: 1.2rem;
	text-decoration: none;
}

.footer a:hover {
	text-decoration: underline;
}

.footer img {
	max-width: 100px;
	margin-bottom: 2rem;
}

@media (min-width: 992px) {

	.footer, .footer a {
		font-size: 1.4rem;
		line-height: 1.6;
	}

	.footer img {
		max-width: 116px;
		margin-bottom: 0;
	}

}

@media (min-width: 1400px) {

	.footer .address {
		margin-left: -40px;
	}

}

@media (min-width: 1900px) {

	.footer .address {
		margin-left: -80px;
	}

}

/****************************************************************** SPLETKO ***/

.spletko {
	padding: 30px 0;
	text-align: center;
	background-color: #FFFFFF;
}

.spletko a {
	text-decoration: none;
}

.spletko a img {
	height: 20px;
}

@media (min-width: 1500px) {

	.spletko {
		padding: 40px 0;
	}
	
	.spletko a img {
		height: 24px;
	}

}