/* 1. Encapsulate the entire video block with a semi-transparent dark tint */
.my-video-carousel {
    /* Black with 45% opacity: darkens whatever background is behind it */
    background-color: rgba(0, 0, 0, 0.45) !important; 
    
    /* Optional: Frosty glass effect that blurs the background text/images behind the carousel */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    /* Extra-large prominent shadow built for transparent containers */
    box-shadow: 0px 25px 60px rgba(0, 0, 0, 0.65); 
    
    padding: 30px;       
    border-radius: 16px; 
    border: 1px solid rgba(255, 255, 255, 0.15); /* White border with low opacity to define the edge against dark shadows */
}

/* 2. Large Main Featured Video Player */
.my-video-carousel .wpp-video-player-wrapper,
.my-video-carousel .carousel-slider-featured-video,
.my-video-carousel .main-player-container,
.my-video-carousel iframe {
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 25px; 
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5); /* Adds contrast between the big video and the tinted background */
}

/* 3. Smaller Video Thumbnails Below */
.my-video-carousel .swiper-slide {
    border-radius: 8px; 
    overflow: hidden;   
    transition: transform 0.2s ease;
}

/* 4. Thumbnails Hover Effect */
.my-video-carousel .swiper-slide:hover {
    transform: translateY(-3px);
}

/* 5. Safe Spacing Adjustment */
.my-video-carousel .swiper {
    padding-top: 5px !important;
    padding-bottom: 15px !important;
}
.carousel-heading {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px; /* Adds space right before the video block starts */
    color: #ffffff; /* Change to #111111 if your homepage background is white/light */
}
/* 1. Push the Carousel Navigation Arrows outside of the video track area */
.my-video-carousel .swiper-button-prev,
.my-video-carousel .swiper-nav-left,
.my-video-carousel .carousel-slider-arrow-prev {
    left: -50px !important; /* Positions the left arrow out into the card padding */
}

.my-video-carousel .swiper-button-next,
.my-video-carousel .swiper-nav-right,
.my-video-carousel .carousel-slider-arrow-next {
    right: -50px !important; /* Positions the right arrow out into the card padding */
}

/* 2. Optional: Style the arrows so they contrast beautifully against your dark tint background */
.my-video-carousel .swiper-button-prev::after,
.my-video-carousel .swiper-button-next::after {
    font-size: 22px !important; /* Makes the arrow icons a bit more crisp and compact */
    color: #ffffff !important;   /* Solid white arrow icon color */
    font-weight: bold;
}
/* Apply the semi-transparent dark card theme to the contact form */
.my-custom-contact-form {
    /* Identical black with 45% opacity to match the video carousel */
    background-color: rgba(0, 0, 0, 0.45) !important; 
    
    /* Frosty glass effect to blur background elements behind the form */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    /* The exact same deep, ultra-wide prominent shadow */
    box-shadow: 0px 25px 60px rgba(0, 0, 0, 0.65); 
    
    /* Balanced interior spacing and smooth corners */
    padding: 40px;       
    border-radius: 16px; 
    border: 1px solid rgba(255, 255, 255, 0.15); /* White edge definition */
    
    box-sizing: border-box;
}

/* Optional: Make the form input fields blend seamlessly into the dark aesthetic */
.my-custom-contact-form input[type="text"],
.my-custom-contact-form input[type="email"],
.my-custom-contact-form textarea,
.my-custom-contact-form select {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Slightly lighter transparent background for inputs */
    color: #ffffff !important; /* Crisp white text inside inputs */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px;
    padding: 12px;
}

/* Optional: Label colors so they are perfectly legible over the dark tint */
.my-custom-contact-form label,
.my-custom-contact-form .wpforms-field-label {
    color: #ffffff !important;
    font-weight: 600;
    margin-bottom: 6px;
    display: inline-block;
}
/* Target the submit button inside your custom contact form */
.my-custom-contact-form button[type="submit"],
.my-custom-contact-form input[type="submit"],
.my-custom-contact-form .wpforms-submit,
.my-custom-contact-form .ff-btn-submit {
    /* Layout & Sizing */
    display: inline-block;
    padding: 12px 30px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase; /* Match standard button themes if applicable */
    letter-spacing: 0.5px;
    border-radius: 30px !important; /* Makes it a pill shape like typical Read More links */
    cursor: pointer;
    
    /* Colors & Borders */
    background-color: transparent !important; /* Clean outline style */
    color: #ffffff !important;                /* White text */
    border: 2px solid #ffffff !important;     /* Solid white border */
    
    /* Smooth interactive transition */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease !important;
}

/* Hover effect to create an elegant, interactive pop */
.my-custom-contact-form button[type="submit"]:hover,
.my-custom-contact-form input[type="submit"]:hover,
.my-custom-contact-form .wpforms-submit:hover,
.my-custom-contact-form .ff-btn-submit:hover {
    background-color: #ffffff !important;     /* Fills with solid white on hover */
    color: #111111 !important;                /* Inverts text color to a dark gray/black */
    transform: translateY(-2px);              /* Subtle upward float */
}
/* Hide all page and post titles */
.entry-title, .page-title, h1.entry-title {
    display: none !important;
}

/* Hide dates, post meta, and author info */
.entry-meta, .post-meta, .posted-on, .meta-date {
    display: none !important;
}