/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #141414;
    height: 100vh;
    width: 100%;
    overflow: hidden; /* Prevents scrollbars from the background shape */
    font-family: 'Rajdhani', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    position: relative;
}

/* Variable Width Background Animation */
.background-shape {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw; /* Start full width */
    height: 100vh;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0%, rgba(20, 20, 20, 1) 70%);
    z-index: 0;
    animation: pulseWidth 8s ease-in-out infinite alternate;
    pointer-events: none; /* Ensures it doesn't block clicks */
}

@keyframes pulseWidth {
    0% {
        width: 80vw;
        opacity: 0.8;
    }
    100% {
        width: 120vw; /* Expands wider than screen */
        opacity: 0.4;
    }
}

/* Main Container */
.container {
    position: relative;
    z-index: 1; /* Ensures content sits above background */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Icon Styling */
.center-icon {
    /* Default size is kept as is from the PNG. 
       Add 'width: 200px;' here if you want to force a specific size. */
    margin-bottom: 2rem;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)); /* Optional subtle depth */
}

/* Text Styling */
.content h1 {
    font-weight: 500; /* Rajdhani Medium */
    font-size: 3rem;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    color: #FFFFFF;
}

.subtitle {
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: 4px;
    text-transform: lowercase; /* Optional: makes "coming soon" look more stylized */
    opacity: 0.8;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .content h1 {
        font-size: 2rem;
    }
    .subtitle {
        font-size: 1rem;
    }
}