/* Container for the carousel */
.walsworth-carousel-container {
    display: flex; /* Align the two sliders side by side */
    flex-direction: row; /* Ensure horizontal alignment */
    width: 100%;
    position: relative; /* Ensure navigation buttons are positioned correctly */
}

/* Swiper containers for text and image sliders */
.walsworth-text-swiper,
.walsworth-image-swiper {
    height: 100%; /* Full height of the container */
    position: relative; /* Ensure proper positioning */
    overflow: hidden; /* Prevent content overflow */
}

.walsworth-text-swiper {
    width: 67%;
}
.walsworth-image-swiper {
    padding: 25px 5%; /* Add some padding to the image slider for spacing */
    width: 33%;
}

/* Swiper wrapper */
.swiper-wrapper {
    display: flex; /* Align slides horizontally */
    flex-wrap: nowrap; /* Prevent wrapping of slides */
    height: 100%; /* Match the height of the container */
}

/* Individual slides */
.swiper-slide {
    display: flex; /* Use flex to center content */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    height: 100%; /* Match the height of the container */
    flex-shrink: 0; /* Prevent slides from shrinking */
    width: 100%; /* Ensure each slide takes up the full width of its container */
    position: relative; /* Position slides relative to their container */
    transition: transform 0.3s ease, z-index 0.3s ease, opacity 0.3s ease; /* Smooth transitions */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    box-sizing: border-box; /* Ensure padding and borders are included in width/height */
}
.walsworth-image-swiper .swiper-slide {
    font-size: 0; /* Hide text in image slides to avoid layout issues */
}
/* Stacking effect for images */
.carousel-image {
    display: block; /* Ensure the image is a block element */
    width: 100%; /* Full width of the container */
    height: 100%; /* Full height of the container */
    object-fit: cover; /* Maintain aspect ratio and crop if necessary */
    border-radius: 0; /* Remove rounded corners if not needed */
    box-shadow: none; /* Remove shadow if not needed */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    vertical-align: top; /* Align images vertically in the middle of the slide */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition for scaling and opacity */
}

/* Non-active slides (stacked behind) */
.swiper-slide {
    transform: scale(0.8); /* Scale down non-active slides */
    opacity: 0.6; /* Dim non-active slides */
    z-index: 0; /* Place non-active slides behind */
}

/* Active slide */
.swiper-slide-active {
    transform: scale(1); /* Full size for the active slide */
    opacity: 1; /* Fully visible active slide */
    z-index: 1; /* Bring the active slide to the front */
}

/* Only the active slide’s link is a tap target */
.walsworth-image-swiper .swiper-slide a {
  pointer-events: none;             /* peeking slides: not clickable */
  display: block;                   /* ensure the link fills the slide */
  min-width: 48px; min-height: 48px;/* good touch size; the card is much larger anyway */
}

.walsworth-image-swiper .swiper-slide.swiper-slide-active a {
  pointer-events: auto;             /* the centered slide is clickable */
}

/* Navigation buttons */
.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: #000;
    font-size: 4rem;
    cursor: pointer;
}

.swiper-button-prev {
    left:calc(67% - 40px);
}

.swiper-button-next {
    right: -40px;
}

/* Text content inside text slider */
.text-content {
    padding: 20px 18%;
    box-sizing: border-box; /* Ensure padding doesn't affect layout */
    overflow: hidden; /* Prevent content overflow */
}

.text-content h2.headline {
    font-size: 42px;
    margin-bottom: 10px;
    font-family: 'Proxima Nova', sans-serif; /* Use a specific font for the headline */
    font-weight: 600; /* Bold headline for emphasis */
    color: #144087;
}

.text-content .paragraph {
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 600;
    color: #144087;
}

.text-content .cta-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #144087;
    color: #fff;
    text-decoration: none;
    border-radius: 13px;
    transition: background-color 0.3s ease;
    text-transform: uppercase; /* Uppercase text for emphasis */
    font-weight: 600; /* Bold text for the button */
    font-size: 18px; /* Font size for the button */
}

.text-content .cta-button:hover {
    background-color: #005bb5;
}

@media screen and (max-width: 768px) {
    .walsworth-carousel-container {
        flex-direction: column; /* Stack sliders vertically on smaller screens */
        height: auto; /* Allow height to adjust based on content */
    }

    .walsworth-text-swiper {
        order: 2; /* Move the text slider below the image slider */
    }

    .walsworth-image-swiper {
        order: 1; /* Move the image slider above the text slider */
    }

    .walsworth-text-swiper,
    .walsworth-image-swiper {
        width: 100%; /* Full width for each slider */
        height: auto; /* Adjust height based on content */
    }

    .text-content h2.headline {
        font-size: 1.5rem; /* Smaller headline on mobile */
    }

    .swiper-button-prev,
    .swiper-button-next {
        font-size: 2.5rem; /* Smaller buttons on mobile */
    }

    .swiper-button-prev {
        left: 10px; /* Adjust position for mobile */
    }

    .swiper-button-next {
        right: 10px; /* Adjust position for mobile */
    }
}