:root {
    --promo-banner-bg: #C8D1CE;
    --teal: #BDE3E6;
    --turquoise: #012c34;
}

/* Minior Pro Regular */
@font-face {
    font-family: 'Minior Pro';
    src: url('fonts/MiniorPro-Regular.otf') format('opentype'),
        url('fonts/MiniorPro-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.promo__banner {
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: var(--promo-banner-bg); */
    height: 860px;
    position: relative;
}

.promo__banner:not(:has(.promo__banner-image)) {
    background: var(--promo-banner-bg);
}

.promo__banner-image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
    object-fit: cover;
}


.promo__banner-image--mobile {
    display: none;
}


.promo__banner-image>img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.promo-page__wrapper .container::before {
    display: none;
}

.promo__banner-content {
    max-width: 1600px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #C8D1CE;
    padding: 0 2rem;

}

.promo__banner-title {
    font-size: 80px;
    font-weight: bolder;
    text-align: center;
    white-space: pre-line;
}



.custom-container__wrapper:has(.custom-container--teal) {
    background-color: var(--teal);
}

.custom-container__wrapper:has(.custom-container--turquoise) {
    background-color: var(--turquoise);
}

.custom-container__wrapper:has(.custom-container--turquoise-dark) {
    background-color: var(--turquoise-dark);
}

.text-block p {
    line-height: 1.5;
    text-align: center;
    font-size: 18px;
}

.text-block span {
    font-size: inherit !important;
}

.text-block *:not(p) {
    line-height: 1;
}

.text-block h1 {
    color: var(--turquoise);
    font-size: 72px;
    /* 1.2 × h2 */
}

.text-block h2 {
    color: var(--turquoise);
    font-size: 60px;
    /* base */
}

.text-block h3 {
    color: var(--turquoise);
    font-size: 48px;
    /* 0.8 × h2 */
}

.text-block h4 {
    color: var(--turquoise);
    font-size: 36px;
    /* 0.6 × h2 */
}

.text-block h5 {
    color: var(--turquoise);
    font-size: 30px;
    /* 0.5 × h2 */
}

.text-block h6 {
    color: var(--turquoise);
    font-size: 24px;
    /* 0.4 × h2 */
}

.custom-container--turquoise h1,
.custom-container--turquoise h2,
.custom-container--turquoise h3,
.custom-container--turquoise h4,
.custom-container--turquoise h5,
.custom-container--turquoise h6 {
    color: var(--teal);
}






/* Start Section 1 */
.promo__section-1 {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.promo__section-1-left h1 {
    color: var(--turquoise-dark);
    font-size: 72px;
    /* 1.2 × h2 */
}

.promo__section-1-left h2 {
    color: var(--turquoise-dark);
    font-size: 60px;
    /* base */
}

.promo__section-1-left h3 {
    color: var(--turquoise-dark);
    font-size: 48px;
    /* 0.8 × h2 */
}

.promo__section-1-left h4 {
    color: var(--turquoise-dark);
    font-size: 36px;
    /* 0.6 × h2 */
}

.promo__section-1-left h5 {
    color: var(--turquoise-dark);
    font-size: 30px;
    /* 0.5 × h2 */
}

.promo__section-1-left h6 {
    color: var(--turquoise-dark);
    font-size: 24px;
    /* 0.4 × h2 */
}

.promo__section-2-left p {
    font-size: 30px;
}

.promo__section-2-left h2 {
    color: var(--teal);
}

.promo__section-2-left h3 {
    color: var(--teal);
    font-size: 48px;
    /* 0.8 × h2 */
}

.promo__section-2-left h4 {
    color: var(--teal);
    font-size: 36px;
    /* 0.6 × h2 */
}

.promo__section-2-left h5 {
    color: var(--teal);
    font-size: 30px;
    /* 0.5 × h2 */
}

.promo__section-2-left h6 {
    color: var(--teal);
    font-size: 24px;
    /* 0.4 × h2 */
}

.promo__section-1-left {
    padding: 80px 0 40px;
    width: 35%;
}

.promo__section-1-left p {
    font-size: 30px;
    line-height: 1.5;
}

.promo__section-1-right {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 20px;
}


.promo__section-1-right-card {
    min-height: 450px;
    height: 100%;
    width: 100%;
    container-type: inline-size;
}


.promo__section-1-right-card .flip-card-back {
    padding: 0;
}

.promo__section-1-right-card a,
.promo__section-1-right-card button {
    width: 100%;
    height: 100%;
    border: none;
    cursor: pointer;
}

.promo__section-1-right-card .flip-card-back__content img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.flip-card__dropdown-wrapper {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);

}

/* Details-based custom select (no JS) */
.flip-card__details-select {
    position: relative;
    width: 100%;
    /* max-width: 260px; */
    font-family: inherit;
}

.flip-card__details-summary {
    list-style: none;
    gap: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.7cqi 5cqi 1.7cqi 10cqi;
    background: black;
    color: #fff;
    border: 2px solid #fff;
    cursor: pointer;
    font-weight: bold;
    line-height: 8cqi;
}

.flip-card__details-summary:hover::after {
    rotate: 180deg;
}

.flip-card__details-label {
    white-space: nowrap;
    line-height: 1;
    font-size: 5cqi;
}

.flip-card__details-summary::after {
    content: '';
    background: url('../images/down-arrow-white.svg');
    background-repeat: no-repeat;
    display: block;
    width: 5cqi;
    min-width: 5cqi;
    height: 2.67cqi;
    min-height: 2.67cqi;
    transition: 0.2s;
}

/* Remove default disclosure triangle in most browsers */
.flip-card__details-summary::-webkit-details-marker {
    display: none;
}

.flip-card__details-summary::marker {
    content: '';
}

.flip-card__details-options {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    padding: 1.7cqi 5cqi;
    list-style: none;
    background: rgba(0, 0, 0, 0.9);
    z-index: 50;
    display: none;
    pointer-events: none;
    width: fit-content;
    min-width: 100%;
}

.flip-card__details-select--open .flip-card__details-options {
    display: block;
    pointer-events: auto;
}

.flip-card__details-select--open .flip-card__details-summary::after,
.flip-card__details-select--open .flip-card__details-summary::after {
    rotate: 180deg;
}

.flip-card__details-option a {
    display: block;
    color: #fff;
    text-decoration: none;
    text-align: left;
    white-space: nowrap;
    line-height: 1.9;
    font-size: 5cqi;
}

.flip-card__details-option li:hover {
    background: rgba(255, 255, 255, 0.08);
}


/* Keep same positioning as before */
.flip-card__dropdown-wrapper {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
}

/* END Section 1 */






/* Start Section 2 */
.promo__section-2 {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}


.promo__section-2-left {
    width: 45%;
    color: white;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 20px;
}

.promo__section-2-left>* {
    text-align: center;
}

.promo__section-2-left .et_pb_button {
    background-color: var(--teal);
    color: var(--turquoise) !important;
}



.promo__section-2-right {
    flex: 1;
}

/* End Section 2 */


.promo__section-3 p {
    line-height: 1.5;
}


/* Flip Card CSS */

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    aspect-ratio: 330/481;
    /* Remove this if you don't want the 3D effect */
}

.flip-card__img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    z-index: 50;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
    width: 100%;
    height: 100%;
    /* Safari */
    backface-visibility: hidden;
}

.flip-card-front__txt {
    color: white;
    font-weight: bold;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    position: absolute;
    background-color: var(--turquoise);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

/* Style the back side */
.flip-card-back {
    position: relative;
    background-color: var(--teal);
    color: white;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--turquoise);
    height: 100%;
    gap: 10px;
}



.custom-container--teal .flip-card-back {
    color: var(--turquoise);
    background: white;
}

.flip-card-back__content {
    font-size: 20px;
    line-height: 1;
    height: 100%;
}

.flip-card-back__content>img {
    height: auto;
    width: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1600px) {

    .promo__section-1-right {
        grid-template-columns: repeat(2, 1fr);
    }


}


@media screen and (max-width: 1400px) {
    .

    .promo__section-1-right {
        grid-template-columns: repeat(3, 1fr);
    }


    .promo__section-1 {
        flex-direction: column;
        gap: 40px;
    }


    .promo__section-2 {
        flex-direction: column;
        gap: 40px;
    }

    .promo__section-1-left,
    .promo__section-1-right,
    .promo__section-2-left,
    .promo__section-2-right {
        width: 100%;
        padding: 0;
    }

    .text-block p {
        line-height: 1.5;
        /* text-align: center; */
        font-size: 18px;
    }

    .text-block h1 {
        font-size: 46px;
    }

    .text-block h2 {
        font-size: 38px;
    }

    .text-block h3 {
        font-size: 30px;
    }

    .text-block h4 {
        font-size: 24px;
    }

    .text-block h5 {
        font-size: 20px;
    }

    .text-block h6 {
        font-size: 18px;
    }
}

@media screen and (max-width: 1200px) {
    .custom-button {
        padding: 12px 30px;
        font-size: 14px;
    }

    .promo__section-1-right {
        grid-template-columns: repeat(2, 1fr);
    }


    .promo__section-2>* {
        width: 100%;
    }

    .promo__banner {
        height: 600px;
    }
}

@media screen and (max-width: 800px) {

    .promo__banner-title {
        font-size: 50px;
    }

    .promo__banner-image:not(.promo__banner-image--mobile):has(+ .promo__banner-image--mobile) {
        display: none;
    }

    .promo__banner-image--mobile {
        display: block;
    }

    .custom-container {
        padding: 40px 30px;
    }



}

@media screen and (max-width: 600px) {

    .promo__section-1-right {
        grid-template-columns: 1fr;
    }

    .promo__banner {
        height: 500px;
    }

    .flip-card-back__content:has(>img) {
        /* max-height: 400px; */
    }

    .flip-card-back__content:has(>img)>img {
        height: 100%;
        width: auto;
    }

    .promo__section-1-right-card {
        min-height: 350px;
    }



    .flip-card__details-select {
        font-size: 30px;
        max-width: unset;
    }

}