/* ================= BASE ================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:system-ui, -apple-system, Segoe UI, Roboto;
}



/* ================= FOOTER ================= */

.footer-footer{
padding:100px 10% 40px;
background:linear-gradient(180deg,#081022,#060816);
color:#fff;
position:relative;
overflow:hidden;
margin-top: 70px;
}

/* glow */
.footer-footer::before{
content:"";
position:absolute;
top:-220px;
left:50%;
transform:translateX(-50%);
width:650px;
height:650px;
background:radial-gradient(circle,rgba(212,175,55,.12),transparent 70%);
filter:blur(90px);
}

.footer-footer::after{
content:"";
position:absolute;
bottom:-200px;
right:-200px;
width:500px;
height:500px;
background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%);
filter:blur(100px);
}

/* ================= GRID ================= */

.footer-footer-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:60px;
position:relative;
z-index:2;
}

/* ================= BRAND ================= */

.footer-footer-brand{
font-size:28px;
font-weight:800;
letter-spacing:.5px;
margin-bottom:14px;
}

.footer-footer-brand span{
color:#d4af37;
}

.footer-footer p{
font-size:14px;
color:rgba(255,255,255,.65);
line-height:1.7;
max-width:320px;
}

/* ================= HEADINGS ================= */

.footer-footer h3{
font-size:13px;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:18px;
color:#d4af37;
position:relative;
}

.footer-footer h3::after{
content:"";
width:35px;
height:2px;
background:#d4af37;
position:absolute;
bottom:-8px;
left:0;
opacity:.8;
}

/* ================= LINKS ================= */

.footer-footer a{
display:block;
margin:10px 0;
font-size:14px;
color:rgba(255,255,255,.6);
text-decoration:none;
transition:.35s;
position:relative;
}

.footer-footer a::before{
content:"";
position:absolute;
left:-12px;
top:50%;
transform:translateY(-50%);
width:6px;
height:6px;
border-radius:50%;
background:#d4af37;
opacity:0;
transition:.3s;
}

.footer-footer a:hover{
color:#fff;
transform:translateX(8px);
}

.footer-footer a:hover::before{
opacity:1;
}

/* ================= SOCIAL ================= */

.footer-footer-social{
margin-top:22px;
display:flex;
gap:12px;
flex-wrap:wrap;
}

.footer-footer-social a{
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
border:1px solid rgba(212,175,55,.25);
color:#d4af37;
font-weight:600;
font-size:13px;
background:rgba(255,255,255,.03);
transition:.35s;
position:relative;
overflow:hidden;
}

.footer-footer-social a::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle,rgba(212,175,55,.3),transparent 70%);
opacity:0;
transition:.35s;
}

.footer-footer-social a:hover{
transform:translateY(-6px) scale(1.1);
border-color:#d4af37;
box-shadow:0 10px 25px rgba(212,175,55,.25);
color:#fff;
}

.footer-footer-social a:hover::before{
opacity:1;
}

/* ================= CONTACT UPGRADED ================= */

.footer-footer-contact-item{
display:flex;
gap:10px;
margin:14px 0;
align-items:flex-start;
}

.footer-footer-contact-icon{
min-width:34px;
height:34px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(212,175,55,.12);
border:1px solid rgba(212,175,55,.25);
color:#d4af37;
font-size:14px;
margin-top:2px;
}

.footer-footer-contact-text{
font-size:13.5px;
line-height:1.5;
color:rgba(255,255,255,.7);
}

.footer-footer-contact-text strong{
display:block;
color:#fff;
font-size:13px;
margin-bottom:2px;
}

/* hover effect */
.footer-footer-contact-item:hover .footer-footer-contact-icon{
background:rgba(212,175,55,.2);
transform:scale(1.05);
}
.footer-footer-contact-icon i{
color:#d4af37;
font-size:16px;
}

/* ================= BOTTOM ================= */

.footer-footer-bottom{
margin-top:60px;
text-align:center;
font-size:12px;
color:rgba(255,255,255,.4);
border-top:1px solid rgba(255,255,255,.08);
padding-top:20px;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1000px){
.footer-footer-grid{
grid-template-columns:1fr 1fr;
gap:40px;
}
}

@media(max-width:600px){
.footer-footer-grid{
grid-template-columns:1fr;
}
}
