*{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;
}

.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;
}

/* 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;}
.carousel img{
  flex:0 0 100%;
  width:100%;
  min-width:100%;
  height:300px;
  object-fit:cover;
  scroll-snap-align:center;
}

.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}

/* LIGHTBOX */
.lightbox{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:1000;
}
.lightbox img{max-width:90%;max-height:90%;object-fit:contain;}

h1{text-align:center;margin-top:10px}
.intro{text-align:center;margin:30px 0}
footer{text-align:center;padding:20px;background:#222;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;
}

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

.carousel img{height:300px}

/* 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;
}