/* ===================================== */
/* RESET */
/* ===================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Inter',sans-serif;

background:
linear-gradient(
180deg,
#030b16,
#071426,
#0b1f3a,
#071426
);

color:white;

overflow-x:hidden;

-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}

/* ===================================== */
/* GLOBAL */
/* ===================================== */

.container{

width:100%;
max-width:1220px;

margin:auto;

padding:0 26px;

position:relative;
z-index:2;
}

.section{

padding:86px 0;

position:relative;

overflow:hidden;
}

.dark{

background:
linear-gradient(
180deg,
#071426,
#0b1f3a,
#071426
);
}

/* ===================================== */
/* HERO */
/* ===================================== */

.hero-karya{

position:relative;

min-height:74vh;

display:flex;
align-items:center;
justify-content:center;

overflow:hidden;

padding:
110px 0 85px;

background:
linear-gradient(
rgba(3,11,22,.86),
rgba(3,11,22,.94)
),

url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=1800')
center/cover;
}

.hero-overlay{

position:absolute;

inset:0;

background:
radial-gradient(
circle at top right,
rgba(212,175,55,.10),
transparent 30%
);
}

/* ===================================== */
/* HERO CONTENT */
/* ===================================== */

.hero-wrap{

max-width:980px;

margin:auto;

text-align:center;
}

/* ===================================== */
/* LINE */
/* ===================================== */

.hero-line,
.mini-line{

width:70px;
height:3px;

margin:
0 auto 22px;

border-radius:999px;

background:
linear-gradient(
90deg,
#d4af37,
#ffd700
);
}

/* ===================================== */
/* TOPLINE */
/* ===================================== */

.hero-topline{

font-size:11px;

font-weight:700;

letter-spacing:5px;

color:#d4af37;

margin-bottom:18px;
}

/* ===================================== */
/* HERO TITLE */
/* ===================================== */

.hero-title{

font-size:
clamp(46px,5vw,78px);

line-height:.96;

font-weight:900;

letter-spacing:-3px;

margin-bottom:24px;
}

.hero-title span{

display:block;

margin-top:8px;

background:
linear-gradient(
90deg,
#d4af37,
#ffd700,
#fff0a8
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* ===================================== */
/* HERO SUB */
/* ===================================== */

.hero-sub{

max-width:820px;

margin:auto;

font-size:16px;

line-height:1.9;

color:
rgba(255,255,255,.74);
}

/* ===================================== */
/* BUTTON */
/* ===================================== */

.hero-buttons{

display:flex;
justify-content:center;
flex-wrap:wrap;

gap:14px;

margin-top:34px;
}

.btn-gold,
.btn-outline,
.btn-outline-dark{

height:48px;

padding:0 24px;

display:inline-flex;
align-items:center;
justify-content:center;

border-radius:14px;

font-size:13px;
font-weight:700;

text-decoration:none;

transition:.32s ease;
}

.btn-gold{

background:
linear-gradient(
90deg,
#d4af37,
#ffd700
);

color:#071426;

box-shadow:
0 14px 28px rgba(212,175,55,.18);
}

.btn-gold:hover{

transform:
translateY(-3px);
}

.btn-outline{

border:
1px solid rgba(255,255,255,.10);

background:
rgba(255,255,255,.03);

color:white;
}

.btn-outline:hover{

background:white;
color:#071426;
}

.btn-outline-dark{

border:
1px solid rgba(212,175,55,.20);

background:
transparent;

color:white;
}

.btn-outline-dark:hover{

background:#d4af37;
color:#071426;
}

/* ===================================== */
/* TRUST */
/* ===================================== */

.trust-strip{

padding:22px 0;

background:
rgba(255,255,255,.02);

border-top:
1px solid rgba(255,255,255,.05);

border-bottom:
1px solid rgba(255,255,255,.05);
}

.trust-grid{

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:14px;
}

.trust-item{

height:46px;

display:flex;
align-items:center;
justify-content:center;

border-radius:14px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.05);

font-size:11px;

font-weight:700;

letter-spacing:1px;

color:#d4af37;
}

/* ===================================== */
/* HEAD */
/* ===================================== */

.section-head{

max-width:840px;

margin:auto auto 52px;
}

.section-head.center{

text-align:center;
}

.section-head h2{

font-size:52px;

line-height:1;

font-weight:900;

letter-spacing:-3px;

margin-bottom:20px;
}

.section-head h2 span{

display:block;

margin-top:6px;

background:
linear-gradient(
90deg,
#d4af37,
#ffd700
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.section-head p{

font-size:15px;

line-height:1.9;

color:
rgba(255,255,255,.74);
}

/* ===================================== */
/* GRID */
/* ===================================== */

.vision-box,
.pillar-grid,
.program-grid,
.donation-grid{

display:grid;

gap:18px;
}

.vision-box{

grid-template-columns:
repeat(3,1fr);
}

.pillar-grid{

grid-template-columns:
repeat(4,1fr);
}

.program-grid{

grid-template-columns:
repeat(4,1fr);
}

.donation-grid{

grid-template-columns:
repeat(3,1fr);
}

/* ===================================== */
/* CARD */
/* ===================================== */

.vision-card,
.pillar-card,
.program-card,
.donation-card{

position:relative;

overflow:hidden;

padding:26px;

border-radius:24px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.018)
);

border:
1px solid rgba(255,255,255,.05);

backdrop-filter:blur(14px);

transition:.32s ease;

box-shadow:
0 18px 45px rgba(0,0,0,.20);
}

.vision-card:hover,
.pillar-card:hover,
.program-card:hover,
.donation-card:hover{

transform:
translateY(-6px);

border:
1px solid rgba(212,175,55,.22);
}

/* ===================================== */
/* NUMBER */
/* ===================================== */

.vision-number{

font-size:11px;

font-weight:800;

letter-spacing:2px;

margin-bottom:14px;

color:#d4af37;
}

/* ===================================== */
/* TITLE */
/* ===================================== */

.vision-card h3,
.pillar-card h3,
.program-card h3,
.donation-card h3{

font-size:22px;

line-height:1.3;

margin-bottom:14px;
}

/* ===================================== */
/* TEXT */
/* ===================================== */

.vision-card p,
.pillar-card p,
.program-card p,
.donation-card p{

font-size:14px;

line-height:1.85;

color:
rgba(255,255,255,.72);
}

/* ===================================== */
/* ICON */
/* ===================================== */

.pillar-icon{

width:56px;
height:56px;

display:flex;
align-items:center;
justify-content:center;

border-radius:18px;

margin-bottom:20px;

font-size:17px;
font-weight:800;

background:
linear-gradient(
135deg,
#d4af37,
#ffd700
);

color:#071426;
}

/* ===================================== */
/* SMALL BTN */
/* ===================================== */

.small-btn{

margin-top:22px;

height:44px;

padding:0 22px;

border-radius:14px;
}

/* ===================================== */
/* CTA */
/* ===================================== */

.cta-section{

position:relative;

overflow:hidden;

padding:
110px 0;

background:
radial-gradient(
circle at center,
#12345c,
#071426
);
}

.cta-box{

max-width:820px;

margin:auto;

text-align:center;
}

.center-line{

margin:auto auto 22px;
}

.cta-title{

font-size:
clamp(42px,5vw,72px);

line-height:.95;

font-weight:900;

letter-spacing:-3px;
}

.cta-title span{

display:block;

margin-top:6px;

color:#d4af37;
}

.cta-desc{

max-width:700px;

margin:
24px auto 0;

font-size:16px;

line-height:1.9;

color:
rgba(255,255,255,.74);
}

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

.footer-premium{

padding:
88px 0 34px;

background:
linear-gradient(
180deg,
#071426,
#020817
);

border-top:
1px solid rgba(255,255,255,.05);
}

.footer-top{

display:flex;
align-items:center;
justify-content:center;

gap:24px;

margin-bottom:48px;
}

/* ===================================== */
/* LOGO */
/* ===================================== */

.footer-logo-ring{

width:110px;
height:110px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

border:
1.4px solid rgba(212,175,55,.24);

transition:.35s ease;
}

.footer-logo-ring:hover{

border:
1.4px solid rgba(212,175,55,.46);

box-shadow:
0 0 24px rgba(212,175,55,.18);
}

.footer-logo{

width:84px;
height:84px;

border-radius:50%;

overflow:hidden;

background:white;

display:flex;
align-items:center;
justify-content:center;

padding:12px;
}

.footer-logo img{

width:100%;
height:100%;

object-fit:contain;
}

/* ===================================== */
/* BRAND */
/* ===================================== */

.footer-brand h3{

font-size:28px;

margin-bottom:8px;
}

.footer-brand p{

font-size:14px;

color:
rgba(255,255,255,.66);
}

/* ===================================== */
/* FOOTER GRID */
/* ===================================== */

.footer-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:18px;
}

.footer-box{

padding:26px;

border-radius:22px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.04),
rgba(255,255,255,.018)
);

border:
1px solid rgba(255,255,255,.05);
}

.footer-box h4{

font-size:18px;

margin-bottom:18px;

color:#d4af37;
}

.footer-box p{

font-size:13px;

line-height:1.9;

color:
rgba(255,255,255,.72);

margin-bottom:14px;
}

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

.footer-bottom{

margin-top:44px;

padding-top:22px;

border-top:
1px solid rgba(255,255,255,.06);

text-align:center;

font-size:12px;

color:
rgba(255,255,255,.48);
}

/* ===================================== */
/* MOBILE */
/* ===================================== */

@media(max-width:1100px){

.trust-grid,
.pillar-grid,
.program-grid{

grid-template-columns:
repeat(2,1fr);
}

.vision-box,
.donation-grid,
.footer-grid{

grid-template-columns:1fr;
}

}

@media(max-width:768px){

.container{

padding:0 20px;
}

.section{

padding:70px 0;
}

.hero-title{

font-size:40px;

letter-spacing:-2px;
}

.hero-sub{

font-size:14px;

line-height:1.9;
}

.section-head h2{

font-size:38px;

letter-spacing:-2px;
}

.section-head p{

font-size:14px;
}

.trust-grid,
.pillar-grid,
.program-grid{

grid-template-columns:1fr;
}

.footer-top{

flex-direction:column;

text-align:center;
}

.footer-brand h3{

font-size:24px;
}

.hero-buttons{

flex-direction:column;
}

.btn-gold,
.btn-outline{

width:100%;
}

}
/* ===================================== */
/* FOOTER PREMIUM */
/* ===================================== */

.footer-premium{

padding:
90px 0 34px;

background:
linear-gradient(
180deg,
#071426,
#020817
);

border-top:
1px solid rgba(255,255,255,.05);

position:relative;

overflow:hidden;
}

/* GOLD LIGHT */

.footer-premium::before{

content:'';

position:absolute;

top:-180px;
right:-180px;

width:420px;
height:420px;

background:
radial-gradient(
circle,
rgba(212,175,55,.10),
transparent 70%
);

pointer-events:none;
}

/* ===================================== */
/* TOP */
/* ===================================== */

.footer-top{

display:flex;
align-items:center;
justify-content:center;

gap:24px;

margin-bottom:52px;
}

/* ===================================== */
/* LOGO RING */
/* ===================================== */

.footer-logo-ring{

width:122px;
height:122px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

position:relative;

border:
1.5px solid rgba(212,175,55,.24);

background:
rgba(255,255,255,.02);

transition:.35s ease;
}

.footer-logo-ring::before{

content:'';

position:absolute;

inset:10px;

border-radius:50%;

border:
1px solid rgba(212,175,55,.12);
}

.footer-logo-ring:hover{

border:
1.5px solid rgba(212,175,55,.48);

box-shadow:
0 0 30px rgba(212,175,55,.18);
}

/* ===================================== */
/* LOGO */
/* ===================================== */

.footer-logo{

width:84px;
height:84px;

border-radius:50%;

overflow:hidden;

display:flex;
align-items:center;
justify-content:center;

background:
transparent;
}

/* 🔥 FIX LOGO SMI */

.footer-logo img{

width:135%;
height:135%;

object-fit:cover;

transform:scale(1.22);

filter:
drop-shadow(0 0 10px rgba(212,175,55,.18));
}

/* ===================================== */
/* BRAND */
/* ===================================== */

.footer-brand h3{

font-size:38px;

line-height:1.1;

margin-bottom:10px;

font-weight:800;

letter-spacing:-1px;
}

.footer-brand p{

font-size:17px;

color:
rgba(255,255,255,.66);
}

/* ===================================== */
/* GRID */
/* ===================================== */

.footer-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:22px;
}

/* ===================================== */
/* BOX */
/* ===================================== */

.footer-box{

padding:30px;

border-radius:26px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.018)
);

border:
1px solid rgba(255,255,255,.05);

backdrop-filter:blur(18px);

transition:.35s ease;

min-height:320px;
}

.footer-box:hover{

transform:
translateY(-6px);

border:
1px solid rgba(212,175,55,.20);
}

/* ===================================== */
/* TITLE */
/* ===================================== */

.footer-box h4{

font-size:26px;

margin-bottom:22px;

font-weight:800;

color:#d4af37;
}

/* ===================================== */
/* TEXT */
/* ===================================== */

.footer-box p{

font-size:15px;

line-height:2;

color:
rgba(255,255,255,.74);

margin-bottom:18px;
}

/* ===================================== */
/* STORY BOX */
/* ===================================== */

.story-box{

margin-top:26px;

padding:22px;

border-radius:20px;

background:
linear-gradient(
180deg,
rgba(212,175,55,.08),
rgba(212,175,55,.03)
);

border:
1px solid rgba(212,175,55,.14);
}

/* TOP */

.story-top{

display:flex;
align-items:center;

gap:16px;

margin-bottom:16px;
}

/* ICON */

.story-icon{

width:52px;
height:52px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-size:18px;
font-weight:700;

background:
linear-gradient(
135deg,
#d4af37,
#ffd700
);

color:#071426;

box-shadow:
0 10px 25px rgba(212,175,55,.18);
}

/* STORY TITLE */

.story-top h5{

font-size:17px;

margin-bottom:4px;

color:white;
}

.story-top span{

font-size:12px;

letter-spacing:1px;

color:#d4af37;
}

/* DESC */

.story-desc{

font-size:14px !important;

line-height:1.8 !important;

margin-bottom:20px !important;
}

/* BTN */

.story-btn{

height:46px;

padding:0 20px;

display:inline-flex;
align-items:center;
justify-content:center;

border-radius:14px;

font-size:13px;
font-weight:700;

text-decoration:none;

background:
linear-gradient(
90deg,
#d4af37,
#ffd700
);

color:#071426;

transition:.3s ease;

box-shadow:
0 12px 28px rgba(212,175,55,.16);
}

.story-btn:hover{

transform:
translateY(-3px);
}

/* ===================================== */
/* NOTE */
/* ===================================== */

.rekening-note{

opacity:.58;

font-size:13px !important;
}

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

.footer-bottom{

margin-top:44px;

padding-top:24px;

border-top:
1px solid rgba(255,255,255,.06);

text-align:center;

font-size:13px;

color:
rgba(255,255,255,.46);
}

/* ===================================== */
/* MOBILE */
/* ===================================== */

@media(max-width:1100px){

.footer-grid{

grid-template-columns:1fr;
}

}

@media(max-width:768px){

.footer-top{

flex-direction:column;

text-align:center;
}

.footer-brand h3{

font-size:28px;
}

.footer-brand p{

font-size:15px;
}

.footer-box{

min-height:auto;
}

.footer-logo-ring{

width:110px;
height:110px;
}

}
/* ===================================== */
/* FOOTER PREMIUM */
/* ===================================== */

.footer-premium{

padding:
90px 0 36px;

background:
linear-gradient(
180deg,
#071426,
#020817
);

position:relative;

overflow:hidden;

border-top:
1px solid rgba(255,255,255,.05);
}

/* LIGHT EFFECT */

.footer-premium::before{

content:'';

position:absolute;

top:-220px;
right:-220px;

width:520px;
height:520px;

background:
radial-gradient(
circle,
rgba(212,175,55,.12),
transparent 70%
);

pointer-events:none;
}

/* ===================================== */
/* CONTAINER */
/* ===================================== */

.footer-premium .container{

max-width:1280px;

margin:auto;

padding:0 32px;
}

/* ===================================== */
/* HEAD */
/* ===================================== */

.footer-head{

display:flex;
align-items:center;
justify-content:center;

gap:28px;

margin-bottom:70px;
}

/* ===================================== */
/* LOGO */
/* ===================================== */

.footer-logo-ring{

width:128px;
height:128px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

background:
rgba(255,255,255,.02);

border:
1px solid rgba(212,175,55,.22);

position:relative;
}

.footer-logo-ring::before{

content:'';

position:absolute;

inset:10px;

border-radius:50%;

border:
1px solid rgba(212,175,55,.10);
}

.footer-logo{

width:88px;
height:88px;

border-radius:50%;

overflow:hidden;

display:flex;
align-items:center;
justify-content:center;
}

.footer-logo img{

width:135%;
height:135%;

object-fit:cover;

transform:scale(1.28);

filter:
drop-shadow(0 0 14px rgba(212,175,55,.25));
}

/* ===================================== */
/* BRAND */
/* ===================================== */

.footer-brand{

text-align:left;
}

.footer-mini-line{

width:52px;
height:3px;

border-radius:20px;

background:#d4af37;

margin-bottom:18px;
}

.footer-brand h2{

font-size:48px;

line-height:1.05;

font-weight:800;

letter-spacing:-1.4px;

margin-bottom:12px;
}

.footer-brand p{

font-size:18px;

color:
rgba(255,255,255,.66);
}

/* ===================================== */
/* LAYOUT */
/* ===================================== */

.footer-layout{

display:grid;

grid-template-columns:
1.3fr .8fr;

gap:26px;
}

/* ===================================== */
/* MAIN CARD */
/* ===================================== */

.footer-main-card{

padding:40px;

border-radius:34px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.018)
);

border:
1px solid rgba(255,255,255,.06);

backdrop-filter:blur(20px);

min-height:100%;
}

/* ===================================== */
/* SMALL CARD */
/* ===================================== */

.footer-side{

display:grid;

gap:24px;
}

.footer-small-card{

padding:34px;

border-radius:28px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.018)
);

border:
1px solid rgba(255,255,255,.06);

backdrop-filter:blur(20px);
}

/* ===================================== */
/* LABEL */
/* ===================================== */

.footer-label{

display:inline-block;

font-size:11px;

font-weight:700;

letter-spacing:2px;

color:#d4af37;

margin-bottom:18px;
}

/* ===================================== */
/* TEXT */
/* ===================================== */

.footer-main-card h3,
.footer-small-card h4{

font-size:34px;

line-height:1.1;

margin-bottom:20px;

font-weight:800;
}

.footer-main-desc{

font-size:17px;

line-height:2;

color:
rgba(255,255,255,.72);
}

.footer-small-card p{

font-size:15px;

line-height:2;

color:
rgba(255,255,255,.72);
}

/* ===================================== */
/* STORY */
/* ===================================== */

.story-premium{

margin-top:34px;

padding:28px;

border-radius:26px;

background:
linear-gradient(
135deg,
rgba(212,175,55,.08),
rgba(212,175,55,.03)
);

border:
1px solid rgba(212,175,55,.14);
}

.story-left{

display:flex;
align-items:center;

gap:18px;

margin-bottom:18px;
}

/* ICON */

.story-icon{

width:58px;
height:58px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-size:20px;
font-weight:700;

background:
linear-gradient(
135deg,
#d4af37,
#ffd700
);

color:#071426;

box-shadow:
0 12px 30px rgba(212,175,55,.18);
}

/* STORY TEXT */

.story-left h4{

font-size:24px;

margin-bottom:6px;
}

.story-left span{

font-size:12px;

letter-spacing:1px;

color:#d4af37;
}

.story-premium p{

font-size:15px;

line-height:1.9;

margin-bottom:24px;

color:
rgba(255,255,255,.72);
}

/* BTN */

.story-btn{

height:50px;

padding:0 24px;

display:inline-flex;
align-items:center;
justify-content:center;

border-radius:14px;

font-size:14px;
font-weight:700;

text-decoration:none;

background:
linear-gradient(
135deg,
#d4af37,
#ffd700
);

color:#071426;

transition:.3s ease;

box-shadow:
0 14px 30px rgba(212,175,55,.16);
}

.story-btn:hover{

transform:
translateY(-3px);
}

/* ===================================== */
/* CONTACT */
/* ===================================== */

.contact-list{

margin-top:22px;

display:flex;
flex-direction:column;

gap:14px;
}

.contact-list div{

padding:14px 16px;

border-radius:14px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.05);

font-size:14px;

color:
rgba(255,255,255,.82);
}

/* ===================================== */
/* BANK */
/* ===================================== */

.bank-item{

display:flex;
flex-direction:column;

gap:8px;

margin-top:10px;
}

.bank-item strong{

font-size:26px;

color:#d4af37;
}

.bank-item span{

font-size:18px;

letter-spacing:.5px;
}

.rekening-name{

margin-top:18px;
}

.rekening-note{

margin-top:18px;

font-size:13px !important;

opacity:.55;
}

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

.footer-bottom{

margin-top:46px;

padding-top:26px;

border-top:
1px solid rgba(255,255,255,.06);

text-align:center;

font-size:13px;

color:
rgba(255,255,255,.45);
}

/* ===================================== */
/* MOBILE */
/* ===================================== */

@media(max-width:1100px){

.footer-layout{

grid-template-columns:1fr;
}

}

@media(max-width:768px){

.footer-head{

flex-direction:column;

text-align:center;
}

.footer-brand{

text-align:center;
}

.footer-mini-line{

margin:
0 auto 18px;
}

.footer-brand h2{

font-size:32px;
}

.footer-brand p{

font-size:15px;
}

.footer-main-card,
.footer-small-card{

padding:28px;
}

.footer-main-card h3,
.footer-small-card h4{

font-size:26px;
}

.story-left{

align-items:flex-start;
}

.story-left h4{

font-size:18px;
}

}
/* ===================================== */
/* LOGO HOVER EFFECT */
/* ===================================== */

.footer-logo-ring{

width:128px;
height:128px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

background:
rgba(255,255,255,.02);

border:
1px solid rgba(212,175,55,.22);

position:relative;

transition:
all .45s ease;

cursor:pointer;
}

/* INNER RING */

.footer-logo-ring::before{

content:'';

position:absolute;

inset:10px;

border-radius:50%;

border:
1px solid rgba(212,175,55,.10);

transition:
all .45s ease;
}

/* OUTER GLOW */

.footer-logo-ring::after{

content:'';

position:absolute;

inset:-10px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(212,175,55,.18),
transparent 70%
);

opacity:0;

transform:scale(.9);

transition:
all .45s ease;

pointer-events:none;
}

/* HOVER */

.footer-logo-ring:hover{

transform:
translateY(-6px)
scale(1.04);

border:
1px solid rgba(212,175,55,.42);

box-shadow:
0 18px 45px rgba(212,175,55,.18);
}

/* INNER RING HOVER */

.footer-logo-ring:hover::before{

inset:6px;

border:
1px solid rgba(212,175,55,.24);
}

/* GLOW ACTIVE */

.footer-logo-ring:hover::after{

opacity:1;

transform:scale(1.12);
}

/* LOGO */

.footer-logo{

width:88px;
height:88px;

border-radius:50%;

overflow:hidden;

display:flex;
align-items:center;
justify-content:center;

transition:
all .45s ease;
}

/* IMAGE */

.footer-logo img{

width:135%;
height:135%;

object-fit:cover;

transform:scale(1.28);

filter:
drop-shadow(0 0 14px rgba(212,175,55,.25));

transition:
all .45s ease;
}

/* IMAGE HOVER */

.footer-logo-ring:hover img{

transform:
scale(1.38);

filter:
drop-shadow(0 0 20px rgba(212,175,55,.42));
}