:root {
    --traditional-red: #800000;
    --gold: #D4AF37;
    --warm-cream: #fdfaf5;
    --text-brown: #3e2723;
}

body {
    background-color: var(--warm-cream);
    /* Adding a subtle paper texture via a public pattern */
    background-image: url('https://www.transparenttextures.com/patterns/natural-paper.png');
    font-family: 'Poppins', sans-serif;
    color: var(--text-brown);
}

/* Add a gold border at the very top of the site */
.navbar {
    border-top: 5px solid var(--gold);
    border-bottom: 2px solid var(--traditional-red);
    background: white !important;
    padding: 20px 0;
}

.navbar-brand {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    letter-spacing: 1px;
}

/* The Hero Section needs more "Life" */
.hero-section {
    padding: 120px 0;
    /* Soft gradient to make the text pop */
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(253,250,245,0) 100%);
    position: relative;
}

/* Add a decorative element under headings */
h1::after, h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: var(--gold);
    margin: 15px auto;
}

/* Course Cards - Adding depth and "Traditional Border" */
.course-card {
    background: white;
    border: none;
    border-top: 5px solid var(--traditional-red);
    border-radius: 0; /* Square edges look more traditional/formal */
    box-shadow: 10px 10px 0px rgba(128, 0, 0, 0.05); /* Solid shadow for a retro look */
    transition: 0.3s;
    padding: 20px;
}

.course-card:hover {
    box-shadow: 15px 15px 0px rgba(212, 175, 55, 0.2);
    transform: translateY(-5px);
}



/* Parallax Header Setup */
.parallax-window {
    /* The Background Image - Choose a high-quality vertical or wide texture */
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                      url('../images/main-div-image.jpg');
    
    /* The Magic Part */
    height: 90vh; /* Covers 90% of the screen height */
    background-attachment: fixed; /* Fixes image for parallax */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.parallax-content {
    z-index: 2;
    padding: 20px;
}

/* Enhancing the Traditional feel */
.text-gold {
    color: #D4AF37;
    letter-spacing: 2px;
}

.btn-traditional {
    background-color: #800000;
    color: #fff;
    border: 2px solid #D4AF37;
    border-radius: 0; /* Traditional sharp edges */
    padding: 15px 40px;
    font-weight: bold;
    transition: 0.3s;
}

.btn-traditional:hover {
    background-color: #D4AF37;
    color: #800000;
    transform: scale(1.05);
}

/* Image Frame for the course card */
.course-image-frame {
    padding: 15px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 15px 15px 0px #800000; /* Traditional offset shadow */
}

/* Add this to control the image height specifically */

/* Accessibility for older users */
body {
    font-size: 18px; /* Slightly larger base text */
    line-height: 1.8;
}

/* Specific adjustment for mobile screens */
@media (max-width: 768px) {
    #course .container {
        /* This ensures the frame doesn't touch the screen edges */
        padding-left: 25px;
        padding-right: 25px;
    }

    .course-image-frame {
        /* Slightly reduce shadow size on mobile so it doesn't overflow the screen */
        box-shadow: 10px 10px 0px #800000;
        margin-right: 10px; /* Room for the shadow */
    }
}