.material-symbols-rounded {
    font-variation-settings:
        'FILL'1,
        'wght'400,
        'GRAD'0,
        'opsz'24
}

.video-button {
    position: absolute;
    bottom: 20px;
    left: 20px;
}

 .open-button {
     padding: 10px 20px;
     background-color: #ff0000;
     color: #fff;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     font-size: 16px;
 }

 /* Modal styling */
 .modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
     justify-content: center;
     align-items: center;
 }

 /* Modal content styling */
 .modal-content {
     position: relative;
     width: 80%;
     max-width: 700px;
     border-radius: 8px;
 }

 /* Close button styling */
 .close-button {
     position: absolute;
     top: -30px;
     right: 0;
     padding: 5px;
     font-size: 20px;
     cursor: pointer;
     border-radius:  8px;
 }

 /* Responsive YouTube iframe */
 .video-wrapper {
     position: relative;
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
     max-width: 100%;
 }

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

 button:focus-visible{
   /* border: 2px solid #501098; */
   outline: none;
   box-shadow: 0 0 6px 2px #007bff;
 }

 select:focus-visible {
   border: 2px solid #007bff;
   box-shadow: 0 0 6px 2px #007bff;
 }