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

.footer{

    background:#151515;
    color:#d7d7d7;

    padding:70px 0 20px;

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

}

.footer__grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.3fr;

    gap:60px;

    align-items:flex-start;

}

.footer__about{

    max-width:460px;

}

.footer__tagline{

    margin:10px 0 18px;

    color:var(--primary);

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.footer__about p{

    margin:0;

    color:#9d9d9d;

    line-height:1.85;

    font-size:15px;

}

.footer__logo{

    display:inline-block;

    font-size:2.4rem;

    font-weight:800;

    letter-spacing:-1px;

    color:#fff;

    text-decoration:none;

}

.footer__logo span{

    color:var(--primary);

}

.footer h3{

    position:relative;

    display:inline-block;

    margin-bottom:24px;

    color:#fff;

    font-size:1.1rem;

    font-weight:700;

}

.footer h3::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:40px;
    height:2px;

    background:var(--primary);

    border-radius:999px;

}

.footer ul{

    list-style:none;

    margin:0;

    padding:0;

}

.footer li{

    margin-bottom:12px;

}

.footer a{

    display:inline-block;

    color:#b7b7b7;

    text-decoration:none;

    transition:
        color .25s ease,
        transform .25s ease;

}

.footer a:hover{

    color:var(--primary);

    transform:translateX(4px);

}

/* ==========================================================
   HIGHLIGHTS
========================================================== */

.footer__highlights li{

    display:flex;

    align-items:flex-start;

    gap:10px;

    color:#c5c5c5;

    line-height:1.7;

    transition:.25s ease;

}

.footer__highlights li:hover{

    color:#fff;

    transform:translateX(4px);

}

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

.footer__contact li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:14px;

}

.footer__contact span{

    width:34px;
    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:50%;

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

    color:var(--primary);

    font-size:15px;

}

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

.footer__bottom{

    margin-top:45px;

    padding-top:20px;

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

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    color:#8d8d8d;

    font-size:14px;

}

.footer__bottom span{

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--primary);

}

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

@media (max-width:992px){

    .footer{

        padding:60px 0 20px;

    }

    .footer__grid{

        grid-template-columns:1fr 1fr;

        gap:40px;

    }

    .footer__bottom{

        margin-top:35px;

    }

}

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

@media (max-width:768px){

    .footer{

        padding:50px 0 18px;

    }

    .footer__grid{

        grid-template-columns:1fr;

        gap:35px;

    }

    .footer__logo{

        font-size:2rem;

    }

    .footer__bottom{

        margin-top:30px;

        padding-top:18px;

        flex-direction:column;

        gap:8px;

        text-align:center;

    }

    .footer__bottom span{

        display:none;

    }

}