/* ==================================================================================
    GLOBAL RESET A KOŘENOVÉ PROMĚNNÉ
   ================================================================================== */

/* Globální styly */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Základní nastavení písma pro celé tělo stránky */
body {
	font-family: "Roboto", sans-serif;
}

/* Všechny H1 nadpisy */
h1 {
	text-align: center;
	color: var(--orange);
	padding: 20px 0px 20px 0px;
}

/* Kořenové proměnné */
:root {
	--text-black: #000000;
	--dark-blue: #15324c;
	--header-right-top: #ec531c;
	--header-right-text: #ffffff;
	--orange: #ec531c;
	--white-text: #e6e6e6;
	--h1-text-white: #fbf9f9;
	--background-right-header: #cecece;
	--about-us-background: #ffffff;
	--promo-background: #d7d7d7;
	--shadow: rgba(0, 0, 0, 0.3);
	--contact-background: #ffffff;
	--contact-text-background: #eeeded;
	--circle-background: #000000;
	--circle-text: #000000;
	--promo-text: rgb(255, 255, 255);
	--form-red: #db0000;
	--form-green: #008000;
	--footer-bottom-background: #17212b;
	--clear-white-button: #ffffff;
}
.all-sect {
	width: 70%;
	margin: 0 auto;
}

/* ==================================================================================
    HEADER (Horní část stránky, logo, navigace, atd.)
   ================================================================================== */
.header-image {
	position: relative;
	background-image: linear-gradient(
			to right,
			rgba(21, 50, 76, 1) 0%,
			rgba(21, 50, 76, 1) 10%,
			rgba(21, 50, 76, 0.95) 20%,
			rgba(21, 50, 76, 0.9) 30%,
			rgba(21, 50, 76, 0.85) 40%,
			rgba(21, 50, 76, 0.8) 50%,
			rgba(21, 50, 76, 0.75) 60%,
			rgba(21, 50, 76, 0.7) 70%,
			rgba(21, 50, 76, 0.65) 80%,
			rgba(21, 50, 76, 0) 100%
		),
		url(/static/image/Header-image/bmwsupersport.png);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	height: 400px;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
	color: var(--orange);
	font-size: 16px;
}

a:hover {
	color: var(--promo-background);
}

header {
	position: relative;
}

/* ==================================================================================
    O NÁS (ABOUT-US)
   ================================================================================== */

#section-one {
	z-index: 1;
}

.section-about-us {
	background-color: var(--about-us-background);
	margin-top: 120px;
}

.about-us-wrapper {
	padding: 70px 0px;
	display: flex;
	gap: 60px;
}

.what-we-do-text p {
	text-align: center;
}

/* Ikony pro "co děláme" */
.icon-container {
	display: flex;
	justify-content: space-between;
	margin-top: 50px;
}

.icon-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.icon-1 {
	background-image: url(/frontend/images/icons/ikona1.png);
}

.icon-2 {
	background-image: url(/frontend/images/icons/ikona2.png);
}

.icon-3 {
	background-image: url(/frontend/images/icons/ikona3.png);
}

.icon-4 {
	background-image: url(/frontend/images/icons/ikona4.png);
}

.galery {
	width: 100px;
	height: 100px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.icon-text {
	text-align: center;
	padding-top: 20px;
}

/* ==================================================================================
    PROMO-SECTION (Nabídka různých karet s promo obrázky)
   ================================================================================== */

.section-promo {
	background-color: var(--dark-blue);
	padding: 40px 0;
}

.promo-wrapper {
	padding: 70px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.promo-card {
	height: 220px;
	width: calc(100% / 3 - 20px);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	position: relative;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.promo-card:hover {
	transform: translateY(-6px);
	border-color: var(--orange);
}

.promo-overlay {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.promo-icon {
	width: 46px;
	height: 46px;
}

.promo-icon svg {
	width: 100%;
	height: 100%;
	fill: var(--white-text);
	transition: transform 0.4s ease, fill 0.3s ease;
}

.promo-card:hover .promo-icon svg {
	transform: scale(1.15);
	fill: var(--orange);
}

.promo-overlay h2 {
	color: var(--white-text);
	font-size: 17px;
	text-align: center;
	margin: 0;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

/* ==================================================================================
    KONTAKTNÍ SEKCE
   ================================================================================== */

.contact-section {
	background-color: var(--contact-background);
	padding: 70px 0px 0px 0px;
}

.contact-wrapper {
	padding-top: 70px;
	display: flex;
	gap: 20px;
	justify-content: space-between;
}

#maps-wrapper {
	flex-basis: 50%;
	max-width: 100%;
}

/* Logo kontakt */
.contact-logo-wrapper {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 20px;
}

.contact-logo {
	width: 220px;
}

/* Text v kontaktech */
.contact-text {
	color: var(--text-black);
	line-height: 40px;
}

.contact-text a {
	color: var(--text-black);
	text-decoration: none;
	transition: color 0.3s;
}

.contact-text a:hover,
.contact-text a:focus {
	color: var(--orange);
}

.socialM-icon {
	height: 27px;
	vertical-align: middle;
}

.mail-icon {
	height: 20px;
	width: 25px;
}

/* ==================================================================================
   CENÍK SLUŽEB
   ================================================================================== */

.price-section {
	padding: 150px 0;
}

.price-category {
	margin-bottom: 60px;
}

.price-category h2 {
	color: var(--dark-blue);
	font-size: 26px;
	margin-bottom: 20px;
	text-align: center;
}

/* Glass karta */
.price-card {
	background: var(--dark-blue);
	backdrop-filter: blur(14px);
	border: 1px solid;
	border-radius: 18px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

/* Řádek */
.price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 26px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.price-row:last-child {
	border-bottom: none;
}

.price-name {
	color: var(--orange);
	font-size: 16px;
	font-weight: 600;
	max-width: 70%;
}

.price-value {
	color: var(--white-text);
	font-size: 17px;
	font-weight: 300;
	white-space: nowrap;
}

/* poznámka */
.price-note {
	margin-top: 40px;
	text-align: center;
	font-size: 14px;
	color: #666;
}

/* hover efekt */
.price-row:hover {
	background: rgba(255, 255, 255, 0.05);
}
@media (max-width: 1340px) {
	.price-section {
		padding-top: 70px;
	}
}
@media (max-width: 600px) {
	.price-section {
		padding-top: 30px;
	}
}
/* ==================================================================================
    HTML THANK-YOU STRÁNKA
   ================================================================================== */

.thank-you {
	width: 90%;
	margin: 0 auto;
	padding-top: 190px;
	height: 40vh;
}
@media (max-width: 1340px) {
	.price-section {
		padding-top: 30px;
	}
}