.video-wrapper {
 		position: relative;
      //width: 100%;      /* take up to 90% of screen width */
        max-width: 90%; /*   don’t get too big on large screens */
		margin: 0 auto;
      aspect-ratio: 4 / 3; /* keeps proper video shape */
          //border: 5px solid blue;  
            //width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 5px;
            position: relative;
            box-sizing: border-box;
            background-size: contain;
            background-position: center; 
                background-repeat: no-repeat;
            z-index: 1;
            object-fit: contain;
    }

    .video-wrapper video {
      //width: 100%;
      height: 100%;
		background: white;
		margin: 0 auto;
  		object-fit: contain;
      display: block;
      border-radius: 8px; /* optional rounded corners */
      text-align: center;
    }

        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }
			.slide-container {
            //width: 100%;
            //max-width: 1100px;
            height: 99%;
				margin: 0 auto;
            //box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            position: relative;
				align-items: center;
            text-align: center;
            overflow: hidden;
				//border: 3px solid red;
				background-size: contain;
        }

        .slide {
            //max-width: 1100px;
            width: 100%;
            height: 100%;
            display: none;
            justify-content: center;
            align-items: center;
            text-align: center;
            //padding: 5px;
            box-sizing: border-box;
            background-size: contain;
            background-position: center;
				background-repeat: no-repeat;
            position: relative;
				//border: 5px solid black;
            z-index: 1;

        }

        .slide.active {
            display: flex;
        }

        	  .slide::before {
            content: '';
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
				background: none;
 //           background: rgba(0, 0, 0, 0.1); /* Semi-transparent overlay for text readability */
        }

     .overlay-text {
      position: absolute;
  		left: 0;
  		right: 0;
  		margin: auto; /* Centers horizontally if width is defined */
  		width: 60%; /* Example width */
		line-height: 1.2;
  //    bottom: 20%;
  //    left: 10%;
  //    right: 10%;
      text-align: center;
      color: white;
      font-size: clamp(16px, 3vw, 28px); /* responsive font size */
      font-weight: bold;
      text-shadow: 2px 2px 5px black;
      pointer-events: none;
/*    		border: 5px solid white; */
      z-index: 2;
    }
        .slide p {
				width :60%;
				position: relative;
            z-index: 2;
            color: white;
            font-size: 2em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 1.2); 
        }

        .question-slide p {
            position: relative;
            z-index: 2;
            color: red;
            font-size: 1.2em;
            border: 5px;

        }

        .answer-slide p {
            position: relative;
            font-size: 1em;
				 color: lightgreen;
	          z-index: 2;
            border: 5px;

        }
        .title-slide p {
            font-size: 1.2em;
				 color: lightblue;
            z-index: 2;
            border: 5px;
			}

        .other-slide p {
            font-size: 1.2em;
            font-weight: bold;
            z-index: 2;
            border: 5px;
			}
			.video-slide p {
            font-size: 1.2em;
            font-weight: bold;
            z-index: 2;
            border: 5px;
			}

        .nav-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
				display: none;
            border: none;
            padding: 10px;
            cursor: pointer;
            font-size: 1.5em;
            z-index: 3;
        }

        .prev {
            left: 10px;
        }

        .next {
            right: 10px;
        }

        .nav-button:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        audio {
            display: none; /* Hide the audio element */
        }

        .start-button {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translate(-50%);
            padding: 10px 20px;
            font-size: 1.2em;
            cursor: pointer;
            z-index: 4;
        }
			.mute {
            color: red;
			}			
			
    
    /* Full screen center wrapper */
 
.background-slde {
            width: 95vw;
            //max-width: 1100px;
            height: 80vh;
            background-color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            position: relative;
				align-items: center;
            text-align: center;
            overflow: hidden;
				//border: 3px solid green;
        
 				margin: 0 auto;
           
            justify-content: center;
            align-items: center;
            text-align: center;
           	padding: 10px;
            box-sizing: border-box;
            background-size: contain;
            background-position: center;
				background-repeat: no-repeat;
	}
/* =============== start of new video ============================= */				
  
    /* Custom controls */
    .controls {
      position: absolute;
      bottom: 5vh;
      left: 0;
      width: 100%;
      padding: 8px;
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      transition: opacity 0.9s ease;
    }

    .controls.visible {
      opacity: 1;
    }

    .video-controls button {
      background: rgba(255, 255, 255, 0.8);
      border: none;
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
    }
    .video-controls button:hover {
      background: white;
    }

    /* Progress bar */
    input[type="range"] {
      flex-grow: 1;
      appearance: none;
      height: 6px;
      background: #444;
      border-radius: 3px;
      outline: none;
      cursor: pointer;
    }

    input[type="range"]::-webkit-slider-thumb {
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #fff;
      cursor: pointer;
      border: none;
    }
    input[type="range"]::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #fff;
      cursor: pointer;
      border: none;
    }
  
				/* Custom controls */
    .video-controls {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 8px;
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      transition: opacity 0.9s ease;
    }

    .video-controls.visible {
      opacity: 1;
    }

}
// ================end on new video ==================================
  
img {
  height: 95%;
  //object-fit: contain;
  //border: 3px solid green;
}
source {
  height: 95%;
  //object-fit: contain;
	//border: 3px solid brown;
}


.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}