/* This file contains all styling code for the Geothermall Wells LLC website */

/* General styles */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Navigation of pages */
header {
    display: flex; /* Uses flexbox to align children side by side */
    align-items: center; /* Vertically centers the children */
    padding: 10px 20px; /* Add padding for aesthetic spacing */
    background-color: white; /* Sets the background color of the header to white */
}

header nav ul {
    list-style: none; /* Removes bullet points from list */
    padding: 0; /* Removes default padding */
    margin: 0; /* Removes default margin */
    display: flex; /* Aligns the navigation items in a row */
    justify-content: space-around; /* Spaces out the navigation items */
    width: 100%; /* Ensures the navigation items take up full width */
}

header nav ul li {
    margin: 0 100px; /* Adds spacing between the links */
}

header nav ul li a {
    text-decoration: none; /* Removes underline from links */
    color: black; /* color for links */
    font-size: 24px; /* Sets a smaller font size */
    font-family: Arial, sans-serif; /* Uses Arial font, with sans-serif as a fallback */
    font-weight: bold; /* Makes the font bold */
    padding: 10px 15px; /* Adds padding around the links */
}

header #logo {
    height: 130px; /* Adjust image dimensions for the logo */
    width: 130px; /* Adjust image dimensions for the logo */
    margin-right: 20px; /* Add space to the right of the logo */
}

/* Background image on home page */
.factoryimg {
    position: relative;
    text-align: center;
    color: white; /* Change text color based on your image */
}

.factoryimg img {
    width: 100%; /* This will make the image stretch to cover the entire width of its container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Removes bottom margin/gap */
    opacity: 0.8; /* Fade the image so the text stands out */
}

.centeredimg {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Ensures perfect centering */
    font-size: 32px; /* Smaller text size */
    font-family: Arial, sans-serif;
    font-weight: bold; /* Bold text */
    color: white; /* Text color */
}

div {
    text-align: justify;
    text-justify: inter-word;
}

/* Paragraph features */
.featuresp {
    margin-left: 10px;
    margin-right: 10px;
    width: auto;
    font-size: 16px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: darkslategray;
    line-height: 1.5;  /* Line height is 1.5 times the font size */
}

.headerpara {
    font-family: 'Arial Black', Arial, sans-serif;
    color: rgb(60, 52, 52);
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 2px;
    padding-bottom: 2px;
}

.mapheader {
    font-family: 'Arial Black', Arial, sans-serif;
    color: rgb(60, 52, 52);
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}

/* Add spacing between the items in the introduction */
div ul li {
    margin-bottom: 5px;
}

/* Map and main content */
.content-map-container {
    display: flex;
    flex-direction: column; /* Stacks elements vertically on smaller screens */
    align-items: center; /* Center aligns children */
}

.main-content {
    width: 100%;
    padding: 10px;
}

#regions_div {
    width: 100%;
    height: 400px; /* Adjust height as needed */
    margin-top: 20px;
}

.featuresp {
    margin-bottom: 20px;
    margin-left: 50px;
    margin-right: 50px;
    text-align: justify;
}

/* Footer settings */
#footer {
    position: fixed; /* Fixed positioning makes the footer stick */
    left: 0;
    bottom: 0; /* Anchors the footer at the bottom */
    width: 100%; /* Ensures the footer extends full width of the viewport */
    background-color: #ffffff80; /* Adjust color as needed, corrected the color code */
    text-align: center; /* Centers the text inside the footer */
}

/* banner */
/* Styles for the banner */
.banner {
    background-color: rgba(0, 136, 0, 0.503); /* Yellow background color */
    color: white; /* Dark text color */
    padding: 10px 0; /* Adjust padding as needed */
    text-align: center;
    font-size: 24px;
}

/* Styles for the moving text */
.marquee {
    display: inline-block;
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden;
}

/* Animation for the moving text */
@keyframes marqueeAnimation {
    0% { transform: translateX(100%); } /* Start offscreen to the right */
    100% { transform: translateX(-100%); } /* Move completely offscreen to the left */
}

/* Apply animation to the moving text */
.marquee {
    animation: marqueeAnimation 10s linear infinite; /* Adjust speed as needed */
}

#footer {
    bottom: 0;
    width: 100%;
    height: 1.5rem; /* Footer height */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    header nav ul {
        flex-direction: column; /* Stacks navigation items vertically on smaller screens */
        align-items: center;
    }

    header nav ul li {
        margin: 10px 0; /* Adds spacing between the links vertically */
    }

    .centeredimg {
        font-size: 24px; /* Smaller text size */
    }

    .headerpara {
        font-size: 18px; /* Smaller header font size */
    }

    .main-content {
        padding: 20px;
    }
}