#hero { background: url('/modules/vr/images/background.png') no-repeat; background-size: cover; height: 100dvh; margin-top: -160px; display: flex; align-items: center; justify-content: center; }
#hero .container { display: flex; align-items: center; justify-content: flex-start; }
#hero .container > div { flex: 1; }
#hero h1 { padding: 60px 40px 80px 0; font-size: 48px; }
#hero img.headset { height: 400px; }
#games .container { display: flex; align-items: stretch; justify-content: center; gap: 30px; padding: 0 20px; }
#games .game { flex: 1; max-width: 360px; background: radial-gradient(rgba(255,255,255,0.2), #111); border-radius: 12px; box-shadow: 0 0 15px rgba(0,0,0,0.5); overflow: hidden; padding: 20px 20px 80px; position: relative; }
#games .game img { width: 100%; border-radius: 16px; margin-bottom: 10px; }
#games .game h3 { font-size: 22px; }
#games .game p { font-size: 16px; }
#games .game a.btn { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: table; width: 60%; }

#description .description-container { background: rgba(255,255,255,0.05); border-radius: 20px; padding: 80px 60px; }
#description a.btn { display: table; margin: 40px auto 0; }

#faq img { margin: auto; display: block; max-width: 100%; }
#faq p { text-align: center; margin: 60px auto; max-width: 80%; }
#faq .container { padding: 0 6%; }
.faq-wrapper { cursor: pointer; background: rgba(255,255,255,0.1); backdrop-filter: blur(2px); border: 1px solid white; border-radius: 10px; padding: 20px 60px 20px 30px; margin: 20px 0; font-size: 20px; position: relative; transition: 0.25s; }
.faq-wrapper:hover { background: rgba(255,255,255,0.2); }
.faq-wrapper .q { font-weight: 500; }
.faq-wrapper .q:after { content: " "; -webkit-mask: url('/libraries/Feather/chevron-down.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 44px 44px; -webkit-mask-position: center center; display: block; position: absolute; top: 14px; right: 20px; width: 44px; height: 44px; background: white; transition: 0.6s; }
.faq-wrapper .a { display: none; padding: 20px 0 0; font-weight: 200; color: #eee; }
.faq-wrapper.open .q:after { transform: rotate(-180deg); }

#contact h2 { text-align: left; }
#contact .wrapper { display: flex; align-items: center; justify-content: center; }
#contact .contents { padding-right: 60px; flex-grow: 1; }
#contact .opening_hours { padding: 20px 0; font-size: 20px; }
#contact .map { min-width: 40%; }
#contact .map iframe { width: 100%; height: 450px; border: 0; border-radius: 20px; margin-bottom: 20px; }
#contact .map .contacts > div { display: flex; align-items: center; justify-content: flex-end; padding: 10px 0; font-size: 20px; }
#contact .map .contacts > div:before { content: " "; display: block; -webkit-mask-repeat: no-repeat !important; -webkit-mask-size: 30px 30px !important; background: white; width: 30px; height: 30px; padding-right: 10px; }
#contact .map .contacts .phone:before { -webkit-mask: url('/libraries/Feather/phone.svg'); }
#contact .map .contacts .email:before { -webkit-mask: url('/libraries/Feather/mail.svg'); }
#contact .map .contacts .location:before { -webkit-mask: url('/libraries/Feather/map-pin.svg'); }

ul { line-height: 250%; }

@media (max-width: 1440px) {
#hero .container { padding: 0 60px; }
#hero h1 { padding: 50px 0px 40px 0; font-size: 40px; }
#hero img.logo { height: 140px; }
#hero img.headset { height: 360px; }
#description .description-container { padding: 60px 40px; }
#faq .container { padding: 0 12%; }
#faq p { text-align: center; margin: 60px auto; max-width: 80%; }
.faq-wrapper { font-size: 18px; padding: 20px 70px 20px 30px; }
.faq-wrapper .q:after { -webkit-mask-size: 40px 40px; right: 20px; width: 50px; }
#contact .wrapper { padding: 0 60px; }
#contact .opening_hours { font-size: 18px; }
#contact .map .contacts > div { padding: 10px 0; font-size: 18px; }
#contact .map .contacts > div:before { -webkit-mask-size: 20px 20px !important; width: 20px; height: 20px; padding-right: 10px; }
}

@media (max-width: 1280px) {
#hero { margin-top: -75px; }
#hero img.logo { height: 120px; }
#hero img.headset { height: 300px; }
#hero h1 { padding: 50px 0px 40px 0; font-size: 32px; }
#description .description-container { padding: 40px 30px; border-radius: 0; }
#faq .container { padding: 0 20px; }
#faq p { text-align: center; margin: 40px auto; max-width: 100%; }
.faq-wrapper { font-size: 16px; padding: 20px 70px 20px 20px; }
.faq-wrapper .q:after { -webkit-mask-size: 34px 34px; top: 10px; right: 20px; width: 34px; }
#contact .wrapper { padding: 0; flex-wrap: wrap; }
#contact .opening_hours .row { padding: 2px 0; }
#contact .opening_hours .col6 { flex: 0 0 50%; max-width: 50%; }
#contact .map { min-width: initial; width: 100%; }
#contact .map .contacts > div { justify-content: flex-start; }
#contact .contents { padding-right: 0px; }
}

@media (max-width: 1024px) {
#hero .container { flex-wrap: wrap; gap: 40px; }
#hero .container > div { min-width: 300px; }
#hero img.headset { height: initial; width: 50%; min-width: 300px; margin: 40px auto 0; display: table; }
#hero img.logo { height: 100px; }
#hero h1 { padding: 40px 0px; font-size: 26px; }
#games .container { flex-wrap: wrap; }
#games .game { min-width: 300px; }
#games .game h3 { font-size: 20px; }
#games .game p { font-size: 14px; }
}