/* General styling for the page */

/* Container for the text and video section */
.animation-feature {
    max-width: 800px;
    width: 100%;
    background-color: #fff;
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.animation-feature p {
    line-height: 1.6;
    margin-bottom: 20px;
}

/* This is the main container for our video facade */
.video-playlist-container {
    position: relative; /* Crucial for overlaying the play button */
    width: 100%;
    aspect-ratio: 16 / 9; /* Maintains a 16:9 widescreen ratio */
    cursor: pointer;
    overflow: hidden; /* Ensures nothing spills out */
    border-radius: 8px;
}

/* The thumbnail image */
.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area without distortion */
    transition: transform 0.3s ease;
}

/* A subtle zoom effect on hover to show interactivity */
.video-playlist-container:hover .video-thumbnail {
    transform: scale(1.05);
}

/* The play button container */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: auto;
    transition: transform 0.3s ease;
    pointer-events: none; /* Allows clicks to go through to the main container */
}

.video-playlist-container:hover .play-button {
    transform: translate(-50%, -50%) scale(1.1);
}

/* The red part of the SVG play icon */
.play-button-icon {
    fill: #ff0000;
    opacity: 0.9;
}