/*
	Cascade style sheet for HanaMat s.r.o.
	Author: Ing. Igor Miňa @ TPsoft.org 2025

	Contents:
	01 - GENERAL
	02 - HEADER
	03 - SECTION SERVICES
	04 - SECTION ABOUT
	05 - SECTION REFERENCES
	06 - SECTION CONTACT
	07 - FOOTER
	08 - PHOTOS
	09 - ABOUT US
	10 - CONTACT US

	farba z vizitky modra: #74B4F0; rgb(116, 180, 240);

*/

/* ----------------------------------------------------
   01 - GENERAL
   */
:root {
	--color-bg: #ffffff;
	--color-text: #000;
	--color-text-link: #3d6d9b;
	--color-text-hover: #255d8c;
	--color-headline: #255d8c;

	--color-bg2: #0d59a0;
	--color-text2: #fff;
	--color-text2-darker: #cacaca;
	--color-text2-link: #d6e8f8;
	--color-text2-hover: #74b4f0;

	--container-width: 1000px;
	--container-margin: calc(100vw - 1000px) / 2;
	--content-margin: 20px;
}
@font-face {
	font-family: "Exo2";
	src: url(fonts/Exo2-Regular.otf);
}
@font-face {
	font-family: "Exo2Bold";
	src: url(fonts/Exo2-Bold.otf);
}
@font-face {
	font-family: "Exo2Italic";
	src: url(fonts/Exo2-Italic.otf);
}
@font-face {
	font-family: "Exo2Thin";
	src: url(fonts/Exo2-Thin.otf);
}
html,
body {
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: "Exo2", sans-serif;
	font-size: 16px;
	margin: 0;
	padding: 0;
}
h1 {
	margin: 10px;
}
.center {
	text-align: center;
}
a,
a:visited {
	color: var(--color-text-link);
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}
a:hover {
	color: var(--color-text-hover);
}
.container {
	width: var(--container-width);
}
button {
	cursor: pointer;
	background-color: var(--color-bg);
	color: var(--color-text);
	border: 1px solid var(--color-text);
	padding: 10px 20px;
	border-radius: 5px;
	transition: all 0.3s ease-in-out;
}
button:hover {
	background-color: var(--color-bg2);
	color: var(--color-text2);
}
button.white {
	background-color: transparent;
	color: var(--color-text2);
	border-color: var(--color-text2);
}
button.white:hover {
	background-color: var(--color-bg);
	color: var(--color-text-link);
}

/* ----------------------------------------------------
   02 - HEADER
   */
header {
	background-image: linear-gradient(
			rgba(13, 89, 160, 0.902),
			rgba(13, 89, 160, 0.6)
		),
		url("../images/elektro1.jpg");
	background-size: cover;
	background-position: center;
	/* background-blend-mode: multiply; */
	width: 100%;
	min-height: 50vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--color-text2);
}
header a,
header a:visited {
	color: var(--color-text2-link);
}
header a:hover {
	color: var(--color-text2-hover);
}
.header-top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	/* border: 1px red solid; */
}
.header-logo {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: var(--content-margin);
}
.header-logo span {
	font-size: 48px;
	font-family: "Exo2", sans-serif;
	font-weight: normal;
	margin: var(--content-margin);
}
.header-menu {
	display: flex;
	flex-direction: row;
	/* align-items: center; */
	margin: var(--content-margin);
}
.header-menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
}
.header-menu li {
	margin: 0 10px;
}
.header-headline {
	flex-direction: column;
	width: var(--container-width);
	/* border: 1px lime solid; */
}
.header-headline h1 {
	font-size: 48px;
	font-family: "Exo2Bold", sans-serif;
}
.header-headline h2 {
	font-size: 24px;
	font-family: "Exo2Thin", sans-serif;
	font-weight: normal;
	margin: 10px;
	/* color: var(--color-text2-darker); */
}
.header-headline a {
	font-family: "Exo2", sans-serif;
	font-weight: bold;
	font-size: 28px;
}

/* ----------------------------------------------------
   03 - SECTION SERVICES
   */
#services {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 80px;
	padding-bottom: 80px;
}
#services .container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px;
}
#services .service {
	width: 30%;
	/* border: 1px red solid; */
}
#services .service .head {
	display: flex;
	flex-direction: row;
	align-items: center;
	color: var(--color-headline);
}
#services .service .head .icon {
	width: 50px;
	text-align: center;
	/* border: 1px green solid; */
}
#services .service .description {
	/* text-align: justify; */
}
#services .container.center {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#services .container.gap {
	margin: 50px 0;
}

/* ----------------------------------------------------
   04 - ABOUT
   */
#about {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 80px;
	padding-bottom: 80px;
	background-image: linear-gradient(
			rgba(13, 89, 160, 0.902),
			rgba(13, 89, 160, 0.6)
		),
		url("../images/elektro2.jpg");
	background-size: cover;
	background-position: center;
	color: var(--color-text2);
}
#about .container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 30px;
}
#about .container .title {
	text-align: left;
	min-width: 40%;
}
#about .container .description {
	text-align: justify;
}
#about h2 {
	font-size: 36px;
	font-family: "Exo2Thin", sans-serif;
}
#about h3 {
	font-size: 24px;
	font-family: "Exo2Bold", sans-serif;
	font-weight: normal;
}
#about p {
	font-family: "Exo2", sans-serif;
	font-weight: normal;
}

/* ----------------------------------------------------
   05 - REFERENCES
   */
#references {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 80px;
	padding-bottom: 80px;
}
#references .container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 30px;
}
#references .container.center {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#references h2 {
	font-size: 36px;
	font-family: "Exo2Thin", sans-serif;
}
#references h3 {
	font-size: 24px;
	font-family: "Exo2Bold", sans-serif;
	font-weight: normal;
}
#references p {
	font-family: "Exo2", sans-serif;
	font-weight: normal;
	text-align: center;
}
#references .reference {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ----------------------------------------------------
   06 - CONTACT
   */
#contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 80px;
	padding-bottom: 80px;
	background-image: linear-gradient(
			rgba(13, 89, 160, 0.902),
			rgba(13, 89, 160, 0.6)
		),
		url("../images/elektro3.jpg");
	background-size: cover;
	background-position: center;
	color: var(--color-text2);
}
#contact .container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 30px;
}
#contact .container.center {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#contact h2 {
	font-size: 36px;
	font-family: "Exo2Thin", sans-serif;
}
#contact h3 {
	font-size: 24px;
	font-family: "Exo2Bold", sans-serif;
	font-weight: normal;
}
#contact p {
	font-family: "Exo2", sans-serif;
	font-weight: normal;
	text-align: center;
}

/* ----------------------------------------------------
   07 - FOOTER
   */
footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: var(--color-bg);
	color: var(--color-text);
}
footer .container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 30px;
}

/* ----------------------------------------------------
   08 - PHOTOS
   */
#photos {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 30px;
	padding-bottom: 30px;
}
#photos .container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 30px;
}
#photos .container.center {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ----------------------------------------------------
   09 - ABOUT US
   */
#about-us {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 30px;
	padding-bottom: 30px;
}
#about-us .container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 30px;
}
#about-us .container.center {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#about-us .description {
	text-align: justify;
}

/* ----------------------------------------------------
   10 - CONTACT US
   */
#contact-us {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 30px;
	padding-bottom: 30px;
}
#contact-us .container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 30px;
}
#contact-us .container.center {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#contact-us .info {
	text-align: right;
}
#contact-us .info .tel {
	font-size: 36px;
}
#contact-us form {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 10px;
}
#contact-us form input,
#contact-us form textarea {
	width: 480px;
	padding: 10px 5px;
}
#contact-thanks {
	display: flex;
	justify-content: center;
	margin: 50px 0px;
}
#contact-thanks .container {
	text-align: center;
}

/* ----------------------------------------------------
   99 - RESPONIZIVE
   */
@media (max-width: 500px) {
	:root {
		--container-width: 100vw;
		--container-margin: 0px;
	}
	.header-top {
		flex-direction: column;
	}
	.header-logo img {
		height: 80px;
	}
	.header-logo span {
		font-size: 24px;
	}
	#services .container {
		flex-direction: column;
	}
	#services .service {
		width: 100%;
	}
	#services .service .description {
		padding: 0 10px;
	}
	#about .container {
		flex-direction: column;
	}
	#about .container .title {
		padding: 0px 10px;
	}
	#about .container .description {
		padding: 0px 10px;
	}
	#references .container {
		flex-direction: column;
	}
	#references .reference {
		padding: 0 10px;
		box-sizing: border-box;
		width: 100%;
	}
	footer .container {
		flex-direction: column;
		justify-content: center;
	}
	footer .container * {
		justify-content: center;
		text-align: center;
	}
	#photos #images {
		text-align: center;
	}
	#about-us .container {
		flex-direction: column;
	}
	#about-us .container img {
		max-width: 90vw;
	}
	#about-us .description {
		padding: 0 10px;
	}
	#about-us h2 {
		text-align: left;
	}
	#contact-us .container {
		flex-direction: column;
		padding: 0 10px;
		box-sizing: border-box;
	}
	#contact-us form input,
	#contact-us form textarea {
		width: 90vw;
	}
}
@media (min-width: 501px) and (max-width: 1000px) {
	:root {
		--container-width: 500px;
		--container-margin: 0px;
	}
	.header-top {
		flex-direction: column;
	}
	.header-logo img {
		height: 80px;
	}
	.header-logo span {
		font-size: 24px;
	}
	.header-menu {
		justify-content: center;
	}
	#about .container {
		flex-direction: column;
	}
	#about .container .title {
		padding: 0px 10px;
	}
	#about .container .description {
		padding: 0px 10px;
	}
	#services .service {
		width: 45%;
	}
	#references .references {
		flex-wrap: wrap;
		text-align: center;
	}
	#references .reference {
		width: 45%;
	}
	#about-us .container {
		flex-direction: column;
	}
	#about-us .container img {
		width: 300px;
	}
	#about-us h2 {
		text-align: left;
	}
	#contact-us .container {
		flex-direction: column;
	}
}