/* YOUR ORIGINAL CSS (unchanged) */
@font-face {
    font-family: 'GoodwillFont'; /* Name you’ll use in CSS */
    src: url('https://learning.goodwillaz.org/wp-content/uploads/html/fonts/hvd_fonts_-_brandongrotesque-medium-webfont.woff') format('woff'),
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'GoodwillFont'; /* Name you’ll use in CSS */
    src: url('https://learning.goodwillaz.org/wp-content/uploads/html/fonts/hvd_fonts_-_brandongrotesque-bold-webfont.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'GoodwillFont'; /* Name you’ll use in CSS */
    src: url('https://learning.goodwillaz.org/wp-content/uploads/html/fonts/hvd_fonts_-_brandongrotesque-black-webfont.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}

body { 
	font-family: 'GoodwillFont', Arial, sans-serif;
    font-weight: 400;
    --txt-color: #ff9016;
    width: 100%;
    height: 100%;
    overflow: hidden;
	padding: 0; 
	margin: 0
}

 #app { height: 100%; width: 100%; }
    
#fullscreenBtn
{
  margin: 2px 0 0 10px;
  padding: 10px 4px;
  background: #bcbcbc;
  border: 5px solid #ffffff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  border: 0px green solid;
}

.container { 
	display: flex;
	border: 0px green solid;
	text-align: left;
}

.side-menu { 
	width: 16%;
	padding: 10px;
	background: #ffffff; 
	text-align: center;
	padding-left: 20px;
	border: 0px red solid;
}

.side-menu button {
  width: 100%;
  margin-bottom: 1%;
  padding: 8% 4%;
  background: #808080;
  border: 5px solid #ffffff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.side-menu button.completed {
  background: #ff9016;
}

.side-menu button.completed::after {
  content: " ✔";
  color: white;
  font-weight: bold;
  margin-left: 8px;
}

.side-menu button:hover {
  background: #a3a3a3;
}

.side-menu button:disabled {
  	background-color: white;
  	color: black;
  	padding: 2% 0 2% 0;
    text-align: center;
    font-size: 14px;
	color: var(--txt-color);
	font-weight: 600;
}

.side-menu button:disabled:hover {
    cursor: default;
    background-color: white;
}

.side-menu button.active {
  border: 5px #ff9016 solid;
}

.side-menu button.completed.active {
  border: 5px solid #ff9016;
}

.LangTxt
{
	text-align:right;
	padding: 10px 2% 10px 10px;
	font-size: 14px;
	color: var(--txt-color);
	font-weight: 600;
	border: 0px red solid;
}

.video-wrapper {
  display: flex; /* Ensure it's a flex container */
  justify-content: flex-start; /* Align children to the left [3, 4] */
  align-items: flex-start; /* ensures top alignment */
  width: 100%; /* Or container width */
  border: 0px purple solid;
  margin: 0; /* Remove potential default margins */
  padding: 0; /* Remove potential padding */
}

iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

.cbox {
  margin: .5% 0 0 15%;
  padding: 2px 2px 20px 20px;
  background: #ffffff;
  min-height: 4em;
  text-align: center;
  font-size: 17px;
  border: 0px red solid;
  line-height: 98%;
}

.modal.hidden {
     display: none; /*  */
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-content {
    background: #ffffff;
    padding: 60px;
    width: 54%;
    text-align: center;
    border-radius: 0px;
}

.modal-content h2 {
	text-transform: uppercase;
	font-size: 50px;
	font-weight: 800;
	color: #002d74;
	border: 0px solid red;
	margin: 22px 0 6px 0;
}

.modal-content p {
	font-size: 34px;
	padding: 0px 0 10px 0;
	margin: 0;
}

.modal-content button {
	font-size: 30px;
	font-weight: 600;
	text-transform: uppercase;
	padding: 20px 40px 20px 40px;
	margin: 40px 0 0 0;
	cursor: pointer;
	background-color: #ff9016;
	color: white;
	transition: all 0.3s ease-in-out;
	border: 0px white solid;
}

.modal-content button:hover {
	background-color: #002d74;
	color: white;
}


/* =====================================  media smaller area ========================================================= */

@media screen and (max-width: 868px) {

			.LangTxt
			{
					text-align:right;
					padding: 60px 5% 10px 10px;
					font-size: 22px;
					color: var(--txt-color);
					font-weight: 600;
			}
			
			.cbox {
			  min-height: 4em;
			  text-align: center;
			  font-size: 32px;
			  border: 0px red solid;
			}
			
			#languageSelector
			{
			  
			  font-size: 22px;
			}

							
			.side-menu {
			    display: flex;              /* ← This is required */
			    flex-direction: row;
			    justify-content: center;    /* centers the group horizontally */
			    align-items: center;        /* vertically aligns if needed */
			    gap: 5px;                  /* clean spacing between buttons */
			    width: 100%;
			    margin: 0;
			    padding: 0;
			}
			
			.video-wrapper {
			  width: 100%; /* Or container width */
			  border: 0px purple solid;
			  margin: 0; /* Remove potential default margins */
			  padding: 0; /* Remove potential padding */
			}
			
			iframe
			{
			 border: 0px red solid;
			 margin: 0 0 0 0;
			 text-align: center;
			 width: 100%;
			}

           
           .side-menu button {
                width: 25%; /* Adjust for smaller screens */
                margin-bottom: 10px;
                justify-content: center;
                padding: 3% 1% 3% 1%;
               border: 0px white solid;
               font-size: 16px;
            }
            
            .side-menu button:disabled {
			  	background-color: white;
			  	border: 0px red solid;
			  	padding: 0;
			  	margin: 0;
			  	font-size: 20px;
			}
			            

            .container {
                flex-direction: column;
                padding: 10px;
            }

            iframe {
                height: 45vh;
            }

            .modal-content {
                width: 90%;
            }
            
            .cbox {
			  margin: .5% 0 0 0;
			  padding: 00px;
			  min-height: 4em;
			  text-align: center;
			}
        }