@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');


:root {
    --gradient: linear-gradient(45deg, var(--mud-palette-primary), var(--mud-palette-secondary));
   }

* {
    transition: 0.3s linear;
    font-family: 'Montserrat', sans-serif;
    scroll-behavior:smooth !important;
}


html, body {
    overflow-x: hidden;
    scroll-behavior: smooth !important;
}


.gradient {
    background: linear-gradient(45deg, var(--mud-palette-primary), var(--mud-palette-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;    
}

.gradient-animate {
    background: linear-gradient(45deg, var(--mud-palette-primary), var(--mud-palette-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient 3s linear infinite;
    background-size: 300% 300%;
   
}


.mud-card-media {
    background-color: var(--mud-palette-surface);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover !important;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}



.cursor{
    animation: cursor 1s linear infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes cursor{
    0% {
        opacity:0%;
    }

    50%{
        opacity: 100%;
    }

    100%{
        opacity:0%;
    }
}

.cursive {
    font-family: 'Great Vibes', cursive !important;
    font-size:2rem;
}

.glass {
    background: #ffffff10;
    box-shadow: -1px -1px 2px 0 var(--mud-palette-primary), 1px 1px 2px 0 var(--mud-palette-secondary) !important;
    backdrop-filter: blur( 20.0px );
    -webkit-backdrop-filter: blur( 20.0px );
    border-radius: 15px;
    border: 1px var(--mud-palette-primary);
    transition:0.2s ease-in-out 
  
}

.neon-outline {
    box-shadow: -2px -2px 2px 0 var(--mud-palette-primary), 2px 2px 2px 0 var(--mud-palette-secondary) !important;
}







.code {
    font-family: 'Source Code Pro', monospace;
}

.splash-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.splash-screen-image {
    max-width: 100%;
}

.fullscreen-font {
    font-size: clamp(5rem, 10vw, 10rem);
    text-align: center;
    opacity: 50%;
}

/* Fade-up page transition */
.page-fade-enter {
    opacity: 0;
    transform: translateY(20px);
}

.page-fade-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.page-fade-exit {
    opacity: 1;
    transform: translateY(0);
}

.page-fade-exit-active {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.stay-tuned-section {
    /* Random background image */
    background-image: url('/Images/rocket-bg.jpg'); /* replace with your random image path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 60vh; /* adjust height as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: white;
}

    /* Overlay to darken image for text readability */
    .stay-tuned-section .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5); /* semi-transparent black overlay */
        z-index: 1;
        color: white;
    }

    /* Content above overlay */
    .stay-tuned-section .content {
        position: relative;
        z-index: 2;
    }