/* Basic Reset */
body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

html {
    margin-right: calc(-1 * (100vw - 100%));
    overflow-y: scroll;
}

/* Font settings */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #000;
    color: #fff;
}

/* Header styles */
header {
    background-color: #000;
    color: white;
    text-align: center;
    padding: 20px 0;
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding and border in width calculation */
}

h1 {
    font-size: 36px; /* Example size for main headers */
    font-weight: bold; /* Heavier weight for primary headers */
    color: white; /* Darker shade for more emphasis */
    font-family: "Playfair";
    letter-spacing: 5px; /* Spacing out letters for more emphasis */
}

h2 {
    font-size: 18px; /* Slightly smaller than h1 */
    font-weight: 400; /* Lighter than h1 */
    color: #CCCCCC; /* Lighter or different tone */
    font-family: "Playfair";
}

/* Navigation styles */
nav {
    margin-top: 10px;
}

nav ul {
    padding: 0;
}

nav ul li {
    display: inline-block;
    margin-right: 20px;
}

nav a {
    color: #CCCCCC;
    text-decoration: none;
    font-weight: 500;
    font-family: "Playfair";
    display: inline-block; /* Aligns links in a row */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

nav a:hover {
    color: #555555; /* Changes text color on hover */
}

/* Dropdown Menu */
nav .dropdown-content {
    display: none;
    position: absolute;
    background-color: #000;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
}

nav .dropdown-content a {
    color: #CCCCCC;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

nav ul li:hover .dropdown-content {
    display: block; /* Show dropdown content on hover */
}

/* Footer styles */
footer {
    background-color: #000;
    color: #ddd;
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

.image-wrapper {
    display: flex; /* Uses flexbox to align children side by side */
    justify-content: center; /* Centers the children horizontally */
    align-items: center; /* Aligns children vertically */
    padding: 20px; /* Adds some space around the content */
}

.image-container {
    position: relative;
    width: 45%; /* Adjusted to less than half to fit side by side */
    margin: 0 2.5%; /* Adds space between the two containers */
    overflow: hidden;
}

.image-link img {
    width: 100%;
    display: block;
    opacity: 0;
    transition: opacity 1s ease;
    height: auto;
}

.image-link .image-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    padding: 10px; /* Padding around the text for better visibility */
    border-radius: 8px; /* Rounded corners for the background */
    opacity: 0;
    transition: opacity 1s ease 0.5s;
}

.image-container:hover .image-text {
    color: #ccc;
}

.about-section {
    padding: 20px;
    margin-top: 20px; /* Adds space between the navigation and the text */
    background-color: #000; /* Optional: for better readability */
    border-radius: 8px; /* Optional: if you want rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: adds subtle depth */
    max-width: 800px; /* Constrains the width for readability */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Centers the text */
}

.about-section h3 {
    color: #CCCCCC;
    margin-bottom: 10px;
}

.about-section p {
    color: #CCCCCC;
    font-size: 16px;
    line-height: 1.6;
}

.photo-gallery {
    padding: 20px;
    text-align: center;
}

.photo-gallery h3 {
    font-size: 28px; /* Larger font size */
    font-weight: bold; /* Bold font weight for emphasis */
    font-family: 'Arial', sans-serif; /* Modern, sans-serif font family */
    color: white; /* White text for contrast */
    text-align: center; /* Center-aligns the text */
    padding: 10px 0; /* Adds padding above and below the text */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adds a subtle shadow */
    margin-bottom: 20px; /* Space below the header */
    background-color: #000; /* Sets the background color to grey */
    display: inline-block; /* Limits the background to the text width */
    padding: 10px 20px; /* Padding for better readability */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow for depth */
    text-decoration: underline;
}

.images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.images img {
    max-width: 100%;
    height: auto;
    flex-grow: 1;
    flex-basis: calc(33.333% - 10px); /* Adjust based on desired number of columns */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

@media (max-width: 600px) {
    .images img {
        flex-basis: calc(50% - 10px); /* Larger images on smaller screens */
    }
}

#lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
    text-align: center;
}

#lightbox img {
    max-width: 90%;
    max-height: 80%;
    margin: auto;
}

.gallery-image {
    width: 50%; /* Reduces width to 50% of their container */
    height: auto; /* Keeps the height proportional to the width */
    display: block; /* Ensures images do not inline */
    margin: 0 auto; /* Centers images if they are smaller than the container width */
}

/* Dropdown Menu */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for background and color */
}

.nav ul li:hover .dropdown-content {
    display: block;
}

.dropdown-content a:hover {
    background-color: #555; /* Darker background on hover */
    color: white; /* Change text color to white on hover */
}

.playfair-regular {
    font-family: "Playfair", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
  }

.contact-form {
    background-color: #000; /* Black background for the form */
    padding: 20px;
    padding-left: 60px; /* Sets the distance from the left of the screen */
    width: 90%; /* Adjust width as needed */
    max-width: 1200px; /* Maximum width */
}

.form-group label {
    display: block; /* Ensures label is above the input */
    color: #CCCCCC; /* Labels inside the white box should be black for contrast */
    font-size: 15px;
    font-family: "Playfair";
}

.required {
    color: #777;
    font-size: smaller;
}

input[type="text"], input[type="email"], textarea {
    width: 100%;
    padding: 8px;
    margin-top: 5px; /* Space between label and input */
    box-sizing: border-box; /* Includes padding and border in the element's total width */
}

button[type="submit"] {
    background-color: #0056b3;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    display: block; /* Ensures it's a block level element */
    width: 100%; /* Button width matches inputs */
}

button[type="submit"]:hover {
    background-color: #003d80;
    width: 50%; /* Reduces the width to 50% of its container */
    padding: 10px 15px; /* Adjust padding as needed */
    margin: 0 auto; /* Centers the button */
    display: block; /* Necessary to enable margin auto to work */
    font-size: 1em; /* Adjust font size as needed */
}

#contact-title {
    font-size: 32px; /* Sets the size of the text */
    padding-left: 60px; /* Sets the distance from the left of the screen */
    margin-top: 20px; /* Adds space above the title, adjust as needed */
    color: white; /* Darker shade for more emphasis */
    font-family: "Playfair";
}

.form-row {
    display: flex;
    justify-content: space-between; /* Distributes space evenly between the first and last name */
}

.form-row .form-group {
    flex: 1; /* Allows fields to share space equally */
    margin-right: 20px; /* Adequate spacing between fields */
}

.form-row .form-group:last-child {
    margin-right: 0; /* No margin on the right for the last element in the row */
}

/* Targets all input types and textarea within the form */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%; /* Ensures full width within the container */
    padding: 8px; /* Padding for better text visibility */
    box-sizing: border-box; /* Includes padding and border in the element's width */
    resize: vertical; /* Allows resizing only in the vertical direction */
}

.contact-form .form-group {
    width: 100%; /* This will control the width for all fields uniformly */
    margin-bottom: 10px; /* Consistent spacing below each field */
}

#message {
    width: 100%;
    height: 120px; /* Set the height as needed */
    padding: 10px;
    box-sizing: border-box;
    resize: vertical; /* Only allow vertical resizing */
}

.contact-form button[type="submit"] {
    width: 10% !important;
    margin: 20px auto !important; /* Adds vertical space and centers horizontally */
    display: block !important;
}

/* Container holding the image and the text */
.gallery {
    position: relative;
    width: 800px;  /* Adjust based on your image size */
    overflow: hidden;  /* Ensures nothing spills outside the container */
}

/* Styles for the image */
.gallery img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease, filter 0.5s ease;  /* Smooth transition for scale and filter */
}

/* Darkening effect on hover */
.gallery:hover img {
    filter: brightness(70%);  /* Darken the image */
}

/* Styles for the text overlay */
.hover-text {
    position: absolute;
    top: 50%;  /* Center vertically */
    left: 50%;  /* Center horizontally */
    transform: translate(-50%, -50%);  /* Align the center */
    color: white;  /* Text color */
    font-size: 20px;  /* Text size */
    opacity: 0;  /* Initially hide the text */
    transition: opacity 0.5s ease;  /* Smooth transition for the text appearance */
    pointer-events: none;  /* Allows clicking through the text */
}

/* Show text when hovering over the container */
.gallery:hover .hover-text {
    opacity: 1;
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column; /* Stacks the fields vertically on smaller screens */
    }

    .form-row .form-group {
        margin-right: 0; /* Removes margin-right in vertical layout */
    }

    .contact-form {
        width: 100%; /* Makes the form take full width on smaller screens */
        padding-left: 20px; /* Reduce padding on smaller screens */
        max-width: none; /* Overrides any max-width set previously */
    }
    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form textarea {
        width: 100%; /* Ensure full width on mobile for accessibility */
    }
}