* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; }
header { background: #00d9ff; color: white; padding: 20px; text-align: center; }
.logo { font-size: 2em; font-weight: bold; }
nav ul { list-style-type: none; padding: 0; }
nav ul li { display: inline; margin: 0 15px; }
nav ul li a { color: white; text-decoration: none; }
.hero { background: linear-gradient(to right, #00f5ff, #0080ff); color: white; padding: 50px 20px; text-align: center; }
.hero button { padding: 10px 20px; background-color: #ff006e; color: white; border: none; border-radius: 5px; cursor: pointer; }
section { padding: 20px; }
.quiz-container { margin: 20px 0; padding: 20px; background: white; border-radius: 10px; }
.slideshow-container { position: relative; max-width: 100%; margin: auto; }
.mySlides { display: none; }
img { width: 100%; height: auto; border-radius: 10px; }
.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; }
.next { right: 0; border-radius: 3px 0 0 3px; }
.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }
footer { text-align: center; padding: 20px; background: #333; color: white; }