.elementor-kit-4{--e-global-color-primary:#5AE0C5;--e-global-color-secondary:#F2F2F2;--e-global-color-text:#182323;--e-global-color-accent:#52F79F;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-size:52px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:1em;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-size:36px;--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-line-height:1em;--e-global-typography-text-font-family:"Lato";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.3em;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-size:18px;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1em;}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );line-height:var( --e-global-typography-accent-line-height );color:#FFFFFF;padding:17px 28px 17px 28px;}.elementor-kit-4 button:hover,.elementor-kit-4 button:focus,.elementor-kit-4 input[type="button"]:hover,.elementor-kit-4 input[type="button"]:focus,.elementor-kit-4 input[type="submit"]:hover,.elementor-kit-4 input[type="submit"]:focus,.elementor-kit-4 .elementor-button:hover,.elementor-kit-4 .elementor-button:focus{background-color:var( --e-global-color-accent );border-radius:0px 0px 0px 0px;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 a:hover{color:var( --e-global-color-accent );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//*.elementor-button {border-radius: 50px 50px 50px 50px !important;}*/ 
a {
text-decoration: none !important;
}
a:hover {
text-decoration: none !important;
color: var(--e-global-color-accent);
}
#page {
min-height: auto !important;
}

.swiper-slide-inner img {
    width: 100px !important;
}

/* Dark Mode Colors (Static) */
.iconCard,
.productCard,
.showcaseCard,
.showcaseCardSmall,
.sampleStoreCard,
.promoCard {
    /* These are the direct children of .wucarousel-item */
    margin: 20px; /* Keep bottom margin if desired for stacked items */
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 1px 1px 5px 0px #ffffff1a; /* --shadow-color */
    background-color: #1e1e1e; /* --card-bg */
    width: 100%; /* Allows card to shrink if .wucarousel-item is narrower than max-width */
    max-width: 320px; /* Constrain the maximum width of the card */
    margin-left: auto; /* Center the card within its .wucarousel-item slot */
    margin-right: auto; /* Center the card within its .wucarousel-item slot */
    box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}


.section-header {
    font-size: 2em;
}


@media (max-width: 768px) {
    .section-header {
        text-align: center;
    }
}

.showcaseCardSmall {
    height: 180px;
}

.showcaseCard {
    height: 380px;
}

.productCard {
    height: 300px;
}

.clickableCard a {
    position: relative;
}

#allBrandsCard,
.sampleStoreCard,
.timeline-content,
.iconCard,
.announcement-tag {
    /* Added announcement-tag for glassmorphism */
    /* Glassmorphism Styles */
    background-color: rgba(30, 30, 30, 0.4); /* --navbar-bg */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari compatibility */
    border: 1px solid rgba(255, 255, 255, 0.15); /* --glass-card-border-color */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05); /* --glass-shadow */
}

/* Announcement Tag Styles */
.announcement-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Space between text and button */
    width: fit-content;
    margin: 0 auto 20px auto;
    padding: 10px; /* Padding for the outer pill */
    border-radius: 25px; /* Pill shape for the outer tag */
    box-sizing: border-box;
    /* Glassmorphism is applied by the group .elementor-kit-4 above */
}

.announcement-tag span {
    font-size: 1em; /* Adjust as needed */
    line-height: 1.4;
    color: #e0e0e0; /* --text-color */
}

.announcement-tag .btn-announcement {
    display: inline-block;
    padding: 8px 18px; /* Slightly smaller padding for the inner pill */
    background-color: #78fedd; /* --link-color */
    color: white;
    border-radius: 30px; /* Pill shape for the button */
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95em; /* Slightly smaller font for the button */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.announcement-tag .btn-announcement:hover {
    background-color: #16a085; /* Darker shade of --link-color #78fedd; */
    transform: translateY(-2px);
}

.iconCard {
    width: 100%; /* Fill .wucarousel-item */
    height: 180px;
    padding: 15px;
}

.iconCard .material-symbols-outlined {
    font-size: 36px;
}

.sampleStoreCard {
    padding: 10%;
}

.sampleStoreCard img {
    width: 100%;
    height: 100%; /* Or a fixed height if .productCard has fixed height */
}

.productCard img {
    width: 100%;
    height: 100%; /* Or a fixed height if .productCard has fixed height */
    object-fit: cover; /* Ensures image covers the area, might crop */
}

.promoCard {
    height: 300px;
    width: 100%;
}

.promoCard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.showcaseCardSmall img {
    width: 100%;
    height: 100%; /* showcaseCardSmall has fixed height */
    object-fit: cover;
}

.showcaseCard img {
    width: 100%;
    height: 100%; /* showcaseCard has fixed height */
    object-fit: cover;
}

body {
    background-color: #121212; /* --body-bg */
    font-family: 'Poppins', Calibri, 'Trebuchet MS', sans-serif;
    margin: 0;
    color: #e0e0e0; /* --text-color */
}

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 120vw;
    height: 100vh;
    background-color: #76999e; /* --background-fixed-bg */
    overflow: hidden; /* Important to contain the blurred shapes */
    z-index: -1; /* Places it behind all other page content */
}

.blur-shape {
    position: absolute;
    border-radius: 50%; /* Makes the shapes circular */
    filter: blur(80px); /* Reduced blur intensity for more distinctness */
    /* mix-blend-mode: screen; /* Optional: for brighter color mixing on overlap */
}

/* Green Blur Shape */
.blur-shape.green {
    width: 55vw; /* Reduced size */
    height: 55vh; /* Reduced size */
    /* Adjusted gradient for more concentrated color */
    background: radial-gradient(
        circle,
        rgba(0, 255, 0, 0.65) 0%,
        rgba(0, 255, 0, 0) 60%
    );
    top: 30%; /* Initial position for centering */
    left: 30%;
    opacity: 1;
    animation: animateGreenShape 10s infinite alternate ease-in-out; /* Faster animation */
}

/* Teal Blur Shape */
.blur-shape.teal {
    width: 50vw; /* Reduced size */
    height: 50vh; /* Reduced size */
    background: radial-gradient(
        circle,
        rgba(26, 0, 128, 0.65) 0%,
        rgba(0, 128, 128, 0) 60%
    ); /* Adjusted gradient */
    top: 30%;
    left: 30%;
    opacity: 1;
    animation: animateTealShape 16s infinite alternate ease-in-out; /* Faster animation */
}

/* Secondary Green/Teal Blur Shape for more depth */
.blur-shape.secondary-green {
    width: 60vw; /* Reduced size */
    height: 60vh; /* Reduced size */
    background: radial-gradient(
        circle,
        rgb(31, 174, 29) 0%,
        rgba(60, 179, 113, 0) 60%
    ); /* Adjusted gradient */
    top: 30%;
    left: 30%;
    opacity: 1;
    animation: animateSecondaryShape 12s infinite alternate ease-in-out; /* Faster animation */
}

/* Keyframe Animations */
@keyframes animateGreenShape {
    0% {
        transform: translate(-30vw, -20vh) scaleX(1) scaleY(1) rotate(0deg);
    }
    50% {
        transform: translate(20vw, 15vh) scaleX(1.8) scaleY(1.8) rotate(45deg); /* Shape shift */
    }
    100% {
        transform: translate(-10vw, -35vh) scaleX(0.9) scaleY(1.2)
            rotate(-25deg); /* Shape shift */
    }
}

@keyframes animateTealShape {
    0% {
        transform: translate(30vw, -30vh) scaleX(1.2) scaleY(1) rotate(10deg);
    }
    50% {
        transform: translate(-25vw, 20vh) scaleX(0.8) scaleY(1.1) rotate(110deg); /* Shape shift */
    }
    100% {
        transform: translate(-15vw, -60vh) scaleX(1) scaleY(0.9) rotate(70deg); /* Shape shift */
    }
}

@keyframes animateSecondaryShape {
    0% {
        transform: translate(-20vw, 30vh) scaleX(0.9) scaleY(1.05)
            rotate(-15deg);
    }
    50% {
        transform: translate(35vw, -25vh) scaleX(1.1) scaleY(0.85) rotate(55deg); /* Shape shift */
    }
    100% {
        transform: translate(-50vw, -50vh) scaleX(0.8) scaleY(1.1)
            rotate(-30deg); /* Shape shift */
    }
}

#navbar {
    text-align: center;
    font-size: 18px;
}

#navbar li {
    margin: 0 15px;
    display: inline-block;
}

#pageContainer {
    position: relative;
    min-height: 100vh;
}

#contentWrap {
    padding: 20px;
    overflow-x: hidden;
    max-width: 1600px;
    margin: auto;
}
.tileDescription {
    /* Existing styles */
    position: relative;
    bottom: 90px;
    /* width: 280px; Removed for responsiveness */
    width: 100%;
    padding: 0 15px; /* Adjust padding as needed */
    box-sizing: border-box;
    color: white;
    text-shadow: 0 0 5px var(--shadow-color);
}

.tileDescription h3,
.iconCard h3 {
    font-size: 1.2em; /* Slightly larger for emphasis */
    margin: 5px 0 0 0;
    color: white;
}

.tileDescription p,
.iconCard p {
    font-size: 0.9em;
    margin: 0;
    color: white;
    line-height: 1.2;
}

/* Styles for the new Category List Section */
.category-list-section {
    /* Apply glassmorphism styles similar to other cards */
    background-color: rgba(30, 30, 30, 0.4); /* --navbar-bg */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari compatibility */
    border: 1px solid rgba(255, 255, 255, 0.15); /* --glass-card-border-color */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05); /* --glass-shadow */
    border-radius: 15px; /* Match other card border-radius */
    padding: 10px 20px; /* Add some internal padding */
    max-width: 780px;
    margin: auto;
    padding-left: 0px;
    padding-right: 0px;
}

.category-list-section h2 {
    /* Style heading for consistency */
    font-size: 1.8em; /* Slightly smaller than main h1, larger than h3 */
    color: #e0e0e0; /* --text-color */
    margin-top: 0;
    margin-bottom: 20px; /* Space below the heading */
    text-align: center; /* Center the heading */
}

/* Container for the category items to arrange them in a row */
.category-items-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Or space-around, space-evenly */
    gap: 20px; /* Spacing between items */
    margin-bottom: 20px; /* Space below the h2 heading */
}

/* Individual category item styling */
.products-icon-list-item {
    display: flex;
    flex-direction: column; /* Stack icon and text vertically */
    align-items: center; /* Center icon and text block horizontally */
    justify-content: center; /* Vertically center content within the 100px box */
    height: 100px; /* Fixed height as requested */
    flex-basis: 120px; /* Base width for items, they can grow/shrink if needed */
    max-width: 180px; /* Max width to prevent them from becoming too wide */
    text-align: center; /* Ensures text itself is centered if it wraps */
    box-sizing: border-box;
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Smooth hover effect */
}

.products-icon-list-item:hover {
    transform: translateY(-3px); /* Slight lift on hover */
    cursor: pointer;
}

.products-icon-list-icon {
    margin-bottom: 8px; /* Space between icon and text */
}

.products-icon-list-icon .category-icon {
    height: 100px;
    margin: auto;
    margin-bottom: -10px;
    display: block; /* Remove extra space below img if any */
}

.iconCard h3 {
    margin: 5px 0 10px 0;
}

h1 {
    font-weight: 600;
    margin-top: 50px;
    color: #e0e0e0;
    font-size: 2em;
}

h2 {
    color: #e0e0e0;
}

h3 {
    font-size: 1.17em;
    color: #e0e0e0;
}

.products-icon-list-text {
    font-size: 0.9em; /* Adjust as needed */
    color: #e0e0e0; /* Match site's text color */
    line-height: 1.2;
}

.subHeading {
    padding-left: 10px;
    font-weight: 400;
    /* Fallback color for browsers that don't support text gradients - darker for better contrast */
    color: #b0b0b0; /* --text-color-light */
    /* Gradient */
    /* New gradient with darker, higher-contrast colors */
    background-image: linear-gradient(
        to right,
        #69ffc3,
        #78fffa,
        #b4ff64
    ); /* Dark mode gradient */
    -webkit-background-clip: text; /* For Safari/Chrome */
    background-clip: text;
    color: transparent; /* Makes the original text color transparent */
    /* text-shadow: 0px 1px 1px rgba(255,255,255,0.1); /* Lighter shadow for dark mode */
}

/* In styles.css, update or add this rule for #heroSection */
#heroSection {
    display: flex;
    flex-direction: column;
    align-items: center; /* This will center the .heroImage and .quickActionContainer */
    position: relative; /* Needed for positioning floating apparel */
    margin: auto; /* This centers the #heroSection block within #contentWrap */
    /* width: 100%; is applied inline in HTML, which is fine */
}

/* Responsive adjustments for hero section */
@media (max-width: 992px) {
    /* Breakpoint for tablets and smaller */

    .quickActionContainer {
        flex-direction: column; /* Stack quick action items vertically */
        align-items: center; /* Center the .quickAction items when stacked */
        width: 100%; /* Allow it to take full width to center its children properly */
    }

    .quickAction {
        width: 85%; /* Make quick action items wider */
        max-width: 400px; /* Cap their max width to prevent them from being too wide */
        margin-bottom: 15px; /* Add space between stacked items */
    }

    .quickAction:last-child {
        margin-bottom: 0; /* No margin for the last stacked item */
    }
}

.heroImage {
    height: auto;
    max-width: 70%;
    margin: auto;
    
    margin-top: 0px;
    position: relative; /* To ensure it's above the floating images */
    z-index: 2; /* Higher z-index than floating apparel */
}

@media (max-width: 600px) {
    /* Breakpoint for mobile phones */
    .heroImage {
        margin-top: 50px; /* Reduced top margin for mobile */
        margin-bottom: 20px;
    }

    .quickAction {
        width: 90%; /* Take up more width on very small screens */
    }
    .quickAction h3 {
        font-size: 1em;
    }
    .quickAction a {
        /* Target links, adjust if you have other text elements like <p> */
        font-size: 1em;
    }

    /* Hide floating apparel on mobile */
    .floating-apparel {
        display: none !important; /* Use !important to ensure override if other specific styles exist */
    }

    .announcement-tag {
        margin: 0 auto 20px auto; /* Adjusted margin for mobile */
        padding: 8px 15px; /* Smaller padding for mobile */
        max-width: 90%; /* Ensure it doesn't touch edges */
        gap: 10px;
    }
    .announcement-tag span {
        font-size: 0.85em; /* Smaller text on mobile */
    }
    .announcement-tag .btn-announcement {
        padding: 6px 12px; /* Smaller button on mobile */
        font-size: 0.8em;
    }
}

.quickActionContainer {
    display: flex;
    margin: auto;
    justify-content: center;
}

.quickAction {
    border-radius: 50px;
    width: 300px;
    padding: 2px;
    display: flex;
    flex-direction: row;
}

.quickAction > div {
    display: inline-block;
    padding: 5px 0 5px 20px;
}

.quickAction h3 {
    margin: 0;
    font-size: 1em;
}

.quickAction a {
    color: #78fedd; /* --link-color */
    font-size: 0.9em;
}

.quickAction .material-symbols-outlined {
    color: #e0e0e0;
}

#navbar a {
    color: #e0e0e0; /* --navbar-text-color */
}

.quickAction .material-symbols-outlined {
    font-size: 30px;
}

.footer {
    color: rgb(224, 224, 224);
    bottom: 0;
    width: 100%;
    box-shadow: 1px 1px 5px 0px #ffffff1a; /* --shadow-color */
    background-color: rgba(20, 20, 20, 0.65); /* --footer-bg */
}

.footerColumns {
    display: flex;
    justify-content: space-evenly;
}

.footerColumns > div {
    padding: 5px 20px;
}

.footerColumns > div li {
    margin-bottom: 5px;
}

.footerColumns > div h1 {
    margin: 10px 0;
    font-size: 2em;
}

.footerColumns > div ul {
    margin: 0;
}

.footer ul {
    list-style: none;
    padding: 0;
}

.footer a {
    list-style: none;
    padding: 0;
}

.footer a {
    color: #78fedd;
}

#contactFooterUl .material-symbols-outlined {
    vertical-align: middle;
    font-size: 36px;
    margin-right: 10px;
    color: white;
}

#contactFooterUl a {
    vertical-align: middle;
    display: inline-block;
}

.footer-bottom-content {
    display: flex; /* Use flex for easier alignment */
    justify-content: space-between; /* Puts space between items */
    align-items: center; /* Vertically aligns items */
    padding: 10px 20px;
    border-top: 1px solid #ffffff1a; /* --shadow-color */
}

.footer-bottom-content img {
    height: 40px; /* Adjusted height */
    margin-left: 15px; /* Space from the text */
}

footer-bottom-content p {
    color: white;
}

a {
    text-decoration: none;
}

.clickableCard {
    transition: transform 250ms;
    will-change: transform;
}

.clickableCard:hover,
.clickableCard:focus {
    transform: translateY(-5px);
}

.wucarousel {
    position: relative;
    max-width: 100%;
    overflow-x: hidden;
}

.wucarousel-item * {
  pointer-events: auto !important;
}

.wucarousel-inner {
    display: flex;
    /* padding: 10px 0; Adjusted: padding will be on items for gutters */
    transition: transform 0.5s ease;
    touch-action: pan-y; /* Allow vertical page scroll, handle horizontal swipe in JS */
}

.wucarousel-item {
    /* display: inline-block; Changed for flex context */
    display: block; /* Or flex if its children need flex alignment */
    flex-shrink: 0; /* Prevent items from shrinking */
    box-sizing: border-box;
    padding: 0 5px; /* Gutter space for 4 columns */
    /* Default width for 4 items, matches JS logic */
    width: calc(100% / 4);
}

.wucarousel-control {
    position: absolute;
    top: calc(50% - 10px);
    transform: translateY(-50%);
    color: #e0e0e0; /* --wucarousel-control-color */
    background-color: rgba(30, 30, 30, 0.4); /* --navbar-bg */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    box-shadow: 0 2px 6px rgba(255, 255, 255, 0.05); /* --wucarousel-button-shadow */
    padding: 0;
    cursor: pointer;
    /* display: none;  <-- This line can be removed as it's overridden by display:flex below */
    z-index: 1;
    display: flex; /* This is the effective CSS display before JS intervenes */
    align-items: center;
    justify-content: center;
    border: 1px solid #245c4f; /* --navbar-border-color */
}

.wucarousel-control.prev {
    left: 0px; /* Offset from the left edge */
}

.wucarousel-control.next {
    right: 0px; /* Offset from the right edge */
}

.wucarousel-control .material-symbols-outlined {
    font-size: 48px; /* Icon size */
    line-height: 1; /* Helps ensure tight box model for precise centering */
    transition: color 0.2s ease, transform 0.2s ease-in-out; /* Smooth transition for color and transform */
    display: block; /* Ensure it behaves as a block for transforms if needed */
}

/* Hover effect on the BUTTON, targeting the ICON */
.wucarousel-control:hover .material-symbols-outlined {
    color: #ffffff; /* --wucarousel-control-hover-color */
    transform: scale(1.15); /* General scale-up effect */
}

/* Specific animation for the 'previous' arrow icon on button hover */
.wucarousel-control.prev:hover .material-symbols-outlined {
    transform: scale(1.15) translateX(-2px); /* Scale and nudge left */
}

/* Specific animation for the 'next' arrow icon on button hover */
.wucarousel-control.next:hover .material-symbols-outlined {
    transform: scale(1.15) translateX(2px); /* Scale and nudge right */
}

@media (max-width: 1200px) {
    .wucarousel-item {
        width: calc(100% / 3); /* Three items at a time */
        padding: 0 5px; /* Gutter space for 3 columns */
    }
}

@media (max-width: 900px) {
    .wucarousel-item {
        width: calc(100% / 2); /* Two items at a time for medium screens */
        padding: 0 4px; /* Gutter space for 2 columns */
    }
}

@media (max-width: 600px) {
    .wucarousel-item {
        width: 100%; /* Single item at a time for small screens */
        padding: 0 3px; /* Gutter space for 1 column */
    }

    .wucarousel-control {
        top: 50%;
        transform: translateY(-50%);
        /* left: 0; and right: 0; were removed from here. */
        /* Specific .prev and .next classes will handle their positioning. */
    }
}

/* Floating Apparel Styles for Hero Section */
.floating-apparel {
    position: absolute;
    z-index: 1; /* Behind heroImage but above general background */
    opacity: 0.85; /* Slightly transparent initially */
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
        opacity 0.6s ease-out;
    pointer-events: none; /* So they don't interfere with clicks on hero image or quick actions */
}

@keyframes floatShirtAnimation {
    0% {
        transform: rotate(-20deg) translateX(-20px) translateY(0px); /* Matches initial style */
    }
    100% {
        /* The other extreme of the float, 'alternate' will play this back and forth */
        transform: rotate(-23deg) translateX(-22px) translateY(-10px); /* Bob up, slight extra tilt & shift */
    }
}

@keyframes floatHatAnimation {
    0% {
        transform: rotate(20deg) translateX(20px) translateY(0px); /* Matches initial style */
    }
    100% {
        /* The other extreme of the float */
        transform: rotate(17deg) translateX(23px) translateY(-8px); /* Bob up, slight different tilt & shift */
    }
}

@keyframes floatSweatshirtAnimation {
    0% {
        transform: rotate(15deg) translateX(15px) translateY(5px);
    }
    100% {
        transform: rotate(10deg) translateX(10px) translateY(-5px);
    }
}

@keyframes floatJacketAnimation {
    /* Renamed from floatShortsAnimation for clarity */
    0% {
        transform: rotate(10deg) translateX(5px) translateY(0px); /* Adjusted for top position */
    }
    100% {
        transform: rotate(5deg) translateX(0px) translateY(-7px); /* Adjusted for top position */
    }
}

.floating-shirt {
    width: 140px; /* Adjust size as needed */
    height: auto;
    left: 21%; /* Adjust: heroImage is 70% wide, so 15% on each side. This is slightly into the heroImage area */
    transform: rotate(-20deg) translateX(-20px); /* Initial tilt and slight offset */
    animation: floatShirtAnimation 4s infinite alternate ease-in-out;
}

.floating-hat {
    width: 90px; /* Adjust size as needed */
    height: auto;
    top: 30px; /* Adjust to appear near top-right corner of heroImage */
    right: 22%; /* Adjust: similar logic to left positioning */
    transform: rotate(20deg) translateX(20px); /* Initial tilt and slight offset */
    animation: floatHatAnimation 3.7s infinite alternate ease-in-out; /* Slightly different timing for desynchronization */
}

.floating-sweatshirt {
    width: 140px; /* Adjust size as needed */
    height: auto;
    top: -15px; /* New top position */
    left: 26%; /* Positioned between shirt and center */
    transform: rotate(15deg) translateX(15px) translateY(5px); /* Adjusted initial transform */
    animation: floatSweatshirtAnimation 4.2s infinite alternate ease-in-out;
}

.floating-jacket {
    width: 140px; /* Adjust size as needed */
    height: auto;
    top: 15px; /* New top position */
    right: 26%; /* Positioned between hat and center */
    transform: rotate(10deg) translateX(5px) translateY(0px); /* Adjusted initial transform */
    animation: floatJacketAnimation 3.9s infinite alternate ease-in-out; /* Using renamed animation */
}

.floating-apparel.flown-out {
    opacity: 1;
}

.floating-shirt.flown-out {
    transform: translateX(-200px) translateY(-40px) rotate(-45deg) scale(1.1);
}

.floating-hat.flown-out {
    transform: translateX(200px) translateY(-40px) rotate(45deg) scale(1.1);
}

.floating-sweatshirt.flown-out {
    transform: translateX(-150px) translateY(-60px) rotate(30deg) scale(1.15); /* Adjusted fly-out */
}

.floating-jacket.flown-out {
    transform: translateX(160px) translateY(-55px) rotate(-25deg) scale(1.1); /* Adjusted fly-out */
}

/* Tubelight Navbar Styles - Add to your styles.css */
.tubelight-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* Ensure it establishes a stacking context for z-index */
    width: fit-content; /* Navbar width will be based on its content */
    max-width: 95%; /* Maximum width to prevent it from becoming too wide on larger screens */
    padding: 5px; /* Adjusted padding for a more spacious feel inside the pill */
    border-radius: 25px; /* Creates the pill shape */
    border: 1px solid transparent;
    background-color: rgba(30, 30, 30, 0.4); /* --navbar-bg */
    backdrop-filter: blur(10px); /* Applies the blur effect to the background */
    -webkit-backdrop-filter: blur(10px); /* For Safari compatibility */
    margin: 10px auto;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05); /* --glass-shadow (dark mode) */
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
    z-index: 990; /* Increased z-index to ensure navbar is well above other page content */
}

.tubelight-navbar > span,
.tubelight-navbar a {
    text-decoration: none;
    color: #e0e0e0; /* --navbar-text-color */
    transition: color 0.3s ease;
    border: 1px solid transparent;
}

.navbar-wu {
    /* This is the UL containing the main nav items and the tubelight */
    display: flex;
    list-style: none; /* margin: 0 auto; /* Removed: Parent's justify-content handles spacing */
    margin: 0; /* Reset margin */
    padding: 0;
    position: relative; /* Crucial: The .nav-tubelight is positioned relative to this */
    align-items: center;
}

.navbar-logo-link {
    display: flex; /* Helps with vertical alignment if needed */
    align-items: center;
}

/* Styles for the logo image within the navbar */
.navbar-wu .nav-link > img {
    height: 24px; /* Adjust as needed, ensure it fits well */
    display: block;
}

.nav-item {
    margin: 0 2px; /* Minimal spacing between items, padding on links will handle most spacing */
}

.nav-item.has-dropdown.open .mega-menu-dropdown {
    display: block;
    /* ... */
}

.nav-link {
    padding: 10px 15px; /* Reduced padding inside each link */
    border-radius: 20px; /* Pill shape for buttons */
    display: flex;
    align-items: center; /* Vertically aligns text and icons within the link */
    position: relative; /* To ensure text is above the tubelight */
    z-index: 1;
    font-weight: 600; /* Bolder text */
    white-space: nowrap; /* Prevents links from wrapping */
    font-size: 0.95rem; /* Slightly adjusted font size for a sleeker pill */
    transition: background-color 0.3s ease, color 0.3s ease,
        box-shadow 0.3s ease; /* Smooth transitions */
}

/* Dropdown Menu Styles */
.nav-item.has-dropdown {
    position: relative; /* For positioning the dropdown */
}

.dropdown-menu {
    position: absolute;
    top: calc(
        100% + 10px
    ); /* Position below the parent nav-item with an extra 5px gap */
    left: 0;
    background-color: rgba(
        30,
        30,
        30,
        0.2
    ); /* Darker, more transparent for dark mode dropdown */
    backdrop-filter: blur(10px); /* Applies the blur effect to the background */
    -webkit-backdrop-filter: blur(10px); /* For Safari compatibility */
    min-width: 220px;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05); /* --glass-shadow (dark mode) */
    border-radius: 10px; /* Rounded all corners */
    z-index: 1000;
    list-style: none;
    padding: 5px 0; /* Padding inside the dropdown */
    margin: 0;

    /* Animation properties */
    opacity: 0;
    visibility: hidden;
    transform: scaleY(0.9) translateY(-10px); /* Start slightly smaller and offset upwards */
    transform-origin: top center; /* Animation originates from the top */
    /* Define transitions for properties that change */
    transition-property: opacity, transform, visibility;
    transition-duration: 0.2s, 0.3s, 0s; /* opacity, transform, visibility (instant change for visibility itself) */
    transition-timing-function: ease-out, cubic-bezier(0.68, -0.55, 0.265, 1.55),
        linear;
    /* Delays: opacity 0s, transform 0s. Visibility delay of 0.3s is for when it becomes hidden (closing). */
    transition-delay: 0s, 0s, 0.3s;
}

.nav-item.has-dropdown:hover .dropdown-menu,
.nav-item.has-dropdown.open .dropdown-menu {
    /* Show on hover OR if .open class is present */
    visibility: visible;
    opacity: 1;
    transform: scaleY(1) translateY(0);
    /* Explicitly set transition properties for the opening state.
       Crucially, set all delays to 0s for opening. */
    transition-property: opacity, transform, visibility;
    transition-duration: 0.2s, 0.3s, 0s; /* Match base durations or adjust if needed for opening */
    transition-timing-function: ease-out, cubic-bezier(0.68, -0.55, 0.265, 1.55),
        linear;
    transition-delay: 0.3s; /* Apply 0s delay to all (opacity, transform, visibility) for opening */
}

.mega-menu-dropdown {
    position: fixed; /* Changed to fixed to center relative to the viewport */
    top: 55px; /* Adjusted fixed top position to appear below the main navbar. This value might need fine-tuning based on your exact header height and desired spacing. */
    left: 50%; /* Center it horizontally */
    transform: translateX(-50%) scaleY(0.9) translateY(-10px); /* Initial transform for animation */
    transform-origin: top center; /* Animation originates from the top */

    /* Glassmorphism Styles - copied from .dropdown-menu */
    
    background-image: linear-gradient(25deg, #628b94, #567e89, #669091);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); /* --glass-shadow (dark mode) */
    border-radius: 10px; /* Rounded all corners */
    border: 1px solid rgba(255, 255, 255, 0.15); /* --glass-card-border-color */

    width: 800px; /* Max width to prevent it from being too wide on very large screens */
    padding: 20px; /* Padding inside the mega menu */

    z-index: 1000; /* Ensure it's on top */
    opacity: 0;
    visibility: hidden;

    /* Animation properties */
    transition-property: opacity, transform, visibility;
    transition-duration: 0.2s, 0.3s, 0s;
    transition-timing-function: ease-out, cubic-bezier(0.68, -0.55, 0.265, 1.55), linear;
    transition-delay: 0.1s, 0.1s, 0.1s; /* Delay visibility change for closing animation */
}

.nav-item.has-dropdown:hover .mega-menu-dropdown,
.nav-item.has-dropdown.open .mega-menu-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) scaleY(1) translateY(0);
    transition-delay: 0s; /* No delay for opening */
}

.mega-menu-dropdown .category-list-section {
    background-color: transparent; /* Remove background, border, shadow as parent has it */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0; /* Remove padding as parent has it */
    max-width: none; /* Allow it to take full width of mega-menu-dropdown */
    margin: 0; /* Remove margin */
}

.dropdown-item a {
    display: block;
    padding: 10px 20px; /* Padding for dropdown links */
    color: #e0e0e0; /* --navbar-text-color */
    text-decoration: none;
    white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
    background-color: #38b1b15c;
    border: 1px solid #49a590; /* --navbar-border-color */
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.05); /* Lighter shadow for dark mode */
    color: #e0e0e0;
}

.dropdown-item > a:hover {
    background-color: #33636372; /* --navbar-hover-bg */
}

.nav-link .material-symbols-outlined {
    /* Styling for icons within nav links */
    font-size: 1.1em; /* Slightly larger than text */
    line-height: 1; /* Helps with alignment */
    vertical-align: middle; /* Better alignment for icons with text */
    transition: transform 0.3s ease; /* For arrow rotation */
}

.nav-item.has-dropdown.open .dropdown-toggle .material-symbols-outlined {
    transform: rotate(180deg);
}

.nav-tubelight {
    top: -8px; /* Position glow above the links; adjust as needed */
    /* height, background-color, and border-radius removed for glow effect */
    box-shadow: 0 -4px 12px 2px rgba(0, 123, 255, 0.65); /* Upward glow effect */
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth animation for movement and resizing */
    z-index: 0; /* Behind the nav-link content */
    opacity: 0; /* Hidden by default, shown by JS */
    left: 0; /* Initial JS controlled values */
    width: 0; /* Initial JS controlled values */
}

.navbar-actions {
    display: flex;
    align-items: center;
    /* === NEW STYLES for Divider === */
    margin-left: 10px; /* Creates space between .navbar-wu and .navbar-actions */
    padding-left: 10px; /* Creates space between the divider and the action items */
    border-left: 1px solid #ffffff8f; /* --shadow-color */
    height: 28px; /* Approximate height to align with nav items, adjust as needed */
}

.navbar-actions .material-symbols-outlined {
    font-size: 1.5em; /* Size for cart icon etc. */
}

/* Hamburger Menu Button */
.hamburger-menu {
    display: none; /* Hidden by default, shown on mobile */
}

button.hamburger-menu {
    background: transparent;
    border: none;
    color: #e0e0e0; /* --navbar-text-color */
    cursor: pointer;
    padding: 8px;
    position: fixed;
    top: 0px;
    right: 10px; /* Positioning for the hamburger menu */
    z-index: 1001; /* Ensure it's above the navbar and dropdowns */
}

button.hamburger-menu:hover {
    background: transparent;
}

button.hamburger-menu .material-symbols-outlined {
    font-size: 28px;
    display: block;
}

/* Collapsible content wrapper */
.navbar-collapsible-content {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Allows .navbar-wu and .navbar-actions to fill space */
}

#sublimationDropdown {
    width: 450px;
}

/* Responsive adjustments for Navbar */
@media (max-width: 1000px) {
    /* Breakpoint for hamburger menu */
    #sublimationDropdown {
        width: initial; /* Reset width to auto for mobile */
    }
    .tubelight-navbar {
        justify-content: space-between; /* Logo on left, hamburger on right */
        position: relative; /* For absolute positioning of the dropdown */
        width: calc(95vw - 115px);
        z-index: 990;
        margin: 0;
        position: fixed; /* Fixed position for mobile */
        min-height: 46px;
        max-width: 300px;
    }
    .navbar-logo-link img {
        height: 22px; /* Slightly smaller for mobile if desired */
    }

    .hamburger-menu {
        display: flex; /* Show the hamburger button */
        align-items: center;
        justify-content: center;
        margin-left: auto; /* Pushes hamburger to the right */
    }

    .navbar-collapsible-content {
        display: none; /* Hide content by default */
        flex-direction: column;
        position: static; /* Change from absolute to static to be in normal flow */
        /* Remove top, left, right as they are not needed for static positioning */
        /* top: 100%; */
        /* left: 0; right: 0;
        width: auto; /* Let left/right define width relative to parent's padding box */
        border-radius: 0 0 20px 20px; /* Rounded bottom corners for dropdown */
        z-index: 1000; /* Ensure it's on top of other content */
        padding: 10px 0; /* Padding inside the dropdown */
        /* The .tubelight-navbar has max-width: 95% and margin: auto.
           The dropdown will be full width of this container. */
    }

    .navbar-collapsible-content.active {
        display: flex; /* Show when hamburger is clicked */
    }

    .navbar-wu {
        /* Targets the UL */
        flex-direction: column;
        width: 100%;
        align-items: stretch; /* Make nav items stretch */
        margin: 0; /* Reset any default UL margins */
        padding: 0; /* Reset any default UL padding */
        max-height: 105vh;
        overflow-y: scroll;
    }

    .navbar-wu .nav-item {
        margin: 0; /* Remove horizontal margins */
        width: 100%;
    }

    .navbar-wu .nav-link,
    .navbar-actions .nav-link {
        justify-content: flex-start; /* Align text to left */
        padding: 12px 25px; /* Adjust padding for vertical items */
        border-radius: 0; /* Remove individual pill shape */
        border: none;
        box-shadow: none;
        margin: 0; /* Ensure no extra margins on links themselves */
    }

    /* Mobile Dropdown Specifics */
    .nav-item.has-dropdown .dropdown-menu {
        position: static; /* Behave like a normal block in the flex column */
        width: 100%;
        box-shadow: none;
        border-radius: 10px; /* Consistent rounded corners on mobile */
        background-color: rgba(
            0,
            0,
            0,
            0.03
        ); /* Slightly different background for visual hierarchy */
        padding-left: 0; /* Reset padding */
        opacity: 1; /* Ensure visible when .open */
        visibility: visible; /* Ensure visible when .open */
        /* display: none; is handled by default, .open class will show it */
    }

    /* .nav-item.has-dropdown.open .dropdown-menu { */
    /* display: block; /* Removed to allow opacity/transform animations to work */
    /* The general .nav-item.has-dropdown.open .dropdown-menu rule will handle visibility */
    /* } */

    .mega-menu-dropdown {
        position: static; /* Behave like a normal block in the flex column */
        width: 100%;
        box-shadow: none;
        border-radius: 10px; /* Consistent rounded corners on mobile */
        background-color: rgba(0,0,0,0.03); /* Slightly different background for visual hierarchy */
        padding: 0; /* Remove padding as parent nav-item will have it */
        opacity: 1; /* Ensure visible when .open */
        visibility: visible; /* Ensure visible when .open */
        transform: none; /* Remove transforms */

    }

    .nav-item.has-dropdown .mega-menu-dropdown {
        display: none;  
        transition: none; /* Remove transitions */
    }

    .mega-menu-dropdown .category-list-section {
        padding: 10px 25px; /* Add padding back for content within the mobile menu */
    }

    .mega-menu-dropdown .category-items-wrapper {
        flex-direction: column; /* Stack items vertically on mobile */
        align-items: flex-start; /* Align items to the left */
        gap: 5px; /* Smaller gap for stacked items */
        margin-bottom: 0px;
    }

    .mega-menu-dropdown .products-icon-list-item {
        flex-basis: auto; /* Allow items to take full width */
        max-width: none; /* Remove max-width constraint */
        width: 100%; /* Ensure full width */
        height: auto; /* Let content define height */
        padding: 0; /* Padding will be on the link itself */
        align-items: baseline;
        text-align: left; /* Align text to the left */
    }

    /* Hide the icon container on mobile */
    .mega-menu-dropdown .products-icon-list-icon {
        display: none;
    }

    /* Make the link inside the mobile mega menu a simple list item */
    .mega-menu-dropdown .products-icon-list-item a.products-icon-link {
        flex-direction: row; /* Align items in a row (text will be the only item) */
        justify-content: flex-start; /* Align text to the left */
        align-items: center; /* Vertically center the text */
        padding: 6px 0 6px 15px; /* Add some vertical padding for touch-friendliness */
    }

    /* Align the text to the left on mobile */
    .mega-menu-dropdown .products-icon-list-text {
        text-align: left;
    }

    /* Show the mega menu on mobile when its parent is open, and reset desktop transforms */
    .nav-item.has-dropdown.open .mega-menu-dropdown {
        display: block;
        transform: none;
        min-height: 150px;;
        max-height: calc(100vh - 350px);
        overflow-y: scroll;
    }

    .nav-item.has-dropdown .dropdown-menu {
        display: block; /* Show the normal dropdown menu */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
    }

    .nav-item.has-dropdown .dropdown-menu .dropdown-item a {
        padding-left: 40px; /* Indent sub-menu items */
        box-shadow: none;
        margin: 0; /* Ensure no extra margins on links themselves */
    }
    
    .nav-item.has-dropdown.open .dropdown-menu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }
    .navbar-wu .nav-link:hover,
    .navbar-wu .nav-link.active,
    .navbar-actions .nav-link:hover {
        background-color: rgba(0, 0, 0, 0.0); /* Subtle hover/active state */
    }

    .nav-tubelight {
        display: none !important; /* Hide tubelight effect on mobile */
    }

    .navbar-actions {
        flex-direction: column;
        width: 100%;
        border-left: none; /* Remove divider */
        margin-left: 0;
        padding-left: 0;
        height: auto;
        align-items: stretch;
        padding-top: 5px; /* Space between nav-items and action-items */
        margin-top: 5px; /* Additional space if needed */
        border-top: 1px solid rgba(0, 0, 0, 0.1); /* Separator line */
    }
}

/* Responsive Footer Styles */
@media (max-width: 768px) {
    .footerColumns {
        flex-direction: column; /* Stack columns vertically */
        align-items: flex-start; /* Align items to the start of the flex container */
    }

    .footerColumns > div {
        width: 100%; /* Make each column take full width */
        padding: 15px 20px; /* Adjust padding for stacked view */
        box-sizing: border-box;
        border-bottom: 1px solid #ffffff1a; /* --shadow-color */
    }
    .footerColumns > div:last-child {
        border-bottom: none; /* Remove border from the last item */
    }

    .footer-bottom-content {
        flex-direction: column; /* Stack copyright and logo */
        text-align: center;
    }
    .footer-bottom-content img {
        margin-top: 10px; /* Space above the logo when stacked */
        margin-left: 0; /* Reset margin-left */
    }
}

/* Style for the SVG logo in dark mode to match navbar text color */
.navbar-wu .nav-link img {
    filter: brightness(0) invert(1) brightness(0.88); /* Converts SVG to ~#e0e0e0 */
}

/* Styles for the toggle switch - REMOVED as it's not functional without JS variables */
/*
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}
.theme-switch {
    display: inline-block;
    height: 20px;
    position: relative;
    width: 40px;
}

.theme-switch input { display:none; }

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    background-color: #fff;
    bottom: 2px;
    content: "";
    height: 16px;
    left: 2px;
    position: absolute;
    transition: .4s;
    width: 16px;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #00a79d; /* Or your primary accent color
}

input:checked + .slider:before {
    transform: translateX(20px);
}

*/

/* Styles for iframe container on design-ideas.html */
.iframe-container {
    margin-top: 20px; /* Add some space above the iframe */
    /* You can add more styling here if needed, e.g., max-width, centering */
}

/* Contact Us Page Styles */
.contact-us-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 20px;
    color: #e0e0e0; /* --text-color */
}

.contact-details,
.contact-form-section {
    flex: 1;
    padding: 25px; /* Increased padding */
    background-color: #1e1e1e; /* --card-bg */
    border-radius: 15px;
    box-shadow: 0 4px 12px #ffffff1a; /* --shadow-color */
}

.contact-form-section {
    flex: 1;
    padding: 25px; /* Increased padding */
    background-color: #1e1e1e; /* --card-bg */
    border-radius: 15px;
    box-shadow: 0 4px 12px #ffffff1a; /* --shadow-color */
}

.contact-details h2,
.contact-form-section h2 {
    margin-top: 0;
    margin-bottom: 20px; /* Added space below h2 */
    color: #e0e0e0; /* --text-color */
    font-size: 1.8em; /* Larger heading */
}
.contact-details h2::after,
.contact-form-section h2::after {
    content: '';
    display: block;
    width: 60px; /* Longer underline */
    height: 3px;
    background-color: #78fedd; /* --link-color */
    margin-top: 10px; /* Increased space */
}

.contact-details ul {
    list-style: none;
    padding: 0;
}

.contact-details li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px; /* Increased space between items */
    font-size: 1rem; /* Slightly larger font */
}

.contact-details .material-symbols-outlined {
    font-size: 30px; /* Larger icon */
    margin-right: 18px; /* More space next to icon */
    margin-top: 3px;
}

.contact-details a {
    color: #78fedd; /* --link-color */
    text-decoration: none;
}
.contact-details a:hover {
    text-decoration: underline;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #e0e0e0; /* --text-color */
}

.form-group input[type='text'],
.form-group input[type='email'],
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #245c4f; /* --navbar-border-color */
    border-radius: 8px;
    box-sizing: border-box;
    background-color: rgba(20, 20, 20, 0.65); /* --footer-bg */
    color: #e0e0e0; /* --text-color */
    font-size: 1rem;
}
.form-group input[type='text']:focus,
.form-group input[type='email']:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #78fedd; /* --link-color */
    box-shadow: 0 0 0 2px rgba(26, 188, 156, 0.25); /* Adjusted focus for dark link color */
}

.btn-primary {
    /* Gradient background that fits the site's teal/green theme */
    background-image: linear-gradient(45deg, #337b7c, #3fcb4b);
    color: white;
    padding: 12px 30px; /* More horizontal padding */
    border-radius: 25px;
    cursor: pointer;
    font-size: 1.05rem; /* Slightly larger font */
    font-weight: 600;
    transition: all 0.2s ease-out; /* Smooth transition for all properties */
    display: inline-block; /* To allow margin if needed and proper sizing */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); /* Adds depth to text */

    /* Borders for 3D glass outline effect */
    border-top: 1px solid rgba(255, 255, 255, 0.35); /* Lighter top border */
    border-left: 1px solid rgba(255, 255, 255, 0.25); /* Lighter left border */
    border-bottom: 1px solid rgba(0, 0, 0, 0.25); /* Darker bottom border */
    border-right: 1px solid rgba(0, 0, 0, 0.2); /* Darker right border */

    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* Main drop shadow for floating effect */
}

.btn-primary:hover {
    /* Change gradient colors on hover, remove movement and other visual changes */
    background-image: linear-gradient(45deg, #389c9e, #2d8f3d);
}

.btn-primary:active {
    transform: translateY(1px); /* Button press effect */
    background-image: linear-gradient(
        45deg,
        #337b7c,
        #33b65b
    ); /* Darker gradient when pressed */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Reduced shadow when pressed */
    border-bottom-color: rgba(0, 0, 0, 0.4);
    border-right-color: rgba(0, 0, 0, 0.35);
}

/* Responsive adjustments for contact page */
@media (max-width: 768px) {
    .contact-us-container {
        flex-direction: column;
    }
    .contact-details h2,
    .contact-form-section h2 {
        font-size: 1.6em;
    }
}

/* Styles for Contact Us Section Glassmorphism */
.contact-details,
.contact-form-section,
.content-subsection {
    background: rgba(30, 30, 30, 0.1); /* Darker glass for dark mode */
    /* For a darker glass, you could use rgba(0, 0, 0, 0.1). */
    /* Try to match the transparency/tint of your navbar if possible. */
    -webkit-backdrop-filter: blur(
        10px
    ); /* Blur radius. Adjust (e.g., 5px to 20px) to match your navbar's blur. */
    backdrop-filter: blur(10px);
    padding: 25px; /* Ensures content isn't too close to the blurred edges. Adjust if you have existing padding. */
    border-radius: 15px; /* Rounded corners for a softer look. Match your site's design. */
    border: 1px solid rgba(255, 255, 255, 0.15); /* --glass-card-border-color (dark mode) */
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.05); /* --glass-shadow (dark mode) */
}

/* Map Styles for Contact Page */
.map-container {
    width: 100%;
    margin-bottom: 25px; /* Space below the map */
    border-radius: 10px; /* Match card styling */
    overflow: hidden; /* Ensures iframe corners are clipped */
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05); /* Lighter shadow for dark mode */
}

.map-container iframe {
    display: block; /* Removes any potential extra space below the iframe */
    width: 100%;
    height: 300px; /* Default height, can be adjusted */
    border: 0;
}

.onlineStoresPageContent {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.onlineStoresPageContent > h1 {
    text-align: center;
    width: 100%;
    margin-top: 20px;
}

.onlineStoresPageContent h2 {
    text-align: center;
    font-size: 2em;
    margin-bottom: 10px; /* Reduced margin */
    color: #e0e0e0; /* --text-color */
}

.onlineStoresPageContent h2 + p {
    /* Paragraph directly after an H2 */
    text-align: center;
    max-width: 600px;
    margin: auto;
    font-size: 1.4em;
    font-weight: 400;
    margin-bottom: 20px;
    /* Fallback color for browsers that don't support text gradients - darker for better contrast */
    color: #b0b0b0; /* --text-color-light */
    /* Gradient */
    /* New gradient with darker, higher-contrast colors */
    background-image: linear-gradient(
        to right,
        #69ffc3,
        #78fffa,
        #b4ff64
    ); /* Dark mode gradient */
    -webkit-background-clip: text; /* For Safari/Chrome */
    background-clip: text;
    color: transparent; /* Makes the original text color transparent */
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); /* Subtle shadow for better readability */
    line-height: 1;
}

/* Video Feature Section */
.video-feature-section .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 800px; /* Max width of video */
    margin: 15px auto 25px auto; /* Adjusted margin */
    border-radius: 10px;
    box-shadow: 0 5px 15px #ffffff1a; /* --shadow-color */
}

.video-feature-section .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Guidebook Highlight Section */
.guidebook-highlight-section .guidebook-card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0; /* Reduced padding */
}

/* Get Started Form Section */
.get-started-form-section .form-embed-container {
    max-width: 800px; /* Adjust as needed */
    margin: 15px auto 25px auto; /* Adjusted margin */
    border-radius: 10px;
    overflow: hidden; /* To clip iframe corners if it has a border */
    box-shadow: 0 5px 15px #ffffff1a; /* --shadow-color */
}
.get-started-form-section .form-embed-container iframe {
    display: block; /* remove extra space below iframe */
}

/* Sample Stores Section */
.sample-stores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 5px; /* Reduced gap */
    padding: 15px 0; /* Reduced padding */
}
/* .sample-stores-grid .productCard can reuse existing styles */

/* Timeline Section */
.timeline-section {
    padding: 30px 15px; /* Reduced padding */
}
.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}
.timeline::after {
    /* The central line */
    content: '';
    position: absolute;
    width: 4px;
    background-color: #78fedd; /* --link-color */
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    border-radius: 2px;
}
.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    box-sizing: border-box;
}
.timeline-item:nth-child(odd) {
    left: 0;
    padding-right: 30px; /* Space from center line */
}
.timeline-item:nth-child(even) {
    left: 50%;
    padding-left: 30px; /* Space from center line */
}
.timeline-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    right: -25px; /* Half of width to center on line */
    background-color: #1e1e1e; /* --card-bg */
    border: 3px solid #78fedd; /* --link-color */
    top: 20px; /* Adjust vertical alignment */
    border-radius: 50%;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.timeline-item:nth-child(even) .timeline-icon {
    left: -25px;
}
.timeline-icon .material-symbols-outlined {
    font-size: 28px;
    color: #78fedd; /* --link-color */
}
.timeline-content {
    padding: 20px;
    position: relative;
    border-radius: 8px;
}

.timeline-content h3 {
    margin-top: 0;
    color: #78fedd; /* --link-color */
}

.timeline-content h3 {
    color: white
}

.timeline-content p {
    color: white
}

.faq-section h2 {
    text-align: center;
    margin-bottom: 15px; /* Adds space below the title before the accordion */
}

.faq-section h2 .subHeading {
    display: block; /* Ensures the subheading is on its own line */
    padding-left: 0; /* Removes default padding to allow true centering */
    margin-top: 5px; /* Adds a small space between the main title and the subheading */
    font-size: 0.75em; /* Makes the subheading text appropriately smaller than the main H2 title */
    line-height: 1.3; /* Ensures good line spacing for the subheading */
}

/* FAQ Section */
.faq-chat-accordion {
    /* Main container for the chat-style accordion */
    max-width: 800px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Reduced gap */
}

.faq-chat-item {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Reduced gap */
}

.faq-question-container {
    display: flex;
    align-items: center; /* Vertically align bubble and icon */
    cursor: pointer;
    justify-content: flex-start; /* Aligns question to the left */
}

.faq-bubble {
    /* Common styles for both question and answer bubbles */
    padding: 10px 15px;
    border-radius: 18px;
    max-width: 85%; /* Bubbles don't take full width */
    line-height: 1.4;
    overflow-wrap: break-word; /* Prevent long words from breaking layout */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.faq-question-bubble {
    background-color: #2c2c2e; /* --faq-question-bubble-bg */
    position: relative; /* Needed for absolute positioning of emojis */
    color: #e0e0e0; /* --faq-question-bubble-text */
    border-bottom-left-radius: 5px; /* Slight "tail" effect */
    margin-right: 10px; /* Space between question bubble and icon */
}

.faq-toggle-icon {
    font-size: 28px;
    color: #78fedd; /* --link-color */
    transition: transform 0.3s ease;
}

/* No specific style for .faq-question-container.active .faq-toggle-icon needed for textContent change */
/* If using rotation:
.faq-question-container.active .faq-toggle-icon {
    transform: rotate(45deg);
}
*/

.faq-answer-container {
    display: flex; /* To align the answer bubble correctly */
    justify-content: flex-end; /* Aligns answer bubble to the right */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out;
}

.faq-answer-bubble {
    background-color: #009688; /* --faq-answer-bubble-bg */
    color: white; /* --faq-answer-bubble-text */
    border-bottom-right-radius: 5px; /* "Tail" effect */
}

.faq-bubble p {
    /* Text inside bubbles */
    margin: 0; /* Ensures no extra margins interfere with bubble padding */
    line-height: 1.6;
}

/* Styles for Emojis in FAQ Bubbles */
.bubble-emoji {
    position: absolute;
    font-size: 1.6em; /* Adjust size as needed */
    line-height: 1;
    opacity: 0.85; /* Slightly transparent so it's not too overpowering */
    user-select: none; /* Prevent text selection of emoji */
}

.emoji-top-right {
    top: -8px; /* Adjust for vertical positioning */
    right: -5px; /* Adjust for horizontal positioning */
}

.emoji-top-left {
    top: -8px; /* Adjust for vertical positioning */
    left: -5px; /* Adjust for horizontal positioning */
}

/* Responsive adjustments for timeline */
@media screen and (max-width: 768px) {
    .timeline::after {
        left: 31px; /* Move line to the left */
    }
    .timeline-item {
        width: 100%;
        padding-left: 70px; /* Space for icon and line */
        padding-right: 15px;
    }
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        left: 0;
    }
    .timeline-icon {
        left: 10px; /* Position icon to the left of content */
        right: auto;
    }
}

/* Team Sports Page Specific Styles */
.teamsports-content h1,
.teamsports-content h2 {
    text-align: center;
    font-size: 1.4em; /* Slightly larger subheading */
    margin-bottom: 10px; /* For h2 */
}
.teamsports-content h1 + .subHeading, /* If subHeading is a sibling span */
.teamsports-content h2 + .subHeading {
    /* If subHeading is a sibling span */
    display: block; /* Make subheading appear on new line */
    text-align: center;
    margin-bottom: 30px; /* Space after subheading */
    font-size: 1.2em; /* Slightly larger subheading */
}

.services-section,
.brands-section,
.pricing-table-section {
    margin-top: 40px;
    margin-bottom: 40px;
    width: 100%; /* Ensure sections take full width for centering children */
    padding: 0 15px; /* Add some horizontal padding */
}

.service-tile-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Spacing between tiles */
    justify-content: center;
    margin-top: 20px;
}

.service-tile {
    /* Glassmorphism from shared styles */
    background-color: rgba(30, 30, 30, 0.4); /* --navbar-bg */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15); /* --glass-card-border-color */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05); /* --glass-shadow */

    border-radius: 15px; /* Consistent with other cards */
    padding: 15px; /* Reduced padding for compactness */
    text-align: center;
    cursor: default; /* No longer clickable to expand */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Removed height transition */
    /* height: 200px; /* Initial height, icon and title visible */
    height: auto; /* Allow content to define height */
    min-height: 200px; /* Ensure a minimum decent height */
    /* overflow: hidden; /* Not strictly needed if height is auto */
    position: relative;
    width: calc(33.333% - 20px); /* 3 tiles per row, accounting for gap */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align content to the top */
}

/* .service-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); 
} */ /* Removed hover effect */

/* .service-tile.active {
    height: 300px; /* Expanded height to show more text */
/* } */ /* No longer needed */

.service-tile .tile-icon {
    font-size: 40px; /* Reduced icon size */
    /* color: var(--link-color); Base color, will be overridden by specific classes */
    margin-bottom: 10px; /* Reduced margin */
}

.service-tile .tile-title {
    font-size: 1.15em; /* Reduced title font size */
    font-weight: 600;
    color: #e0e0e0; /* --text-color */
    margin-top: 0;
    margin-bottom: 8px; /* Reduced margin */
}

.service-tile .tile-more-text {
    font-size: 0.9em; /* Reduced text font size */
    line-height: 1.5;
    text-align: center; /* Center the text within the expanded area */
    padding: 0 10px; /* Some padding for the text */
    color: #b0b0b0; /* --text-color-light */
    opacity: 1; /* Always visible */
    /* transition: opacity 0.3s ease-in-out 0.1s; */ /* No longer needed */
}

/* .service-tile.active .tile-more-text {
    opacity: 1;
} */ /* No longer needed */

/* Icon specific colors */
.icon-color-uniforms {
    color: #ff6347;
} /* Tomato */
.icon-color-stores {
    color: #4682b4;
} /* SteelBlue */
.icon-color-spiritwear {
    color: #32cd32;
} /* LimeGreen */
.icon-color-equipment {
    color: #ffd700;
} /* Gold */
.icon-color-bundling {
    color: #6a5acd;
} /* SlateBlue */
.icon-color-fitting {
    color: #da70d6;
} /* Orchid */

.brands-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.brand-logo-item {
    background-color: #dededebc; /* --card-bg */
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0 2px 5px #ffffff1a; /* --shadow-color */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; /* Fixed height for consistency */
    width: calc(16.666% - 20px); /* Approx 6 per row */
    min-width: 120px; /* Minimum width */
}

.brand-logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cta-section-teamsports {
    text-align: center;
    margin: 40px auto;
    max-width: 800px; /* Limit width */
}

/* Team Sports Banner Image */
.cta-section-teamsports .banner-image {
    width: 100%; /* Make the image take the full width of its container */
    max-width: 100%; /* Ensures it doesn't exceed the cta-section's max-width if that's smaller */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below the image */
    margin: 0 0 -40px 0;
 /* Adjusted margin */
    object-fit: contain;
    max-height: 400px; /* Optional: constrain the maximum height if needed */
}

/* Sublimation Pricing Table Styles */
.pricing-table-section {
    /* Glassmorphism for the entire section container */
    background-color: rgba(30, 30, 30, 0.4); /* --navbar-bg */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15); /* --glass-card-border-color */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05); /* --glass-shadow */
    border-radius: 15px;
    padding: 25px; /* Padding inside the glass container */
    margin-left: auto; /* Center the section if it has a max-width */
    margin-right: auto;
    max-width: 900px; /* Max width for the pricing section */
}

.pricing-table-section h2 {
    margin-top: 0; /* Remove default top margin for h2 inside this section */
}

/* New Sublimation Price List Styles */
.sublimation-price-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    margin-bottom: 20px;
}

.price-list-item {
    background-color: rgba(
        255,
        255,
        255,
        0.05
    ); /* Subtle background for each item */
    border: 1px solid rgba(255, 255, 255, 0.15); /* --glass-card-border-color */
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    padding: 15px 20px;
    color: #e0e0e0; /* --text-color */
}

.price-list-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.price-list-title {
    font-size: 1.1em;
    font-weight: 600;
    color: #78fedd; /* --link-color */
    flex-grow: 1;
    margin-right: 10px; /* Space before separator */
}

.price-list-separator {
    flex-grow: 2; /* Takes up available space */
    /* border-bottom: 1px dashed #b0b0b0; Dotted line - REMOVED */
    margin: 0 10px; /* Space around separator */
    position: relative;
    bottom: 4px; /* Align with text baseline */
    display: none; /* Hide the separator */
}

.price-list-fabrics {
    font-size: 0.9em;
    color: #b0b0b0; /* --text-color-light */
    line-height: 1.5;
}
.price-list-base-price {
    font-size: 1.25em; /* Increased font size */
    font-weight: 700;
    color: #e0e0e0; /* --text-color */
    margin-left: 10px; /* Space after separator (still useful if title is long) */
}

.pricing-note {
    font-size: 0.9em;
    color: #b0b0b0; /* --text-color-light */
    margin-top: 15px;
    line-height: 1.5;
}

.catalog-button-container {
    text-align: center; /* Center the button */
    margin-top: 25px; /* Space above the button */
    margin-bottom: 10px; /* Space below the button */
}

.btn-catalog {
    display: inline-flex; /* Allows flex alignment for text inside */
    flex-direction: column; /* Stack main text and subtext vertically */
    align-items: center; /* Center text horizontally */
    justify-content: center; /* Center text vertically */
    padding-top: 10px; /* Adjust padding to accommodate two lines */
    padding-bottom: 10px;
}

.btn-catalog-subtext {
    font-size: 0.75em; /* Smaller font for the subtext */
    margin-top: 2px; /* Small space between main text and subtext */
    opacity: 0.85; /* Slightly less prominent */
}

/* Responsive adjustments for Team Sports Page */
@media (max-width: 1200px) {
    .service-tile {
        width: calc(50% - 20px); /* 2 tiles per row */
    }
    .brand-logo-item {
        width: calc(25% - 20px); /* 4 logos per row */
    }
}

@media (max-width: 768px) {
    .services-section {
        width: calc(100%); /* Full width for smaller screens */
    }
    .service-tile {
        width: 100%; /* 1 tile per row on smaller screens */
        min-height: 180px; /* Adjusted min-height for mobile if needed */
    }
    /* .service-tile.active {
        height: auto; 
    } */ /* No longer needed */
    /* .service-tile .tile-more-text { 
        opacity: 1;
        position: static; 
        margin-top: 10px;
    } */ /* Text is always visible now, so these specific mobile overrides for active state are not needed */

    .brand-logo-item {
        width: calc(33.333% - 20px); /* 3 logos per row */
    }
}

@media (max-width: 600px) {
    .brand-logo-item {
        width: calc(50% - 20px); /* 2 logos per row */
    }
    .teamsports-content h1 {
        font-size: 1.8em;
    }
    .teamsports-content h2 {
        font-size: 1.5em;
    }
    .teamsports-content h1 + .subHeading,
    .teamsports-content h2 + .subHeading {
        font-size: 1em;
        margin-bottom: 20px;
    }
}

.mobile-break {
    display: none;
}
@media (max-width: 480px) {
    .pricing-note .mobile-break {
        display: block; /* Makes the <br> active on small screens */
    }
}

/* Mobile nav bubbles for account and cart */
.mobile-nav-bubbles {
    display: none;
}

@media (max-width: 1000px) {
    .mobile-nav-bubbles {
        display: flex;
        gap: 5px;
        align-items: center;
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 1200;
        position: fixed;
    }
    .mobile-nav-bubbles .nav-bubble {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(30,30,30,0.4);
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.15);
        box-shadow: 0 4px 15px rgba(255,255,255,0.05);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        width: 44px;
        height: 44px;
        color: #e0e0e0;
        text-decoration: none;
        font-size: 1.7em;
        position: relative;
        transition: background 0.2s, box-shadow 0.2s;
        padding: 5px;
    }
    .mobile-nav-bubbles .nav-bubble:hover {
        background: rgba(56,177,177,0.36);
        box-shadow: 0 2px 8px #38b1b15c;
    }
    .mobile-nav-bubbles .crwCartTotal {
        position: absolute;
        top: 0px;
        right: 0px;
        background: #78fedd;
        color: #222;
        border-radius: 50%;
        font-size: 0.6em;
        padding: 2px 6px;
        font-weight: bold;
        /* min-width: 18px; */
        text-align: center;
        line-height: 1;
    }
    /* Hide account/cart in hamburger menu on mobile */
    .navbar-actions {
        display: none !important;
    }
}/* End custom CSS */