:root { --bg-color: #F8F9FA; --menu-color: #0D6EFD; --button-color: #495057; --card-color: #FFFFFF; --accent-color: #FFC107; --text-color: #000000; --dark-green: #1F5E2E; --muted-text: #5f6772; --border-soft: rgba(13, 110, 253, 0.08); --shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.08); --radius-xl: 24px; --radius-lg: 18px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background: var(--bg-color); color: var(--text-color); line-height: 1.7; padding-top: 92px; } img { max-width: 100%; display: block; } .section-space { padding-top: 4rem; padding-bottom: 4rem; } .section-space-sm { padding-top: 2rem; padding-bottom: 2rem; } .bg-light-custom { background: var(--bg-color); } .skip-link { position: absolute; left: 16px; top: 16px; z-index: 9999; background: #fff; color: #000; padding: 10px 14px; border-radius: 10px; } .site-header .navbar { background: var(--menu-color); } .navbar-brand { color: #fff !important; font-weight: 800; letter-spacing: 1px; } .brand-word { font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1; } .brand-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 50%; background-color: transparent; padding: 2px; box-shadow: 0 6px 16px rgba(0,0,0,0.18); } .navbar-toggler { filter: brightness(0) invert(1); } .nav-link, .dropdown-toggle, .dropdown-item { font-weight: 600; } .nav-link { color: rgba(255,255,255,0.95) !important; padding-left: 0.95rem !important; padding-right: 0.95rem !important; } .nav-link:hover, .nav-link:focus, .dropdown-item:hover { color: var(--accent-color) !important; } .dropdown-menu { border: none; border-radius: 16px; box-shadow: var(--shadow-soft); } .hero-section { position: relative; min-height: calc(100vh - 92px); overflow: hidden; } .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.48) 42%, rgba(0,0,0,0.20) 100%); z-index: 1; } .hero-content { z-index: 2; color: #fff; } .hero-content h1 { font-size: clamp(2.2rem, 5vw, 4.4rem); font-weight: 800; line-height: 1.1; margin-bottom: 1rem; } .hero-content p { font-size: 1.08rem; max-width: 650px; color: rgba(255,255,255,0.92); } .section-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: #C8102E; color: #fff; padding: 0.5rem 0.95rem; border-radius: 999px; font-size: 0.9rem; font-weight: 700; } .section-heading h2, .section-heading h3 { font-weight: 800; margin-top: 1rem; margin-bottom: 0.75rem; } .section-heading p { color: var(--muted-text); max-width: 760px; margin-left: auto; margin-right: auto; } .btn-dark-main { background: var(--button-color); color: #fff; border: 1px solid var(--button-color); } .btn-dark-main:hover { background: #343a40; color: #fff; } .custom-carousel, .announcement-card, .corp-card, .donation-card, .visit-card, .info-panel, .contact-box, .media-card, .ad-box { border-radius: var(--radius-lg); } .custom-carousel { box-shadow: var(--shadow-soft); } .slider-image { height: clamp(280px, 60vw, 650px); object-fit: cover; } .carousel-indicators [data-bs-target] { width: 12px; height: 12px; border-radius: 50%; } .media-stack .logo-showcase { background: #fff; min-height: 100%; padding: 2rem; } .logo-showcase-image { max-width: 220px; } .content-list-item { display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: 0.9rem; } .content-list-item i { color: var(--accent-color); margin-top: 0.25rem; } .ad-box { background: linear-gradient(135deg, #ffffff 0%, #fff3cd 100%); padding: 2rem; } .ad-box.secondary { background: linear-gradient(135deg, #e9f2ff 0%, #ffffff 100%); } .announcement-card, .corp-card, .donation-card, .visit-card, .info-panel, .contact-box { background: var(--card-color); overflow: hidden; box-shadow: var(--shadow-soft); } .card-cover { width: 100%; height: 240px; object-fit: cover; } .announcement-card h3, .corp-card h3, .donation-card h3, .visit-card h3, .info-panel h2, .contact-box h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: 0.9rem; } .read-more { text-decoration: none; font-weight: 700; color: var(--menu-color); } .read-more:hover { color: #0b5ed7; } .sponsor-marquee { position: relative; overflow: hidden; padding: 0.5rem 0; } .sponsor-track { display: flex; gap: 1.5rem; width: max-content; animation: marquee 25s linear infinite; } .sponsor-item { min-width: 180px; height: 100px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: center; padding: 1rem; } .sponsor-item img { max-height: 56px; width: auto; object-fit: contain; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .mini-slider img { height: 190px; object-fit: cover; } .money-meta { display: grid; gap: 0.35rem; color: var(--muted-text); font-size: 0.95rem; } .donation-progress { height: 12px; background: #dbe4ea; border-radius: 999px; overflow: hidden; } .donation-progress .progress-bar { width: 0; background: linear-gradient(90deg, var(--dark-green), #3b8b52); transition: width 1.4s ease; } .percent-label { font-weight: 800; color: var(--dark-green); } .donate-btn { background: var(--dark-green); color: #fff; font-weight: 700; border-radius: 12px; } .donate-btn:hover { background: #174623; color: #fff; } .date-pill { display: inline-block; background: rgba(13, 110, 253, 0.08); color: var(--menu-color); padding: 0.4rem 0.8rem; border-radius: 999px; font-weight: 700; font-size: 0.9rem; } .info-panel, .contact-box { padding: 2rem; } .contact-list li { display: flex; gap: 0.8rem; margin-bottom: 1rem; align-items: flex-start; } .contact-list i { color: var(--menu-color); margin-top: 0.3rem; } .form-control { border-radius: 14px; border: 1px solid rgba(0,0,0,0.08); } .form-control:focus { border-color: var(--menu-color); box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15); } .custom-accordion .accordion-item { border: none; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-soft); margin-bottom: 1rem; } .custom-accordion .accordion-button { font-weight: 700; } .custom-accordion .accordion-button:not(.collapsed) { background: rgba(13, 110, 253, 0.08); color: var(--menu-color); } .site-footer { background: #ffffff; border-top: 1px solid var(--border-soft); font-weight: 600; } @media (max-width: 1199.98px) { .navbar-collapse { transparent important; margin-top: 1rem; padding: 1rem; border-radius: 18px; } } @media (max-width: 991.98px) { body { padding-top: 84px; } .hero-section { min-height: 86vh; } .hero-content h1 { font-size: clamp(2rem, 8vw, 3rem); } .card-cover { height: 220px; } } @media (max-width: 767.98px) { .section-space { padding-top: 3rem; padding-bottom: 3rem; } .brand-logo { width: 38px; height: 38px; } .brand-word { font-size: 1.3rem; } .hero-buttons .btn { width: 100%; } .card-cover, .mini-slider img { height: 200px; } .ad-box, .info-panel, .contact-box { padding: 1.5rem; } nsform:translateX(-100%); } }