/* Service Card Carousel Styles */
:root {
    --card-width: 60%;
    --card-max-width: 800px;
    --card-height: auto;
    --card-margin: 10px;
    --card-border-radius: 16px;
    --card-transition: all 0.8s ease-out;
    --card-bg: white;
    --card-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    --card-shadow-hover: 0 15px 30px rgba(100, 44, 144, 0.2);
    --primary-color: #642c90;
    --primary-gradient: linear-gradient(90deg, #642c90 0%, #a84d9a 100%);
    --carousel-bg-color: #000000; /* Default carousel background color */
    --carousel-text-color: white; /* Default text color for the carousel section */
}

/* Video Background Container */
.carousel-bg-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.carousel-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
    opacity: 0.5; /* Reduced from 0.6 to 0.5 as requested */
}

.services-card-carousel {
    position: relative;
    width: 100%;
    padding: 4rem 0 5rem 0; /* Further reduced padding at top and bottom */
    background-color: var(--carousel-bg-color); /* Use the CSS variable */
    color: var(--carousel-text-color); /* Use CSS variable for text color */
    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.03), 0 10px 20px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    min-height: 80vh; /* Reduced from 85vh to 80vh */
    display: flex;
    align-items: center;
    z-index: 20;
    transition: background-color 0.8s ease, color 0.8s ease; /* Add transition for text color */
    margin-bottom: 0;
    border-bottom: none;
}

/* Use a full-height overlay instead of pseudo-elements */
.carousel-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--carousel-bg-color);
    opacity: 0.5;
    z-index: 2;
    transition: background-color 0.8s ease;
}

/* Remove both pseudo-elements that were causing the issues */
.services-card-carousel::before,
.services-card-carousel::after {
    display: none;
}

.services-card-carousel .content-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0;
    position: relative;
    z-index: 10; /* Above the video background */
}

.services-card-carousel h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 10; /* Above the video background */
    font-size: 2.5rem;
    color: var(--carousel-text-color); /* Use CSS variable for text color */
    transition: color 0.8s ease; /* Add transition for color changes */
}

/* Ensure no divider appears under the h2 heading */
.services-card-carousel h2::after,
.services-card-carousel h2::before {
    display: none !important; /* Forcefully remove any pseudo-elements */
    content: none !important; /* Ensure content property is also nullified */
}

/* Carousel Container */
.carousel-container {
    position: relative;
    width: 100%;
    height: 80vh;
    margin: 0 auto;
    overflow: visible;
    z-index: 10; /* Above the video background */
}

/* Carousel Track */
.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Base Card Styles */
.carousel-card {
    position: absolute;
    width: var(--card-width);
    max-width: var(--card-max-width);
    min-height: 300px;
    height: var(--card-height);
    margin: var(--card-margin);
    padding: 12px 12px 30px 12px; /* Small padding on top and sides, larger at bottom */
    border-radius: var(--card-border-radius);
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow);
    cursor: pointer;
    opacity: 0; /* Hidden by default */
    z-index: 1;
    border: 1px solid rgba(100, 44, 144, 0.1);
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateX(300%); /* Start from far right */
    transition: none; /* No transition initially */
}

/* Enable transitions after initialization */
.carousel-container.initialized .carousel-card {
    transition: var(--card-transition);
}

/* Active Card (Center) */
.carousel-card.active {
    transform: translate(-50%, 0) scale(1);
    left: 50%;
    z-index: 5;
    opacity: 1 !important; /* Force visibility for active card */
    height: 68vh; /* Reduced from 71vh to 68vh */
    min-height: 68vh; /* Also reduce minimum height */
    display: flex;
    flex-direction: column;
    width: calc(var(--card-width) + 10%); /* Increase width by 10% */
    padding: 15px 15px 40px 15px; /* Slightly larger padding for active card */
    box-shadow: 0 0 15px 2px rgba(255, 255, 255, 0.5), 0 0 30px 4px rgba(255, 255, 255, 0.2); /* Thinner white glow effect */
    transition: var(--card-transition), box-shadow 0.8s ease; /* Add transition for the glow effect */
}

/* Previous Card (Left) */
.carousel-card.prev {
    transform: translate(-100%, 0) scale(0.8);
    left: 25%;
    z-index: 4;
    opacity: 0.5 !important; /* Reduced from 0.8 to 0.5 to make it darker */
    width: 50%;
    height: 50vh; /* Make the prev card's height proportional to active card */
    /* Remove transition completely for instant effect */
    will-change: transform, opacity, box-shadow; /* Hint to browser for optimization */
}

/* Next Card (Right) */
.carousel-card.next {
    transform: translate(0%, 0) scale(0.8);
    left: 75%;
    z-index: 4;
    opacity: 0.5 !important; /* Reduced from 0.8 to 0.5 to make it darker */
    width: 50%;
    height: 50vh; /* Make the next card's height proportional to active card */
    /* Remove transition completely for instant effect */
    will-change: transform, opacity, box-shadow; /* Hint to browser for optimization */
}

/* Apply instant hover effect using animation instead of transition */
@keyframes instant-hover {
    to {
        transform: translate(-100%, -2%) scale(0.85);
        opacity: 0.75; /* Increased from 0.5 to 0.75 on hover for better visibility */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), 0 0 15px 2px rgba(255, 255, 255, 0.35);
    }
}

@keyframes instant-hover-next {
    to {
        transform: translate(0%, -2%) scale(0.85);
        opacity: 0.75; /* Increased from 0.5 to 0.75 on hover for better visibility */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), 0 0 15px 2px rgba(255, 255, 255, 0.35);
    }
}

/* Hover effects using animation */
.carousel-card.prev:hover {
    animation: instant-hover 0.05s forwards;
    cursor: pointer;
    z-index: 5;
}

.carousel-card.next:hover {
    animation: instant-hover-next 0.05s forwards;
    cursor: pointer;
    z-index: 5;
}

/* Disable all card hover effects during transitions */
.disable-card-hover .carousel-card.prev:hover,
.disable-card-hover .carousel-card.next:hover {
    animation: none !important;
    transform: translate(-100%, 0) scale(0.8) !important; /* Keep prev card in its position */
    opacity: 0.5 !important;
    box-shadow: var(--card-shadow) !important;
    cursor: default !important;
}

.disable-card-hover .carousel-card.next:hover {
    transform: translate(0%, 0) scale(0.8) !important; /* Keep next card in its position */
}

/* Customize hover effect for each card type */
.carousel-card[data-card="1"].prev:hover,
.carousel-card[data-card="1"].next:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 18px 3px rgba(255, 255, 255, 0.5) !important;
}

.carousel-card[data-card="2"].prev:hover,
.carousel-card[data-card="2"].next:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 18px 3px rgba(100, 200, 255, 0.5) !important;
}

.carousel-card[data-card="3"].prev:hover,
.carousel-card[data-card="3"].next:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 0 18px 3px rgba(100, 44, 144, 0.4) !important;
}

.carousel-card[data-card="4"].prev:hover,
.carousel-card[data-card="4"].next:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 18px 3px rgba(255, 150, 150, 0.5) !important;
}

/* Hidden Cards - Move far to the left */
.carousel-card:not(.active):not(.prev):not(.next) {
    transform: translate(-300%, 0) scale(0.5); /* Move far to the left */
    opacity: 0 !important;
    z-index: 0;
    pointer-events: none;
}

/* Card Content Styling */
.card-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Changed from center to allow video to take space at top */
    position: relative;
}

.card-inner h3, 
.card-inner .description {
    padding: 0 0.5rem; /* Small padding for text elements */
}

/* Active card inner styling */
.carousel-card.active .card-inner {
    /* No additional padding needed */
}

.carousel-card.active h3,
.carousel-card.active .description {
    padding: 0 1rem; /* Slightly larger padding for active card text */
}

/* Heading Styles */
.carousel-card h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 0.6rem;
    position: relative;
    padding-bottom: 0.6rem;
}

.carousel-card.active h3 {
    font-size: 2rem;
    margin-bottom: 0.8rem;
}

.carousel-card h3:after {
    content: '';
    position: absolute;
    width: 50px;
    height: 3px;
    background: var(--primary-gradient);
    bottom: 0;
    left: 0;
}

/* Description Text */
.carousel-card .description {
    line-height: 1.4;
    color: #333;
    margin-bottom: 0.5rem;
}

.carousel-card.active .description {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    max-width: 80%;
}

/* Decorative Elements */
.carousel-card.active::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    width: 80px;
    height: 80px;
    border-top: 4px solid var(--primary-color);
    border-left: 4px solid var(--primary-color);
    opacity: 0.2;
    border-radius: 10px 0 0 0;
}

.carousel-card.active::after {
    content: '';
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 80px;
    height: 80px;
    border-bottom: 4px solid var(--primary-color);
    border-right: 4px solid var(--primary-color);
    opacity: 0.2;
    border-radius: 0 0 10px 0;
}

/* Navigation Controls */
.carousel-controls {
    position: absolute;
    bottom: -60px; /* Moved up from -80px to be closer to the active card */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center; /* Center the arrows */
    align-items: center;
    z-index: 10;
}

.carousel-nav {
    background: rgba(255, 255, 255, 0.15); /* Reduced opacity for glassmorphism */
    backdrop-filter: blur(8px); /* Add blur effect for glassmorphism */
    -webkit-backdrop-filter: blur(8px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
    border-radius: 12px; /* Rounded corners instead of circle */
    width: 60px; /* Wider for square shape */
    height: 60px; /* Taller for square shape */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s linear; /* Even faster transition */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Subtle shadow */
    margin: 0 10px; /* Reduced margin to bring arrows closer together */
}

.carousel-nav i {
    color: var(--carousel-text-color); /* Match text color based on active card */
    font-size: 1.5rem;
    transition: all 0.15s linear; /* Even faster transition */
}

.carousel-nav:hover {
    background: rgba(255, 255, 255, 0.25); /* Slightly darker on hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 255, 255, 0.3); /* Enhanced glow */
    transform: none; /* No movement */
}

.carousel-nav:active {
    background: rgba(255, 255, 255, 0.3); /* Even darker when clicked */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25), 0 0 8px rgba(255, 255, 255, 0.3); /* Reduced glow when clicked */
    transform: scale(0.97); /* Very subtle scale down when clicked */
}

/* Special styling for Card 3 (light background) */
.carousel-card[data-card="3"].active ~ .carousel-controls .carousel-nav {
    background: rgba(100, 44, 144, 0.6); /* Darker purple background */
    border: 3px solid rgba(100, 44, 144, 0.9); /* Thicker, more visible border */
    box-shadow: 
        0 0 0 4px rgba(100, 44, 144, 0.3), /* Stronger inner glow border */
        0 4px 15px rgba(100, 44, 144, 0.5), /* Stronger base shadow */
        0 0 25px rgba(100, 44, 144, 0.7); /* Stronger, more visible outer glow */
    position: relative; /* For the pseudo-element */
}

/* Add pulsing outline effect */
.carousel-card[data-card="3"].active ~ .carousel-controls .carousel-nav::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 17px; /* Slightly larger than the button's radius */
    background: transparent;
    border: 3px solid rgba(100, 44, 144, 0.5); /* Thicker, more visible border */
    z-index: -1;
}

.carousel-card[data-card="3"].active ~ .carousel-controls .carousel-nav i {
    color: white; /* White icon for better contrast */
    text-shadow: 0 0 10px rgba(100, 44, 144, 1), 0 0 15px rgba(100, 44, 144, 0.9); /* Darker, stronger text glow */
    font-size: 1.8rem; /* Slightly larger icon */
}

.carousel-card[data-card="3"].active ~ .carousel-controls .carousel-nav:hover {
    background: rgba(50, 50, 70, 0.95); /* Dark grey-purple on hover */
    border: 3px solid rgba(90, 40, 130, 1); /* Solid border on hover */
    box-shadow: 
        0 0 0 5px rgba(70, 40, 100, 0.5), /* Stronger inner glow border */
        0 4px 15px rgba(40, 40, 60, 0.8), /* Grey-tinted base shadow */
        0 0 35px rgba(80, 40, 110, 0.9); /* Strong outer glow with grey tone */
    transform: scale(1.08); /* Slightly more noticeable scale up */
}

.carousel-card[data-card="3"].active ~ .carousel-controls .carousel-nav:hover i {
    text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 25px rgba(255, 255, 255, 0.9); /* White glow on icon for contrast against dark background */
    color: #ffffff;
    font-size: 1.9rem; /* Larger icon on hover */
}

.carousel-card[data-card="3"].active ~ .carousel-controls .carousel-nav:active {
    background: rgba(30, 30, 45, 1); /* Almost black with grey tint when clicked */
    box-shadow: 
        0 0 0 4px rgba(60, 40, 90, 0.5), /* Grey-purple inner glow border */
        0 4px 10px rgba(40, 40, 60, 0.7), /* Grey shadow */
        0 0 25px rgba(70, 40, 100, 0.7); /* Grey-purple outer glow */
    transform: scale(0.98); /* Subtle scale down when clicked */
}

/* Responsive Adjustments */
@media screen and (max-width: 992px) {
    :root {
        --card-width: 70%;
    }
    
    .carousel-card.prev {
        left: 20%;
    }
    
    .carousel-card.next {
        left: 80%;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --card-width: 80%;
    }
    
    .services-card-carousel {
        min-height: 60vh;
    }
    
    .carousel-container {
        height: 400px;
    }
    
    .carousel-card {
        padding: 0 0 20px 0;
    }
    
    .carousel-card h3 {
        font-size: 1.5rem;
    }
    
    .card-inner h3, 
    .card-inner .description {
        padding: 0 1.5rem;
    }
    
    .carousel-card.active h3,
    .carousel-card.active .description {
        padding: 0 2rem;
    }
    
    .carousel-card.prev {
        left: 15%;
        width: 45%;
    }
    
    .carousel-card.next {
        left: 85%;
        width: 45%;
    }
    
    .carousel-nav {
        width: 40px;
        height: 40px;
    }
    
    .carousel-nav i {
        font-size: 1.2rem;
    }
    
    /* Video responsive adjustments */
    .card-video-container {
        width: calc(100% + 2rem);
        margin: -1rem -1rem 1.5rem -1rem;
    }
    
    .carousel-card.active .card-video-container {
        width: calc(100% + 3rem);
        margin: -1.5rem -1.5rem 2rem -1.5rem;
    }
    
    .card-video-container video {
        min-height: 220px;
        object-position: center bottom; /* Ensure bottom part shown on mobile */
    }
    
    .carousel-card.active .card-video-container video {
        min-height: 280px;
        object-position: center bottom; /* Ensure bottom part shown on mobile */
    }
}

/* Card Video Styling */
.card-video-container {
    width: 100%;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
}

.card-video-container video {
    width: 140%;
    max-width: none;
    height: auto;
    margin-left: -20%;
    display: block;
    object-fit: fill;
    min-height: 300px; /* Ensure minimum height for video */
    transform: scale(1.2);
    transform-origin: center bottom; /* Change to bottom to show bottom part */
}

.carousel-card.active .card-video-container {
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.carousel-card.active .card-video-container video {
    min-height: 350px; /* Taller video for active card */
    width: 140%;
    max-width: none;
    margin-left: -20%;
    object-fit: fill;
    transform: scale(1.2);
    transform-origin: center bottom; /* Change to bottom to show bottom part */
}

/* Card 1 specific styling - refined */
.carousel-card[data-card="1"] {
    background-color: #000000;
    background-image: none;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0; /* Remove padding to make video go edge to edge */
    overflow: hidden; /* Ensure content doesn't spill outside the card */
    display: flex;
    flex-direction: column;
}

.carousel-card[data-card="1"].active {
    background-color: #000000;
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 15px 2px rgba(255, 255, 255, 0.5), 0 0 30px 4px rgba(255, 255, 255, 0.2); /* Thinner white glow effect */
    padding: 0; /* Remove padding to make video go edge to edge */
    overflow: hidden; /* Ensure content doesn't spill outside the card */
}

/* Card 1 inner layout */
.carousel-card[data-card="1"] .card-inner {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Card 1 video container styling */
.carousel-card[data-card="1"] .card-video-container {
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 60%; /* Match Card 2's height */
    position: relative;
    top: 0; /* Ensure container is at the very top */
}

.carousel-card[data-card="1"].active .card-video-container {
    box-shadow: none;
    margin: 0;
    padding: 0;
    height: 60%; /* Match Card 2's height */
    top: 0; /* Ensure container is at the very top */
}

/* Card 1 video styling */
.carousel-card[data-card="1"] .card-video-container video {
    border-radius: 0;
    display: block;
    position: absolute;
    width: 102%; /* Slightly wider than container to ensure no gaps */
    height: auto;
    object-fit: fill; /* Ensure stretching */
    object-position: center bottom; /* Show bottom half */
    bottom: 0; /* Position at bottom of container */
    left: -1%; /* Pull slightly to the left to cover any gaps */
    margin: 0;
    padding: 0;
    transform: none !important;
}

.carousel-card[data-card="1"].active .card-video-container video {
    width: 102%; /* Slightly wider than container */
    height: auto;
    object-fit: fill; /* Ensure stretching */
    object-position: center bottom; /* Show bottom half */
    bottom: 0;
    left: -1%; /* Pull slightly to the left */
    margin: 0;
    padding: 0;
    position: absolute;
    transform: none !important;
}

/* Adjust text spacing to match Card 2 */
.carousel-card[data-card="1"] .card-inner h3 {
    color: white;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    padding: 0 1.5rem;
}

.carousel-card[data-card="1"].active .card-inner h3 {
    margin-top: 0.7rem;
    margin-bottom: 0.6rem;
    font-size: 1.8rem;
    padding: 0 2rem;
}

.carousel-card[data-card="1"] .card-inner .description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin-bottom: 0.4rem;
    padding: 0 1.5rem;
    line-height: 1.4;
}

.carousel-card[data-card="1"].active .card-inner .description {
    font-size: 1.1rem;
    padding: 0 2rem;
    margin-bottom: 0.6rem;
}

/* Remove corner design specifically for Card 1 */
.carousel-card[data-card="1"].active::before,
.carousel-card[data-card="1"].active::after {
    display: none;
}

/* Card 1 specific styling */
.carousel-card[data-card="1"] .card-inner h3:after {
    display: none; /* Remove the divider under h3 for Card 1 */
}

/* Card 2 specific styling */
.carousel-card[data-card="2"] {
    background-color: #0c29ab; /* Changed from #0000FF to #0c29ab */
    background-image: none;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0; /* Remove all padding */
    overflow: hidden; /* Ensure content doesn't spill outside the card */
    display: flex;
    flex-direction: column;
}

.carousel-card[data-card="2"].active {
    background-color: #0c29ab; /* Changed from #0000FF to #0c29ab */
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 15px 2px rgba(255, 255, 255, 0.5), 0 0 30px 4px rgba(255, 255, 255, 0.2); /* Thinner white glow effect */
    padding: 0; /* Remove all padding */
    overflow: hidden; /* Ensure content doesn't spill outside the card */
}

/* Card 2 inner layout */
.carousel-card[data-card="2"] .card-inner {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Card 2 video container styling */
.carousel-card[data-card="2"] .card-video-container {
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 60%; /* Increased to show more of the video */
    position: relative;
    top: 0; /* Ensure container is at the very top */
}

.carousel-card[data-card="2"].active .card-video-container {
    box-shadow: none;
    margin: 0;
    padding: 0;
    height: 60%; /* Increased to show more of the video */
    top: 0; /* Ensure container is at the very top */
}

/* Card 2 video styling */
.carousel-card[data-card="2"] .card-video-container video {
    border-radius: 0;
    display: block;
    position: absolute;
    width: 102%; /* Slightly wider than container to ensure no gaps */
    height: auto;
    object-fit: fill; /* Change to fill to ensure stretching */
    object-position: center top; /* Align to top */
    top: 0;
    left: -1%; /* Pull slightly to the left to cover any gaps */
    margin: 0;
    padding: 0;
    transform: none !important;
}

.carousel-card[data-card="2"].active .card-video-container video {
    width: 102%; /* Slightly wider than container to ensure no gaps */
    height: auto;
    object-fit: fill; /* Change to fill to ensure stretching */
    object-position: center top; /* Align to top */
    top: 0;
    left: -1%; /* Pull slightly to the left to cover any gaps */
    margin: 0;
    padding: 0;
    position: absolute;
    transform: none !important;
}

/* Card 2 text styling */
.carousel-card[data-card="2"] .card-inner h3 {
    color: white;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    padding: 0 1.5rem;
}

.carousel-card[data-card="2"].active .card-inner h3 {
    margin-top: 0.7rem;
    margin-bottom: 0.6rem;
    font-size: 1.8rem;
    padding: 0 2rem;
}

.carousel-card[data-card="2"].active .card-inner .description {
    font-size: 1.1rem;
    padding: 0 2rem;
    margin-bottom: 0.6rem;
}

/* Remove corner design specifically for Card 2 */
.carousel-card[data-card="2"].active::before,
.carousel-card[data-card="2"].active::after {
    display: none;
}

.carousel-card[data-card="2"] .card-inner h3:after {
    display: none; /* Remove the divider under h3 for Card 2 */
}

.carousel-card[data-card="2"] .description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin-bottom: 0.4rem;
    padding: 0 1.5rem;
    line-height: 1.4;
}

.carousel-card[data-card="2"].active .card-inner .description {
    font-size: 1.1rem;
    padding: 0 2rem;
    margin-bottom: 0.6rem;
}

/* Card 3 specific styling */
.carousel-card[data-card="3"] {
    background-color: #F1F1EF; /* Light background */
    background-image: none;
    color: #333; /* Dark text for better contrast on light background */
    border: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0; /* Remove all padding */
    overflow: hidden; /* Ensure content doesn't spill outside the card */
    display: flex;
    flex-direction: column;
}

.carousel-card[data-card="3"].active {
    background-color: #F1F1EF; /* Light background */
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 15px 3px rgba(100, 44, 144, 0.5), 0 0 30px 6px rgba(100, 44, 144, 0.3); /* Purple-tinted glow for better visibility */
    padding: 0; /* Remove all padding */
    overflow: hidden; /* Ensure content doesn't spill outside the card */
}

/* Card 3 inner layout */
.carousel-card[data-card="3"] .card-inner {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Card 3 video container styling */
.carousel-card[data-card="3"] .card-video-container {
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 60%; /* Match other cards */
    position: relative;
    top: 0; /* Ensure container is at the very top */
}

.carousel-card[data-card="3"].active .card-video-container {
    box-shadow: none;
    margin: 0;
    padding: 0;
    height: 60%; /* Match other cards */
    top: 0; /* Ensure container is at the very top */
}

/* Card 3 video styling */
.carousel-card[data-card="3"] .card-video-container video {
    border-radius: 0;
    display: block;
    position: absolute;
    width: 102%; /* Slightly wider than container to ensure no gaps */
    height: auto;
    object-fit: fill; /* Ensure stretching */
    object-position: center top; /* Show top half */
    top: 0; /* Position at top of container */
    left: -1%; /* Pull slightly to the left to cover any gaps */
    margin: 0;
    padding: 0;
    transform: none !important;
}

.carousel-card[data-card="3"].active .card-video-container video {
    width: 102%; /* Slightly wider than container */
    height: auto;
    object-fit: fill; /* Ensure stretching */
    object-position: center top; /* Show top half */
    top: 0;
    left: -1%; /* Pull slightly to the left */
    margin: 0;
    padding: 0;
    position: absolute;
    transform: none !important;
}

/* Card 3 text styling */
.carousel-card[data-card="3"] .card-inner h3 {
    color: #333;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    padding: 0 1.5rem;
}

.carousel-card[data-card="3"] .card-inner h3:after {
    display: none; /* Remove the divider under h3 */
}

.carousel-card[data-card="3"] .description {
    color: rgba(51, 51, 51, 0.8);
    font-size: 1rem;
    margin-bottom: 0.4rem;
    padding: 0 1.5rem;
    line-height: 1.4;
}

.carousel-card[data-card="3"].active .card-inner h3 {
    margin-top: 0.7rem;
    margin-bottom: 0.6rem;
    font-size: 1.8rem;
    padding: 0 2rem;
    color: #642c90;
    font-weight: 600;
}

.carousel-card[data-card="3"].active .card-inner .description {
    font-size: 1.1rem;
    padding: 0 2rem;
    color: #333;
    margin-bottom: 0.6rem;
    line-height: 1.4;
}

/* Remove corner design specifically for Card 3 */
.carousel-card[data-card="3"].active::before,
.carousel-card[data-card="3"].active::after {
    display: none;
}

/* Card 4 specific styling */
.carousel-card[data-card="4"] {
    background-color: #EB4B71; /* Changed from dark blue to pinkish-red */
    background-image: none;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0; /* Remove all padding */
    overflow: hidden; /* Ensure content doesn't spill outside the card */
    display: flex;
    flex-direction: column;
}

.carousel-card[data-card="4"].active {
    background-color: #EB4B71; /* Changed from dark blue to pinkish-red */
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 15px 2px rgba(255, 255, 255, 0.5), 0 0 30px 4px rgba(255, 255, 255, 0.2); /* Thinner white glow effect */
    padding: 0; /* Remove all padding */
    overflow: hidden; /* Ensure content doesn't spill outside the card */
}

/* Card 4 inner layout */
.carousel-card[data-card="4"] .card-inner {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Card 4 video container styling */
.carousel-card[data-card="4"] .card-video-container {
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 60%; /* Match other cards */
    position: relative;
    top: 0; /* Ensure container is at the very top */
}

.carousel-card[data-card="4"].active .card-video-container {
    box-shadow: none;
    margin: 0;
    padding: 0;
    height: 60%; /* Match other cards */
    top: 0; /* Ensure container is at the very top */
}

/* Card 4 video styling */
.carousel-card[data-card="4"] .card-video-container video {
    border-radius: 0;
    display: block;
    position: absolute;
    width: 102%; /* Slightly wider than container to ensure no gaps */
    height: auto;
    object-fit: fill; /* Ensure stretching */
    object-position: center top; /* Show top half */
    top: 0; /* Position at top of container */
    left: -1%; /* Pull slightly to the left to cover any gaps */
    margin: 0;
    padding: 0;
    transform: none !important;
}

.carousel-card[data-card="4"].active .card-video-container video {
    width: 102%; /* Slightly wider than container */
    height: auto;
    object-fit: fill; /* Ensure stretching */
    object-position: center top; /* Show top half */
    top: 0;
    left: -1%; /* Pull slightly to the left */
    margin: 0;
    padding: 0;
    position: absolute;
    transform: none !important;
}

/* Card 4 text styling */
.carousel-card[data-card="4"] .card-inner h3 {
    color: white;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    padding: 0 1.5rem;
}

.carousel-card[data-card="4"] .card-inner h3:after {
    display: none; /* Remove the divider under h3 */
}

.carousel-card[data-card="4"] .description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin-bottom: 0.4rem;
    padding: 0 1.5rem;
    line-height: 1.4;
}

.carousel-card[data-card="4"].active .card-inner h3 {
    margin-top: 0.7rem;
    margin-bottom: 0.6rem;
    font-size: 1.8rem;
    padding: 0 2rem;
}

.carousel-card[data-card="4"].active .card-inner .description {
    font-size: 1.1rem;
    padding: 0 2rem;
    margin-bottom: 0.6rem;
    line-height: 1.4;
}

/* Remove corner design specifically for Card 4 */
.carousel-card[data-card="4"].active::before,
.carousel-card[data-card="4"].active::after {
    display: none;
}

/* Card 3 specific styling for the carousel section */
.carousel-card[data-card="3"].active ~ .carousel-controls,
.carousel-card[data-card="3"].active ~ .content-wrapper h2 {
    color: #333 !important; /* Dark text when Card 3 is active */
}

/* Update the JavaScript function to set text color along with background color */