:root {
            --primary-color: #860f00;
            --primary-container: #aa2611;
            --secondary-color: #156874;
            --tertiary-color: #4e3f28;
            --surface: #fff8f5;
            --surface-container-low: #fbf2ed;
            --surface-container-high: #efe6e2;
            --surface-container-highest: #e9e1dc;
            --sandstone: #F4EDE4;
            --deep-sea: #00323D;
            --terracotta-muted: #A52A2A;
            --on-surface: #1e1b18;
            --on-surface-variant: #5a413c;
            --outline-variant: #e2bfb8;
            --fossil-gray: #7A736E;
        }

        body {
            font-family: "Open Sans", sans-serif;
            background-color: var(--surface);
            color: var(--on-surface);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /*h1, h2, h3, h4, h5, h6, .font-heading {
            font-family: 'Libre Caslon Text', serif;
        }*/

        .text-primary-custom { color: var(--primary-color); }
        .text-secondary-custom { color: var(--secondary-color); }
        .text-tertiary-custom { color: var(--tertiary-color); }
        .text-on-surface-variant { color: var(--on-surface-variant); }
        .text-fossil-gray { color: var(--fossil-gray); }

        .bg-surface { background-color: var(--surface); }
        .bg-surface-container-low { background-color: var(--surface-container-low); }
        .bg-surface-container-high { background-color: var(--surface-container-high); }
        .bg-surface-container-highest { background-color: var(--surface-container-highest); }
        .bg-sandstone { background-color: var(--sandstone); }
        .bg-deep-sea { background-color: var(--deep-sea); }
        .bg-terracotta-muted { background-color: var(--terracotta-muted); }

        .border-outline-variant { border-color: var(--outline-variant) !important; }
        
        .btn-terracotta {
            background-color: var(--terracotta-muted);
            color: white;
            border: 1px solid var(--primary-container);
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-size: 0.75rem;
            border-radius: 0.125rem;
            transition: background-color 0.3s;
        }
        .btn-terracotta:hover {
            background-color: var(--primary-color);
            color: white;
        }

        .badge-custom {
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-size: 0.75rem;
            padding: 0.5rem 1rem;
            border-radius: 50rem;
        }
        .top-logo
        {
            display: flex;
            justify-content: center;
            padding: 10px 0px;
        }
        .top-logo img
        {
            width:200px;
        }
        /* Hero Section */
        .hero-section {
            position: relative;
            height: 80vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            overflow: hidden;
        }
        .hero-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }
        .hero-overlay {
            position: absolute;
            inset: 0;
            background-color: rgba(0, 50, 61, 0.4);
            mix-blend-mode: multiply;
            z-index: 1;
        }
        .hero-content {
            position: relative;
            z-index: 2;
            background-color: rgba(255, 248, 245, 0.1);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(122, 115, 110, 0.3);
            padding: 1.5rem;
            border-radius: 0.25rem;
            max-width: 42rem;
        }
        .hero-content h2
        {
            font-weight: bold;
        }

        /* Header */
        header {
            background-color: rgba(255, 248, 245, 0.8);
            backdrop-filter: blur(10px);
            z-index: 1030;
        }
        #about{scroll-margin-top: 80px;}

        /* Sections spacing */
        .py-section { padding-top: 5rem; padding-bottom: 5rem; }

        /* Accordion Customization */
        .accordion .collapsing {
            transition: height 0.2s ease-out !important;
        }
        .accordion-button::after {
            transition: transform 0.2s ease-out !important;
        }
        .accordion-button:not(.collapsed) {
            background-color: transparent;
            color: var(--primary-color);
            box-shadow: none;
        }
        .accordion-button {
            font-family: 'Libre Caslon Text', serif;
            font-size: 1.5rem;
            padding-left: 0;
            padding-right: 0;
            background-color: transparent;
            color: var(--on-surface);
        }
        .accordion-button:focus {
            box-shadow: none;
            border-color: rgba(0,0,0,.125);
        }
        .accordion-item {
            background-color: transparent;
            border: none;
            border-bottom: 1px solid var(--outline-variant);
        }
        .accordion-body {
            padding-left: 0.5rem;
            border-left: 2px solid rgba(21, 104, 116, 0.3);
            color: var(--on-surface-variant);
            margin-top: 1rem;
        }

        /* Texture overlays */
        .texture-overlay {
            position: relative;
        }
        .texture-overlay::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: 10;
            mix-blend-mode: multiply;
        }


/* Footer styling */
footer {
    padding: 2rem 0rem;
}
.footer-link {
    transition: color 0.2s ease, opacity 0.2s ease;
}
.footer-link:hover {
    color: var(--primary-color) !important;
}