﻿
/* FOOTER */

.footer{
background:#0b124e;
color:#cfcfcf;
}

/* GRID */

.footer .footer-container{
max-width:1200px;
margin:auto;
padding:20px 5px 5px 5px;
display:grid;
grid-template-columns:repeat(6,1fr);
gap:25px;
}

/* TITLES */
.footer .footer-column{
padding-left:30px;
}
.footer .footer-column h4{
color:#ffffff;
font-size:17px;
margin-bottom:12px;
font-weight:600;
position:relative;
}

.footer .footer-column h4::after{
content:"";
width:50px;
height:2px;
background:#e63946;
display:block;
margin-top:7px;
}

/* LINKS */

.footer .footer-column ul{
list-style:none;
padding:0;
margin:0;
}

.footer .footer-column ul li{
margin-bottom:2px;
}

.footer .footer-column ul li a{
text-decoration:none;
color:#fefefe;
font-size:12px;
transition:0.3s;
}

.footer .footer-column ul li a:hover{
color:#ffffff;
padding-left:5px;
}

/* SOCIAL + APP SECTION */

.footer .footer-middle{
border-top:1px solid rgba(255,255,255,0.08);
padding:18px 15px;
display:flex;
align-items:center;
justify-content:space-between;
max-width:1200px;
margin:auto;
}

/* SOCIAL ICONS */

.footer .social-icons{
display:flex;
gap:12px;
}

.footer .social-icons a{
width:36px;
height:36px;
border-radius:50%;
background:#ffffff;
display:flex;
align-items:center;
justify-content:center;
color:#e63946;
font-size:14px;
text-decoration:none;
transition:0.3s;
}

.footer .social-icons a:hover{
background:#ffffff;
color:#0b124e;
transform:translateY(-3px);
}

/* APP BADGES */

.footer .app-badges img{
height:34px;
margin-left:8px;
cursor:pointer;
transition:0.3s;
}

.footer .app-badges img:hover{
transform:scale(1.05);
}

/* COPYRIGHT */

.footer .footer-bottom{
background:#0b1116;
text-align:center;
padding:12px;
font-size:12px;
color:#d0d0d0;
}

/* RESPONSIVE */

@media(max-width:1100px){

.footer .footer-container{
grid-template-columns:repeat(3,1fr);
}

}

@media(max-width:768px){

.footer .footer-container{
grid-template-columns:repeat(2,1fr);
}

.footer .footer-middle{
flex-direction:column;
gap:12px;
}

}

@media(max-width:500px){

.footer .footer-container{
grid-template-columns:1fr;
}

}