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

.optimus-footer{
    background:#07244d;
    color:#fff;
    margin-top:80px;
    overflow:hidden;
}

/* ==========================
   CONTAINER
========================== */

.footer-container{
    width:90%;
    max-width:1400px;
    margin:auto;
    padding:70px 0;

    display:grid;
    grid-template-columns:1.3fr 1fr 1.2fr 1.5fr;
    gap:40px;
}

/* ==========================
   ABOUT SECTION
========================== */

.footer-about img{
    width:180px;
    max-width:100%;
    margin-bottom:20px;
}

.footer-about h3{
    color:#fff;
    font-size:20px;
    margin-bottom:15px;
}

.footer-about p{
    color:#cfd8e3;
    line-height:1.8;
    font-size:15px;
}

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

.footer-social{
    display:flex;
    gap:12px;
    margin-top:25px;
}

.footer-social a{
    width:42px;
    height:42px;

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

    background:#0f3b79;
    color:#fff;

    border-radius:50%;
    text-decoration:none;

    transition:all .3s ease;
}

.footer-social a:hover{
    background:#f4b400;
    color:#07244d;
    transform:translateY(-4px);
}

.footer-social svg{
    width:18px;
    height:18px;
}

/* ==========================
   TITLES
========================== */

.footer-links h4,
.footer-contact h4,
.footer-numbers h4{
    color:#f4b400;
    font-size:20px;
    margin-bottom:20px;
}

/* ==========================
   QUICK LINKS
========================== */

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

.footer-links li{
    margin-bottom:12px;
}

.footer-links a{
    color:#cfd8e3;
    text-decoration:none;
    transition:all .3s ease;
}

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

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

.footer-item{
    display:flex;
    align-items:flex-start;
    gap:15px;
    margin-bottom:20px;
}

.footer-item svg{
    width:20px;
    height:20px;
    color:#f4b400;
    flex-shrink:0;
    margin-top:4px;
}

.footer-contact p{
    color:#cfd8e3;
    line-height:1.8;
    margin:0;
}

.footer-contact a{
    color:#cfd8e3;
    text-decoration:none;
    line-height:1.8;
    transition:.3s;
}

.footer-contact a:hover{
    color:#f4b400;
}

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

.footer-contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.footer-number-card{
    display:flex;
    gap:12px;
    align-items:flex-start;

    background:#0f3b79;
    border:1px solid rgba(255,255,255,.08);

    padding:14px;
    border-radius:12px;

    transition:all .3s ease;
}

.footer-number-card:hover{
    transform:translateY(-4px);
    background:#164a94;
}

.footer-number-card svg{
    width:18px;
    height:18px;
    color:#f4b400;
    flex-shrink:0;
    margin-top:4px;
}

.footer-number-card span{
    display:block;
    color:#f4b400;
    font-size:13px;
    font-weight:600;
    margin-bottom:4px;
}

.footer-number-card a{
    color:#fff;
    text-decoration:none;
    font-size:14px;
    line-height:1.5;
}

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

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.1);
    text-align:center;
    padding:20px;
}

.footer-bottom p{
    margin:0;
    color:#cfd8e3;
    font-size:14px;
    letter-spacing:.3px;
}

/* ==========================
   LAPTOP
========================== */

@media(max-width:1200px){

    .footer-container{
        grid-template-columns:1fr 1fr;
    }

}

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

@media(max-width:768px){

    .footer-container{
        grid-template-columns:1fr;
        gap:35px;
        padding:60px 0;
    }

    .footer-about{
        text-align:center;
    }

    .footer-about img{
        width:160px;
        margin:auto auto 20px;
        display:block;
    }

    .footer-social{
        justify-content:center;
    }

    .footer-contact-grid{
        grid-template-columns:1fr;
    }

}

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

@media(max-width:480px){

    .footer-container{
        width:92%;
        padding:50px 0;
    }

    .footer-about img{
        width:130px;
    }

    .footer-about h3{
        font-size:20px;
    }

    .footer-links h4,
    .footer-contact h4,
    .footer-numbers h4{
        font-size:18px;
    }

    .footer-number-card{
        padding:12px;
    }

    .footer-bottom{
        padding:15px;
    }

    .footer-bottom p{
        font-size:13px;
    }

}