/* ===============================
   COLOR THEME
================================ */
:root {
    --header-gradient: linear-gradient(to right, #d4b45c, #a45a1abe, #5a2a00);
    --navbar-gradient: linear-gradient(135deg, #2e0b03, #6b1414, #d97706);
    --footer-gradient: linear-gradient(135deg, #1a0702, #3b1a05, #8b5a20);
    --bg-gradient: linear-gradient(to bottom, #f2d6a0, #d4aa6a, #b07c3a);
    --card-bg: linear-gradient(145deg, #f3e0c3, #d4b07a);
    --text-dark: #1a0b05;
    --text-light: #fdf3e7;
    --saffron: #d97706;
    --gold: #b8860b;
}

/* ===============================
   HISTORY SECTION
================================ */
.history-section {
    background: linear-gradient(
        145deg,
        #fff6e1,
        #f2d6a0,
        #e2b973
    );
    border-radius: 16px;
    padding: 45px 30px;
    margin: 40px auto;
    max-width: 1200px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 12px 35px rgba(90, 42, 0, 0.25),
        inset 0 0 0 2px rgba(184, 134, 11, 0.25);
}

/* Soft traditional pattern overlay */
.history-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(217, 119, 6, 0.06),
            rgba(217, 119, 6, 0.06) 2px,
            transparent 2px,
            transparent 10px
        );
    z-index: 0;
}

/* Ensure content stays above pattern */
.history-section > * {
    position: relative;
    z-index: 1;
}

/* ===============================
   IMAGE CARD
================================ */
.history-image {
    background: var(--card-bg);
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(26, 11, 5, 0.35);
}

.history-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

/* ===============================
   TITLE
================================ */
.history-title {
    color: #8b4a02;
    font-weight: 800;
    font-size: 24px;
    margin-bottom: 18px;
    padding-bottom: 6px;
    display: inline-block;
    border-bottom: 3px solid var(--gold);
}

/* ===============================
   TEXT
================================ */
.history-text {
    color: #2b160a;
    line-height: 1.9;
    font-size: 16px;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 992px) {
    .history-title {
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .history-section {
        padding: 28px 18px;
    }

    .history-title {
        font-size: 20px;
    }

    .history-text {
        font-size: 15px;
    }
}