/* ==========================================================
   JACK RENTAL MOBIL - FOOTER
========================================================== */

#footer{
    position:relative;
    background:#0F172A;
    color:rgba(255,255,255,.7);
    padding:70px 0 0;
    overflow:hidden;
}
#footer::before{
    content:none;
}

.footer-top{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;
    gap:40px;
    padding-bottom:50px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.footer-about img{
    height:40px;
    margin-bottom:18px;
}
.footer-about p{
    font-size:14px;
    line-height:1.8;
    color:rgba(255,255,255,.6);
    margin-bottom:22px;
}

.footer-social{
    display:flex;
    gap:10px;
}
.footer-social a{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:14px;
    transition:.25s ease;
}
.footer-social a:hover{
    background:var(--primary);
    transform:translateY(-3px);
}

.footer-menu h3,
.footer-contact h3{
    font-size:15px;
    font-weight:700;
    color:#fff;
    margin-bottom:20px;
}
.footer-menu ul,
.footer-contact ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.footer-menu a{
    font-size:14px;
    color:rgba(255,255,255,.62);
    transition:.2s ease;
}
.footer-menu a:hover{
    color:#fff;
    padding-left:4px;
}

.footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:14px;
    color:rgba(255,255,255,.62);
    line-height:1.6;
}
.footer-contact li i{
    color:var(--primary);
    margin-top:3px;
    width:16px;
    flex-shrink:0;
}

.footer-bottom{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:26px 0;
    font-size:13px;
    color:rgba(255,255,255,.5);
}
.footer-bottom div{
    display:flex;
    gap:24px;
}
.footer-bottom a{
    color:rgba(255,255,255,.5);
    transition:.2s ease;
}
.footer-bottom a:hover{
    color:#fff;
}

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

@media(max-width:1100px){
    .footer-top{
        grid-template-columns:repeat(2,1fr);
        gap:36px;
    }
    .footer-about{ grid-column:1 / -1; }
}

@media(max-width:768px){
    #footer{ padding:50px 0 0; }
    .footer-top{
        grid-template-columns:1fr;
        gap:32px;
        padding-bottom:36px;
    }
    .footer-bottom{
        flex-direction:column;
        text-align:center;
        gap:12px;
        padding:22px 0;
    }
}