/* =====================
   HERO ABOUT
===================== */
.about-hero {
    background-image: url("../img/hero-about-1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: relative;
    padding: 120px 0;
    color: #fff;
}

.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65); /* biar teks kebaca */
}

.about-hero-content {
    position: relative;
    max-width: 720px;
}

.about-hero h1 {
    font-weight: 800;
    margin-bottom: 16px;
}


/* =====================
   STORY SECTION
===================== */
.about-story {
    background-image: url("../img/hero-about-2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding: 100px 0;
    color: #fff;
}

.about-story::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
}

.about-story .container {
    position: relative;
}


/* =====================
   FUN FACTS
===================== */
.chili-facts {
    /* background-image: url("../img/chili-bg.jpg"); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: relative;
    padding: 100px 0;
    color: #fff;
}

.chili-facts::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgba(58,0,0,.85), rgba(0,0,0,.95));
}

.chili-facts .container {
    position: relative;
}


/* =====================
   FACT CARD
===================== */
.fact-card {
    background: linear-gradient(135deg, #a36b00, #704400);
    border-radius: 16px;
    padding: 28px;
    height: 100%;
    box-shadow: 0 10px 30px rgba(255,170,0,.3);
}

.fact-card h4 {
    font-weight: 800;
    margin-bottom: 10px;
}