/* ===================================================================
   EVENTPRO - About Simple Page Styles (about-simple.css)
   =================================================================== */

/* ===== PAGE HERO ===== */
        .page-hero {
            position: relative;
            padding: 150px 0 70px;
            background: var(--dark);
            text-align: center;
            overflow: hidden;
        }
        .page-hero-bg {
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            object-fit: cover;
            filter: brightness(0.25);
        }
        .page-hero-content { position: relative; z-index: 2; }
        .page-hero h1 { font-size: 2.8rem; font-weight: 900; color: var(--white); margin-bottom: 10px; }
        .page-hero h1 .hl { color: var(--red); }
        .page-hero p { color: var(--text-white-muted); font-size: 1rem; }

/* ===== ABOUT CONTENT ===== */
        .about-section { padding: 80px 0; }
        .about-section h2 { font-size: 2rem; font-weight: 800; color: var(--text-dark); margin-bottom: 16px; }
        .about-section h2 .hl { color: var(--red); }
        .about-section p { line-height: 1.85; margin-bottom: 14px; font-size: 0.95rem; }
        .about-img { width: 100%; height: 350px; object-fit: cover; border-radius: 4px; }

        .about-features { list-style: none; padding: 0; margin-top: 20px; }
        .about-features li { padding: 10px 0; display: flex; align-items: center; gap: 12px; font-size: 0.92rem; border-bottom: 1px solid var(--border); }
        .about-features li:last-child { border: none; }
        .about-features li i { color: var(--red); font-size: 0.8rem; width: 20px; }

/* ===== CONTENT BLOCK ===== */
        .content-block { padding: 60px 0; background: var(--white); }
        .content-area { max-width: 800px; margin: 0 auto; line-height: 1.9; font-size: 0.92rem; }
        .content-area h2 { font-size: 1.6rem; font-weight: 800; color: var(--text-dark); margin-bottom: 14px; }
        .content-area h3 { font-size: 1.2rem; font-weight: 700; color: var(--text-dark); margin: 28px 0 12px; }
        .content-area p { margin-bottom: 14px; color: var(--text-body); }
        .content-area ul { padding-left: 0; list-style: none; margin-bottom: 20px; }
        .content-area ul li { padding: 8px 0; padding-left: 18px; position: relative; border-bottom: 1px solid var(--border); }
        .content-area ul li:last-child { border: none; }
        .content-area ul li::before { content: '•'; color: var(--red); font-weight: bold; position: absolute; left: 0; }
        .content-area strong { color: var(--text-dark); }

/* ===== STATS BAR ===== */
        .stats-bar { background: var(--red); padding: 50px 0; }
        .stat-item { text-align: center; }
        .stat-item h3 { font-size: 2.5rem; font-weight: 900; color: var(--white); margin-bottom: 4px; }
        .stat-item p { color: rgba(255,255,255,0.85); font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; margin: 0; }

/* ===== CTA ===== */
        .cta-section {
            position: relative; padding: 80px 0;
            text-align: center; overflow: hidden;
        }
        .cta-section .cta-bg {
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            object-fit: cover; filter: brightness(0.2);
        }
        .cta-content { position: relative; z-index: 2; }
        .cta-content h2 { font-size: 2.2rem; color: var(--white); margin-bottom: 12px; font-weight: 800; }
        .cta-content h2 .hl { color: var(--red); }
        .cta-content p { color: var(--text-white-muted); font-size: 1rem; margin-bottom: 25px; }
        .btn-red { background: var(--red); color: var(--white); padding: 14px 32px; font-weight: 600; font-size: 0.85rem; border: none; border-radius: 2px; display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s; }
        .btn-red:hover { background: var(--red-dark); transform: translateY(-2px); color: var(--white); }
        .btn-outline-w { background: transparent; color: var(--white); padding: 13px 32px; font-weight: 500; font-size: 0.85rem; border: 1px solid rgba(255,255,255,0.3); border-radius: 2px; display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s; }
        .btn-outline-w:hover { border-color: var(--red); color: var(--red); }

/* ===== RESPONSIVE ===== */
        @media (max-width: 991px) {
            .nav-brand { position: static; }
            .navbar .container { justify-content: space-between; }
            .page-hero h1 { font-size: 2.2rem; }
        }
        @media (max-width: 768px) {
            .page-hero { padding: 120px 0 50px; }
            .page-hero h1 { font-size: 1.9rem; }
            .about-section { padding: 50px 0; }
            .about-section h2 { font-size: 1.7rem; }
            .about-img { height: 250px; }
            .stat-item h3 { font-size: 2rem; }
        }