.elementor-5 .elementor-element.elementor-element-89b9a32{--display:flex;--min-height:600px;--justify-content:center;--overlay-opacity:0.5;}.elementor-5 .elementor-element.elementor-element-89b9a32::before, .elementor-5 .elementor-element.elementor-element-89b9a32 > .elementor-background-video-container::before, .elementor-5 .elementor-element.elementor-element-89b9a32 > .e-con-inner > .elementor-background-video-container::before, .elementor-5 .elementor-element.elementor-element-89b9a32 > .elementor-background-slideshow::before, .elementor-5 .elementor-element.elementor-element-89b9a32 > .e-con-inner > .elementor-background-slideshow::before, .elementor-5 .elementor-element.elementor-element-89b9a32 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-5 .elementor-element.elementor-element-58fea98{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-5 .elementor-element.elementor-element-58fea98:not(.elementor-motion-effects-element-type-background), .elementor-5 .elementor-element.elementor-element-58fea98 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-5 .elementor-element.elementor-element-9e9febf{--display:flex;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title,
					 .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-5 .elementor-element.elementor-element-79e6ec2 .elementor-icon-box-wrapper{gap:10px;}.elementor-5 .elementor-element.elementor-element-79e6ec2.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-5 .elementor-element.elementor-element-79e6ec2.elementor-view-framed .elementor-icon, .elementor-5 .elementor-element.elementor-element-79e6ec2.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-5 .elementor-element.elementor-element-79e6ec2 .elementor-icon-box-title{color:#FFFFFF;}.elementor-5 .elementor-element.elementor-element-5b9d420{--display:flex;}.elementor-5 .elementor-element.elementor-element-7aaa911 .elementor-icon-box-wrapper{gap:10px;}.elementor-5 .elementor-element.elementor-element-7aaa911.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-5 .elementor-element.elementor-element-7aaa911.elementor-view-framed .elementor-icon, .elementor-5 .elementor-element.elementor-element-7aaa911.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-5 .elementor-element.elementor-element-7aaa911 .elementor-icon-box-title{color:#FFFFFF;}.elementor-5 .elementor-element.elementor-element-bef0c93{--display:flex;}.elementor-5 .elementor-element.elementor-element-4bc5861 .elementor-icon-box-wrapper{gap:10px;}.elementor-5 .elementor-element.elementor-element-4bc5861.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-5 .elementor-element.elementor-element-4bc5861.elementor-view-framed .elementor-icon, .elementor-5 .elementor-element.elementor-element-4bc5861.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-5 .elementor-element.elementor-element-4bc5861 .elementor-icon-box-title{color:#FFFFFF;}.elementor-5 .elementor-element.elementor-element-d90d52c{--display:flex;}.elementor-5 .elementor-element.elementor-element-16a8c18 .elementor-icon-box-wrapper{gap:10px;}.elementor-5 .elementor-element.elementor-element-16a8c18.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-5 .elementor-element.elementor-element-16a8c18.elementor-view-framed .elementor-icon, .elementor-5 .elementor-element.elementor-element-16a8c18.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-5 .elementor-element.elementor-element-16a8c18 .elementor-icon-box-title{color:#FFFFFF;}.elementor-5 .elementor-element.elementor-element-6fb75a9{--display:flex;--min-height:600px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5 .elementor-element.elementor-element-6fb75a9:not(.elementor-motion-effects-element-type-background), .elementor-5 .elementor-element.elementor-element-6fb75a9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-5 .elementor-element.elementor-element-3d85ebe{text-align:center;}.elementor-5 .elementor-element.elementor-element-3d85ebe .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:42px;font-weight:600;color:#FFFFFF;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-5 .elementor-element.elementor-element-25c502d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5 .elementor-element.elementor-element-0598c52{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5 .elementor-element.elementor-element-7949edf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5 .elementor-element.elementor-element-bebedcd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-5 .elementor-element.elementor-element-58fea98{--content-width:1550px;}.elementor-5 .elementor-element.elementor-element-6fb75a9{--width:100%;}}@media(max-width:1024px){.elementor-5 .elementor-element.elementor-element-89b9a32{--min-height:0px;}}/* Start custom CSS for html, class: .elementor-element-8240213 *//* --- 基础容器设置 --- */
.l-4-banner-container {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 400px;
    background-color: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Arial Black', 'Helvetica Neue', sans-serif;
}

/* --- 背景图片处理 (含遮罩) --- */
.l-4-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 黑色半透明渐变遮罩 + 您提供的图片链接 */
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                      url('https://ohsureapparel.com/wp-content/uploads/2026/02/2-4-1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* --- 文字内容排版 --- */
.l-4-content-box {
    position: relative;
    z-index: 10;
    text-align: center;
    width: 90%;
    max-width: 1200px;
}

.l-4-main-title {
    color: #ffffff;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
    /* 核心自适应技术：字体根据屏幕宽度自动缩放 */
    font-size: clamp(30px, 5.5vw, 80px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-shadow: 0px 4px 20px rgba(0,0,0,0.6);
}

/* --- 响应式适配逻辑 --- */

/* 1. 电脑大屏 (Desktop) */
@media (min-width: 1200px) {
    .l-4-banner-container {
        height: 65vh; /* 增加大屏下的视觉高度 */
    }
}

/* 2. 平板端 (Tablet) */
@media (max-width: 1024px) {
    .l-4-banner-container {
        height: 30vh;
        min-height: 200pxpx;
    }
}

/* 3. 手机端 (Mobile) */
@media (max-width: 500px) {
    .l-4-banner-container {
        height: 30vh;
        min-height: 20px;
    }
    .l-4-main-title {
        /* 在极小屏幕下确保字体依然有冲击力但不会溢出 */
        font-size: clamp(20px, 9vw, 10px);
        line-height: 1.2;
        padding: 0 15px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-38b9f79 *//* Unique container class to prevent global namespace pollution */
.osw-grid-section {
    background-color: #000;
    padding: 40px 20px;
    /* Updated font stack: Modern sans-serif with fallbacks */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.osw-grid-section .page-wrapper {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    text-align: center;
}

/* --- Section Heading L-1 --- */
.osw-grid-section .L-1 {
    display: block;
    font-size: 2.5rem;
    color: #fff;
    font-weight: bold;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    padding-bottom: 10px;
}

/* Decorative underline for heading */
.osw-grid-section .L-1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    max-width: 80%; /* Responsive safeguard for the line width */
    height: 3px;
    background-color: #fff;
}

/* Grid Layout Configuration */
.osw-grid-section .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.osw-grid-section .grid-item {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #333;
}

.osw-grid-section .grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.8;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hover Effects */
.osw-grid-section .grid-item:hover img {
    transform: scale(1.1);
    opacity: 1;
}

.osw-grid-section .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    color: #fff; /* Sky Blue */
    font-size: 1.8rem;
    font-weight: bold;
    pointer-events: none;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

/* Image Positioning Logic (Sprite-like slicing) */
.osw-grid-section .item-1 img { object-position: 0% center; }
.osw-grid-section .item-2 img { object-position: 12.5% center; }
.osw-grid-section .item-3 img { object-position: 25% center; }
.osw-grid-section .item-4 img { object-position: 37.5% center; }
.osw-grid-section .item-5 img { object-position: 50% center; }
.osw-grid-section .item-6 img { object-position: 62.5% center; }
.osw-grid-section .item-7 img { object-position: 75% center; }
.osw-grid-section .item-8 img { object-position: 87.5% center; }
.osw-grid-section .item-9 img { object-position: 100% center; }

/* Responsive Adjustments for Tablets and Mobile */
@media (max-width: 768px) {
    .osw-grid-section .grid-container {
        grid-template-columns: 1fr;
    }
    
    .osw-grid-section .L-1 {
        font-size: 1.8rem;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a10f1ef *//* --- Base Styles & Layout --- */
.l-8-container {
    width: 100%;
    min-height: 10vh;
    background: #000000; /* Deep black background for a premium feel */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: center;     /* Horizontal centering */
    padding: 30px 20px;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- H2 Title: Centered & White --- */
.l-8-title {
    color: #ffffff;
    font-size: clamp(1.1rem, 6vw, 2.5rem); /* Responsive font size */
    font-weight: 800;
    text-align: center;
    margin-bottom: 10px; /* Space between title and carousel */
    text-transform: uppercase;
    letter-spacing: 0.15em;
    width: 100%;
    max-width: 1200px;
}

/* --- 3D Scene Setup --- */
.l-8-stage {
    perspective: 3000px; /* Increased perspective for a deeper 3D look */
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Carousel Core --- */
.l-8-carousel {
    position: relative;
    width: 220px; /* Base image width */
    height: 330px; /* Base image height */
    transform-style: preserve-3d;
    animation: rotateCarousel 50s linear infinite;
    will-change: transform;
}

/* --- Image Items (20 Items) --- */
.l-8-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Formula for 20 items: (360 / 20) = 18 degrees per step */
    /* translateZ(700px) creates a spacious circle for 20 images */
    transform: rotateY(calc(var(--i) * 18deg)) translateZ(700px);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #111; /* Fallback color */
}

.l-8-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* --- Interactivity --- */
.l-8-carousel:hover {
    animation-play-state: paused; /* Stops rotation so B2B clients can view specific products */
    cursor: pointer;
}

.l-8-item:hover img {
    transform: scale(1.1); /* Subtle zoom effect on hover */
}

/* --- Keyframes --- */
@keyframes rotateCarousel {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

/* --- Responsive Adaptations --- */

/* Tablet View */
@media (max-width: 1024px) {
    .l-8-carousel {
        width: 180px;
        height: 270px;
    }
    .l-8-item {
        transform: rotateY(calc(var(--i) * 18deg)) translateZ(550px);
    }
}

/* Mobile View */
@media (max-width: 480px) {
    .l-8-container {
        padding: 40px 10px;
    }
    .l-8-title {
        font-size: 1.5rem;
        margin-bottom: 30px;
    }
    .l-8-stage {
        height: 400px;
        perspective: 1500px;
    }
    .l-8-carousel {
        width: 120px;
        height: 180px;
    }
    .l-8-item {
        /* Smaller radius for small screens to prevent clipping */
        transform: rotateY(calc(var(--i) * 18deg)) translateZ(300px);
        border-radius: 8px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f238f67 *//* Container Basics */
.l-9-factory-section {
    background-color: #000000;
    padding: 30px 20px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.l-9-wrapper {
    max-width: 1550px;
    width: 100%;
}

/* Typography */
.l-9-year-heading {
    color: #ffffff;
    font-size: clamp(36px, 8vw, 56px);
    text-align: center;
    margin: 0 0 15px 0;
    font-family: "Inter", Helvetica, Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -1px;
}

.l-9-description-text {
    color: #fff;
    font-size: 18px;
    line-height: 1.7;
    text-align: center;
    max-width: 1300px;
    margin: 0 auto 30px auto;
    font-family: "Inter", Arial, sans-serif;
}

/* Grid Logic - 这里是实现图片布局的核心 */
.l-9-grid-layout {
    display: grid;
    /* 设置列比例：1.5fr 1fr 让左边更大；column-gap 设置为 40px 实现向右位移的效果 */
    grid-template-columns: 1.5fr 1fr; 
    column-gap: 40px; 
    row-gap: 20px;
    
    grid-template-areas: 
        "main top"
        "main bottom";
}

.l-9-grid-item {
    background-color: #111111;
    overflow: hidden;
    border-radius: 4px; /* 根据图片，可以调小或设为0 */
}

.l-9-image-container {
    width: 100%;
    height: 100%;
}

.l-9-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

/* Area Assignments - 比例微调 */
.l-9-area-main { 
    grid-area: main; 
    aspect-ratio: 1.5 / 0.92; /* 控制左侧大图的横向比例 */
}

.l-9-area-top { 
    grid-area: top; 
    aspect-ratio: 16 / 7; /* 控制右侧小图的横向比例 */
}

.l-9-area-bottom { 
    grid-area: bottom; 
    aspect-ratio:  16 / 7; 
}

/* Hover Interaction */
.l-9-grid-item:hover img {
    transform: scale(1.06);
}

/* --- Responsive Breakpoints --- */

@media (max-width: 1024px) {
    .l-9-grid-layout {
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        grid-template-areas: 
            "main main"
            "top bottom";
    }
    .l-9-area-main { aspect-ratio: 16 / 9; }
    .l-9-area-top, .l-9-area-bottom { aspect-ratio: 1 / 1; }
}

@media (max-width: 540px) {
    .l-9-grid-layout {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "main"
            "top"
            "bottom";
        gap: 15px;
    }
    .l-9-area-main, .l-9-area-top, .l-9-area-bottom {
        aspect-ratio: 4 / 3;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ad6063c *//* Container Basics */
.l-9-factory-section {
    background-color: #000000;
    padding: 30px 20px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.l-9-wrapper {
    max-width: 1550px;
    width: 100%;
}

/* Typography */
.l-9-year-heading {
    color: #ffffff;
    font-size: clamp(36px, 8vw, 56px);
    text-align: center;
    margin: 0 0 15px 0;
    font-family: "Inter", Helvetica, Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -1px;
}

.l-9-description-text {
    color: #fff;
    font-size: 18px;
    line-height: 1.7;
    text-align: center;
    max-width: 1300px;
    margin: 0 auto 30px auto;
    font-family: "Inter", Arial, sans-serif;
}

/* Grid Logic - 这里是实现图片布局的核心 */
.l-9-grid-layout {
    display: grid;
    /* 设置列比例：1.5fr 1fr 让左边更大；column-gap 设置为 40px 实现向右位移的效果 */
    grid-template-columns: 1.5fr 1fr; 
    column-gap: 40px; 
    row-gap: 20px;
    
    grid-template-areas: 
        "main top"
        "main bottom";
}

.l-9-grid-item {
    background-color: #111111;
    overflow: hidden;
    border-radius: 4px; /* 根据图片，可以调小或设为0 */
}

.l-9-image-container {
    width: 100%;
    height: 100%;
}

.l-9-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

/* Area Assignments - 比例微调 */
.l-9-area-main { 
    grid-area: main; 
    aspect-ratio: 1.5 / 0.92; /* 控制左侧大图的横向比例 */
}

.l-9-area-top { 
    grid-area: top; 
    aspect-ratio: 16 / 7; /* 控制右侧小图的横向比例 */
}

.l-9-area-bottom { 
    grid-area: bottom; 
    aspect-ratio:  16 / 7; 
}

/* Hover Interaction */
.l-9-grid-item:hover img {
    transform: scale(1.06);
}

/* --- Responsive Breakpoints --- */

@media (max-width: 1024px) {
    .l-9-grid-layout {
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        grid-template-areas: 
            "main main"
            "top bottom";
    }
    .l-9-area-main { aspect-ratio: 16 / 9; }
    .l-9-area-top, .l-9-area-bottom { aspect-ratio: 1 / 1; }
}

@media (max-width: 540px) {
    .l-9-grid-layout {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "main"
            "top"
            "bottom";
        gap: 15px;
    }
    .l-9-area-main, .l-9-area-top, .l-9-area-bottom {
        aspect-ratio: 4 / 3;
    }
}/* End custom CSS */