body {
    font-family: 'Inter', sans-serif;
}
section {
    padding: 100px 0;
}
h1, h2, h3 {
    font-weight: 600;
    color: #333;
}
p {
    color: #000; /* Changed to black */
}
#about h2 { color: #1a73e8; }
#mission h2 { color: #d32f2f; }
#vision h2 { color: #388e3c; }
#approach h2 { color: #6a1b9a; }

#about, #mission, #vision, #approach {
    background: url('images/about_us.jpg') no-repeat center center/cover;
    background-attachment: fixed;
    color: white;
}

.section-container {
    background-color: #ffffff; /* Changed to white */
    padding: 20px 10px 0 10px;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    margin: 20px auto;
    max-width: 800px; /* Center the container and limit its width */
    min-height: 390px;
    text-align: center;
}

.section-containerC {
    background-color: #ffffff; /* Changed to white */
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    margin: 20px auto;
    max-width: 800px; /* Center the container and limit its width */
    min-height: 200px;
    text-align: center;
}

.section-containerA {
    background-color: #ffffff; /* Changed to white */
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    margin: 20px auto;
    max-width: 800px; /* Center the container and limit its width */
    text-align: center;
}

.section-containerC h1{
    color: #388e3c;
}

.section-container-contact {
    background-color: #ffffff; /* Changed to white */
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    margin: 20px auto;
    max-width: 800px; /* Center the container and limit its width */    
    text-align: center;
}

.section-container h3{
    font-size: 1.25re,;
}

footer {
    color: white; /* Changed to white */
}

footer p {
    color: white; /* Ensure footer text is white */
}



body {
    font-family: 'Inter', sans-serif;
}
.hero {
    background: url('images/hero-bg.jpg') no-repeat center center/cover;
    color: white;
    padding: 100px 0;
    text-align: center;
}
.hero-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
}
.hero-content h1 {
    margin-right: 20px;
}
.hero-content p {
    margin-left: 20px; /* Move the paragraph 20px to the right */
    font-size: 1.25rem; /* Increase font size for the paragraph in the hero section */
}
.hero-content::before {
    content: '';
    display: block;
    width: 4px;
    height: 100%;
    background-color: black;
    position: absolute;
    left: 45%; /* Adjusted to move the line to the left */
    transform: translateX(-50%);
}
section {
    padding: 100px 0;
}
h1, h2, h3 {
    font-weight: 600;
    color: #333;
}
p {
    color: #000; /* Changed to black */
}
#hero h1 { color: #00bcd4; }
#about h2 { color: #00bcd4; }
#kpis h2 { color: #ff9800; }
#vehicle-data h2 { color: #4caf50; }
#contact h2 { color: #e91e63; }

#about { background-color: #e0f7fa; }
#kpis { background: url('images/bg_RE.jpeg') no-repeat center center/cover; background-attachment: fixed; color: white; }
#vehicle-data { background-color: transparent; }
#contact { background-color: #eeffef }
.color-block {
    background-color: #78be21; /* Change this to your desired color */
    padding: 80px;
    border-radius: 20px;
}

.floating-container h3 {
    font-size: 1rem; /* Make the font size smaller */
    min-height: 25px;
}
.floating-container p {
    display: none;
    margin-top: 40px;
}
.floating-container:hover p {
    display: block;
}
#vehicle-data .floating-container:hover h3 {
    display: none; /* Hide header text on hover for Vehicle Data section */
}
.floating-container:hover {
    background-size: cover;
    background-position: center;
}
footer {
    color: white; /* Ensure footer text is white */
}
footer p {
    color: white; /* Ensure footer text is white */
}
#kpis h5 {
    font-weight: bold;
    font-size: 1.5rem; /* Adjust size as needed */
    text-align: center;
}

.coverage {
    background-color: white;
    padding: 12px 0 2px 0;
    border-radius: 17px;
    color: black;
}

.odo {
    position: relative;
    overflow: hidden;
}

/* Background image with 50% opacity */
.odo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("images/icons/odo.png") no-repeat center center/cover;
    background-size: auto calc(100% - 50px);
    background-position: center 10px;
    opacity: 0.5; /* Default 50% opacity */
    transition: opacity 0.3s ease-in-out;
    z-index: -1; /* Keeps background behind text */
    display: block; /* Ensures the pseudo-element is visible */
}

/* On hover, reduce opacity to 20% */
.odo:hover::before {
    opacity: 0.2;
}

.lighgray {
    color: rgb(194, 194, 194) !important;
}

.green {
    font-weight: 800;
    color: #388e3c;;
}