/* Custom CSS updated to match the new classes: alignnone wp-image-5 
   - Positioned absolutely (scrolls with content)
   - Top left, no margin
   - Opacity 60%
*/
img.wp-image-5 {
    /* Set position to absolute so it scrolls with the page content */
    position: absolute; 
    
    top: 0;
    left: 0;
    
    /* Remove theme/browser margins/padding */
    margin: 0;
    padding: 0;
    
    /* Set opacity to 60% */
    opacity: 0.6;
    
    /* Ensure it doesn't interfere with clickable elements */
    z-index: 1; 
}

/* --- CRITICAL: Remove Page Margin ---
   This removes the browser's default spacing around the page content, 
   ensuring the image hits the very edge.
*/
body {
    margin: 0;
    padding: 0;
}
/* Center the entire SiteOrigin/Slick carousel wrapper */
.sow-carousel-wrapper {
    /* 1. Set a defined width. This is REQUIRED for 'margin: auto' to work. */
    /* Choose a maximum width that suits your design. 900px is a good starting point 
       that comfortably fits the five items you have. */
    max-width: 900px; 
    width: 100%; /* Ensures it scales down nicely on smaller screens */

    /* 2. Apply the centering trick for block elements */
    /* This sets the top/bottom margin to 0 and the left/right margin to 'auto', 
       which pushes the element to the center of its container. */
    margin: 0 auto !important; 
    
    /* Using !important here is a good idea to override any default margins 
       the theme or widget may have set on this wrapper. */
}

/* Optional: Ensure the text links/titles inside each carousel item are centered */
.sow-carousel-item-title {
    text-align: center;
}