/*
Theme Name: ArtClear
Theme URI: https://artclear.ch
Description: A basic responsive theme based on Bootstrap 5
Author: Orsolya Zajtai
Author URI: http://zajtaiorsolya.hu/
Version: 2.0
Tags: responsive, white, bootstrap

License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
License URI: http://creativecommons.org/licenses/by-sa/3.0/

This is a basic theme for Tenere.hu built with Bootstrap 5.
*/

/*@font-face{
    font-family: "Trajan Pro";
    src: url("b11f35f77210c651367969365f87af24.eot");
    src: url("b11f35f77210c651367969365f87af24.eot?#iefix")format("embedded-opentype"),
        url("b11f35f77210c651367969365f87af24.woff")format("woff"),
        url("b11f35f77210c651367969365f87af24.woff2")format("woff2"),
        url("b11f35f77210c651367969365f87af24.ttf")format("truetype"),
        url("b11f35f77210c651367969365f87af24.svg#Trajan Pro")format("svg");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}*/
body {
	background: #141313;
	color: #fff;
}
img {
	max-width: 100% !important;
	width:100%;
	max-height: 100%;
	height: auto;
}
/* --- MAIN --- */

.gradient {
	background: linear-gradient(to bottom,  rgba(251,233,185,1) 0%,rgba(223,169,81,1) 100%);
}
.bg-brown {
	background-color: #120B0A;
}
.bg-black {
	background-color: #141313 !important;
}
.bg-girl {
	background-image: radial-gradient(ellipse at 50% 30%, rgba(20, 19, 19,0) 40%,rgba(20, 19, 19,1) 70%), url('images/why-artclear-bg.png');
	background-size: cover;
	background-position: 50% 10%;
	background-repeat: no-repeat;
}
.bg-map {
	background-image: linear-gradient(to top, rgba(20, 19, 19,1) 0%, rgba(20, 19, 19,0) 15%), url('images/map.png');
	background-size: auto;
	background-position: 70% top;
	background-repeat: no-repeat;
	height: 600px;
}
.bg-video {
	position: relative;
	overflow: hidden;
}

/* VIDEO */
.bg-video__media {
	position: absolute;
	top: 80%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	z-index: 0;
}

/* DARK GRADIENT OVERLAY */
.bg-video__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(20, 19, 19,0.85) 0%,
		rgba(20, 19, 19,0.7) 40%,
		rgba(20, 19, 19,1) 60%
	);
	z-index: 1;
}

/* CONTENT ABOVE VIDEO */
.bg-video > *:not(.bg-video__media):not(.bg-video__overlay) {
	position: relative;
	z-index: 2;
}
.why {
	background: rgba(255,255,255,0.1);
	border: 1px solid #EDC884;
	border-radius: 30px;
	padding: 1rem 1.5rem 0.75rem 1.5rem;
}
.ratio-2x1 {
	--bs-aspect-ratio: 46% !important;
}
.leistung {
	position: relative;
	overflow: hidden;
	border-radius: 30px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: 300px;
	border-bottom: 3px solid #141313;
	transition: all 0.4s ease;
}
.leistung:hover {
	border-bottom: 3px solid #EDC884;
}
.leistung::before {
	content: "";
	position: absolute;
	inset: 0;
	background: inherit;
	transform: scale(1);
	transition: transform 0.6s ease;
	z-index: 0;
}
.leistung:hover::before {
	transform: scale(1.08);
}
.leistung::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(20, 19, 19,0.3);
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 1;
}
.leistung:hover::after {
	opacity: 1;
}
.leistung .inner::after {
	content: "";

}
.leistung:hover .inner::after {

}
.inner {
	position: relative;
	z-index: 2;
	transition: all 0.4s ease;
	height: 100%;
	transform: translateY(25px);
}

.leistung:hover .inner {
	transform: translateY(-45px);
}
.cta {
	opacity: 0;
	transform: translateY(-20px);
	transition: all 0.4s ease;
}

.leistung:hover .cta {
	opacity: 1;
	transform: translateY(1px);
}
.unterhalt {
	background-image: linear-gradient(to top, rgba(20, 19, 19,.8) 0%, rgba(20, 19, 19,0) 45%), url('images/cleaning/regular-cleaning.png');
}
.grund {
	background-image: linear-gradient(to top, rgba(20, 19, 19,.8) 0%, rgba(20, 19, 19,0) 45%), url('images/cleaning/deep-cleaning.png');
}
.buro {
	background-image: linear-gradient(to top, rgba(20, 19, 19,.8) 0%, rgba(20, 19, 19,0) 45%), url('images/cleaning/office-cleaning.png');
}
.treppe {
	background-image: linear-gradient(to top, rgba(20, 19, 19,.8) 0%, rgba(20, 19, 19,0) 45%), url('images/cleaning/office-and-stairwell-cleaning.png');
}
.fenster {
	background-image: linear-gradient(to top, rgba(20, 19, 19,.8) 0%, rgba(20, 19, 19,0) 45%), url('images/cleaning/window-cleaning.png');
}
.umzug {
	background-image: linear-gradient(to top, rgba(20, 19, 19,.8) 0%, rgba(20, 19, 19,0) 45%), url('images/cleaning/post-move-cleaning.png');
}
.haus {
	background-image: linear-gradient(to top, rgba(20, 19, 19,.8) 0%, rgba(20, 19, 19,0) 45%), url('images/cleaning/upholstery-and-carpet-cleaning.png');
}
.spezial {
	background-image: linear-gradient(to top, rgba(20, 19, 19,.8) 0%, rgba(20, 19, 19,0) 45%), url('images/cleaning/special-cleaning.png');
}
.text-gradient {
	background: linear-gradient(to bottom,  rgba(251,233,185,1) 0%,rgba(223,169,81,1) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.border-bottom-gradient {
	border-width: 0 0 1px 0;
	border-color: #fbe9b9;
	border-style: solid;
}
.border-top-gradient {
	border-width: 1px 0 0 0;
	border-color: #fbe9b9;
	border-style: solid;
}

@media screen and (max-width: 767.98px) {
}

/* --- SLIDER --- */
.slider {
	background-image: linear-gradient(to top, rgba(20, 19, 19,1) 0%, rgba(20, 19, 19,0) 65%), url('images/slider-img.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	
}

/* --- NAVBAR ---*/

.navbar-brand img {
	max-height: 112px;
	margin-bottom: -33px;
}
.placeholder {
	height: 89px;
}
@media screen and (min-width: 991.98px) {
	nav.navbar {
		height: 150px;
	}
	.nav-first {
		height: 50px;
	}
	.nav-first .container {
		line-height: 50px;
	}
	.nav-second {
		height: 100px;
	}
	.navbar-brand img {
		margin-top: -50px;
		margin-bottom: 0px;
	}
	.placeholder {
		height: 150px;
	}
}
@media screen and (max-width: 374px) {
	.navbar-brand img {
		max-height: 90px;
		margin-bottom: -33px;
	}
	.placeholder {
		height: 67px;
	}
}