*{box-sizing:border-box;}
html, body {
 width:100%; height:100%;
 margin:0px; padding:0px;
 text-align: center;
 font-family: Arial, sans-serif;
 background: #f5f5f5;
 display: flex;
 flex-direction: column;
 min-height: 100vh !important;
 scroll-behavior:smooth;
}
p{margin:10px;}
h4 {
 margin-top: 30px;;
 margin-bottom: auto;
}
ul {
 margin-top: auto;
 text-align:left;
 display:inline-block;
}
li {
 width:100%;
 max-width: 600px;
 margin-bottom: 10px;
}

.container {
 flex-grow: 1;
 background: radial-gradient(circle at top, #e3f2fd, #ffffff);
 background-attachment: fixed;
}

/* HEADER */
header {
 padding: 5px;
 background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7)), url('../img/Background_WaveForm.jpg');
 background-size:cover; background-position:center;
}
/* H1 SEO */
.seo-title {
 margin:0;
 position:absolute;
 left:-9999px;
}

/* LANGUAGE */
.lang {
 position: absolute;
 top: 10px;
 right: 20px;
}
.lang a{
 font-weight: bold;
 color: #eee;
 line-height:1.5;
}

/* NAV */
nav {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 gap: 0px;
}
nav a {
 margin: 10px;
 text-decoration: none;
 font-weight: bold;
 color: white;
}
nav a:hover {
 color: #777;
}

/* MENU */
.menu {
 position: absolute;
 top: 15px;
 left: 15px;
}
.menu button{
 width: 40px;
 height: 40px;
 font-size: 20px;
}

/* TOP BAR */
.top-tech-bar{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin:10px 15px;
}

/* MENU BUTTON */
.tech-menu-button{
	background:transparent;
	border:none;
	font-size:28px;
	cursor:pointer;
	color:#555;
	padding:5px 10px;
	border-radius:8px;
	transition:0.2s;
}
.tech-menu-button:hover{
	background:#e3f2fd;
	color:#1976D2;
}

/* OVERLAY */
.tech-overlay{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.4);
	opacity:0;
	visibility:hidden;
	transition:0.3s;
	z-index:9998;
}
.tech-overlay.open{
	opacity:1;
	visibility:visible;
}

/* SIDEBAR */
.tech-sidebar{
	position:fixed;
	top:0;
	left:-340px;
	width:320px;
	height:100%;
	background:white;
	overflow-y:auto;
	z-index:9999;
	box-shadow:5px 0 20px rgba(0,0,0,0.25);
	transition:left 0.3s ease;
}
.tech-sidebar.open{
	left:0;
}

/* HEADER */
.tech-sidebar-header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:15px;
	background:#1976D2;
	color:white;
}
.tech-sidebar-header h3{
	margin:0;
}

/* CLOSE BUTTON */
.close-sidebar{
	width: 100%;
	background:none;
	border:none;
	color:white;
	font-size:24px;
	cursor:pointer;
}

/* ACCORDION */
.accordion{
	width:100%;
	background:#f1f1f1;
	color:#222;
	cursor:pointer;
	padding:14px;
	border: 1px solid white;
	text-align:left;
	font-size:16px;
	font-weight:bold;
	transition:0.2s;
}
.accordion:hover{
	background:#2196F3;
	color:white;
}
.accordion.active{
	background:#1976D2;
	color:white;
}

/* PANELS */
.panel{
	max-height:0;
	overflow:hidden;
	transition:max-height 0.3s ease;
	background:#fafafa;
}
.panel a{
	display:block;
	padding:10px 18px;
	text-decoration:none;
	color:#333;
	border-bottom:1px solid #eee;
	transition:0.2s;
}
.panel a:hover{
	background:#e3f2fd;
	color:#1976D2;
	padding-left:25px;
}

/* MAIN */
main {
 max-width: 1200px;
 margin: auto;
}

/* GRID - CARD */
.grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 20px;
 margin:10px;
}
.flex-wrap {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 20px;
 margin:10px;
}
.card {
 position:relative;
 overflow:hidden;
 border-top:4px solid #2196F3;
 background: white;
 border-radius: 10px;
 padding: 0px 20px 30px 20px;
 box-shadow: 0 3px 10px rgba(0,0,0,0.1);
 transition: 0.2s;
}
.card:hover {
 transform: translateY(-5px);
}
.card::before{
 content:"";
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:6px;
 background:rgba(200,200,200,0.25);
}
.card.apps{
 border-top:4px solid #3DDC84;
}
.card.sound{
 border-top:4px solid #2196F3;
}
.card.video{
 border-top:4px solid #FFC107;
}
.card.lighting{
 border-top:4px solid #F44336;
}
.card.qlab{
 border-top:4px solid #9C27B0;
}
.card h4{
 font-size:20px;
 margin-bottom:10px;
}
.card p {
 line-height:1.5;
 color: #666;
 font-size: 14px;
}
.separator {
  width: 100%;
  margin: 20px 0 10px;
}

/* BUTTON */
.button {
 display: inline-block;
 margin-top: 10px;
 padding: 10px 15px;
 background: #2196F3;
 color: white;
 text-decoration: none;
 border-radius: 8px;
}
.button:hover {
 background: #1976D2;
}

/* CATEGORY */
.category {
 margin-top: 10px;
}
.category h2 {
 background: #e3f2fd;
 padding: 8px 12px;
 border-radius: 8px;
 display: inline-block;
}
.filter-btn {
 padding: 8px 12px;
 margin: 5px;
 border: none;
 background: #ddd;
 cursor: pointer;
 border-radius: 6px;
 transition:0.2s;
 font-weight:bold;
}
.filter-btn.active {
 background: #3DDC84;
 color: white;
}
.filter-btn:hover{
 background:#2bbf6b;
 color:white;
}

/* TECH MENU */
.tech-menu{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px;
	margin:15px auto;
	padding:15px;
	max-width:700px;
	border-radius:12px;
	box-shadow:0 3px 10px rgba(0,0,0,0.08);
	background:white;
}
.tech-menu a{
	display:inline-block;
	padding:10px 16px;
	background: #ddd;
	color:#222;
	text-decoration:none;
	font-weight:bold;
	border-radius:8px;
	transition:all 0.2s ease;
	border:1px solid #ddd;
	cursor:pointer;
}
.tech-menu a:hover, .sound{
	background:#2196F3;
	color:white;
	transform:translateY(-2px);
	border-color:#2196F3;
}
.tech-menu .active{
	background:#1976D2;
	color:white;
	border-color:#1976D2;
}

/* BREADCRUMBS */
.breadcrumbs{
	max-width:1100px;
	margin:20px auto 10px auto;
	padding:0 15px;
	font-size:14px;
	color:#666;
}
.breadcrumbs a{
	color:#1976D2;
	text-decoration:none;
	font-weight:bold;
}
.breadcrumbs a:hover{
	text-decoration:underline;
}
.breadcrumbs span{
	color:#444;
	font-weight:bold;
}

/* INFO BLOCK */
.info-block{
 margin:10px;
 padding:10px;
 margin-top:40px;
 border-radius:10px;
 background:white;
 box-shadow:0 3px 12px rgba(0,0,0,0.2);
 line-height:1.5;
}

/* LESSON NAV */
.lesson-nav{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:15px;
	margin: 50px 20px 20px 20px;
}
.lesson-nav a{
	text-decoration:none;
	background:#2196F3;
	color:white;
	padding:10px 15px;
	border-radius:8px;
	font-weight:bold;
}
.lesson-nav a:hover{
	background:#1976D2;
}

/* VIDEO YOUTUBE */
.video-container{
	position:relative;
	width:100%;
	max-width:800px;
	margin:30px auto;
	aspect-ratio:16/9;
}
.video-container iframe{
	position:absolute;
	width:100%;
	height:100%;
	border:none;
	border-radius:12px;
}

/* BACK TO TOP */
.back-to-top{
	position: fixed;
	right: 15px;
	bottom: 10px;
	z-index: 11;
	width: 50px;
	height: 65px;
	padding: 10px;
	background-color: #f0f0f0;
	border: 2px solid;
	border-radius: 10px;
	opacity: 0.6;
	box-shadow: 0 0 0 0.2rem rgba(200, 200, 200, 0.5);
	transition: all 0.15s ease-in-out;
}
.back-to-top:hover{opacity: 1;
	background-color: #cccccc;}

#ProgressBar{
	width:100%; height:6px;
	position:fixed;
	bottom:0; left:0;
	z-index:99;
}

/* FOOTER */
footer {
 padding: 20px;
 background: #222;
 color: white;
}
footer a{
 color: #777;
}

/* PAYPAL */
.donate-box{
	max-width:500px;
	margin:40px auto;
	padding:25px;
	background:white;
	border-radius:12px;
	box-shadow:0 4px 15px rgba(0,0,0,0.1);
	text-align:center;
}
.donate-box h3{
	margin-top:0;
	color:#1976D2;
}
.donate-button{
	display:inline-block;
	margin-top:15px;
	padding:12px 20px;
	background:#0070ba;
	color:white;
	text-decoration:none;
	font-weight:bold;
	border-radius:8px;
	transition:0.2s;
}
.donate-button:hover{
	background:#005ea6;
	transform:translateY(-2px);
}