*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background:#f4f4f4;color:#333}
header{background:#222;color:#fff;padding:15px 0;position:sticky;top:0;z-index:100}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* NAV */
.menu-toggle{display:none;cursor:pointer;font-size:1.5em;padding:10px 20px}
nav{display:flex;justify-content:space-between;align-items:center}
.menu{display:flex;list-style:none}
.menu li{margin-left:20px;position:relative}
.menu a{color:#fff;text-decoration:none}

/* DROPDOWN */
.dropdown-content{
  display:none;
  position:absolute;
  background:#333;
  list-style:none;
  min-width:180px;
  top:100%;
/*   left:0; */
  left:20px;
}

.dropdown-content li{margin:0}

.dropdown-content a{
  display:block;
  padding:10px 20px;
  color:#fff;
}

.dropdown-content a:hover{background:#444}

.dropdown:hover > .dropdown-content{
  display:block;
}

/* Nested dropdown hover behavior */
.dropdown .dropdown:hover > .dropdown-content {
  display: block;
}

/* Nested dropdown positioning */
.dropdown .dropdown .dropdown-content {
  left: 100%;
  top: 0;
  margin-left: 5px;
}

/* Ensure nested dropdowns are hidden by default */
.dropdown .dropdown-content {
  display: none;
}

/* CAROUSEL */
.carousel-wrapper{position:relative;border-radius:10px;margin:20px 0;overflow:hidden;}
.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;touch-action:pan-x;}
.carousel img{
  flex:0 0 100%;
  width:100%;
  min-width:100%;
  height:300px;
  object-fit:cover;
  scroll-snap-align:center;
  touch-action:manipulation;
}

.carousel-buttons{
  position:absolute;top:50%;left:0;width:100%;display:flex;
  justify-content:space-between;transform:translateY(-50%);pointer-events:none;
}
.carousel-buttons button{
  background:rgba(0,0,0,0.5);color:#fff;border:none;padding:10px 15px;cursor:pointer;
  pointer-events:auto;border-radius:50%;font-size:18px;
}

/* THUMBNAILS */
.thumbnails{
  display:flex;
  gap:10px;margin-top:10px;
  justify-content:center;
}
.thumbnails img{
  width:80px;height:60px;object-fit:cover;
  cursor:pointer;border-radius:5px;opacity:.6;transition:.3s;border:2px solid transparent;
}
.thumbnails img:hover{opacity:1}
.thumbnails img.active{opacity:1;border:2px solid #222}



h1{text-align:center;margin-top:10px}
.intro{text-align:center;margin:30px 0}
footer{text-align:center;padding: 0px;background:#000000;color:#fff}

/* MOBILE */
@media(max-width:768px){
.menu-toggle{display:block}
.menu{
  display:none;
  flex-direction:column;
  width:100%;
  background:#333;
  position:absolute;
  top:60px;
  left:0
}
.menu.active{display:flex}

.dropdown-content{
  position:static;
  display:none;
}

.dropdown-content.active{
  display:block;
}

.carousel img{height:300px}

/* Make dropdown links position relative for nested positioning */
.dropdown a {
  position: relative;
}

/* Desktop nested dropdown positioning */
@media(min-width:769px) {
  .dropdown .dropdown .dropdown-content {
    left: 100%;
    top: 0;
    margin-left: 0;
    margin-top: -10px;
  }
}

/* THUMBNAILS MOBILE */
.thumbnails{
  flex-wrap:wrap;
  justify-content:center;
}
.thumbnails img{
  width:60px;
  height:45px;
}
}

footer a{
  color:#fff;
  text-decoration:none;
}

footer a:hover{
  text-decoration:underline;
}

/* ALBUMS PAGE */
.albums {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.album {
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}
.album:hover {
  transform: translateY(-5px);
}
.album a {
  text-decoration: none;
  color: inherit;
}
.album img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.album-content {
  padding: 20px;
}


.album h2 {
  margin: 0 0 10px 0;
  color: #222;
}
.album p {
  color: #666;
  font-size: 0.9em;
}
.cursus-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.cursus-section h2 {
  color: #222;
  margin-bottom: 15px;
}
.cursus-section p {
  margin-bottom: 10px;
  color: #555;
}

/* ALBUMS PAGE FOOTER */
.albums-footer a {
  color: #000;
  text-decoration: none;
}

.albums-footer a:hover {
  text-decoration: underline;
}