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

header {
    background-color: #b8e8e8;
    color: white;
    padding: 15px 20px;
    text-align: center;
    animation: fadeIn 1s ease-in-out; /* Apply fade-in animation */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* General shadow effect */
}
/* Optional: to enhance the bevel effect */
.header:before {
    content: '';
    position: absolute;
    top: 100%; /* Position it just below the header */
    left: 0;
    right: 0;
    height: 20px; /* Adjust the height for the bevel effect */
    background: rgba(255, 255, 255, 0.3); /* Light color for the bevel */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Shadow for the bevel */
    border-radius: 5px; /* Optional: add rounded corners */
    z-index: -1; /* Ensure it's behind the header */
}
nav {
    position: relative; /* Needed for positioning the pseudo-element */
    display: flex; /* Align links in a row */
    gap: 10px; /* Space between links */
    justify-content: center; /* Center the nav items */
    margin: 20px 0; /* Space above and below */
}

nav a {
    position: relative; /* Position relative for the pseudo-element */
    padding: 10px 15px; /* Adjust as needed */
    text-decoration: none; /* Remove underline */
    color: #333; /* Text color */
    display: inline-block; /* Ensures padding works */
    cursor: pointer; /* Change cursor to pointer on hover */
}

nav a::after {
    content: ''; /* Required for pseudo-element */
    position: absolute; /* Position it absolutely */
    left: 50%; /* Center it horizontally */
    bottom: -5px; /* Position below the text */
    width: 0; /* Start with no width */
    height: 2px; /* Height of the line */
    background-color: #2d5d2f; /* Color of the line */
    transition: width 0.3s ease; /* Animation on hover */
    transform: translateX(-50%); /* Center the line under the text */
}

nav a:hover::after {
    width: 100%; /* Expand to full width on hover */
}

nav a:not(:hover)::after {
    width: 0; /* Hide line when not hovering */
}


.hero {
    background: linear-gradient(115deg, rgba(134, 191, 226, 0.8) 0%, rgba(150, 253, 239, 0.9) 100%);
    height: 120px; 
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    margin: 20px auto 0;
    width: 100%;
    max-width: 900px;
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
    position: relative; /* For positioning pseudo-elements */
    overflow: hidden; /* Prevents overflow from children */
    animation: fadeIn 2s ease-in-out; /* Apply fade-in animation */
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3); /* Dark overlay for contrast */
    z-index: 1; /* Sits below the text */
}

.hero h1 {
    font-size: 2.5em;
    /* text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); /* Shadow for text */
    z-index: 2; /* Ensure text is above the overlay */
    animation: fadeIn 3s ease-in-out; /* Fade-in effect */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px); /* Slight upward motion */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

footer {
    text-align: center;
    padding: 15px 0;
    background-color: #4CAF50;
    color: white;
}

.slide {
    display: none;
    position: relative;
    width: 100%;
    height: 400px; /* Adjust height as needed */
    opacity: 0; /* Start with opacity 0 */
    transition: opacity 1.5s ease-in-out; /* Fade duration */

}

.slideshow-container {
    position: relative;
    max-width: 90%;
    margin: auto;
    overflow: hidden;
    height: 300px; /* Ensure the height is set */
    margin: 20px auto 0;
    border-radius: 15px; /* Change this value for more or less bevel */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Shadow effect */
}

.slide img {
    width: 100%; /* Full width of the slide */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Crop the image while covering the container */
    animation: fadeIn 1s ease-in-out; /* Apply fade-in animation */

}
 nav a:hover,
nav a:focus {
border-color: #45a049; /* Border color on hover */
opacity: 1; /* Make it fully visible */
background-color: rgba(72, 182, 72, 0.2); /* Optional background color on hover */
}

.container {
display: flex; /* Use flexbox for layout */
align-items: flex-start; /* Center vertically */
margin: 20px auto; /* Center the container horizontally */
max-width: 800px; /* Set a maximum width for the entire container */
}

.left-section {
flex: 0 0 auto; /* Prevent this section from growing */
}

.right-section {
flex: 0 0 auto; /* Match the text section width to the image section */
max-width: 300px; /* Set a maximum width for the text section */
padding: 20px; /* Optional padding for text */

}

.left-section img {
    max-width: 400px; /* Set a smaller max width for the image */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure there's no bottom space */
    border-radius: 15px; /* Adjust this value for more or less bevel */
    box-shadow: -20px 15px 30px rgba(0, 0, 0, 0.2); /* Add shadow effect */
}
.image-container {
    max-width: 600px; /* Maximum width for the image container */
    margin: 40px auto; /* Center the container */
    border-radius: 15px; /* Beveled corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Shadow effect */
    overflow: hidden; /* Ensures corners are rounded properly */
    animation: fadeIn 3s ease-in-out; /* Apply fade-in animation */

}

.image-container img {
    width: 100%; /* Makes the image responsive */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Removes bottom space */
    animation: fadeIn 3s ease-in-out; /* Apply fade-in animation */


}

.logo
{
    max-width: 300px;
}

.calltoaction
{
    background-color: white;
    border-radius: 15px; /* Beveled corners */
    width: 600px;
    height: 150 px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin: 0 auto; /* Center horizontally */

}


.image-container-services {
    max-width: 400px; /* Maximum width for the image container */
    max-height: 100px;
    margin: 40px auto; /* Center the container */
    border-radius: 15px; /* Beveled corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Shadow effect */
    overflow: hidden; /* Ensures corners are rounded properly */
    animation: fadeIn 3s ease-in-out; /* Apply fade-in animation */

}