body, html {
    
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background-image: url('fullbgd.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;


}

.container {
    text-align: center;
    position: relative;
	width: 700px;

}

/* Blurred Logo Animation */
.logo-blurred {
    width: 680px; 
    height: 180px; 
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 0;
    animation: fade-in-logo 3s ease-in-out forwards; 
}

/* Text Fade-in Animation */
h1 {
    color: #000;
    font-size: 3em; 
    position: relative;
    z-index: 3;
    opacity: 0;
    animation: fade-in-text 2s 3s ease-in-out forwards;
}


@media (max-width: 768px) { 

    body {
        background-image: url('mobilefullbgd.jpg'); 
    }
    
    .logo-blurred {
    width: 90%; 
    height: auto; 
    }

    h1 {
        font-size: 2em; 
    }
}


/* Keyframes for Animations */
@keyframes fade-in-logo {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8); 
    }
    100% {
        opacity: 0.5; 
        transform: translate(-50%, -50%) scale(1); 
    }
}

@keyframes fade-in-text {
    0% {
        opacity: 0;
        transform: translateY(20px); 
    }
    100% {
        opacity: 1;
        transform: translateY(0); 
    }
}