/* ==========================================================
   PORTAL GTK KABUPATEN KONAWE
   File    : 12-footer.css
   Version : 7.0 Stable
   Modul   : Footer
   Developer : Haldi Ali Syukur
==========================================================*/


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

footer{

    width:95%;

    max-width:var(--container);

    margin:40px auto 100px;

    padding:45px 40px;

    background:var(--white);

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

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-md);

    text-align:center;

    position:relative;

    overflow:hidden;

    animation:footerFade .8s ease;

}


/* ==========================================================
   BACKGROUND DECORATION
==========================================================*/

footer::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    top:-110px;

    left:-110px;

    border-radius:50%;

    background:rgba(21,101,192,.04);

}


footer::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-90px;

    bottom:-90px;

    border-radius:50%;

    background:rgba(21,101,192,.04);

}


/* ==========================================================
   HEADER
==========================================================*/

.footer-header{

    position:relative;

    z-index:2;

}


/* ==========================================================
   LINE
==========================================================*/

.footer-line{

    width:90px;

    height:5px;

    margin:0 auto 24px;

    border-radius:999px;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            var(--primary-dark)

        );

}


/* ==========================================================
   TITLE
==========================================================*/

footer h3{

    color:var(--primary);

    font-size:32px;

    font-weight:800;

    margin-bottom:12px;

}


/* ==========================================================
   TAGLINE
==========================================================*/

.footer-tagline{

    color:var(--primary);

    font-size:18px;

    font-weight:700;

    margin-bottom:20px;

}


/* ==========================================================
   DESCRIPTION
==========================================================*/

.footer-description{

    max-width:850px;

    margin:0 auto 30px;

    color:var(--text);

    font-size:17px;

    line-height:1.9;

}

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

.footer-info{

    position:relative;

    z-index:2;

    margin-bottom:32px;

    color:var(--text);

    font-size:16px;

    line-height:2;

}


/* ==========================================================
   SOCIAL MEDIA
==========================================================*/

.footer-social{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:32px;

}


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

.footer-social a{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    text-decoration:none;

    background:#F5F9FF;

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

    color:var(--primary);

    font-size:22px;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}


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

.footer-social a:hover{

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

    background:var(--primary);

    color:var(--white);

    box-shadow:var(--shadow-lg);

}


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

.footer-social a:active{

    transform:scale(.95);

}


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

.copyright{

    position:relative;

    z-index:2;

    margin-bottom:18px;

    color:var(--text-light);

    font-size:15px;

    line-height:1.9;

}


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

footer small{

    display:block;

    position:relative;

    z-index:2;

    margin-bottom:30px;

    color:var(--text-light);

    font-size:14px;

    line-height:1.8;

}

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

.footer-signature{

    position:relative;

    z-index:2;

    margin-top:15px;

    padding-top:30px;

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

}


/* ==========================================================
   QUOTE BOX
==========================================================*/

.footer-quote{

    max-width:850px;

    margin:0 auto;

    padding:24px 28px;

    background:#F8FBFF;

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

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

}


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

#footerQuote{

    color:var(--primary);

    font-size:19px;

    line-height:1.9;

    font-style:italic;

    transition:var(--transition);

    position:relative;

}


/* ==========================================================
   OPEN QUOTE
==========================================================*/

#footerQuote::before{

    content:"❝";

    display:block;

    font-size:48px;

    color:var(--primary);

    opacity:.25;

    margin-bottom:10px;

}


/* ==========================================================
   CLOSE QUOTE
==========================================================*/

#footerQuote::after{

    content:"❞";

    display:block;

    font-size:48px;

    color:var(--primary);

    opacity:.25;

    margin-top:10px;

}


/* ==========================================================
   AUTHOR
==========================================================*/

.footer-signature span{

    display:block;

    margin-top:20px;

    color:var(--primary);

    font-size:18px;

    font-weight:700;

}


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

footer{

    opacity:0;

    transform:translateY(20px);

    animation:footerFade .8s ease forwards;

}


@keyframes footerFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================================
   SOCIAL ICON ANIMATION
==========================================================*/

.footer-social a i{

    transition:var(--transition);

}


.footer-social a:hover i{

    transform:scale(1.15) rotate(-8deg);

}

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

/* ==========================================================
   DESKTOP KECIL
==========================================================*/

@media (max-width:1200px){

footer{

    padding:40px 35px;

}

.footer-description{

    max-width:800px;

}

.footer-quote{

    max-width:800px;

}

}


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

@media (max-width:992px){

footer{

    padding:36px 30px;

}

footer h3{

    font-size:28px;

}

.footer-tagline{

    font-size:17px;

}

.footer-description{

    font-size:16px;

}

.footer-info{

    font-size:15px;

}

.footer-social{

    gap:15px;

}

.footer-social a{

    width:48px;

    height:48px;

    font-size:20px;

}

.footer-quote{

    padding:22px;

}

#footerQuote{

    font-size:18px;

}

.footer-signature span{

    font-size:17px;

}

}


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

@media (max-width:768px){

footer{

    padding:30px 22px;

}

footer h3{

    font-size:25px;

}

.footer-tagline{

    font-size:16px;

}

.footer-description{

    font-size:15px;

    line-height:1.8;

}

.footer-info{

    font-size:15px;

    line-height:1.8;

}

.footer-social{

    gap:14px;

}

.footer-social a{

    width:46px;

    height:46px;

    font-size:19px;

}

.footer-quote{

    padding:20px 18px;

}

#footerQuote{

    font-size:17px;

    line-height:1.8;

}

.footer-signature span{

    font-size:16px;

}

}


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

@media (max-width:576px){

footer{

    padding:24px 18px;

    border-radius:24px;

}

.footer-line{

    width:70px;

    height:4px;

}

footer h3{

    font-size:22px;

}

.footer-tagline{

    font-size:15px;

}

.footer-description{

    font-size:14px;

}

.footer-info{

    font-size:14px;

}

.footer-social{

    gap:12px;

}

.footer-social a{

    width:44px;

    height:44px;

    font-size:18px;

}

.footer-quote{

    padding:18px 16px;

}

#footerQuote{

    font-size:16px;

}

#footerQuote::before,

#footerQuote::after{

    font-size:40px;

}

.footer-signature span{

    font-size:15px;

}

footer small{

    font-size:13px;

}

}


/* ==========================================================
   EXTRA SMALL
==========================================================*/

@media (max-width:380px){

footer{

    padding:20px 15px;

}

footer h3{

    font-size:20px;

}

.footer-tagline{

    font-size:14px;

}

.footer-description{

    font-size:13px;

}

.footer-info{

    font-size:13px;

}

.footer-social a{

    width:40px;

    height:40px;

    font-size:16px;

}

.footer-quote{

    padding:16px 14px;

}

#footerQuote{

    font-size:15px;

    line-height:1.7;

}

#footerQuote::before,

#footerQuote::after{

    font-size:34px;

}

.footer-signature span{

    font-size:14px;

}

footer small{

    font-size:12px;

}

}