/* 1. Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;  
    min-height: 100vh;  
    background: linear-gradient(187deg, #2D6052 2.02%, #000 33%, #000 48%, #14497F 100%);    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden; /* Add this line! */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Forces the body to be AT LEAST 100% of the screen height */
}

/* 2. The Navbar Layout */
.navbar {
    position: fixed; 
    top: 0;
    width: 100%; /* Required when using fixed positioning */
    z-index: 50; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 1px 5%; 
    
    /* ADDED: The subtle glass background for the whole header strip */
    background: rgba(255, 255, 255, 0.03); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(43, 43, 43, 0.1); 
    box-shadow: 0 1px 80px rgba(0, 0, 0, 0.4);
    transition: top 0.3s ease-in-out;
}
.logo {
    height: 80px;
    width: auto;
    aspect-ratio: 30/17;
}

/* 3. The Navigation Links */
.nav-links {
    display: flex;
    list-style: none;
    gap: 40px; /* Space between links */
    align-items: center;
}

.nav-links a {
    font-family: "Inter", sans-serif;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative; /* Required for the active-nav border */
}

.nav-links a:hover {
    color: #8AB8A8; 
}
/* The JavaScript will add this class to hide the navbar, and remove it to show it */
.nav-hidden {
    top: -120px; /* Pushes the navbar exactly out of the frame */
}
.active-nav {
    padding: 10px 30px; /* Made it a bit wider and taller to match Figma */
    border-radius: 8.5px; /* Ensures it stays a perfect pill */
    background: rgba(255, 255, 255, 0.08); /* A slightly brighter glassy fill inside */
}

/* The gradient border for the active link */
.active-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8.5px;
    padding: 2px; /* CHANGED: Increased from 1px to 2px to make the gradient pop */
    background: linear-gradient(90deg, #FFFFE2 0%, #14497F 100%); 
    
    /* The mask to punch out the center */
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    pointer-events: none;
}

/* --- GLOBAL CONTAINER --- */
.container {
    width: 80%; /* Forces the container to always leave a 5% margin on the left/right */
    max-width: 1400px; /* A standard max-width so it doesn't get ridiculously wide on 4K monitors */
    margin: 0 auto;
    padding: 80px 0; /* Removed the side padding since we are using width: 90% now */
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* --- BACKGROUND GLOW EFFECTS --- */
.glow-orb {
    position: absolute;
    border-radius: 50%; /* Makes it a perfect circle */
    z-index: 0; /* Keeps it strictly in the background */
    pointer-events: none; /* Ensures it doesn't block clicking on links */
}

.left-glow {
    /* Dimensions from your Figma screenshot */
    width: 894px;
    height: 894px;
    
    /* The color and blur from your Figma screenshot */
    background-color: #14497F;
    filter: blur(200px);
    
    /* Positioning it on the left side */
    top: -20%; /* Pushes it up slightly */
    left: -20%; /* Pushes it off-screen to the left so just the edge glows */
    
    /* Optional: Lower opacity if it's overpowering the text */
    opacity: 0.7; 
}

.green1 {
    /* Dimensions from your Figma screenshot */
    width: 894px;
    height: 894px;
    
    /* The color and blur from your Figma screenshot */
    background-color: #004D41;
    filter: blur(250px);
    
    /* Positioning it on the left side */
    top: 240%; /* Pushes it up slightly */
    left: -15%; /* Pushes it off-screen to the left so just the edge glows */
    
    /* Optional: Lower opacity if it's overpowering the text */
    opacity: 1; 

}

.green2 {
    /* Dimensions from your Figma screenshot */
    width: 894px;
    height: 894px;
    
    /* The color and blur from your Figma screenshot */
    background-color: #004D41;
    filter: blur(250px);
    
    /* Positioning it on the left side */
    top: 290%; /* Pushes it up slightly */
    right: -5%; /* Pushes it off-screen to the left so just the edge glows */
    
    /* Optional: Lower opacity if it's overpowering the text */
    opacity: 1; 
}

/* --- THE GLASS EFFECT --- */
.glass-card {
    position: relative; /* Crucial: anchors the fake border to this card */
    background: rgba(255, 255, 255, 0.10); /* Your semi-transparent glass */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 30px;
    border-radius: 41px; 
}

/* This creates the gradient border */
.glass-card::before {
    content: "";
    position: absolute;
    inset: 0; /* Stretches to the exact edges of the card */
    border-radius: 41px; /* Matches the parent's curves */
    padding: 3px; /* This dictates your border thickness! */
    background: linear-gradient(135deg, #FFFFE2 0%, #14497F 100%);
    
    /* The magic cookie-cutter mask that punches a hole in the center */
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    pointer-events: none; /* Ensures the fake border doesn't block you from clicking text */
}

/* --- HERO SECTION --- */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-content {
    text-align: center;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative; 
    width: max-content; /* Shrinks the box to exactly the width of the logo */
    margin: 0 auto;
}

.hero-main-logo {
    max-width: 639px;
    height: auto;
    aspect-ratio: 231/130;
}

.hero-subtitle {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 1px;
}

/* --- FLOATING DECORATIONS --- */
.floating-shape {
    position: absolute;
    z-index: 1;
    opacity: 0.8;
}

.shape-1 {
    /* Medium Star: Hovering above the 'S' and 'C' */
    top: -100px; 
    left: -120px; 
    width: 170px;
}

.shape-2 {
    bottom: -280px; 
    left: -500px; /* Pushes it way past the 'A' */
    width: 410px;
    opacity: 0.4; 
    transform: rotate(28deg);

}

.shape-3 {
    top: -110px; /* Pushes it high above the logo */
    right: -550px; /* Pushes it way past the 'D' */
    width: 360px;
    transform: rotate(320deg);
}
.shape-4 {
    /* Small Flower: Tucked underneath the bottom-right text */
    bottom: -80px; 
    right: -150px; 
    width: 100px;
    transform: rotate(25deg);
}

.shape-7 {
    /* Small Flower: Floating top-left, just outside the medium star */
    top: -20px; 
    left: -400px; 
    width: 90px;
}

/* --- The Title Wrapper --- */
.title-wrapper {
    position: relative; /* Traps the shapes! */
    width: max-content; /* Shrinks the box to exactly the width of "About Us" */
    margin: 0 auto 60px auto; 
    z-index: 2; 
}

.title-wrapper .section-title {
    margin-bottom: 0 !important; 
}

/* --- The Left Star --- */
.about-star {
    position: absolute;
    bottom: 7px; 
    left: -50px; 
    width: 110px; 
    transform: rotate(106deg); 
    opacity: 0.9;
    z-index: -1; /* Tucks it under the text */
}

/* --- The Right Flower --- */
.about-flower {
    position: absolute;
    top: -2px; 
    right: -115px; 
    width: 160px; 
    transform: rotate(19deg); 
    opacity: 0.85;
    z-index: -1;
}

/* --- ABOUT US LAYOUT --- */
.about-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Changed from center to align top */
    gap: 120px;
}

#about .title-wrapper {
    /* Overrides the 'auto' margin that centers the box */
    margin-left: 0; 
}

.about-title {
    flex: 1.2;
}

.about-title h2 {
    background: linear-gradient(90deg, #004D41 -26.6%, #FFFFE2 30.43%, #14497F 118.46%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Poppins", sans-serif;
    font-size: 80px;
    font-style: normal;
    font-weight: 700;
    line-height: 300%;
}

.about-content {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between the subtitle and the text box */
}

.about-subtitle h3 {
    color: #FFFFE2;
    font-family: "IBM Plex Serif", serif; /* Added fallback serif */
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    text-align: right;
}

.about-text-box {
    text-align: right;
}

.about-text-box h3 {
    color: #8AB8A8;
    font-size: 24px;
    margin-bottom: 15px;
}

.about-text-box p1 {
    color: #FFF;
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 27px */
}
.about-text-box p2 {
    color: #FFF;
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

/* --- VISION & MISSION SHARED --- */
.sub-heading h3{
    color: #FFFFE2;
    font-family: "IBM Plex Serif";
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    width: 462.13px;
    line-height: 150%; /* 60px */
    margin-bottom: 10px;
    
}

.sub-heading-mission h3 {
    color: #FFFFE2;
    font-family: "IBM Plex Serif", serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; 
    margin-bottom: 10px;
    text-align: center; /* This will now work perfectly because the width isn't restricted! */
}

.vision-card {
    text-align: center;
    line-height: 1.6;
    padding-top: 30px; 
}

/* --- MISSION 3-COLUMN LAYOUT --- */
.mission-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.mission-card {
    flex: 1;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    padding: 25px 25px;
    padding-top: 30px;
}

/* ========================================= */
/* --- PAST COLLABORATORS (NEW LAYOUT) --- */
/* ========================================= */

.section-title {
    position: relative;
    background: linear-gradient(90deg, #004D41 -39.6%, #FFFFE2 70.43%, #14497F 118.46%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Poppins", sans-serif;
    font-size: 60px;
    font-weight: 700;
    text-align: center; /* Centered it again based on your new screenshot! */
    margin-top: 60px; /* Adds some breathing room from the top of the section */
}
.collab-flower {
    position: absolute;
    bottom: -70px; 
    right: -180px; 
    width: 252px; 
    transform: rotate(25.125deg); 
    opacity: 0.9;
    z-index: -1;
}
.collab-star {
    position: absolute;
    bottom: -70px; 
    left: -70px; 
    width: 120px; 
    transform: rotate(310deg); 
    opacity: 1;
    z-index: 1; /* Tucks it under the text */
}

/* The Main Glass Board */
/* --- The Main Glass Board (Using Exact Figma Specs) --- */
/* --- The 4-Column Grid --- */
.collaborator-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
    width: 100%;
    max-width: 1100px;

    margin: 20px auto 0 auto; 
    justify-content: center;
}


/* --- The Individual Glass Cards (Using your exact previous code) --- */
.collab-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    
    /* Exact sizing for vertical cards */
    min-height: 280px;
    padding: 30px 15px 15px 15px; 
    overflow: hidden; 
    z-index: 1;

    /* EXACT STYLING COPIED FROM YOUR PREVIOUS .collaborator-board */
    border-radius: 41px;
    border: 3px solid #FFFFE2;
    background: linear-gradient(355deg, rgba(202, 228, 255, 0.75) -22.06%, rgba(255, 255, 255, 0.75) 75.33%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15); 
}

/* --- Inner Card Faint Background Shape --- */
.card-bg-shape {
    position: absolute;
    top: 30px; /* Positioned similarly to the Figma image */
    left: -20px;
    width: 140px;
    opacity: 0.3; /* Faint opacity so it doesn't distract from the logos */
    z-index: -1;
}

/* --- The Logo Area --- */
.collab-logo-wrapper {
    flex-grow: 1; 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px; /* Pushes the name pill down */
    z-index: 2;
}

.collab-logo {
    max-width: 90%; 
    max-height: 90px;
    object-fit: contain;
}
.rotate-lentera {
    transform: rotate(90deg) scale(0.6) translateX(20px) translateY(-5px); 
    
}
/* --- The Name Pill at the Bottom --- */
.collab-name {
    width: 100%;
    border-radius: 41px; /* Matches the card's curves */
    border: 2px solid #FFFFE2; /* Solid white border from Figma */
    background: transparent; /* Lets the card's glass background shine through */
    padding: 10px 5px;
    text-align: center;
    z-index: 2;
}

.collab-name h4 {
    margin: 0;
    font-family: 'IBM Plex Serif', serif;
    color: #FFFFE2;
    text-align: center;
    text-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);

    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 88%; /* 17.6px */
}

/* Specific Logo Tweaks (Adjust these widths based on your actual SVG exports) */
.lps-logo { width: 277.694px; 
            aspect-ratio: 173/71;}
.mantappu-logo { width: 171.714px; 
                 aspect-ratio: 1/1;}
.mandiri-logo { width: 306.132px; 
                aspect-ratio:243/71;}


/* ========================================= */
/* --- TIMELINE SECTION --- */
/* ========================================= */

#timeline {
    margin-top: 200px;
    margin-bottom: 250px; /* Lots of space so the bottom cards don't hit the footer */
}

.timeline-wrapper {
    position: relative;
    display: flex;
    justify-content: space-between; /* Spaces the 8 dots perfectly evenly */
    align-items: center;
    width: 90%; 
    max-width: 1200px; /* Optional: Stops it from stretching too far on giant monitors */
    
    /* ADDED: This is the magic line that forces it to stay in the center! */
    margin: 0 auto; 
    
    padding: 120px 0; 
}
.timeline-flower {
    position: absolute;
    top: -45px;     /* Pushes it up to sit behind the 'T' */
    left: -113px;   /* Pulls it to the left edge of the text */
    width: 188px;   /* Noticeably larger scale based on your image */
    transform: rotate(278deg); 
    opacity: 0.6;
    z-index: -1;
}

.timeline-star {
    position: absolute;
    bottom: -40px;  /* Drops it down slightly below the text baseline */
    right: -50px;   /* Pushes it out past the 'e' */
    width: 70px;    /* Smaller, delicate scale */
    transform: rotate(15deg);
    opacity: 0.85;
    z-index: -1;
}

/* The Glowing Horizontal Line */
.timeline-line {
    position: absolute;
    top: 50%;
    left: 2%; /* Indents slightly from the edges */
    right: 2%;
    height: 4px;
    transform: translateY(-50%);
    
    /* Recreates the glowing effect from Figma */
    background: linear-gradient(90deg, #E2E8F0 60%);
    box-shadow: 0 0 15px rgba(255, 255, 226, 0.6);
    z-index: 1;
}

/* The individual "Stops" */
.timeline-item {
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 2; /* Keeps dots above the line */
}

/* Your Figma Ellipse Assets */
.timeline-dot {
    width: clamp(20px, 2vw, 24px);
    height: clamp(20px, 2vw, 24px);
    object-fit: contain;
}

/* The Glass Text Cards */
/* --- The Glass Text Cards (Pure CSS matching the SVG) --- */
.timeline-content {
    position: absolute;
    width: max-content; 
    padding: 14px 20px;
    min-width: 160px; /* Adjusted to match the proportions in your image */
    text-align: center;
    padding: 18px 25px;
    
    /* CHANGED: Softened the gradient so it's a creamy top-left fading to a sage green bottom-right */
    background: linear-gradient(300deg, #FFFFE2 50%, #6B8F80 128%);
    
    /* CHANGED: Made the border a delicate 1px highlight instead of a thick solid line */
    border: 1px solid rgba(253, 253, 225, 0.6); 
    border-radius: 30px;
    
    /* Tightened the shadow to be a softer glow */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}
/* Pushes TOP cards above the dot */
.top-card .timeline-content {
    bottom: calc(100% + 15px); /* 20px gap between dot and card */
}

/* Pushes BOTTOM cards below the dot */
.bottom-card .timeline-content {
    top: calc(100% + 15px);
}

/* Typography matching the Figma */
.timeline-content h3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    
    /* We skip hardcoding width: 207px here so longer titles like 
       "Final Round & Awarding Night" can wrap safely without breaking the box */
    min-height: 42px; /* Ensures it maintains the height from Figma */
    
    font-family: "IBM Plex Serif", serif;
    font-size: clamp(16px, 2vw, 20px);
    font-style: italic;
    font-weight: 700;
    line-height: 100%; 
    margin-bottom: 5px; /* Adds just a tiny bit of breathing room before the date */
    
    /* The exact gradient text effect from Figma */
    background: linear-gradient(90deg, #14497F 0%, #004D41 140%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Timeline Date/Description (Exact Figma Typography) --- */
.timeline-content p {
    /* Using Flexbox here to ensure the text stays perfectly 
       centered vertically, just like the Figma box */
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    color: #14497F;
    text-align: center;
    font-family: "IBM Plex Serif", serif;
    font-size: clamp(12px, 1.5vw, 14px);
    font-style: normal;
    font-weight: 700;
    line-height: 150%; 
    margin: 0; /* Removes default paragraph spacing so the layout stays tight */
}

/* ========================================= */
/* --- MOBILE RESPONSIVE: TIMELINE --- */
/* ========================================= */

@media (max-width: 992px) {
    /* 1. Stack the wrapper vertically */
    .timeline-wrapper {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 0; 
        gap: 40px; /* Spacing between each vertical milestone */
    }

    /* 2. Turn the horizontal line into a vertical line */
    .timeline-line {
        top: 0;
        bottom: 0;
        left: 14px; /* Centers the 4px line perfectly behind your 32px dots */
        width: 4px;
        height: 100%;
        transform: none; /* Removes the desktop centering math */
        
        /* Flips the glowing gradient from horizontal to vertical */
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #E2E8F0 20%, #E2E8F0 80%, rgba(255,255,255,0) 100%);
    }

    /* 3. Put the dot and the card side-by-side */
    .timeline-item {
        flex-direction: row; /* Aligns the dot and card horizontally */
        align-items: center; 
        width: 100%;
    }

    /* 4. The Magic Trick: Remove Absolute Positioning */
    .timeline-content {
        position: relative; /* Breaks it out of floating mode! */
        top: auto !important; /* Overrides the .bottom-card rule */
        bottom: auto !important; /* Overrides the .top-card rule */
        left: 0;
        transform: none; /* Overrides the center alignment */
        
        margin-left: 30px; /* Adds space between the dot and the card */
        width: 100%;
        max-width: 320px; /* Keeps the cards from getting too wide on tablets */
        
        /* Optional: align text to the left for better mobile reading */
        text-align: left;
        align-items: flex-start;
    }
}

/* ========================================= */
/* --- FOOTER SECTION --- */
/* ========================================= */

.site-footer-home {
    /* Using a solid dark blue that matches your screenshot */
    background-color: #214C72; 
    backdrop-filter: blur(10px);
    padding: 60px 5%;
    
    /* Adds a subtle line at the top to separate it from the page content */
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
    margin-top: auto; /* Pushes the footer to the bottom if content is short */ 
}

.site-footer-ibcc {
    /* Using a solid dark blue that matches your screenshot */
    background-color: rgba(255, 255, 2555, 0.1); 
    backdrop-filter: blur(10px);
    padding: 60px 5%;
    
    /* Adds a subtle line at the top to separate it from the page content */
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
    margin-top: auto; /* Pushes the footer to the bottom if content is short */ 
}

.site-footer-register {
    /* Using a solid dark blue that matches your screenshot */
    background-color: rgba(255, 255, 2555, 0.1); 
    backdrop-filter: blur(10px);
    padding: 60px 5%;
    
    /* Adds a subtle line at the top to separate it from the page content */
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
    margin-top: auto; /* Pushes the footer to the bottom if content is short */ 
}

.footer-container {
    display: flex;
    
    /* CHANGED: This tells the browser to put ALL the empty space in the middle, 
       pushing the columns to the far left and right edges! */
    justify-content: space-between; 
    
    align-items: flex-start;
    
    /* Note: If they still aren't far enough apart, increase this max-width 
       to 1200px or 1400px to make the invisible container wider. */
    max-width: 1400px; 
    
    margin: 0 auto;
    gap: 40px;
}

/* Footer Typography */
.site-footer h4 {
    font-family: 'Poppins', sans-serif;
    color: #FFFFE2; /* The creamy white theme color */
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.site-footer p {
    font-family: 'IBM Plex Serif', serif;
    font-style: italic; /* Matching the Figma design */
    color: #FFFFFF;
    font-size: 16px;
    line-height: 1.6;
    margin: 5px 0;
}

/* --- Left Side: Social --- */
.footer-social {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers everything in this column */
    color: #FFF;
    text-align: center;
    font-family: "IBM Plex Serif";
    font-size: 18px;
    font-style: italic;
    font-weight: 700;
    line-height: 150%; /* 27px */
}

.social-icons {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.social-icons img {
    width: 32px; /* Adjust based on your SVG exports */
    height: auto;
    transition: transform 0.3s ease;
}

/* Adds a nice little "pop" when the user hovers over the social icons */
.social-icons a:hover img {
    transform: translateY(-5px);
}

/* --- Right Side: Contact --- */
.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Keeps text left-aligned */
}

.footer-contact p{
    align-items: flex-start; /* Keeps text left-aligned */
    color: #FFF;
    font-family: "IBM Plex Serif";
    font-size: 18px;
    font-style: italic;
    font-weight: 700;
    line-height: 150%; /* 27px */
}

/* --- IBCC PAGE SPECIFIC STYLES --- */

body.ibcc-page {
    background: linear-gradient(357deg, #2D6052 6.08%, #000 25%, #000 30%, #14497F 128%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

body.register-page {
    background: linear-gradient(357deg, #2D6052 6.08%, #000 25%, #000 30%, #14497F 128%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#ibcc-hero {
    padding-top: 200px; /* Pushes it down past the navbar */
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Override the wrapper margin so it centers perfectly */
.ibcc-hero-title {
    margin: 0 auto 30px auto !important; 
}

/* The Subtitle (Italic serif font matching Figma) */
.ibcc-subtitle {
    display: flex;
    width: 1018px;
    height: 117px;
    flex-direction: column;
    justify-content: center;
    color: #FFF;
    text-align: center;
    font-family: "IBM Plex Serif", serif;
    font-size: 25px;
    font-style: italic;
    font-weight: 700;
    line-height: 150%; /* 40.5px */
    margin-top: -80px; /* Adds a bit of breathing room from the title */
    margin-bottom: 80px; /* Adds a bit of breathing room from the title */

}

/* --- Floating Background Shapes for Hero --- */
.hero-flower1 {
    position: absolute;
    top: -80px;
    right: -160px;
    width: 280px;
    transform: rotate(30deg);
    opacity: 0.6;
    z-index: -1;
}
.hero-flower2 {
    position: absolute;
    top: -80px;
    left: -160px;
    width: 90px;
    transform: rotate(270deg);
    opacity: 0.6;
    z-index: -1;
}
.hero-star-right {
    position: absolute;
    top: 210px;
    right: -700px;
    width: 550px;
    transform: rotate(260deg);
    opacity: 0.23;
    z-index: -1;
}

.hero-star-left {
    position: absolute;
    top: 80px;
    left: -520px;
    width: 550px;
    transform: rotate(-265deg);
    opacity: 0.1;
    z-index: -1;
}
.ibcc-hero-title .section-title {
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 90px */
    background: linear-gradient(90deg, #ADADAD 0%, #FFFFE2 50%, #ADADAD 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* ========================================= */
/* --- THIS YEAR THEME SECTION --- */
/* ========================================= */

#theme {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 100px;
}

.theme-title-wrapper {
    margin-bottom: 20px !important; /* Overrides the default 60px bottom margin */
}

/* Adds a gap below the subtitle before the big text box */
.theme-subtitle {
    margin-bottom: 40px;
    margin-top: -30px;
    color: #FFFFE2;
    text-align: center;
    font-family: "IBM Plex Serif", serif;
    font-size: 40px;
    font-style: italic;
    font-weight: 700;
    line-height: 150%; /* 60px */
}

/* --- The Giant Paragraph Box --- */
.theme-text-box {
    max-width: 1100px; /* Keeps the lines of text from getting too long to read */
    width: 90%;
    padding: 50px 60px;
    border-radius: 41px;
    
    /* Center-aligns the text exactly like the Figma design */
    text-align: center; 
    
    /* Slightly darker glass effect to contrast with the page background */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(20, 73, 127, 0.2) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.theme-text-box p {
    font-family: 'Poppins', sans-serif; /* Standard readable font */
    font-size: 15px;
    line-height: 1.8; /* Lots of breathing room between lines */
    color: #F8FAFC; /* Crisp, slightly off-white for readability */
    margin: 0;
}

.theme-text-box strong {
    color: #FFFFFF;
    font-weight: 700;
}

/* --- Floating Shapes for Theme Title --- */
.theme-flower {
    position: absolute;
    bottom: -185px; 
    left: -290px; 
    width: 130px; 
    transform: rotate(185deg); 
    opacity: 0.6;
    z-index: -1;
}

.theme-flower2 {
    position: absolute;
    bottom: -113px; 
    right: -290px; 
    width: 120px; 
    transform: rotate(15deg); 
    opacity: 0.5;
    z-index: -1;
}

.theme-star {
    position: absolute;
    top: 10px; 
    right: -100px; 
    width: 90px; 
    transform: rotate(-10deg); 
    opacity: 0.9;
    z-index: -1;
}
/* ========================================= */
/* --- HIGHLIGHTED EVENT SECTION --- */
/* ========================================= */

#highlighted-event {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 100px;
}

.event-title-wrapper {
    margin-bottom: 50px !important; 
}

/* --- Floating Shape --- */
.event-flower {
    position: absolute;
    top: -50px; 
    right: -180px; 
    width: 250px; 
    transform: rotate(30deg); 
    opacity: 0.8;
    z-index: -1;
}

/* --- The 2x2 Grid Layout --- */
.event-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Creates 2 equal columns */
    gap: 30px; /* Space between the cards */
    max-width: 1000px;
    width: 100%;
    margin-bottom: -20px; /* Space before the Final Round card */
}

/* --- Card Styling --- */
.event-card {
    background: rgba(255, 255, 255, 0.10); /* Semi-transparent glass */
    backdrop-filter: blur(10px);
    border: 1.3px solid rgba(135, 206, 235, 0.3); /* That soft blue glowing edge from Figma */
    border-radius: 42.5px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* The Cream Title Pill inside the card */
.event-card-header {
    background-color: #F8FAFC; /* Light cream/white */
    padding: 10px 35px;
    border-radius: 30px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    /* Moves it up slightly so it floats near the top border */
    transform: translateY(-69px); 
}

.event-card-header h3 {
    font-family: 'IBM Plex Serif', serif;
    font-style: italic;
    font-size: 20px;
    color: #295147; /* Dark navy text to contrast with the cream pill */
    margin: 0;
    font-weight: 600;
}

.event-card-body p {
    font-size: 13.5px;
    line-height: 1.7;
    color: #E2E8F0;
    margin: 0;
    margin-top: -50px; /* Adds a bit of breathing room from the title pill */
}

/* --- The Centered Final Card --- */
.event-final-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.final-card {
    max-width: 700px; /* Makes it slightly wider than the standard grid cards */
}
/* ========================================= */
/* --- PREVIOUS JUDGES SECTION --- */
/* ========================================= */
#previous-judges {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 100px;
}

.judges-title-wrapper {
    margin-bottom: 20px !important;
}

/* --- Floating Title Shapes --- */
.judges-star-left {
    position: absolute;
    top: -10px;
    left: -120px;
    width: 150px;
    transform: rotate(-15deg);
    opacity: 0.7;
    z-index: -1;
}

.judges-star-right {
    position: absolute;
    bottom: -10px;
    right: -70px;
    width: 80px;
    transform: rotate(20deg);
    opacity: 0.9;
    z-index: -1;
}

/* --- The Staggered List Container --- */
.judges-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    max-width: 800px;
}

/* --- Base rules for a single row --- */
.judge-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.judge-row.align-left {
    justify-content: flex-start;
    padding-right: 15%;
}

.judge-row.align-right {
    flex-direction: row-reverse;
    justify-content: flex-start;
    padding-left: 15%;
}

/* --- Photo Circle --- */
/* --- Photo Circle Container --- */
.judge-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.4);
    background-color: #0E1F38;
    flex-shrink: 0;
    position: relative;
    z-index: 2; /* Ensures the photo stays above your glass pill */
    
    /* Centers the image perfectly before we scale it */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- The Image Fix --- */
.judge-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    
    /* THE MAGIC: Zooms the image in by 20% to hide any transparent borders from Figma */
    transform: scale(1.2); 
}

/* --- Per-judge photo fine-tuning --- */
/* We use translateY instead of object-position to nudge them safely while zoomed in.
   Positive numbers move the image DOWN, negative numbers move it UP. */
#judge-jehian .judge-photo img  { transform: scale(1.25) translateY(1px); } /* Scaled a bit more, nudged down */
#judge-fitri  .judge-photo img  { transform: scale(1.2) translateY(0px); }
#judge-zainal .judge-photo img  { transform: scale(1.18) translateY(3.4px); } /* Nudged up */
#judge-alfina .judge-photo img  { transform: scale(1.2) translateX(1px) translateY(-1.5px); }
/* --- The Glass Text Pill --- */
.judge-info {
    position: relative;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 101px;
    border: none;
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 90px;
    flex: 1;
    z-index: 0;
}

/* --- Gradient Border --- */
.judge-info::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 101px;
    padding: 3px;
    background: linear-gradient(135deg, #FFFFE2 0%, #14497F 100%);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* --- Overlap Positioning --- */
.align-left .judge-info {
    margin-left: -60px;
    padding-left: 80px;
    text-align: left;
}

.align-right .judge-info {
    margin-right: -60px;
    padding-right: 80px;
    text-align: right;
}

/* --- Typography --- */
.judge-info h3 {
    font-family: 'IBM Plex Serif', serif;
    font-style: italic;
    font-size: 20px;
    color: #FFFFE2;
    margin: 0 0 5px 0;
    font-weight: 700;
}

.judge-info p {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #FFFFE2;
    margin: 0;
    line-height: 1.5;
}
/* --- Total Prize Pool Display --- */
.prize-total-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    z-index: 1;
    margin-bottom: 120px;
}

.prize-total-wrapper .prize-badge {
    padding: 15px 60px;
}

.prize-total-wrapper .prize-details p {
    font-size: 42px;
    text-align: center;
}

/* --- Floating Title Shapes --- */
.prize-flower {
    position: absolute;
    top: -10px;
    left: -100px;
    width: 140px;
    transform: rotate(-90deg);
    opacity: 0.95;
    z-index: -1;   
}

.prize-star {
    position: absolute;
    bottom: -40px;
    right: -66px;
    width: 90px;
    transform: rotate(230deg);
    opacity: 0.7;
    z-index: -1;
}

/* --- Giant Background Shapes --- */
.prize-bg-left {
    position: absolute;
    bottom: 400px;
    left: -10px;
    width: 350px;
    transform: rotate(250deg);
    opacity: 0.4;
    z-index: 1;
}

.prize-bg-right {
    position: absolute;
    bottom: 150px;
    right: 50px;
    width: 350px;
    transform: rotate(-80deg);
    opacity: 0.15;
    z-index: 0;
}

/* --- The List Layout --- */
.prize-list {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Space between rows */
    width: 70%;
    max-width: 650px; /* Keeps the grid neatly centered */
    z-index: 1; /* Keeps text above background shapes */
    margin-bottom: 120px; /* Adds breathing room before the footer */
}

.prize-row {
    display: grid;
    grid-template-columns: 220px 1fr; /* Locks the pill size, lets text fill the rest */
    align-items: center; /* Vertically centers the text with the pill */
    gap: 40px;
}

/* --- The Glass Pill (Left Side) --- */
.prize-badge {
    position: relative; /* Crucial for the ::before border */
    background: rgba(255, 255, 255, 0.10); /* Matches the judge pill */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 200px; /* Deep rounded pill shape */
    border: none; /* Removes the old basic border */
    
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Keeps the text perfectly centered */
    z-index: 0;
}

/* --- The Glowing Gradient Border --- */
.prize-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 200px; /* Must match the parent's radius */
    padding: 2px; /* Thickness of the glowing border */
    background: linear-gradient(135deg, #FFFFE2 0%, #14497F 100%);
    
    /* The masking trick */
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    pointer-events: none; /* Prevents the border from blocking clicks/selection */
}

/* --- The Text Inside the Pill --- */
.prize-badge h4 {
    font-family: 'IBM Plex Serif', serif;
    font-style: italic;
    font-size: 18px;
    color: #FFFFE2;
    margin: 0;
    font-weight: 600;
}

/* --- The Prize Text (Right Side) --- */
.prize-details p {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    color: #FFFFE2;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 45px */
}

/* ========================================= */
/* --- REGISTER PAGE SPECIFIC STYLES --- */
/* ========================================= */

#register-hero {
    min-height: 40vh; /* Shorter than the home hero, just for the top area */
    padding-top: 150px; 
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#register-hero .hero-content {
    position: relative;
    width: max-content; /* The Anchor Trick */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

#register-hero .section-title {
    font-size: 64px; /* Adjust to match your Figma exactly */
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

/* --- Floating Shapes --- */
.reg-star {
    top: 20px;
    left: -120px;
    width: 140px;
    transform: rotate(-15deg);
    z-index: 1;
}

.reg-flower {
    top: -60px;
    right: -140px;
    width: 180px;
    transform: rotate(15deg);
    z-index: 1;
}

/* --- Glowing Pill Buttons --- */
.hero-buttons {
    display: flex;
    gap: 30px;
    z-index: 2;
}

.glow-btn {
    /* Replicating the creamy glowing gradient from the design */
    background: linear-gradient(135deg, #FFFFE2 0%, #E2E8DF 100%); 
    border-radius: 50px;
    padding: 15px 40px;
    color: #0A1E29; /* Dark navy text to contrast the light button */
    font-family: 'IBM Plex Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
    
    /* The outer glow effect */
    box-shadow: 0 0 20px rgba(255, 255, 226, 0.3); 
    border: 2px solid rgba(255, 255, 255, 0.6);
    
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glow-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 30px rgba(255, 255, 226, 0.6);
}

/* =============================================
   HERO ENTRANCE ANIMATIONS
   ============================================= */

/* Logo ASCEND — awalnya invisible, fade in dari bawah */
.hero-main-logo {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.hero-main-logo.logo-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Floating shapes — awalnya di luar layar */
.floating-shape.shape-1 {
    opacity: 0;
    transform: translateX(-120px) translateY(-60px);
    transition: opacity 0.8s ease 0.1s, transform 0.8s ease 0.1s;
}
.floating-shape.shape-2 {
    opacity: 0;
    transform: translateX(120px) translateY(-60px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}
.floating-shape.shape-3 {
    opacity: 0;
    transform: translateX(100px) translateY(80px);
    transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}
.floating-shape.shape-4 {
    opacity: 0;
    transform: translateX(-100px) translateY(80px);
    transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s;
}
.floating-shape.shape-7 {
    opacity: 0;
    transform: translateX(60px) translateY(-100px);
    transition: opacity 0.8s ease 0.25s, transform 0.8s ease 0.25s;
}

/* Ketika class .shape-visible ditambahkan → kembali ke posisi asli */
.floating-shape.shape-visible {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

/* Floating idle animation (setelah masuk) */
@keyframes floatIdle {
    0%   { transform: translateY(0px) rotate(0deg); }
    50%  { transform: translateY(-12px) rotate(4deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

.floating-shape.float-idle {
    animation: floatIdle 5s ease-in-out infinite;
}

/* =============================================
   SCROLL FADE OUT — Logo saat scroll
   ============================================= */

/* Logo akan di-handle lewat JS inline style,
   tapi kita set will-change agar smooth */
.hero-main-logo {
    will-change: opacity, transform;
}

/* =============================================
   SCROLL ANIMATIONS — Section lainnya
   ============================================= */

.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.visible,
.fade-left.visible,
.fade-right.visible {
    opacity: 1;
    transform: translate(0, 0);
}

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* Navbar transition */
.navbar {
    transition: transform 0.4s ease, background 0.3s ease;
}

/* Smooth page load */
body {
    transition: opacity 0.4s ease;
}
#prize-pool {
    position: relative;
    text-align: center;
    padding-top: 5rem;
    padding-bottom: 6rem;
}

.prize-list-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 3rem;
}

.prize-grand-card {
    position: relative;
    width: min(1000px, 92%);
    min-height: 420px;
    margin: 0 auto;
    padding: 3.5rem 4rem;
    border-radius: 28px;
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;

    overflow: hidden;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.14),
        rgba(255,255,255,0.07)
    );
    border: 1px solid rgba(255,255,255,0.20);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.18),
        0 0 40px rgba(255, 215, 120, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.18);
}

.prize-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
}

.prize-grand-amount {
    margin: 0;
    font-size: clamp(2.8rem, 5vw, 4.6rem);
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    text-align: center;
    max-width: 100%;
    word-break: break-word;
}

.prize-grand-divider {
    margin: 0.1rem 0;
    font-size: 1.7rem;
    line-height: 1;
    color: rgba(255,255,255,0.75);
}

.prize-grand-usd {
    margin: 0;
    font-size: clamp(1.7rem, 2.8vw, 2.7rem);
    font-weight: 700;
    line-height: 1.15;
    color: #f8e7b0;
}

.prize-grand-note {
    margin-top: 0.8rem;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.82);
}
@media (max-width: 768px) {
    .prize-grand-card {
        width: min(95%, 95%);
        min-height: 420px;
        padding: 2.5rem 1.5rem;
        border-radius: 24px;
    }

    .prize-grand-amount {
        font-size: clamp(2.2rem, 8vw, 3.4rem);
    }

    .prize-grand-usd {
        font-size: clamp(1.4rem, 5vw, 2rem);
    }
}

#prize-pool .container,
#prize-pool.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.prize-list {
    width: 100%;
    display: flex;
    justify-content: center;
}

.prize-grand-amount {
    margin: 0;
    font-size: clamp(2.8rem, 5vw, 4.6rem);
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    text-align: center;
    max-width: 100%;
    word-break: break-word;
}

.prize-grand-amount .currency-prefix {
    font-size: 0.55em;
    font-weight: 700;
    margin-right: 0.15em;
    vertical-align: baseline;
    opacity: 0.95;
    position: relative;
    top: -0.05em;
}

.prize-grand-divider {
    margin: 0.3rem 0;
    font-size: 1.7rem;
    line-height: 1;
    color: rgba(255,255,255,0.75);
}
/* =============================================
   MOBILE RESPONSIVE OVERRIDES
   Tambahkan di paling bawah style.css
   ============================================= */

/* ---- TABLET (max 992px) ---- */
@media (max-width: 992px) {

    /* --- NAVBAR --- */
    .navbar {
        padding: 8px 5%;
    }
    .logo {
        height: 60px;
    }
    .nav-links {
        gap: 20px;
    }
    .nav-links a {
        font-size: 14px;
    }
    .active-nav {
        padding: 8px 18px;
    }

    /* --- GLOBAL CONTAINER --- */
    .container {
        width: 90%;
        padding: 60px 0;
        gap: 40px;
    }

    /* --- ABOUT LAYOUT --- */
    .about-layout {
        flex-direction: column;
        gap: 40px;
        align-items: flex-start;
    }
    .about-title {
        flex: unset;
        width: 100%;
    }
    .about-title h2 {
        font-size: 56px;
    }
    .about-content {
        flex: unset;
        width: 100%;
    }
    .about-subtitle h3 {
        font-size: 28px;
        text-align: left;
    }
    .about-text-box {
        text-align: left;
    }
    .about-text-box p1,
    .about-text-box p2 {
        font-size: 16px;
    }

    /* --- VISION & MISSION --- */
    .sub-heading h3,
    .sub-heading-mission h3 {
        font-size: 32px;
        width: 100%;
    }
    .mission-wrapper {
        flex-direction: column;
        gap: 16px;
    }

    /* --- COLLABORATOR GRID --- */
    .collaborator-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 600px;
    }

    /* --- TIMELINE (already handled above, this reinforces it) --- */
    #timeline {
        margin-top: 80px;
        margin-bottom: 80px;
    }

    /* --- SECTION TITLE --- */
    .section-title {
        font-size: 44px;
        margin-top: 30px;
    }

    /* --- IBCC SUBTITLE --- */
    .ibcc-subtitle {
        width: 90%;
        height: auto;
        font-size: 18px;
    }

    /* --- EVENT GRID --- */
    .event-grid {
        grid-template-columns: 1fr;
    }
    .event-card {
        padding: 50px 30px 30px 30px;
    }

    /* --- PRIZE POOL --- */
    .prize-list {
        width: 90%;
    }
    .prize-row {
        grid-template-columns: 160px 1fr;
        gap: 20px;
    }
    .prize-details p {
        font-size: 22px;
    }

    /* --- JUDGES --- */
    .judge-row.align-left {
        padding-right: 5%;
    }
    .judge-row.align-right {
        padding-left: 5%;
    }
    .judges-list {
        max-width: 100%;
    }

    /* --- FOOTER --- */
    .footer-container {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        text-align: center;
    }
    .footer-contact {
        align-items: center;
    }
}

/* ---- MOBILE (max 768px) ---- */
@media (max-width: 768px) {

    /* --- NAVBAR --- */
    .logo {
        height: 50px;
    }
    .nav-links {
        gap: 12px;
    }
    .nav-links a {
        font-size: 13px;
    }
    .active-nav {
        padding: 6px 14px;
    }
    .nav-hidden {
        top: -100px;
    }

    /* --- HERO --- */
    .hero-main-logo {
        max-width: 85vw;
    }
    /* Sembunyikan floating shapes yang keluar layar di mobile */
    .shape-2,
    .shape-3,
    .shape-7 {
        display: none;
    }
    .shape-1 {
        top: -60px;
        left: -40px;
        width: 100px;
    }
    .shape-4 {
        bottom: -50px;
        right: -40px;
        width: 70px;
    }

    /* --- CONTAINER --- */
    .container {
        width: 92%;
        padding: 50px 0;
        gap: 30px;
    }

    /* --- ABOUT --- */
    .about-title h2 {
        font-size: 44px;
        line-height: 150%;
    }
    .about-subtitle h3 {
        font-size: 24px;
    }
    .about-text-box p1,
    .about-text-box p2 {
        font-size: 14px;
    }
    .about-star {
        width: 70px;
        left: -25px;
    }
    .about-flower {
        width: 100px;
        right: -60px;
    }

    /* --- VISION / MISSION --- */
    .sub-heading h3,
    .sub-heading-mission h3 {
        font-size: 28px;
    }
    .glass-card {
        padding: 20px;
        border-radius: 24px;
    }
    .glass-card::before {
        border-radius: 24px;
    }
    .mission-card {
        font-size: 13px;
    }

    /* --- SECTION TITLE --- */
    .section-title {
        font-size: 36px;
    }

    /* --- COLLABORATOR GRID --- */
    .collaborator-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        max-width: 100%;
    }
    .collab-card {
        min-height: 200px;
        padding: 20px 10px 10px;
        border-radius: 24px;
    }
    .collab-name h4 {
        font-size: 14px;
    }
    .collab-logo {
        max-height: 60px;
    }

    /* --- TIMELINE --- */
    .timeline-wrapper {
        width: 100%;
        padding: 20px 0;
        gap: 30px;
    }
    .timeline-content {
        min-width: 120px;
        padding: 12px 16px;
        text-align: left;
    }
    .timeline-content h3 {
        font-size: 14px;
        min-height: unset;
    }
    .timeline-content p {
        font-size: 12px;
    }

    /* --- IBCC HERO --- */
    #ibcc-hero {
        padding-top: 120px;
        padding-bottom: 60px;
    }
    .ibcc-subtitle {
        font-size: 16px;
        width: 100%;
        height: auto;
        margin-top: -40px;
        margin-bottom: 40px;
        padding: 0 16px;
    }
    .ibcc-hero-title .section-title {
        font-size: 40px;
    }

    /* --- THEME SECTION --- */
    .theme-subtitle {
        font-size: 26px;
    }
    .theme-text-box {
        padding: 30px 24px;
    }

    /* --- EVENT CARDS --- */
    .event-card-header {
        transform: translateY(-50px);
    }
    .event-card-body p {
        margin-top: -35px;
    }

    /* --- JUDGES --- */
    .judge-row {
        flex-direction: column !important;
        align-items: center;
        text-align: center;
        padding: 0 !important;
    }
    .judge-photo {
        width: 90px;
        height: 90px;
    }
    .judge-info {
        border-radius: 24px;
        padding: 16px 24px;
        margin: 0 !important;
        text-align: center !important;
    }
    .judge-info::before {
        border-radius: 24px;
    }
    .align-left .judge-info,
    .align-right .judge-info {
        padding-left: 24px;
        padding-right: 24px;
        text-align: center;
    }
    .judge-info h3 {
        font-size: 16px;
    }
    .judge-info p {
        font-size: 12px;
    }

    /* --- PRIZE POOL --- */
    .prize-row {
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: center;
    }
    .prize-badge {
        width: 100%;
    }
    .prize-details p {
        font-size: 20px;
        text-align: center;
    }
    .prize-list {
        width: 100%;
        gap: 20px;
    }

    /* --- REGISTER PAGE --- */
    .hero-buttons {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }
    .glow-btn {
        font-size: 16px;
        padding: 12px 30px;
    }
    #register-hero .section-title {
        font-size: 40px;
    }

    /* --- FOOTER --- */
    .site-footer-home,
    .site-footer-ibcc,
    .site-footer-register {
        padding: 40px 5%;
    }
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }
    .footer-contact {
        align-items: center;
    }
    .footer-contact p,
    .footer-social p {
        font-size: 15px;
    }
    .site-footer h4 {
        font-size: 20px;
    }
}

/* ---- SMALL MOBILE (max 480px) ---- */
@media (max-width: 480px) {

    .section-title {
        font-size: 28px;
    }
    .about-title h2 {
        font-size: 36px;
    }
    .sub-heading h3,
    .sub-heading-mission h3 {
        font-size: 22px;
    }
    .collaborator-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .collab-name h4 {
        font-size: 12px;
        line-height: 120%;
    }
    .hero-main-logo {
        max-width: 90vw;
    }
    .theme-subtitle {
        font-size: 20px;
    }
    .ibcc-hero-title .section-title {
        font-size: 32px;
    }
    .prize-details p {
        font-size: 18px;
    }
    .glow-btn {
        width: 100%;
        max-width: 280px;
    }
}