@charset "UTF-8";

/* ==========================================================
   Influence+
   footer.css
========================================================== */

/* ===========================
   Footer
=========================== */

.footer{
    background:#0f172a;
    color:#cbd5e1;
    margin-top:100px;
}

.footer a{
    color:#cbd5e1;
    transition:.3s;
}

.footer a:hover{
    color:#ffffff;
}

/* ===========================
   Top
=========================== */

.footer__top{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:80px;
    padding:80px 0 60px;
}

/* ===========================
   About
=========================== */

.footer__logo{
    display:inline-block;
    margin-bottom:25px;
    font-size:2rem;
    font-weight:700;
    color:#ffffff;
}

.footer__logo span{
    color:var(--primary);
}

.footer__description{
    margin-bottom:35px;
    color:#94a3b8;
    line-height:1.9;
}

/* ===========================
   SNS
=========================== */

.footer__sns{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.footer__sns a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:46px;
    height:46px;
    padding:0 16px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    font-size:.9rem;
    font-weight:600;
}

.footer__sns a:hover{
    background:var(--primary);
    transform:translateY(-3px);
}

/* ===========================
   Navigation
=========================== */

.footer__nav{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:50px;
}

.footer__column h3{
    margin-bottom:24px;
    color:#ffffff;
    font-size:1.1rem;
}

.footer__column ul{
    display:grid;
    gap:14px;
}

.footer__column li{
    list-style:none;
}

.footer__column a{
    display:inline-block;
    color:#94a3b8;
}

.footer__column a:hover{
    color:#ffffff;
    transform:translateX(6px);
}

/* ===========================
   Bottom
=========================== */

.footer__bottom{
    border-top:1px solid rgba(255,255,255,.08);
    padding:25px 0;
    text-align:center;
}

.footer__bottom p{
    color:#94a3b8;
    font-size:.9rem;
}

/* ===========================
   Responsive
=========================== */

@media (max-width:1024px){

    .footer__top{
        grid-template-columns:1fr;
        gap:60px;
    }

}

@media (max-width:768px){

    .footer{
        margin-top:70px;
    }

    .footer__top{
        padding:60px 0 40px;
    }

    .footer__nav{
        grid-template-columns:1fr;
        gap:40px;
    }

    .footer__column{
        border-bottom:1px solid rgba(255,255,255,.08);
        padding-bottom:30px;
    }

    .footer__column:last-child{
        border-bottom:none;
        padding-bottom:0;
    }

    .footer__logo{
        font-size:1.7rem;
    }

}

@media (max-width:480px){

    .footer__sns{
        gap:10px;
    }

    .footer__sns a{
        flex:1;
        min-width:0;
        padding:0;
        height:44px;
        font-size:.8rem;
    }

    .footer__bottom{
        padding:20px 0;
    }

    .footer__bottom p{
        font-size:.8rem;
    }

}