body {
            font-family: 'Inter', sans-serif;
            min-width: 360px;
        }
        /* Custom styles for hover effects and animations */
        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        /* Responsive aspect ratio container for the video iframe */
        .vid-bg {
            width: 70%;
            height: 70%;
            position: relative;
            align-self: center;
        }
        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 aspect ratio 56.25 */
            height: 0;
            overflow: hidden;
            border-top-left-radius: 0.75rem; /* rounded-xl on top */
            border-top-right-radius: 0.75rem; /* rounded-xl on top */
        }

        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .zyoa-navbar-container{
            display: flex;
            flex-direction: row;
            width: 100%; 
            justify-content: space-between; 
            color: white; 
            z-index: 3;
        }
        .zyoa-logo-container {
            display: flex;
            width: auto;
            flex-direction: row;
            justify-content: space-between;
            position: relative;
            align-items: left;
            text-decoration: none;
        }
        .zyoa-logo-container img {
            position: relative;
            width: 60px; 
            height: 60px; 
            margin: 5px;

        } 
        .zyoa-logo-container h2 {
            font-size: 2rem; 
            margin-left: 10px; 
            margin-top: 10px;
            color: black;
        }
        .zyoa-logo-container h4 {
            font-size: 0.9rem; 
            margin-left: 10px; 
            margin-top: 5px;
            color: black;
        }
        .navbar-zyoa {      
            background-color: transparent;
            color: white;
            padding: 15px 20px;
            margin-right: 50px;
            position: absolute; /* Or absolute, depending on your layout */
            top: 0;
            left: 0;
            width: 100%;
            z-index: 100; /* Ensure it's above other content */
            display: flex;
            justify-content: flex-end; /* Align items to the right */
            align-items: center;
        }
        .menu-toggle {
            display: none; /* Hidden by default on larger screens */
            font-size: 24px;
            cursor: pointer;
            color: black;
            margin-right: 30px;
            margin-left: 20px; /* Space from the right-aligned links */
        }

        .nav-links-zyoa {
            list-style: none;
            margin: 0;
            margin-right: 50px;
            padding: 0;
            display: flex;
        }
        .nav-links-zyoa li {
            margin-left: 20px;
        }
            

        @media (max-width: 768px) {
            .navbar-zyoa {
                flex-direction: row; /* Move toggle to the left on small screens */
                padding: 15px;
            }

            .menu-toggle {
                display: block;
            }

            .nav-links-zyoa {
                display: none; /* Hide links by default on small screens */
                flex-direction: column;
                position: absolute;
                z-index: 10;
                align-self: center;
                top: 60px; /* Adjust based on navbar height */
                right: 0;
                left: 0;
                border-radius: 8px;
                background-color: rgb(0, 0, 0,0.9); /* Optional background for the dropdown */
                width: 100%;
                text-align: center;
            }
                .nav-links-zyoa.active {
                display: flex;
            }

            .nav-links-zyoa li {
                margin: 0;
                padding: 5px 0;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }

            .nav-links-zyoa li:last-child {
                border-bottom: none;
            }

            .nav-links-zyoa li a {
                display: block; 
                margin-right: 50px; /* Align with the right side of the screen */
                padding: 1px 0;
            }

            .nav-links-zyoa li a i {
                visibility: collapse;
            }
            .nav-links-zyoa.active .nav-item.active {
                font-weight: normal; /* Revert to normal weight in mobile menu */     
            }
            .vid-texts{
                h3 {
                    font-size: 1ram;
                }
                p{
                    font-size: .8rem;
                }
            }
            .vid-bg {
                width: 100%;
                height: 100%;
                position: relative;
                align-self: center;
            }

        }