/* =========================================================
MAGNOVA GROUP — PREMIUM FOOTER
MICESD 2027
========================================================= */
.mg-premium-footer{
--navy:#082B47;
--navy2:#0D4665;
--teal:#0E5870;
--gold:#C9972E;
--gold2:#E6B94E;
--white:#FFFFFF;
--soft:#DCEBF3;
--muted:#AFC5D2;
width:100%;
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
overflow:hidden;
}
.mg-premium-footer *,
.mg-premium-footer *::before,
.mg-premium-footer *::after{
box-sizing:border-box;
}
/* =========================================================
MAIN FOOTER
========================================================= */
.mg-footer-main{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 8% 20%,rgba(230,185,78,.10),transparent 25%),
radial-gradient(circle at 92% 85%,rgba(57,157,177,.12),transparent 28%),
linear-gradient(135deg,#082B47 0%,#0B3C59 48%,#0D4A62 100%);
padding:55px 30px 34px;
}
/* Decorative background */
.mg-footer-main::before{
content:"";
position:absolute;
width:420px;
height:420px;
border:1px solid rgba(230,185,78,.10);
border-radius:50%;
right:-190px;
top:-210px;
animation:mgFooterRotate 28s linear infinite;
}
.mg-footer-main::after{
content:"";
position:absolute;
width:260px;
height:260px;
border:1px dashed rgba(255,255,255,.08);
border-radius:50%;
left:-150px;
bottom:-150px;
animation:mgFooterRotate 22s linear infinite reverse;
}
@keyframes mgFooterRotate{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
/* =========================================================
INNER WIDTH
========================================================= */
.mg-footer-inner{
position:relative;
z-index:3;
max-width:1180px;
margin:0 auto;
}
/* =========================================================
TOP GOLD LINE
========================================================= */
.mg-footer-gold-line{
width:65px;
height:3px;
margin-bottom:25px;
border-radius:20px;
background:linear-gradient(
90deg,
var(--gold),
var(--gold2),
var(--gold)
);
box-shadow:0 0 14px rgba(230,185,78,.18);
}
/* =========================================================
FOOTER GRID
========================================================= */
.mg-footer-grid{
display:grid;
grid-template-columns:1fr 1.35fr .9fr;
gap:48px;
align-items:start;
}
/* =========================================================
COLUMN HEADINGS
========================================================= */
.mg-footer-title{
position:relative;
margin:0 0 18px;
color:#fff;
font-size:22px;
line-height:1.2;
font-weight:800;
letter-spacing:.1px;
}
.mg-footer-title::after{
content:"";
display:block;
width:38px;
height:2px;
margin-top:9px;
border-radius:10px;
background:var(--gold);
}
/* =========================================================
CONTACT COLUMN
========================================================= */
.mg-contact-list{
display:flex;
flex-direction:column;
gap:13px;
}
.mg-contact-item{
display:flex;
gap:12px;
align-items:flex-start;
color:var(--soft);
font-size:14px;
line-height:1.55;
}
.mg-contact-icon{
flex:0 0 31px;
width:31px;
height:31px;
display:flex;
align-items:center;
justify-content:center;
border-radius:9px;
background:rgba(255,255,255,.07);
border:1px solid rgba(230,185,78,.25);
color:var(--gold2);
font-size:13px;
transition:
transform .3s ease,
background .3s ease,
border-color .3s ease;
}
.mg-contact-item:hover .mg-contact-icon{
transform:translateY(-3px);
background:rgba(201,151,46,.14);
border-color:rgba(230,185,78,.55);
}
.mg-contact-text{
padding-top:4px;
}
.mg-contact-text strong{
color:#fff;
font-weight:700;
}
.mg-contact-text a{
color:var(--soft);
text-decoration:none;
transition:color .25s ease;
}
.mg-contact-text a:hover{
color:var(--gold2);
}
/* =========================================================
CENTER CONFERENCE / CONTACT
========================================================= */
.mg-footer-center{
position:relative;
}
.mg-conference-mini{
margin-bottom:20px;
}
.mg-conference-mini h3{
margin:0 0 7px;
color:#fff;
font-size:18px;
line-height:1.35;
font-weight:800;
}
.mg-conference-mini p{
margin:0;
color:var(--muted);
font-size:13px;
line-height:1.6;
}
/* Contact button */
.mg-footer-button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-width:145px;
padding:11px 20px;
border-radius:8px;
background:linear-gradient(
135deg,
var(--gold),
var(--gold2)
);
color:#082B47 !important;
text-decoration:none !important;
font-size:13px;
font-weight:800;
transition:
transform .3s ease,
box-shadow .3s ease;
}
.mg-footer-button:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(201,151,46,.25);
}
/* =========================================================
ORGANIZED BY / BRAND
========================================================= */
.mg-brand-column{
text-align:center;
}
.mg-brand-label{
margin:0 0 17px;
color:#fff;
font-size:22px;
line-height:1.2;
font-weight:800;
}
.mg-brand-logo{
display:flex;
justify-content:center;
align-items:center;
min-height:80px;
margin-bottom:17px;
}
/*
If you already have your Magnova logo image URL,
replace the src below with your logo URL.
*/
.mg-brand-logo img{
display:block;
max-width:220px;
max-height:82px;
width:auto;
height:auto;
object-fit:contain;
transition:
transform .4s ease,
filter .4s ease;
}
.mg-brand-logo img:hover{
transform:scale(1.045);
filter:drop-shadow(0 7px 16px rgba(0,0,0,.20));
}
/* Text fallback */
.mg-brand-fallback{
display:none;
color:#fff;
font-size:25px;
font-weight:900;
letter-spacing:2px;
}
.mg-brand-fallback span{
color:var(--gold2);
}
/* =========================================================
ABOUT ORGANIZATION BUTTON
========================================================= */
.mg-about-org{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
margin-bottom:19px;
padding:10px 17px;
border:1px solid rgba(230,185,78,.55);
border-radius:7px;
background:rgba(255,255,255,.06);
color:#fff !important;
text-decoration:none !important;
font-size:12px;
font-weight:700;
transition:
background .3s ease,
transform .3s ease,
border-color .3s ease;
}
.mg-about-org:hover{
background:rgba(201,151,46,.16);
border-color:var(--gold2);
transform:translateY(-3px);
}
/* =========================================================
SOCIAL ICONS
========================================================= */
.mg-social{
display:flex;
justify-content:center;
align-items:center;
gap:9px;
}
.mg-social a{
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
border-radius:9px;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.07);
color:#fff !important;
text-decoration:none !important;
font-size:14px;
transition:
transform .3s ease,
background .3s ease,
border-color .3s ease,
color .3s ease;
}
.mg-social a:hover{
transform:translateY(-5px);
background:var(--gold);
border-color:var(--gold);
color:#082B47 !important;
}
/* =========================================================
CONFERENCE IDENTITY STRIP
========================================================= */
.mg-footer-identity{
position:relative;
z-index:3;
max-width:1180px;
margin:38px auto 0;
padding:18px 20px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
border-top:1px solid rgba(255,255,255,.10);
border-bottom:1px solid rgba(255,255,255,.10);
}
.mg-identity-main{
color:#fff;
font-size:14px;
font-weight:800;
}
.mg-identity-main span{
color:var(--gold2);
}
.mg-identity-theme{
color:var(--muted);
font-size:12px;
text-align:right;
}
/* =========================================================
BOTTOM BAR
========================================================= */
.mg-footer-bottom{
position:relative;
z-index:3;
max-width:1180px;
margin:22px auto 0;
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
}
.mg-copyright{
color:rgba(255,255,255,.55);
font-size:11px;
line-height:1.5;
}
.mg-legal{
display:flex;
gap:17px;
}
.mg-legal a{
color:rgba(255,255,255,.60);
text-decoration:none;
font-size:11px;
transition:color .25s ease;
}
.mg-legal a:hover{
color:var(--gold2);
}
/* =========================================================
FLOATING GOLD PARTICLES
========================================================= */
.mg-footer-particle{
position:absolute;
z-index:2;
border-radius:50%;
pointer-events:none;
}
.mg-footer-particle.one{
width:6px;
height:6px;
left:25%;
top:28%;
background:var(--gold2);
opacity:.55;
animation:mgParticle 4s ease-in-out infinite;
}
.mg-footer-particle.two{
width:4px;
height:4px;
right:27%;
top:18%;
background:#fff;
opacity:.35;
animation:mgParticle 5s ease-in-out infinite .8s;
}
.mg-footer-particle.three{
width:5px;
height:5px;
right:12%;
bottom:25%;
background:var(--gold);
opacity:.45;
animation:mgParticle 4.5s ease-in-out infinite 1.2s;
}
@keyframes mgParticle{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-10px);
}
}
/* =========================================================
RESPONSIVE TABLET
========================================================= */
@media(max-width:900px){
.mg-footer-main{
padding:45px 24px 28px;
}
.mg-footer-grid{
grid-template-columns:1fr 1fr;
gap:35px 28px;
}
.mg-brand-column{
grid-column:1/-1;
text-align:left;
display:flex;
align-items:center;
gap:25px;
flex-wrap:wrap;
}
.mg-brand-label{
width:100%;
margin-bottom:0;
}
.mg-brand-logo{
justify-content:flex-start;
margin:0;
}
.mg-social{
justify-content:flex-start;
}
.mg-footer-identity{
margin-top:30px;
}
}
/* =========================================================
RESPONSIVE MOBILE
========================================================= */
@media(max-width:600px){
.mg-footer-main{
padding:38px 18px 24px;
}
.mg-footer-grid{
grid-template-columns:1fr;
gap:27px;
}
.mg-footer-title,
.mg-brand-label{
font-size:20px;
}
.mg-contact-list{
gap:11px;
}
.mg-contact-item{
font-size:13px;
}
.mg-brand-column{
grid-column:auto;
display:block;
text-align:left;
}
.mg-brand-logo{
justify-content:flex-start;
margin-bottom:16px;
}
.mg-brand-logo img{
max-width:205px;
}
.mg-social{
justify-content:flex-start;
}
.mg-footer-identity{
margin-top:27px;
padding:16px 0;
display:block;
}
.mg-identity-main{
margin-bottom:6px;
}
.mg-identity-theme{
text-align:left;
font-size:11px;
}
.mg-footer-bottom{
margin-top:18px;
display:block;
}
.mg-copyright{
margin-bottom:10px;
}
.mg-legal{
gap:13px;
}
.mg-footer-main::before{
width:280px;
height:280px;
right:-150px;
top:-140px;
}
.mg-footer-main::after{
width:180px;
height:180px;
left:-100px;
bottom:-100px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.mg-premium-footer *,
.mg-premium-footer *::before,
.mg-premium-footer *::after{
animation:none !important;
transition:none !important;
}
}
