/* --- PROPORTIONAL SPLIT SLIDER --- */

.split-carousel {
    width: 100%;
    max-height: 100vh; /* Never taller than the screen */
    background-color: #f8f9fa; /* Prevents white gaps if image is small */
    overflow: hidden;
}

.split-carousel .carousel-item {
    height: auto; 
    max-height: 100vh;
}

.split-carousel .row {
    margin: 0;
    display: flex;
    align-items: stretch; /* Ensures text and image sides match height */
}

/* --- THE IMAGE SIDE --- */
.split-carousel .image-side {
    position: relative;
    padding: 80px;
    background: #eee;
    /* This forces a 16:9 or similar ratio on desktop */
    min-height: 400px; 
	margin-top:-43px;
}

.img {
    max-width: 100%; /* Resize based on parent width */
    height: auto;     /* Recalculate height proportionally */
}

.split-carousel .split-img {
    width: 100%;
    height: auto;
    max-height: 80vh;
    /* 'cover' fills the area, 'contain' shows the whole image */
    object-fit: cover; 
    display: block;
}

/* --- THE TEXT SIDE --- */
.split-carousel .text-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5% !important; /* Proportional padding */
}
@media (max-width: 768px) {
    .split-carousel .carousel-item {
        height: 40vh; /* Set a fixed height for the mobile "poster" look */
        position: relative;
    }

    .split-carousel .row {
        height: 100%;
        position: relative;
    }

    /* 1. Make the image fill the entire slide background */
    .split-carousel .image-side {
      /**  position: absolute; ***/
        top: 0;
        left: 0;
        width: 90%;
        height: 90%;
        z-index: 1;
		padding:40px;
		margin-left:30px;
    }

    /* 2. Turn the text side into a translucent bottom strip */
    .split-carousel .text-side {
        position: absolute;
        top: 170px;
        left: 0;
        width: 100%;
        height: auto !important;
        z-index: 2;
        
        /* The Translucent Strip */
        background: rgba(255,255,255, 0.65) !important; 
        backdrop-filter: blur(0.2px); /* Adds a modern frosted glass effect */
        /** opacity:0.7; filter:alpha(opacity=70); **/
        padding: 5px 2px !important;
        text-align: center;

        box-shadow: 0 0 8px #ccc;
  -moz-box-shadow:  0 0 8px #ccc;
  -webkit-box-shadow:  0 0 8px #ccc;

       
    }

    /* 3. Adjust text size so it doesn't take up too much of the strip */
    .split-carousel h1.display-3 {
        font-size: 1.5rem !important;
        margin-bottom: 5px;
        color: #000;
    }

    .split-carousel .lead {
        font-size: 0.9rem !important;
        margin-bottom: 10px;
    }
    
    .split-carousel .btn {
        padding: 8px 25px;
        font-size: 0.9rem;
    }
}