/*=========================================================
    HP-EXAM-PRO
    FOOTER.CSS
==========================================================*/

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

.site-footer{
    position:relative;
    background:var(--gray-900);
    color:rgba(255,255,255,.85);
    padding:80px 0 0;
}

.site-footer a{
    color:rgba(255,255,255,.8);
    transition:var(--transition);
}

.site-footer a:hover{
    color:var(--white);
}

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

.footer-top{
    padding-bottom:50px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

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

.footer-brand{
    margin-bottom:1.5rem;
}

.footer-logo{
    display:flex;
    align-items:center;
    gap:.75rem;
    margin-bottom:1rem;
}

.footer-logo img{
    width:48px;
    height:48px;
    object-fit:contain;
}

.footer-logo h3{
    margin:0;
    color:var(--white);
    font-size:1.5rem;
}

.footer-description{
    color:rgba(255,255,255,.75);
    line-height:1.8;
    margin-bottom:1.5rem;
}

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

.footer-title{
    color:var(--white);
    margin-bottom:1.5rem;
    font-size:1.2rem;
    position:relative;
    padding-bottom:.75rem;
}

.footer-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:50px;
    height:3px;
    background:var(--primary);
    border-radius:10px;
}

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

.footer-links{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-links li{
    margin-bottom:.75rem;
}

.footer-links a{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
}

.footer-links a::before{
    content:"›";
    color:var(--primary);
    font-size:1rem;
    transition:var(--transition);
}

.footer-links a:hover{
    padding-left:6px;
}

/*==================================================
    CONTACT INFO
==================================================*/

.footer-contact{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    margin-bottom:1rem;
}

.footer-contact i{
    color:var(--primary);
    margin-top:.2rem;
}

/*==================================================
    SOCIAL ICONS
==================================================*/

.footer-social{
    display:flex;
    gap:.75rem;
    margin-top:1.5rem;
}

.footer-social a{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:var(--white);
    transition:var(--transition);
}

.footer-social a:hover{
    background:var(--primary);
    transform:translateY(-4px);
}

/*==================================================
    NEWSLETTER
==================================================*/

.footer-newsletter p{
    color:rgba(255,255,255,.75);
    margin-bottom:1rem;
}

.footer-newsletter form{
    display:flex;
    gap:.75rem;
}

.footer-newsletter .form-control{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:var(--white);
}

.footer-newsletter .form-control::placeholder{
    color:rgba(255,255,255,.55);
}

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

.footer-bottom{
    padding:20px 0;
}

.footer-bottom-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
}

.footer-bottom p{
    margin:0;
    color:rgba(255,255,255,.65);
}

.footer-bottom-links{
    display:flex;
    gap:1.5rem;
}

/*==================================================
    BACK TO TOP
==================================================*/

.back-to-top{
    position:fixed;
    right:25px;
    bottom:25px;

    width:50px;
    height:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--primary);
    color:var(--white);

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

    opacity:0;
    visibility:hidden;

    transform:translateY(15px);

    transition:var(--transition);

    z-index:999;
}

.back-to-top.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.back-to-top:hover{
    background:var(--primary-dark);
    color:var(--white);
}

/*==================================================
    PAYMENT ICONS (Optional)
==================================================*/

.footer-payments{
    display:flex;
    gap:.75rem;
    margin-top:1rem;
}

.footer-payments img{
    height:28px;
    width:auto;
    opacity:.85;
}

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

@media (max-width:991.98px){

    .footer-top .row > div{
        margin-bottom:2rem;
    }

}

@media (max-width:767.98px){

    .footer-newsletter form{
        flex-direction:column;
    }

    .footer-bottom-content{
        flex-direction:column;
        text-align:center;
    }

    .footer-bottom-links{
        flex-wrap:wrap;
        justify-content:center;
    }

}

@media (max-width:575.98px){

    .site-footer{
        padding-top:60px;
    }

    .footer-title{
        font-size:1.1rem;
    }

    .back-to-top{
        width:45px;
        height:45px;
        right:15px;
        bottom:15px;
    }

}