* {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    background-color: #201f1d;
    color: #f3f4f1;
}

h1, h2, p {
    margin: 0;
}

section.hero {
    max-width: 100%;
    min-width: 100%;
    min-height: 100vh;
    max-height: 100vh;

}

.backgroud-vid {
    width: 100%;
    height: 100vh;
    position: absolute;
    opacity: 0.1;
}

.logo-hero {
    position: relative;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
}

.trailer-vid {
    position: relative;
    width: 100%;
}

.trailer-vid .vid {
position: relative;
left: 50%;
transform: translateX(-50%);
    width: 560px;
    height: 315px;
    border-radius: 70px;

}

.button {
    width: 100%;
    display: flex;
    justify-content: center; /* Centrer les boutons horizontalement */
    gap: 20px; /* Espacement entre Discord et Press Kit */
    margin-bottom: 20px; /* Ajout d'espace sous les boutons */
}

.button .discord, .button .presskit {
    width: 20vh;
    height: 5vh;
    background-color: #424549;
    border-radius: 10px;
    position: relative;
}

.button .steam {
    position: relative;
    width: 60vh;
    height: 8vh;
    background-color: #171a21;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10
}    


.discord1 {
    width: 20%;
    max-height: 100%;
    left: 5%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.discord1 img {
    width: 100%;
}

.discord2 {
    width: 85%;
    max-height: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    left: 10%;
    text-align: center;
    float: right;
    color: #000000;
    size: 20px;

}

.steam {
position: relative;
width: 60vh;
height: 8vh;
background-color: #171a21;
left: 50%;
transform: translateX(-50%);
border-radius: 10px;
margin-top: 20px; /* Ajout d'espace au-dessus du bouton Steam */
}


.steam1 {
    width: 10%;
    left: 5%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.steam1 img {
    width: 100%;
}

.steam2 {
    width: 85%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    left: 5%;
    float: right;
    color: white;
    size: 20px;
}

.faq-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribue les questions de manière égale */
    max-width: 800px;
    width: 100%;
    height: 100vh; /* Assure que la section FAQ occupe toute la hauteur de la fenêtre */
    margin: 0 auto;
    margin-top: 5vh;
    margin-bottom: 5vhz;
    padding: 20px;
    background-color: #ffffff0d;        
    border-radius: 50px;
}

.backgroundblur {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribue les questions de manière égale */
    max-width: 800px;
    width: 100%;
    height: 90vh; /* Assure que la section FAQ occupe toute la hauteur de la fenêtre */
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff0d;    
    border-radius: 50px;
}

.faq-item {
    flex: 1; /* Permet aux éléments d'occuper un espace égal */
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: space-between;
    justify-content: space-between;
    opacity: 1; 
    z-index: 99;
}

.faq-question {
    background-color: transparent;
    border: none;
    padding: 15px;
    width: 100%;
    text-align: left;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    color: white;
    border-bottom: 1px solid #ddd;
    flex-grow: 1; /* Remplit l'espace vertical de l'élément parent */
    opacity: 1;
    z-index: 99;


}

.faq-section h2 {
    text-align: center;
    opacity: 1;

}

.faq-question:hover {
    background-color: #e2e2e2;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    background-color: transparent;
    padding: 0 10px;
    opacity: 1;

}

.faq-question.active + .faq-answer {
    max-height: 200px; /* Ajuste cette valeur en fonction de la taille de tes réponses */
    padding: 10px;
    opacity: 1;

}

/* About Section */
.about-section {
padding: 80px 20px;
text-align: center;
background-color: #202020;
}

.about-content {
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
}

.about-content h2 {
font-size: 2.5rem;
margin-bottom: 20px;
color: #ffffff;
}

.about-content p {
font-size: 1.1rem;
margin-bottom: 20px;
color: #cccccc;
}

.about-content a {
font-size: 1.1rem;
margin-bottom: 20px;
color: #cccccc;
}

.about-content a:hover {
font-size: 1.1rem;
margin-bottom: 20px;
color: #434343;
}

/* Parallax Section */
.parallax-section {
position: relative;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
color: #fff;
text-align: center;
background: url('https://img.gg.deals/e9/81/7341ef836400d7bf07698f6fe4acbfed3f39_1920xt1080_S1000.jpg') no-repeat center center/cover;
perspective: 1000px; /* Permet un effet de profondeur */
}

.parallax-content {
transform-style: preserve-3d;
animation: fadeIn 2s ease-in-out;
z-index: 2; /* Place le contenu au-dessus du fond */
}

.parallax-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent pour lisibilité */
z-index: 1;
}

.parallax-content h2 {
font-size: 3.5rem;
margin-bottom: 20px;
transform: translateZ(40px); /* Effet 3D */
animation: parallax-text 3s ease-in-out infinite alternate;
}

.parallax-content p {
font-size: 1.5rem;
margin-bottom: 40px;
transform: translateZ(20px);
animation: parallax-text 4s ease-in-out infinite alternate;
}

.parallax-content .parallax-btn {
display: inline-block;
padding: 15px 30px;
font-size: 1rem;
color: #fff;
background-color: #171a21;
border-radius: 5px;
text-decoration: none;
transition: transform 0.3s ease, background-color 0.3s ease;
transform: translateZ(10px);
}

.parallax-content .parallax-btn:hover {
transform: translateZ(10px) scale(1.1);
background-color: #11141a;
}

/* Animation Keyframes */
@keyframes fadeIn {
from {
    opacity: 0;
    transform: translateY(50px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

@keyframes parallax-text {
from {
    transform: translateZ(40px);
}
to {
    transform: translateZ(10px);
}
}

/* Responsive Design */
@media (max-width: 768px) {
.parallax-content h2 {
    font-size: 2.5rem;
}

.parallax-content p {
    font-size: 1.2rem;
}

.parallax-content .parallax-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
}
}

/* Reveal Section */
.reveal-section {
position: relative;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background-color: #181818; /* Couleur sombre pour l'arrière-plan */
color: #ffffff; /* Texte blanc */
overflow: hidden;
z-index: 1;
}

.reveal-section h2 {
font-size: 2.5rem;
margin-bottom: 20px;
z-index: 2;
position: relative;
}

.reveal-section p {
font-size: 1.2rem;
z-index: 2;
position: relative;
}

.reveal-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://img.gg.deals/1c/a2/2ba73890a6e20e5a9d11c6950671fad650e3_1920xt1080_S1000.jpg') no-repeat center center/cover; /* Image à révéler */
mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 60%);
-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 60%);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: 50% 50%;
-webkit-mask-position: 50% 50%;
mask-size: 400px 400px; /* Augmente la taille du cercle */
-webkit-mask-size: 400px 400px; /* Support Webkit */
pointer-events: none;
z-index: 1;
transition: mask-size 0.1s, -webkit-mask-size 0.1s;
}



/* Footer */
.footer {
text-align: center;
padding: 20px;
background-color: #121212;
font-size: 0.9rem;
color: #777;
}

.footer .social-links a {
color: #ff4500;
text-decoration: none;
margin: 0 10px;
}

.footer .social-links a:hover {
color: #e63900;
}