:root {
    --main-dlo: #0A2B24;
    --second-bg-dlo: #F4EEDD;
    --dlo-light: #208a73;
    --dlo-compliment: #2B0A11;
}
footer {
    padding: 2rem;
    font-size: 0.9rem;
    color: #777;
}
.activity-indicator { display: none; width: 20px; height: 20px; }

.result { margin-top: 10px; }
.scan-result { margin-left: 10px; }
.scan-sub { margin-left: 10px; margin-bottom: 15px; }
.scan-micro-sub { margin-left: 10px; }

.form-inline { display: inline }
.prompt-wrapper { margin-bottom: 20px; }
.prompt-wrapper label { font-weight: bold; font-size: 1.1rem; }
.prompt-tb { width: 100%; height: 250px;  }
.prompt-output { width: 100%; height: 150px; }
.footnote { font-size: 0.9rem; color: #444; }

.hidden { display: none}
.dlomap { }

.search-history { }
.search-history-link { margin-bottom: 5px; font-weight: bold; font-size: 1.1rem; }
.search-history-prompt { font-style: oblique; margin-left: 8px; }
.reprompt { cursor: pointer; font-size: 0.9rem; color: var(--main-dlo) }

.dlo-coord-context { display: flex; align-items: center; flex-direction: column; }
.dlo-coord-context button { margin-bottom: 8px; display: block; }

.delete-wrapper { text-align: right; }
.table-wrapper {
    width: 100%;
    overflow-x: scroll;
}

body { background-color: var(--second-bg-dlo) }
.site-wrapper { background-color: white; }
.site-wrapper .container {  }
.header-container { background-color: var(--main-dlo); min-height: 156px; }
.header-container a:link.nav-link, .header-container a:visited.nav-link {
    color: var(--second-bg-dlo)
}

.home-jumbotron {
    background-image: url('/images/jumbotron/demo-jumbo2.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 450px;
    color: var(--main-dlo);
}

.material-symbols-outlined {
    font-size: 1.2rem;
    font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24
}

button .material-symbols-outlined {
    vertical-align: middle;
    margin-right: 2px;
}

.clipboard-copy { cursor: pointer; }
.attached-source { cursor: pointer; }


.section-heading {
    font-size: 3rem; /* Larger font size */
    font-weight: 800; /* Extra bold */
    color: var(--main-dlo); /* Bootstrap primary blue */
    margin-bottom: 2.5rem; /* More space below heading */
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
}
.section-heading::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--main-dlo); /* Underline effect */
    margin: 0.75rem auto 0;
    border-radius: 2px;
}
/* New styles for the tier rows */
.tier-row {
    background-color: #ffffff; /* White background for the tier */
    border-radius: 1rem; /* More rounded corners */
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12); /* Prominent shadow */
    padding: 2.5rem; /* Consistent padding inside the tier */
    margin-bottom: 3.5rem; /* Space between tier rows */
    transition: all 0.3s ease-in-out; /* Smooth transition for subtle effects */
}
.tier-row:hover {
    transform: translateY(-5px); /* Subtle lift on hover */
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.18); /* Slightly stronger shadow on hover */
}

.tier-row-primary { /* Style for the 'Our Vision' tier */
    background: linear-gradient(45deg, #007bff, #0056b3); /* Gradient background */
    color: white;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); /* Strong shadow */
}
.tier-row-primary .card-text.lead {
    color: white; /* Ensure text is white on dark background */
}

.card-text.lead {
    font-size: 1.35rem; /* Slightly larger lead text */
    line-height: 1.7;
}
.list-group-item {
    border-color: rgba(0,0,0,.08); /* Slightly more visible border */
    background-color: transparent;
    font-size: 1.15rem; /* Larger list item text */
    padding: 0.75rem 1.25rem;
    transition: background-color 0.2s ease-in-out;
}
.list-group-item:hover {
    background-color: #e9ecef; /* Light hover background */
}
.call-to-action-section {
    background: linear-gradient(45deg, var(--main-dlo), var(--dlo-light)); /* Gradient background */
    color: white;
    padding: 4rem 0; /* More padding */
    border-radius: 1rem; /* Rounded corners */
    text-align: center;
    margin-top: 5rem; /* More margin */
    margin-bottom: 5rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); /* Strong shadow */
}
.call-to-action-section h2 {
    font-size: 2.75rem; /* Larger CTA heading */
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3); /* Text shadow for pop */
}
.call-to-action-section p.lead {
    font-size: 1.4rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem;
}
.btn-cta {
    background-color: #ffffff; /* White button for contrast */
    color: var(--dlo-compliment); /* Blue text */
    border: 2px solid #ffffff;
    font-size: 1.3rem;
    padding: 0.8rem 2.5rem;
    border-radius: 50px; /* Fully rounded */
    font-weight: bold;
    transition: all 0.3s ease-in-out;
}
.btn-cta:hover {
    background-color: var(--dlo-compliment); /* Blue background on hover */
    color: #ffffff; /* White text on hover */
    border-color: #ffffff;
    transform: translateY(-3px); /* Subtle lift */
}
.feedback-line { text-align: right; }
.feedback-line button, .feedback-line span { margin-right: 5px; }
.img-preview { max-height: 450px; }
.img-preview img { max-height: 450px; margin: 0 auto 10px auto; display: block; }

#sourceModal label { font-weight: bold; margin-bottom: 4px; }

/* Desktop */
@media (min-width: 1201px ) {
    .table-wrapper { overflow: auto; }
}

/* Transitional */
@media (max-width: 1200px) and (min-width: 629px) {

}