/* Import Font Awesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* Base container */
.contact-float {
    position: fixed;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

    /* Items */
    .contact-float .item {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        color: #fff;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.25);
    }

        /* Hide text on desktop */
        .contact-float .item span {
            display: none;
        }

/* Colors */
.call {
    background: #f57c00;
}

.whatsapp {
    background: #25D366;
}

.message {
    background: #5a8f1b;
}

/* ============== MOBILE VIEW ============== */
@media (max-width: 768px) {

    .contact-float {
        flex-direction: row;
        bottom: 0;
        top: auto;
        right: 0;
        left: 0;
        transform: none;
        width: 100%;
        background: #5a8f1b;
        gap: 0;
    }

        .contact-float .item {
            width: 33.33%;
            height: auto;
            border-radius: 0;
            flex-direction: column;
            padding: 8px 0;
            box-shadow: none;
            font-size: 20px;
        }

            .contact-float .item span {
                display: block;
                font-size: 12px;
                margin-top: 3px;
                font-weight: 600;
            }

    body {
        padding-bottom: 60px;
    }
}