@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

body {
    font-family: 'Outfit', sans-serif;
}

.glass-panel {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-bg {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.hero-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

.overlay {
    background: linear-gradient(180deg, rgba(15,23,42,0.4) 0%, rgba(15,23,42,0.8) 60%, rgba(15,23,42,1) 100%);
}

.glow-text {
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

/* Swiper customization */
.swiper-pagination-bullet-active {
    background-color: #FFD700 !important;
}

/* Tailwind Custom Colors (if not using build step, we define CSS variables or classes here if needed provided we don't use the CDN config) */
/* Since we use CDN tailwind, we keep standard classes in HTML, but complex custom overrides go here. */