/* Body theme backgrounds */
body.bluish {
	background: #ECFBFA !important;
}
body.yellow {
	background: #fef9e7 !important;
}
/*main css for table - optimized with common properties*/
/* Common table properties */
table.whiteHeader, table.whiteHeader300, table.whiteHeaderNoCenter,
table.transparentCenter100percent, table.pagingHeader, table.greyBody,
table.yellowHeader, table.yellowHeader300, table.bluishHeader, 
table.bluishHeader300, table.bluishAdminFill, table.yellowAdminFill {
    margin-left: auto;
    margin-right: auto;
    border: 0px;
}
	/* Width variants */
	table.whiteHeader, table.whiteHeaderNoCenter, table.transparentCenter100percent,
	table.pagingHeader, table.greyBody, table.yellowHeader, table.bluishHeader,
	table.bluishAdminFill, table.yellowAdminFill {
		width: 100%;
	}
	/* Text alignment variants */
	table.whiteHeader, table.whiteHeader300, table.transparentCenter100percent,
	table.yellowHeader, table.yellowHeader300, table.bluishHeader, table.bluishHeader300 {
		text-align: center;
	}
	/* Background color variants */
	table.whiteHeader, table.whiteHeader300, table.whiteHeaderNoCenter, table.pagingHeader {
		background-color: white;
	}
	table.greyBody {
		background-color: lightgrey;
	}
	table.yellowHeader, table.yellowHeader300 {
		background-color: #FFFE96;
	}
	table.bluishHeader, table.bluishHeader300 {
		background-color: #CCCDEC;
	}
	table.bluishAdminFill {
		background-color: #D2FFF9;
	}
	table.yellowAdminFill {
		background-color: #f8f4ca;
	}
	/* Widget tables */
	table.yellowWidget {
		background-color: #f6f7c1 !important;
	}
	table.bluishWidget {
		background-color: #DCF5F7 !important;
	}
	/* Table row styles - center aligned rows */
	tr.greyHeaderCenter, tr.whiteHeaderCenter, tr.whiteHeaderCenterUnderline,
	tr.yellowHeaderCenter, tr.bluishHeaderCenter {
		text-align: center;
	}
	/* Background color variants for rows */
	tr.greyHeaderCenter {
		background-color: lightgrey;
	}
	tr.whiteHeaderCenter, tr.whiteHeaderCenterUnderline,
	tr.whiteHeaderNoCenter, tr.whiteHeaderNoCenterUnderline {
		background-color: white;
	}
	tr.yellowHeaderCenter {
		background-color: #FFFE96;
	}
	tr.bluishHeaderCenter {
		background-color: #CCCDEC;
	}
	/* Text decoration variants */
	tr.whiteHeaderCenterUnderline, tr.whiteHeaderNoCenterUnderline {
		text-decoration: underline;
	}
	/* Hover behaviors */
	tr.yellowHover:hover {
		background-color: #FFF493 !important;
	}
	tr.bluishHover:hover {
		background-color: #DCF5F7 !important;
	}
	/* Cell background colors */
	td.yellowBack {
		background-color: #FFFE96 !important;
	}
	td.bluishBack {
		background-color: #CCCDEC !important;
	}
	/* Special table cell formatting */
	td.specialTD span {
		float: right;
	}
	td.specialTD span:first-child {
		float: left;
	}
	/* Theme colors */
	.bluishtopnav {
		background-color: #ABBBBB;
	}
	.yellowtopnav {
		background-color: #f9e79f;
	}
	/* Banner styles */
	.bluishbanner_guest, .yellowbanner_guest {
		width: 100%;
		text-align: center;
		border: 0px;
	}
	.bluishbanner_guest {
		background-color: #cacaca;
	}
	.yellowbanner_guest {
		background-color: #c4bfa6;
	}
	
/*links*/
a {color: #c75f3e;}
a.nav:link {color:#4f6b72}
a.nav:visited {color:#4f6b72}
a.thisonly { font-size:12;text-decoration:none;}
a.thisonly:link { font-size:12;text-decoration:none; }
a.thisonly:visited { font-size:12;text-decoration:none;}
a.thisonly:active { font-size:12;text-decoration:none;}
a.thisonly:hover { font-size:12;text-decoration:underline; }

body {
	font: normal 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;color: #4f6b72;
}

/* Base element styles */
th {
    font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #4f6b72;
    border: 0px solid #C1DAD7;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 6px 6px 12px;
}

td {
    font: normal 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    border: 0px solid #C1DAD7;
    padding: 6px 6px 6px 12px;
    color: #4f6b72;
}

.parsley-required{
	color: magenta;
	font-weight: 400;
	font-size: 11px;
	}  
	
.centered-and-cropped { object-fit: cover }

#screenCentered{
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

caption {
	padding: 0 0 5px 0;
	width: 700px;	 
	font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	text-align: right;
}

/* Form button styles */
/* Base styles for all buttons */
.form-submit-button, .form-orange-button, .form-green-button, .form-grey-button,
.form-grey-button-noshadow, .form-red-button-noshadow, .form-orange-button-noshadow, .form-green-button-noshadow {
  color: #fff;
  border: 1px solid #eee;
  border-radius: 20px;
  text-shadow: none;
}
	/* Shadow variants */
	.form-submit-button, .form-submit-button:hover,
	.form-orange-button, .form-orange-button:hover,
	.form-green-button, .form-green-button:hover,
	.form-grey-button, .form-grey-button:hover {
	box-shadow: 5px 5px 5px #eee;
	}
	/* Individual button colors */
	.form-submit-button {
	background: #016ABC;
	}
	.form-submit-button:hover {
	background: #B9DFFF;
	}
	.form-orange-button {
	background: #d69580;
	}
	.form-orange-button:hover {
	background: #d6ab80;
	}
	.form-green-button {
	background: #117A65;
	}
	.form-green-button:hover {
	background: #A3E4D7;
	}
	.form-grey-button {
	background: #616A6B;
	}
	.form-grey-button:hover {
	background: #CCD1D1;
	}
	.form-grey-button-noshadow {
	background: #616A6B;
	}
	.form-red-button-noshadow {
	background: red;
	}
	.form-orange-button-noshadow {
	background: orange;
	}
	.form-green-button-noshadow {
	background: lightseagreen;
	}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #333;
	color: white;
	text-align: center;
	padding: 10px;
}

.unstyled-button {
	border: none;
	padding: 0;
	background: none;
}

* {
	box-sizing: border-box;
}

/* Style the search field */
form.indexform input[type=text] {
	padding: 10px;
	font-size: 17px;
	border: 1px solid grey;
	float: left;
	width: 90%;
	background: #f1f1f1;
}
	/* Style the submit button */
		form.indexform button {
		float: left;
		width: 10%;
		padding: 10px;
		background: #2196F3;
		color: white;
		font-size: 20px;
		border: 1px solid grey;
		border-left: none; /* Prevent double borders */
		cursor: pointer;
	}

	form.indexform button:hover {
		background: #0b7dda;
	}

	/* Clear floats */
	form.indexform::after {
		content: "";
		clear: both;
		display: table;
	}

:root {
	--google-blue: #4885ed;
	--google-blue-hover: #357ae8;
	--google-grey: grey;
	--google-grey-hover: darkgrey;
	--google-green: green;
	--google-green-hover: darkgreen;
	--google-red: red;
	--google-red-hover: darkred;
	--button-border-radius: 6px;
	--button-small-border-radius: 3px;

	/* Button Colors */
	--sbutton-blue: #007dc1;
	--sbutton-blue-dark: #0061a7;
	--sbutton-red: #d0451b;
	--sbutton-red-dark: #bc3315;
	--sbutton-cyan: #33bdef;
	--sbutton-cyan-dark: #019ad2;
	
	/* Button Borders */
	--sbutton-blue-border: #124d77;
	--sbutton-red-border: #942911;
	--sbutton-cyan-border: #057fd0;
	
	/* Button Shadows */
	--sbutton-blue-shadow: #54a3f7;
	--sbutton-red-shadow: #cf866c;
	--sbutton-cyan-shadow: #f0f7fa;
	
	/* Text Shadows */
	--sbutton-blue-textshadow: #154682;
	--sbutton-red-textshadow: #854629;
	--sbutton-cyan-textshadow: #5b6178;
}
  /* Google Button Variables */
  /* Common Google Button Styles - Applied via inheritance */
  .googleButton, .googleButtonGrey, .googleButtonGreen, .googleButtonRed {
	color: #fff;
	border: none;
	border-radius: var(--button-border-radius);
	padding: 12px;
	position: relative;
	font-weight: bold;
	cursor: pointer;
	font-size: 16px;
	transition: background-color 0.3s ease;
	flex: 1;
  }
  /* Small variant */
  .googleButtonSmall {
	background-color: var(--google-blue);
	color: #fff;
	border: none;
	border-radius: var(--button-small-border-radius);
	padding: 7px 10px;
	position: relative;
	font-weight: bold;
	cursor: pointer; /* Added from hover state */
  }
  /* Individual button styles - Only specify what's different */
  .googleButton {
	background-color: var(--google-blue);
  }
  .googleButtonGrey {
	background-color: var(--google-grey);
  }
  .googleButtonGreen {
	background-color: var(--google-green);
  }
  .googleButtonRed {
	background-color: var(--google-red);
  }
  /* Hover states */
  .googleButtonSmall:hover {
	background-color: var(--google-blue-hover);
  }
  .googleButton:hover {
	background-color: var(--google-blue-hover);
  }
  .googleButtonGrey:hover {
	background-color: var(--google-grey-hover);
  }
  .googleButtonGreen:hover {
	background-color: var(--google-green-hover);
  }
  .googleButtonRed:hover {
	background-color: var(--google-red-hover);
  }

.googleField {
	color: black;
	border:1px solid black;
	border-radius:3px;
	padding:7px 10px;
	position:relative;
}

.googleComboBox {
	border:1px solid black;
	border-radius:3px;
	padding:7px 10px;
	position:relative;
}

/*navbar*/
.topnav {
	overflow: hidden;
}
	.topnav a {
		float: left;
		display: block;
		color: #0A3839;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
		font-size: 14px;
		font-family: Verdana, Helvetica, sans-serif;
	}
	
	.topnav .icon {
		display: none;
	}
	.topnav a:hover, .dropdownNB:hover .dropbtn {
		background-color: #555;
		color: white;
	}

.active {
	background-color: white;
	color: white;
}

.dropdownNB {
	float: left;
	overflow: hidden;
	font-family: Verdana, Helvetica, sans-serif;
}
	.dropdownNB .dropbtn {
		font-size: 14px;    
		font-family: Verdana, Helvetica, sans-serif;
		border: none;
		outline: none;
		color: #0A3839;
		padding: 14px 16px;
		background-color: inherit;
		margin: 0;
	}
	.dropdownNB-content {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 160px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 5000;
	}
	.dropdownNB-content a {
		float: none;
		color: black;
		padding: 12px 16px;
		text-decoration: none;
		display: block;
		text-align: left;
	}
	.dropdownNB-content a:hover {
		background-color: #ddd;
		color: black;
	}
	.dropdownNB:hover .dropdownNB-content {
		display: block;
	}

/*image*/
img.anime 
{
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
	img.anime:hover 
	{
		filter: none;
		-webkit-filter: grayscale(0%);
	}

/* sButton Variables */
/* Common sButton Styles */
.sButton, .sButtonRed, .sButtonCyan {
    box-shadow: inset 0px 1px 0px 0px var(--sbutton-blue-shadow);
    border-radius: 3px;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    padding: 6px 24px;
    text-decoration: none;
}
	.sButtonRedSmall {
		box-shadow: inset 0px 1px 0px 0px var(--sbutton-red-shadow);
		border-radius: 3px;
		display: inline-block;
		cursor: pointer;
		color: #ffffff;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 8px;
		padding: 4px 16px;
		text-decoration: none;
		text-shadow: 0px 1px 0px var(--sbutton-red-textshadow);
	}
	/* Individual button styles */
	.sButton {
		background: linear-gradient(to bottom, var(--sbutton-blue) 5%, var(--sbutton-blue-dark) 100%);
		background-color: var(--sbutton-blue);
		border: 1px solid var(--sbutton-blue-border);
		text-shadow: 0px 1px 0px var(--sbutton-blue-textshadow);
	}
	.sButtonRed, .sButtonRedSmall {
		background: linear-gradient(to bottom, var(--sbutton-red) 5%, var(--sbutton-red-dark) 100%);
		background-color: var(--sbutton-red);
		border: 1px solid var(--sbutton-red-border);
	}
	.sButtonRed {
		font-size: 13px;
		padding: 6px 24px;
		text-shadow: 0px 1px 0px var(--sbutton-red-textshadow);
	}
	.sButtonCyan {
		background: linear-gradient(to bottom, var(--sbutton-cyan) 5%, var(--sbutton-cyan-dark) 100%);
		background-color: var(--sbutton-cyan);
		border: 1px solid var(--sbutton-cyan-border);
		border-radius: 6px;
		font-size: 15px;
		font-weight: bold;
		text-shadow: 0px -1px 0px var(--sbutton-cyan-textshadow);
		box-shadow: 0px 1px 0px 0px var(--sbutton-cyan-shadow);
	}
	/* Hover states */
	.sButton:hover {
		background: linear-gradient(to bottom, var(--sbutton-blue-dark) 5%, var(--sbutton-blue) 100%);
		background-color: var(--sbutton-blue-dark);
	}
	.sButtonRed:hover, .sButtonRedSmall:hover {
		background: linear-gradient(to bottom, var(--sbutton-red-dark) 5%, var(--sbutton-red) 100%);
		background-color: var(--sbutton-red-dark);
	}
	.sButtonCyan:hover {
		background: linear-gradient(to bottom, var(--sbutton-cyan-dark) 5%, var(--sbutton-cyan) 100%);
		background-color: var(--sbutton-cyan-dark);
	}
	/* Active states */
	.sButton:active, .sButtonRed:active, .sButtonRedSmall:active, .sButtonCyan:active {
		position: relative;
		top: 1px;
	}

/*tabs*/
.tabset > input[type="radio"] {
	position: absolute;
	left: -200vw;
}
	.tabset .tab-panel {
		display: none;
	}
	.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
	.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
	.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
	.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
	.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
	.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
		display: block;
	}
	.tabset > label {
		position: relative;
		display: inline-block;
		padding: 15px 15px 25px;
		border: 1px solid transparent;
		border-bottom: 0;
		cursor: pointer;
		font-weight: 600;
	}  
	.tabset > label::after {
		content: "";
		position: absolute;
		left: 15px;
		bottom: 10px;
		width: 22px;
		height: 4px;
		background: #8d8d8d;
	}
	.tabset > label:hover,
	.tabset > input:focus + label {
		color: #06c;
	}
	.tabset > label:hover::after,
	.tabset > input:focus + label::after,
	.tabset > input:checked + label::after {
		background: #06c;
	}
	.tabset > input:checked + label {
		border-color: #ccc;
		border-bottom: 1px solid #fff;
		margin-bottom: -1px;
	}
	.tab-panel {
		padding: 30px 0;
		border-top: 1px solid #ccc;
	}
	*,
	*:before,
	*:after {
		box-sizing: border-box;
	}  
	.tabset {
		max-width: 65em;
	}

/*dropdown*/
.dropbtn2 {
	-moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
	-webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
	box-shadow: 0px 1px 0px 0px #f0f7fa;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
	background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
	background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
	background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
	background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
	background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);
	background-color:#33bdef;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #057fd0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:8px;
	font-weight:bold;
	padding:4px 16px;
	text-decoration:none;
	text-shadow:0px -1px 0px #5b6178;
}
	.dropbtn2:hover, .dropbtn2:focus {
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, lightgrey), color-stop(1, black));
		background:-moz-linear-gradient(top, lightgrey 5%, black 100%);
		background:-webkit-linear-gradient(top, lightgrey 5%, black 100%);
		background:-o-linear-gradient(top, lightgrey 5%, black 100%);
		background:-ms-linear-gradient(top, lightgrey 5%, black 100%);
		background:linear-gradient(to bottom, lightgrey 5%, black 100%);
		border:1px solid black;
		background-color: lightgrey;/*#2980B9*/
	}

.dropdown {
	position: relative;
	display: inline-block;
}
	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #f1f1f1;
		min-width: 160px;
		overflow: auto;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 5000;
		text-align:left;
	}
	.dropdown-content a {
		color: black;
		padding: 12px 16px;
		text-decoration: none;
		display: block;
	}
	.dropdown a:hover {background-color: #ddd;}
	.show+.dropdown-content {display: block;}

/*misc*/
.myclassOri { font-weight:bold;font-size:10pt;text-decoration: none; color: blue; }
.myclassOri:hover { text-decoration: underline; color: blue; }
.myclass { text-decoration: none; color: #0066CC; }
.myclass:hover { text-decoration: underline; color: #0066CC; }
.myclass2 { text-decoration: none; color: green; }
.myclass2:hover { text-decoration: underline; color: green; }

.author_wording_color {
	color:#008000;
}

.roundInputText {
	border-radius: 25px;
	border: 0px solid #000;
	padding: 20px; 
	width: 600px;
	height: 15px;  
	outline: none;  
}
@media (max-width: 768px) {
	.roundInputText {
	width: 350px;
	}
}

.roundInputTextMin {
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
}

.roundInputTextLong {
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 12px;
}

#footer {
	position:fixed;
	padding-top: 5px;
	padding-bottom: 5px;
	bottom:0;
	width:100%;
	height:auto;   /* Height of the footer */
	background: #cacaca;
}

.video-container {
    position: relative;
    width: 60vw; /* 60% of the viewport width */
    max-width: 100%; /* Ensures it doesn't exceed the screen width */
    padding-bottom: 0; /* Reset padding-bottom */
    aspect-ratio: 16 / 9; /* Use aspect-ratio for modern browsers */
    margin: 0 auto; /* Center the video on larger screens */
    height: auto; /* Adjust height automatically */
}

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

.video-containerSmaller {
    position: relative;
    width: 250px;
    max-width: 100%; /* Ensures it doesn't exceed the screen width */
    padding-bottom: 0; /* Reset padding-bottom */
    aspect-ratio: 16 / 9; /* Use aspect-ratio for modern browsers */
	margin: 0 auto; /* Center the video on larger screens */
    height: auto; /* Adjust height automatically */
}

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

.swadahneo-logo-container img {
	max-width: 250px;
	height: auto;
	margin-bottom: 20px;
}
.swadahneo-header-text {
	text-align: center;
	margin-bottom: 30px;
}
.swadahneo-container {
	background-color: #fff;
	padding: 25px;
	border-radius: 12px;
	box-shadow: 0 8px 16px rgba(0,0,0,0.1);
	width: 90%;
	max-width: 500px;
	text-align: center;
}
.swadahsent-container {
	background-color: #fff;
	padding: 25px;
	border-radius: 12px;
	box-shadow: 0 8px 16px rgba(0,0,0,0.1);
	width: 90%;
	max-width: 500px;
	text-align: center;
	font-size: 18px;
}
.swadahneo-group {
	display: flex;
	flex-direction: column;
	margin-bottom: 15px;
}
.swadahneo-group label {
	font-weight: bold;
	font-size: 14px;
	margin-bottom: 5px;
}
.swadahneo-group input {
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 16px;
}
.swadahneo-group input:focus {
	border-color: #1a73e8;
	outline: none;
	box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}
.swadahneo-btn-group {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 20px;
}
	button.swadahneo-submit-btn, button.swadahneo-cancel-btn {
		flex: 1;
		padding: 12px;
		font-size: 16px;
		border-radius: 6px;
		border: none;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	button.swadahneo-submit-btn {
		background-color: #1a73e8;
		color: white;
	}

	button.swadahneo-cancel-btn {
		background-color: #e0e0e0;
	}

	button.swadahneo-submit-btn:hover {
		background-color: #1558b0;
	}

	button.swadahneo-cancel-btn:hover {
		background-color: #cacaca;
	}

ul.custom-indent {
  list-style-position: outside;
  padding-left: 1.5em;
}

ul.custom-indent li {
  padding-left: 0.0em;
  text-indent: -0.0em;
}

/*media*/
@media print {
	a[href]::after {content: none !important;}
	.noprint {display:none}
}

@media (max-width: 500px) {
	.swadahneo-btn-group {
		flex-direction: column;
		gap: 10px;
	}
}

@media screen and (max-width: 950px) {
	.topnav a:not(:first-child), .dropdownNB .dropbtn {display: none;}
	.topnav a.icon {float: right;display: block;}
	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {position: absolute;right: 0;top: 0;}
	.topnav.responsive a {float: none;display: block;text-align: left;}
	.topnav.responsive .dropdownNB {float: none;}
	.topnav.responsive .dropdownNB-content {position: relative;}
	.topnav.responsive .dropdownNB .dropbtn {display: block;width: 100%;text-align: left;}
	.video-container {width: 100%; /* Full width for smaller screens */}
}