<style>
* {margin: 0;padding: 0;box-sizing: border-box;}
body {font-family: 'Poppins', sans-serif;background-color: #121212;color: #f0f0f0;line-height: 1.6;scroll-behavior: smooth;}
nav {background-color: #000;padding: 15px 30px;display: flex;justify-content: space-between;align-items: center;color: #fff;position: sticky;top: 0;z-index: 999;}
nav .logo {font-size: 1.5rem;font-weight: 600;}
nav ul {list-style: none;display: flex;gap: 20px;}
nav ul li a {color: #fff;text-decoration: none;font-weight: 500;cursor: pointer;}
nav ul li a:hover {color: #ffcc00;}
header {position: relative;height: 100vh;overflow: hidden;}
.slideshow {position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
.slide {position: absolute;width: 100%;height: 100%;background-size: cover;background-position: center;opacity: 0;transition: opacity 0,7 ease-in-out;}
.slide.active {opacity: 1;}
.header-content {position: relative;z-index: 2;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;color: white;background: rgba(0, 0, 0, 0.5);padding: 0 20px;}
.header-content h1 {font-size: 4rem;margin-bottom: 10px;}
.header-content p {font-size: 1.4rem;margin-bottom: 30px;}
.btn {background-color: #d4af37;color: white;padding: 12px 25px;text-decoration: none;border-radius: 8px;margin: 5px;transition: background 0.3s;font-weight: 600;}
.btn:hover {background-color: #bfa534;}
.intro, .section, .themes, .contact, .details-container {background-color: #1e1e1e;color: #f0f0f0;padding: 50px 20px;text-align: center;}
.section h2 {margin-bottom: 20px;font-size: 2rem;}
.services, .themes-gallery {display: flex;flex-wrap: wrap;gap: 20px;justify-content: center;}
.service-box, .theme-box {background-color: #2a2a2a;padding: 20px;border-radius: 12px;width: 280px;cursor: pointer;transition: transform 0.3s, box-shadow 0.3s;}
.service-box:hover, .theme-box:hover {transform: translateY(-5px);box-shadow: 0 8px 20px rgba(255, 204, 0, 0.2);}
.service-box h3, .theme-box h3 {margin-bottom: 10px;color: #d4af37;}
.theme-box img {width: 100%;border-radius: 10px;}
.detail-box {display: none;opacity: 0;transition: opacity 0.5s ease-in-out;margin-top: 20px;}
.detail-box.show {display: block;opacity: 1;}
.contact iframe {border-radius: 10px;}
footer {background-color: #000;color: white;text-align: center;padding: 40px 20px;}
footer a {color: #d4af37;text-decoration: none;}
.modal {display: none;position: fixed;z-index: 9999;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0, 0, 0, 0.8);}
.modal-content {margin: 5% auto;padding: 20px;background-color: #2a2a2a;border-radius: 10px;width: 90%;max-width: 900px;color: white;position: relative;}
.close {position: absolute;top: 10px;right: 20px;font-size: 28px;font-weight: bold;cursor: pointer;color: #fff;}
.gallery-slider {display: flex;gap: 15px;overflow-x: auto;margin-top: 20px;}
.gallery-slider img {height: 200px;border-radius: 8px;transition: transform 0.3s;}
.gallery-slider img:hover {transform: scale(1.05);}
</style>