* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: montserrat;
}

body {
    color: white;
}

/* Responsive font sizes */
h1 {
    font-size: 2.5rem; /* Adjust font size */
    margin-bottom: 10px;
    font-weight: 400;
}

p {
    font-size: 1rem; /* Adjust font size */
}

/* Landing Section */
.landing-section {
    position: relative;
    width: 100%;
    height: 500px;
    background-image: url('image/byT_L0aSLQxJAGuo2EPcB.jpg');
    background-size: cover;
    background-position: center;
}

/* Overlay for landing section */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 10, 14, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; /* Center text for smaller screens */
}

/* Play Section */
.Play_section {
    position: relative;
    width: 100%;
    background-image: url('image/aurora-background.77ca5e0ff46d050807e8d907d1b774f8.png');
    background-size: cover;
    background-position: center;
}

.Play_section img {
    width: 100%;
    height: auto; /* Ensure images are responsive */
}

/* Overlay Container */
.overlay-container {
    position: relative;
}

.overlay-container .bg-image {
    background-image: url('image/byT_L0aSLQxJAGuo2EPcB.jpg');
    background-size: cover;
    background-position: center;
    height: 100%;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.overlay-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.789);
    z-index: 2;
}

.overlay-container .content {
    position: relative;
    z-index: 3;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 20px; /* Add padding for smaller screens */
    text-align: center; /* Center text for smaller screens */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .landing-section {
        height: 300px; /* Adjust height for smaller screens */
    }

    h1 {
        font-size: 1.5rem; /* Adjust font size */
    }

    p {
        font-size: 0.875rem; /* Adjust font size */
    }

    .Play_section {
        padding: 15px; /* Add padding for smaller screens */
    }

    .Play_section img {
        height: auto; /* Ensure image is responsive */
    }

    .overlay-container .content {
        padding: 10px; /* Add padding for smaller screens */
    }
}

@media (max-width: 576px) {
    .landing-section {
        height: 200px; /* Adjust height for very small screens */
    }

    h1 {
        font-size: 1.25rem; /* Adjust font size */
    }

    p {
        font-size: 0.75rem; /* Adjust font size */
    }
}

.background-image {
    position: relative;
    background-image: url('image/DDgBfvuBe_lUU-lXnlpI9.jpg'); /* Replace with your image URL */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10% 0%;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay with opacity */
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-center {
    color: white;
    text-align: center;
    z-index: 1; /* Ensure text is above the overlay */
}



@media (max-width: 576px) {
    .background-image {
    
    padding: 36% 0%;
}
}