.dynamic-page-style p {
    line-height: 1.7;
    font-weight: 300;
    margin: 0;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: scale(.98)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.animate-fade-in {
    animation: fade-in .25s ease-out;
}

.custom-slider {
    width: 100%;
    height: auto;
    position: relative;
}

.custom-slider .main-carousel .slide-item {
    height: 600px;
    width: 100vw;
}

.custom-slider>div {
    width: 100%;
    height: 100%;
    position: relative;
}

.custom-slider .slide-item {
    width: 100%;
    height: 100%;
    position: relative;
}

.custom-slider .slide-item .image-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.custom-slider .slide-item .image-container .image {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    display: block;
}

.custom-slider .banner-info {
    top: 100px;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100%;
    text-align: left;
}

.custom-slider .banner-info .banner-title {
    letter-spacing: 1px;
    font-weight: 700;
    text-shadow: rgba(0, 0, 0, 0.25) 3px 2px 7px;
    font-size: 65px;
    text-align: left;
}

.custom-slider .banner-info .banner-caption {
    margin-top: 25px;
    letter-spacing: 1.2px;
    font-weight: 400;
    text-shadow: rgba(0, 0, 0, 0.25) 3px 2px 7px;
    font-size: 15px;
    text-align: left;
}

.custom-slider .banner-info .banner-caption-container {
    display: flex;
    justify-content: start;
    gap: 25px;
}

.custom-slider .banner-info .banner-link {
    margin-top: 25px;
    letter-spacing: 1.2px;
    font-weight: 400;
    text-shadow: rgba(0, 0, 0, 0.25) 3px 2px 7px;
    font-size: 15px;
    text-align: left;
    background: rgb(163, 62, 0);
    border-radius: 20px;
    padding: 10px 29px;
}

@media (max-width: 991px) {
    .custom-slider {
        width: 100%;
        height: 700px;
        position: relative;
    }

    .custom-slider.slider-with-flickity {
        height: 300px;
    }

    .custom-slider .main-carousel .slide-item {
        height: 300px;
        width: 100vw;
    }

    .custom-slider .banner-info {
        top: 10px;
    }

    .custom-slider .banner-info .banner-title {
        font-size: 30px;
    }
}

.flickity-page-dot {
    background: white;
}

.flickity-page-dot.is-selected {
    background: white
}

:root {
    --field-height: 50px;
    --radius: 14px;
    --bg: #ffffff;
    --fg: #0f172a;
    /* slate-900 */
    --muted: #6b7280;
    /* gray-500 */
    --border: #e5e7eb;
    /* slate-200 */
    --border-hover: #c7d2fe;
    /* indigo-200 */
    --ring: #6366f1;
    /* indigo-500 */
    --shadow-sm: 0 1px 1px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .06);
    --shadow-md: 0 2px 2px rgba(0, 0, 0, .06), 0 10px 24px rgba(0, 0, 0, .12);
}

#GOOGLEPAY,
#PAY_WITH_CARD {
    appearance: none !important;
    display: inline-block !important;
    width: 100% !important;
    height: 56px !important;

    /* keep the logo INSIDE the button, not touching edges */
    padding: 10px 16px !important;
    background-origin: content-box !important;

    background-color: #ffffff !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    /* fully contained, preserves aspect ratio */

    border: 1.5px solid #e5e7eb !important;
    /* slate-200 */
    border-radius: 14px !important;

    box-shadow: 0 1px 1px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .06) !important;
    cursor: pointer !important;
    transition:
        transform .06s ease,
        box-shadow .2s ease,
        border-color .2s ease,
        background-color .2s ease !important;
}

#GOOGLEPAY:hover,
#PAY_WITH_CARD:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .06), 0 10px 24px rgba(0, 0, 0, .12) !important;
    border-color: #c7d2fe !important;
    /* indigo-200 */
}

#GOOGLEPAY:active,
#PAY_WITH_CARD:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .08) !important;
}

#GOOGLEPAY:focus-visible,
#PAY_WITH_CARD:focus-visible {
    outline: 2px solid #6366f1 !important;
    /* indigo-500 */
    outline-offset: 2px !important;
}

/* slightly tighter on very small screens */
@media (max-width: 380px) {

    #GOOGLEPAY,
    #PAY_WITH_CARD {
        height: 50px !important;
        padding: 8px 12px !important;
    }
}

#GOOGLEPAY {
    background-image: url(/assets/images/google-pay.png) !important;
}

#PAY_WITH_CARD {
    background-image: url(/assets/images/card-pay.png?v=1) !important;
}

#CARD_NUMBER,
#EXPIRATION_DATE,
#SECURITY_CODE,
#CARDHOLDER_NAME,
#CARDHOLDER_EMAIL {
    appearance: none !important;
    width: calc(100% - 70px) !important;
    padding: 14px 16px !important;
    background: var(--bg) !important;
    color: var(--fg) !important;

    border: 1.5px solid var(--border) !important;
    border-radius: var(--radius) !important;

    box-shadow: var(--shadow-sm) !important;
    outline: none !important;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .06s ease,
        background-color .2s ease !important;

    letter-spacing: .02em !important;
    caret-color: var(--ring) !important;
}

#CARD_NUMBER:hover,
#EXPIRATION_DATE:hover,
#SECURITY_CODE:hover,
#CARDHOLDER_NAME:hover,
#CARDHOLDER_EMAIL:hover {
    border-color: var(--border-hover) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-1px) !important;
}

#CARD_NUMBER:focus-visible,
#EXPIRATION_DATE:focus-visible,
#SECURITY_CODE:focus-visible,
#CARDHOLDER_NAME:focus-visible,
#CARDHOLDER_EMAIL:focus-visible {
    border-color: var(--ring) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 20%, transparent), var(--shadow-md) !important;
}

#CARD_NUMBER::placeholder,
#EXPIRATION_DATE::placeholder,
#SECURITY_CODE::placeholder,
#CARDHOLDER_NAME::placeholder,
#CARDHOLDER_EMAIL::placeholder {
    color: var(--muted) !important;
    opacity: .9 !important;
}

#CARD_NUMBER:disabled,
#EXPIRATION_DATE:disabled,
#SECURITY_CODE:disabled,
#CARDHOLDER_NAME:disabled,
#CARDHOLDER_EMAIL:disabled {
    background: #f8fafc !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: .8 !important;
}

#CARD_NUMBER:invalid,
#EXPIRATION_DATE:invalid,
#SECURITY_CODE:invalid,
#CARDHOLDER_NAME:invalid,
#CARDHOLDER_EMAIL:invalid,
#CARD_NUMBER[aria-invalid="true"],
#EXPIRATION_DATE[aria-invalid="true"],
#SECURITY_CODE[aria-invalid="true"],
#CARDHOLDER_NAME[aria-invalid="true"],
#CARDHOLDER_EMAIL[aria-invalid="true"],
#CARD_NUMBER[data-error="true"],
#EXPIRATION_DATE[data-error="true"],
#SECURITY_CODE[data-error="true"],
#CARDHOLDER_NAME[data-error="true"],
#CARDHOLDER_EMAIL[data-error="true"] {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, #ef4444 15%, transparent), var(--shadow-sm) !important;
}

#CARD_NUMBER:-webkit-autofill,
#EXPIRATION_DATE:-webkit-autofill,
#SECURITY_CODE:-webkit-autofill,
#CARDHOLDER_NAME:-webkit-autofill,
#CARDHOLDER_EMAIL:-webkit-autofill {
    -webkit-text-fill-color: var(--fg) !important;
    transition: background-color 5000s ease-in-out 0s !important;
    box-shadow: 0 0 0px 1000px var(--bg) inset !important;
}

@media (max-width: 380px) {
    :root {
        --field-height: 50px;
    }

    #CARD_NUMBER,
    #EXPIRATION_DATE,
    #SECURITY_CODE,
    #CARDHOLDER_NAME,
    #CARDHOLDER_EMAIL {
        padding: 12px 12px !important;
    }
}

#CARD_NUMBER {
    padding-left: 48px !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 22px 22px !important;
    background-image: url("data:image/svg+xml;utf8,<svg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='2' y='5' width='20' height='14' rx='3' stroke='%236366F1' stroke-width='1.5'/><rect x='4.5' y='9' width='15' height='2' rx='1' fill='%236366F1'/><rect x='5' y='14' width='6' height='2' rx='1' fill='%239CA3AF'/></svg>") !important;
}

#EXPIRATION_DATE,
#SECURITY_CODE {
    font-variant-numeric: tabular-nums !important;
}

#CARDHOLDER_NAME,
#CARDHOLDER_EMAIL {
    text-transform: none !important;
    letter-spacing: .01em !important;
}