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

main {

    min-height: 200vh;

}


/* Temporary area until Hero is created */

.homePlaceholder {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(circle at 30% 30%,
            rgba(15, 118, 110, .20),
            transparent 40%);

    color: rgba(255, 255, 255, .45);

}


/* ==========================================================
   MOBILE BOOK NOW
========================================================== */

.mobileBookBtn {

    position: fixed;

    left: 42%;

    bottom: 10px;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    width: 80%;

    height: 52px;

    border-radius: 999px;

    background: var(--gradient);

    border: 1px solid rgba(255, 255, 255, .22);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .35);

    color: #fff;

    font-weight: 900;

    z-index: var(--z-book);

    transition: var(--transition);

    font-size: 28px;

}

.mobileBookBtn:hover {

    transform:
        translateX(-50%) translateY(-4px);

}


/* ==========================================================
   FLOATING BUTTONS
========================================================== */

.floatingButtons {

    position: fixed;

    right: 24px;

    bottom: 28px;

    display: flex;

    flex-direction: column;

    gap: 12px;

    z-index: var(--z-floating);

    transition:
        opacity .4s ease,
        transform .4s ease;

}


/* Hide during scroll */

body.uiHidden .floatingButtons {

    opacity: 0;

    transform: translateX(25px);

    pointer-events: none;

}


/* ==========================================================
   FLOAT BUTTON
========================================================== */

.floatBtn {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--liquid-glass-bg);

    border:
        var(--liquid-glass-border);

    backdrop-filter:
        blur(28px)saturate(135%);

    -webkit-backdrop-filter:
        blur(28px)saturate(135%);

    box-shadow:
        var(--liquid-glass-shadow);

    color: black;

    font-size: 21px;

    cursor: pointer;

    transition: var(--transition);

}

.floatBtn:hover {

    transform:
        translateY(-5px) scale(1.06);

}

.floatBtn.whatsapp:hover {

    background:
        linear-gradient(135deg,
            #25D366,
            #128C7E);

}

.floatBtn.call:hover {

    background: var(--gradient);

}

.floatBtn.top:hover {

    background: #fff;

    color: #111;

}


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

@media (min-width: 769px) {

    .mobileHeader,
    .mobileMenu,
    .mobileBookBtn {

        display: none;

    }

}


/* ==========================================================
   MOBILE ONLY
========================================================== */

@media (max-width: 768px) {

    .desktopHeader {

        display: none;

    }

    .floatingButtons {

        right: 10px;

        bottom: 10px;

    }

    .floatBtn {

        width: 52px;

        height: 52px;

    }

    body.uiHidden .mobileBookBtn {

        opacity: 0;

        transform:
            translateX(-50%) translateY(25px);

        pointer-events: none;

    }

}