html {
    scroll-behavior: smooth;
}


@keyframes borderAnimation {
    0% {
        border-color: #ffffff; /* Start color */
    }
    50% {
        border-color: #ff0000; /* Mid color */
    }
    100% {
        border-color: #ffffff; /* End color */
    }
}

.border-animated {
    border: 2px solid #ffffff; /* Initial border style */
    animation: borderAnimation 2s infinite; /* Apply animation */
}


.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Drop shadow */
}

.video-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px; /* Ensure iframe fills container with rounded corners */
}

.matching-image {
    width: 70%; /* Set the width to 100% */
    height: auto; /* Maintain aspect ratio */
    max-width: 100%; /* Ensure image does not exceed parent container */
    max-height: 100%; /* Ensure image does not exceed parent container */
}