/* =========================================================
   COMPONENTS
========================================================= */

section {

    scroll-margin-top:
        80px;

}


#features,
#colours,
#applications,
#specifications,
#gallery,
#enquiry {

    min-height:
        1px;

}
/* =====================================================
   FLOATING CONTACT BUTTONS
===================================================== */

.floating-contact {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;

    display: flex;
    flex-direction: column;
    gap: 10px;
}


.floating-contact-btn {
    width: 52px;
    height: 52px;

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

    border-radius: 50%;

    text-decoration: none;

    box-shadow:
        0 10px 30px rgba(0,0,0,.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        width .25s ease;

    overflow: hidden;
}


.floating-contact-btn:hover {
    width: 145px;
    border-radius: 30px;

    transform: translateY(-3px);

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


.contact-icon {
    width: 22px;
    height: 22px;

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

    flex-shrink: 0;
}


.contact-icon svg {
    width: 100%;
    height: 100%;

    fill: currentColor;
}


.contact-label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;

    white-space: nowrap;

    margin-left: 0;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;

    transition:
        max-width .25s ease,
        opacity .2s ease,
        margin .25s ease;
}


.floating-contact-btn:hover .contact-label {
    max-width: 90px;
    opacity: 1;
    margin-left: 8px;
}


/* WHATSAPP */

.whatsapp-btn {
    background: #25D366;
    color: #ffffff;
}


/* CALL */

.call-btn {
    background: #061a12;
    color: #ffffff;

    border: 1px solid rgba(225,194,123,.35);
}


/* =====================================================
   MOBILE CONTACT BAR
===================================================== */

.mobile-contact-bar {
    display: none;
}


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

@media (max-width: 700px) {

    .floating-contact {
        display: none;
    }


    .mobile-contact-bar {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 99999;

        display: grid;
        grid-template-columns: 1fr 1fr;

        height: 58px;

        background: #061a12;

        border-top:
            1px solid rgba(225,194,123,.25);

        box-shadow:
            0 -8px 30px rgba(0,0,0,.18);
    }


    .mobile-contact {
        display: flex;

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

        gap: 9px;

        text-decoration: none;

        font-size: 10px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }


    .mobile-contact svg {
        width: 19px;
        height: 19px;

        fill: currentColor;
    }


    .whatsapp-mobile {
        color: #25D366;
    }


    .call-mobile {
        color: #ffffff;

        border-left:
            1px solid rgba(225,194,123,.2);
    }

}