/* ---BANNER STYLES--- */

.banner_section {
    position: relative;
    height: 80vh;
    padding: 15vw 10vw 0 10vw;
    border-radius: 0 0 2.5vw 2.5vw;
    background: black;
    overflow: hidden;
}

.banner_section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #00000090, #00000000);
    z-index: 1;
}

.banner_section .absolute_media {
    opacity: .8;
}

.banner_section .banner_box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2vw;
    z-index: 1;
}

.banner_section .title_box {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.banner_section .title_box>span {
    color: var(--cream);
    font-size: 1vw;
    font-weight: 500;
}

.banner_section h1,
.banner_section p {
    color: var(--cream);
}

.banner_section p {
    width: 50%;
}

.banner_section .main_btn {
    background: var(--cream);
}

.banner_section .main_btn span {
    color: var(--dark-green);
}

@media (max-width: 996px) {
    .banner_section {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 10vw;
        border-radius: 0 0 5vw 5vw;
    }

    .banner_section::before {
        background: linear-gradient(to right, #00000090, #00000000);
    }

    .banner_section .banner_box {
        gap: 5vw;
    }

    .banner_section .title_box {
        gap: 2vw;
    }

    .banner_section .title_box>span {
        font-size: 3.5vw;
    }

    .banner_section h1 {
        text-wrap: balance;
    }

    .banner_section h1 br {
        display: none;
    }

    .banner_section p {
        width: 100%;
    }
}


/* ---PHRASE STYLES--- */

.phrase_section {
    padding: 10vw 10vw 5vw 10vw;
}

.phrase_section_two {
    padding: 5vw 10vw;
}

.phrase_section .phrase_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
    padding: 5vw;
    background: var(--cream-green);
}

.phrase_section h2 {
    font-size: 2.2vw;
    text-align: center;
}

.phrase_section p {
    color: var(--dark-green);
    text-align: center;
}

.phrase_section p span {
    font-weight: bold;
}

@media (max-width: 996px) {
    .phrase_section {
        padding: 10vw;
    }

    .phrase_section .phrase_box {
        gap: 2vw;
        padding: 10vw;
    }

    .phrase_section h2 {
        font-size: 6vw;
        text-wrap: balance;
    }
}


/* ---SELECT STYLES--- */

.select_section {
    padding: 5vw 10vw;
}

.select_section .select_box {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 5vw;
}

.select_section .info_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vw;
}

.select_section .description_box {
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.select_section .description_box span {
    color: var(--dark-green);
    font-size: 1.5vw;
    font-weight: bold;
}

.select_section .title_box {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.select_section .title_box>span {
    color: var(--dark-green);
    font-size: 1vw;
    font-weight: 500;
}

.select_section .dropdown_box {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.select_section .dropdown_item {
    padding: 1vw 1vw 0 1vw;
    background: var(--cream-green);
    cursor: pointer;
    transition: .25s;
}

.select_section .dropdown_item:hover {
    transform: scale(.98);
    background: var(--light-green);
}

.select_section .dropdown_item.active {
    padding: 1vw;
    background: var(--light-green);
}

.select_section .dropdown_item * {
    pointer-events: none;
}

.select_section .item_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.select_section .item_box h2 {
    font-size: 1.5vw;
}

.select_section .item_box i {
    color: var(--dark-green);
    font-size: 1.5vw;
}

.select_section .dropdown_info {
    max-height: 0;
    padding-top: 1vw;
    opacity: 0;
    transition: 1s;
}

.select_section .active .dropdown_info {
    max-height: 100vh;
    opacity: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
}

.select_section .dropdown_info p {
    color: var(--dark-green);
}

.select_section .dropdown_info span {
    color: var(--dark-green);
    font-weight: bold;
    font-size: 1.2vw;
}

.select_section .media_box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.select_section .media_item {
    position: relative;
    width: 100%;
    height: 45vw;
    border-radius: 50vw 50vw 0 0;
    background: var(--cream-green);
    overflow: hidden;
}

@media (max-width: 996px) {
    .select_section {
        padding: 10vw;
    }

    .select_section .select_box {
        grid-template-columns: 1fr;
        gap: 10vw;
    }

    .select_section .info_box {
        order: 2;
        gap: 5vw;
    }

    .select_section .description_box {
        gap: 5vw;
    }

    .select_section .title_box {
        gap: 2vw;
    }

    .select_section .title_box>span {
        font-size: 3.5vw;
    }

    .select_section .dropdown_box {
        gap: 2vw;
    }

    .select_section .dropdown_item {
        padding: 5vw 5vw 0 5vw;
    }

    .select_section .dropdown_item.active {
        padding: 5vw;
    }

    .select_section .item_box h2 {
        font-size: 5vw;
    }

    .select_section .item_box i {
        font-size: 5vw;
    }

    .select_section .dropdown_info {
        padding-top: 5vw;
    }

    .select_section .active .dropdown_info {
        gap: 6vw;
    }

    .select_section .dropdown_info span {
        font-size: 4vw;
    }

    .select_section .media_box {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .select_section .media_item {
        height: 100vw;
    }
}


/* ---WHO STYLES--- */

.who_section {
    padding: 5vw 10vw;
}

.who_section .who_box {
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.who_section .info_box {
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.who_section .title_box {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.who_section h2 {
    font-size: 2.2vw;
}

.who_section i {
    color: var(--dark-green);
    font-size: 1.25vw;
}

.who_section p span {
    color: var(--dark-green);
    font-weight: 500;
}

@media (max-width: 996px) {
    .who_section {
        padding: 10vw;
    }

    .who_section .who_box,
    .who_section .info_box {
        gap: 5vw;
    }

    .who_section .title_box {
        gap: 2vw;
    }

    .who_section h2 {
        font-size: 6vw;
        text-wrap: balance;
    }

    .who_section i {
        color: var(--dark-green);
        font-size: 4vw;
    }
}


/* ---CHOOSE STYLES--- */

.choose_section {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2vw;
    padding: 5vw 10vw;
    border-radius: 2.5vw;
    background: var(--cream-green);
}

.choose_section_two {
    background: none;
}

.choose_section .heading_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
}

.choose_section .heading_box h2 {
    text-align: center;
}

.choose_section .choose_box {
    display: grid;
    gap: 5vw;
}

.choose_section .choose_box:nth-child(even) {
    grid-template-columns: 1fr 2fr;
}

.choose_section .choose_box:nth-child(odd) {
    grid-template-columns: 2fr 1fr;
}

.choose_section .media_box {
    position: relative;
    height: 35vw;
    width: 100%;
    border-radius: 50vw 50vw;
    overflow: hidden;
}

.choose_section .choose_box:nth-child(odd) .media_box {
    order: 2;
}

.choose_section .info_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vw;
}

.choose_section .info_box span {
    color: var(--dark-green);
    font-weight: bold;
    font-size: 1vw;
}

.choose_section .title_box {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.choose_section .title_box>span {
    color: var(--dark-green);
    font-size: 1vw;
    font-weight: 500;
}

.choose_section .title_box h2 {
    text-wrap: balance;
}

.choose_section p,
.choose_section li {
    color: var(--dark-green);
}

.choose_section p span {
    font-weight: bold;
}

@media (max-width: 996px) {
    .choose_section {
        gap: 10vw;
        padding: 10vw;
    }

    .choose_section .heading_box {
        align-items: flex-start;
        gap: 3vw;
    }

    .choose_section .heading_box h2 {
        text-align: left;
        text-wrap: balance;
    }

    .choose_section .choose_box {
        grid-template-columns: 1fr;
        gap: 10vw;
    }

    .choose_section .choose_box:nth-child(even),
    .choose_section .choose_box:nth-child(odd) {
        grid-template-columns: 1fr;
    }

    .choose_section .media_box {
        height: 100vw;
    }

    .choose_section .choose_box:nth-child(odd) .media_box {
        order: inherit;
    }

    .choose_section .title_box {
        gap: 2vw;
    }

    .choose_section .title_box>span {
        font-size: 3.5vw;
    }

    .choose_section .title_box h2 {
        text-wrap: balance;
    }

    .choose_section .info_box {
        gap: 5vw;
    }
}


/* ---WHY STYLES--- */

.why_section_two {
    margin-top: 5vw;
}

.why_section .why_box {
    height: 100%;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    align-items: center;
}

.why_section .info_box {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vw;
    padding: 0 5vw 0 10vw;
}

.why_section .title_box {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.why_section .title_box>span {
    color: var(--dark-green);
    font-size: 1vw;
    font-weight: 500;
}

.why_section .media_box {
    height: 100%;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    background: var(--cream-green);
}

.why_section .media_box img:nth-child(1) {
    position: relative;
    transform: translateX(0);
    width: 30vw;
    z-index: 1;
}

.why_section .media_box img:nth-child(2) {
    position: absolute;
    bottom: 0;
    left: -5%;
    transform: rotate(-25deg);
    width: 50%;
}

@media (max-width: 996px) {
    .why_section_two {
        margin-top: 0;
    }

    .why_section .why_box {
        grid-template-columns: 1fr;
        gap: 10vw;
    }

    .why_section .info_box {
        gap: 5vw;
        padding: 10vw;
    }

    .why_section .title_box {
        gap: 2vw;
    }

    .why_section .title_box>span {
        font-size: 3.5vw;
    }

    .why_section .media_box {
        justify-content: center;
        align-items: center;
    }

    .why_section .media_box img:nth-child(1) {
        transform: translateX(0) scale(1.1);
        transform-origin: bottom center;
        width: 50%;
    }

    .why_section .media_box img:nth-child(2) {
        left: 45%;
        transform: rotate(0) scale(1.5);
        transform-origin: bottom center;
        width: 30%;
    }
}


/* ---BOOKING STYLES--- */

.booking_section {
    padding: 10vw 10vw 0 10vw;
}

.booking_section .booking_box {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2vw;
}

.booking_section .media_box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.booking_section .media_item {
    width: 100%;
    height: 30vw;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border-radius: 50vw 50vw 0 0;
    background: var(--cream-green);
    overflow: hidden;
}

.booking_section .info_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2vw;
}

.booking_section .title_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
}

.booking_section .title_box>span {
    color: var(--dark-green);
    font-size: 1vw;
    font-weight: 500;
    text-align: center;
}

.booking_section .title_box h2,
.booking_section p {
    text-align: center;
}

.booking_section .buttons_box {
    display: flex;
    gap: 2vw;
    align-items: center;
}

@media (max-width: 996px) {
    .booking_section {
        padding: 10vw;
    }

    .booking_section .booking_box {
        grid-template-columns: 1fr;
        gap: 10vw;
    }

    .booking_section .media_item {
        height: 100vw;
    }

    .booking_section .info_box {
        gap: 5vw;
    }

    .booking_section .title_box {
        gap: 2vw;
    }

    .booking_section .title_box>span {
        font-size: 3.5vw;
    }

    .booking_section .buttons_box {
        gap: 5vw;
    }
}


/* ---MISSION STYLES--- */

.mission_section {
    padding: 5vw 10vw;
}

.mission_section .mission_box {
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.mission_section .title_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
}

.mission_section .title_box>span {
    color: var(--dark-green);
    font-size: 1vw;
    font-weight: 500;
}

.mission_section .title_box p {
    width: 75%;
    text-align: center;
    text-wrap: balance;
}

.mission_section .media_box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
}

.mission_section .media_item {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    padding: 3vw 2vw;
    background: var(--cream-green);
    cursor: pointer;
    transition: .25s;
}

.mission_section .media_item:hover {
    background: var(--light-green);
    transform: scale(.98);
}

.mission_section .media_item svg {
    width: 5vw;
}

.mission_section .media_item svg * {
    fill: var(--dark-green);
}

.mission_section .media_item h2 {
    font-size: 2.2vw;
    text-wrap: balance;
}

.mission_section .media_item p,
.mission_section .media_item li {
    color: var(--dark-green);
    list-style: none;
    text-wrap: balance;
}

@media (max-width: 996px) {
    .mission_section {
        padding: 10vw;
    }

    .mission_section .mission_box {
        gap: 5vw;
    }

    .mission_section .title_box {
        gap: 3vw;
    }

    .mission_section .title_box>span {
        font-size: 3.5vw;
    }

    .mission_section .title_box p {
        width: 100%;
    }

    .mission_section .media_box {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5vw;
    }

    .mission_section .media_item {
        gap: 3vw;
        padding: 10vw 5vw;
        margin: 0;
    }

    .mission_section .media_item svg {
        width: 15vw;
    }

    .mission_section .media_item h2 {
        font-size: 6vw;
        text-wrap: balance;
    }

    .mission_section .media_item h2 br {
        display: none;
    }

    .mission_section .nav_box {
        display: flex;
    }
}