/*=========================================================
  ACMUN 2026
  Premium Design System
=========================================================*/

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/*=========================================================
ROOT VARIABLES
=========================================================*/

:root{

    --bg:#EDEAE0;
    --surface:#FFFFFF;

    --primary:#D28E24;
    --primary-dark:#B87A1A;
    --primary-light:#F5E2B4;

    --black:#000000;
    --text:#1E1E1E;
    --text-light:#6B6B6B;

    --border:#E4DED3;

    --success:#28a745;
    --danger:#dc3545;

    --glass:rgba(255,255,255,.60);

    --shadow-sm:0 5px 15px rgba(0,0,0,.05);

    --shadow-md:0 20px 40px rgba(0,0,0,.08);

    --shadow-lg:0 35px 80px rgba(0,0,0,.12);

    --radius:20px;

    --transition:.35s ease;

}
/*=========================================================
  Global Reset
=========================================================*/

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    line-height:1.7;

}
/*=========================================================
 Typography
=========================================================*/
h1,h2,h3,h4,h5{

    font-family:'DM Sans',sans-serif;

    color:var(--black);

    font-weight:700;

}

h1{

    font-size:72px;

    line-height:1.05;

}

h2{

    font-size:54px;

}

h3{

    font-size:38px;

}

p{

    font-size:18px;

    color:var(--text-light);

}

/*=========================================================
  Links
=========================================================*/

a{

    text-decoration:none;

    transition:var(--transition);

    color:inherit;

}

img{

    max-width:100%;

    display:block;

}
/*=========================================================
 Sections
=========================================================*/
section{

    position:relative;

    padding:120px 0;

}

.container{

    max-width:1320px;

}
/*=========================================================
Loader
 =========================================================*/
 #loader{

    position:fixed;

    inset:0;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:.8s;

}

.loader-logo{

    text-align:center;

}

.loader-logo img{

    width:90px;

    animation:spinLogo 3s linear infinite;

}

.loader-logo h2{

    margin-top:25px;

    letter-spacing:8px;

    color:var(--primary);

}



/*=========================================================
Register Button
 =========================================================*/
 .register-btn{

    background:var(--primary);

    color:#fff;

    padding:14px 28px;

    border-radius:50px;

    font-weight:700;

    margin-left:25px;

    transition:.35s;

    box-shadow:var(--shadow-sm);

}

.register-btn:hover{

    background:#000;

    color:#fff;

    transform:translateY(-3px);

}
/*=========================================================
Utility Button
 =========================================================*/
 .btn-gold{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    background:var(--primary);

    color:#fff;

    border-radius:60px;

    font-weight:700;

    transition:.35s;

    box-shadow:var(--shadow-md);

}

.btn-gold:hover{

    transform:translateY(-5px);

    background:#000;

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border:2px solid var(--primary);

    color:var(--primary);

    border-radius:60px;

    margin-left:18px;

    transition:.35s;

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

/*=========================================================
Cards
 =========================================================*/
 .card-premium{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:var(--shadow-md);

    transition:.4s;

}

.card-premium:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

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

/* =====================================
   HERO GAP FIX
===================================== */

.hero{

    min-height:100vh;

    padding-top:90px !important;

    padding-bottom:40px;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

}


.hero .container{

    position:relative;

    z-index:5;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:url("../assets/hero/world-map.svg");

    background-repeat:no-repeat;

    background-position:center;

    background-size:70%;

    opacity:.05;

    animation:mapFloat 30s linear infinite;

}






.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    135deg,

    rgba(255,255,255,.45),

    transparent

    );

}




.hero .container{

    position:relative;

    z-index:5;

}

.hero-subtitle{

    color:var(--primary);

    text-transform:uppercase;

    letter-spacing:6px;

    font-size:15px;

    font-weight:700;

    margin-bottom:20px;

}

.hero h1{

    font-size:92px;

    line-height:.95;

    margin-bottom:25px;

}

.hero h1 span{

    color:var(--primary);

}

.hero p{

    font-size:22px;

    max-width:650px;

    margin-bottom:45px;

}






.hero-buttons{

    display:flex;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}





.hero-world{

    width:100%;

    max-width:560px;

    margin:auto;

    animation:floatWorld 7s ease-in-out infinite;

    filter:

    drop-shadow(

    0 40px 80px

    rgba(210,142,36,.22)

    );

}





.hero-badge{

    position:absolute;

    top:120px;

    right:60px;

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

    backdrop-filter:blur(15px);

    padding:18px 28px;

    border-radius:18px;

    box-shadow:var(--shadow-md);

}

.hero-badge h5{

    margin-bottom:5px;

}

.hero-badge p{

    margin:0;

    font-size:15px;

}








.hero-stats{

    display:flex;

    gap:35px;

    margin-top:70px;

    flex-wrap:wrap;

}

.hero-stat{

    background:#fff;

    border-radius:20px;

    padding:30px;

    min-width:180px;

    box-shadow:var(--shadow-sm);

    transition:.35s;

}

.hero-stat:hover{

    transform:translateY(-8px);

}

.hero-stat h2{

    color:var(--primary);

    margin-bottom:8px;

}

.hero-stat p{

    margin:0;

}












.scroll-indicator{

    position:absolute;

    bottom:45px;

    left:50%;

    transform:translateX(-50%);

}

.scroll-indicator span{

    display:block;

    width:28px;

    height:46px;

    border:2px solid var(--primary);

    border-radius:40px;

    position:relative;

}

.scroll-indicator span::before{

    content:"";

    position:absolute;

    width:6px;

    height:6px;

    background:var(--primary);

    border-radius:50%;

    left:50%;

    transform:translateX(-50%);

    animation:scrollWheel 2s infinite;

}















.hero-shape{

    position:absolute;

    border-radius:50%;

    background:rgba(210,142,36,.18);

    filter:blur(2px);

}

.shape1{

    width:220px;

    height:220px;

    top:-60px;

    left:-80px;

}

.shape2{

    width:150px;

    height:150px;

    bottom:80px;

    right:120px;

}

.shape3{

    width:70px;

    height:70px;

    top:220px;

    right:20%;

}









.glass-card{

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

    backdrop-filter:blur(18px);

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

    border-radius:24px;

    padding:35px;

    box-shadow:var(--shadow-md);

}












.section-heading{

    text-align:center;

    margin-bottom:80px;

}

.section-heading h2{

    margin-bottom:18px;

}

.section-heading p{

    max-width:700px;

    margin:auto;

}











.divider{

    width:90px;

    height:4px;

    margin:25px auto;

    background:var(--primary);

    border-radius:50px;

}










.glow{

    transition:.35s;

}

.glow:hover{

    box-shadow:

    0 0 0 1px rgba(210,142,36,.25),

    0 25px 70px rgba(210,142,36,.28);

}












.pattern{

    position:absolute;

    inset:0;

    opacity:.03;

    background-image:

    linear-gradient(

    90deg,

    #000 1px,

    transparent 1px),

    linear-gradient(

    #000 1px,

    transparent 1px);

    background-size:80px 80px;

}
#loader.hide{

    opacity:0;
    visibility:hidden;

}
.navbar,
.hero,
.hero-buttons,
.hero-world,
.hero-subtitle,
.hero p{

display:block !important;
opacity:1 !important;
visibility:visible !important;

}


/* ================================
   ACMUN MAIN NAVBAR
================================ */


.main-navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:90px;

    padding:20px 60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    z-index:9999;


    /* Transparent Glass */

    background:rgba(255,255,255,0.45);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);


    border-bottom:

    1px solid rgba(210,142,36,.15);


    transition:.4s ease;


}


/* Navbar after scrolling */


.main-navbar.scrolled{


    background:rgba(8,28,58,.95);


    height:75px;


    box-shadow:

    0 10px 30px rgba(0,0,0,.25);


    border-bottom:

    2px solid #D28E24;


}

/* =====================================
 ACMUN NAVBAR
===================================== */

.main-navbar{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:90px;

    padding:15px 60px;

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

    z-index:9999;

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

    backdrop-filter:blur(15px);

    border-bottom:1px solid rgba(210,142,36,.2);

    transition:.4s;

}


/* Logo */

.logo img{

    width:140px;
    height:auto;

}


/* Menu */

.nav-links{

    display:flex;

    gap:35px;

    list-style:none;

}


.nav-links a{

    color:#081C3A;

    font-size:16px;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}


.nav-links a:hover{

    color:#D28E24;

}



/* When scrolling */


.main-navbar.scrolled{

    background:#081C3A;

}


.main-navbar.scrolled .nav-links a{

    color:white;

}


.main-navbar.scrolled .nav-links a:hover{

    color:#D28E24;

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


.logo img{


    width:140px;


    transition:.4s;


}



.main-navbar.scrolled .logo img{


    width:110px;


}



/* ================================
MENU
================================ */


.nav-links{


    display:flex;

    list-style:none;

    gap:35px;

    align-items:center;

    margin:0;


}



.nav-links li{


    list-style:none;


}



.nav-links a{


    color:#081C3A;


    font-size:16px;


    font-weight:700;


    letter-spacing:.5px;


    text-decoration:none;


    transition:.3s;


}




.nav-links a:hover{


    color:#D28E24;


}



/* Scrolled Menu */


.main-navbar.scrolled .nav-links a{


    color:#ffffff;


}



.main-navbar.scrolled .nav-links a:hover{


    color:#D28E24;


}



/* ================================
HAMBURGER
================================ */


.menu-toggle{


    display:none;

    cursor:pointer;


}



.menu-toggle span{


    display:block;


    width:32px;


    height:3px;


    background:#081C3A;


    margin:6px 0;


    transition:.4s;


}



.main-navbar.scrolled .menu-toggle span{


    background:#ffffff;


}


/* =====================================
   ACMUN COUNTDOWN CENTER
===================================== */


.countdown-wrapper{

    margin-top:45px;

    width:100%;

    text-align:center;

}



.countdown-wrapper h3{

    font-size:22px;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:15px;

}



.event-date{

    display:inline-block;

    background:var(--primary);

    color:white;

    padding:8px 30px;

    border-radius:50px;

    font-weight:700;

    margin-bottom:25px;

}




.countdown{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}



.time-box{

    width:100px;

    height:100px;

    position:relative;

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

    backdrop-filter:blur(20px);

    border-radius:25px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    border:1px solid rgba(210,142,36,.3);

    animation:
    countdownPulse 3s infinite;

}


.time-box span{


    font-size:40px;

    font-weight:800;

    color:var(--primary);


}



.time-box small{


    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

}
.time-box:nth-child(1){

animation-delay:0s;

}


.time-box:nth-child(2){

animation-delay:.5s;

}


.time-box:nth-child(3){

animation-delay:1s;

}


.time-box:nth-child(4){

animation-delay:1.5s;

}








.welcome-section{

padding:100px 0;
background:#081C3A;

color:white;

}


.welcome-section h2{

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

}


.welcome-section h2 span{

color:#C9A227;

}



.welcome-image img{

max-width:350px;

filter:drop-shadow(0 20px 30px rgba(0,0,0,.4));

}



.info-box{

border-left:4px solid #C9A227;

padding-left:25px;

}



.committee-section{

padding:100px 0;

background:#f8f8f5;

}



.section-title{

text-align:center;
margin-bottom:50px;

}



.committee-card{

background:white;

padding:30px;

height:100%;

border-radius:20px;

text-align:center;

box-shadow:
0 15px 40px rgba(0,0,0,.1);


transition:.4s;

}



.committee-card:hover{

transform:
translateY(-15px);


box-shadow:
0 30px 60px rgba(0,0,0,.2);

}



.committee-card img{

height:160px;

object-fit:contain;

margin-bottom:20px;

}



.process-section{

background:#081C3A;

padding:100px 0;

color:white;

text-align:center;

}


.timeline{

display:flex;

flex-wrap:wrap;

gap:25px;

justify-content:center;

margin-top:50px;

}



.step{

background:white;

color:#111;

padding:30px;

width:250px;

border-radius:20px;

}



.step h4{

color:#C9A227;

}
/*====================================================
 ACMUN 2026 PREMIUM COMMITTEE CARDS
=====================================================*/


.committee-section{

padding:100px 0;

background:
linear-gradient(
135deg,
#081C3A,
#102B4E
);

}




.section-title h2{

color:white;

font-size:45px;

font-weight:800;

}



.section-title p{

color:#C9A227;

letter-spacing:2px;

}




/* CARD */

.committee-card{


position:relative;

height:100%;

padding:35px 25px;

background:

rgba(255,255,255,0.08);


backdrop-filter:blur(15px);


border-radius:25px;


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


overflow:hidden;


text-align:center;


transition:
all .5s ease;


box-shadow:

0 20px 40px rgba(0,0,0,.25);


}



/* GOLD LIGHT BORDER */

.committee-card::before{


content:"";


position:absolute;


inset:0;


border-radius:25px;


padding:2px;


background:

linear-gradient(
45deg,
transparent,
#C9A227,
transparent
);


-webkit-mask:

linear-gradient(#fff 0 0)
content-box,
linear-gradient(#fff 0 0);


-webkit-mask-composite:xor;


mask-composite:exclude;


opacity:0;


transition:.5s;


}




.committee-card:hover::before{

opacity:1;

}





/* Hover Movement */


.committee-card:hover{


transform:

translateY(-18px)
scale(1.03);


box-shadow:


0 30px 70px
rgba(201,162,39,.35);


}





/* IMAGE */


.committee-card img{


height:160px;

width:160px;


object-fit:contain;


padding:15px;


background:white;


border-radius:50%;


transition:.5s;


box-shadow:

0 15px 30px rgba(0,0,0,.3);


}





.committee-card:hover img{


transform:

rotateY(360deg)
scale(1.12);


}




/* TITLE */


.committee-card h4{


margin-top:25px;


font-size:28px;


font-weight:800;


color:#C9A227;


letter-spacing:2px;


}





/* DESCRIPTION */


.committee-card p{


color:#ffffff;


font-size:14px;


line-height:1.7;


}



/* Shine Animation */


.committee-card::after{


content:"";


position:absolute;


top:0;


left:-100%;


width:50%;


height:100%;


background:


linear-gradient(

120deg,

transparent,

rgba(255,255,255,.35),

transparent

);


transform:skewX(-25deg);


transition:.8s;


}




.committee-card:hover::after{


left:150%;


}
 /*====================================
 ACMUN SMALL FLOATING COMMITTEE CARDS
 Premium Light Theme
=====================================*/


.committee-section{

padding:90px 0;

background:

linear-gradient(
135deg,
#f8f5ed,
#ffffff,
#eee7d5
);

position:relative;

overflow:hidden;

}



/* Background Glow */

.committee-section::before{

content:"";

position:absolute;

width:500px;

height:500px;


background:

radial-gradient(
circle,
rgba(201,162,39,.20),
transparent 70%
);


top:-150px;

left:-150px;


animation:moveGlow 10s infinite alternate;


z-index:0;

}



.committee-section::after{

content:"";

position:absolute;

width:400px;

height:400px;


background:

radial-gradient(
circle,
rgba(20,32,64,.10),
transparent 70%
);



bottom:-120px;

right:-100px;


animation:moveGlow2 12s infinite alternate;


z-index:0;

}



@keyframes moveGlow{

from{

transform:translate(0,0);

}

to{

transform:translate(120px,80px);

}

}



@keyframes moveGlow2{

from{

transform:translate(0,0);

}

to{

transform:translate(-100px,-60px);

}

}



/* Heading */

.committee-heading{

text-align:center;

margin-bottom:50px;

position:relative;

z-index:2;

}



.committee-heading h2{

color:#142040;

font-size:42px;

font-weight:900;

letter-spacing:3px;


text-shadow:

0 5px 20px rgba(0,0,0,.15);

}



.committee-heading p{

color:#b08a1a;

font-size:16px;

font-weight:700;

letter-spacing:5px;

}



/* Card Grid */


.committee-grid{

display:grid;

grid-template-columns:

repeat(5,1fr);


gap:25px;


position:relative;

z-index:2;

}



/* Cards */


.committee-card{


height:220px;


border-radius:25px;



background:

linear-gradient(
145deg,
#ffffff,
#f7efd9
);



border:

1px solid rgba(201,162,39,.35);



box-shadow:

0 15px 35px rgba(0,0,0,.12);



display:flex;

align-items:center;

justify-content:center;

flex-direction:column;



position:relative;


overflow:hidden;



animation:

cardFloat 5s infinite ease-in-out;



transition:.5s;


}





/* Floating Delay */

.committee-card:nth-child(2){

animation-delay:1s;

}


.committee-card:nth-child(3){

animation-delay:2s;

}


.committee-card:nth-child(4){

animation-delay:3s;

}


.committee-card:nth-child(5){

animation-delay:4s;

}



/* Floating Animation */


@keyframes cardFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:

translateY(-15px);

}


}




/* Hover */


.committee-card:hover{


transform:

translateY(-25px)

scale(1.12)

rotateY(10deg);



box-shadow:

0 35px 70px rgba(201,162,39,.45);



z-index:10;


}



/* Logo */


.committee-card img{


width:90px;

height:90px;


object-fit:contain;



filter:

drop-shadow(
0 10px 15px rgba(0,0,0,.25)
);



transition:.6s;


}



.committee-card:hover img{


transform:

scale(1.25)

rotateY(360deg);


}



/* Committee Name */


.committee-card h3{


margin-top:18px;


font-size:22px;


font-weight:900;


color:#142040;


letter-spacing:2px;


}



/* Shine Animation */


.committee-card::after{


content:"";


position:absolute;


top:0;


left:-120%;


width:60%;


height:100%;



background:

linear-gradient(

120deg,

transparent,

rgba(255,255,255,.8),

transparent

);



transform:skewX(-25deg);


transition:.8s;


}



.committee-card:hover::after{


left:130%;


}




/* Responsive */


@media(max-width:1200px){


.committee-grid{

grid-template-columns:

repeat(4,1fr);

}

}



@media(max-width:992px){


.committee-grid{

grid-template-columns:

repeat(3,1fr);

}

}




@media(max-width:768px){


.committee-grid{

grid-template-columns:

repeat(2,1fr);

}

}




@media(max-width:480px){


.committee-grid{

grid-template-columns:

1fr;

}

}
 
 
 .hero-logo{
    width:200px;
    height:200px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:none !important;
	  padding-top:90px !important;

    padding-bottom:40px !important;
}


.hero-logo img{

    max-width:100%;
    max-height:100%;

    width:auto;
    height:auto;

    object-fit:contain;

    background:none !important;

}

/* ===== ACMUN FINAL OVERRIDE TEST ===== */


.committee-section{

background:#f8f5ed !important;

padding:100px 0 !important;

}


.committee-card{

background:#ffffff !important;

height:200px !important;

display:flex !important;

align-items:center !important;

justify-content:center !important;

flex-direction:column !important;

opacity:1 !important;

visibility:visible !important;

}


.committee-card img{

width:90px !important;

height:90px !important;

object-fit:contain !important;

background:transparent !important;

opacity:1 !important;

visibility:visible !important;

}


.committee-card h3{

color:#081C3A !important;

font-size:22px !important;

display:block !important;

opacity:1 !important;

visibility:visible !important;

}



.nav-links a{

color:#081C3A !important;

}


.logo img{

width:140px !important;

background:none !important;

}
/* =====================================
   FINAL NAVBAR COLOR FIX
===================================== */


/* Normal top navbar */

.main-navbar:not(.scrolled) .nav-links a{

    color:#081C3A !important;

}



/* After scrolling */

.main-navbar.scrolled{

    background:#081C3A !important;

}



.main-navbar.scrolled .nav-links a{

    color:#ffffff !important;

}



.main-navbar.scrolled .nav-links a:hover{

    color:#D28E24 !important;

}


/* Register button */

.main-navbar.scrolled .register-btn{

    background:#D28E24 !important;

    color:white !important;

}



.main-navbar.scrolled .register-btn:hover{

    background:white !important;

    color:#081C3A !important;

}
/* ==========================================
   ACMUN MOBILE NAVBAR FINAL FIX
========================================== */


@media(max-width:768px){


.main-navbar{

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

}



.nav-links{


    position:absolute;

    top:90px;

    left:0;

    width:100%;

    background:#081C3A;

    padding:30px 0;

    display:none;

    flex-direction:column;

    text-align:center;

    z-index:9999;

}



.nav-links li{

    margin:15px 0;

}



.nav-links a{

    color:#ffffff !important;

    font-size:18px;

}



.nav-links a:hover{

    color:#D28E24 !important;

}




/* When menu opens */


.nav-links.active{

    display:flex;

}



/* Scrolled mobile navbar */


.main-navbar.scrolled{

    background:#081C3A !important;

}



.main-navbar.scrolled .nav-links{

    background:#081C3A !important;

}



.main-navbar.scrolled .nav-links a{

    color:#ffffff !important;

}



/* Hamburger */


.menu-toggle span{

    background:#081C3A;

}



.main-navbar.scrolled .menu-toggle span{

    background:#ffffff !important;

}


}

/* Remove unwanted space after navbar */

.main-navbar + .hero{

    margin-top:0 !important;

}
.hero h1{

    margin-top:0;

}

/* =========================================
 ACMUN HERO PHOTO GALLERY
========================================= */


.hero-gallery{

    position:relative;

    width:100%;

    height:520px;

    display:flex;

    justify-content:center;

    align-items:center;

}


.photo-card{

    position:absolute;

    width:260px;

    height:330px;

    border-radius:30px;

    overflow:hidden;


    background:white;


    padding:10px;


    box-shadow:

    0 30px 60px rgba(0,0,0,.25);


    transition:.6s;


}



.photo-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:22px;

}



/* Individual positions */


.photo1{

    transform:

    rotate(-15deg)

    translateX(-80px);


    animation:

    float1 6s infinite ease-in-out;

}



.photo2{


    z-index:3;


    transform:

    rotate(0deg);


    animation:

    float2 6s infinite ease-in-out;

}



.photo3{


    transform:

    rotate(15deg)

    translateX(80px);


    animation:

    float3 7s infinite ease-in-out;

}



.photo4{


    width:180px;

    height:230px;


    transform:

    translate(-170px,170px)

    rotate(-20deg);


    opacity:.9;


}



.photo5{


    width:180px;

    height:230px;


    transform:

    translate(170px,170px)

    rotate(20deg);


    opacity:.9;


}




@keyframes float1{


0%,100%{

margin-top:0;

}


50%{

margin-top:-20px;

}


}



@keyframes float2{


0%,100%{

transform:scale(1);

}


50%{

transform:scale(1.05);

}


}



@keyframes float3{


0%,100%{

margin-top:0;

}


50%{

margin-top:20px;

}


}



/* Hover effect */


.hero-gallery:hover .photo-card{


filter:brightness(.75);


}



.hero-gallery .photo-card:hover{


transform:

scale(1.15)

rotate(0deg);


z-index:10;


filter:brightness(1);


box-shadow:

0 50px 100px rgba(210,142,36,.45);


}

/* ==================================
   ACMUN 10 PHOTO HERO GALLERY
================================== */


.hero-gallery{

position:relative;

height:560px;

width:100%;

display:flex;

justify-content:center;

align-items:center;

perspective:1000px;

}




.photo-card{

position:absolute;

width:170px;

height:220px;

padding:8px;

background:#fff;

border-radius:25px;

overflow:hidden;


box-shadow:

0 25px 60px rgba(0,0,0,.25);


transition:.6s;

}



.photo-card img{

width:100%;

height:100%;

object-fit:cover;

border-radius:18px;

}




/* TOP ROW */


.g1{

transform:
translate(-170px,-160px)
rotate(-20deg);

animation:floatA 6s infinite;

}


.g2{

transform:
translate(-40px,-200px)
rotate(-8deg);

animation:floatB 7s infinite;

}



.g3{

transform:
translate(100px,-160px)
rotate(15deg);

animation:floatC 6s infinite;

}



/* MIDDLE */


.g4{

transform:
translate(-230px,0)
rotate(-25deg);

}



.g5{

z-index:3;

transform:
translate(0,0)
scale(1.1);

}




.g6{

transform:
translate(230px,0)
rotate(25deg);

}




/* BOTTOM */


.g7{

transform:
translate(-170px,170px)
rotate(-15deg);

}



.g8{

transform:
translate(-40px,210px)
rotate(8deg);

}



.g9{

transform:
translate(100px,170px)
rotate(15deg);

}



.g10{

display:none;

}




/* CENTER LOGO */


.gallery-center{


position:absolute;

z-index:10;


width:120px;

height:120px;


border-radius:50%;


background:

rgba(255,255,255,.85);


backdrop-filter:blur(15px);


display:flex;

align-items:center;

justify-content:center;

flex-direction:column;


box-shadow:

0 20px 50px rgba(0,0,0,.25);


}



.gallery-center img{

width:55px;

height:55px;

object-fit:contain;

}



.gallery-center h4{


font-size:14px;

text-align:center;

color:#D28E24;

margin:5px 0 0;


}





/* FLOATING EFFECT */


@keyframes floatA{

50%{

margin-top:-20px;

}

}


@keyframes floatB{

50%{

margin-top:20px;

}

}


@keyframes floatC{

50%{

margin-top:-25px;

}

}




/* Hover */


.hero-gallery:hover .photo-card{

filter:brightness(.75);

}



.hero-gallery .photo-card:hover{


z-index:20;


transform:

scale(1.25)

rotate(0deg)!important;


filter:none;


box-shadow:

0 40px 80px rgba(210,142,36,.5);


}
/* =====================================
   ACMUN HERO GALLERY MOBILE FIX
===================================== */

@media(max-width:768px){


.hero{

    padding-top:100px;
    padding-bottom:60px;

}


.hero .row{

    height:auto !important;

}


.hero-gallery{

    height:420px;

    margin-top:60px;

    transform:scale(.75);

}



.countdown-wrapper{

    margin-bottom:40px;

}



.photo-card{

    width:140px;

    height:180px;

}


/* reposition photos */

.g1{
    transform:
    translate(-100px,-120px)
    rotate(-15deg);
}


.g2{
    transform:
    translate(0,-150px)
    rotate(-5deg);
}


.g3{
    transform:
    translate(100px,-120px)
    rotate(15deg);
}


.g4{
    transform:
    translate(-140px,0)
    rotate(-20deg);
}


.g5{
    transform:
    translate(0,0)
    scale(1.05);
}


.g6{
    transform:
    translate(140px,0)
    rotate(20deg);
}


.g7{
    transform:
    translate(-100px,130px)
    rotate(-12deg);
}


.g8{
    transform:
    translate(0,160px)
    rotate(8deg);
}


.g9{
    transform:
    translate(100px,130px)
    rotate(12deg);
}



.gallery-center{

    width:90px;

    height:90px;

}


.gallery-center img{

    width:40px;

    height:40px;

}


.gallery-center h4{

    font-size:11px;

}


}




/* Small mobile devices */

@media(max-width:480px){


.hero-gallery{

    height:360px;

    transform:scale(.65);

    margin-top:30px;

}


.countdown-wrapper{

    margin-top:30px;

}


.hero h1{

    font-size:55px;

}


.hero p{

    font-size:18px;

}


.time-box{

    width:75px;

    height:75px;

}


.time-box span{

    font-size:28px;

}


}

/* ==========================================
 ACMUN PREMIUM MESSAGE LETTER EFFECT
========================================== */


.message-section{

padding:130px 0;

background:

radial-gradient(
circle at top left,
rgba(210,142,36,.15),
transparent 35%
),

linear-gradient(
135deg,
#f8f5ed,
#ffffff,
#eee7d5
);

overflow:hidden;

}



/* floating background circles */

.message-section::before,
.message-section::after{

content:"";

position:absolute;

border-radius:50%;

filter:blur(30px);

z-index:0;

animation:bgMove 12s infinite alternate;

}



.message-section::before{

width:300px;

height:300px;

background:rgba(210,142,36,.15);

left:-100px;

top:100px;

}



.message-section::after{

width:250px;

height:250px;

background:rgba(8,28,58,.12);

right:-80px;

bottom:100px;

}



@keyframes bgMove{

to{

transform:translate(80px,60px);

}

}





.message-wrapper{

position:relative;

height:680px;

z-index:2;

}





/* LETTER CARD */

.message-card{


position:absolute;


width:70%;


padding:45px;


background:


linear-gradient(
145deg,
#ffffff,
#faf5e8
);



border-radius:15px;


box-shadow:


0 40px 90px rgba(0,0,0,.18);



overflow:hidden;


transition:

transform .8s cubic-bezier(.2,.8,.2,1),

box-shadow .5s;


}




/* moving gold edge */


.message-card::before{


content:"";


position:absolute;


inset:-2px;


background:


linear-gradient(

120deg,

transparent,

#D28E24,

transparent

);



animation:borderMove 5s linear infinite;


z-index:-1;


}




@keyframes borderMove{


to{

transform:rotate(360deg);

}

}






/* paper shine */


.message-card::after{


content:"";


position:absolute;


top:0;

left:-120%;


width:60%;


height:100%;


background:


linear-gradient(

120deg,

transparent,

rgba(255,255,255,.8),

transparent

);



transform:skewX(-25deg);


transition:.8s;


}



.message-card:hover::after{


left:150%;


}







/* POSITION */


.principal-card{


left:0;

top:40px;


transform:

rotate(-5deg)

translateX(-100px);


opacity:0;


animation:

slidePrincipal 1.2s forwards;


}



.secretary-card{


right:0;

top:160px;


transform:

rotate(5deg)

translateX(100px);


opacity:0;


animation:

slideSecretary 1.2s .3s forwards;


}




@keyframes slidePrincipal{


to{

opacity:1;

transform:

rotate(-5deg)

translateX(0);

}


}



@keyframes slideSecretary{


to{

opacity:1;

transform:

rotate(5deg)

translateX(0);

}


}







/* hover 3D */


.message-card:hover{


transform:

translateY(-25px)

rotate(0deg)

scale(1.05);



box-shadow:


0 70px 130px rgba(210,142,36,.35);


z-index:20;


}






/* PERSON AREA */


.person-header{


display:flex;

align-items:center;

gap:30px;


}





.person-photo{


width:130px;

height:130px;


border-radius:50%;


object-fit:cover;


border:

6px solid #D28E24;


background:white;


padding:6px;



box-shadow:


0 20px 40px rgba(0,0,0,.25);


animation:

photoFloat 5s infinite ease-in-out;


}



@keyframes photoFloat{


50%{

transform:

translateY(-12px);

}


}




.person-header h3{


font-size:26px;

color:#081C3A;


}



.person-header h4{


color:#D28E24;

margin:5px 0;


}





.letter-line{


height:3px;


margin:25px 0;


background:

linear-gradient(

90deg,

#D28E24,

transparent

);


}





.message-content p,
.message-card p{


font-size:17px;

line-height:2;


color:#555;


}




.signature{


margin-top:30px;


font-family:cursive;


font-size:22px;


color:#081C3A;


}





.signature strong{


display:block;


font-family:'Inter';


font-size:14px;


color:#D28E24;


}






/* MOBILE */


@media(max-width:768px){


.message-wrapper{

height:auto;

}



.message-card{


position:relative;

width:100%;

margin-bottom:50px;


}



.principal-card,
.secretary-card{


top:auto;

left:auto;

right:auto;


transform:none;


animation:none;

opacity:1;


}



.person-photo{


width:100px;

height:100px;


}


}