/* ==================================================
   CONTACT WIDGET
================================================== */

.contact-widget{
    position:fixed;
    right:30px;
    bottom:30px;
    display:flex;
    align-items:center;
    gap:12px;
    z-index:9999;
}

/* ==================================================
   CONTACT OPTIONS
================================================== */

.contact-options{
    display:flex;
    align-items:center;
    gap:12px;

    opacity:0;
    transform:translateX(20px);

    pointer-events:none;

    transition:all .35s ease;
}

.contact-widget.open .contact-options{

    opacity:1;

    transform:translateX(0);

    pointer-events:auto;

}

/* ==================================================
   CONTACT ICONS
================================================== */

.contact-option{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#111;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:20px;

    box-shadow:0 8px 24px rgba(0,0,0,.25);

    transition:.25s;

}

.contact-option:hover{

    background:var(--accent);

    color:#000;

    transform:translateY(-4px) scale(1.08);

}

/* ==================================================
   CONTACT BUTTON
================================================== */

.contact-toggle{

    border:none;

    background:var(--accent);

    color:#000;

    padding:14px 22px;

    border-radius:999px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:10px;

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

    transition:.25s;

}

.contact-toggle:hover{

    transform:translateY(-3px);

}

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

@media(max-width:768px){

    .contact-widget{

        right:18px;

        bottom:18px;

    }

    .contact-toggle{

        padding:12px 18px;

        font-size:14px;

    }

    .contact-option{

        width:42px;

        height:42px;

        font-size:18px;

    }

    .contact-options{

        gap:10px;

    }

}