/* Custom Dashboard Styles for the "basic-dashboard" endpoint */
        
        /* Main Container setup for centering */
        .woocommerce-MyAccount-content {
            display: flex;
            flex-direction: column;
            min-height: 400px; /* Ensure space for vertical centering */
        }

        /* 1. Header (Top Left) */
        .dashboard-header {
            font-size: 26px; /* Similar size/weight to image */
            font-weight: 700;
            color: #000; /* Dark color */
            margin-bottom: 30px;
            padding:50px 0px !important;
            text-align: center;
        }


        /* 2. Middle Content (Text and Button) */
        .dashboard-content-middle {
            flex-grow: 1; /* Pushes content down to the center */
            display: flex;
            flex-direction: column;
            justify-content: center; /* Vertically center content */
            align-items: center; /* Horizontally center content */
            text-align: center;
            width: 100%;
        }
        
        /* Message Text */
        .dashboard-message {
            max-width: 400px;
            font-size: 14px;
            color: #666; 
            line-height: 1.6;
            margin-bottom: 25px;
        }

        /* 3. Button Styling (Matching Image) */
        .dashboard-register-btn {
            /* Orange/Brown color from your previous assets */
            background-color: #e6912c; 
            color: #fff;
            padding: 12px 30px; 
            font-size: 16px; 
            font-weight: 600;
            text-decoration: none;
            border-radius: 8px; /* Rounded corners */
            display: inline-block;
            box-shadow: 0 4px 10px rgba(230, 145, 44, 0.4); /* Subtle shadow matching button color */
            transition: background-color 0.2s;
            border: none;
        }

        .dashboard-register-btn:hover {
            background-color: #d18227; /* Slightly darker on hover */
            color: #fff;
        }


        /* Register Participants video Section CSS */
        .section-divider {
            width: 100%;
            height: 2px;
            background-color: #e5e5e5;
            margin: 20px 0 40px;
        }

        .tutorial-wrapper {
            text-align: center;
            margin: 40px auto;
            max-width: 1100px;
        }

        .tutorial-box {
            background: #f4ede8;
            padding: 80px 20px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .play-button {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background-color: #d58415;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        .play-button svg {
            width: 32px;
            height: 32px;
            fill: white;
        }

        .tutorial-text {
            margin-top: 20px;
            font-size: 24px;
            font-weight: 600;
            color: #333;
        }

        .tutorial-video-responsive {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 */
            height: 0;
            overflow: hidden;
            border-radius: 10px;
        }

        .tutorial-video-responsive iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        /* The beige box container */
        .tutorial-box {
            background: #f3ebe6;
            padding: 40px;
            border-radius: 12px;
            position: relative;
            text-align: center;
            width: 80%;                /* your requirement */
            margin: 0 auto;            /* centers the box */
            display: flex;
            justify-content: center;   /* centers inner content horizontally */
            align-items: center;       /* centers inner content vertically */
            flex-direction: column;    /* keeps overlay + iframe stacked */
        }

        /* Play overlay centered */
        .tutorial-overlay {
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            text-align: center
        }

        /* Full box video */
        .tutorial-full-video {
            width: 100%;
            height: 480px;  /* Adjust height as you like */
            border-radius: 12px;
        }
        @media (max-width: 768px) {
        .dashboard-header {
            font-size: 26px;
            font-weight: 700;
            color: #000;
            margin-bottom: 30px;
            padding: 0px !important;
        }
        .tutorial-wrapper {
            text-align: center !important;
        }
        .tutorial-overlay {
            display: flex;
            cursor: pointer;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: center;       /* Horizontal center */
            text-align: center;
            height: 100%;              /* Ensure overlay has height */
            width: 100%; 
        }
       
        .play-button {
            width: 64px;
            height: 64px;
        }
        .dashboard-register-btn {
            padding: 6px 30px;   
        }
    }