/* 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, 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: 0;/*20px*/
}

img{
    display: block;
    
}

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

.two-column-container {
    display: flex;       /* Activates Flexbox */
    justify-content: space-between; /* Pushes columns apart */
    gap: 30px;           /* 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: 2;             /* 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: 30px;           /* 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: 2;             /* 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;
}


@media screen and (max-width: 768px){
.two-column-container {
    display: flex;       /* Activates Flexbox */
    justify-content: space-between; /* Pushes columns apart */
    gap: 30px;           /* 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: 875px;*/
    margin: 0 auto;
    
    
}

.column {
    flex: 2;             /* 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: 30px;           /* 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: 875px;*/
    margin: 0 auto;
}

.column1 {
    flex: 2;             /* 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: 640px; /* 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: 150px; /* Set a fixed width for each cell */
    height: 150px; /* 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 */
}


@media screen and (max-width: 768px){
/* --- Photo Gallery Table Styles (NEW) --- */
.photo-table {
    width: 640px; /* 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: 150px; /* Set a fixed width for each cell */
    height: 150px; /* 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: 640px;       /* Match the table width */
    margin: auto;  /* Centers the whole container/table combo */
}


@media screen and (max-width: 768px){
.gallery-container {
    position: relative; /* This is the anchor for the absolutely positioned button */
    width: 640px;       /* 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;
}
/*image scroll*/
.scroll-wrapperq {
  width: 100%;
  /* Change to 'auto' for iPhone, but hide scrollbar with CSS */
  overflow-x: auto; 
  overflow-y: hidden;
  padding: 30px 0; 
  cursor: crosshair;
  max-width: 900px;
  margin: 0 auto;
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -webkit-overflow-scrolling: touch; /* Essential for iPhone smooth scrolling */
}

/* Hide scrollbar for Chrome/Safari (iPhone) */
.scroll-wrapperq::-webkit-scrollbar {
  display: none;
}

.scroll-contentq {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 0 50px;
  /* On mobile, we use native scroll, on desktop we use JS transform */
  transition: transform 0.1s ease-out; 
}

.zoom-imgq {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 15px;
  transition: transform 0.3s ease;
  pointer-events: auto;
  /* CUTS 25% OFF THE BOTTOM */
  /*clip-path: inset(0 0 25% 0);
  /* Prevents iOS from trying to "pick up" the image while swiping */
  -webkit-user-drag: none;
}

.zoom-imgq:hover {
  transform: scale(1.5);
  z-index: 999;
  box-shadow: 0 20px 40px rgba(207, 243, 5, 0.6);
}

@media (max-width: 768px) {
  .scroll-contentq {
    /* Disable JS transform on mobile to allow native finger swiping */
    transform: none !important; 
    padding: 0 20px;
  }
  .zoom-imgq {
    width: 150px; /* Larger for touch targets */
    height: 150px;
    
    /*width: 150px;           /* Fixed width */
    /*height: 150px;          /* Fixed height to keep it square */
    /*object-fit: cover;      /* This prevents the image from looking "stretched" */
    /*border-radius: 10px;    /* Optional: adds nice rounded corners */
    /*display: block;         /* Centers the image */
    /*margin: 0 auto 10px; */
  
}
/*new test*/
/* Anchor the buttons to this wrapper */
.scroll-wrapperqw {
    position: relative; 
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    overflow-x: auto;
    padding: 80px 0; /* Extra space so zoom doesn't hide buttons */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

/* Container to center the two buttons together */
.button-groupw {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the entire group perfectly */
    display: flex;
    gap: 15px; /* Space between Show and Shop buttons */
    z-index: 1000;
    pointer-events: none; /* Let clicks pass through to images IF you miss a button */
}

.show-overlay-buttonw {
    pointer-events: auto; /* Re-enable clicks for the actual buttons */
    padding: 15px 30px;
    font-size: 1.2rem;
    background-color: #dbd35d; 
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s, transform 0.3s;
    white-space: nowrap; /* Keeps text on one line */
}

.show-overlay-buttonw:hover {
    background-color: #68c2dd;
    transform: scale(1.05);
}

/* Ensure images don't hide buttons on mobile */
@media (max-width: 768px) {
    .button-groupw {
        width: 90%;
        justify-content: center;
    }
    .show-overlay-buttonw {
        padding: 10px 20px;
        font-size: 1rem;
    }
}

/*test*/
.scroll-wrapperql {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 100px 0;
    /* IPHONE FIXES */
    overflow-x: auto; /* Enable native horizontal swipe for touch */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Momentum scroll for iOS */
    scrollbar-width: none; /* Hide scrollbar Firefox */
    overscroll-behavior-x: contain; /* Prevent Safari back-swipe gesture */
}

/* Hide scrollbars for Chrome/Safari/iPhone */
.scroll-wrapperql::-webkit-scrollbar {
    display: none;
}

.scroll-contentql {
    display: flex;
    gap: 20px;
    width: max-content;
    padding: 0 100px;
    will-change: transform;
    /* Transition only for Desktop (overridden in JS for mobile) */
    transition: transform 0.1s ease-out;
}

/* Fixed Center Buttons */
.button-groupl {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 15px;
    z-index: 1000;
    pointer-events: none; /* Clicks pass through group to images */
}

.show-overlay-buttonl {
    pointer-events: auto; /* Re-enable clicks for buttons */
    padding: 15px 30px;
    background-color: #dbd35d;
    color: white;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}


/*testcolun*/
/* Container Layout */
.two-column-containerx {
    display: flex;
    align-items: center; /* Vertically centers text with image */
    justify-content: center;
    gap: 50px;           /* More breathing room between image and text */
    max-width: 1000px;
    margin: 30px auto;   /* Space above/below the section */
    padding: 0 20px;
}

/* Image Styling */
.image-wrapperx {
    flex: 1;
    overflow: hidden;
    border-radius: 20px; /* Modern rounded corners */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Soft depth */
}

.responsive-imagex {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.image-wrapperx:hover .responsive-image {
    transform: scale(1.05); /* Subtle zoom effect */
}

/* Text Content Styling */
.columnx {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligns text to the left */
}

.subtitlex {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 8px;
    text-align: center;
}

.columnx h3 {
    font-size: 2.5rem;
    margin: 0 0 15px 0;
    color: #333;
}

.columnx p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 25px;
    text-align: left; /* Justify often creates awkward gaps; left is cleaner */
}

/* Button Styling */
.nav-buttonx {
    display: inline-block;
    padding: 12px 28px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.nav-buttonx:hover {
    background-color: #555;
}

/* Responsive: Stack columns on mobile */
@media (max-width: 768px) {
    .two-column-containerx {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    .columnx {
        align-items: center;
    }
}



/*testcolum2*/
/* Container Layout */
.two-column-containerp {
    display: flex;
    flex-direction: column; /* Stack vertically on iPhone */
    gap: 20px;
    padding: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Image Styling */
.image-wrapperp {
    flex: 1;
    overflow: hidden;
    border-radius: 20px; /* Modern rounded corners */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Soft depth */
}

.image-wrapperp img {
    width: 100%;           /* Scale image to fit screen */
    height: auto;
    border-radius: 12px;   /* Modern look */
}

.responsive-imagep {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.image-wrapperp:hover .responsive-image {
    transform: scale(1.05); /* Subtle zoom effect */
}

/* Text Content Styling */
.columnp {
    text-align: center;    /* Center text for mobile users */
}

.subtitlep {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 8px;
}

.columnp h3p {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.columnp p {
    line-height: 1.6;
    color: #444;
}

/* Button Styling */
.nav-buttonp {
    display: inline-block;
    padding: 12px 28px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.nav-buttonp:hover {
    background-color: #555;
}

/* Responsive: Stack columns on mobile */
/* 2. DESKTOP STYLES (Applies to screens wider than 768px) */
@media (min-width: 768px) {
    .two-column-containerp {
        flex-direction: row;     /* Side-by-side on Desktop */
        align-items: center;     /* Vertically align text & image */
        text-align: left;        /* Standard desktop alignment */
        gap: 50px;
    }

    .image-wrapperp, .columnp {
        flex: 1;                 /* Give both equal space */
    }

    .columnp h3p {
        font-size: 2.5rem;       /* Larger text for big screens */
    }
}


/*----------specification--------*/
/* General container for spacing and responsiveness */
.specs-container {
    max-width: 900px;
    margin: 40px auto; /* Centers the content on desktop */
    padding: 0 20px;   /* Adds spacing on iPhones */
    font-family: sans-serif;
    color: #333;
}

.specs-container h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #222;
    font-size: 2rem;
}

.specs-container p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Bullet list styling */
.material-list-wrapper h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    border-left: 4px solid #70bfdf; /* Matches your previous design color */
    padding-left: 10px;
}

.material-list-wrapper ul {
    list-style-type: none; /* Removes default bullets */
    padding: 0;
}

.material-list-wrapper li {
    background: #f9f9f9;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 8px;
    line-height: 1.5;
}

.material-list-wrapper li strong {
    color: #000;
}

/*new cart*/
    /* Responsive Table/Grid Logic */
    .cart-container {
        max-width: 1000px;
        margin: 20px auto;
        padding: 0 15px;
    }

    #cart-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    #cart-table th {
        background-color: #f4f4f4;
        padding: 12px;
        text-align: left;
        border-bottom: 2px solid #ddd;
    }

    #cart-table td {
        padding: 12px;
        border-bottom: 1px solid #eee;
        vertical-align: middle;
    }

    /* Total and Buttons Styling */
    .cart-footer {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 15px;
        margin-top: 20px;
    }

    .grand-total-text {
        font-size: 1.5rem;
        font-weight: bold;
    }

    .checkout-btn {
        background-color: #28a745;
        color: white;
        padding: 15px 30px;
        border: none;
        border-radius: 8px;
        font-size: 1.2rem;
        cursor: pointer;
        width: 100%; /* Full width on mobile */
        max-width: 300px;
    }

    /* MOBILE OPTIMIZATION (iPhone) */
    @media (max-width: 600px) {
        /* Force the table to stop being a table */
        #cart-table thead { display: none; } /* Hide headers on mobile */
        
        #cart-table tr {
            display: block;
            border: 1px solid #ddd;
            margin-bottom: 15px;
            border-radius: 10px;
            padding: 10px;
            background: #fff;
        }

        #cart-table td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f0f0f0;
            padding: 8px 0;
            text-align: right;
        }

        /* Add labels before each piece of data on mobile */
        #cart-table td::before {
            content: attr(data-label); /* Uses a data attribute for titles */
            font-weight: bold;
            text-align: left;
            flex: 1;
        }

        #cart-table td:last-child { border-bottom: none; }

        .cart-footer {
            align-items: center;
            text-align: center;
        }
    }

/*about*/

   /* The main container */
    .story-section {
        position: relative; /* relative Required for the background positioning */
        padding: 80px 20px;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        /*background-color: #fff; /* Base color under the image */
    }

    /* The background image layer */
    .story-section::before {
        content: "";
        position: absolute;
        top: 0; 
        left: 0;
        width: 100%; 
        height: 100%;
        
        /* Replace 'grandma-yarn.jpg' with your image path */
        background-image: url('logos.png'); 
        background-size: cover;
        background-position: center;
        
        /* 35% Transparency for the image only */
        opacity: 0.35; 
        z-index: 1;
    }

    /* The Text Content Layer */
    .story-content {
        position: relative;
        z-index: 2; /* Sits above the transparent image */
        max-width: 800px;
        margin: 0 auto;
        padding: 40px;
        /* Optional: Add a very slight blur or white tint to help readability */
        /*background: rgba(255, 255, 255, 0.4); */
        border-radius: 20px;
    }

    .story-content p {
        font-family: 'Georgia', serif;
        font-size: 1rem; /*1.25*/
        line-height: 1; /*1.9*/
        color: #1a1a1a; /* Dark solid text */
        margin-bottom: 20px;
        text-align: justify;
    }

    /* Mobile Fix for iPhone */
    @media (max-width: 768px) {
        .story-section {
            padding: 20px 15px;
        }
        .story-section::before{
        background-image: url('logos.png'); 
        background-size: cover;
        background-position: center;
        }
        
        .story-content {
            padding: 20px;
            /*background: rgba(255, 255, 255, 0.7); /* More solid on mobile for readability */
        }
        .story-content p {
            font-size: 1rem;/*1.15*/
            color: #1a1a1a;
            font-family: 'Georgia', serif;
        }
    }