@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    position: relative;
}

* {
    box-sizing: border-box;
}


.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-blue {
    background-image: linear-gradient(135deg, #0073CF 0%, #6eb5ff 50%, #0073CF 100%);
}

.hero-zoom {
    animation: zoomInOut 20s infinite alternate ease-in-out;
}

@keyframes zoomInOut {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* Mobile menu enter/exit animations */
.mobile-menu-enter {
    opacity: 0;
    transform: translateY(-10px);
}
.mobile-menu-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 300ms, transform 300ms;
}
.mobile-menu-exit {
    opacity: 1;
    transform: translateY(0);
}
.mobile-menu-exit-active {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 300ms, transform 300ms;
}

/* Hero Slider Styles */
.hero-slide {
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}
.hero-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10;
    pointer-events: auto;
}
.slider-dot.active {
    background-color: #0073CF !important;
    width: 3rem !important;
}

/* Slide Text Animations */
.hero-slide.active .slide-title {
    animation: slideUpFade 1s forwards 0.3s;
    opacity: 0;
    transform: translateY(30px);
}
.hero-slide.active .slide-desc {
    animation: slideUpFade 1s forwards 0.5s;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes slideUpFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}