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

.footer{
    width:100%;
    background:#0C2D53;
    color:#ffffff;
    margin-top:70px;
    padding:70px 0 28px;
}

.footer .shell{
    width:min(1450px,94%);
    margin:auto;
}

.footer-top{
    display:grid;
    grid-template-columns:1.8fr 1fr 1fr 1fr;
    gap:60px;
    align-items:flex-start;
}

/* ================= Brand ================= */

.footer-brand .brand{
    display:flex;
    align-items:flex-start;
    gap:18px;
    color:#fff;
}

.footer-brand .glyph{
    width:72px;
    height:72px;
    object-fit:contain;
}

.footer-brand span{
    font-size:19px;
    font-weight:700;
    line-height:1.2;
}

.footer-brand small{
    display:block;
    margin-top:8px;
    color:#F2B84A;
    font-size:13px;
    letter-spacing:4px;
    text-transform:uppercase;
}

.footer-brand p:first-of-type{
    margin-top:20px;
    margin-bottom:18px;
    color:#F2B84A;
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:13px;
}

.footer-brand p:last-of-type{
    color:#C7D2DC;
    font-size:16px;
    line-height:1.9;
    max-width:420px;
}

/* ================= Headings ================= */

.footer h4{
    color:#F2B84A;
    font-size:14px;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:28px;
}

/* ================= Links ================= */

.footer a{
    display:block;
    color:#D6E0EA;
    text-decoration:none;
    margin-bottom:18px;
    font-size:16px;
    transition:.25s;
}

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

/* ================= Social Icons ================= */

.footer-contact-icons{
    display:flex;
    gap:18px;
    margin-top:30px;
}

.footer-contact-icons a{
    width:56px;
    height:56px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.18);
    display:flex;
    justify-content:center;
    align-items:center;
    transition:.3s;
}

.footer-contact-icons a:hover{
    background:#F2B84A;
    border-color:#F2B84A;
}

.footer-contact-icons svg{
    width:22px;
    height:22px;
    fill:#ffffff;
}

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

.footer-bottom{
    margin-top:50px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.12);

    display:grid;
    grid-template-columns:1.4fr 1fr 1.4fr;
    align-items:center;
    gap:24px;
    padding-right:85px;

    color:#A7B5C5;
    font-size:12px;
    letter-spacing:0.8px;
    line-height:1.5;
}

.footer-bottom span:nth-child(1){
    text-align:left;
}

.footer-bottom span:nth-child(2){
    text-align:center;
}

.footer-bottom span:last-child{
    text-align:right;
}

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

@media (max-width:1100px){

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

.footer-bottom{
    display:flex;
    flex-direction:column;
    text-align:center;
    padding-right:0;
    gap:12px;
}

.footer-bottom span,
.footer-bottom span:last-child,
.footer-bottom span:nth-child(2){
    text-align:center;
}

}

@media (max-width:768px){

.footer{
    padding:55px 0 24px;
}

.footer-top{
    grid-template-columns:1fr;
    gap:35px;
}

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

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

.footer-brand p:last-of-type{
    margin:auto;
}

.footer-contact-icons{
    justify-content:center;
}

.footer h4{
    margin-top:10px;
}

}