/* ================= BACKGROUND ================= */
.footer{
background:url('/noonacademy/img/footer.png') center/cover no-repeat;
padding:65px 0 28px;
font-family:'Poppins',sans-serif;
color:#111;
}

/* ================= GRID ================= */
.footer-container{
width:92%;
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns: 2.1fr 1fr 1fr 1.2fr;
gap:55px;
align-items:start;
}

/* ================= LOGO ================= */
.footer-logo{
width:300px;
margin-bottom:18px;
filter:drop-shadow(0 10px 16px rgba(0,0,0,.28));
}

/* ================= TEXT ================= */
.footer-about p{
font-size:15.5px;
line-height:1.8;
max-width:460px;
}

/* ================= HEADINGS ================= */
.footer-col h3,
.footer-account h3{
font-family:'Playfair Display',serif;
font-size:19px;
margin-bottom:14px;
}

/* ================= LINKS ================= */
.footer-col a{
display:block;
margin:8px 0;
text-decoration:none;
color:#111;
transition:.2s;
}
.footer-col a:hover{transform:translateX(4px);}

/* ================= SOCIAL ================= */
.socials{margin-top:18px;}
.socials a{
width:42px;height:42px;
display:inline-flex;align-items:center;justify-content:center;
border-radius:50%;
background:#111;color:#fff;
margin-right:10px;
}

/* ================= BUTTONS ================= */
.footer-account{text-align:center;}

.btn{
display:flex;
align-items:center;
justify-content:center;
height:54px;
width:100%;
max-width:260px;
margin:6px auto;
border-radius:999px;
font-weight:600;
text-decoration:none;
}

.btn.login{background:#000;color:#fff;}
.btn.register{background:#e9e9e9;color:#000;}

/* ================= CONTACT ================= */
.contact-mini{
margin-top:8px;
font-size:14px;
display:flex;
gap:10px;
justify-content:center;
}

/* ================= NEWSLETTER ================= */
.newsletter{
max-width:520px;
margin:35px auto 15px;
display:flex;
gap:10px;
justify-content:center;
}

.newsletter input{
flex:1;
height:48px;
padding:0 18px;
border-radius:999px;
border:none;
background:#2b2b2b;
color:#fff;
}

.newsletter button{
height:48px;
padding:0 24px;
border:none;
border-radius:999px;
background:#fff;
font-weight:600;
}

/* ================= COPYRIGHT ================= */
.copyright{
text-align:center;
font-size:13px;
margin-top:8px;
}

/* ===== INITIAL STATE ===== */
.reveal{
opacity:0;
transform:translateY(50px) scale(.98);
filter:blur(8px);
transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    transform .9s cubic-bezier(.22,1,.36,1),
    filter .9s cubic-bezier(.22,1,.36,1);
will-change:transform,opacity;
}

/* ===== WHEN VISIBLE ===== */
.reveal.active{
opacity:1;
transform:translateY(0) scale(1);
filter:blur(0);
}

/* STAGGER DELAYS */
.footer-about.active{transition-delay:.1s;}
.footer-courses.active{transition-delay:.25s;}
.footer-links.active{transition-delay:.4s;}
.footer-account.active{transition-delay:.55s;}
.newsletter.active{transition-delay:.7s;}

/* BUTTON PREMIUM HOVER */
.btn{
transition:transform .25s ease, box-shadow .25s ease;
}
.btn:hover{
transform:translateY(-4px);
box-shadow:0 12px 30px rgba(0,0,0,.25);
}

/* SOCIAL FLOAT */
.socials a{
transition:all .35s cubic-bezier(.22,1,.36,1);
}
.socials a:hover{
transform:translateY(-6px) scale(1.12);
box-shadow:0 10px 22px rgba(0,0,0,.25);
}


/* ================= MOBILE ================= */
@media (max-width:900px){

.footer{padding:45px 0 20px;}

.footer-container{
display:flex;
flex-direction:column;
align-items:center;
gap:28px;
text-align:center;
}

/* ORDER FIX */
.footer-about{order:1;}
.footer-courses{order:2;}
.footer-links{order:3;}
.footer-account{order:4;}
.newsletter{order:5;}
.copyright{order:6;}

.footer-logo{width:200px;}

.footer-about p{max-width:92%;margin:auto;}

.newsletter{
flex-direction:column;
max-width:320px;
}

.newsletter input{width:100%;}
.newsletter button{width:160px;margin:auto;}
}