/* Enhanced Footer CSS
   NOTE:
   This starter file contains the enhanced foundation discussed.
   Replace your existing footer CSS with this file and extend as needed.
*/

.footer{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#14213d 0%,#1f2a44 35%,#243b72 100%);
    color:#fff;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:40px;
    padding:60px 6% 45px;
    border-top:4px solid transparent;
    border-image:linear-gradient(90deg,#2f54eb,#5b8cff,#2f54eb) 1;
}
.footer::before{
    content:"";
    position:absolute;
    width:420px;height:420px;
    left:-120px;top:-180px;
    background:radial-gradient(rgba(91,140,255,.18),transparent 70%);
}
.footer::after{
    content:"";
    position:absolute;
    width:350px;height:350px;
    right:-100px;bottom:-150px;
    background:radial-gradient(rgba(47,84,235,.15),transparent 70%);
}
.footer-box{
    position:relative;
    z-index:2;
    padding:22px;
    border-radius:18px;
    background:rgba(255,255,255,.03);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.08);
    transition:.4s;
    animation:fadeUp .8s ease both;
}
.footer-box:hover{
    transform:translateY(-8px);
    background:rgba(255,255,255,.06);
    box-shadow:0 18px 35px rgba(0,0,0,.35);
}
.footer-box h3{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 24px;
    border-radius:30px;
    background:linear-gradient(90deg,#2f54eb,#5b8cff);
    color:#fff;
    margin-bottom:22px;
    box-shadow:0 10px 25px rgba(47,84,235,.4);
}
.footer-box p{color:#dbe6ff;line-height:1.8;font-size:15px}
.footer-box ul{list-style:none;padding:0}
.footer-box li{margin:15px 0}
.footer-box a{color:#fff;text-decoration:none;transition:.35s}
.footer-box a:hover{color:#5b8cff;transform:translateX(8px)}
.social-icons{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.social-icons a{
width:48px;height:48px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#fff,#dbe7ff);
color:#2f54eb;transition:.4s}
.social-icons a:hover{
transform:translateY(-8px) rotate(360deg);
background:linear-gradient(135deg,#2f54eb,#5b8cff);
color:#fff}
.top-btn{
width:50px;height:50px;border:none;border-radius:50%;
display:flex;justify-content:center;align-items:center;
background:linear-gradient(135deg,#2f54eb,#5b8cff);
color:#fff;cursor:pointer;
animation:pulseTop 2.5s infinite}
.footer-bottom{
display:flex;justify-content:space-between;align-items:center;
flex-wrap:wrap;gap:10px;
padding:18px;
background:linear-gradient(to right,#111827,#1b2745,#111827);
color:#d1d5db}
@keyframes pulseTop{
0%{box-shadow:0 0 0 0 rgba(47,84,235,.6)}
70%{box-shadow:0 0 0 18px rgba(47,84,235,0)}
100%{box-shadow:0 0 0 0 rgba(47,84,235,0)}
}
@keyframes fadeUp{
from{opacity:0;transform:translateY(30px)}
to{opacity:1;transform:translateY(0)}
}
@media(max-width:768px){
.footer{padding:40px 20px;gap:25px}
.footer-brand{display:flex;flex-direction:column;align-items:center;text-align:center}
.social-icons{justify-content:center}
.footer-bottom{flex-direction:column;text-align:center}
}