/* General Styles */
body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    background-color: #f8f9fa;
}

/* Main section */
main {
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    background-color: #fff; 
    overflow-x: hidden;
}

main img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 60px;
    max-width: 1920px;
}

/* Style for the paragraph text in the main section */
.intro p {
    font-size: 35px;
    line-height: 1.6;
    max-width: 1700px;
    text-align: center;
    color: #333;
    margin-bottom: 40px;
    padding: 0 20px;
    letter-spacing: 0.5px;
}

/* Services container with overall styling */
.services-container {
    display: flex;
    justify-content: center;
    max-width: 1700px;
    margin: 40px auto;
}

/* Column container with spacing between services */
.column {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Service item styling */
.service-item {
    display: flex;
    gap: 20px;
    background-color: #fafafa;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    align-items: center;
    justify-content: center; /* Centers content horizontally */
    text-align: center;
}

/* Description styling */
.description {
    flex: 1;
    max-width: 500px; /* Limits the width of text for better readability */
    font-family: 'Roboto', sans-serif;
    text-align: center; /* Center-align text */
}

.description h1 {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    font-family: 'Poppins', sans-serif;
}

.description p {
    font-size: 18px;
    line-height: 1.7;
    color: #555;
    text-align: center;
}

/* Video container styling */
.video-container {
    flex: 0 1 400px;
    max-width: 400px;
    max-height: 100%;
    background-color: #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Ensure content does not overflow the container */
}

.video-container video {
    width: 100%;
    height: 100%; /* Ensures the video stretches to fit the container */
    object-fit: cover; /* Ensures the video maintains its aspect ratio while filling the container */
    border-radius: 10px;
}

/* Hover effect */
.service-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.intro {
    width: 100vw; /* Full viewport width */
    background-color: #d6f5d6; /* Soft green background */
    padding: 50px 20px; /* Padding for breathing room */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center; /* Center the text */
    margin-bottom: 40px;
}

/* Heading (h1) styling */
.intro h1 {
    font-size: 4rem; /* Larger font for the heading */
    font-family: 'Poppins', sans-serif; /* Modern, clean font */
    color: #2c5f2d; /* Darker green for contrast */
    margin-bottom: 20px; /* Space between the heading and paragraph */
}

/* Paragraph (p) styling */
.intro p {
    font-size: 1.5rem; /* Larger font for the paragraph */
    font-family: 'Arial', sans-serif; /* Simple and clean font */
    color: #333; /* Dark gray for readability */
    max-width: 1000px; /* Limit the width of the paragraph for readability */
    line-height: 1.8; /* Increased line height for better readability */
    margin: 0 auto; /* Center the paragraph horizontally */
}

@media screen and (max-width: 1200px) {
    .service-item {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        gap: 20px; /* Maintain spacing between items */
        background-color: #fafafa;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        align-items: center; /* Center items horizontally */
        justify-content: center; /* Center items vertically */
        text-align: center;
    }

}