/* General Body and Container Styling */
body {
margin: 0;
font-family: 'Roboto', Arial, sans-serif; 
line-height: 1.6;
color: #333;
background-color: 0 0 15px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
min-height: 100vh; 
main-width: 100%;}


.app-container {
width: 100%;
max-width: 1400px; /* Max width for the entire application*/
background-color: #ffff;
box-shadow: #ffff;
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden; 
margin: 0px; 
}


.container {
padding: 20px;

}


/* Header Styling */
.header {
background-color: #0000;
color: #070707;
padding: 10px 16px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 20px; 
flex-wrap: wrap; 
border-top-left-radius: 8px;
border-top-right-radius: 8px;
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
}


.header img {
height: 80px; /* Adjust logo size */
width: auto;
object-fit: contain;
}


.header h1 {
margin: 0;
font-size: 2.2em;
flex-grow: 1;
}


/* Navigation Bar */
.navbar {
background-color: #5c8f45;
padding: 0.8rem 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid #777;
}


.navbar ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
gap: 25px; /* Space between nav items */
flex-wrap: wrap;
}


.navbar a {
text-decoration: none;
color: #fff;
font-weight: bold;
padding: 8px 15px;
border-radius: 5px;
transition: background-color 0.3s ease;
}


.navbar a:hover,
.navbar a.active {
background-color: #007bff; /* Highlight active/hovered link */
color: #fff;
}


/* Content Sections */
.content-section {
padding: 20px;
line-height: 1.5;
text-align: justify;
}


.content-section h1, .content-section h2, .content-section h3 {
color: #080808;
margin-top: .5em;
margin-bottom: 0.5em;
text-align: left; /* Keep headings left-aligned */
}


/* Restored specific font sizes for content section headings */
.content-section h2 { font-size: 1.5em; }
.content-section h3 { font-size: 1.2em; }


.content-section p {
margin-bottom: 1em;
}


.content-section ul {
list-style-type: disc;
margin-left: 20px;
margin-bottom: 1em;
}


.content-section li {
margin-bottom: 0.5em;
}


.content-section hr {
border: 0;
height: 1px;
background: #ddd;
margin: 2em 0;
}


.bodylinks {
color: #007bff;
text-decoration: none;
transition: color 0.3s ease;
}


.bodylinks:hover {
text-decoration: underline;
}


/* Image Gallery Section (for About page)*/
.image-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
gap: 30px; 
margin-top: 25px;
margin-bottom: 40px;
padding: 10px; 
}


.image-card {
background-color: #fff;
border: 1px solid #eee;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Stronger shadow for cards*/
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
padding-bottom: 15px; 
}


.image-card:hover {
transform: translateY(-5px); /* Lift effect on hover */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}


.image-gallery img {
width: 100%;
height: 220px; /* Consistent height for images */
object-fit: cover;
display: block;
border-bottom: 1px solid #eee;
margin-bottom: 15px;
}


.image-card caption {
font-style: italic;
color: #555;
margin-bottom: 15px;
padding: 0 15px; /* Padding for caption text */
font-size: 0.95em;
}


.download-button {
display: inline-block;
background-color: hsl(219, 93%, 48%); /* Green color for download button */
color: white;
padding: 10px 10px;
border: none;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}


.download-button:hover {
background-color: #218838;
}


/* Single Species Map Section Layout*/
.main-content-wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px; 
min-height: 600px; 
width: 100%;
}


.sidebar {
width: 100%;
background-color: #5c8f45;
padding: 5px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
border: 1px solid #eee;
align-items: center;
margin: 5px;
display: flex;
flex-direction: row;
}


.sidebar h3 {
color: #e2e4e7;
margin-top: 0;
margin-bottom: 10px;
text-align: center;
}


.form-group {
margin: 18px;
}


.form-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #fdfafa;
align-items: center;
}


.form-group select,
.form-group input[type="text"] {
width: 100%;
align-items: center;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1.2em;
box-sizing: border-box; /* Include padding and border in element's total width and height */
}


.form-group input[type="text"]:focus,
.form-group select:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}


#future-options {
border-top: 1px dashed #ddd;
padding-top: 15px;
margin-top: 5px;
}


.sidebar .download-button {
width: 33%;
margin: 10px;
padding: 12px 20px;
font-size: 1em;
}


.legend {
width: 33%;
background-color: hsl(219, 93%, 48%); /* Green color for download button */
color: white;
padding: 10px 10px;
border: none;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}


.legend h4 {
margin-top: 0;
margin-bottom: 10px;
color: #e1e6eb;
font-size: 1em;
}


.legend i {
width: 50px;
height: 30px;
display: inline-block;
margin-right: 8px;
vertical-align: middle;
border: 1px solid #ccc;
font-size: 1em;
}


/* Map Containers */
.map-wrapper {
flex-grow: 1; 
display: flex;
flex-direction: row ;
gap: 20px; 
align-items: center;
z-index: 2;
}


.map-container {
height: 300px; /* Fixed height for each map area */
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
display: flex; 
flex-direction: column; 
}


.map-container h3 {
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
color: #2c3e50;
}


.map-actual {
height:450px;
width: 100%;    
max-width: 100%;
max-height: 100%;
flex-grow: 1; /* Allow map to take remaining height */
border-radius: 8px;
}


/* Footer Styling (adjusting for app-container) */
footer {
text-align: center;
padding: 15px 20px;
background-color: #333;
color: #fff;
margin-top: auto; /* Pushes footer to the bottom of app-container */
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}


/* Message Box for Download Error */
.message-box {
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
z-index: 1000;
text-align: center;
}
.message-box button {
background-color: #007bff;
color: white;
padding: 8px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
transition: background-color 0.3s ease;
}
.message-box button:hover {
background-color: #0056b3;
}

.fullscreen-overlay {
display: none; 
position: fixed; 
z-index: 2000; 
left: 0;
top: 0;
margin: 0;
width: 100%; 
height: 100%; 
overflow: auto; 
background-color: rgba(0,0,0,0.9); 
justify-content: center; 
align-items: center; 
}


.fullscreen-overlay img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
object-fit: contain; /* Ensure the whole image is visible */
}


.close-button {
position: absolute;
top: 20px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
z-index: 1; /* Ensure close button is above the image */
}


.close-button:hover,
.close-button:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 0px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 500px;
background-color: rgb(242, 245, 239);
color: #020202;
text-align: left;
border-radius: 6px;
padding: 5px 0;


/* Position the tooltip */
position: absolute;
z-index: 1;
}


.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
z-index: 10;
font-size: 16px;
}
/* Custom styles for the banner items to integrate with Tailwind and Owl Carousel */
.banner-item-wrapper {
position: relative;
overflow: hidden;
border-radius: 0.rem; 
box-shadow: #ffffff; 
background-color: #fdfbfb; 
min-height: 180px; 
display: flex;
flex-direction: column; 
justify-content: space-between;
align-items: center; 
padding: 1rem; /* Add some padding around the whole item */
margin: 0px;
}


/* Desktop layout for banner items (text left, image right) */
@media (min-width: 768px) {
.banner-item-wrapper {
flex-direction: row; 
padding: 2rem; 
}
}


.title-container {
padding: .5rem; 

display: flex;
align-items: center; 
justify-content: center; /* Horizontally center text for column, adjust for row */
text-align: center; 
width: 100%; 
margin-bottom: 10px;
margin-top: 10px;
background-color: hsl(0, 0%, 100%);
}


@media (min-width: 768px) {
.title-container {
width: 35%; 
text-align: left; 
padding-right: 1.5rem; 
justify-content: flex-start; 
}
}


.title {
color: #0a0a0a; /* text-gray-800 */
text-align: left;
font-size: 1.rem;


}


.title .head {
display: block;
font-size: 2.25rem; 
line-height: 2.5rem; 
font-weight: 700; 
margin-bottom: 0.75rem; 
color: #1d4ed8; 
}
@media (min-width: 768px) {
.title .head {
font-size: 2.5rem; 
line-height: 1; 
}
}


.title span:not(.head) {
font-size: 1.1rem; 
line-height: 1.2rem; 
color: #070707; 
text-align: center;
}
@media (min-width: 768px) {
.title span:not(.head) {
font-size: 1.1rem;
line-height: 1.2rem; 
}
}


.banner-bg {
width: 100%; 
height: 10rem; / h-60 /
background-size: cover; 
background-position: center; 
position: relative;
min-height: 200px; 
border-radius: 0.rem; 


}
@media (min-width: 768px) {
.banner-bg {
width: 65%; 
height: auto; 
min-height: 300px; 
}
}


.banner-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #ffffff; 
color: #ffffff; 
font-size: 0.875rem; 
line-height: 1.25rem;
padding: 0.75rem; 
text-align: center;
border-bottom-left-radius: 0.75rem; 
border-bottom-right-radius: 0.75rem; 
}
@media (min-width: 768px) {
.banner-caption {
font-size: 1rem; 
line-height: 1.5rem; 
}}


.banner-link {
position: absolute;
inset: 0; 
z-index: 10; 
}


/* Owl Carousel custom navigation/dots styling */
.owl-theme .owl-nav.disabled + .owl-dots {
margin: 0px;
}


.owl-theme .owl-dots .owl-dot span {
position: top;
left: 0;
bottom: 0;
width: 12px;
height: 12px;
margin: 15 5px;
background: #141414; /* Light gray for inactive dots */
border-radius: 0%;
transition: background-color 0.3s ease;
}


.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
background: #2563eb; 
}

@media (max-width: 1024px) {
.app-container {
margin: 10px;
}


.header h1 {
    font-size: 2em;
}

.main-content-wrapper {
    flex-direction: column; /* Stack sidebar and map vertically */
}

.sidebar {
    flex: none; /* Remove fixed width */
    width: 100%; /* Take full width */
}

}


@media (max-width: 768px) {
.header {
flex-direction: column;
gap: 10px;
}


.header h1 {
    font-size: 1.8em;
}

.navbar ul {
    flex-direction: column;
    gap: 10px;
}

.navbar a {
    padding: 10px;
    text-align: center;
}

.container {
    padding: 15px;
}

.image-gallery {
    grid-template-columns: 1fr; /* Stack images on smaller screens */
    gap: 20px;
}

.image-gallery img {
    height: 180px; /* Slightly reduce image height */
}

.map-container {
    height: 400px; /* Reduce map height on smaller screens */
}

}


@media (max-width: 480px) {
.header h1 {
font-size: 1.5em;
}


.app-container {
    margin: 5px;
    border-radius: 0; /* Remove border-radius on very small screens for full width */
}

.map-container {
    height: 300px;
}

}
table, th, td {
border:2px solid black;
align-items: center;
margin-left: auto;
margin-right: auto;
}