/*=========================================================
    KK WHATSAPP BUTTON
=========================================================*/

.kk-whatsapp-btn{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:18px 24px;

    border:none;

    border-radius:22px;

    cursor:pointer;

    color:#fff;

    background:linear-gradient(
        135deg,
        #25D366,
        #1EBE5D
    );

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

    transition:all .35s ease;

}

.kk-whatsapp-btn:hover{

    transform:translateY(-5px);

    box-shadow:
        0 20px 45px rgba(37,211,102,.35);

}

.kk-btn-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.18);

    font-size:28px;

}

.kk-btn-content{

    flex:1;

    text-align:left;

}

.kk-btn-title{

    display:block;

    font-size:19px;

    font-weight:700;

    margin-bottom:3px;

}

.kk-btn-content small{

    opacity:.9;

    font-size:13px;

}

.kk-btn-arrow{

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    transition:.3s;

}

.kk-whatsapp-btn:hover .kk-btn-arrow{

    transform:translateX(6px);

}

@media(max-width:768px){

    .kk-whatsapp-btn{

        padding:16px 18px;

    }

    .kk-btn-title{

        font-size:17px;

    }

}

/*=========================================================
    LOADING
=========================================================*/

.kk-whatsapp-btn.loading{

    opacity:.85;

    pointer-events:none;

}

.kk-whatsapp-btn.loading .kk-btn-arrow{

    animation:kk-spin .8s linear infinite;

}

@keyframes kk-spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}