* { box-sizing: border-box; }
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            scroll-behavior: smooth;
        }

        /* ===== NAVBAR ===== */
        .navbar {
            background: linear-gradient(90deg, #0f4c75, #1d72b2);
            border-bottom: solid 1px #0d3b66;
        }
        .navbar a { color: white !important; font-weight: 500; }
        .navbar-brand img { height: 45px; }
        .navbar-nav .nav-link:hover { color: #ffe082 !important; }

        /* ===== NOTICE TICKER ===== */
        .notice-ticker {
            background: #c62828;
            color: #fff;
            padding: 7px 0;
            overflow: hidden;
        }
        .notice-ticker .ticker-label {
            background: #b71c1c;
            font-weight: 700;
            padding: 4px 14px;
            margin-right: 8px;
            font-size: 12px;
            letter-spacing: 1px;
            display: inline-block;
            vertical-align: middle;
        }
        .notice-ticker marquee {
            display: inline;
            font-size: 13px;
            vertical-align: middle;
        }
        .notice-ticker marquee a { color: #ffe082; text-decoration: underline; }

        /* ===== HERO SLIDER ===== */
        .hero-slider .carousel-item {
            height: 80vh;
            background-size: cover;
            background-position: center;
            position: relative;
        }
        .hero-slider .carousel-item::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.48);
        }
        .hero-slider .slide-caption {
            position: absolute;
            z-index: 5;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            width: 80%;
            color: #fff;
        }
        .hero-slider .slide-caption h1 {
            font-size: 3rem;
            font-weight: bold;
            text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
            margin-bottom: 15px;
        }
        .hero-slider .slide-caption p {
            font-size: 1.15rem;
            text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
            margin-bottom: 20px;
        }
        .btn-hero {
            background: transparent;
            border: 2px solid #fff;
            color: #fff;
            padding: 10px 32px;
            border-radius: 30px;
            font-size: 0.95rem;
            font-weight: 600;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-block;
        }
        .btn-hero:hover { background: #fff; color: #0f4c75; }
        .hero-slider .carousel-indicators [data-bs-target] {
            width: 11px; height: 11px;
            border-radius: 50%;
        }

        /* ===== SECTION STYLE ===== */
        .section-title h2 { font-weight: bold; font-size: 28px; }
        .section-title span { color: #0f4c75; }
        .divider-line {
            width: 55px; height: 4px;
            background: linear-gradient(90deg, #0f4c75, #1d72b2);
            border-radius: 3px;
            margin: 8px auto 18px;
        }

        /* ===== CARDS ===== */
        .card {
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 2px 6px rgba(0,0,0,0.09);
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 18px rgba(0,0,0,0.16);
        }

        /* ===== NOTICE BOARD ===== */
        .notice-board-area { padding: 60px 0; background: #fff8e1; }
        .notice-item {
            background: #fff;
            border-left: 5px solid #0f4c75;
            border-radius: 0 10px 10px 0;
            padding: 14px 18px;
            margin-bottom: 14px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.07);
            transition: border-color 0.3s;
        }
        .notice-item:hover { border-color: #c62828; }
        .notice-item .n-date { font-size: 12px; color: #999; margin-bottom: 3px; }
        .notice-badge {
            display: inline-block;
            font-size: 10px; font-weight: 700;
            padding: 2px 8px; border-radius: 20px;
            margin-right: 6px; color: #fff;
            background: #0f4c75;
        }
        .notice-badge.new-badge { background: #c62828; }
        .notice-badge.event-badge { background: #2e7d32; }
        .notice-badge.update-badge { background: #e65100; }
        .notice-item h6 { margin: 4px 0; color: #0f4c75; font-weight: 700; font-size: 15px; }
        .notice-item p { margin: 0; font-size: 13px; color: #555; }

        /* ===== ABOUT ===== */
        .about-area { padding: 60px 0; background: #f4f8ff; }

        /* ===== GALLERY ===== */
        .gallery-area { padding: 60px 0; background: #eef4ff; }
        .gallery-tabs .nav-link {
            color: #0f4c75; font-weight: 600;
            border-radius: 25px; padding: 7px 22px;
            border: 2px solid transparent;
        }
        .gallery-tabs .nav-link.active {
            background: #0f4c75; color: #fff;
            border-color: #0f4c75;
        }
        .gallery-tabs .nav-link:hover:not(.active) { border-color: #0f4c75; }
        .g-img-wrap {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            cursor: pointer;
        }
        .g-img-wrap img {
            width: 100%; height: 195px;
            object-fit: cover;
            transition: transform 0.4s;
            display: block;
        }
        .g-img-wrap:hover img { transform: scale(1.08); }
        .g-overlay {
            position: absolute; inset: 0;
            background: rgba(15,76,117,0.55);
            display: flex; align-items: center; justify-content: center;
            opacity: 0; transition: opacity 0.3s;
        }
        .g-img-wrap:hover .g-overlay { opacity: 1; }
        .g-overlay i { color: #fff; font-size: 1.8rem; }
        .video-card { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
        .video-card iframe { width: 100%; height: 210px; border: none; display: block; }
        .video-label {
            background: #0f4c75; color: #fff;
            padding: 9px 14px; font-size: 13px; font-weight: 600;
        }

        /* ===== CERTIFICATES ===== */
        .cert-area { padding: 60px 0; }
        .cert-area .cert-card {
            background: #eef5ff;
            border: 1px solid #c5d8f5;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: all 0.3s;
        }
        .cert-area .cert-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 18px rgba(0,0,0,0.15);
        }
        .cert-area .cert-card img {
            width: 100%; height: 220px; object-fit: cover;
            transition: transform 0.4s;
        }
        .cert-area .cert-card:hover img { transform: scale(1.04); }

        /* Upload Box */
        .cert-upload-box {
            background: linear-gradient(135deg, #0f4c75, #1d72b2);
            border-radius: 16px;
            padding: 40px 35px;
            color: #fff;
            margin-top: 45px;
        }
        .cert-upload-box h4 { font-weight: 700; }
        .cert-upload-form {
            background: #fff;
            border-radius: 12px;
            padding: 28px 25px;
            color: #333;
        }
        .cert-upload-form label { font-weight: 600; color: #0f4c75; font-size: 14px; }
        .cert-upload-form .form-control,
        .cert-upload-form .form-select { font-size: 14px; border-radius: 8px; }
        .btn-upload-cert {
            background: linear-gradient(90deg, #0f4c75, #1d72b2);
            color: #fff; border: none;
            padding: 10px 28px; border-radius: 30px;
            font-weight: 600; font-size: 14px;
            transition: opacity 0.3s; cursor: pointer;
        }
        .btn-upload-cert:hover { opacity: 0.85; }

        /* ===== SOCIAL MEDIA ===== */
        .social-area {
            padding: 60px 0;
            background: linear-gradient(135deg, #0a3352, #0f4c75, #1d72b2);
            color: #fff;
        }
        .social-area .section-title h2 { color: #fff; }
        .social-area .section-title span { color: #ffe082; }
        .social-area .divider-line { background: rgba(255,255,255,0.4); }
        .s-card {
            background: rgba(255,255,255,0.10);
            border: 1px solid rgba(255,255,255,0.22);
            border-radius: 16px;
            padding: 28px 18px;
            text-align: center;
            color: #fff;
            text-decoration: none;
            display: block;
            transition: all 0.3s;
        }
        .s-card:hover {
            background: rgba(255,255,255,0.22);
            transform: translateY(-7px);
            color: #fff;
            box-shadow: 0 10px 25px rgba(0,0,0,0.25);
        }
        .s-card i { font-size: 2.6rem; display: block; margin-bottom: 10px; }
        .s-card span { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; display: block; }
        .s-card small { font-size: 11px; opacity: 0.75; margin-top: 3px; display: block; }
        .s-fb i   { color: #90caf9; }
        .s-ig i   { color: #f48fb1; }
        .s-wa i   { color: #a5d6a7; }
        .s-yt i   { color: #ef9a9a; }
        .s-li i   { color: #80deea; }

        /* ===== TESTIMONIALS ===== */
        .testimonials-area { padding: 60px 0; background: #f9f9f9; }

        /* ===== CONTACT ===== */
        .contact-area { padding: 60px 0; }
        .contact-box {
            background: #f4f8ff;
            border-radius: 12px;
            padding: 28px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.09);
        }
        .contact-sm-btn {
            display: inline-flex; align-items: center;
            gap: 6px; padding: 7px 16px;
            border-radius: 20px; font-size: 13px;
            font-weight: 600; text-decoration: none;
            color: #fff; transition: opacity 0.3s;
        }
        .contact-sm-btn:hover { opacity: 0.85; color: #fff; }

        /* ===== MAP ===== */
        .map-wrap {
            width: 100%; height: 440px;
            border-radius: 14px; overflow: hidden;
            box-shadow: 0 4px 18px rgba(0,0,0,0.18);
            margin-top: 45px;
        }
        .map-wrap iframe { width: 100%; height: 100%; border: none; }

        /* ===== FOOTER ===== */
        footer { background: #111; color: #bbb; padding: 35px 0 14px; }
        .footer-links a {
            color: #999; text-decoration: none;
            font-size: 13px; display: block;
            margin-bottom: 5px; transition: color 0.3s;
        }
        .footer-links a:hover { color: #1d72b2; }
        .footer-sm a {
            display: inline-flex; align-items: center; justify-content: center;
            width: 36px; height: 36px; border-radius: 50%;
            background: rgba(255,255,255,0.1);
            color: #fff; font-size: 15px;
            text-decoration: none; margin: 0 4px;
            transition: background 0.3s;
        }
        .footer-sm a:hover { background: #1d72b2; }
        .footer-bottom {
            border-top: 1px solid #2a2a2a;
            padding-top: 14px; margin-top: 22px;
            font-size: 13px; text-align: center; color: #666;
        }
        .footer-bottom a { color: #1d72b2; text-decoration: none; }

        /* ===== LIGHTBOX ===== */
        .lbx-overlay {
            display: none; position: fixed; inset: 0;
            background: rgba(0,0,0,0.9);
            z-index: 9999; align-items: center; justify-content: center;
        }
        .lbx-overlay.open { display: flex; }
        .lbx-overlay img {
            max-width: 92vw; max-height: 86vh;
            border-radius: 8px;
        }
        .lbx-close {
            position: fixed; top: 18px; right: 26px;
            font-size: 2.4rem; color: #fff;
            background: none; border: none;
            cursor: pointer; z-index: 10000; line-height: 1;
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            .hero-slider .carousel-item { height: 56vh; }
            .hero-slider .slide-caption h1 { font-size: 1.8rem; }
            .hero-slider .slide-caption p { font-size: 0.9rem; }
        }