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


/* =========================================
   FOOTER
========================================= */

footer{

    margin-top:80px;

    padding:45px 20px;

    background:#ffffff;

    border-top:1px solid var(--border);

    text-align:center;

}


/* =========================================
   MOTTO
========================================= */

footer p{

    color:var(--primary);

    font-size:24px;

    font-style:italic;

    margin-bottom:15px;

    font-weight:500;

}


/* =========================================
   COPYRIGHT
========================================= */

footer small{

    display:block;

    color:#888;

    font-size:16px;

    line-height:1.8;

}


/* =========================================
   LINK
========================================= */

footer a{

    color:var(--primary);

    text-decoration:none;

    transition:.3s;

}

footer a:hover{

    color:var(--primary-dark);

}


/* =========================================
   GARIS
========================================= */

.footer-line{

    width:100px;

    height:4px;

    background:var(--primary);

    margin:20px auto;

    border-radius:50px;

    opacity:.2;

}


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

.footer-social{

    display:flex;

    justify-content:center;

    gap:20px;

    margin:25px 0;

}

.footer-social a{

    width:45px;

    height:45px;

    border-radius:50%;

    background:#eef5ff;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary);

    font-size:20px;

    transition:.3s;

}

.footer-social a:hover{

    background:var(--primary);

    color:#ffffff;

    transform:translateY(-5px);

}


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

.copyright{

    margin-top:20px;

    color:#999;

    font-size:14px;

}


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

@media(max-width:768px){

footer{

    padding:35px 20px;

}

footer p{

    font-size:20px;

}

footer small{

    font-size:14px;

}

.footer-social{

    gap:12px;

}

.footer-social a{

    width:40px;

    height:40px;

    font-size:18px;

}

}