* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Poppins', LEMONMILK;
    padding-top: 0; /* No padding */
    background-color: #000;
}

.navbar{
    background:#94A197;color:white;padding:1rem 2rem;display:flex;
    justify-content:space-between;align-items:center;position:fixed;
    top:0;left:0;right:0;z-index:1000;box-shadow:0 4px 20px rgba(0,0,0,0.1);
}

.logo{font-size:1.8rem;font-weight:700;color:whitesmoke;}


.logo {
    display: flex;
    align-items: center;
    gap: 8px; /* space between logo & text */
}

.logo-img {
    height: 50px;     /* SMALL clean size */
    width: auto;
    object-fit: contain;
}
.center-menu{display:flex;list-style:none;gap:3rem;align-items:center;}

.center-menu a{
    color:white;text-decoration:none;padding:0.7rem 1.2rem;
    border-radius:20px;transition:all 0.3s;font-weight:500;
}

.center-menu a:hover{color:#3d8057;background:rgba(255,255,255,0.2);}

/* CONTENTS SIDE DROPDOWN */
.contents{position:relative;}
.dropdown-content{
    position:absolute;top:100%;right:-20px;background:#94A197;
    min-width:200px;padding:1rem 0;box-shadow:0 8px 25px rgba(0,0,0,0.3);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);border-radius:0 0 12px 12px;
    z-index:1001;border-top:3px solid #94A197;
}

.contents:hover .dropdown-content{
    opacity:1;visibility:visible;transform:translateY(0);
}

.dropdown-content a{display:block;padding:0.8rem 1.5rem;border-bottom:1px solid rgba(255,255,255,0.2);}
.dropdown-content a:hover{background:rgba(255,255,255,0.2);}
.dropdown-content a:last-child{border-bottom:none;border-radius:0 0 12px 12px;}

/* PERFECT 1/4 SCREEN MEGA (SHORTER + CONNECTED) */
.mega{position:relative;}
.mega-box{
    position:fixed;top:70px;left:0;right:0;
    height:380px;  /* TALLER FOR MORE IMAGES */
    background:#94A197;padding:2rem 3%;display:grid;
    grid-template-columns:repeat(4,1fr);gap:1.5rem;align-content:start;
    opacity:0;visibility:hidden;
    transform:scale(0.9) translateY(-30px);
    transition:all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index:1001;border-radius:0 0 25px 25px;
    box-shadow:0 20px 60px rgba(0,0,0,0.4);
}

.mega:hover .mega-box{
    opacity:1;visibility:visible;
    transform:scale(1) translateY(0);
}

.mega-box .category{
    text-align:center;color:white;
    display:flex;
    flex-direction:column;
    align-items:center;  /* CENTER EVERYTHING */
}

.mega-box h3{
    font-size:0.9rem;font-weight:600;margin-bottom:0.8rem;
    text-transform:uppercase;letter-spacing:1px;color:#91dce3;
}

.mega-box img{
    width:45%;
    height:65px;
    object-fit:contain;      /* MAGIC: full body visible */
    object-position:center top;
    transition:all 0.3s ease;
    display:block;
    margin:0 auto -0.3rem;
}

.mega-box img:hover{
    transform:scale(1.08);
}

/* INVISIBLE LINKS */
.char-link {
    display: contents;
    text-decoration: none !important;
}

/* COOL HOVER ANIMATION */
.mega-box img {
    width:70%;
    height:95px;
    object-fit:contain;
    object-position:center top;
    transition:all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display:block;
    margin:0 auto -0.4rem;
    filter: brightness(0.9) saturate(1.1);
}

.char-link:hover img {
    transform: translateY(-8px) scale(1.08);
    filter: brightness(1.1) saturate(1.0) drop-shadow(0 8px 25px rgba(159,214,183,0.6));
    /* GLOW EFFECT */
}

/* FIT ALL */
.mega-box {
    height:480px !important;
    padding:1.5rem 3% !important;
    gap:1rem !important;
}
/* RESPONSIVE */
@media (max-width:1200px){
    .mega-box{left:15%;right:15%;}
}

@media (max-width:768px){
    .mega-box{left:5%;right:5%;height:500px;top:100px;grid-template-columns:repeat(2,1fr);}
}

/* Main Content Area (Gallery) */
#gallery-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding-top: 80px; /* Space for fixed navbar */
    box-sizing: border-box;
}

#gallery-img {
    width: 140%;
    height: 110%;
    object-fit: cover;
    transition: opacity 0.4s ease-in-out;

}

/* Responsive adjustments */
@media (max-width: 768px) {
    .center-menu {
        gap: 1rem;
    }
    
    .mega-box {
        min-width: 300px;
        padding: 1rem;
    }
    
    .char-link img {
        width: 60px;
        height: 60px;
    }
    
    #gallery-container {
        padding-top: 70px;
    }
}

#gallery-img {
    transition: opacity 0.8s ease, transform 0.1s ease-out;
    cursor: pointer;
    display: block;
    max-width: 100%;
}