/* Reset */
html, body, div, span, 
h1, h2, h3, h4, h5, h6, p, a, img
i, ol, ul, li, strong, 
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
footer, header, menu, nav, section, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	vertical-align: baseline;
}
footer, header, main, menu, nav, section {
	display: block;
}

/* General */
:root {
	--blue: #0095D9;
	--green: #00968F;
	--red: #FF3366;
	--gray-dark: #1D2E35;
	--gray-light: #2B444F;
	--white: #FFF;
}
@font-face {
	font-family: 'icons';
	src:  url('fonts/icons.eot');
	src:  url('fonts/icons.eot?#iefix') format('embedded-opentype'),
		url('fonts/icons.ttf') format('truetype'),
		url('fonts/icons.woff') format('woff'),
		url('fonts/icons.svg?#icons') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
body {
	overflow-x: hidden;
}
[class^="icon-"], [class*=" icon-"] {
	font-family: 'icons' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-envelope-o:before {
	content: "\f003";
}
.icon-envelope:before {
	content: "\f0e0";
}
.icon-phone:before {
	content: "\f095";
}
.icon-phone1:before {
	content: "\e942";
}

html {
	font: 400 calc(14px + 0.25vw) / 1.2 Helvetica, Arial, sans-serif;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
h1, h2, h3 { margin-bottom: .5em; }
a {
	text-decoration: none;
	color: var(--blue);
}
a:hover {
	color: var(--green);
}
p { padding-bottom: 10px; }
.button {
	width: max-content;
	margin: .7rem auto;
	padding: .6rem 1.2rem;
	font-size: 1rem;
	font-weight: 500;
	color: #FFF;
	background: var(--blue);
	border: 0;
	border-radius: .3rem;
	transition: all .3s;
	cursor: pointer;
}
.button:hover, 
.button:active {
	color: #FFF;
	background: var(--green);
}



/* Header */
header {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	z-index: 998;
	width: 100%;
	padding: 1.5rem 10vw;
	box-sizing: border-box;
}
#logo {
	width: 100%;
	max-width: 200px;
	height: auto;
}
nav a {
	padding: .7rem;
	font-weight: 500;
	color: var(--blue);
	letter-spacing: .07vw;
	transition: all .3s;
}



/* Main */
section {
	position: relative;
	padding: 2vw 0;
}
.row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 5vw 2vw;
	width: 80%;
	max-width: 1600px;
	height: 100%;
	margin: auto;
	padding: 3rem 0;
	z-index: 3;
	box-sizing: border-box;
}
.fullwidth {
	width: 100%;
	max-width: unset;
	padding: 10vw 10%;
	margin: 0;
	box-sizing: border-box;
	line-height: 1.5;
}
.column {
	display: grid;
	place-content: center;
	place-items: center;
	z-index: 5;
}
.overlay::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #0009;
}
.top {
	position: fixed;
	right: 0;
	bottom: calc(3vw + 50px);
	z-index: 990;
}
.top::before {
	content: '\2191';
	padding: 3px 15px 9px;
	border-radius:  15% 0 0 15%;
	background: #0007;
	font-size: 1.5em;
	color: #FFF9;
}



/* Acasă */
#acasa {
	background: url("intro-truck.jpg") no-repeat 50% / cover;
	height: 100vh;
	padding-top: 1.5rem;
}
#acasa .blue, 
#acasa .green, 
#acasa .button {
	display: block;
	text-align: center;
}
#acasa .blue {
	color: var(--blue);
	font-size: 2.5em;
}
#acasa .green {
	color: var(--green);
	font-size: 3em;
	font-weight: 900;
}

/* Despre */
#despre .row {
	text-align: center;
	line-height: 1.5;
}

/* Servicii */
#servicii {
	background: url("world-dots.png") no-repeat 50% 0 / contain transparent;
}
#servicii .row {
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
#servicii .row:nth-child(2) {
	background: url("truck-profile.png") no-repeat 100% 50%/ contain transparent;
}
#servicii span {
	padding-top: 1rem;
	font-weight: 600;
	text-align: center;
}
#servicii-2 .column:nth-child(2) {
	padding: 0 3vw;
	color: #FFF;
}

/* Servicii 2 */
#servicii-2 .row {
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	background: var(--green);
}
#servicii-2 .row::before {
	content: '';
	position: absolute;
	left: 0;
	right: 50%;
	top: 0;
	bottom: 0;
	background: url("truck-services.jpg") no-repeat 50%/ cover transparent;
}


/* Contact */
#contact .column {
	min-height: 500px;
	padding: 1em 3em;
	background: var(--gray-dark);
	border-radius: .5rem;
}
/* Contact Form */
#ContactForm {
	color: var(--white);
}
#ContactForm div {
	margin-bottom: .5em;
}
#ContactForm div label {
	line-height: 2em;
}
.InputBox {
	width: 100%;
	padding: .3em .5em;
	border: none;
	border-radius: .3rem;
	font-size: 1rem;
	font-weight: 500;
	color: var(--white);
	background: var(--gray-light);
	box-sizing: border-box;
}
.InputBox.wrong:not(:focus) {
	background-color: var(--red);
}
.info {
	font-size: .7em;
	color: var(--red);
	padding-left: 5px;
}
.success, 
.error {
	padding: 10px;
	text-align: center;
	border-radius: .3rem;
}
.success {
	background-color: var(--green);
}
.error {
	background-color: var(--red);
}
#ContactForm.sent > div:not(#mail-status) {
	filter: grayscale(1) opacity(.25);
	pointer-events: none;
	user-select: none;
	transition: all .3s;
}
.contacts img {
	margin-bottom: 1em;
}
[class^="icon-"], [class*=" icon-"] {
	display: inline-block;
	padding-right: .3em;
	transform: translateY(.15em);
	font-size: 1.2rem;
	color: var(--green);
}

/* Footer */
footer {
	background: var(--gray-dark);
	color: var(--white)
}
footer .row {
	padding: 1rem 0;
}

/* Media queries */
@media (max-width: 599px) {
	header {
		justify-content: space-evenly;
		gap: 1.5rem;
	}
    nav a {
        font-weight: 600;
    }
	#contact .row {
		width: 90%;
	}
	#contact .column {
		padding: 1em 2em;
	}
	.column:empty {
		display: none;
	}
	#servicii .row:nth-child(2) {
		background-position: 50%;
		background-size: cover;
		color: var(--white);
		padding: 25vw 10%;
	}
	#servicii-2 .row::before {
		right: 0;
	}
}
@media (min-width: 600px) {
	#despre .row {
		width: 60%;
	}
	#servicii .row:nth-child(2)::after {
		display: none;
	}
	#servicii-2 .overlay::after {
		display: none;
	}
	footer .column {
		place-content: start;
	}
}