:root {
    --color-primary: #B8D7CD;
    --color-bg: #111827;
}

/* --- Custom Font Face Definition --- */
@font-face {
    font-family: 'Questrian';
    src: url('/Questrian-Font.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; 
}

html {
    scroll-behavior: smooth;
}

.upper-vacancies-fake {
    position: relative;
    top: 100px;
    width:100%;
    background-color: #B8D7CD;
}

body {
    background-color: var(--color-bg);
    color: #d1d5db; /* text-gray-300 */
    font-family: 'Inter', sans-serif;
    overflow-x: hidden; /* Prevent horizontal scroll from animations */
}

/* --- Header Scroll Effect --- */
header {
    transition: all 0.3s ease-in-out;
    background-color: transparent;
    /* Added initial border and subtle dark shadow */
    border-bottom: 1px solid rgba(55, 65, 81, 0.5);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.24); 
}

header.scrolled {
    background-color: rgba(17, 24, 39, 0.95); /* Higher opacity for blurred background */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Darker, more pronounced shadow when scrolled */
    border-bottom: 1px solid rgba(55, 65, 81, 1); 
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.5), 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}

/* --- Gradient Text --- */
.text-gradient {
    background-image: linear-gradient(to right, var(--color-primary), #93c5fd); /* Mint to Blue-300 */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- Scroll Down Indicator --- */
.scroll-indicator {
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

/* --- Scroll-Triggered Animations --- */

/* --- Button Style --- */
.btn {
    @apply px-6 py-3 rounded-lg font-bold transition-all duration-300 ease-in-out;
}
.btn-primary {
    @apply bg-primary-default text-darkbg hover:bg-primary-light 
            hover:shadow-lg hover:shadow-primary-default/30 hover:scale-105;
}
.btn-secondary {
    @apply bg-slate-700 text-gray-200 hover:bg-slate-600;
}

/* New Outline Button Style */
.btn-outline {
    @apply bg-transparent border-2 border-slate-600 text-gray-300
            hover:border-primary-default hover:text-primary-default hover:scale-105;
}

/* --- Card Style --- */
.video-card {
    @apply bg-slate-800 rounded-xl overflow-hidden shadow-lg 
            border border-slate-700;
    
    /* 3D and transition properties */
    transform: scale(0.9) rotateY(15deg);
    transition: transform 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
    will-change: transform;
}
.video-card:hover {
    /* Pop out effect on hover */
    transform: scale(1.05) rotateY(0) translateZ(40px);
    z-index: 10;
    @apply border-primary-default shadow-primary-default/10;
}

.feature-card {
        @apply bg-slate-800 p-6 rounded-xl border border-slate-700
            transition-all duration-300 hover:border-primary-dark hover:scale-105;
}

/* --- Horizontal Scroll Gallery --- */
.video-gallery-wrapper {
    overflow-x: hidden; /* Hide overflow */
    padding-bottom: 1rem;
    perspective: 800px; /* Add 3D perspective to the container */
}



/* Firefox */
.video-gallery-wrapper {
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.scroll-snap-align-start {
    scroll-snap-align: start;
}

/* New keyframe animation for scrolling */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - 1rem));
    }
}

/* New class for the inner scrolling container */
.video-gallery-inner {
    width: calc((20rem + 2rem) * 12);
    animation: scroll 60s linear infinite;
}

@media (min-width: 768px) {
    .video-gallery-inner {
        width: calc((24rem + 2rem) * 12);
    }
}

.video-gallery-inner:hover {
    animation-play-state: paused;
}
a {
    transition: .2s;
}

.btn-lowerbracket {
    width:55%;
    border: 1px solid var(--color-primary);
    border-radius: 25px;
}
.btn-topper {
    
    padding:15px;
    border: 1px solid var(--color-primary);
    border-radius: 25px;
}
a:hover {
    scale: 1.05;
    text-shadow: 0 0 10px var(--color-primary);
}