/* Global styles */
body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #2a2a2a;
}

html {
    scroll-behavior: smooth;
}

/* Header styles */
header {
    background-color: #2a2a2a;
    color: white;
    text-align: center;
    padding: 1.5em 0;
    
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

header h1 {
    margin: 0;
    padding-bottom: 10px; /* Adds some space between the text and the line */
    border-bottom: 1px solid #fff; /* Adds a thin white line beneath the h1 */
    display: inline-block; /* Limits the width of the line to the text */
}



header nav {
    margin-top: 10px;
}

header nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
}

header nav a:hover {
    text-decoration: underline;
}

/* Dropdown Menu Styles */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    color: white; /* Same color as other nav items */
    text-decoration: none;
    font-weight: bold;
    padding: 0 15px;
}

.dropdown-content {
    display: none; /* Hidden by default */
    position: absolute;
    background-color: #2a2a2a; /* Matches header background */
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Subtle shadow for dropdown */
    z-index: 1000;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-weight: normal;
}

.dropdown-content a:hover {
    background-color: #575757; /* Slightly lighter gray for hover effect */
}

.dropdown:hover .dropdown-content {
    display: block; /* Show dropdown when hovering over the parent */
}

.dropdown:hover .dropbtn {
    text-decoration: underline; /* Optional: underline the parent link on hover */
}

/* Section styles */
section {
    padding: 5em 0;
    text-align: center;
}

section h2 {
    font-size: 2.5em;
    margin-bottom: 1em;
}

section p {
    font-size: 1.1em;
    margin-bottom: 2em;
}

.content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2em;
}

/* About section with background */
/* Full-screen Background for About Section */
/*#about {
/*    position: relative;
/*    background-image: url('Images/AaD17.jpeg'); 
/*    background-size: cover; /* Ensure the image covers the entire section */
/*    background-position: center; /* Center the image */
/*    background-attachment: fixed; /* Optional: Creates a parallax effect */
/*    background-repeat: no-repeat;
/*    min-height: 100vh; /* Make the section fill the viewport height */
/*    display: flex; /* Flexbox for centering content */
/*    justify-content: center; /* Center horizontally */
/*    align-items: center; /* Center vertically */
/*    text-align: center; /* Align text to center */
/*    color: white; /* Text color */
/*    padding: 0 2em; /* Add padding for responsive spacing */


#about {
    position: relative;
    background-image: url('Images/AaD9.JPG'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 0 2em;
    background-attachment: fixed; /* For desktop */
    will-change: transform;
}

@media (max-width: 768px) {
    #about {
        background-attachment: scroll; /* Disable fixed background for mobile */
        background-size: cover;
    }
}
    
@media (max-width: 768px) {
    .gallery-container {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Adjusts column size dynamically */
    }

    .gallery-container .gallery-item.small-item {
        grid-column: span 2 !important; /* Ensure it takes up more space */
        width: 100%; /* Full width */
    }
}

@media (max-width: 768px) {
    header .social-icons {
        display: none !important; /* Adding !important to force it to override any conflicting styles */
    }
    header h1 {
        padding: 0 10px; /* Adds padding to the left and right of the h1 */
    }
}


#about h2 {
    font-size: 5rem; /* Adjust font size */
    /*font-weight: 8;*/
    margin-bottom: 0.5em;
    margin-top: -0.75em;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Improves readability */
}

#about p {
    font-size: 1.5rem;
    margin-top: 0;
    line-height: 1.8;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Matches the heading's shadow */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #about h2 {
        font-size: 2.5rem; /* Reduce font size for smaller screens */
    }
    #about p {
        font-size: 1.2rem;
    }
}

/* Services section */
#services {
    background-color: #f8f8f8;
}

#services h2, #services p {
    color: #2a2a2a;
}

/* Gallery Section */


.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Creates a responsive grid */
    grid-gap: 20px; /* Adds space between the images */
}

.gallery-item img {
    width: 100%; /* Makes sure the image fills its container */
    height: auto;
    border-radius: 8px; /* Optional: Adds rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow to the images */
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Hover Effect */
.gallery-item:hover img {
    transform: scale(1.05); /* Slight zoom effect */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
}

/* Kitchens section */
#kitchens {
    padding: 2em;
    text-align: center;
}

#kitchens h2 {
    font-size: 2.5em;
    margin-bottom: 1em;
    color: #2a2a2a;
}

/* Kitchen description section */

#kitchen-description h2 {
    font-size: 2.5em;
    margin-bottom: 1em;
    color: #2a2a2a;
}

#kitchen-description p {
    font-size: 1.2em;
    line-height: 1.6;
    color: #555;
    max-width: 800px;
    margin: 0 auto;
}

#kitchen-description a {
    color: #007BFF; /* Blue link color */
    text-decoration: none;
}

#kitchen-description a:hover {
    text-decoration: underline;
}

/* Custom Grid Item Sizes */
.large-item {
    grid-column: span 2; /* Makes the item span 2 columns */
    grid-row: span 2; /* Makes the item span 2 rows */
}

.small-item {
    grid-column: span 1; /* Makes the item span 1 column */
    grid-row: span 1; /* Makes the item span 1 row */
}




#contact a {
    color: #007BFF; /* Blue link color */
    text-decoration: none;
    margin: 0 5px; /* Optional: Adds spacing between links */
}

#contact a:hover {
    text-decoration: underline; /* Underline on hover for all links */
}

/* Contact section */
#contact {
    padding: 2em;
    padding-bottom: 4em;
    text-align: center;
    margin-bottom: 0; /* Removes gap below the contact section */
}

footer {
    background-color: #2a2a2a;
    color: #fff;
    text-align: center;
    padding: 1em 0;
    margin-top: 0; /* Removes gap above the footer */
}

/* Apply Playfair Display font to headings */
h1, h2, h3, body {
    font-family: 'Playfair Display', serif;
}

.seriousText{
    font-family: 'Lato', sans-serif;
}

.social-icons {
    position: absolute;
    top: 15px; /* Adjust for spacing from the top */
    right: 15px; /* Adjust for spacing from the right */
    display: flex;
    gap: 10px; /* Adds spacing between the icons */
    flex-direction: row; /* Default horizontal direction */
}

.social-icon {
    color: white; /* Matches the header text color */
    font-size: 1.5em; /* Adjust icon size */
    text-decoration: none;
    transition: transform 0.3s, color 0.3s; /* Smooth hover effect */
}

.social-icon:hover {
    color: #007BFF; /* Change color on hover */
    transform: scale(1.1); /* Slightly enlarge the icon on hover */
}

/* Responsive vertical layout when screen width is small */
@media (max-width: 600px) {
    .social-icons {
        flex-direction: column; /* Change to vertical layout */
        top: 10px; /* Adjust spacing for smaller screens */
        right: 10px;
        gap: 5px; /* Reduce spacing between icons for a tighter layout */
    }
    .social-icon {
        font-size: 1.3em; /* Slightly smaller icons on small screens */
    }
}

/* Specific adjustments for furniture and cabinetry galleries if needed */
#furniture .gallery-container, 
#cabinetry .gallery-container {
    padding: 0 2em; /* Matches the padding in kitchens gallery */
}

/* Furniture Gallery Specific Grid */


#furniture .gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Rounded corners for images */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Hover Effect for Furniture Gallery */
#furniture .gallery-item:hover img {
    transform: scale(1.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

/* Custom Layout for Furniture Images */
#furniture .gallery-item.large-item {
    grid-column: span 2; /* Larger items span 2 columns */
    grid-row: span 2; /* Larger items span 2 rows */
}

#furniture .gallery-item.small-item {
    grid-column: span 1; /* Smaller items span 1 column */
    grid-row: span 1; /* Smaller items span 1 row */
}

/* Responsive Adjustments for Furniture Gallery */
@media (max-width: 768px) {
    #furniture .gallery-container {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Smaller grid columns for mobile */
    }
    #furniture .gallery-item.large-item {
        grid-column: span 1; /* Large items occupy 1 column on smaller screens */
        grid-row: span 1; /* Large items occupy 1 row */
    }
}

#furniture {
    background-color: #f8f8f8; /* Matches the kitchens section background */
    padding: 2em 0;
    text-align: center;
}

#furniture h2 {
    font-size: 2.5em;
    margin-bottom: 1em;
    color: #2a2a2a; /* Matches the heading color of the kitchens section */
}

#furniture p {
    font-size: 1.1em;
    line-height: 1.6;
    color: #555; /* Matches the text color of the kitchens section */
    max-width: 800px;
    margin: 0 auto 2em;
}

/* Restorations Section */
#restorations {
    background-color: #fff;
    padding: 4em 2em;
    text-align: center;
}

#restorations h2 {
    font-size: 2.5em;
    margin-bottom: 1em;
    color: #2a2a2a;
}

#restorations p {
    font-size: 1.1em;
    line-height: 1.6;
    color: #555;
    max-width: 800px;
    margin: 0 auto 2em;
}

/* Gallery for Before/After Pairs */
.restoration-gallery {
    display: flex;
    flex-direction: column;
    gap: 2em;
    align-items: center;
    justify-content: center;
}

.restoration-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2em;
    width: 100%;
    max-width: 900px;
}

.restoration-pair img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.restoration-pair img:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}