.container {
    display: flex;


}

#map {  
    width: 500px;
    margin-left: 1%;
    height: 500px;
    margin-top: 10px;
}

.search-box {
    margin-top: 10px;
    margin-bottom: 5px;
    border-radius: 50%;
    margin-left: 1%;
    float: left; /* Makes the box float to the left */
}
input {
    width: 325px; /* Increased width */
    padding: 16px 25px; /* Increased padding for more space inside the input */
    font-size: 18px; /* Larger font size */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern font */
    border: 2px solid #ddd; /* Light border */
    border-radius: 30px; /* Rounded corners */
    background-color: #f9f9f9; /* Light background color */
    color: #333; /* Text color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: all 0.3s ease; /* Smooth transition for focus and hover effects */
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1); /* Subtle text shadow for a soft effect */
    letter-spacing: 0.5px; /* Slight spacing between letters */
}

input:focus {
    outline: none; /* Remove the outline on focus */
    border-color: #ff6a00; /* Change border color on focus */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Stronger shadow on focus */
}

input:hover {
    border-color: #ff6a00; /* Change border color on hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow on hover */
}
button {
    background: linear-gradient(145deg, #ff6a00, #ffcc00); /* Gradient background */
    color: white; /* Text color */
    border: none; /* Remove default border */
    padding: 12px 30px; /* Adjust padding to make it more rectangular */
    font-size: 18px; /* Set a readable font size */
    font-weight: bold; /* Make text bold */
    border-radius: 10px; /* Slightly rounded corners (squared look) */
    cursor: pointer; /* Change cursor to pointer */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1), -2px -2px 10px rgba(255, 255, 255, 0.3); /* Subtle shadow */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    outline: none; /* Remove outline when clicked */
}

button:hover {
    background: linear-gradient(145deg, #ffcc00, #ff6a00); /* Reverse gradient on hover */
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2), -2px -2px 15px rgba(255, 255, 255, 0.4); /* Stronger shadow */
    transform: scale(1.05); /* Slightly enlarge the button */
}

button:active {
    transform: scale(0.98); /* Slightly shrink the button when clicked */
}

button:focus {
    outline: none; /* Remove outline when focused */
}

body, html {
background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    text-align: left;
    height: 100%;
   margin:0;
}

/* The hero image */
.hero-image {
    background-image: url("../Photos/b.jpg");
    height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-text {
    text-align: left;
    position: absolute;
    font-family: Century Gothic;
    top: calc(50% - 21px);
    left: 5%; /* Adjust this value to control the distance from the left */
    transform: translateY(-50%);
    color: #036c46;
    width: 500 px;
    font-size: 22px;
}
.hero-textt {
    text-align: left;
    position: absolute;
    font-family: Century Gothic;
    top: calc(50% + 31px); /* Moves it 10px down from 50% */
    left: 5%;
    transform: translateY(-50%);
    color: #025f50;
    width: 400px; /* Fixed typo (removed extra space between 400 and px) */
    font-size: 17px;
}


#loadingCircle {
    display: none; /* Hidden by default */
    position: absolute; /* Position it absolutely within the chart container */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact centering */
    z-index: 10; /* Ensure it appears above the chart container */
    width: 60px; /* Circle width */
    height: 60px; /* Circle height */
}

.circle {
    border: 8px solid #f3f3f3; /* Light gray background */
    border-top: 8px solid #3498db; /* Blue border */
    border-radius: 1000%; /* Ensures it’s a circle */
    width: 100px; /* Fills the parent container */
    height: 100px; /* Fills the parent container */
    animation: spin 1.5s linear infinite, glow 1.5s ease-in-out infinite alternate; /* Smooth spin and glow */
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Soft shadow around the circle */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes glow {
    0% {
        box-shadow: 0 0 15px rgba(52, 152, 219, 0.7);
    }
    100% {
        box-shadow: 0 0 25px rgba(52, 152, 219, 1);
    }
}

#loadingCircle span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #3498db;
    font-size: 18px; /* Increased font size for visibility */
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Subtle text shadow for glow effect */
    z-index: 0;
}

.chart-container {
    flex: 1;
    text-align: center;
    margin-left: 1%;
    margin-right: 1%;
}