body {

font-family: Noto Sans;

width: 1460px;

margin:auto;



}



@media (max-width: 1100px) {

body{width: 1000px}

}

@media (max-width: 800px) {

body{width: 700px}

}


@media (max-width: 600px) {

body{width: 500px;}


}

header, .header {

background-color: black;

width: 100%;

height: 2em;

padding: 2px;

align-content:center;

color: white;

text-align: center;

font-size: 1.5em;


}



footer, .footer {

background-color: #454545;

width: 100%;

padding: 2px;

align-content:center;

color: white;

text-align: center;

font-size: 1.5em;

}



/* --- Site Title Link Styling --- */

/* Makes the main site title clickable without changing its appearance */

.site-title-link {

text-decoration: none; /* Removes the underline from the link */

color: inherit; /* Ensures the link text color is inherited from its parent or h1 */

display: block; /* Makes the link a block element so it wraps around the h1 properly */

text-align: center; /* Ensures the h1 remains centered */

}



/* Optional: Add hover effect if desired for the whole clickable area */

.site-title-link:hover {

opacity: 0.8; /* Slightly dim the whole title on hover */


color: #1d1d1d;

}









/* --- Feature Circles Section Styling --- */
.circle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* Stays 100% to fill space up to max-width */
  gap: 20px;
  padding: 0 10px;
  box-sizing: border-box;
  background-color: #FFFFFF; /* Changed background color to white */
  flex-wrap: nowrap;

  /* Constrain and center the circle row to match other content sections */
  max-width: 1200px; /* Aligns with other content sections like product rows */
  margin: 25px auto; /* Centers the container and adds vertical spacing */
}

.circle-container a {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle-image {
  width: 140px; /* Example size for large screens */
  height: 140px; /* Example size for large screens */
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-bottom: 5px;
}

/* --- Responsive Adjustments for Circles Section --- */
@media (max-width: 768px) {
    .circle-container {
        flex-wrap: wrap; /* Allow circles to wrap on smaller screens */
        gap: 15px;
        padding: 15px; /* Adjust padding for stacked view */
        margin: 20px auto;
    }
    .circle-image {
        width: 100px; /* Shrink to 100px on screens up to 768px */
        height: 100px;
    }
}

@media (max-width: 600px) {
    .circle-container {
        padding: 10px;
        margin: 15px auto;
    }
    .circle-image {
        width: 80px; /* Shrink further to 80px on screens up to 600px */
        height: 80px;
    }
}

@media (max-width: 480px) {
    .circle-image {
        width: 60px; /* Shrink even further to 60px on screens up to 480px */
        height: 60px;
    }
}





.title {

font-family: Noto Sans;

text-align: center;

font-size: 4em;

font-weight: 500;

margin-top: 25px;

}



.features {

margin: auto;

text-align: center;

}







#hero {

width: 100%;

height: 20%;

margin-top: 0;

margin-bottom: 5px;

}



h1 {

font-weight: 600;

}







/* --- Navigation Menu Styling --- */
.navbar {
    margin: 20px auto;
    background-color: #FFFFFF;
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    max-width: 1200px; /* Constrains navbar width on desktop */
    width: 100%;
    display: flex;
    justify-content: space-between; /* Space out brand (if added) and toggler */
    align-items: center;
    flex-wrap: wrap;
}

/* Ensure no blue from Bootstrap's bg-primary class appears */
.bg-primary {
    background-color: transparent !important;
}

/* Styles for the toggler button (hamburger icon) */
.navbar-toggler {
    /* FIX: Force display on mobile and make it highly visible for diagnosis */
    display: block !important; /* Force toggler to be visible on mobile */
    background-color: black !important; /* TEMP: Make background black for diagnosis */
    border: 1px solid red !important; /* TEMP: Add a red border for diagnosis */

    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    border-radius: 0.25rem;
    cursor: pointer;
    margin: 0 15px; /* Margin for mobile positioning */
    z-index: 1000; /* Ensure it's on top of other elements */
}

.navbar-toggler-icon {
    /* FIX: Ensure icon lines are visible (e.g., white on black background) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* White hamburger lines */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

/* Styles for the collapsible menu content */
.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
    display: none; /* Default: Hidden on mobile unless expanded by Bootstrap JS */
}

/* When expanded on mobile */
.navbar-collapse.show {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar-nav {
    margin: 0;
    display: flex;
    flex-direction: column; /* Stack links vertically on mobile */
    align-items: center;
    width: 100%;
    padding: 0;
}

.nav-link {
    color: #000000;
    text-decoration: none;
    padding: 10px 15px;
    font-size: 1em;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: block;
    width: fit-content;
    margin: 5px auto;
}

.nav-link:hover {
    color: #FFFFFF !important;
    background-color: #000000;
}

.nav-link.active {
    color: #000000;
}

.nav-link.active:hover {
    color: #FFFFFF !important;
    background-color: #000000;
}


/* --- Responsive Adjustments for Navigation Menu --- */
@media (min-width: 576px) {
    .navbar-toggler {
        display: none !important; /* FIX: Ensure toggler is hidden on desktop/tablet */
    }

    .navbar-collapse {
        display: flex !important; /* Ensure it's always flex on desktop/tablet */
        flex-basis: auto;
        justify-content: center;
        width: auto;
    }
    
    .navbar-nav {
        flex-direction: row;
        width: 100%;
        justify-content: space-around;
        padding: 0;
    }
    .nav-link {
        margin: 0;
        padding: 8px 15px;
        font-size: 1.1em;
        width: auto;
    }
}

@media (min-width: 992px) {
    .nav-link {
        font-size: 1.2em;
        padding: 10px 20px;
    }
}







/* --- Product Display Section (Soda Cans) Styling --- */
.soda-cans-section {
    /* --- NEW: Parallax Background Settings --- */
    background-image: url('../images/gold_background_sm.jpg'); /* Sets your background image */
    background-attachment: fixed;                          /* This is the key property that creates the parallax effect */
    background-position: center;                           /* Centers the image */
    background-repeat: no-repeat;                          /* Prevents the image from tiling */
    background-size: cover;                                /* Ensures the image covers the entire section */
    position: relative;                                    /* Good practice for sections with complex backgrounds */

    /* --- Existing Layout & Spacing --- */
    width: 100%;
    padding: 70px 20px 40px 20px;
    box-sizing: border-box;
    text-align: center;
}

/* --- Responsive Fix for Parallax on Mobile --- */
@media (max-width: 768px) {
    .soda-cans-section {
        background-attachment: scroll; /* Disables the parallax effect on smaller screens for better performance */
    }
}


.soda-can-container {

display: flex;

justify-content: center;

gap: 30px;

max-width: 1200px;

margin: 0 auto;

flex-wrap: wrap;

}



.soda-can-card {

flex: 1;

min-width: 280px;

max-width: 350px;

display: flex;

flex-direction: column;

align-items: center;

position: relative;

margin-top: 50px;

}



.can-image-area {

width: 100%;

height: 180px;

display: flex;

justify-content: center;

align-items: flex-end;

position: absolute;

top: -40px;

z-index: 2;

pointer-events: none;

}



.soda-can-img {

max-width: 100%;

max-height: 250px;

object-fit: contain;

object-position: bottom center;

display: block;

}



.can-text-card {

background-color: #ffffff;

border-radius: 5px;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

padding: 40px 20px 20px;

margin-top: 100px;

width: 100%;

box-sizing: border-box;

text-align: center;

display: flex;

flex-direction: column;

justify-content: space-between;

min-height: 250px;

position: relative; /* CRUCIAL: Set to relative for absolute positioning of .new-badge */

}



/* NEW: Styles for the "NEW" badge */

.new-badge {

position: absolute; /* Position relative to .can-text-card */

top: 0px; /* Aligned to the top edge of the text card */

left: 0px; /* Aligned to the left edge of the text card */

background-color: #FFA500; /* Orange background */

color: #FFFFFF; /* White text */

font-size: 0.8em; /* Small font size */

font-weight: bold; /* Bold text */

padding: 5px 8px; /* Small padding inside the badge */

border-top-left-radius: 5px; /* Match card radius for top-left */

border-bottom-right-radius: 5px; /* Optional: Slightly rounded bottom-right corner */

z-index: 3; /* Ensure it's above other elements if needed */

text-transform: uppercase; /* Make text uppercase */

/* Optional: If you want it slightly inset or overlapping a corner */

/* top: -10px; left: -10px; */

}





.product-title {

font-size: 2em;

color: #000000;

margin-top: 0;

margin-bottom: 10px;

}



.flavor-details {

display: flex;

justify-content: center;

align-items: center;

margin-bottom: 15px;

color: #000000;

}



.flavor-name {

font-weight: bold;

font-size: 1.1em;

white-space: nowrap;

}



.flavor-divider {

width: 1px;

height: 1.5em;

background-color: #366263;

margin: 0 10px;

}



.flavor-description {

font-weight: normal;

font-size: 1em;

white-space: nowrap;

}



.description-text {

font-size: 0.95em;

color: #555;

line-height: 1.5;

margin-bottom: 25px;

flex-grow: 1;

display: flex;

align-items: center;

justify-content: center;

}



.buy-now-btn {

display: inline-block;

background-color: #000000;

color: #FFFFFF;

text-decoration: none;

padding: 12px 25px;

border-radius: 5px;

font-weight: bold;

font-size: 1em;

transition: background-color 0.3s ease, color 0.3s ease;

}



.buy-now-btn:hover {

background-color: #ce9a31;

color: #fcf9ec;

}



/* --- Responsive Adjustments --- */

@media (max-width: 992px) {

.soda-can-container {

gap: 20px;

flex-direction: column;

align-items: center;


}

.soda-can-card {

margin-top: 80px;

max-width: 380px;

width: 90%;

}

.can-image-area {

top: -20px;

height: 200px;

}

.soda-can-img {

max-height: 280px;

}

.can-text-card {

margin-top: 100px;

padding-top: 60px;

min-height: 280px;

}

.product-title {

font-size: 1.8em;

}

/* Adjustments for the badge on medium screens */

.new-badge {

font-size: 0.75em;

padding: 4px 7px;

}

}



@media (max-width: 600px) {

.soda-cans-section {

padding: 40px 15px;

}

.soda-can-card {

margin-top: 60px;

max-width: 320px;

width: 100%;

}

.can-image-area {

top: -10px;

height: 150px;

}

.soda-can-img {

max-height: 220px;

}

.can-text-card {

margin-top: 80px;

padding-top: 50px;

min-height: 220px;

}

.product-title {

font-size: 1.6em;

}

.description-text {

font-size: 0.9em;

}

.buy-now-btn {

padding: 10px 20px;

}

/* Adjustments for the badge on small screens */

.new-badge {

font-size: 0.7em;

padding: 3px 6px;

}

}



/* --- Banner Section Styling --- */

.banner-section {

width: 100%; /* Ensures the section takes the full width available */

overflow: hidden; /* Hides any part of the image that might overflow the container */

padding: 0; /* Explicitly remove any padding on the section */

margin: 0; /* Explicitly remove any margin on the section */

box-sizing: border-box; /* Ensures padding/border are included in width calculation */

}



.banner-image {

width: 100%; /* Makes the image span the full width of its parent (.banner-section) */

height: auto; /* IMPORTANT: Allows the height to adjust proportionally, preventing distortion */

display: block; /* Removes any extra space below the image, common with inline elements */

margin: 0;

padding: 0;

object-fit: cover; /* Crops the image (if necessary) to cover the entire area without stretching */

object-position: center; /* Centers the image content within its frame (e.g., if it's cropped) */



/* Optional: Set a maximum height if you don't want the banner to become excessively tall */

/* max-height: 400px; */ /* Example max height, adjust as needed */

}



/* --- Responsive Adjustments (Optional, for finer control) --- */



@media (max-width: 1200px) {

.banner-image {

/* max-height: 350px; */

}

}



@media (max-width: 768px) {

.banner-image {

/* max-height: 250px; */

}

}



@media (max-width: 480px) {

.banner-image {

/* max-height: 180px; */

}

}





.bg-primary {

background-color: transparent !important;

}



.row {

display: unset !important;

}



.footer-col {

float: left;

width: 25%;

padding: 5px;

}



footer::after {

content: "";

clear: both;

display: table;

}



ul {

list-style-type: none;

}



button {

color: white;

background-color: #454545;

border-radius: .5em;

padding: 0.3em .8em;

border-color: none;

}



.reviews-block {

margin: auto;

text-align: center;

}



.shop-promo-block {

clear: both;

padding:10px;

}



.wholesale-block {

background-color: lightgray;

}



.new-flavor {

color: white;

background-color: #f1752b;

font-variant-caps: all-small-caps;

font-weight: 500;

}



.product-block {

color: black;

}



.product-block-img {

float:left;

width: 30%;

}



.product-block-copy {

float:left;

width: 50%;

padding: 2em;

}



.harmonic-zest {

clear: both;

}



.hazy-sunrise {

clear: both;

}



.hypnotic-rush {

clear: both;

}



.tagline-block {

clear: both;

color: white;

background: black;

padding: 1em;

}







/* Banner Section Styling */

.banner-section {

width: 100%; /* Ensures the section takes the full width available */

overflow: hidden; /* Hides any part of the image that might overflow the container */

/* You can add padding-top/bottom here if you want space above/below the image */

/* padding: 20px 0; */

}



.banner-image {

width: 100%; /* Makes the image span the full width of its parent (.banner-section) */

height: auto; /* IMPORTANT: Allows the height to adjust proportionally, preventing distortion */

display: block; /* Removes any extra space below the image, common with inline elements */



/* Optional: Controls how the image fills its space without distortion */

object-fit: cover; /* Crops the image (if necessary) to cover the entire area without stretching */

object-position: center; /* Centers the image content within its frame (e.g., if it's cropped) */



/* Optional: Set a maximum height if you don't want the banner to become excessively tall */

/* max-height: 400px; */ /* Example max height, adjust as needed */

}



/* --- Responsive Adjustments (Optional, for finer control) --- */



/* For screens where the banner might look too tall or too short */

@media (max-width: 1200px) {

.banner-image {

max-width: 100%;

}

}



@media (max-width: 768px) {

.banner-image {

max-width: 100%;

}

}



@media (max-width: 480px) {

.banner-image {

max-width: 100%;

}

}





/* REVIEWS OWL CAROUSEL */

.reviews-section{

background-color: #F5F1DD;

text-align: center;

}



.review-title {

font-size:2.4em;

color: #366263;

padding-top:15px;

text-transform: capitalize;

}



.reviewer-name {

font-weight: 900;

}





.owl-demo .item{

padding: 0px 0px;

margin: 10px;

color: #366263;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 15px;

text-align: center;

}









/* --- Three Featured Products ROWS Section Styling --- */

.featured-products-section {

width: 100%;

padding: 60px 0;

background-color: #FFFFFF; /* Changed background color to white */

box-sizing: border-box;

overflow: hidden; /* Ensures sliding content doesn't cause horizontal scrollbar */

}



.product-row {

display: flex;

align-items: center;

justify-content: center;

max-width: 1200px;

margin: 40px auto;

padding: 20px;

box-sizing: border-box;

gap: 40px;

}



/* Alternating Image Order */

.product-row--left-image {

flex-direction: row; /* Image on left, copy on right (default) */

}



.product-row--right-image {

flex-direction: row-reverse; /* Image on right, copy on left */

}



/* Initial state for all image and copy columns (hidden and off-screen) */

/* They will slide FROM the side they are ON */

.product-img-col {

flex: 1;

display: flex;

justify-content: center;

align-items: center;

min-width: 300px;



opacity: 0; /* Start invisible */

transform: translateX(-50px); /* Start 50px to the left (for default left-aligned images) */

transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth animation */

}



.product-feature-img {

max-width: 100%;

height: auto;

display: block;

object-fit: contain;

}



.product-copy-col {

flex: 1;

display: flex;

flex-direction: column;

justify-content: center;

align-items: flex-start; /* Default: Align all content (text, tags, buttons) to the left */

text-align: left; /* Default: Text itself aligns to the left */

padding: 20px;

min-width: 300px;



opacity: 0; /* Start invisible */

transform: translateX(50px); /* Start 50px to the right (for default right-aligned copy) */

transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth animation */

}



/* For rows where the image is on the right, align the copy column content to the right on desktop */

.product-row--right-image .product-copy-col {

align-items: flex-end; /* Keep the entire block (logo, etc.) aligned to the right within its column */

text-align: right; /* Text itself aligns to the right by default */



/* Override animation for the copy column in right-image rows */

transform: translateX(-50px); /* Copy column is on the left in row-reverse, so it slides from left */

}



/* Override animation for the image column in right-image rows */

.product-row--right-image .product-img-col {

transform: translateX(50px); /* Image column is on the right in row-reverse, so it slides from right */

}





/* This class is added by JavaScript when the element is visible in the viewport */

.product-img-col.is-visible,

.product-copy-col.is-visible {

opacity: 1; /* Fade in */

transform: translateX(0); /* Slide to original position */

}



/* Optional: Add a slight delay for the second element in each row to create a staggered effect */

.product-row--left-image .product-copy-col.is-visible {

transition-delay: 0.2s; /* Copy column (right) delays in left-image row */

}

.product-row--right-image .product-img-col.is-visible {

transition-delay: 0.2s; /* Image column (right) delays in right-image row */

}





/* Reuse styles from soda can section where applicable */

.product-flavor-details {

display: flex;

justify-content: center; /* Centered within its flex container (copy-col) by default */

align-items: center;

margin-bottom: 15px;

color: #000000;

}



/* Ensure flavor details align correctly with the rest of the text alignment */

.product-copy-col .product-flavor-details {

justify-content: flex-start; /* Aligns to the left when product-copy-col is left-aligned */

}

/* For right-image rows, flavor details will also align to the right to match the column on desktop */

.product-row--right-image .product-copy-col .product-flavor-details {

justify-content: flex-end; /* Aligns to the right when product-copy-col is right-aligned */

}





.product-new-tag {

background-color: #FFA500; /* Updated to orange */

color: #FFFFFF;

padding: 5px 10px;

font-size: 0.85em;

font-weight: bold;

border-radius: 3px;

margin-bottom: 10px;

display: inline-block;

}



.product-logo-img {

max-width: 100%;

height: auto;

margin-bottom: 15px;

display: block;

}



.flavor-name {

font-weight: bold;

font-size: 1.1em;

white-space: nowrap;

}



.flavor-divider {

width: 1px;

height: 1.5em;

background-color: #366263;

margin: 0 10px;

}



.flavor-description {

font-weight: normal;

font-size: 1em;

white-space: nowrap;

}



.product-description {

font-size: 1em;

line-height: 1.6;

color: #555;

margin-bottom: 25px;

}



.buy-now-btn {

display: inline-block;

background-color: #000000;

color: #FFFFFF;

text-decoration: none;

padding: 12px 25px;

border-radius: 5px;

font-weight: bold;

font-size: 1em;

transition: background-color 0.3s ease, color 0.3s ease;

border: none;

cursor: pointer;

}



.buy-now-btn:hover {

background-color: #366263;

color: #fcf9ec;

}





/* --- Responsive Adjustments --- */

@media (max-width: 768px) {

.product-row {

flex-direction: column !important; /* Force stacking on smaller screens */

gap: 20px;

margin: 30px auto;

padding: 15px;

}



.product-img-col,

.product-copy-col { /* Apply reset to both column types */

min-width: unset;

width: 100%;

animation: none; /* Disable slide-in animation on mobile */

opacity: 1; /* Ensure visible */

transform: translateX(0); /* Reset transform */

}



.product-copy-col {

align-items: center; /* Center content horizontally for stacked columns */

text-align: center; /* Center text itself for stacked columns */

padding: 15px;

}



/* Fix: Explicitly center the .product-copy-col in the right-image row when on small screens */

.product-row--right-image .product-copy-col {

align-items: center;

text-align: center;

}



/* Reset flavor details alignment to center when stacked for ALL rows */

.product-copy-col .product-flavor-details,

.product-row--right-image .product-copy-col .product-flavor-details {

justify-content: center;

}



.product-logo-img {

max-width: 120px;

}



.product-title {

font-size: 1.8em;

}



.product-description {

font-size: 0.9em;

}

}



@media (max-width: 480px) {

.product-row {

margin: 20px auto;

padding: 10px;

}

.product-logo-img {

max-width: 100px;

}

.product-title {

font-size: 1.6em;

}

.flavor-name, .flavor-description {

font-size: 1em;

}

.product-description {

font-size: 0.85em;

}

.buy-now-btn {

padding: 10px 20px;

font-size: 0.9em;

}

}

/* END Featured Products rows css */









/* --- Slogan Section Styling --- */

.slogan-section {

width: 100%;

background-color: #000000; /* Black background */

color: #FFFFFF; /* White text */

padding: 80px 20px; /* Ample padding for vertical space and horizontal breathing room */

box-sizing: border-box; /* Includes padding in the element's total width/height */

text-align: center; /* Centers the content horizontally */

}



.slogan-content {

max-width: 1000px; /* INCREASED: Limits the width of the text block for readability, allowing it to be wider */

margin: 0 auto; /* Centers the text block within the section */

}



.slogan-section h2 {

font-size: 3em; /* Large, prominent header */

margin-bottom: 20px; /* Space below the header */

color: #FFFFFF; /* Ensures header is white */

}



.slogan-section p {

font-size: 1.2em; /* Readable text size */

line-height: 1.6; /* Good line spacing for readability */

color: #FFFFFF; /* Ensures paragraph text is white */

}



/* --- Responsive Adjustments --- */

@media (max-width: 768px) {

.slogan-section {

padding: 60px 15px; /* Adjust padding for smaller screens */

}

.slogan-section h2 {

font-size: 2.2em; /* Smaller header on tablets/midsized phones */

}

.slogan-section p {

font-size: 1em; /* Smaller paragraph text */

}

}



@media (max-width: 480px) {

.slogan-section {

padding: 40px 10px; /* Even less padding on small mobile */

}

.slogan-section h2 {

font-size: 1.8em; /* Smaller header for small phones */

}

.slogan-section p {

font-size: 0.9em; /* Even smaller paragraph text for small phones */

}

}









/* --- Wholesale Section Styling --- */

.wholesale-section {

display: flex;

align-items: center;

justify-content: center;

width: 100%;

max-width: 1200px;

margin: 60px auto;

padding: 20px;

box-sizing: border-box;

gap: 40px;

background-color: #FFFFFF;

}



.wholesale-content-col {

flex: 1;

max-width: 50%;

padding-right: 20px;

box-sizing: border-box;

text-align: left;

display: flex; /* Make content column a flex container */

flex-direction: column; /* Stack its children vertically */

align-items: flex-start; /* Align content to the left */

}



.wholesale-content-col h2 {

font-size: 2.8em;

color: #000000;

margin-bottom: 10px;

}



.wholesale-content-col h3 {

font-size: 1.5em;

color: #366263;

margin-bottom: 20px;

}



.wholesale-content-col p {

font-size: 1em;

line-height: 1.6;

color: #555;

margin-bottom: 25px; /* Space below paragraph and above button */

}



/* NEW: Styles for the "Apply Today" button */

.wholesale-apply-btn {

display: inline-block; /* Allows padding and margin */

background-color: #000000; /* Black background */

color: #FFFFFF; /* White text */

text-decoration: none; /* Removes underline */

padding: 12px 25px;

border-radius: 5px;

font-weight: bold;

font-size: 1em;

transition: background-color 0.3s ease, color 0.3s ease;

border: none; /* In case it's a <button> or has default border */

cursor: pointer;

/* align-self: flex-start; /* Ensure button aligns to the left if parent has align-items: center */

}



.wholesale-apply-btn:hover {

background-color: #366263; /* Dark teal background on hover (consistent with other buttons) */

color: #fcf9ec; /* Creamy beige text on hover */

}



.wholesale-img-col {

flex: 1;

max-width: 50%;

display: flex;

justify-content: center;

align-items: center;

}



.wholesale-feature-img {

max-width: 100%;

height: auto;

display: block;

object-fit: cover;

border-radius: 8px;

}



/* --- Responsive Adjustments for Wholesale Section --- */

@media (max-width: 768px) {

.wholesale-section {

flex-direction: column; /* Stacks columns vertically on smaller screens */

padding: 40px 15px;

gap: 30px;

margin: 40px auto;

}



.wholesale-content-col,

.wholesale-img-col {

max-width: 100%; /* Columns take full width when stacked */

padding: 0;

}



/* Adjust text alignment for stacked view */

.wholesale-content-col {

align-items: center; /* Center content (including button) when stacked */

text-align: center; /* Center text when stacked */

}



.wholesale-content-col h2 {

font-size: 2.2em;

}



.wholesale-content-col h3 {

font-size: 1.2em;

}



.wholesale-content-col p {

font-size: 0.9em;

}

.wholesale-apply-btn {

padding: 10px 20px;

font-size: 0.9em;

}

}



@media (max-width: 480px) {

.wholesale-section {

padding: 30px 10px;

gap: 20px;

margin: 30px auto;

}

.wholesale-content-col h2 {

font-size: 1.8em;

}

.wholesale-content-col h3 {

font-size: 1em;

}

.wholesale-content-col p {

font-size: 0.85em;

}

}











/* --- FAQ Section Styling --- */

.faq-section {

width: 100%;

padding: 60px 20px;

background-color: #FFFFFF; /* White background */

box-sizing: border-box;

text-align: center; /* Center the main heading */

}



.faq-section h2 {

font-size: 2.8em;

color: #000000; /* Black text for heading */

margin-bottom: 40px;

}



.faq-accordion {

max-width: 800px; /* Max width for the accordion content */

margin: 0 auto; /* Center the accordion */

}



.faq-item {

background-color: #ffffff; /* Card background color (creamy beige) */

border: 1px solid #e0e0e0; /* Light border */

border-radius: 8px;

margin-bottom: 15px; /* Space between FAQ items */

overflow: hidden; /* Ensures content is clipped when collapsed */

box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Subtle shadow */

}



.faq-question {

display: flex; /* Use flexbox for question text and icon */

justify-content: space-between; /* Pushes icon to the right */

align-items: center; /* Vertically centers text and icon */

width: 100%;

padding: 18px 25px;

background-color: #ffffff; /* Match item background */

color: #000000; /* Black text for questions */

font-size: 1.1em;

font-weight: bold;

text-align: left; /* Align question text to the left */

border: none;

cursor: pointer;

outline: none; /* Remove outline on focus */

transition: background-color 0.3s ease; /* Smooth transition for hover/active */

}



.faq-question h5 {

margin: 0; /* Remove default margin from h5 */

font-size: 1.1em; /* Ensure h5 matches button font size */

color: inherit; /* Inherit color from button */

flex-grow: 1; /* Allow question text to take available space */

}



.faq-icon {

font-size: 1.5em; /* Size of the plus/minus icon */

margin-left: 20px;

transition: transform 0.3s ease; /* Smooth rotation for icon */

color: #366263; /* Dark teal for the icon */

}



/* Active (expanded) state for FAQ item */

.faq-item.active .faq-question {

background-color: #e6e6e6; /* Slightly darker background when active */

}



.faq-item.active .faq-icon {

transform: rotate(45deg); /* Rotate plus to become an X */

}



.faq-answer {

max-height: 0; /* Hidden by default */

padding: 0 25px; /* Horizontal padding, vertical padding is 0 when collapsed */

background-color: #ffffff; /* White background for answer content */

transition: max-height 0.4s ease-out, padding 0.4s ease-out; /* Smooth expand/collapse */

overflow: hidden; /* Crucial for max-height transition */

}



.faq-answer p {

font-size: 0.95em;

line-height: 1.6;

color: #555; /* Dark grey for answer text */

padding-bottom: 15px; /* Padding at the bottom of the answer text */

margin: 0; /* Remove default paragraph margin */

padding-top:20px;

text-align: left;

}



/* Hover effect for FAQ question */

.faq-question:hover {

background-color: #e6e6e6; /* Light grey on hover */

}





/* --- Responsive Adjustments --- */

@media (max-width: 768px) {

.faq-section {

padding: 40px 15px;

}

.faq-section h2 {

font-size: 2.2em;

margin-bottom: 30px;

}

.faq-question {

padding: 15px 20px;

font-size: 1em;

}

.faq-question h5 {

font-size: 1em;

}

.faq-answer {

padding: 0 20px;

}

.faq-answer p {

font-size: 0.9em;

}

}



@media (max-width: 480px) {

.faq-section {

padding: 30px 10px;

}

.faq-section h2 {

font-size: 1.8em;

margin-bottom: 20px;

}

.faq-question {

padding: 12px 15px;

font-size: 0.9em;

}

.faq-question h5 {

font-size: 0.9em;

}

.faq-icon {

font-size: 1.2em;

margin-left: 15px;

}

.faq-answer {

padding: 0 15px;

}

.faq-answer p {

font-size: 0.85em;

}

}













/* --- Footer Section Styling --- */

.main-footer {

display: flex;

flex-wrap: wrap;

justify-content: space-around;

align-items: flex-start;

width: 100%;

padding: 40px 20px;

background-color: #000000;

color: #FFFFFF;

box-sizing: border-box;

font-size: 0.95em;

}



.footer-col {

flex: 1;

min-width: 180px;

max-width: 280px;

margin: 15px;

text-align: left;

}



/* Styling for the slogan column */

.footer-slogan-col h5 {

font-size: 1.5em; /* INCREASED: Slightly larger font size */

color: #FFFFFF;

margin-bottom: 5px;

}



.footer-disclaimer {

font-size: 0.85em;

line-height: 1.4;

color: #CCCCCC;

margin-top: 0;

}



/* Styling for link columns */

.footer-links-col h6 {

font-size: 1em;

color: #FFFFFF;

margin-bottom: 10px;

text-transform: uppercase;

letter-spacing: 0.5px;

}



.footer-links-col ul {

list-style: none;

padding: 0;

margin: 0;

}



.footer-links-col ul li {

margin-bottom: 8px;

}



.footer-links-col ul li a {

color: #CCCCCC;

text-decoration: none;

transition: color 0.3s ease;

}



.footer-links-col ul li a:hover {

color: #366263;

}



/* --- Responsive Adjustments --- */

@media (max-width: 768px) {

.main-footer {

flex-direction: column;

align-items: center;

padding: 30px 15px;

}



.footer-col {

min-width: unset;

max-width: 90%;

margin: 15px 0;

text-align: center;

}



.footer-slogan-col h5 {

font-size: 1.1em; /* ADJUSTED: Keep it proportionally larger on smaller screens */

}



.footer-disclaimer {

font-size: 0.8em;

}



.footer-links-col h6 {

font-size: 0.9em;

margin-bottom: 8px;

}



.footer-links-col ul li {

margin-bottom: 6px;

}



.footer-links-col ul li a {

font-size: 0.9em;

}

}



@media (max-width: 480px) {

.main-footer {

padding: 20px 10px;

}

.footer-col {

margin: 10px 0;

}

.footer-slogan-col h5 {

font-size: 1em; /* ADJUSTED: Smaller but still prominent on very small screens */

}

.footer-disclaimer {

font-size: 0.75em;

}

.footer-links-col h6 {

font-size: 0.8em;

}

.footer-links-col ul li a {

font-size: 0.8em;

}

}











/* --- Hero Banner Section Styling --- */

.hero-banner-section {

display: flex;

flex-direction: row;

align-items: stretch; /* Allows columns to stretch to fill the min-height */

justify-content: center;

width: 100%;

min-height: 450px; /* Minimum height for the section */

padding: 0; /* No padding on the section itself, to allow edge-to-edge image */

box-sizing: border-box;


/* NEW: Vertical Gradient Background */

background: linear-gradient(to bottom, #fc803a, #fab933); /* Top to bottom gradient */


color: #000000; /* Default text color */

}



.hero-content-col {

flex: 0 0 40%; /* Text column takes 40% width */

padding: 40px 60px 40px 60px; /* Padding for the text content itself */

box-sizing: border-box;

text-align: left;

display: flex;

flex-direction: column;

justify-content: center; /* Vertically centers content within its column */

min-width: 300px; /* Ensures content column doesn't get too squished */

}



.hero-content-col h1 {

font-size: 3.5em;

margin-bottom: 15px;

color: #000000;

}



.hero-content-col p {

font-size: 1.1em;

line-height: 1.6;

margin-bottom: 30px;

color: #333;

}



.hero-button {

display: inline-block;

background-color: #000000;

color: #FFFFFF;

text-decoration: none;

padding: 15px 30px;

border-radius: 5px;

font-weight: bold;

font-size: 1.1em;

transition: background-color 0.3s ease, color 0.3s ease;

border: none;

cursor: pointer;

width: fit-content; /* Makes the button only as wide as its padding + text */

}



.hero-button:hover {

background-color: #366263;

color: #fcf9ec;

}



.hero-image-col {

flex: 0 0 60%; /* Image column takes 60% width */

display: flex;

justify-content: center;

align-items: center; /* Center product graphic vertically if it doesn't fill */

overflow: hidden; /* Crucial to clip any image content that doesn't fit after object-fit */

padding: 0; /* Ensure no padding on the image column */

margin: 0; /* Ensure no margin on the image column */

}



.hero-product-graphic {

width: 100%; /* Image takes 100% width of its column */

height: 100%; /* Image takes 100% height of its column */

display: block;

object-fit: cover; /* Image will cover the entire space, cropping if aspect ratios differ */

object-position: center; /* Centers the image within its frame */

}



/* --- Responsive Adjustments --- */

@media (max-width: 992px) {

.hero-banner-section {

flex-direction: column; /* Stacks content and image vertically on tablets */

min-height: unset; /* Allow height to adjust */

padding: 40px 15px; /* ADDED padding back to the section for stacked view */

}

.hero-content-col {

flex: unset; /* Reset flex property for stacking */

width: 100%; /* Content column takes full width when stacked */

padding: 0; /* Remove specific padding when stacked */

text-align: center; /* Center text when stacked */

margin-bottom: 30px; /* Space between text and stacked image */

}

.hero-content-col h1 {

font-size: 2.8em;

}

.hero-content-col p {

font-size: 1em;

}

.hero-button {

padding: 12px 25px;

font-size: 1em;

}

.hero-image-col {

flex: unset; /* Reset flex property for stacking */

width: 100%; /* Image column takes full width when stacked */

padding: 0; /* Ensure no padding */

align-items: center;

}

.hero-product-graphic {

width: 100%;

height: auto; /* Revert to auto height for responsiveness when stacked */

object-fit: contain; /* Revert to contain to avoid cropping on smaller, stacked screens */

}

}



@media (max-width: 600px) {

.hero-banner-section {

padding: 30px 10px;

}

.hero-content-col h1 {

font-size: 2.2em;

}

.hero-content-col p {

font-size: 0.9em;

}

.hero-button {

padding: 10px 20px;

font-size: 0.9em;

}

}











/* --- Main Hero Section Styling --- */

.main-hero-section {

width: 100%;

min-height: 700px;

background-image: url('../images/main_banner_3_cans_sparklers.jpg');

background-size: cover;

background-position: center center;

background-repeat: no-repeat;

display: flex;

align-items: center;

justify-content: flex-start;

padding-left: 10%;

box-sizing: border-box;

position: relative;

color: #FFFFFF;

}



.main-hero-content {

flex: 0 0 33.33%;

max-width: 500px;

text-align: left;

/* REMOVED: text-shadow from .main-hero-content */

}



.main-hero-content h1 {

font-size: 3.8em;

line-height: 1.1;

margin-bottom: 30px;

color: #FFFFFF;

/* MOVED: Apply text-shadow directly to the h1 for clarity */

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);

}



.main-hero-button {

display: inline-block;

background-color: #c3244f;

color: #FFFFFF;

text-decoration: none;

padding: 18px 40px;

border-radius: 8px;

font-weight: bold;

font-size: 1.2em;

letter-spacing: 0.5px;

transition: background-color 0.3s ease, transform 0.2s ease;

border: none;

cursor: pointer;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

width: fit-content;

/* Ensure no text-shadow is implicitly applied here by removing it from parent and applying specifically */

text-shadow: none; /* Explicitly remove any text-shadow for the button */

}



.main-hero-button:hover {

background-color: #9b1a3c;

transform: translateY(-2px);

box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);

color: #FFFFFF

}



/* --- Responsive Adjustments for Main Hero Section --- */

@media (max-width: 1200px) {

.main-hero-section {

padding-left: 8%;

min-height: 600px;

}

.main-hero-content h1 {

font-size: 3.8em;

}

.main-hero-button {

padding: 15px 35px;

font-size: 1.1em;

}

}



@media (max-width: 992px) {

.main-hero-section {

padding-left: 5%;

min-height: 500px;

background-position: 70% center;

}

.main-hero-content {

flex: 0 0 50%;

text-align: center;

}

.main-hero-content h1 {

font-size: 3em;

margin-bottom: 25px;

}

.main-hero-button {

padding: 12px 30px;

font-size: 1em;

}

}



@media (max-width: 768px) {

.main-hero-section {

padding: 30px 15px;

min-height: 400px;

flex-direction: column;

justify-content: center;

background-position: center bottom;

}

.main-hero-content {

flex: unset;

width: 100%;

max-width: unset;

text-align: center;

}

.main-hero-content h1 {

font-size: 2.5em;

margin-bottom: 20px;

}

.main-hero-button {

padding: 10px 25px;

font-size: 0.9em;

}

}



@media (max-width: 480px) {

.main-hero-section {

min-height: 350px;

padding: 20px 10px;

}

.main-hero-content h1 {

font-size: 1.8em;

}

}











/* --- General Page Content Styling for Simple Text Pages --- */

.page-content {

width: 100%;

padding: 60px 20px; /* Ample padding for top/bottom and sides */

box-sizing: border-box;

background-color: #FFFFFF; /* White background for page content */

color: #333; /* Default text color */

}



.text-content-wrapper {

max-width: 800px; /* Max width for readability, adjust as needed */

margin: 0 auto; /* Center the content */

text-align: left; /* Default text alignment */

}



.text-content-wrapper h2 {

font-size: 2.5em;

color: #000000;

margin-bottom: 25px;

text-align: center; /* Center the main page title */

}



.text-content-wrapper h3 {

font-size: 1.8em;

color: #366263; /* Use your brand's accent color */

margin-top: 30px;

margin-bottom: 15px;

}



.text-content-wrapper p {

font-size: 1em;

line-height: 1.6;

margin-bottom: 15px;

}



.text-content-wrapper a {

color: #366263; /* Link color */

text-decoration: underline;

}



.text-content-wrapper a:hover {

color: #000000; /* Link hover color */

}



/* --- Responsive Adjustments for Page Content --- */

@media (max-width: 768px) {

.page-content {

padding: 40px 15px;

}

.text-content-wrapper h2 {

font-size: 2em;

margin-bottom: 20px;

}

.text-content-wrapper h3 {

font-size: 1.4em;

margin-top: 25px;

margin-bottom: 10px;

}

.text-content-wrapper p {

font-size: 0.9em;

}

}



@media (max-width: 480px) {

.page-content {

padding: 30px 10px;

}

.text-content-wrapper h2 {

font-size: 1.8em;

}

.text-content-wrapper h3 {

font-size: 1.2em;

}

.text-content-wrapper p {

font-size: 0.85em;

}

}





/* --- Lab Results Grid Styling --- */

.lab-results-grid {

display: grid; /* Use CSS Grid for a flexible layout */

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */

gap: 30px; /* Space between grid items */

margin-top: 40px;

margin-bottom: 40px;

justify-content: center; /* Center grid items if they don't fill the row */

}



.lab-result-item {

background-color: #fcf9ec; /* Consistent card background color */

border-radius: 8px;

box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Subtle shadow */

padding: 25px;

display: flex;

flex-direction: column;

align-items: center; /* Center content within each item */

text-align: center;

min-height: 200px; /* Ensure consistent height for items */

justify-content: space-between; /* Push button to bottom */

}



.lab-result-item h3 {

font-size: 1.6em;

color: #000000;

margin-top: 0;

margin-bottom: 10px;

}



.lab-result-item p {

font-size: 0.95em;

line-height: 1.5;

color: #555;

flex-grow: 1; /* Allow paragraph to take up available space */

margin-bottom: 20px;

}



.view-results-btn {

display: inline-block;

background-color: #000000; /* Black background for button */

color: #FFFFFF; /* White text for button */

text-decoration: none;

padding: 10px 20px;

border-radius: 5px;

font-weight: bold;

font-size: 0.9em;

transition: background-color 0.3s ease, color 0.3s ease;

border: none;

cursor: pointer;

}



.view-results-btn:hover {

background-color: #366263; /* Dark teal on hover */

color: #fcf9ec;

}



.lab-results-disclaimer {

font-size: 0.85em;

color: #777;

margin-top: 20px;

text-align: center;

}



/* --- Responsive Adjustments for Lab Results --- */

@media (max-width: 768px) {

.lab-results-grid {

grid-template-columns: 1fr; /* Stack columns on smaller screens */

gap: 20px;

margin-top: 30px;

margin-bottom: 30px;

}

.lab-result-item {

padding: 20px;

min-height: unset; /* Allow height to adjust when stacked */

}

.lab-result-item h3 {

font-size: 1.4em;

}

.lab-result-item p {

font-size: 0.9em;

}

.view-results-btn {

padding: 8px 18px;

font-size: 0.85em;

}

.lab-results-disclaimer {

font-size: 0.8em;

}

}



@media (max-width: 480px) {

.lab-results-grid {

gap: 15px;

}

.lab-result-item {

padding: 15px;

}

.lab-result-item h3 {

font-size: 1.2em;

}

.lab-result-item p {

font-size: 0.8em;

}

}







/* NEW: Styles for the "Apply Today" button */

.wholesale-apply-btn {

display: inline-block; /* Allows padding and margin */

background-color: #000000 !important; /* Black background (forced with !important) */

color: #FFFFFF !important; /* White text (forced with !important) */

text-decoration: none; /* Removes underline */

padding: 12px 25px;

border-radius: 5px;

font-weight: bold;

font-size: 1em;

transition: background-color 0.3s ease, color 0.3s ease;

border: none; /* In case it's a <button> or has default border */

cursor: pointer;

}



.wholesale-apply-btn:hover {

background-color: #366263; /* Dark teal background on hover (consistent with other buttons) */

color: #fcf9ec; /* Creamy beige text on hover */

}