@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

a{
    text-decoration: none;
}
ul{
    text-decoration: none;
    list-style-type: none;
}

html, body{
    overflow-x: hidden !important; 
    max-width: 100% !important;
    position: relative;
}


/* navBar styling */

:root {
    --background-color: #C0C0C0;
    --text-color: black;
    --accent-color: #41DCE1;
    --navbar-height: 80px;
}

/* NAVBAR WITH TOGGLE*/

.navbar-section{
    background-color: var(--background-color);
    width: 100%;
}

/* Navbar-Container */
.navbar {
    display: flex;
    padding: 20px;
    align-items: center;
    justify-content: space-between;  
}

header .navbar{
    display: flex;
    padding: 20px;
    align-items: center;
    justify-content: space-between;  
}

.navbar .nav_menu .nav_link {
    color: black;
    padding: 10px 18px;
    font-size: 10px,18px;
    border-radius: 18px 25px;
    transition: 0.3 ease;
}
.navbar .nav_menu .nav_link:hover {
    color: white;
    background-color: black;

}
/* Logo Container */
.logo-container {
    display: flex;
    align-items: center;
    gap: 0px; /* Abstand zwischen Logo und Text */
}

.logo-image {
    width: 110px; /* Logo-Größe */
    height: auto;
    background-color: #C0C0C0;
    filter: brightness(0.75);
}

.logotext {
    font-size: 1.8rem;
    font-weight: 600;
    color: black;
}

.navbar .navlogo .logotext{
    color: black;
    font-size: 2rem;
    font-weight: 600;

}
/* Navigation-Menü */
.nav_menu {
    display: flex;
    gap: 30px;
    margin-right: 100px;
}

.nav_item {
    list-style: none;
}

.navbar .nav_menu .nav_link {
    color: black;
    padding: 10px 18px;
    font-size: 10px,18px;
    border-radius: 18px 25px;
    transition: 0.3 ease;
}
.navbar{
    background-color: #C0C0C0;
}

.nav_link:hover {
    color: white;
    background-color: black;
}

/* Toggle-Button für mobile Ansicht */
nav input[type="checkbox"] {
    display: none;
}

.toggle_button {
    width: 30px;
    height: 23px;
    position: absolute;
    top: 65px;
    right: 25px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.bar {
    height: 4px;
    width: 100%;
    background: var(--text-color);
    border-radius: 100px;
}

.section-content{
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1200px;
}

/* Insta-LOGO NAV*/
.social-link i {
    font-size: 20px; /* Instagram-Icon-Größe */
}
/* hero-designs*/
.hero {
    display: flex;
    flex-direction: column;  /* Stellt sicher, dass die Bilder und der Text untereinander sind */
    justify-content: center; /* Zentriert den Inhalt vertikal */
    align-items: center;     /* Zentriert den Inhalt horizontal */
    text-align: center;      /* Text wird horizontal zentriert */
    padding: 40px;
}

.hero-image-container{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

.hero-image{
    width:750px; 
    height: 575px;
    display: block;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}



@keyframes slider{
    0%{transform: translateX(0%);}
    10%{transform: translateX(-100%);}
    20%{transform: translateX(-100%);}
    30%{transform: translateX(-200%);}
    40%{transform: translateX(-200%);}
    50%{transform: translateX(-200%);}
    60%{transform: translateX(-300%);}
    70%{transform: translateX(-300%);}
    80%{transform: translateX(-300%);}
    90%{transform: translateX(0%);}
    100%{transform: translateX(0%);}
}
.hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  /* Zentriert den Text horizontal */
    text-align: center; 
    /*Animation_code */
    opacity: 0;
    transform: translate(-100%);
    transition: all 2s;  
    /* Stellt sicher, dass der Text zentriert wird */
}
.hero-text h1 {
    font-size: 2.5rem;
    margin-bottom: 0px;
    text-shadow: 1px 0px 1px #000000;
    
}

.hero-text p {
    font-size: 1.5rem;
    margin-bottom: 20px;
    padding-left: 120px;
    padding-right: 120px;
    max-width: 1000px;
}

.hero-text h3 {
    font-size: 1.5rem;
    margin-top: 70px;
    margin-bottom: 20px;
    text-align: center;
}

.hero-text ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 20px;
    align-items: center;
    display: inline-flex;
    flex-direction: column;
}

.hero-text ul li {
    font-size: 1.1rem;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.gotoProducts {
    font-size: 1.2rem;
    margin-bottom: 30px;
    background-color: #000;
    color: white;
    padding: 10px 18px;
    border-radius: 18px 25px;
    transition: 0.3 ease;
}
.gotoProducts:hover {
    color: white;
    background-color: #333;
}
/** quality and material section**/
.quality-section {
    background-image: url('/img/background_brown.jpg'); /* Hier den Pfad zum Bild anpassen */
    background-size: cover;         /* Skaliert das Bild, damit es den gesamten Bereich abdeckt */
    background-position: center;    /* Zentriert das Bild im Hintergrund */
    padding: 100px 20px;             /* Abstand innen, damit der Text nicht direkt am Rand ist */
    color: white;                   /* Weißer Text für besseren Kontrast */
    text-align: center;
}

.quality-section h2 {
    font-size: 3.0rem;
    margin-bottom: 20px;
}

.quality-section p, .quality-section ul {
    font-size: 1.5rem;
    max-width: 820px;               /* Begrenzte Breite für bessere Lesbarkeit */
    margin: 0 auto;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.6); /* Dunkler Hintergrund mit Transparenz für den Textbereich */
    border-radius: 10px;
}
.strong-text-materials{
    margin-right: 5px;
    color: #a79951  
}

/*Configuration-Section*/
.configuration-section{
    display: grid; 
    grid-template-columns: 1fr 1fr; /* Zwei Spalten: 1fr (für Inhalt) und 1fr (für Bilder) */
    padding: 50px;
    box-sizing: border-box;
    min-height: 60vh;  /* Stellt sicher, dass der Container die volle Höhe des Viewports hat */
    background-color: #C0C0C0;
}

.configuration-section{
    opacity: 0;
    filter: blur(5px);
    transform: translate(-100%);
    transition: all 1s;
}

.configuration-section .content{
    display: flex;
    flex-direction: column; 
    margin-top: 180px;
    align-items: center; /* Text bleibt links ausgerichtet */
    padding: 10px;  /* Abstand im Inhalt */
}

.configuration-section .content h1 {
    font-size: 2.5rem;  /* Größere Schrift für Überschrift */
    font-weight: 700;   /* Fetter Text */
    color: black;        /* Dunklere Farbe für bessere Lesbarkeit */
    margin-bottom: 5px;
    text-align: center;
    position: relative;
    display: inline-block;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Leichter Schatten */
}
.configuration-section .content h2 {
    font-size: 1.8rem;
    font-weight: 300;
    color: black;        /* Etwas hellere Farbe */
    margin-bottom: 0px;
    text-align: center;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
}

.links{
    margin-top: 10px;
    margin-right: 50px;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
   
}

.configuration-button{
    font-size: 1.2rem;
    color: white;
    background-color: #000;
    padding: 10px 18px;
    border-radius: 18px 25px;
    transition: 0.3 ease;
}

.configuration-button:hover{
    color: white;
    background-color: rgb(4, 69, 20);
}


.configuration-section .image-stack{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;  /* Bilder starten am oberen Rand */
    align-items: center;  /* Bilder horizontal zentrieren */
    position: relative;
}

.configuration-section .hoodie_component{
    position: absolute;
    width: 475px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-radius: 10px;
}
.configuration-secti .hoodie_component:nth-child(1) {
    top: 0;
    left: 0;
    z-index: 3;
    transform: translateX(-15%);
    transform: translateY(30%);
}
.configuration-section .hoodie_component:nth-child(2) {
    top: 15%;
    left: 10%;
    z-index: 1;
    transform: translateX(10%); /* Leicht verschoben */
    transform: translateY(-10%);
}
.configuration-section .hoodie_component:nth-child(3) {
    top: 10%;
    left: 30%;
    z-index: 2;
    transform: translateX(0); /* Normale Position */
    transform: translateY(5%);
}
.show{
    opacity: 1;
    filter: blur(0);
    transform: translate(0);
}

/*Feedback-Section*/
.feedback {
    min-height: 45vh;
    background-color: #333;
    margin-top: -32px;
}

.feedback h1 {
    padding-top: 20px;
    font-size: 2.5rem; /* Größere Schrift für Überschrift */
    font-weight: 700; /* Fetter Text */
    color: #ffffff; /* Dunklere Farbe für bessere Lesbarkeit */
    text-align: center;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.container-feedback {
    position: relative;
    overflow: hidden; /* Verhindert das Überschreiten des Containers */
}

.container-feedback .wrapper-feedback {
    width: 100%; /* Flexible Breite für verschiedene Geräte */
    height: auto;
    margin: 3rem auto;
    overflow: hidden;
}

.container-feedback .feedback-holder {
    display: flex; /* Flexbox für horizontale Anordnung */
    scroll-snap-type: x mandatory; /* Snap-Effekt für Scrollen */
    overflow-x: auto; /* Horizontales Scrollen ermöglichen */
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
}

.container-feedback .feedback-holder > div {
    flex-shrink: 0; /* Verhindert, dass die Slides kleiner werden */
    width: 100%; /* Slide nimmt die gesamte Breite ein */
    max-width: 600px; /* Maximale Breite für Feedback-Text */
    padding: 1rem; /* Abstand innerhalb des Containers */
    box-sizing: border-box;
    background-color: #444; /* Leicht abgehobener Hintergrund */
    border-radius: 10px;
}

.feedback-paragraphs {
    font-size: 1.4rem;
    color: white;
    word-wrap: break-word; /* Lässt den Text umbrechen */
    text-align: center; /* Text zentrieren */
    line-height: 1.6; /* Bessere Lesbarkeit */
}

.feedback-cite {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    margin-top: 0.5rem;
}


/*FAQ-section*/
.faq-section{
    min-height: 60vh;
    width: 100%;
    margin-top: -51px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #C0C0C0;
}

.faq-title{
    font-size: 2.5rem;
    margin: 2rem 0rem;
}

.faq-container{
    max-width: 700px;
    min-width: 700px;
    margin-top: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgb(249, 224, 1);
    cursor:pointer;
}

.question-1{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.question-1 h3{
    font-size: 1.8rem;
}

.answer-1 p{
    padding-top: 1rem;
    line-height: 1.6;
    font-size: 1.4rem;
}

.answer-1{
    max-height: 0;
    overflow: hidden;
    transition: max-height 1.4s ease;
}

.faq-container.active .answer-1{
    max-height: 300px;
    animation: fade 1s ease-in-out;
}

.faq-container.active svg{
    transform: rotate(180deg);
}
svg{
    transition: transform 0.5s ease-in;
}

/*footer*/
.footer-container{
	max-width: 1170px;
	margin:auto;
}
.footer-row{
	display: flex;
	flex-wrap: wrap;
}
ul{
	list-style: none;
}
.footer{
	background-color: #000;
    padding: 70px 0;
}
.footer-col{
   width: 25%;
   padding: 0 15px;
}
.footer-col h4{
	font-size: 18px;
	color: #C0C0C0;
	text-transform: capitalize;
	margin-bottom: 35px;
	font-weight: 500;
	position: relative;
}
.footer-col h4::before{
	content: '';
	position: absolute;
	left:0;
	bottom: -10px;
	background-color: #e91e63;
	height: 2px;
	box-sizing: border-box;
	width: 50px;
}
.footer-col ul li:not(:last-child){
	margin-bottom: 10px;
}
.footer-col ul li a{
	font-size: 16px;
	text-transform: capitalize;
	color: #C0C0C0;
	text-decoration: none;
	font-weight: 300;
	color: #C0C0C0;
	display: block;
	transition: all 0.3s ease;
}
.footer-col ul li a:hover{
	color: #ffffff;
	padding-left: 8px;
}
.footer-col .social-links a{
	display: inline-block;
	height: 40px;
	width: 40px;
	background-color: rgba(255,255,255,0.2);
	margin:0 10px 10px 0;
	text-align: center;
	line-height: 40px;
	border-radius: 50%;
	color: #C0C0C0;
	transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
	color: #24262b;
	background-color: #ffffff;
}

@keyframes fade{
    from{
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

@media (max-width: 1000px) {
    .hero-image{
        width: 450px;
        height: auto;
    }

    .hero-text p{
        padding-left: 40px;
        padding-right: 40px;
    }

    .quality-section ul li{
       margin-top: 20px;
    }

    .configuration-section{
        display: flex;
        flex-direction: column;
        padding: 20px;

    }

    .configuration-section .content{
        order: 1;
        text-align: center;
        margin-top: 400px;
    }

    .configuration-section .image-stack{
        order: 2;
        position: absolute;
        justify-content: flex-start;
        align-items: center;
        padding-left: 160px;
        padding-top: 30px;
    }

    .configuration-section .hoodie_component{
        width:350px;
        margin-top:25px;
    }

    .configuration-section .hoodie_component:nth-child(1) {
        transform: translate(-40px);
    }

    .links{
        margin-left: 40px;
    }
    .feedback h1 {
        font-size: 2rem; /* Kleinere Schriftgröße */
        margin-top: 20px;
    }

    .container-feedback .wrapper-feedback {
        margin: 1rem auto;
    }

    .container-feedback .feedback-holder > div {
        width: 100%; /* Vollbreite für Mobilgeräte */
        max-width: 90%; /* Breite begrenzen, damit der Inhalt nicht zu schmal wird */
    }

    .feedback-paragraphs {
        font-size: 1.2rem; /* Kleinere Schriftgröße */
        padding: 0 1rem; /* Abstand innerhalb des Containers */
    }

    .feedback-cite {
        font-size: 1rem;
        padding: 0 1rem;
    }
    .faq-section {
        margin-top: 0;  /* Entfernt den negativen Margin oben */
    }

    .faq-title {
        font-size: 2.5rem;  /* Schriftgröße für die mobile Ansicht anpassen */
        margin: 1rem 0;
        margin-left: 15px;
    }

    .faq-container {
        width: 90%;  /* Container breiter als 100%, z.B. 90% der Bildschirmbreite */
        max-width: 700px;  /* Maximale Breite des Containers */
        padding: 1rem 0;
        margin-top: 0.5rem;
        min-width: 320px;  /* Stellt sicher, dass der Container auf kleinen Bildschirmen nicht zu schmal wird */
    }

    .question-1 h3 {
        font-size: 1.4rem;  /* Kleinere Schriftgröße für Fragen auf mobilen Geräten */
    }

    .answer-1 p {
        font-size: 1.5rem;  /* Kleinere Schriftgröße für Antworten */
    }

    svg {
        width: 20px;
        height: 12px;
    }

    .toggle_button {
        display: flex;
    }
    .nav_menu {
        height: auto;
        width: 100%;
        background-color: #000;
        display: block;
        position: absolute;
        top: 110px;
        left: 0;
        flex-direction: column;
        padding: 0;
        align-items: center;
        transform: translateX(100%); /* Startposition außerhalb des Bildschirms */
        opacity: 0; /* Unsichtbar */
        visibility: hidden; /* Versteckt */
    }
    .navbar-section{
        min-height: 21vh;
    }

    .nav_item {
        width: 100%;
        height: auto;
    }

    .nav_menu a {
        padding: 30px 0;
    }

    #toggle_button:checked ~ .nav_menu {
        opacity: 1; /* Sichtbar */
        visibility: visible; /* Interaktion erlauben */
        transform: translateX(0); /* Gleitet in den sichtbaren Bereich */
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s; /* Keine Verzögerung bei Sichtbarkeit */
    }

    #toggle_button:not(:checked) ~ .nav_menu {
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s; /* Visibility nach der Animation */
    }

    .navbar .nav_menu .nav_link {
        padding: 0 10px; /* Kleinere Padding für mobile Ansicht */
        font-size: 20px; /* Kleinere Schriftgröße für mobile Ansicht */
        border-radius: 0px;
        color: white;
        background-color: #000;
    }

    .nav_menu .nav_item {
        border-bottom: 2px solid #C0C0C0; /* Trennlinie */
    }
    
    /* Entfernt den Border vom letzten .nav_item */
    .nav_menu .nav_item:last-child {
        border-bottom: none; /* Keine Linie für das letzte Element */
    }

    .nav_item {
        height: min-content;
        width: 100%;
        text-align: center;
    }
    .nav_link .social-link{
        padding: 30px 0px;
    }

    .nav_menu .nav_item .nav_link:active,
    .nav_menu .nav_item .nav_link:focus {
        color: #fff;
        background-color: #8a8989;
    }

}

/*responsive footer */
@media(max-width: 851px){
    .footer-col{
      width: 50%;
      margin-bottom: 30px;
  }
  }
  @media(max-width: 574px){
    .footer-col{
      width: 100%;
  }
  }