/* Basic Reset and Setup */
body, html {
    margin: 0;
    padding: 0;
    height: 100%; /* Important for full-page background */
    font-family: Arial, sans-serif;
    color: #fff; /* White text for contrast */
}

/* Background Map Styling */
.container {
    height: 100vh; /* Viewport height for full screen */
    width: 100%;
    
    /* 1. Map Image Settings (Replace 'map-background.jpg' with your map image file) */
    background-image: url('mm.png'); 
    background-position: center; /* Center the image */
    background-repeat: no-repeat;
    background-size: cover; /* **Crucial for responsiveness:** Ensures the image covers the entire container */
    
    /* 2. Optional: Add a dark overlay for better text contrast */

    background-blend-mode: multiply; /* Blends the map image with the dark color */
    
    /* 3. Center content using Flexbox */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* Logo and Text Area Styling */
.logo-area {
    text-align: center;
    padding: 20px;
    
    border-radius: 10px;
}

/* Logo Image Styling */
.logo {
    max-width: 600px; /* Maximum width for the logo */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 15px;
    display: block; /* Important for margin/centering */
    margin-left: auto;
    margin-right: auto;
}
 @font-face {
  font-family: myFont; /* set name */
  src: url(Mont-ExtraLightDEMO.otf); /* url of the font */
}
/* Coming Soon Text Styling */
h1 {
    font-size: 2.8em;
    
    letter-spacing: 5px;
    font-weight: bold;
    color:#44A4AF;font-family: myFont;margin-left: 160px;
   /* Adds definition to the text */
}
@media (max-width: 600px) {
    
   
  h1 {
    font-size: 2.8em;
    margin: 0;
    letter-spacing: 5px;
    font-weight: bold;
    color:#44A4AF;font-family: myFont;
    margin-left: 0px;
   /* Adds definition to the text */
}
}
/* Media Query for Mobile Responsiveness */
@media (max-width: 600px) {
    .logo {
        max-width: 300px; /* Smaller logo on small screens */
    }
    h1 {
        font-size: 1.5em; /* Smaller text on small screens */
        letter-spacing: 3px;
    }
}