/* =========================
    HOMEPAGE.CSS (UPDATED)
    ========================= */

  /* 1) BODY / BASIC LAYOUT */
  body {
    background-color: #FFFAEC;
    color: #000;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: myFirstFont; /* Your custom font */
  }

  /* 2) MAIN CONTENT WRAPPER */
  .minimal-homepage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
    justify-content: flex-start; /* Place content near the top */
  }

  /* Give the hero text some top spacing so it sits higher on the page. */
  .hero-text {
    margin-top: 3rem;
  }

  /* 3) LARGE CENTRAL HEADING */
  @font-face {
    font-family: myFirstFont2;
    src: url(/assets/fonts/Now-Thin.otf);
  }

  .hero-text h2 {
    font-size: 8rem;
    font-weight: 100;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    font-family: myFirstFont2;
  }

  /* 4) DESCRIPTION BELOW HEADING */
  .hero-text {
    text-align: center; /* ensures child elements are centered horizontally */
  }

  .hero-text h2 {
    margin-bottom: 1rem; /* spacing below the heading */
  }

  .hero-text p {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 5rem; /* adjust as needed, 15rem was very large */
    color: #333;
    max-width: 800px; /* limits the width for better readability */
    margin-left: auto;
    margin-right: auto;
  }


  /* 5) CTA BUTTON (box style) */
  .hero-text .btn {
    position: relative;
    color: #333;
    text-decoration: none;
    padding: 0;
    margin-top: 1rem;
    font-size: 1.5rem;
    font-weight: 400;
  }

  /* Permanent line underneath (no hover animation) */
  .hero-text .btn::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: #333;
  }


  /* 6) RESPONSIVE ADJUSTMENTS */
  @media (max-width: 768px) {
    .hero-text h2 {
      font-size: 5rem; /* Smaller heading on mobile */
    }
    .hero-text p {
      font-size: 1rem;
    }
  }



  /*********************************************************
    MODAL OVERLAY
    Fade + slight slide animation
  **********************************************************/
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65); /* dark overlay */
    display: none; /* hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* above other elements */
  }

  /* 
    We'll use a “modal-active” class that shows this overlay as flex
    and triggers the fade/slide animation on .modal-content.
  */
  .modal-overlay.modal-active {
    display: flex;
  }

  /* Fade + slide in for the modal content */
  .modal-content {
    background-color: #edf1ec; 
    border: 1px solid #ccc;
    border-radius: 8px;
    width: 80%;
    max-width: 600px;
    padding: 2rem;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    text-align: left;

    /* Start with partial transparency + downward offset */
    opacity: 0;
    transform: translateY(20px);
    animation: showModal 0.4s ease forwards; 
  }

  /* 
    Keyframes: fade in & slide up from 20px
    'forwards' will keep final state.
  */
  @keyframes showModal {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }





  #calle {
    font-size: 13px;
  }


  footer {
    text-align: center;
  }

  footer p {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #6c757d;
    letter-spacing: 0.5px;
    margin: 0;
  }






  /*********************************************************
    MOBILE BREAKPOINT
  **********************************************************/
  @media (max-width: 768px) {
    footer {
      font-size: 0.7rem; /* Slightly smaller text on mobile */
    }

    .footer-container {
      flex-direction: column;  /* Stack center + right sections vertically */
      align-items: center;
      gap: 0.5rem;             /* Less gap between lines */
      text-align: center;      /* Center “Owned by…” text on mobile */

    }

    .right-footer {
      margin-left: 0;
      text-align: center;      /* Center “Owned by…” text on mobile */
    }
  }







  /*********************************************************
    RESPONSIVE TWEAKS
  **********************************************************/
  @media (max-width: 600px) {
    .modal-content {
      width: 90%;
      max-width: 90%;
      padding: 1.5rem;
    }
    .modal-close {
      font-size: 1.8rem;
    }
  }