/****************************************** 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;
}

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

/* 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;
}

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

.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;
}

.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;
}

/* 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;
}

/* 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;
    }
}