/* =========================================================
   EBZ RENT A CAR
   MULTILINK LANDING PAGE
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root {

    /* Brand */
    --ebz-blue: #011570;
    --ebz-gold: #d7a859;

    /* Secondary */
    --ebz-gray: #e4e4e4;
    --ebz-light: #f6fafd;
    --ebz-dark: #0a1931;

    /* UI */
    --white: #ffffff;
    --text: #0a1931;

    /* Layout */
    --content-width: 680px;

    /* Radius */
    --card-radius: 18px;

    /* Shadows */
    --shadow-soft:
        0 15px 40px rgba(10, 25, 49, 0.10);

    --shadow-card:
        0 12px 35px rgba(10, 25, 49, 0.12);

}


/* =========================================================
   RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--ebz-light);

    color: var(--text);

    -webkit-font-smoothing: antialiased;

}


a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   PAGE
   ========================================================= */

.page {

    width: 100%;
    min-height: 100vh;

    overflow-x: hidden;

}


/* =========================================================
   HERO
   ========================================================= */

.hero {

    position: relative;

    width: 100%;

    height: 50svh;

    min-height: 360px;
    max-height: 650px;

    overflow: hidden;

    background: var(--ebz-blue);

    border-radius:
        0
        0
        50% 50%
        /
        0
        0
        8% 8%;

}


/* Hero image */

.hero-media {

    position: absolute;

    inset: 0;

    display: block;

}


.hero-image {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}


/* =========================================================
   HERO OVERLAY
   ========================================================= */

.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(1, 21, 112, 0.05) 0%,
            rgba(1, 21, 112, 0.20) 55%,
            rgba(1, 21, 112, 0.50) 100%
        );

    pointer-events: none;

}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.hero-content {

    position: relative;

    z-index: 5;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 30px;

}


/* Vertical logo */

.hero-logo {

    width: min(180px, 42vw);

    max-height: 180px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 20px
            rgba(0, 0, 0, 0.25)
        );

}


/* =========================================================
   CONTENT
   ========================================================= */

.content {

    width: min(
        calc(100% - 32px),
        var(--content-width)
    );

    margin: 0 auto;

    position: relative;

    z-index: 20;

    padding-bottom: 30px;

}


/* =========================================================
   WHATSAPP
   ========================================================= */

.whatsapp-wrapper {

    display: flex;

    justify-content: center;

    margin-top: -30px;

    position: relative;

    z-index: 30;

}


.whatsapp-button {

    position: relative;

    width: min(300px, 82vw);

    height: 60px;

    padding: 5px;

    display: flex;

    align-items: center;

    background: var(--white);

    border-radius: 18px;

    box-shadow:
        0 15px 35px
        rgba(10, 25, 49, 0.18);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


/* Green expanding section */

.whatsapp-icon {

    position: relative;

    z-index: 2;

    width: 50px;
    height: 50px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: #25D366;

    color: #ffffff;

    font-size: 27px;

    transition:
        width 0.5s cubic-bezier(.4,0,.2,1);

}


.whatsapp-text {

    position: relative;

    z-index: 1;

    flex: 1;

    text-align: center;

    padding: 0 10px;

    font-size: 15px;

    font-weight: 700;

    color: var(--ebz-dark);

    white-space: nowrap;

    transform: translateX(-2px);

}


.whatsapp-button:hover .whatsapp-icon {

    width: calc(100% - 10px);

}


.whatsapp-button:hover {

    transform: translateY(-3px);

    box-shadow:
        0 20px 40px
        rgba(10, 25, 49, 0.22);

}


.whatsapp-button:hover .whatsapp-text {

    color: #ffffff;

}


/* =========================================================
   BRAND INFO
   ========================================================= */

.brand-info {

    text-align: center;

    padding:

        28px

        12px

        22px;

}


.brand-info h1 {

    font-size: clamp(24px, 6vw, 34px);

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -0.5px;

    color: var(--ebz-blue);

}


.brand-info p {

    margin-top: 7px;

    font-size: 14px;

    color: #536075;

    font-weight: 500;

}


/* =========================================================
   LINK LIST
   ========================================================= */

.links {

    display: flex;

    flex-direction: column;

    gap: 14px;

}


/* =========================================================
   LINK CARD
   ========================================================= */

.link-card {

    position: relative;

    width: 100%;

    height: 82px;

    border-radius: var(--card-radius);

    overflow: hidden;

    isolation: isolate;

    box-shadow: var(--shadow-card);

    background: transparent;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


/* =========================================================
   MOVING LIGHT
   ========================================================= */

.card-glow {

    position: absolute;

    z-index: 0;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            var(--ebz-gold) 0%,
            rgba(215, 168, 89, 0.75) 30%,
            rgba(215, 168, 89, 0) 72%
        );

    filter: blur(18px);

    opacity: 0.95;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%)
        translate3d(0, 0, 0);

    animation:
        blob-bounce 7s infinite ease-in-out;

}


/* =========================================================
   CARD GLASS
   ========================================================= */

.link-card::before {

    content: "";

    position: absolute;

    z-index: 1;

    inset: 4px;

    border-radius: calc(var(--card-radius) - 4px);

    background:
        rgba(255, 255, 255, 0.92);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border:
        1px solid
        rgba(255, 255, 255, 0.95);

}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.card-content {

    position: relative;

    z-index: 3;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;

    padding: 10px 15px;

}


/* =========================================================
   ICON
   ========================================================= */

.card-icon {

    width: 50px;
    height: 50px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: var(--ebz-blue);

    color: var(--ebz-gold);

    font-size: 21px;

    box-shadow:
        0 7px 18px
        rgba(1, 21, 112, 0.20);

    transition:
        transform 0.3s ease,
        background 0.3s ease;

}


/* =========================================================
   TEXT
   ========================================================= */

.card-text {

    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

    padding-left: 14px;

}


.card-title {

    font-size: 16px;

    font-weight: 800;

    color: var(--ebz-dark);

}


.card-description {

    margin-top: 3px;

    font-size: 12px;

    color: #687487;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


/* =========================================================
   ARROW
   ========================================================= */

.card-arrow {

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--ebz-blue);

    font-size: 14px;

    transition:
        transform 0.3s ease,
        background 0.3s ease;

}


/* =========================================================
   CARD HOVER
   ========================================================= */

.link-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 18px 40px
        rgba(10, 25, 49, 0.16);

}


.link-card:hover .card-icon {

    transform: scale(1.06);

    background: var(--ebz-dark);

}


.link-card:hover .card-arrow {

    transform: translateX(5px);

    background: var(--ebz-blue);

    color: var(--ebz-gold);

}


/* =========================================================
   BLOB ANIMATION
   ========================================================= */

@keyframes blob-bounce {

    0% {

        transform:
            translate(-50%, -50%)
            translate3d(-70%, -30%, 0);

    }

    25% {

        transform:
            translate(-50%, -50%)
            translate3d(60%, -30%, 0);

    }

    50% {

        transform:
            translate(-50%, -50%)
            translate3d(60%, 50%, 0);

    }

    75% {

        transform:
            translate(-50%, -50%)
            translate3d(-60%, 50%, 0);

    }

    100% {

        transform:
            translate(-50%, -50%)
            translate3d(-70%, -30%, 0);

    }

}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {

    width: 100%;

    padding:

        10px

        20px

        max(
            22px,
            env(safe-area-inset-bottom)
        );

    text-align: center;

}


.footer p {

    font-size: 10px;

    color: #8a94a5;

}


.footer a {

    color: var(--ebz-blue);

    font-weight: 700;

    transition: color 0.2s ease;

}


.footer a:hover {

    color: var(--ebz-gold);

}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 600px) {

    .content {

        width: min(
            calc(100% - 48px),
            680px
        );

    }


    .links {

        gap: 16px;

    }


    .link-card {

        height: 86px;

    }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

    .hero {

        height: 52svh;

        min-height: 480px;

        max-height: 650px;

        border-radius:
            0
            0
            50% 50%
            /
            0
            0
            12% 12%;

    }


    .hero-logo {

        width: 190px;

        max-height: 200px;

    }


    .content {

        width: min(
            calc(100% - 60px),
            700px
        );

    }


    .whatsapp-wrapper {

        margin-top: -32px;

    }


    .brand-info {

        padding-top: 34px;

    }


    .link-card {

        height: 88px;

    }


    .card-title {

        font-size: 17px;

    }


    .card-description {

        font-size: 13px;

    }

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

    .content {

        width: 720px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }


    .card-glow {

        animation: none;

    }


    .link-card,
    .card-icon,
    .card-arrow,
    .whatsapp-button,
    .whatsapp-icon {

        transition: none;

    }

}