.main-content {

            text-align: center;

            padding: 2rem; /* p-8 */

            background-color: #ffffff; /* bg-white */

            border-radius: 0.75rem; /* rounded-xl */

            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */

            border: 1px solid #e5e7eb; /* border border-gray-200 */

        }


        .main-content h1 {

            font-size: 2.25rem; /* text-4xl */

            font-weight: 700; /* font-bold */

            color: #1f2937; /* text-gray-800 */

            margin-bottom: 1.5rem; /* mb-6 */

        }


        .main-content p {

            font-size: 1.125rem; /* text-lg */

            color: #4b5563; /* text-gray-600 */

            margin-bottom: 2rem; /* mb-8 */

        }


        /* Styles for the video pop-up modal */

        .modal-overlay {

            position: fixed;

            inset: 0; /* top:0, right:0, bottom:0, left:0 */

            display: flex;

            align-items: center;

            justify-content: center;

            z-index: 50;

            background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */

            transition: opacity 0.3s ease-out; /* For showing/hiding with transition */

        }


        .modal-overlay.hidden {

            opacity: 0;

            pointer-events: none; /* Disables interaction when hidden */

        }


        .modal-content {

			width: 70%;

            position: relative;

            background-color: #ffffff; /* bg-white */

            border-radius: 0.75rem; /* rounded-xl */

            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-2xl */

            padding: 0; /* Removed padding around the video */

            max-width: 90%; /* Max width for responsiveness */

            max-height: 90vh; /* Max height to fit within viewport */

            transform: scale(0.95); /* Initial scale for animation */

            opacity: 0; /* Initial opacity for animation */

            transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Transition for animation */

        }


        .modal-overlay:not(.hidden) .modal-content {

            transform: scale(1); /* End scale for animation */

            opacity: 1; /* End opacity for animation */

        }


        .modal-content .close-button {

            position: absolute;

            top: 0.75rem; /* top-3 */

            right: 0.75rem; /* right-3 */

            color: #6b7280; /* text-gray-500 */

            font-size: 2.25rem; /* text-3xl */

            font-weight: 700; /* font-bold */

            line-height: 1; /* leading-none */

            z-index: 10;

            cursor: pointer;

            background: none;

            border: none;

            padding: 0;

            outline: none; /* focus:outline-none */

        }


        .modal-content .close-button:hover {

            color: #374151; /* hover:text-gray-700 */

        }


        .video-container {

            position: relative;

            width: 100%;

            padding-bottom: 56.25%; /* 16:9 aspect ratio (height / width * 100%) */

            height: 0;

            overflow: hidden;

            border-radius: 0.75rem; /* Updated to match modal-content border-radius for full video */

        }


        .video-container iframe {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            border: 0; /* frameborder-0 */

        }


/* Media query for mobile devices */ @media (max-width: 768px) { /* Adjust 768px 
to your desired breakpoint */
    .modal-content { width: 90%; /* Width for mobile */
    }
}