body.seInfoPage233 {
    background-color: #f2f2f2 !important;
}

/* Banner scrolling text animation */
.seBanner {
    padding-top: 10px !important;
    margin-bottom: 0px !important;
    background-color: #50d4f2;
    overflow: hidden !important;
}

.seBanner td {
    overflow: hidden !important;
}

.seBanner p {
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.8) !important;
    display: inline-block !important;
    white-space: nowrap !important;
    animation: continuousScroll 35s linear infinite !important;
}

@keyframes continuousScroll {
    0% {
        transform: translateX(100vw); /* Use viewport width instead of percentage */
    }
    100% {
        transform: translateX(-100vw);
    }
}

.seBanner:hover p {
    animation-play-state: paused !important;
}

@keyframes scrollText {
    0% {
        transform: translateX(0); /* Start from right side */
    }
    100% {
        transform: translateX(-100%); /* End at left side */
    }
}

@keyframes seamlessLoop {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Only move half way since text is duplicated */
    }
}

/* Header is split into top and bottom row. Change the colours here */

.seUserActionsList li a {
    background-color: #61808C !important; /* Use your brand color */
}

.seUserActionsList {
    background-color: #61808C !important; /* Use your brand color */
}

/* Handle hover states */
.seUserActionsList li a:hover {
    background-color: #4a9bb8 !important; /* Your brand blue for hover */
}


.sePageLayout .seHeaderTopRow {
    background: #61808C;
}

.sePageLayout .seHeaderBottomRow {
    background: #0D0D0D;
}

.sePageLayout .seHeaderBottomRow .container .seSiteLogo{
    margin-top: 5px;
    margin-bottom: 0px;
}

.seStoreName {
    visibility: hidden !important;
}

/* TODO */
/* Try fixing the header with dropping the white lines and removing some padding between the logo and the navigation bar */

/* Remove border from the site navigator */
.seSiteNavigatorContainer {
    border-top: none !important;
    margin-top: 0 !important;
}

.seSiteNavigator {
    border-top: none !important;
    border: none !important;
}

.seNavbar {
    border-top: none !important;
    border: none !important;
}

.seLocation a {
    background-color: #61808C !important; /* Replace with your exact banner color */
    border: none !important;
}

/* You might also need to target hover states */
.seLocation a:hover {
    background-color: #4a9bb8 !important; /* Slightly darker for hover effect */
}

/* If there's a specific button class, you might need: */
.seLocation .btn,
.seLocation button {
    background-color: transparent !important;
    border: none !important;
}

/******************************** Some messing around ***********************************************/

/* Hero section buttons */
.btn-primary {
    display: inline-block !important;
    background: #61808C !important;
    color: white !important;
    /* padding: 15px 30px !important; */
    text-decoration: none !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(80, 212, 242, 0.3) !important;
    font-family: 'Montserrat', sans-serif !important;
    /* margin-top: 20px !important; */
}

.btn-primary:hover {
    transform: translateY(-2px) !important;
    /* box-shadow: 0 6px 20px rgba(80, 212, 242, 0.4) !important; */
    background: linear-gradient(45deg, #61808C, #50D4F2) !important;
    text-decoration: none !important;
    color: white !important;
}

/* Section headers with brand color accents */
h1, h2 {
    position: relative !important;
}

/* Gradient backgrounds for sections */


/****************************************** First section image *****************************************/

.se-hp-hero {
    background-position: center 35% !important;
    margin-top: 20px;
}

.se-hp-hero h1 {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8) !important;
}

.se-hp-hero p {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}


/****************************************** Feature Brands *****************************************/

.seFeatureBrands {
    padding-top: 20px !important;
    padding-bottom: 5px !important;
    margin-bottom: 0 !important;
}

/****************************************** Line after Feature Brands *****************************************/

.seLineSeparator .divider.solid {
    height: 1px !important;
    padding-top: 0px;
    padding-bottom: 3px !important;
    background: linear-gradient(45deg, #50D4F2, #61808C) !important;
    border: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove spacing from parent elements */
.seLineSeparator {
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
}

.seLineSeparator .container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.seLineSeparator .editContent {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/****************************************** Feature 4 Column Block *****************************************/

.seFeature4Column {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    margin-bottom: 0px !important;
}

.seFeature4Column .content-block-column[style] {
    height: 400px !important;
}

/* Ensure the content is properly centered within the taller height */
.seFeature4Column .content-block-column {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 15px !important;
}

.seFeature4Column .editContent {
    text-align: center !important;
    width: 100% !important;
}

.seFeature4Column h2 {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8) !important;
}

.seFeature4Column p {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.seFeature4Column .content-block-column::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    /* background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important; */
    transition: left 0.5s !important;
}

.seFeature4Column .content-block-column:hover::before {
    left: 100% !important;
}

/****************************************** Feature 3 Column Block *****************************************/

.seFeature3Column {
    padding-top: 20px !important;
    padding-bottom: 40px !important;
    margin-bottom: 0px !important;
}

.seFeature3Column .content-block-column[style] {
    height: 500px !important;
}

/* Ensure the content is properly centered within the taller height */
.seFeature3Column .content-block-column {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 15px !important;
}

.seFeature3Column .editContent {
    text-align: center !important;
    width: 100% !important;
}

.seFeature3Column .content-block-column::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    /* background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important; */
    transition: left 0.5s !important;
}

.seFeature3Column .content-block-column:hover::before {
    left: 100% !important;
}

/****************************************** In Store Savings *****************************************/

.seStoreSavings {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

.seLineSeparatorSavings .divider.solid {
    height: 1px !important;
    padding-top: 0px;
    padding-bottom: 3px !important;
    background: linear-gradient(45deg, #50D4F2, #61808C) !important;
    border: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove spacing from parent elements */
.seLineSeparatorSavings {
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
}

.seLineSeparatorSavings .container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.seLineSeparatorSavings .editContent {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/****************************************** In Store Savings Slideshow *****************************************/

.seStoreSavingsSlideShow {
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/****************************************** Sale Feature Highlight (not the slideshow) *****************************************/

.seSaleHighlight {
    min-height: 350px !important;
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
    padding-right: 0px !important;
    /* Make the section full width */
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: none !important;
}

/* Remove all container constraints */
.seSaleHighlight .container-fluid {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.seSaleHighlight .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

.seSaleHighlight .col-xs-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

/* Make the content block (which has the background image) full width */
.seSaleHighlight .content-block-column {
    width: 100vw !important;
    background-position: center 10% !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: none !important;
}

.seSaleHighlight .full-width-block {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 350px !important;
    width: 100% !important;
}

.seSaleHighlight .editContent {
    text-align: center !important;
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
}

/****************************************** Apparel 4 Column Block *****************************************/

/* Center content in the apparel column specifically */
.col-margin-bottom-apparel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 20px !important; /* Keep padding for text column */
}

.col-margin-bottom-apparel .editContent {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
}

/* Add even padding to the entire section */
.seApparel {
    padding-top: 40px !important;
    padding-bottom: 10px !important;
    padding-right: 20px !important;
    margin-bottom: 0 !important;
}

/* Modified padding for image columns - reduce horizontal padding for bigger images */
.seApparel .content-block-column {
    padding: 0 10px !important; /* Remove top/bottom padding, keep horizontal spacing */
    box-sizing: border-box !important;
}

/* Ensure all content within columns is centered */
.seApparel .content-block-column .editContent {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    text-align: center !important;
    width: 100% !important;
    border-radius: 15px !important;
    overflow: hidden !important;
}

/* Make all images fully rounded - remove the partial border-radius */
.seApparel .content-block-column img {
    border-radius: 15px !important; /* Full rounded corners on all sides */
    width: 100% !important;
    height: auto !important;
}

/* Center the content blocks within their containers */
.seApparel .content-block-content {
    text-align: center !important;
    margin-top: 15px !important; /* Add some space between image and text */
}

/* Make all images the same height and crop consistently */
.seApparel .content-block-column img[style] {
    width: 100% !important;
    height: 500px !important; /* Set a fixed height for consistency */
    max-width: none !important;
    object-fit: cover !important; /* Crop images to fit consistently */
    object-position: center !important; /* Center the crop */
    border-radius: 15px !important; /* Full rounded corners */
}

/* Ensure the image containers use full width */
.seApparel .editContent > div:first-child {
    width: 100% !important;
}

.seBottom2ColumnFeature {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.seBottom2ColumnFeature .container-fluid {
    padding: 0 !important;
}

.seBottom2ColumnFeature .row {
    margin: 0 !important;
}

/* Style the columns to be equal height and responsive */
.seBottom2ColumnFeature .content-block-column {
    padding: 0 !important;
    height: 480px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Text content styling */
.seBottom2ColumnFeature .editContent {
    text-align: center !important;
    padding: 40px !important;
    width: 100% !important;
    z-index: 2 !important;
    position: relative !important;
}

.seBottom2ColumnFeature h2 {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8) !important;
}

.seBottom2ColumnFeature p {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* Column positioning - recreate the push/pull behavior */
@media (min-width: 768px) {
    .seBottom2ColumnFeature .col-sm-push-6 {
        left: 50% !important;
    }
    
    .seBottom2ColumnFeature .col-sm-pull-6 {
        right: 50% !important;
    }
}

/* Mobile responsive */
@media (max-width: 767px) {
    .seBottom2ColumnFeature .content-block-column {
        height: auto !important; /* Allow flexible height instead of fixed 300px */
        min-height: 350px !important; /* Set minimum height */
        padding: 20px !important; /* Add padding for mobile */
    }
    
    .seBottom2ColumnFeature .editContent {
        padding: 30px 20px !important; /* Increase padding for better spacing */
    }
    
    /* Ensure columns stack properly on mobile */
    .seBottom2ColumnFeature .col-sm-push-6,
    .seBottom2ColumnFeature .col-sm-pull-6 {
        left: auto !important;
        right: auto !important;
        position: static !important;
    }
    
    /* Reduce text size slightly on mobile for better fit */
    .seBottom2ColumnFeature .slide-title,
    .seBottom2ColumnFeature h2 {
        font-size: 24px !important;
        margin-bottom: 15px !important;
    }
    
    .seBottom2ColumnFeature .slide-description,
    .seBottom2ColumnFeature p {
        font-size: 16px !important;
        margin-bottom: 20px !important;
    }
    
    /* Ensure buttons have proper spacing */
    .seBottom2ColumnFeature .btn {
        margin: 15px 0 !important;
        padding: 12px 24px !important;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .seBottom2ColumnFeature .content-block-column {
        min-height: 300px !important;
    }
    
    .seBottom2ColumnFeature .editContent {
        padding: 25px 15px !important;
    }
}

/******************* Add Fade-in For All Elements *************************/

/* Staggered fade-in animations */

/* Header animation */
/* .sePageHeader {
    animation: fadeIn 1s ease-out 0s both;
} */

/* Navigation animation */
/* .seSiteNavigator {
    animation: fadeIn 1s ease-out 0s both;
} */

.seStoreSavingsSlideShow .custom-slideshow-container {
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* Feature Brands Header and divider */

.seFeatureBrands .editContent h2 {
    animation: fadeInUp 1s ease-out 1.7s both;
}

.seLineSeparator .divider.solid {
    animation: fadeInUp 1s ease-out 2s both;
}

/* 4 column features */

.seFeature4Column .content-block-column {
    opacity: 0;
    transform: translateY(30px);
}

.seFeature4Column .col-md-3:nth-child(1) .content-block-column {
    animation: fadeInUp 0.8s ease-out 2.0s both;
}

.seFeature4Column .col-md-3:nth-child(2) .content-block-column {
    animation: fadeInUp 0.8s ease-out 2.2s both;
}

.seFeature4Column .col-md-3:nth-child(3) .content-block-column {
    animation: fadeInUp 0.8s ease-out 2.4s both;
}

.seFeature4Column .col-md-3:nth-child(4) .content-block-column {
    animation: fadeInUp 0.8s ease-out 2.6s both;
}

/* First image animation */

.se-hp-hero {
    animation: fadeIn 1s ease-out 2.8s both;
}

/* .se-hp-hero:nth-of-type(1) {
    animation: fadeIn 1s ease-out 2.8s both;
} */

/* Image text */

.se-hp-hero .editContent h1 {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 3s both;
}

.se-hp-hero .editContent p {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 3.2s both; /* 0.3s delay after h1 */
}

.se-hp-hero .editContent .btn {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 3.4s both; /* 0.3s delay after p */
}

/* 3 column features */

.seFeature3Column .content-block-column:nth-child(1) {
    animation: fadeInUp 0.8s ease-out 2.2s both;
}

.seFeature3Column .content-block-column:nth-child(2) {
    animation: fadeInUp 0.8s ease-out 2.4s both;
}

.seFeature3Column .content-block-column:nth-child(3) {
    animation: fadeInUp 0.8s ease-out 2.6s both;
}

/* Animate the highlighted feature sale */

.seStoreSavings .editContent h2 {
    animation: fadeInUp 0.8s ease-out 2.8s both;
}

.seLineSeparatorSavings .divider.solid {
    animation: fadeInUp 1s ease-out 3s both;
}


/* Animate the 4-column apparel section individually */

.seApparel .content-block-column:nth-child(1) {
    animation: fadeInUp 0.8s ease-out 3.4s both;
}

.seApparel .content-block-column:nth-child(2) {
    animation: fadeInUp 0.8s ease-out 3.6s both;
}

.seApparel .content-block-column:nth-child(3) {
    animation: fadeInUp 0.8s ease-out 3.8s both;
}

.seApparel .content-block-column:nth-child(4) {
    animation: fadeInUp 0.8s ease-out 4s both;
}

/* 2 feature bottom column */

.seBottom2ColumnFeature .content-block-column {
    animation: fadeInUp 1s ease-out 4s both;
}

/* Footer animation */
.sePageFooter {
    animation: fadeInUp 1s ease-out 4s both;
}

/* Keyframe definitions */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(0px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .sePageSection {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}