/* ===========================================================
   FOOTER.CSS
   People & Culture at Work
   =========================================================== */

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

.site-footer{

    background:var(--dark);

    color:rgba(255,255,255,.85);

    position:relative;

    overflow:hidden;

}

/* Decorative background */

.site-footer::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-120px;

    width:420px;

    height:420px;

    border-radius:50%;

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

}

.site-footer::after{

    content:"";

    position:absolute;

    bottom:-150px;

    left:-100px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(245,130,32,.08);

}

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

.site-footer .container{

    position:relative;

    z-index:2;

}

.footer-grid{

    padding:90px 0 60px;

}

.footer-column h3{

    color:white;

    margin-bottom:28px;

    font-size:1.3rem;

}

.footer-column p{

    color:rgba(255,255,255,.75);

    margin-bottom:18px;

}

.footer-column ul{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-column ul li a{

    color:rgba(255,255,255,.75);

    transition:var(--transition);

}

.footer-column ul li a:hover{

    color:var(--primary-orange);

    padding-left:6px;

}

/* ===========================================================
   LOGO
=========================================================== */

.footer-logo{

    width:220px;

    margin-bottom:28px;

}

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

.footer-social{

    display:flex;

    gap:16px;

    margin-top:30px;

}

.footer-social a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:white;

    transition:var(--transition);

}

.footer-social a:hover{

    background:var(--primary-orange);

    transform:translateY(-4px);

}

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

.footer-column p i{

    color:var(--primary-orange);

    margin-right:10px;

}

.footer-button{

    margin-top:18px;

}

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

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    padding:24px 0;

}

.footer-bottom-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.footer-bottom p{

    margin:0;

    color:rgba(255,255,255,.65);

}

.footer-bottom a{

    color:rgba(255,255,255,.7);

}

.footer-bottom a:hover{

    color:var(--primary-orange);

}

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

@media(max-width:768px){

    .footer-grid{

        padding:70px 0 40px;

    }

    .footer-bottom-content{

        flex-direction:column;

        text-align:center;

    }

    .footer-social{

        justify-content:center;

    }

}