#hero { background: url('/modules/pixeland/images/banner.webp') no-repeat; background-size: cover; aspect-ratio: 16 / 9; margin-top: -160px; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; gap: 20px; }
#hero h1 { font-size: 70px; font-weight: bold; margin-bottom: 20px; }
#hero p { max-width: 45%; }
#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'); }

@media (max-width: 1440px) {
#hero h1 { font-size: 58px; }
#hero .container { padding: 0 60px; }
#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 h1 { font-size: 44px; }
#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 { aspect-ratio: initial; height: 620px; }
#hero p { max-width: 100%; }
}