/* 1. Full-Width Background Breakout & Container Alignment */
.lwcu-section {
    padding: 80px 20px;
    font-family: inherit;
    
    /* Force full width of the screen, bypassing theme containers */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box;
}

.lwcu-container {
    max-width: 1200px !important;
    margin-left: auto !important; /* Strict center alignment */
    margin-right: auto !important; /* Strict center alignment */
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    align-items: flex-start; 
}

.lwcu-left, .lwcu-right { 
    flex: 1 1 45%; 
}

/* 2. Left Side Typography */
.lwcu-title { font-size: 2.8rem; font-weight: 700; color: #111; line-height: 1.2; margin-bottom: 20px; }
.lwcu-subtitle { font-size: 1.1rem; color: #555; line-height: 1.6; margin-bottom: 40px; }

/* 3. Image & Interactive Hover Badges */
.lwcu-image-wrapper { position: relative; display: inline-block; width: 100%; }
.lwcu-image-wrapper img { width: 100%; border-radius: 16px; display: block; object-fit: cover; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

.lwcu-badge {
    position: absolute;
    background: #ffffff;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    color: #222;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
    z-index: 10;
}
.lwcu-badge:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.18);
}
.badge-icon svg { width: 22px; height: 22px; fill: currentColor; }
.badge-icon i { font-size: 22px; }
.badge-icon img { width: 22px; height: 22px; object-fit: contain; }

/* Stagger Badge Positions dynamically */
.badge-pos-0 { top: 15%; right: -25px; }
.badge-pos-1 { bottom: 20%; left: -25px; }
.badge-pos-2 { bottom: -20px; right: 15%; }

/* 4. Right Side Feature Grid - Professional Styling */
.lwcu-right {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
}

.lwcu-feature-box {
    background: #ffffff;
    padding: 35px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Softer, premium shadow */
    border: 1px solid rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}
.lwcu-feature-box:hover { 
    box-shadow: 0 15px 40px rgba(0,0,0,0.1); 
    transform: translateY(-5px);
}

.feature-icon { 
    margin-bottom: 20px; 
    background: #f4f6fb; /* Subtle background highlight behind icon */
    display: inline-flex;
    padding: 15px;
    border-radius: 12px;
    align-self: flex-start;
}
.feature-icon svg { width: 35px; height: 35px; fill: currentColor; }
.feature-icon i { font-size: 35px; }
.feature-icon img { width: 35px; height: 35px; object-fit: contain; }

.lwcu-feature-box h3 { 
    font-size: 1.25rem; 
    font-weight: 700; 
    margin-bottom: 12px; 
    color: #1a1a1a; 
    line-height: 1.3;
}
.lwcu-feature-box p { 
    font-size: 0.95rem; 
    color: #666; 
    line-height: 1.6; 
    margin: 0; 
}

/* 5. Responsive Fixes */
@media (max-width: 992px) {
    .lwcu-container { flex-direction: column; }
    .lwcu-badge { position: static; margin-bottom: 10px; width: fit-content; display: inline-flex; }
    /* Revert breakout on mobile to prevent horizontal scrolling */
    .lwcu-section { margin-left: 0 !important; margin-right: 0 !important; width: 100%; left: auto; right: auto; padding: 60px 20px; }
}