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

.whatsapp-float{

    position:fixed;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    z-index:9999;

    display:flex;

    align-items:center;

    gap:6px;
}

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

.whatsapp-icon{

    width:66px;
    height:66px;

    background:#25d366;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#fff;

    font-size:34px;

    box-shadow:
    0 12px 35px rgba(0,0,0,.18);

    transition:.35s ease;
}

/* HOVER */

.whatsapp-icon:hover{

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

    box-shadow:
    0 18px 40px rgba(37,211,102,.28);
}

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

.whatsapp-text{

    writing-mode:vertical-rl;

    transform:rotate(180deg);

    background:#E14514;

    padding:
    16px
    8px;

    border-radius:
    14px
    0
    0
    14px;

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

    transition:.35s ease;
}

/* LINK */

.whatsapp-text a{

    color:#fff;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    letter-spacing:.5px;

    display:block;
}

/* HOVER */

.whatsapp-float:hover .whatsapp-text{

    background:#E14514;
}

.whatsapp-text a:hover{

    color:#fff;
}

/* ========================================
LAPTOP
======================================== */

@media(max-width:1400px){

.whatsapp-icon{

    width:62px;
    height:62px;

    font-size:32px;
}

}

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

@media(max-width:992px){

.whatsapp-float{

    right:14px;
}

.whatsapp-icon{

    width:58px;
    height:58px;

    font-size:28px;
}

.whatsapp-text a{

    font-size:14px;
}

.whatsapp-text{

    padding:
    14px
    7px;
}

}

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

@media(max-width:768px){

.whatsapp-float{

    right:14px;

    bottom:18px;

    top:auto;

    transform:none;
}

.whatsapp-icon{

    width:54px;
    height:54px;

    font-size:26px;
}

.whatsapp-text{

    padding:
    12px
    6px;

    border-radius:12px 0 0 12px;
}

.whatsapp-text a{

    font-size:13px;
}

}

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

@media(max-width:480px){

.whatsapp-text{

    display:none;
}

.whatsapp-icon{

    width:50px;
    height:50px;

    font-size:24px;
}

}