/* General Styles */
body {
    font-family: Arial, sans-serif; /* Set a default font */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    color: #333; /* Default text color */
}

/* Header Styles */
header {
    background-color: black; /* Keep the header black */
    text-align: center; /* Center the text */
    padding: 20px 0; /* Add some padding */
    color: white;
}

nav ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
    display: inline-block; /* Center the list */
}

nav ul li {
    display: inline; /* Display list items in a row */
    margin: 0 15px; /* Add space between items */
}

nav a {
    color: white; /* Keep text white */
    text-decoration: none; /* Remove underline */
}

/* Title Styles */
header h1 {
    font-size: 3em; /* Increase font size */
    margin: 0; /* Remove default margin */
    color: white;
}

/* Hero Section Styles */
.hero {
    position: relative;
    height: 100vh; /* Full height */
    overflow: hidden; /* Hide overflow */
}

.background-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    transition: opacity 1s ease-in-out; /* Fade effect */
}

.slide {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0; /* Start hidden */
}

.slide.active {
    opacity: 1; /* Show active slide */
}

/* General Image Styles */
img {
    max-width: 50%; /* Ensure images do not exceed the width of their container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove bottom space under images */
    margin: 0 auto; /* Center images if they are block elements */
}

/* Specific Styles for Photography Sections */
.portfolio-items {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center items */
    flex-wrap: wrap; /* Allow wrapping */
    padding: 20px; /* Add padding around the portfolio items */
}

.portfolio-items .item {
    margin: 20px auto; /* Add margin around items */
    text-align: center; /* Center text */
    max-width: 300px; /* Set a maximum width for each item */
    overflow: hidden; /* Hide overflow if necessary */
}

.portfolio-items .item img {
    border-radius: 8px; /* Optional: Add rounded corners to images */
}

/* Footer Styles */
footer {
    text-align: center; /* Center text */
    padding: 20px 0; /* Add padding */
    background-color: #f1f1f1; /* Light background */
}