/* Define the custom font */
@font-face {
  font-family: 'font_1'; /* Name we'll use in CSS */
  /* --- IMPORTANT --- */
  /* Replace these paths with the actual paths to YOUR font files */
  /* Provide WOFF2 for modern browsers and WOFF as a fallback */
  src: url('Fonts/BrandinkSansLight-MV4mr.otf') format('otf')
  /* Add other formats like ttf if needed, but woff2/woff cover most cases */
  font-weight: normal; /* Or the specific weight you want */
  font-style: normal; /* Or italic, etc. */
  font-display: swap; /* Improves perceived performance */
}

/* Basic Reset & Body Styling */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden; /* Prevent scrollbars */
  font-family: 'font_1', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  color: #f8f9fa; /* Default light text color */
  position: relative; /* Crucial: Needed for absolute positioning of ::before */

  /* --- Base Night Sky Gradient --- */
  /* This gradient will be UNDER the ::before pseudo-element */
  background-color: #0b132b; /* Fallback solid color */
  background-image: radial-gradient(ellipse at center,
      rgba(58, 80, 107, 0.6) 0%, /* Lighter, slightly transparent center */
      rgba(28, 37, 65, 0.8) 60%, /* Mid-tone dark blue/purple */
      #0b132b 100% /* Deep dark blue/black edge */
    );
  /* Ensure background covers the whole area */
  background-size: cover;
  background-attachment: fixed; /* Optional: keeps gradient fixed during scroll */
}

/* Image Overlay using Pseudo-element */
body::before {
  content: ''; /* Required for pseudo-elements to show */
  position: absolute; /* Position relative to the body */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Place it BEHIND the main content, but above the body's background */

  /* --- Background Image --- */
  /* --- IMPORTANT: Adjust this path if your image is located elsewhere! --- */
  background-image: url('img/pexels-photo-1205301.jpeg');
  background-size: cover; /* Scale the image to cover the entire element */
  background-position: center center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */

  /* --- Transparency --- */
  /* Adjust this value between 0 (invisible) and 1 (fully opaque) */
  /* 0.05 to 0.15 should give a "very transparent" effect */
  opacity: 0.1;
}


/* Container - Ensure it's above the pseudo-element */
.container {
  text-align: center;
  position: relative; /* Needed to establish stacking context */
  z-index: 1; /* Ensure container (and its text) is above the ::before */
}

/* Styling the "COMING SOON!" text */
.coming-soon-text {
  font-size: clamp(2.5rem, 8vw, 6rem);
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.1em;
  /* No changes needed here */
}

/* No border / Rounded corners note remains the same */