/* =========================================
   HAS FRAMEWORK 1.0
   File : 06-button.css
   Website : haldi.my.id
   Author : Haldi Ali Syukur
========================================= */


/* =========================================
   BUTTON GROUP
========================================= */

.buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:45px;

}


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

.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    min-width:180px;

    padding:15px 28px;

    background:var(--primary);

    color:var(--white);

    border-radius:50px;

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    transition:all .35s ease;

    box-shadow:0 8px 20px rgba(21,101,192,.25);

}


/* =========================================
   HOVER
========================================= */

.btn:hover{

    background:var(--primary-dark);

    transform:translateY(-5px);

    box-shadow:0 15px 30px rgba(21,101,192,.35);

}


/* =========================================
   ACTIVE
========================================= */

.btn:active{

    transform:scale(.97);

}


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

.btn i{

    font-size:18px;

}

.btn img{

    width:20px;

    height:20px;

}


/* =========================================
   WARNA KHUSUS
========================================= */

.btn-facebook{

    background:#1877F2;

}

.btn-youtube{

    background:#FF0000;

}

.btn-instagram{

    background:#E1306C;

}

.btn-tiktok{

    background:#111111;

}

.btn-whatsapp{

    background:#25D366;

}

.btn-store{

    background:#ff9800;

}

.btn-portal{

    background:#1565c0;

}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:768px){

.buttons{

    flex-direction:column;

    gap:15px;

}

.btn{

    width:100%;

    max-width:320px;

    font-size:17px;

    padding:14px 20px;

}

}