/* Home page */

/* Video hero */
.mb-video-hero {
    position: relative;
    width: 100%;
    height: 102vh;
    height: 102svh;
    min-height: 620px;
    margin-top: -60px;
    overflow: hidden;
    background: #160c08;
}
@supports (height: 100dvh) { .mb-video-hero { height: 102dvh; } }
.mb-video-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; background: #160c08; }
.mb-video-hero__toggle {
    position: absolute;
    right: 24px;
    bottom: 96px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(251, 244, 217, .55);
    border-radius: 50%;
    background: rgba(22, 12, 8, .35);
    color: var(--mb-light);
    cursor: pointer;
    opacity: .7;
    transition: opacity .3s, background-color .3s;
}
.mb-video-hero__toggle:hover, .mb-video-hero__toggle:focus-visible { opacity: 1; background: rgba(22, 12, 8, .6); }
.mb-video-hero__toggle svg { width: 18px; height: 18px; }
.mb-video-hero__icon--play, .mb-video-hero__toggle[aria-pressed="true"] .mb-video-hero__icon--pause { display: none; }
.mb-video-hero__toggle[aria-pressed="true"] .mb-video-hero__icon--play { display: inline-flex; }
@media (max-width: 1600px) { .mb-video-hero { margin-top: -90px; } }
@media (max-width: 514px) { .mb-video-hero__toggle { right: 16px; bottom: 76px; } }
@media (max-width: 1024px) { .mb-video-hero { min-height: 560px; } }
@media (max-width: 767px) { .mb-video-hero { min-height: 520px; } }
@media (max-width: 480px) { .mb-video-hero { min-height: 500px; } }

/* Why Magic Bali */
.home-why__grid { display: flex; gap: 75px; width: 100%; }
.home-why__left { display: flex; flex-direction: column; align-items: flex-end; gap: 50px; width: 50%; }
.home-why__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 25px; width: 100%; }
.home-why__title { display: flex; flex-direction: column; font-size: var(--mb-fs-display); line-height: 1.125; }
.home-why__l1 { color: var(--mb-brown); font-weight: 400; }
.home-why__l2 { color: var(--mb-brown); font-weight: 500; }
.home-why__l3 { color: var(--mb-gold); font-weight: 500; }
.home-why__steps { width: 90%; }
.home-why__right { display: flex; flex-direction: column; gap: 10px; width: 50%; }
.home-why__img { width: 100%; border-radius: 10px; }
.home-why__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 25px;
    background: var(--mb-brown);
    border-radius: 8px 8px 35px 35px;
    text-align: center;
}
.home-why__card1 { color: var(--mb-gold); font-size: 18px; font-weight: 500; letter-spacing: 0.5px; line-height: 1.3; }
.home-why__card2 { color: var(--mb-sand); font-size: 18px; font-weight: 600; letter-spacing: 0.5px; line-height: 1.3; }
a.home-why__card:hover .home-why__card2 { color: #fff; }
@media (max-width: 1600px) {
    .home-why__grid { gap: 50px; }
    .home-why__card1, .home-why__card2 { font-size: 15px; }
}
@media (max-width: 1249px) {
    .home-why__left { gap: 25px; }
    .home-why__intro { gap: 15px; }
    .home-why__steps { width: 100%; }
}
@media (max-width: 967px) {
    .home-why__grid { flex-direction: column; }
    .home-why__left, .home-why__right { width: 100%; }
}
@media (max-width: 514px) {
    .home-why .mb-wrap { padding-top: 25px; }
    .home-why__l2 { font-size: 30px; }
    .home-why__l3 { font-size: 25px; }
}

/* Google reviews */
.home-reviews__wrap { padding-top: 0; }

/* Journey */
.home-journey__wrap { padding-bottom: 35px; }
.home-journey__inner { display: flex; flex-direction: column; align-items: flex-end; gap: 50px; width: 100%; }
.home-journey__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; width: 100%; }
.home-journey__titles { display: flex; flex-direction: column; gap: 20px; width: 50%; }
.home-journey__quote { display: flex; flex-direction: column; align-items: flex-end; width: 50%; text-align: center; }
.home-journey__quote p { color: var(--mb-muted); font-family: var(--mb-serif); font-size: 25px; font-style: italic; font-weight: 500; line-height: 1.3; }
@media (max-width: 1600px) { .home-journey__quote p { font-size: 20px; } }
@media (max-width: 1249px) {
    .home-journey__inner { gap: 25px; }
    .home-journey__head { gap: 15px; }
    .home-journey__quote p { font-size: 18px; }
}
@media (max-width: 967px) {
    .home-journey__head { flex-direction: column; }
    .home-journey__titles { width: 100%; gap: 15px; }
    .home-journey__quote { width: 100%; }
    .home-journey__title { font-size: 30px; }
}
@media (max-width: 514px) { .home-journey__title { font-size: 25px; } }

/* Choose your massage */
.home-choose__wrap { display: flex; flex-direction: column; align-items: center; gap: 75px; padding-top: 35px; }
.home-choose__head { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 45%; }
.home-choose__head .mb-display { text-align: left; }
.home-choose__text { color: var(--mb-brown); font-size: 20px; line-height: 1.3; text-align: center; }
.home-choose__carousel { width: 100%; }
@media (max-width: 1600px) { .home-choose__text { font-size: 14px; } }
@media (max-width: 1249px) {
    .home-choose__head { width: 55%; }
    .home-choose__text { font-size: 13px; }
}
@media (max-width: 967px) {
    .home-choose__wrap { gap: 40px; }
    .home-choose__head { width: 100%; }
}
@media (max-width: 514px) { .home-choose__head .mb-display { font-size: 30px; } }

/* Events band */
.home-events__wrap { padding: 25px; }
.home-events__box { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 75px; border: 1px solid var(--mb-light); border-radius: 12px; }
.home-events__inner { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 60vw; }
.home-events__text { color: var(--mb-light); font-family: var(--mb-serif); font-size: 50px; font-weight: 400; line-height: 1.3; text-align: center; }
.home-events__sub { color: var(--mb-light); font-size: 20px; line-height: 1.3; text-align: center; }
.mb-socials--light { gap: 25px; }
.mb-socials--light a { border-color: var(--mb-light); color: var(--mb-light); }
.mb-socials--light a:hover { background: var(--mb-light); color: var(--mb-brown); }
@media (max-width: 1600px) {
    .home-events__inner { width: 80vw; gap: 30px; }
    .home-events__text { font-size: 40px; line-height: 1.2; }
    .home-events__sub { font-size: 15px; }
    .mb-socials--light a { width: 56px; height: 56px; }
}
@media (max-width: 1249px) {
    .home-events__box { padding: 60px; }
    .home-events__text { font-size: 35px; }
    .home-events__sub { font-size: 14px; }
}
@media (max-width: 967px) {
    .home-events__text { font-size: 20px; }
    .home-events__sub { font-size: 15px; }
}
@media (max-width: 514px) {
    .home-events__wrap { padding: 15px; }
    .home-events__box { padding: 25px; }
    .home-events__text { font-size: 23px; }
}

/* Voucher */
.home-voucher__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 25px;
    background: var(--mb-sand);
    border: 1px solid var(--mb-brown);
    border-radius: 32px;
}
.home-voucher__media { width: 50%; }
.home-voucher__img { width: 100%; }
.home-voucher__content { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 50%; padding: 40px; text-align: center; }
.home-voucher__title { color: var(--mb-brown); font-family: var(--mb-serif); font-size: 50px; font-weight: 400; line-height: 1.3; }
.home-voucher__text { color: var(--mb-muted); font-size: 18px; font-weight: 500; letter-spacing: 0.5px; line-height: 1.3; }
.home-voucher__note { color: var(--mb-brown); font-size: 20px; font-weight: 600; line-height: 1.3; }
.home-voucher__btn {
    margin-top: 25px;
    padding: 15px 35px;
    border: 1px solid var(--mb-gold);
    border-radius: 33px;
    background: var(--mb-gold);
    color: var(--mb-brown);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1.3;
    text-transform: uppercase;
    transition: background-color .5s, color .5s, border-color .5s;
}
.home-voucher__btn:hover { background: var(--mb-brown); border-color: var(--mb-brown); color: var(--mb-sand); }
@media (max-width: 1600px) {
    .home-voucher__title { font-size: 40px; line-height: 1.2; }
    .home-voucher__text, .home-voucher__note { font-size: 15px; }
    .home-voucher__btn { font-size: 13px; }
}
@media (max-width: 1249px) {
    .home-voucher__title { font-size: 35px; }
    .home-voucher__text, .home-voucher__note { font-size: 14px; }
}
@media (max-width: 967px) {
    .home-voucher__box { flex-direction: column; padding: 15px; }
    .home-voucher__media { width: 100%; }
    .home-voucher__content { width: 100%; padding: 25px; }
    .home-voucher__title { font-size: 30px; }
    .home-voucher__text, .home-voucher__note { font-size: 15px; }
}
@media (max-width: 514px) {
    .home-voucher__content { padding: 15px; }
    .home-voucher__title { font-size: 23px; }
    .home-voucher__btn { margin-top: 0; }
}