/*

TemplateMo 546 Sixteen Clothing

https://templatemo.com/tm-546-sixteen-clothing

*/
body {
	font-family: 'Poppins', sans-serif;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-image: url(../images/ginger.jpg);
	/* Pfad zu deinem Bild */
	background-position: center center;
	/* Bild zentrieren */
	background-repeat: no-repeat;
	/* Bild nicht wiederholen */
	background-size: cover;
	/* Bild deckt den gesamten Bereich ab */
	background-attachment: fixed;
	/* Bild bleibt beim Scrollen fixiert */
	background-color: rgba(255, 255, 255, 0.5);
	background-blend-mode: multiply;
	margin: 0;
	/* Entfernt Standardabstände */
	padding: 0;
}

p {
	margin-bottom: 0px;
	font-size: 14px;
	font-weight: 300;
	color: #4a4a4a;
	line-height: 24px;
}

a {
	text-decoration: none !important;
}

ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0px;
}

ul.social-icons li {
	display: inline-block;
	margin-right: 3px;
}

ul.social-icons li:last-child {
	margin-right: 0px;
}

ul.social-icons li a {
	width: 50px;
	height: 50px;
	display: inline-block;
	line-height: 50px;
	background-color: #eee;
	color: #121212;
	font-size: 18px;
	text-align: center;
	transition: all .3s;
}

ul.social-icons li a:hover {
	background-color: #ff5a27;
	color: #fff;
}

a.filled-button {
	background-color: #ff5a27;
	color: #fff;
	font-size: 14px;
	text-transform: capitalize;
	font-weight: 300;
	padding: 10px 20px;
	border-radius: 5px;
	display: inline-block;
	transition: all 0.3s;
}

a.filled-button:hover {
	background-color: #121212;
	color: #fff;
}

.section-heading {
	text-align: left;
	margin-bottom: 20px;
	border-bottom: 1px solid #eee;
}

.section-heading h2 {
	font-size: 28px;
	font-weight: 400;
	color: #1e1e1e;
	margin-bottom: 15px;
}

.products-heading {
	background-image: url(../images/products-heading.jpg);
}

.about-heading {
	background-image: url(../images/about-heading.jpg);
}

/*.ccw-heading {
    background-image: url(../images/title_4.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; /* Ändere zu 'cover', wenn das Bild den gesamten Bereich füllen soll 
}*/

.contact-heading {
	background-image: url(../images/contact-heading.jpg);
}

.ebike-heading {
	background-image: url(../images/ebike-heading.jpg);
}

.basket-heading {
	background-image: url(../images/basket-heading.jpg);
}

.purchase-heading {
	background-image: url(../images/balloon-heading.jpg);
}

.page-heading {
	padding: 210px 0px 130px 0px;
	text-align: center;
	background-position: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: rgba(255, 255, 255, 0.5);
}

.page-heading .text-content h4 {
	color: #ff5a27;
	font-size: 22px;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 15px;
	max-width: 100%;
	height: auto;
}

.page-heading .text-content h2 {
	color: #fff;
	font-size: 62px;
	text-transform: uppercase;
	letter-spacing: 5px;
}

.page-heading.ccw-heading {
	background-image: rgba(255, 255, 255, 0.5) url(../images/Ginger.jpg);
	/* Dein Bild */
	background-position: center center;
	/* Zentriert das Bild */
	background-repeat: no-repeat;
	/* Keine Wiederholung */
	background-size: cover;
	/* Füllt den gesamten Bereich */
	background-attachment: fixed;
	/* Fixiert das Bild */
	background-color: rgba(255, 255, 255, 0.5);
	/* Weißer transparenter Hintergrund */
	background-blend-mode: multiply;
	/* Kombiniert Farbe und Bild */
	width: 100%;
	/* Volle Breite */
	height: 100vh;
	/* Höhe auf die volle Ansichtshöhe setzen */
	position: relative;
	/* Wichtig für Inhalte, die darüber liegen */
	z-index: -1;
	/* Hintergrundbild hinter andere Inhalte legen */
}

.page-heading.ccw-heading .container {
	position: relative;
	z-index: 1;
	/* Hebt den Inhalt über das Hintergrundbild */
}


#preloader {
	overflow: hidden;
	background: #ff5a27;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	position: fixed;
	z-index: 9999999;
	color: #fff;
}

#preloader .jumper {
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: block;
	position: absolute;
	margin: auto;
	width: 50px;
	height: 50px;
}

#preloader .jumper>div {
	background-color: #fff;
	width: 10px;
	height: 10px;
	border-radius: 100%;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	position: absolute;
	opacity: 0;
	width: 50px;
	height: 50px;
	-webkit-animation: jumper 1s 0s linear infinite;
	animation: jumper 1s 0s linear infinite;
}

#preloader .jumper>div:nth-child(2) {
	-webkit-animation-delay: 0.33333s;
	animation-delay: 0.33333s;
}

#preloader .jumper>div:nth-child(3) {
	-webkit-animation-delay: 0.66666s;
	animation-delay: 0.66666s;
}

@-webkit-keyframes jumper {
	0% {
		opacity: 0;
		-webkit-transform: scale(0);
		transform: scale(0);
	}

	5% {
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0;
	}
}

@keyframes jumper {
	0% {
		opacity: 0;
		-webkit-transform: scale(0);
		transform: scale(0);
	}

	5% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}




/* Header Style */
header {
	position: absolute;
	z-index: 99999;
	width: 100%;
	height: 80px;
	background-color: #232323;
	-webkit-transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

header .navbar {
	padding: 17px 17px;
}

.background-header .navbar {
	padding: 17px 17px;
}

.background-header {
	top: 0;
	position: fixed;
	background-color: #fff !important;
	box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
}

.background-header .navbar-brand h2 {
	color: #121212 !important;
}

.background-header .navbar-nav a.nav-link {
	color: #1e1e1e !important;
}

.background-header .navbar-nav .nav-link:hover,
.background-header .navbar-nav .active>.nav-link,
.background-header .navbar-nav .nav-link.active,
.background-header .navbar-nav .nav-link.show,
.background-header .navbar-nav .show>.nav-link {
	color: #ff5a27 !important;
}

.navbar .navbar-brand {
	float: left;
	margin-top: -12px;
	outline: none;
}

.navbar .navbar-brand h2 {
	color: #020202;
	text-transform: uppercase;
	font-size: 24px;
	font-weight: 700;
	-webkit-transition: all .3s ease 0s;
	-moz-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
}

.navbar .navbar-brand h2 em {
	font-style: normal;
	color: #ff5a27;
}

#navbarResponsive {
	z-index: 999;
}

.navbar-collapse {
	text-align: center;
}

.navbar .navbar-nav .nav-item {
	margin: 0px 15px;
}

.navbar .navbar-nav a.nav-link {
	text-transform: capitalize;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.5px;
	color: #fff;
	transition: all 0.5s;
	margin-top: 5px;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .active>.nav-link,
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link.show,
.navbar .navbar-nav .show>.nav-link {
	color: #fff;
	padding-bottom: 25px;
	border-bottom: 3px solid #ff5a27;
}

.navbar .navbar-toggler-icon {
	background-image: none;
}

.navbar .navbar-toggler {
	border-color: #fff;
	background-color: #fff;
	height: 36px;
	outline: none;
	border-radius: 0px;
	position: absolute;
	right: 30px;
	top: 20px;
}

.navbar .navbar-toggler-icon:after {
	content: '\f0c9';
	color: #ff5a27;
	font-size: 18px;
	line-height: 26px;
	font-family: 'FontAwesome';
}



/* Banner Style */
.banner {
	position: relative;
	text-align: center;
	padding-top: 80px;
}

.banner-item-01 {
	padding: 300px 0px;
	background-image: url(../images/slide_01.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.banner-item-02 {
	padding: 300px 0px;
	background-image: url(../images/slide_02.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.banner-item-03 {
	padding: 300px 0px;
	background-image: url(../images/slide_03.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.banner .banner-item {
	max-height: 600px;
}

.banner .text-content {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	width: 100%;
}

.banner .text-content h4 {
	color: #ff5a27;
	font-size: 22px;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 15px;
}

.banner .text-content h2 {
	color: #fff;
	font-size: 62px;
	text-transform: uppercase;
	letter-spacing: 5px;
}

.owl-banner .owl-dots .owl-dot {
	border-radius: 3px;
}

.owl-banner .owl-dots {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 30px;
}

.owl-banner .owl-dots .owl-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin: 0 10px;
	background-color: #fff;
	opacity: 0.5;
}

.owl-banner .owl-dots .owl-dot:focus {
	outline: none
}

.owl-banner .owl-dots .owl-dot.active {
	background-color: #fff;
	opacity: 1;
}



/* Latest Produtcs */

.latest-products {

	background-color: rgba(255, 255, 255, 0.5) !important;
	padding: 20px;
}


.latest-products .section-heading a {
	float: right;
	margin-top: -35px;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 700;
	color: #ff5a27;
}

.product-item {
	border: 1px solid #eee;
	margin-bottom: 30px;
}

.product-item .down-content {
	padding: 30px;
	position: relative;
}

.product-item img {
	width: 100%;
	overflow: hidden;
}

.product-item .down-content h4 {
	font-size: 17px;
	color: #1a6692;
	margin-bottom: 20px;
}

.product-item .down-content h6 {
	position: absolute;
	top: 30px;
	right: 30px;
	font-size: 18px;
	color: #121212;
}

.product-item .down-content p {
	margin-bottom: 20px;
}

.product-item .down-content ul li {
	display: inline-block;
}

.product-item .down-content ul li i {
	color: #ff5a27;
	font-size: 14px;
}

.product-item .down-content span {
	position: absolute;
	right: 30px;
	bottom: 30px;
	font-size: 13px;
	color: #ff5a27;
	font-weight: 500;
}


/* ebike Produtcs */

.ebike-products {
	margin-top: 100px;
	position: center;
}

.ebike-products .section-heading a {
	float: center;
	margin-top: -35px;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 700;
	color: #ff5a27;
}

.ebike-product-item {
	border: 1px solid #eee;
	margin-bottom: 30px;
}

.ebike-product-item .ebike-down-content {
	padding: 30px;
	position: relative;
}

.ebike-product-item img {
	width: 100%;
	overflow: hidden;
}

.ebike-product-item .ebike-down-content h4 {
	font-size: 17px;
	color: #1a6692;
	margin-bottom: 20px;
}

.ebike-product-item .ebike-down-content h6 {
	position: absolute;
	top: 30px;
	right: 30px;
	font-size: 18px;
	color: #121212;
}

.ebike-product-item .ebike-down-content p {
	margin-bottom: 20px;
}

.ebike-product-item .ebike-down-content ul li {
	display: inline-block;
}

.ebike-product-item .ebike-down-content ul li i {
	color: #ff5a27;
	font-size: 14px;
}

.ebike-product-item .ebike-down-content span {
	position: absolute;
	right: 30px;
	bottom: 30px;
	font-size: 13px;
	color: #ff5a27;
	font-weight: 500;
}


/* Best Features */

.about-features {
	margin-top: 100px !important;
}

.about-features p {
	border-bottom: 1px solid #eee;
	padding-bottom: 20px;
}

.about-features .container .row {
	padding-bottom: 0px !important;
	border-bottom: none !important;
	display: flex;
	flex-wrap: wrap;
}

.best-features {
	margin-top: 50px;
}

.best-features .container .row {
	border-bottom: 1px solid #eee;
	padding-bottom: 60px;
}

.best-features .row {
	display: flex;
	align-items: top;
	/* Vertikale Ausrichtung */
	flex-wrap: wrap;
	/* Damit es bei kleineren Bildschirmen umbrechen kann */
}

.best-features img {
	max-width: 100%;
	/* Bild passt sich der Spaltenbreite an */
	height: auto;
	/* Proportionen bleiben erhalten */
	display: block;
	/* Verhindert unerwünschte Lücken */
}

.best-features h4 {
	font-size: 17px;
	color: #1a6692;
	margin-bottom: 20px;
}

.best-features ul.featured-list li {
	display: block;
	margin-bottom: 10px;
}

.best-features p {
	margin-bottom: 25px;
}

.best-features ul.featured-list li a {
	font-size: 14px;
	color: #4a4a4a;
	font-weight: 300;
	transition: all .3s;
	position: relative;
	padding-left: 13px;
}

.best-features ul.featured-list li a:before {
	content: '';
	width: 5px;
	height: 5px;
	display: inline-block;
	background-color: #4a4a4a;
	position: absolute;
	left: 0;
	transition: all .3s;
	top: 8px;
}

.best-features ul.featured-list li a:hover {
	color: #ff5a27;
}

.best-features ul.featured-list li a:hover::before {
	background-color: #ff5a27;
}

.best-features .filled-button {
	margin-top: 20px;
}

/* Call To Action */

.call-to-action .inner-content {
	margin-top: 60px;
	padding: 30px;
	background-color: #f7f7f7;
	border-radius: 5px;
}

.call-to-action .inner-content h4 {
	font-size: 17px;
	color: #1a6692;
	margin-bottom: 15px;
}

.call-to-action .inner-content em {
	font-style: normal;
	font-weight: 700;
}

.call-to-action .inner-content .col-md-4 {
	text-align: right;
}

.call-to-action .inner-content .filled-button {
	margin-top: 12px;
}

.col-md-6 {
	flex: 1;
	min-width: 300px;
	/* Mindestbreite setzen */
}



/* Footer */

.page-heading,
.services,
.latest-products,
footer {
	position: relative;
	z-index: 1;
	/* Sicherstellen, dass der Inhalt oben bleibt */
	background: rgba(255, 255, 255, 0.5);
}

.page-heading::before,
.services::before,
.latest-products::before,
footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.5);
	z-index: -1;
	/* Hintergrund bleibt im Hintergrund */
	pointer-events: none;
	/* Verhindert Klickblockaden */
}

footer .inner-content {
	border-top: 1px solid #eee;
	margin-top: 60px;
	padding: 60px 0px;
}

footer .inner-content p {
	text-transform: uppercase;
}

footer .inner-content p a {
	color: #ff5a27;
	margin-left: 3px;
}

/* Product Page */

.products {
	margin-top: 100px;
}

.products .filters {
	text-align: center;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
	margin-bottom: 60px;
}

.products .filters li {
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 700;
	color: #121212;
	display: inline-block;
	margin: 0px 10px;
	transition: all .3s;
	cursor: pointer;
}

.products .filters ul li.active,
.products .filters ul li:hover {
	color: #ff5a27;
}

.products ul.pages {
	margin-top: 30px;
	text-align: center;
}

.products ul.pages li {
	display: inline-block;
	margin: 0px 2px;
}

.products ul.pages li a {
	width: 44px;
	height: 44px;
	display: inline-block;
	line-height: 42px;
	border: 1px solid #eee;
	font-size: 15px;
	font-weight: 700;
	color: #121212;
	transition: all .3s;
}

.products ul.pages li a:hover,
.products ul.pages li.active a {
	background-color: #ff5a27;
	border-color: #ff5a27;
	color: #fff;
}



/* Team Members */

.row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	/* Abstand zwischen den Boxen */
	justify-content: center;
	/* Zentriert die Boxen */
}

.col-md-4 {
	flex: 0 0 calc(33.333% - 20px);
	/* Drei Boxen pro Reihe, berücksichtigt den gap */
	box-sizing: border-box;
	/* Beugt Größenproblemen vor */
	display: flex;
	/* Für gleichmäßige Höhe */
}

.team-members {
	display: flex;
	flex-wrap: wrap;
	/* Damit sie umbrechen, wenn kein Platz mehr ist */
	gap: 20px;
	/* Abstand zwischen den Boxen */
	margin-top: 100px;
}

.team-member {
	flex: 1;
	/* Füllt die Spalten gleichmäßig aus */
	background-color: rgba(255, 255, 255, 0.9);
	margin: 0 auto;
	/* Zentriert den Inhalt */
	padding: 10px;
	/* Anpassbares Innenpadding */
	box-sizing: border-box;
	/* Verhindert, dass Padding die Gesamtbreite beeinflusst */
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.team-member img {
	width: 100%;
	overflow: hidden;
}

.team-member .down-content {
	padding: 30px;
	text-align: center;
}

.team-member .thumb-container {
	position: relative;
}

.team-member .thumb-container .hover-effect {
	position: absolute;
	background-color: rgba(252, 68, 12, 0.9);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: all .5s;
}

.team-member .thumb-container .hover-effect .hover-content {
	position: absolute;
	display: inline-block;
	width: 100%;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
}

.team-member .thumb-container .hover-effect .hover-content ul.social-icons li a:hover {
	background-color: #fff;
	color: #ff5a27;
}

.team-member:hover .hover-effect {
	visibility: visible;
	opacity: 1;
}

.team-member .down-content h4 {
	font-size: 17px;
	color: #1a6692;
	margin-bottom: 8px;
}

.team-member .down-content span {
	display: block;
	font-size: 13px;
	color: #ff5a27;
	font-weight: 500;
	margin-bottom: 20px;
}

.team-member:last-child {
	margin-bottom: 0;
}


/* Services */

.services {
	background-image: url(../images/VIER_Cycles_Logo.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	padding: 20px 0px;
	background-color: rgba(255, 255, 255, 0.5);
}

.services .service-item {
	text-align: center;
}

.services .service-item .icon {
	background-color: #f7f7f7;
	padding: 40px;
}

.services .service-item .icon i {
	width: 100px;
	height: 100px;
	display: inline-block;
	text-align: center;
	line-height: 100px;
	background-color: #ff5a27;
	color: #fff;
	font-size: 32px;
}

.services .service-item .down-content {
	background-color: #fff;
	padding: 40px 30px;
}

.services .service-item .down-content h4 {
	font-size: 17px;
	color: #1a6692;
	margin-bottom: 20px;
}

.services .service-item .down-content p {
	margin-bottom: 25px;
}

.services .container {
	background-color: rgba(255, 255, 255, 0.8);
	/* Halbtransparenter weißer Hintergrund */
	padding: 20px;
	/* Abstand innen für bessere Lesbarkeit */
	border-radius: 10px;
	/* Optional: Abgerundete Ecken für einen moderneren Look */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	/* Optional: Schatten für bessere Lesbarkeit */
}


/* Clients */

.happy-clients {
	margin-top: 100px;
	margin-bottom: 40px;
}

.happy-clients .client-item img {
	max-width: 100%;
	overflow: hidden;
	transition: all .3s;
	cursor: pointer;
}

.happy-clients .client-item img:hover {
	opacity: 0.8;
}




/* Find Us */

.find-us {
	margin-top: 100px;
}

.find-us p {
	border-bottom: 1px solid #eee;
	padding-bottom: 30px;
	margin-bottom: 30px;
}

.find-us h4 {
	font-size: 17px;
	color: #1a6692;
	margin-bottom: 20px;
}

.find-us .left-content {
	margin-left: 30px;
	padding: 20px;
	/* Optional: Für etwas Abstand um den Text */
}



/* Send Message */

.send-message {
	margin-top: 100px;
}

.contact-form input {
	font-size: 14px;
	width: 100%;
	height: 44px;
	display: inline-block;
	line-height: 42px;
	border: 1px solid #eee;
	border-radius: 0px;
	margin-bottom: 30px;
}

.contact-form input:focus {
	box-shadow: none;
	border: 1px solid #eee;
}

.contact-form textarea {
	font-size: 14px;
	width: 100%;
	min-width: 100%;
	min-height: 120px;
	height: 120px;
	max-height: 180px;
	border: 1px solid #eee;
	border-radius: 0px;
	margin-bottom: 30px;
}

.contact-form textarea:focus {
	box-shadow: none;
	border: 1px solid #eee;
}

.contact-form button.filled-button {
	background-color: #ff5a27;
	color: #fff;
	font-size: 14px;
	text-transform: capitalize;
	font-weight: 300;
	padding: 10px 20px;
	border-radius: 5px;
	display: inline-block;
	transition: all 0.3s;
	border: none;
	outline: none;
	cursor: pointer;
}

.contact-form button.filled-button:hover {
	background-color: #121212;
	color: #fff;
}

.accordion {
	margin-left: 30px;
}

.accordion a {
	cursor: pointer;
	font-size: 17px;
	color: #1a6692 !important;
	margin-bottom: 20px;
	transition: all .3s;
}

.accordion a:hover {
	color: #ff5a27 !important;
}

.accordion a.active {
	color: #ff5a27 !important;
}

.accordion li .content {
	display: none;
	margin-top: 10px;
}

.accordion li:first-child {
	border-top: 1px solid #eee;
}

.accordion li {
	border-bottom: 1px solid #eee;
	padding: 15px 0px;
}

.custom-icon {
    width: 50px; /* Standardgröße */
    padding: 0px; /* Abstand um das Bild herum */
	background-color: #fff;
    transition: transform 0.3s ease-in-out;
}

  .custom-icon:hover {
    transform: scale(1.3); /* Vergrößert das Icon beim Hover */
  }

/* Responsive Style */
@media (max-width: 768px) {
	.banner .text-content {
		width: 90%;
		margin-left: 5%;
	}

	.banner .text-content h4 {
		font-size: 22px;
	}

	.banner .text-content h2 {
		font-size: 36px;
		letter-spacing: 0.5px;
	}

	.banner-item-01,
	.banner-item-02,
	.banner-item-03 {
		padding: 180px 0px;
	}

	.page-heading .text-content h4 {
		font-size: 22px;
	}

	.page-heading .text-content h2 {
		font-size: 36px;
		letter-spacing: 0.5px;
	}

	.latest-products .section-heading a {
		float: none;
		margin-top: 0px;
		display: block;
		margin-bottom: 20px;
	}

	.product-item .down-content h4 {
		margin-bottom: 20px !important;
	}

	.product-item .down-content h6 {
		position: absolute !important;
		top: 30px !important;
		right: 30px !important;
	}

	.product-item .down-content span {
		position: absolute !important;
		right: 30px !important;
		bottom: 30px !important;
	}

	.best-features .left-content {
		margin-bottom: 30px;
	}

	.call-to-action .inner-content {
		text-align: center;
	}

	.call-to-action .inner-content .filled-button {
		text-align: center;
		width: 100%;
		margin-top: 20px;
	}

	.about-features img {
		margin-bottom: 30px;
	}

	.service-item {
		margin-bottom: 30px;
	}

	.find-us #map {
		margin-bottom: 30px;
	}

	.find-us .left-content {
		margin-left: 0px;
	}

	.send-message .accordion {
		margin-top: 30px;
		margin-left: 0px;
	}

	.page-heading,
	.services,
	.latest-products,
	footer {
		background-color: rgba(255, 255, 255, 0.7);
		/* Kräftigere Transparenz */
		padding: 20px;
		/* Etwas mehr Platz */
		min-height: 200px;
		/* Sicherstellen, dass alles sichtbar ist */
	}

	body {
		background-attachment: fixed;
		/* Versucht das Bild fixiert zu halten */
		background-size: auto;
		/* Beibehaltung der Abdeckung in der Breite */
		background-position: center top;
		/* Sicherstellen, dass es zentriert bleibt */
		background-color: rgba(255, 255, 255, 0.7)
	}

	.col-md-4 {
		flex: 0 0 100%;
		/* Volle Breite */
		max-width: 100%;
	}

	.team-members {
		gap: 10px;
		/* Optional: Weniger Abstand für kleinere Bildschirme */
	}
}

@media (max-width: 992px) {
	.navbar .navbar-brand {
		position: absolute;
		left: 30px;
		top: 32px;
	}

	.navbar .navbar-brand {
		width: auto;
	}

	.navbar:after {
		display: none;
	}

	#navbarResponsive {
		z-index: 99999;
		position: absolute;
		top: 80px;
		left: 0;
		width: 100%;
		text-align: center;
		background-color: #fff;
		box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
	}

	.navbar .navbar-nav .nav-item {
		border-bottom: 1px solid #eee;
	}

	.navbar .navbar-nav .nav-item:last-child {
		border-bottom: none;
	}

	.navbar .navbar-nav a.nav-link {
		padding: 15px 0px;
		color: #1e1e1e !important;
	}

	.navbar .navbar-nav .nav-link:hover,
	.navbar .navbar-nav .active>.nav-link,
	.navbar .navbar-nav .nav-link.active,
	.navbar .navbar-nav .nav-link.show,
	.navbar .navbar-nav .show>.nav-link {
		color: #ff5a27 !important;
		border-bottom: none !important;
		padding-bottom: 15px;
	}

	.product-item .down-content h4 {
		margin-bottom: 10px;
	}

	.product-item .down-content h6 {
		position: relative;
		top: 0;
		right: 0;
		margin-bottom: 20px;
	}

	.product-item .down-content span {
		position: relative;
		right: 0;
		bottom: 0;
	}
}

.one-slide {
	border-radius: 3px;
	margin-left: 1rem;
	margin-right: 1rem;
	font-size: 1.1rem;
	height: 300px;
}

/* Callout box - fixed position at the bottom of the page */
.callout {
	position: fixed;
	bottom: 35px;
	right: 20px;
	margin-left: 20px;
	max-width: 300px;
}

/* Callout header */
.callout-header {
	padding: 25px 10px;
	background: #555;
	font-size: 30px;
	color: white;
	text-align: center;
	border-radius: 0.25rem;
}

/* Callout container/body */
.callout-container {
	padding: 15px;
	border: none;
	background-color: #ccc;
	color: black;
	border-radius: 0.25rem;
}

.callout-container:hover {
	opacity: 1
}

.callout-containerbtn {
	background-color: #ccc;
	border: none;
	color: black;
	padding: 10px 32px;
	text-align: center;
	font-size: 15px;
	margin: 4px 2px;
	opacity: 0.5;
	transition: 0.3s;
}

.callout-containerbtn:hover {
	opacity: 1;
	border: none;
}

/* Close button */
.closebtn {
	position: absolute;
	top: 5px;
	right: 10px;
	color: white;
	font-size: 30px;
	cursor: pointer;
}

/* Change color on mouse-over */
.closebtn:hover {
	color: lightgrey;
}

/* Chat */

.example {
	border: none;
	display: inline-block;
	background: #000000;
	color: #fff;
	padding: 1em;
	border-radius: .25rem;
	margin: 0 1rem 0 0;
	width: 23rem;
}

.example-title {
	display: inline-block;
	border-bottom: 1px solid #ccc;
	width: 100%;
	margin: 0 0 1rem;
	font-size: 1.2rem;
	line-height: 2;
}

.alert {
	border: 1px solid transparent;
	border-radius: 0.25rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	padding: 0.75rem 1.25rem;
	background-color: #cce5ff;
	border-color: #b8daff;
	color: #004085;
}

.alert-primary {
	background-color: #cce5ff;
	border-color: #b8daff;
	color: #ff5a27;
}

.alert-secondary {
	background-color: #e7e8ea;
	border-color: #dddfe2;
	color: #464a4e;
}

.alert-success {
	background-color: #d4edda;
	border-color: #c3e6cb;
	color: #155724;
}

.alert-danger {
	background-color: #f8d7da;
	border-color: #f5c6cb;
	color: #721c24;
}

input[type="text"],
select {
	background-clip: padding-box;
	background-color: #fff;
	background-image: none;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0.25rem;
	color: #495057;
	display: block;
	font-size: 1rem;
	line-height: 1.25;
	padding: 0.5rem 0.75rem;
	transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
	width: 100%;
}

input[type="text"]:focus,
select:focus {
	background-color: #fff;
	border-color: #80bdff;
	color: #495057;
	outline: 0 none;
}

input[type="text"]::placeholder,
select::placeholder {
	color: #868e96;
	opacity: .5;
}

.btn {
	user-select: none;
	border: 1px solid #ff5a27;
	border-radius: 0.25rem;
	display: inline-block;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.25;
	padding: 0.5rem 0.75rem;
	text-align: center;
	transition: all 0.15s ease-in-out 0s;
	vertical-align: middle;
	white-space: nowrap;
	background-color: #ff5a27;
	color: #fff;
	margin: 0.5rem 0 0;
	text-transform: uppercase;
	cursor: pointer;
}

.btn:hover {
	background-color: #ff5a27;
	border-color: #0062cc;
	color: #fff;
}

.btn.focus,
.btn:focus {
	box-shadow: 0 0 0 3px rgba(255, 81, 0, 0.5);
	outline: 0 none;
}

.btn:focus,
.btn:hover {
	text-decoration: none;
}

.btn:disabled {
	background-color: #868e96;
	border-color: #868e96;
	opacity: 0.65;
}

.btn-custom {
	background-color: #ff5a27;
	border-color: #ff5a27;
	color: #fff;
	font-size: 14px;
	padding: 10px 20px;
	border-radius: 5px;
	transition: all 0.3s ease-in-out;
	text-transform: uppercase;
}

.btn-custom:hover {
	background-color: #e04b21;
	/* Etwas dunklerer Farbton für Hover-Effekt */
	border-color: #e04b21;
	color: #fff;
}

.contactNumber {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
}

.contactNumber input {
	width: 15rem;
}

.hide {
	display: none;
}

/* Chat end */

/* Confetti */

.confetti-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 9999;
}

.confetti {
	position: absolute;
	width: 12px;
	height: 20px;
	background-color: #ff6a27;
	border-radius: 50%;
	animation: confetti-fall 5s infinite;
}

@keyframes confetti-fall {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(100vh);
	}
}

/* Demo Card */

.demo-card-wide.mdl-card {
	width: 512px;
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.demo-card-wide>.mdl-card__title {
	color: #fff;
	height: 176px;
	background: url(../images/bicycle-g5476e946d_1280.jpg) center / cover;
}

.demo-card-wide>.mdl-card__menu {
	color: #fff;
}

#surfly-session-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0, 8);
	opacity: 0;
	pointer-events: none;
}

.dialog {
	position: fixed;
	left: 50%;
	right: 50%;
	transform: translate(-50%, -50%);
	padding: 20px;
	background-color: white;
	color: black;
	border-radius: 8px;
	box-shadow: 8px 8px 16px rgba(255, 255, 255, 0.1);
	opacity: 0;
	pointer-events: none;
	transition: opacity 30ms ease-in-out;
}

.hidden {
	display: none;
}

#surfly-session-modal.sichtbar,
dialog.sichtbar {
	opacity: 1;
	pointer-events: auto;
}

#session-start {
	width: 25%;
}

/* Wrapper zentriert die gesamte Komponente */
.icon-wrapper {
	display: flex;
	justify-content: center;
	/* Zentriert horizontal */
	align-items: center;
	/* Zentriert vertikal, falls nötig */
	height: 100px;
	/* Höhe des Bereichs, anpassen bei Bedarf */
}

/* Hintergrund und Ausrichtung des Icons */
.icon-container {
	width: 75px;
	height: 75px;
	display: flex;
	justify-content: center;
	background-color: #fff;
	align-items: center;
	transition: transform 0.3s ease, background-color 0.3s ease;
	/* Animation für Hover */	
}

/* Stil für das Icon */
.glowing-icon {
	font-size: 24px;
	/* Icon-Größe */
	color: #ff6a27;
	/* Hauptfarbe */
	text-shadow: 0 0 10px #ff6a27, 0 0 20px #ff6a27, 0 0 30px #ff6a27, 0 0 40px #ff6a27;
	/* Glow */
	transition: transform 0.3s ease;
	/* Animation für Hover */
}

/* Hover-Effekt */
.icon-container:hover {
	transform: scale(1.2);
	/* Hintergrund vergrößern */
	background-color: #ffe6d9;
	/* Optional: Hintergrundfarbe ändern */
}

.icon-container:hover .glowing-icon {
	transform: scale(1.5);
	/* Icon vergrößern */
}