body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

header {
    background-color: #009688;
    color: white;
    padding: 20px;
    text-align: center;
}

#logo {
    max-width: 200px; /* Adjust the size of the logo */
    height: auto;
    display: block;
    margin: 0 auto 5px; /* Center the logo and add some margin below */
}

/* Rest of your CSS remains the same */


/* Apply consistent margin and padding to all h2 elements for uniformity */
h2 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px; /* Added for consistency */
}

/* Enhance CTA button styles for better alignment and responsiveness */
#cta button {
    background-color: #ff9800;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
    display: inline-block; /* Ensure buttons align correctly */
}

#cta button:hover {
    background-color: #e68900;
}

.feature, .media-transformation {
    background-color: white;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 800px; /* Apply consistent max-width for uniformity */
}

.feature h3, .media-transformation h3 {
    color: #009688;
}

.feature p, .media-transformation p {
    line-height: 1.6;
}

/* Improved media-transformation styles for better responsiveness */
.media-transformation {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Keep as is for alignment */
    gap: 50px;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

.media-transformation div {
    flex: 1; /* Allows flex items to grow if needed */
    max-width: 50%; /* Prevents div from exceeding half the container's width */
    text-align: center;
}

.media-transformation img {
    width: auto; /* Adjust based on content */
    max-width: 100%; /* Ensure image is not larger than its container */
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
    .media-transformation div {
        max-width: 100%; /* Each div takes full width on smaller screens */
    }
}

/* Footer Styles */
footer {
    background-color: #00796B; /* A shade darker than the header for visual contrast, yet cohesive */
    color: white;
    padding: 20px 0; /* Uniform padding */
    text-align: center;
    font-size: 0.9em; /* Adjust based on your preference */
}

.footer-content, .footer-cta {
    margin: 0 auto;
    padding: 10px;
    max-width: 800px; /* Matches the .feature and .media-transformation max-width for consistency */
}

.footer-content p, .footer-cta button {
    margin-bottom: 10px; /* Provides spacing between elements */
}

/* Ensuring CTA buttons in the footer are visually consistent with the rest of the site */
.footer-cta button {
    background-color: #ff9800; /* Matches CTA buttons above for consistency */
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 5px; /* Slightly reduce margin for footer-specific alignment */
    cursor: pointer;
}

.footer-cta button:hover {
    background-color: #e68900; /* Hover effect to match other CTA buttons */
}

/* Adjust the email and copyright text for better readability and alignment */
.footer-content p {
    margin: 10px 0; /* Adds a bit more space around the text */
}

/* Optional: Add a .current-year class for specific styling if needed */
.current-year {
    font-weight: bold; /* Just an example to highlight the dynamic year */
}

.form-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input[type="text"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px; /* Adjust as necessary */
    border-radius: 4px;
    border: 1px solid #ccc; /* Light grey border */
}

.form-group textarea {
    resize: vertical; /* Allows the textarea to be resized vertically */
}

.btn {
    background-color: #ff9800;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

.btn:hover {
    background-color: #e68900;
}

/* Image Carousel Styles */
.image-carousel {
    max-width: 600px; /* Adjust as needed */
    overflow: hidden;
    position: relative;
    margin: auto;
}

.carousel-slides img {
    width: 100%;
    display: none;
    transition: opacity 0.5s ease-in-out;
}

.carousel-slides img:first-child {
    display: block;
}

.image-swap {
    position: relative;
}

.image-swap img.hover-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.image-swap:hover img.default-image {
    display: none;
}

.image-swap:hover img.hover-image {
    display: block;
}

.container {
    margin: 0 auto;
    padding: 20px;
    max-width: 1200px; /* Adjust based on your preference for content width */
    background-color: #f0f0f0; /* Matches the body background for consistency */
}

.coming-soon {
    background-color: #ffffff; /* Light background for visibility */
    margin: 20px auto; /* Aligns with .feature and .media-transformation margins */
    padding: 20px;
    border-radius: 8px; /* Consistent with other sections for uniformity */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Consistent shadow effect */
    text-align: center; /* Centers the text for attention */
    max-width: 800px; /* Consistent with .feature for uniformity */
}