.footer{

padding-top:50px;

}

.sp-footer{
background:var(--primary-900);
color:white;
padding:60px 0 30px 0;

/* accent top border */
border-top:3px solid var(--accent-500);
}

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

.footer-brand{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
font-family:var(--font-heading);
}

.sp-footer p{
font-size:13px;
color:rgba(255,255,255,0.5);
line-height:1.7;
}

.sp-footer h5{
font-size:14px;
margin-bottom:12px;
color:white;
}

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

.sp-footer li{
font-size:13px;
margin-bottom:8px;
}

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

.sp-footer a{
color:rgba(255,255,255,0.5);
text-decoration:none;
transition:color 0.2s ease;
}

.sp-footer a:hover{
color:rgba(255,255,255,0.85);
}

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

.footer-social{
display:flex;
gap:8px;
margin-top:14px;
}

.footer-social a{
width:32px;
height:32px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.2);
display:flex;
align-items:center;
justify-content:center;
font-size:11px;
font-weight:700;
color:rgba(255,255,255,0.5);
text-decoration:none;
transition:all 0.2s ease;
}

.footer-social a:hover{
border-color:rgba(255,255,255,0.5);
color:white;
background:rgba(255,255,255,0.08);
}

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

.footer-bottom{
border-top:1px solid rgba(255,255,255,0.08);
margin-top:30px;
padding-top:20px;
font-size:12px;
color:rgba(255,255,255,0.4);
}

/* ====================================================== */
/* RESPONSIVE - TABLET                                    */
/* ====================================================== */

@media (max-width: 992px) {

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

}

/* ====================================================== */
/* RESPONSIVE - MOBILE                                    */
/* ====================================================== */

@media (max-width: 576px) {

  .sp-footer {
    padding: 40px 0 20px 0;
  }

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

}