/* Base styles for the body and fonts */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f9fa; /* A very light grey for the background */
    margin: 0;
    padding: 0;
}

/* Color variables based on the Depliant Petit Plus.pdf (Green focused) */
.header-bg {
    background-color: #4CAF50; /* Main Green from leaflet */
}
.text-primary-green {
    color: #4CAF50; /* Main Green for headings and accents */
}
.bg-primary-green-light {
    background-color: #E8F5E9; /* Very light green for alternating section backgrounds */
}
.bg-dark-green { /* Used for mobile overlay backgrounds */
    background-color: #388E3C; /* Darker Green */
}
.bg-light-green { /* Used for action section background */
    background-color: #EDF7ED; /* Even lighter green */
}


/* Primary button styles */
.btn-primary {
    background-color: #4CAF50; /* Main Green */
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: 500;
}
.btn-primary:hover {
    background-color: #388E3C; /* Darker Green on hover */
    transform: translateY(-2px);
}

/* Custom shadow for cards */
.shadow-custom {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Container for main content, adjusted for modern feel */
.container-wrapper {
    max-width: 1000px; /* Optimal reading width */
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem; /* Base padding */
}

/* Content Card styling */
.content-card {
    border: 1px solid #db9f9f; /* Subtle border */
    line-height: 1.6; /* Comfortable line spacing */
}

/* Policy Section spacing */
.policy-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f0f0f0; /* Light separator */
}
.policy-section:last-of-type {
    border-bottom: none; /* No border for the last one before action section */
    margin-bottom: 1.5rem;
    padding-bottom: 0;
}

/* Channel cards for contact info */
.channel-card {
    background-color: rgb(157, 230, 179);
    padding: 1.25rem;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    min-width: 200px; /* Ensure cards have a decent minimum width */
    text-align: center;
    border: 1px solid #e0e0e0;
}
.channel-card i {
    color: #4CAF50; /* Icon color matching primary green */
}


/* Responsive text sizing for headings and main content */
/* H1 - Hero Section */
.text-5xl { /* Default size for larger screens */
    font-size: 3rem; /* Approx. 48px */
}
@media (max-width: 768px) { /* On medium screens and smaller */
    .text-5xl {
        font-size: 2.5rem; /* Approx. 40px */
    }
}
@media (max-width: 640px) { /* On small screens and smaller */
    .text-5xl {
        font-size: 1,8rem; /* Approx. 32px */
    }
}

/* H2 - Main Section Titles */
.text-4xl { /* Default size for larger screens */
    font-size: 2.25rem; /* Approx. 36px */
}
@media (max-width: 768px) {
    .text-4xl {
        font-size: 2rem; /* Approx. 32px */
    }
}
@media (max-width: 640px) {
    .text-4xl {
        font-size: 1.75rem; /* Approx. 28px */
    }
}

/* H3 - Sub-section Titles (Policy points) */
.text-3xl { /* Default size for larger screens */
    font-size: 1.875rem; /* Approx. 30px */
}
@media (max-width: 768px) {
    .text-3xl {
        font-size: 1.2rem; /* Approx. 24px */
    }
}
@media (max-width: 640px) {
    .text-3xl {
        font-size: 1.25rem; /* Approx. 20px */
    }
}

/* General paragraph text and list items */
.text-xl { /* Used for hero subtitle and channel card titles */
    font-size: 1.125rem; /* Approx. 18px */
}
@media (max-width: 768px) {
    .text-xl {
        font-size: 1rem; /* Approx. 16px */
    }
}

.text-lg { /* Main content paragraphs, default 16px */
    font-size: 1rem; /* Adjusted to 16px */
}
@media (max-width: 768px) {
    .text-lg {
        font-size: 0.9375rem; /* Approx. 15px */
    }
}
@media (max-width: 640px) {
    .text-lg {
        font-size: 0.875rem; /* Approx. 14px */
    }
}

.text-base { /* Smallest readable text for detailed info */
    font-size: 0.9375rem; /* Approx. 15px */
}
@media (max-width: 768px) {
    .text-base {
        font-size: 0.875rem; /* Approx. 14px */
    }
}
@media (max-width: 640px) {
    .text-base {
        font-size: 0.8125rem; /* Approx. 13px */
    }
}


/* Mobile Navigation (Hamburger) */
#mobile-nav-toggle {
    z-index: 60;
}
#mobile-nav-overlay {
    z-index: 50;
}
#close-mobile-nav {
    z-index: 60;
}

/* Roadmap/Procedure section styling (inspired by CongoCoin) */
.roadmap-main-line { /* Renamed for clarity */
    position: absolute;
    left: 20px; /* Base position for mobile */
    top: 0;
    height: 100%;
    width: 2px;
    background: #e0e0e0; /* Light grey line */
    z-index: 1;
}

.roadmap-item {
    position: relative;
    padding-left: 50px; /* Space for the icon and line */
    margin-bottom: 2.5rem; /* Spacing between items */
    display: flex; /* Use flex for icon and content alignment */
    align-items: flex-start; /* Align content to the top */
}

.roadmap-item:last-child {
    margin-bottom: 0; /* No bottom margin for the last item */
}

.roadmap-icon-wrapper { /* Renamed for clarity, contains the icon */
    position: absolute;
    left: 0;
    top: 0; /* Align to the top of the content */
    width: 40px; /* Size of the circular icon */
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10; /* Above the line */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    border: 2px solid rgb(121, 212, 144); /* White border around the icon */
}

.roadmap-content {
    flex: 1; /* Allow content to take remaining space */
}

/* Adjustments for desktop roadmap layout (alternating left/right) */
@media (min-width: 768px) { /* Apply on medium screens and larger */
    .roadmap-main-line {
        left: 50%; /* Center the line */
        transform: translateX(-50%); /* Adjust for line width */
    }

    .roadmap-item {
        justify-content: space-between; /* Push content to edges */
        padding-left: 0; /* Remove left padding as content is now split */
    }

    .roadmap-icon-wrapper {
        left: 50%; /* Center icon on the line */
        transform: translateX(-50%); /* Adjust for icon width */
        margin-left: 0; /* Reset any previous margin */
    }

    /* Styles for the left-aligned content (default for first item) */
    .roadmap-item > div:first-child:not(.roadmap-icon-wrapper) { /* Target first div that is not the icon wrapper */
        width: 45%; /* Take almost half width */
        text-align: right;
        padding-right: 2rem; /* Space before icon */
    }

    /* Styles for the right-aligned content (default for first item) */
    .roadmap-item > div:last-child:not(.roadmap-icon-wrapper) {
        width: 45%; /* Take almost half width */
        text-align: left;
        padding-left: 2rem; /* Space after icon */
    }

    /* Adjust for reversed items (e.g., Étape 2, 4) */
    .roadmap-item.md\:flex-row-reverse > div:first-child:not(.roadmap-icon-wrapper) { /* This is the right side content in reversed flex */
        text-align: left;
        padding-left: 2rem;
        padding-right: 0;
    }
    .roadmap-item.md\:flex-row-reverse > div:last-child:not(.roadmap-icon-wrapper) { /* This is the left side content in reversed flex */
        text-align: right;
        padding-right: 2rem;
        padding-left: 0;
    }
}

/* Adjustments for smaller screens (e.g., mobile) for roadmap text */
@media (max-width: 767px) { /* Apply on screens smaller than medium */
    .roadmap-content h4 {
        font-size: 1.05rem; /* Slightly smaller title in roadmap item */
    }
    .roadmap-content p {
        font-size: 0.9rem; /* Slightly smaller text in roadmap item */
    }
}