/* --- GLOBAL ACCESSIBILITY --- */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

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

    background-color: #f4f4f4;

    overflow-x: hidden;

    font-size: 1.2rem !important; /* Pinalaki ang general text size */

}



/* --- HEADER & NAVIGATION --- */

.main-header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 2000;

    display: flex;

    justify-content: center;

    padding: 10px 20px;

}



.logo-nav {

    height: 65px !important; /* Mas malaking Logo */

    width: auto !important;

    background: white;

    border-radius: 50%;

    padding: 10px 15px;

}



.nav-btn {

    padding: 10px 30px !important; /* Mas malaking Buttons */

    font-size: 1.2rem !important;

    font-weight: 800 !important;

    border-radius: 40px !important;

}



/* --- HERO SECTION --- */

.dashboard-header {

    min-height: 95vh !important; /* Halos sakop ang buong screen */

    padding-left: 10% !important;

    display: flex;

    align-items: center;

}



.hero-content h1 {

    font-size: 5.5rem !important; /* Higanteng headline */

    font-weight: 900 !important;

    line-height: 1.1 !important;

    margin-bottom: 30px !important;

}



.hero-content p {

    font-size: 1.6rem !important; /* Mas malinaw na subtitle */

    max-width: 900px !important;

    margin-bottom: 50px !important;

    line-height: 1.7 !important;

}

.hero-content .badge {

    font-size: 4rem !important; /* Mas malinaw na subtitle */

    

}





.btn-signup.px-5.py-3 {

    font-size: 1.4rem !important;

    padding: 20px 60px !important;

    border-radius: 50px !important;

}



/* --- PROGRAM CARDS --- */

h2.fw-bold {

    font-size: 3rem !important; /* TUGON PROGRAMS Header */

    margin-bottom: 40px !important;

}



.program-card {

    padding: 45px !important; /* Mas maluwag na card */

    border-radius: 40px !important;

}



.program-card img {

    height: 250px !important; /* Mas malaking images */

    margin-bottom: 30px !important;

}



.program-card h3 {

    font-size: 1.5rem !important; /* Program Title */

    font-weight: 800 !important;

}



.program-card p {

    font-size: 1.3rem !important; /* Program Details */

}



.apply-btn {

    font-size: 1.3rem !important;

    padding: 20px !important;

    font-weight: 800 !important;

}



/* --- LOGIN & SIGNUP FORMS --- */

.login-container, .auth-card {

    max-width: 600px !important;

    padding: 60px !important;

}



.form-control {

    height: 70px !important; /* Mas mataas na input box */

    font-size: 1.3rem !important;

}



.form-label {

    font-size: 1.4rem !important;

    font-weight: 700 !important;

}



/* --- FOOTER --- */

.main-footer {

    padding: 90px 20px 30px !important;

}



.main-footer h3 {

    font-size: 3rem !important;

}



.main-footer p, .main-footer a {

    font-size: 1.3rem !important;

}

/* Dropdown Container */

.notif-dropdown {

    position: absolute;

    top: 60px;

    right: 0;

    width: 320px;

    background: white;

    border-radius: 15px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.2);

    display: none; /* Hidden by default */

    z-index: 3000;

    overflow: hidden;

    animation: fadeInDown 0.3s ease;

}



@keyframes fadeInDown {

    from { opacity: 0; transform: translateY(-10px); }

    to { opacity: 1; transform: translateY(0); }

}



.notif-header {

    background: #f8f9fa;

    padding: 12px 20px;

    border-bottom: 1px solid #eee;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.notif-header h6 { margin: 0; font-weight: 700; color: #7a0000; }



.notif-body { max-height: 350px; overflow-y: auto; }



.notif-item {

    padding: 15px 20px;

    border-bottom: 1px solid #f1f1f1;

    transition: 0.2s;

    cursor: pointer;

    display: flex;

    gap: 12px;

}



.notif-item:hover { background: #fff5f5; }



.notif-item i { color: #b31217; margin-top: 4px; }



.notif-item p { margin: 0; font-size: 0.85rem; color: #444; line-height: 1.4; }



.notif-item span { font-size: 0.7rem; color: #999; display: block; margin-top: 5px; }



.notif-footer {

    text-align: center;

    padding: 10px;

    background: #fff;

}



.notif-footer a { font-size: 0.8rem; color: #7a0000; text-decoration: none; font-weight: 600; }



 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap');



            /* --- BASIC RESET --- */

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

            body { font-family: 'Poppins', sans-serif; background-color: #f8f9fa; overflow-x: hidden; }



            /* --- GLASSMORPHISM HEADER --- */

            .main-header {

   position: fixed;

    top: 15px; 

    left: 0;

    width: 100%;

    z-index: 2000;

    display: flex;

    justify-content: center;

    padding: 0;

}

           .custom-nav-container {

    display: flex; 

    justify-content: space-between; 

    align-items: center; 

    

    /* PADDING: Ginawang 0 sa taas/baba para mas manipis, 40px sa sides */

    padding: 7px 40px; 

    

    background: linear-gradient(90deg, #7a0000 0%, #a30000 100%); 

    border-radius: 80px; /* Mas mataas na value para sa capsule look */

    box-shadow: 0 5px 15px rgba(0,0,0,0.3);

    border-bottom: 4px solid #b38b2d; /* Gold bottom border */

    

    /* ITO ANG MAGPAPAHABA AT MAGPAPAMANIPIS */

    width: 98%; 

    min-height: 75px; /* Binabaan natin para maging slim gaya ng image */

    max-width: 1800px; /* Limit para sa ultra-wide screens */

}

         /* Siguraduhin nating hindi masyadong malaki ang logo para kasya sa manipis na bar */

.logo-nav { 

    height: 50px; 

    width: auto; 

    background: white; 

    border-radius: 50%; 

    padding: 5px; 

}

     

            

            .nav-right { display: flex; gap: 10px; }

            .nav-btn { 

                padding: 8px 25px; 

                border-radius: 25px; 

                text-decoration: none; 

                font-weight: 700; 

                font-size: 0.85rem; 

                transition: 0.3s;

                border: 2px solid transparent;

            }

            .btn-login { color: rgb(248, 250, 251); border-color: white; }

            .btn-login:hover { background: white; color: #7a0000; }

            

            /* BINABALIK SA ORIGINAL COLOR (GOLD/ORANGE) */

            .btn-signup { background: #eaa207; color: black; }

            .btn-signup:hover { background: white; color: #eaa207; transform: scale(1.05); }



            /* --- HERO SECTION --- */

            .dashboard-header { 

                min-height: 85vh; 

                background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('IMG/COVER.png'); 

                background-size: cover; 

                background-position: center; 

                display: flex; 

                align-items: center; 

                justify-content: center;

                text-align: center;

                color: white;

                border-radius: 0 0 50px 50px;

                padding: 100px 20px 50px;

            }

            .scroll-arrow {

            background: #7a0000;

            color: white;

            border: none;

            width: 50px;

            height: 50px;

            border-radius: 50%;

            cursor: pointer;

            z-index: 10;

            box-shadow: 0 5px 15px rgba(0,0,0,0.2);

        }

            .hero-content h1 { font-size: clamp(2.5rem, 8vw, 4.5rem); font-weight: 800; line-height: 1.1; margin-bottom: 20px; }

            .hero-content p { font-size: 1.1rem; max-width: 700px; margin: 0 auto 30px; opacity: 0.9; }

            

            /* --- FEATURE SECTION --- */

            .feature-section { padding: 80px 7%; }

            .feature-container { 

                display: flex; 

                background: white; 

                border-radius: 30px; 

                box-shadow: 0 20px 40px rgba(0,0,0,0.05); 

                overflow: hidden; 

                min-height: 450px;

                border: 1px solid #eee;

            }

            .feature-image { flex: 1; position: relative; min-height: 300px; }

            .feature-slide { width: 100%; height: 100%; object-fit: cover; position: absolute; opacity: 0; transition: 1s; }

            .feature-slide.active { opacity: 1; position: relative; }

            .feature-text-box { flex: 1; padding: 50px; display: flex; flex-direction: column; justify-content: center; }

            .feature-header { font-size: 2.2rem; font-weight: 800; color: #7a0000; margin-bottom: 20px; }



            /* --- PROGRAM SCROLL SECTION --- */

            .scroll-section-container { position: relative; padding: 0 40px; }

            .program-scroll-wrapper {

                display: flex;

                overflow-x: auto;

                gap: 20px;

                padding: 20px 0 40px;

                scroll-behavior: smooth;

                scrollbar-width: none;

            }

            .program-scroll-wrapper::-webkit-scrollbar { display: none; }

            

            .program-card-container { flex: 0 0 320px; }

            .program-card { 

                background: white; 

                border-radius: 25px; 

                padding: 30px; 

                text-align: center; 

                box-shadow: 0 10px 25px rgba(0,0,0,0.05);

                transition: 0.3s;

                height: 100%;

                border: 1px solid #f0f0f0;

            }

            .program-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(122,0,0,0.1); }

            .program-card img { width: 100%; height: 180px; object-fit: cover; border-radius: 15px; margin-bottom: 20px; }

            .program-card h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; }

            

            /* BINABALIK SA ORIGINAL RED COLOR */

            .apply-btn { 

                background: #7a0000; color: white !important; 

                padding: 12px; border-radius: 12px; 

                text-decoration: none; font-weight: 700; 

                display: block; margin-top: 15px;

            }



            /* --- SCROLL ARROWS --- */

           

            .scroll-arrow:hover { background: #7a0000; scale: 1.1; }

            .arrow-left { left: 0; }

            .arrow-right { right: 0; }



            /* --- EVENT GALLERY --- */

            .gallery-slideshow-container {

                max-width: 1200px; margin: 0 auto;

                border-radius: 35px; overflow: hidden;

                box-shadow: 0 20px 50px rgba(0,0,0,0.2);

            }

            .carousel-item { height: 550px; }

            .carousel-caption { 

                background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px);

                border-radius: 20px; padding: 25px; bottom: 50px; 

            }



            /* --- FOOTER --- */

            .main-footer { background: #1a1a1a; color: white; border-radius: 50px 50px 0 0; padding: 60px 20px 30px; }

            

            @media (max-width: 768px) {

                .feature-container { flex-direction: column; }

                .scroll-section-container { padding: 0; }

                .scroll-arrow { display: none; }

                .program-card-container { flex: 0 0 85%; }

            }

            

        /* --- HERO --- */

        .dashboard-header {

            min-height: 90vh;

            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('IMG/COVER.png');

            background-size: cover;

            background-position: center;

            display: flex;

            align-items: center;

            padding-left: 8%;

            color: white;

            border-radius: 0 0 50px 50px;

        }

        .hero-content h1 { font-size: 5rem; font-weight: 800; line-height: 1; }



        /* --- PROGRAMS SECTION --- */

        .program-scroll-container {

            position: relative;

            padding: 40px 0;

            display: flex;

            align-items: center;

        }



        .program-scroll-wrapper {

            display: flex;

            overflow-x: auto;

            gap: 25px;

            padding: 20px 10px;

            scroll-behavior: smooth;

            scrollbar-width: none; 

        }

        .program-scroll-wrapper::-webkit-scrollbar { display: none; } 



        .program-card {

            flex: 0 0 350px;

            background: white;

            border-radius: 30px;

            padding: 30px;

            text-align: center;

            box-shadow: 0 10px 25px rgba(0,0,0,0.08);

            transition: 0.3s;

            border: 1px solid #eee;

            position: relative;

        }

        .program-card:hover { transform: translateY(-10px); }

        .program-card img { width: 100%; border-radius: 20px; margin-bottom: 20px; }

        

        .program-card h5 {font-weight: 700; color: #333;}

        .program-card p { font-size: 0.95rem; color: #666; height: 50px; overflow: hidden; }

        

        .guide-symbol { 

            font-size: 1.5rem; 

            color: #7a0000; 

            margin-bottom: 10px; 

            display: block; 

        }



        .apply-btn {

            background: #7a0000;

            color: white !important;

            padding: 12px;

            border-radius: 15px;

            display: block;

            text-decoration: none;

            font-weight: 500;

            margin-top: 15px;

            cursor: pointer;

        }



        /* --- NEW ENHANCEMENTS --- */



.section-main-title {

    font-weight: 800;

    color: #7a0000;

    letter-spacing: 1px;

    text-transform: uppercase;

}



/* Step Capsules */

.step-capsule {

    background: white;

    padding: 45px 25px;

    border-radius: 40px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

    position: relative;

    height: 100%;

    transition: all 0.3s ease;

    border: 2px solid transparent;

}



.step-capsule:hover {

    transform: translateY(-10px);

    border-color: #eaa207;

}



.step-number {

    position: absolute;

    top: -15px;

    left: 50%;

    transform: translateX(-50%);

    background: #7a0000;

    color: white;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 800;

}



.step-icon {

    font-size: 3rem;

    color: #7a0000;

    margin-bottom: 25px;

}



/* Live Stats Banner */

.live-stats-banner {

    background: linear-gradient(135deg, #7a0000 0%, #4a0000 100%);

    color: white;

    padding: 70px 0;

    margin: 40px 0;

}



.stat-item h2 {

    font-size: 3.5rem;

    color: #eaa207; /* Gold Numbers */

}



/* FAQ Buttons */

.faq-btn {

    padding: 20px 30px !important;

    font-weight: 600 !important;

    background-color: white !important;

}



.faq-btn:not(.collapsed) {

    color: #7a0000 !important;

    background-color: #fff8f8 !important;

}



/* High Contrast Mode */

body.high-contrast {

    background-color: #000 !important;

    color: #fff !important;

}

body.high-contrast .step-capsule, 

body.high-contrast .live-stats-banner {

    background: #000 !important;

    border: 3px solid #fff !important;

}

/* --- ENHANCED UI ELEMENTS --- */

.section-main-title {

    font-weight: 800;

    color: #7a0000;

    text-transform: uppercase;

    letter-spacing: 1px;

}



/* Step Capsules (The Rounded Steps) */

.step-capsule {

    background: white;

    padding: 50px 30px;

    border-radius: 40px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

    position: relative;

    border: 2px solid transparent;

    transition: 0.3s;

}

.step-capsule:hover {

    transform: translateY(-10px);

    border-color: #eaa207;

}

.step-number {

    position: absolute;

    top: -20px;

    left: 50%;

    transform: translateX(-50%);

    background: #7a0000;

    color: white;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    font-size: 1.2rem;

}

.step-icon {

    font-size: 3rem;

    color: #7a0000;

    margin-bottom: 20px;

}



/* Stats Banner */

.live-stats-banner {

    background: linear-gradient(135deg, #7a0000 0%, #4a0000 100%);

    color: white;

    padding: 60px 0;

}

.stat-num {

    font-size: 3.5rem;

    color: #eaa207;

    font-weight: 800;

}



/* High Contrast Styling */

body.high-contrast {

    background: #000 !important;

    color: #fff !important;

}

body.high-contrast .bg-white, 

body.high-contrast .step-capsule {

    background: #000 !important;

    border: 2px solid #fff !important;

    color: #fff !important;

}

/* --- SIDEBAR (Gemini Style) --- */

.chat-sidebar {

    width: 300px; /* Sukat ng sidebar */

    background: #ffffff;

    border-right: 1px solid #e0e0e0;

    display: flex;

    flex-direction: column;

    padding: 20px 15px;

}



/* Eto yung nagtatago sa sidebar pag cp ang gamit */

@media (max-width: 768px) { 

    .chat-sidebar { display: none; } 

}