@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 768px) {

    /* ===== GLOBAL FIXES ===== */
    body {
        overflow-x: hidden;
    }

    img {
        max-width: 100%;
        height: auto;
    }

 /* --- 1. NAVBAR (LOGO TENGAH & NIPIS) --- */
    .story-navbar {
        height: 60px; /* Nipis & Kemas */
        padding: 0 20px;
        
        display: flex;
        align-items: center; 
        justify-content: center; /* Center logo secara melintang */
        
        position: relative; 
        
        /* Background Kaca */
        background-color: rgba(254, 250, 222, 0.95);
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    /* Logo (Duduk betul-betul tengah) */
    .nav-logo-container {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        height: 100%;
    }

    .nav-logo {
        height: 45px; 
        width: auto;
    }

    /* Hamburger (Duduk KANAN) */
    .hamburger {
        position: absolute;
        right: 20px; /* Rapatkan ke kanan */
        display: block;
        cursor: pointer;
        z-index: 1001;
    }

    .hamburger .bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        background-color: #c32c53; /* Warna Pink */
        border-radius: 3px;
        transition: all 0.3s ease;
    }
    
    /* --- 2. MENU DESIGN BARU (BACKGROUND CERAH & TULISAN BESAR) --- */
    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        
        /* Guna background Cream/Putih (Bukan lagi gradient gelap) */
        background-color: rgba(254, 250, 222, 0.98); 
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px; /* Jarak luas */
        
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
        z-index: 998;
    }

    .nav-menu.active {
        opacity: 1;
        visibility: visible;
    }

    /* --- 3. STYLE TULISAN (YANG LAWA TU) --- */
    /* Kita reset button style lama dan masukkan style baru */
    .nav-btn {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: auto !important;
        padding: 0 !important;
        
        /* Typography Besar & Tebal */
        font-family: 'Lexend Deca', sans-serif;
        font-size: 32px;  /* Saiz Besar */
        font-weight: 800; /* Sangat Tebal */
        color: #c32c53;   /* Warna Pink Gelap */
        text-transform: uppercase;
        letter-spacing: 2px;
        position: relative;
    }

    /* Garis Kuning Bawah (Animasi) */
    .nav-btn::after {
        content: '';
        display: block;
        width: 0;
        height: 6px;
        background: #f5d34b; /* Kuning */
        transition: width 0.3s;
        margin: 5px auto 0;
        border-radius: 4px;
    }

    .nav-btn:hover::after,
    .nav-btn.active::after {
        width: 100%;
    }
    
    .nav-menu li {
        list-style: none;
    }

    /* --- 4. ANIMASI HAMBURGER --- */
    /* Bila menu buka, hamburger jadi 'X' tapi kekal warna PINK (sebab background cerah) */
    .hamburger.active .bar { 
        background-color: #c32c53; /* Kekal pink */
    } 
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }



    /* ===== HEADER ===== */
    .custom-header {
        font-size: 36px;
        padding: 60px 20px 30px;
        -webkit-text-stroke: 1px #fcefc9;
    }

    /* ===== VIDEO SECTION ===== */
    .video-section {
        flex-direction: column;
        gap: 30px;
        padding: 0 20px;
    }

    .video-box {
        width: 100%;
        height: 220px;
    }

    .video-description p {
        font-size: 18px;
        text-align: center;
    }

    /* ===== GALLERY SECTION ===== */
    .gallery-section {
        height: auto;
        padding-bottom: 100px;
    }

    .gallery-title {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 90%;
        margin: 0 auto 30px;
    }

    .gallery-wrapper {
        position: relative;
        height: auto;
    }

    .gallery-box {
        position: relative;
        width: 90%;
        height: 250px;
        margin: 20px auto;
        left: auto;
        top: auto;
    }
	
	
	
	
	
/* ========================
   GALLERY NAV BAR (MOBILE ONLY)
   ======================== */

/* Hide nav by default (desktop) */
.gallery-nav,
.gallery-nav button {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
	@media screen and (max-width: 768px) {
    /* Center the "Meet the Crew" Image Title */
    .main-title-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding: 40px 0 20px 0 !important;
        overflow: hidden;
    }

    .title-img-main {
        width: 85% !important; /* Adjust this to make it larger/smaller */
        max-width: 320px !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Ensure Crew Cards are centered */
    .crew-leader, .crew-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 30px !important;
    }

    .crew-card {
        width: 90% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .member-img {
        width: 100% !important;
        max-width: 300px !important;
        border-radius: 20px;
        cursor: pointer; /* Shows it's clickable */
    }
}
@media screen and (max-width: 768px) {
    /* 1. Main Container Reset */
    .hero-pink-card {
        width: 95% !important;
        max-width: 95% !important;
        margin: 20px auto !important;
        padding: 20px !important;
        height: auto !important; /* Forces box to grow vertically */
        display: block !important; /* Stops desktop flex-side-by-side */
        position: relative !important;
        box-sizing: border-box !important;
        overflow: visible !important; /* Allows container to expand with text */
    }

    /* 2. Inner Wrapper Reset */
    .hero-inner {
        display: flex !important;
        flex-direction: column !important; /* Stacks image on top of text */
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 3. Image Fix */
    .hero-img-container {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 20px !important;
    }

    .hero-img {
        width: 100% !important;
        max-width: 280px !important;
        height: auto !important;
        border-radius: 15px !important;
    }

    /* 4. TEXT CONTAINER RESET (Critical Fix) */
    .hero-text-container {
        width: 100% !important; /* Resets desktop width (e.g. 50%) */
        flex: none !important;    /* Stops flex-box from squashing the text */
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .hero-text {
        width: 100% !important;
        color: #ffffff !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        text-align: center !important; /* Centered is safer for mobile containers */
        white-space: normal !important; /* FORCES text to wrap to the next line */
        word-wrap: break-word !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        display: block !important;
        margin: 0 !important;
    }

    /* 5. Title Alignment */
    .hero-text strong {
        display: block !important;
        width: 100% !important;
        font-size: 18px !important;
        margin-bottom: 10px !important;
        text-align: center !important;
        white-space: normal !important;
    }
	.title-event {
		margin-right: 50px;
	}
}
@media (max-width: 768px) { 
    /* 1. Ensure the section has room at the bottom */
    .gallery-section {
        padding-bottom: 50px !important;
        display: block !important;
        overflow: visible !important;
    }

    /* 2. Grid Container (No more absolute height!) */
    .memory-grid { 
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columns */
        gap: 12px !important; 
        width: 95% !important;
        margin: 0 auto !important;
        height: auto !important; /* This pushes the footer down */
        position: relative !important;
    } 

    /* 3. Reset Items from Absolute to Flow */
    .grid-item { 
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: 180px !important; /* Base height for square items */
        border-radius: 12px; 
        overflow: hidden; 
    } 

    /* 4. Special Sizes (Collage effect) */
    .grid-item.tall { 
        grid-row: span 2 !important; /* Takes up 2 rows */
        height: 372px !important; /* (180px * 2) + 12px gap */
    } 

    .grid-item.wide { 
        grid-column: span 2 !important; /* Takes up 2 columns */
        height: 200px !important;
    } 

    /* 5. Image Scaling */
    .grid-item img { 
        width: 100% !important; 
        height: 100% !important; 
        object-fit: cover !important; 
        display: block; 
    } 
}

   /* ===== EVENT SECTION ===== */
.event-section {
    width: 95%;
    margin: 40px auto;
}

/* ===== EVENT NAV BAR (LONG ROUNDED BOX) ===== */
.event-bar {
    display: flex;
    flex-direction: row;
    align-items: center;

    width: 100%;
    height: 64px;

    background-color: #fefade;
    border: 3px solid #c42754;
    border-radius: 40px;     /* rounded pill */
    overflow: hidden;        /* keeps edges clean */
	margin-left: 5px;
}

/* DIVIDER BETWEEN TABS */
/* DIVIDER BETWEEN TABS */
.divider {
    display: block;
    width: 2px;

    height: 100%;               /* full height of the nav bar */
    background-color: #c42754;

    align-self: stretch;        /* ensures it stretches with flex */
}


/* TABS */
.event-tab {
    flex: 1;
    height: 100%;

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

    font-size: 14px;
    padding: 0;

    color: #c42754;
}

/* ACTIVE TAB */
.event-tab.active {
    background-color: #fefade;
    color: #f5d34b;
}

/* TOUCH FRIENDLY */
.event-tab:active {
    transform: scale(0.98);
}

	
	
	
	
	
	
	
	

@media (max-width: 420px) {

    /* ===== NAV BAR ===== */
    .event-bar {
        height: 58px;
    }

    .event-tab {
        font-size: 12px;
    }

    /* ===== CONTENT ===== */
    .event-content {
        flex-direction: column;
        padding: 15px 10px;        /* smaller padding for phone */
        margin-top: 15px;          /* brings content slightly down under nav bar */
        height: auto;
    }

    .event-image {
        width: 100%;
        height: 180px;             /* slightly smaller for phone */
        border-radius: 15px;       /* optional: rounded corners on mobile */
        object-fit: cover;
    }

    .event-text {
        top: auto;                 /* reset in case of previous positioning */
        left: auto;
        max-width: 100%;
        margin-top: 10px;          /* spacing between image and text */
    }

    .event-text p {
        font-size: 16px;           /* smaller font for mobile */
        line-height: 1.5;
        margin: 10px 0 0;
        text-align: left;
    }
}

	
	
	

@media (max-width: 420px) {

    /* ===== SECTION CANVAS ===== */
    .event-extra-images {
        position: relative;
        width: 100%;
        height: 1000px;
        margin: 0 auto;
        padding: 20px 0;
    }

    /* ===== TITLES ===== */
    #extraTitleTop,
    #extraTitleBottom {
        position: relative;
        top: 40px;
        width: 40%;
        left: 120px;
        transform: none;
    }

    #extraTitleBottom {
        margin-bottom: 20px;
    }

    /* ===== BOX CONTAINER ===== */
    .extra-box-container {
        position: absolute;
    }

    /* ===== MANUAL BOX POSITIONING ===== */
    .extra-box-container:nth-of-type(1) {
        top: 660px;
        left: 120px;
        width: 170px;
        height: 200px;
    }

    .extra-box-container:nth-of-type(2) {
        top: 140px;
        left: 120px;
        width: 170px;
        height: 200px;
    }

    .extra-box-container:nth-of-type(3) {
        top: 400px;
        left: 120px;
        width: 170px;
        height: 200px;
    }

    .extra-box-container:nth-of-type(4) {
        top: 920px;
        left: 120px;
        width: 170px;
        height: 200px;
    }

    .extra-box-container:nth-of-type(5) {
        top: 1180px;
        left: 120px;
        width: 170px;
        height: 200px;
    }

    .extra-box-container:nth-of-type(6) {
        top: 1440px; /* FIXED from 5600px */
        left: 120px;
        width: 170px;
        height: 200px;
    }

    /* ===== BACKGROUND BOX (MANUAL CONTROL ENABLED) ===== */
    .extra-box-bg {
        position: absolute;
        border-radius: 12px;
        background-color: #c42754;
    }

    /* ===== MANUAL BG CONTROL PER BOX ===== */
    .extra-box-container:nth-of-type(1) .extra-box-bg {
        top: -10px;
        left: -10px;
        width: 190px;
        height: 230px;
    }

    .extra-box-container:nth-of-type(2) .extra-box-bg {
        top: -10px;
        left: -10px;
        width: 190px;
        height: 230px;
    }

    .extra-box-container:nth-of-type(3) .extra-box-bg {
        top: -10px;
        left: -10px;
        width: 190px;
        height: 230px;
    }

    .extra-box-container:nth-of-type(4) .extra-box-bg {
        top: -10px;
        left: -10px;
        width: 190px;
        height: 230px;
    }

    .extra-box-container:nth-of-type(5) .extra-box-bg {
        top: -10px;
        left: -10px;
        width: 190px;
        height: 230px;
    }

    .extra-box-container:nth-of-type(6) .extra-box-bg {
        top: -10px;
        left: -10px;
        width: 190px;
        height: 230px;
    }

    /* ===== IMAGE BOX ===== */
    .extra-box {
        position: absolute;
        top: 6px;
        left: 6px;
        width: calc(100% - 12px);
        height: calc(100% - 12px);
        overflow: hidden;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .extra-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .extra-box:hover {
        transform: none;
        box-shadow: none;
        transition: none;
    }

    /* ===== TEXT ===== */
    .extra-box-text {
        position: absolute;
        color: #fefade;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 700;
        font-size: 12px;
        line-height: 1.2;
        max-width: 140px;
        z-index: 10;
        pointer-events: none;
    }

    .extra-box-container:nth-of-type(1) .extra-box-text { bottom: 15px; left: 10px; }
    .extra-box-container:nth-of-type(2) .extra-box-text { bottom: 15px; left: 10px; }
    .extra-box-container:nth-of-type(3) .extra-box-text { bottom: 15px; left: 10px; }
    .extra-box-container:nth-of-type(4) .extra-box-text { bottom: 15px; left: 10px; }
    .extra-box-container:nth-of-type(5) .extra-box-text { bottom: 15px; left: 10px; }
    .extra-box-container:nth-of-type(6) .extra-box-text { bottom: 15px; left: 10px; }

    /* ===== YEAR NAV ===== */
    .year-nav {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
        z-index: 60;
    }

    .year-nav button {
        padding: 6px 12px;
        font-size: 12px;
    }
}
	@media screen and (max-width: 768px) {
    /* 1. Fix Tab Overlap & Spacing */
    .tahap-tabs {
        display: flex !important;
        position: relative !important; /* Forces it into the document flow */
        top: 0 !important;
        justify-content: center !important;
        gap: 12px !important;
        margin: 20px auto 40px auto !important; /* Space above and below tabs */
        padding: 10px !important;
        width: 100% !important;
        z-index: 10;
    }

    .tahap-btn {
        flex: 1 !important;
        max-width: 140px !important;
        padding: 10px 5px !important;
        font-size: 14px !important;
        border-radius: 20px !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    /* 2. Fix Header Visibility (Year 1, Year 2, etc.) */
    .year1-header, .year2-header, .year3-header, 
    .year4-header, .year5-header, .year6-header {
        display: block !important; /* Change from flex to block for safer rendering */
        width: 100% !important;
        text-align: center !important;
        margin-top: 50px !important; /* Space after previous section */
        margin-bottom: 20px !important;
        clear: both; /* Prevents floating element overlap */
    }

    .year1-title-img, .year2-title-img, .year3-title-img,
    .year4-title-img, .year5-title-img, .year6-title-img {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 70% !important; /* Slightly larger for better mobile visibility */
        max-width: 250px !important;
        height: auto !important;
    }

    /* 3. Podium Container & Stack Logic */
    .podium-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 25px !important;
        width: 100% !important;
        padding: 10px !important;
        margin-bottom: 60px !important; /* Space before next Year header */
    }

    /* Order: Johan first, then Naib Johan, then 3rd */
    .first-place { order: 1 !important; }
    .second-place { order: 2 !important; }
    .third-place { order: 3 !important; }

    .podium-column {
        width: 90% !important;
        max-width: 350px !important;
    }

    .podium-box {
        width: 100% !important;
        padding: 20px !important;
        border-radius: 25px !important;
        box-sizing: border-box !important;
    }

    /* 4. Image & Text Cleanup */
    .podium-img-wrapper {
        width: 100% !important;
        height: 250px !important; /* Fixed height for consistency */
        border-radius: 15px !important;
        margin-bottom: 15px !important;
    }

    .podium-img-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .podium-text {
        font-size: 20px !important;
        margin-top: 10px !important;
    }
}
@media (max-width: 768px) { 
    /* 1. Ensure the section has room at the bottom */
    .gallery-section {
        padding-bottom: 50px !important;
        display: block !important;
        overflow: visible !important;
    }

    /* 2. Grid Container (No more absolute height!) */
    .memory-grid { 
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columns */
        gap: 12px !important; 
        width: 95% !important;
        margin: 0 auto !important;
        height: auto !important; /* This pushes the footer down */
        position: relative !important;
    } 

    /* 3. Reset Items from Absolute to Flow */
    .grid-item { 
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: 180px !important; /* Base height for square items */
        border-radius: 12px; 
        overflow: hidden; 
    } 

    /* 4. Special Sizes (Collage effect) */
    .grid-item.tall { 
        grid-row: span 2 !important; /* Takes up 2 rows */
        height: 372px !important; /* (180px * 2) + 12px gap */
    } 

    .grid-item.wide { 
        grid-column: span 2 !important; /* Takes up 2 columns */
        height: 200px !important;
    } 

    /* 5. Image Scaling */
    .grid-item img { 
        width: 100% !important; 
        height: 100% !important; 
        object-fit: cover !important; 
        display: block; 
    } 
}
/* ========================== COLLAB SECTION ========================== */ 
.collaboration-section { 
    height: auto;
	 margin-top: -200px;
} 

.collab-box { 
    position: relative; 
    height: auto; 
    padding: 30px; 
} 

.collab-text { 
    position: relative; 
    top: 0; 
    right: 0; 
    text-align: center; 
    font-size: 20px; 
} 

/* ========================== MANUAL FLOATING IMAGES ========================== */ 
.manual-image-wrapper { 
    position: relative; /* anchor for absolute images */ 
    width: 100%; 
    height: 200px; /* adjust wrapper height manually */ 
} 

/* BASE IMAGE STYLE */ 
.manual-img { 
    position: absolute; /* fully controllable */ 
    object-fit: cover; 
    border-radius: 16px; 
} 

/* IMAGE 1 — FULL CONTROL */ 
.img-1 { 
    position: relative; /* allows manual movement */ 
    width: 27px; /* control width freely */ 
    height: auto; /* keep full aspect ratio */ 
    top: 87px; /* manual vertical adjustment */ 
    left: 15px; /* manual horizontal adjustment */ 
    display: inline-block; /* stays in flow */ 
    margin: 5px; /* optional spacing */ 
} 

/* IMAGE 2 — FULL CONTROL */ 
.img-2 { 
    position: relative; 
    width: 90px; 
    height: auto; 
    top: 90px; 
    left: 250px; 
    display: inline-block; 
    margin: 5px; 
} 

/* IMAGE 3 — FULL CONTROL */ 
.img-3 { 
    position: relative; 
    width: 27px; 
    height: auto; 
    top: 50px; 
    left: 60px; 
    display: inline-block; 
    margin: 5px; 
} 

/* IMAGE 4 — FULL CONTROL */ 
.img-4 { 
    position: relative; /* allows manual movement */ 
    width: 120px; /* control size freely */ 
    height: auto; /* keep natural aspect ratio */ 
    top: 30px; /* manual vertical adjustment */ 
    left: 220px; /* manual horizontal adjustment */ 
    margin: 10px; /* optional spacing */ 
    display: inline-block; /* stays in flow */ 
} 

@media screen and (max-width: 768px) {

    /* 1. Reset Container Utama */
    .collaboration-section {
        padding: 40px 20px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 2. KOTAK PINK (Makeover jadi 'Card' Cantik) */
    .collab-box {
        /* PENTING: Override width 250% desktop tu */
        width: 100% !important; 
        max-width: 100% !important;
        height: auto !important; /* Biar tinggi ikut isi kandungan */
        
        /* Susun Menegak (Atas ke Bawah) */
        display: flex;
        flex-direction: column; 
        align-items: center;
        justify-content: center;
        
        /* Padding dalam kotak */
        padding: 30px 20px;
        
        /* Bagi curve sikit bucu dia */
        border-radius: 25px;
        
        /* Shadow supaya nampak timbul */
        box-shadow: 0 10px 25px rgba(196, 39, 84, 0.3);
        
        /* Pastikan background pink kekal */
        background-color: #c42754; 
        margin: 0 auto;
    }

    /* 3. Susun Isi Dalam (Logo & Social) */
    .footer-content-wrapper {
        flex-direction: column; /* Susun menegak */
        gap: 25px; /* Jarak antara logo partner & social icons */
        width: 100%;
        align-items: center;
    }

    /* --- BAHAGIAN PARTNER LOGOS (Atas) --- */
    .collab-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
    }

    /* Tajuk "In Collaboration With" */
    .collab-title-img {
        width: 180px !important; /* Saiz sederhana */
        height: auto;
        margin-bottom: 15px; /* Jarak dengan logo bulat */
    }

    /* Bekas Logo Bulat-Bulat */
    .partner-logos {
        display: flex;
        flex-wrap: wrap; /* Kalau tak muat, turun bawah */
        justify-content: center;
        gap: 15px; /* Jarak antara logo */
        width: 100%;
    }

    .partner-logos img {
        height: 50px !important; /* Besar sikit supaya jelas */
        width: auto;
        background-color: white; /* Letak background putih pada logo */
        border-radius: 50%; /* Jadikan bulat */
        padding: 5px; /* Ruang dalam logo */
        box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Shadow sikit */
    }

    /* --- BAHAGIAN SOCIAL ICONS (Bawah) --- */
    .social-icons {
        display: flex;
        justify-content: center;
        gap: 20px;
        width: 100%;
        margin-top: 10px;
        padding-top: 20px;
        border-top: 1px solid rgba(255,255,255,0.3); /* Garis putih nipis pemisah */
    }

    .social-icons img {
        width: 45px !important; /* Ikon besar sikit senang tekan */
        height: 45px !important;
        margin: 0;
        transition: transform 0.2s;
    }
    
    /* Effect bila tekan ikon di phone */
    .social-icons img:active {
        transform: scale(0.9);
    }
    
    /* Footer Copyright */
    .site-footer {
        margin-top: 0;
        padding-bottom: 20px;
    }
    
    .site-footer p {
        color: #c42754;
        font-size: 12px;
        margin-top: 15px;
    }

} /* <--- Tanda tutup kurungan ini MENJAMIN desktop takkan kacau */