/* General Styling */
html, body {
    height: 100%; /* Ensures full height */
    margin: 0;    /* Removes default margins */
    padding: 0;   /* Removes default padding */
    overflow-x: hidden; /* Prevents horizontal scrolling */
    font-family: 'Arial', sans-serif;
    background-color: #121212; /* Dark background */
    color: #fff;  /* Default text color */
}

/* Landing Page Container */
.landing {
    min-height: 100vh; /* Ensures the landing page fills the screen */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Prevents content overflow */
}

/* Box Container for Intro Section */
.landing-box {
    background: linear-gradient(to bottom right, rgba(30, 30, 30, 0.8), rgba(0, 0, 0, 0.6));
    border-radius: 15px;  /* Rounded corners */
    padding: 40px 30px;
    text-align: center;
    max-width: 700px;
    margin: 80px auto; /* Centers the box horizontally */
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 255, 255, 0.7); /* Soft shadow + slight glow */
    border: 2px solid rgba(0, 255, 255, 0.3); /* Soft cyan border */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
}


/* Hover effect to make the box pop */
.landing-box:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(138, 43, 226, 0.8); /* Change glow to purple */
    border: 2px solid rgba(138, 43, 226, 0.6); /* Change border to purple */
}

/* Title */
.landing-box h1 {
    font-size: 3rem;
    color: #1e90ff; /* Soft blue color for title */
    margin-bottom: 15px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* Description text */
.landing-box p {
    font-size: 1.25rem;
    color: #d3d3d3; /* Light gray for text */
    line-height: 1.6;
    margin-bottom: 20px;
    font-family: 'Arial', sans-serif;
}

/* Button */
.explore-btn {
    background-color: #1e90ff; /* Button color */
    color: white;
    text-decoration: none;
    font-size: 1.25rem;
    padding: 15px 30px;
    border-radius: 30px;  /* Rounded button edges */
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Button Hover Effect */
.explore-btn:hover {
    background-color: #004d8b;
    transform: translateY(-3px); /* Slightly moves up */
}

/* Button Focus for accessibility */
.explore-btn:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Apply the font to the entire page (optional) */
body {
    font-family: 'Playfair Display', serif; /* Apply the font to the body */
    background-color: #121212; /* Dark background */
    color: #fff; /* White text for readability */
}

/* Style for the main header text (h1) */
.landing-box h1 {
    font-family: 'Playfair Display', serif; /* Use the new font */
    font-size: 3rem; /* Adjust size as needed */
    font-weight: 700; /* Bold text */
    color: #fff; /* White text */
    text-transform: uppercase; /* Optional: makes the text all uppercase */
    letter-spacing: 3px; /* Adds spacing between letters */
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.6), 0 0 20px rgba(0, 255, 255, 0.4); /* Cyan glow effect for the text */
    margin-bottom: 20px; /* Space below the header */
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Hover effect to change text color and glow to purple */
.landing-box h1:hover {
    color: #9b4dca; /* Change text color to purple */
    text-shadow: 0 0 10px rgba(138, 43, 226, 0.8), 0 0 20px rgba(138, 43, 226, 0.6); /* Purple glow effect */
}