body {
    background: linear-gradient(135deg, #D1C6B7 0%, #E8DDD4 50%, #C4B5A0 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: Arial, sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
    height: 100vh; /* Ensure the body takes up the full viewport height */
}

/* Ensure content is layered on top of the background */
.hero {
    position: relative; /* Create a stacking context */
    z-index: 1; /* Ensure content is above the background */
    background-color: rgba(255, 255, 255, 0.9);/* White with 65% opacity */
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
}

.about, .services, .contact, footer {
    position: relative; /* Create a stacking context */
    z-index: 1; /* Ensure content is above the background */
    background-color: rgba(255, 255, 255, 0.7);/* White with 65% opacity */
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    padding-top: 10px; /* Add padding to the top */
}

.about h2,
.services h2,
.contact h2 {
    margin-top: 10px; /* Remove top margin for headings */
    margin-bottom: 10px; /* Adjust this value as needed */
}

/* Style the header and footer to stand out */
header, footer {
    background-color: rgba(51, 51, 51, 0.9);
    color: white;
    text-align: center;
    padding: 10px;
}
/*
.details-image {
    width: 300px;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}*/

.details-image {
    flex: 0 0 300px; /* Fixed width for image */
    max-width: 300px;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

/*
style for display elements side by side
and rounding the corners
*/
.section-details {
    display: flex;
    flex-wrap: wrap;
/*    justify-content: space-between;*/
    align-items: flex-start; /* Align items to the top */
    gap: 24px;
}

.section-details h2 {
    flex-basis: 100%; /* Make h2 take full width above the row */
    margin-bottom: 0px;
}

.list-details {
    flex: 1 1 300px; /* Grow, shrink, min width */
    min-width: 220px;
    margin-right: 0; /* Remove if using gap */
}

/*
style for the list of details should have an minimum width
 */
/*
.list-details {
    min-width: 330px;
    margin-right: 20px;
}
*