/* A Modern CSS Reset */
*, *::before, *::after {
    box-sizing: border-box; /* Ensures padding and borders are included in the element's total width/height */
    margin: 0;            /* Removes default outer spacing (margins) */
    padding: 0;           /* Removes default inner spacing (padding) */
}

/* --- Global Resets & Body Styles --- */
body, h1, h3, p, ul, li {
    margin: 0;
    padding: 0;
    font-family: sans-serif;

}
h4{
    text-align: center;
    font-family: monospace;
    font-size: 1.5rem;
    font-style: italic;
    color: #3c48ee;
}

h2{
    text-align: center;
    font-family: monospace;
    font-size: 1.5rem;
    font-style: italic;
    color: #3c48ee;
}
h3{
    margin: 0;
    padding: 0;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
}
body {
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    scroll-behavior: smooth; 
    margin: 0;
    padding: 0;
}

main {
    flex: 1;
}

section {
    padding: 0;
    margin-bottom: 20px;
}

img{
    display: block;
    
}

/* --- NEW COLUMN STYLES --- */

.two-column-container {
    display: flex;       /* Activates Flexbox */
    justify-content: space-between; /* Pushes columns apart */
    gap: 40px;           /* Space between the columns */
    /*margin-top: 20px;    /* Space below the H2 title */
    width: 100%;
    flex-wrap: nowrap;
    text-align: justify;
    align-items: stretch;
    max-width: 900px;
    margin: 0 auto;
    
    
}

.column {
    flex: 3;             /* Ensures both columns take up equal space */
    padding: 2px;       /* Inner padding for content */
    /*background-color: #ffffff; /* White background for visibility */
    border-radius: 15px;  /* Rounded corners */
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
    /*max-width: 75%;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: dashed;
   
}

.two-column-container1 {
    display: flex;       /* Activates Flexbox */
    justify-content: space-between; /* Pushes columns apart */
    gap: 40px;           /* Space between the columns */
    /*margin-top: 20px;    /* Space below the H2 title */
    width: 100%;
    flex-wrap: nowrap;
    text-align: justify;
    align-items: stretch;
    max-width: 900px;
    margin: 0 auto;
}

.column1 {
    flex: 3;             /* Ensures both columns take up equal space */
    padding: 2px;       /* Inner padding for content */
    /*background-color: #ffffff; /* White background for visibility */
    /*border-radius: 8px;  /* Rounded corners */
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
    /*max-width: 75%;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.column h3 {
    margin-bottom: 10px;
    color: #007bff;
}

.column p {
    margin-bottom: 10px;
}

/* Optional: Make the layout responsive for small screens */
/*@media (max-width: 768px) {
    .two-column-container {
        flex-direction: column; /* Stack columns vertically on mobile 
    }
}*/

/* --- REST OF THE STYLES (Banner, Nav, Footer) --- */

.banner {
    background-color: #6598c7;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.banner1 {
    /*background-color: #333;*/
    color: #469eb9;
    font-size: 1.1rem;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(172, 21, 127, 0.1);
}

.banner2 {
    background-color: #a9b886;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.tabletitle {
   
    text-align: right;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.navbar {
   
    padding: 10px 0;
    position: sticky; 
    top: 0;
    z-index: 10;
}

.nav-list {
    list-style-type: none;
    display: flex;
    justify-content: center;
}
/* ... (rest of the nav-button styles from previous prompt) ... */
.nav-button {
    display: block;
    color: white;
    background-color: #6598c7;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.nav-buttonf {
    display: block;
    color: white;
    background-color: #c27a1c;
    padding: 10px 1px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    text-align: center;
}

.nav-button:hover {
    background-color: #0056b3;
}

.nav-buttonf:hover {
    background-color: #912891;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: left;
    padding: 15px 0;
    margin-top: auto;
}

.footer-link {
    color: #007bff;
    text-decoration: none;
}


/* --- Photo Gallery Table Styles (NEW) --- */
.photo-table {
    width: 875px; /* Set a specific width for the whole table (4 * 150px images + padding/borders) */
    border-collapse: collapse; /* Removes space between borders */
    /*margin: 20px auto; /* Centers the table on the page */
    border: 2px solid #333;
    align-content: center;
}

.photo-table td {
    border: 1px solid #ccc;
    padding: 5px;
    text-align: center;
    width: 175px; /* Set a fixed width for each cell */
    height: 175px; /* Set a fixed height for each cell */
    overflow: hidden; /* Hides any part of the image that goes over the cell size */
        /* Ensures content inside is centered horizontally by default */
    /*text-align: center; 
    /* Ensures content inside is centered vertically by default */
    /*vertical-align: middle; */
    filter: brightness(45%);
    
}

.photo-table img {
    width: 100%; /* Makes the image fill the width of the TD cell */
    height: 100%; /* Makes the image fill the height of the TD cell */
    object-fit: cover; /* Ensures the image covers the area without stretching, cropping as needed */
    display: block; /* Removes default bottom margin that images sometimes have */
}

.photo-table1{
    width: 50%; /* Makes the image fill the width of the TD cell */
    height: 50%; /* Makes the image fill the height of the TD cell */
    object-fit: cover; /* Ensures the image covers the area without stretching, cropping as needed */
    display: block; /* Removes default bottom margin that images sometimes have */
}

.image-wrapper {
    flex: 1; /* Takes up 1 part of the space (1/4 = 25%) */
    /* ensures the image container takes exactly 25% */
}

.responsive-image {
    width: 100%;       /* Ensures image fills its 25% wrapper */
    height: 100%;      /* Makes image fill the height of the container */
    object-fit: cover; /* Ensures image covers the space without distortion */
    display: block;
    border-radius: 15px;
}

.image-wrapper1 {
    flex: 3; /* Takes up 1 part of the space (1/4 = 25%) */
    /* ensures the image container takes exactly 25% */
}

.responsive-image1 {
    width: 100%;       /* Ensures image fills its 25% wrapper */
    height: 100%;      /* Makes image fill the height of the container */
    object-fit: cover; /* Ensures image covers the space without distortion */
    display: block;
    border-radius: 15px;
}

/* --- Styles for the Center Button Cell (NEW) --- */
.center-button-cell {
    background-color: #eee; /* Light gray background for contrast */
    height: 310px; /* Adjust height to fill the space of two 150px cells + padding/borders */
    width: 310px;  /* Adjust width to fill the space of two 150px cells + padding/borders */
}

/* --- Styles for the "Show" Button (NEW) --- */
.show-button {
    padding: 20px 40px;
    font-size: 1.5rem;
    background-color: #976332; /* Green color */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s;
}

.show-button:hover {
    background-color: #45a1d6; /* Darker green on hover */
}

.gallery-container {
    position: relative; /* This is the anchor for the absolutely positioned button */
    width: 875px;       /* Match the table width */
    margin: auto;  /* Centers the whole container/table combo */
}

/* --- Styles for the "Show" Overlay Button (NEW) --- */
.show-overlay-button {
    position: absolute; /* Takes the button out of the flow and overlays it */
    top: 50%;           /* Moves the top edge of the button to the middle of the container */
    left: 50%;          /* Moves the left edge of the button to the middle of the container */
    transform: translate(-50%, -50%); /* Shifts the button back by half its own width/height to center it perfectly */
    z-index: 10;        /* Ensures the button appears on top of the images/table */

    /* Button styling */
    padding: 20px 40px;
    font-size: 1.5rem;
    background-color: #dbd35d; 
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s;
}

.show-overlay-button:hover {
    background-color: #68c2dd;
}

/* ... (All previous CSS styles for body, banner, nav, columns, gallery, button) ... */

/* --- Image Overlay Styles (NEW SECTION) --- */
.image-overlay-container {
    position: relative; /* Anchor for the text */
    width: 100%;        /* Fills the content area width */
    max-width: 800px;   /* Optional: Keep the image from getting too large */
    margin: 20px auto;  /* Centers the container */
    overflow: hidden;   /* Ensures text/image stays within bounds */
    border-radius: 8px; /* Nice rounded corners */
    height: 50%;
}
.image-container {
    position: relative; /* */
    width: 100%; /* Ensure container takes full width of its parent */
    max-width: 875px; /* Optional: Set a maximum width for the image container */
    margin: 0 auto; /* Center the container on the page */
    height: auto;
}

.overlay-image {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(35%); 
    object-fit: cover;
}

.overlay-text {
    position: absolute; /* Takes text out of flow */
    top: 25%;           /* Center vertically */
    left: 0;          /* Center horizontally */
    transform: translate(-1%, -1%); /* Perfect centering */
    color: white;       /* White text */
    text-align: center;
    padding: 10px;
    width: 100%;
    bottom: 0;

}

.overlay-text h3 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: white; /* Ensure heading stays white */
}

.overlay-text p {
    font-size: 1.1rem;
    margin-bottom: 20px;
}
.crop-container {
    width: 4000px;  /* Set the container width to exactly half of the image width */
    height: 800px; /* Set the container height to match the image height */
    overflow: hidden; /* Hides anything outside this box (crops the right half) */
    margin: 20px auto; 
    border: 1px solid red;
}

.crop-container img {
    /* The image itself is the original size (800px), 
       but the container only lets you see the first 400px */
    width: 400px;
    height: 800px;
    display: block;
}
.header-inline-container {
    /* Ensures items inside are treated as a single line */
    display: inline-block; 
}

.header-main-title {
    font-size: .9rem;
    /*font-weight: bold;
    /* Adds space to the right of the first sentence */
    margin-right: 10px; 
    /* Ensures it stays inline with other span elements */
    display: inline;
}

.header-separator {
    font-size: 1rem;
    color: #aaa; /* A slightly muted color for the separator */
    vertical-align: middle;
}

.header-second-sentence {
    font-size: .9rem;
    /* Adds space to the left of the second sentence */
    margin-left: 10px;
    /* Ensures it stays inline with other span elements */
    display: inline;
    vertical-align: middle; /* Aligns text vertically with the larger title/separator */
   
}

.add-to-cart {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    margin-bottom: 5px;
}