@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Rubik:ital,wght@0,400;0,500;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Quando&display=swap');

/*────────────────────────────────────────BRAND PALETTE ────────────────────────────────────────*/
:root {
    --primary-bg:       #0D0A1A;   /* Void Nebula */
    --secondary-bg:     #1C1230;   /* Astral Violet */
    --card-bg:          #604C9E;   /* Etherium Purple */
    --body-text:        #E0E0E0;   /* Soft White */
    --heading-text:     #C2A878;   /* Mystic Gold */
    --hover-color:      #2BC4A1;   /* Celestial Teal */
    --button-bg:        #6D98BA;   /* Luminara Blue */
    --alert-color:      #E6723C;   /* Solar Ember */

    --border-color1:      #C2A878;   /* Mystic Gold */
    --border-color2:      #604C9E;   /* Etherium Purple */
    --border-color3:      #E0E0E0;   /* Soft White */

    /* Button Template*/
    --button-1-bg: var(--secondary-bg:);   /* Astral Violet */
    --button-1-color: var(--body-text);    /* Soft White */
    --button-1-border: var(--border-color2) 1px solid; /* Mystic Gold */

    --button-2-bg: var(--secondary-bg);   /* Etherium Purple */
    --button-2-color: var(--body-text);    /* Soft White */
    --button-2-border: var(--border-color1) 1px solid; /* Mystic Gold */
    
    /* Border-radius*/
    --radius-s: 10px;
    --radius-m: 16px;

    --accent:  'Audiowide', serif;
    --heading: 'Quando';
    --subtitle:  'Rubik', sans-serif; 
    --body:  'Roboto';
    --blockquote: 'Playfair Display';
    --log: monospace;
}

  

 /* Main-layout*/
html, body {
    margin: 0;
    padding: 0;
    font-family: var(--body);
    color: var(--body-text);
    background-color: var(--primary-bg);
  }
 /* Hero-Section*/
  .hero {
    height: 100vh;
    background: url('images/background.png') no-repeat center center fixed;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: 2rem;
  }

  .hero .title {
    font-family: var(--accent);
    font-size: 4rem;
    line-height: 1.2;
    color: var(--heading-text);
    margin-bottom: 30px;
  }

  .hero .pitch {
    font-family: var(--subtitle);
    font-size: 2rem;
    line-height: 1.2;
    color: var(--body-text);
  }

  /* Box-styling*/
  .highlight-box {
    background-color: var(--secondary-bg);
    border: var(--button-1-border);
    border-radius: 12px;
    padding: 16px;
    margin-top: 8px;
    margin-bottom: 16px;
    width: auto;
  }

  .highlight-box h1 {
    font-family: var(--heading);
    color: var(--heading-text);
    margin: 0 0 8px 0;
  }

  .highlight-box h3 {
    margin: 0 0 8px 0;
  }

  .highlight-box p {
    margin: 0;
    font-size: 0.95rem;
  }
  /* Section-Title & Subtitle-styling*/

  .section-title {
    text-align: center;
    box-sizing: border-box;
    margin: 0rem 2;
    
  }

  /* Section-1-styling*/
  .section-1 {
    padding: 1rem;
    background-color: var(--primary-bg);
    align-items: center;  
  }

  .section-1 h1 {
    font-family: var(--accent);
    font-size: 2.4rem;
    color: var(--heading-text);
    margin-bottom: 16px;
  }

  .section-1 h2 {
    font-size: 1.5rem;
    margin-top: 0;
  }

  .section-1 h3 {
    font-family: var(--heading);
    font-size: 1.5rem;
    color: var(--heading-text);
  }

  .section-1 p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 12px 0;
  }

  
  .section-1 .description-column {
    display: flex;
    flex-direction: column;;
    align-items: center;
    gap: 2rem;               /* space between text and box */
    flex: 1 1 45%;
    box-sizing: border-box;
  }

  .section-1 .description-column-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;               /* space between text and box */
    flex: 1 1 45%;
    box-sizing: border-box;
  }

  .section-1 .description-row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center; 
    align-items: center;
    gap: 2rem;               /* space between text and box */
    flex: 1 1 45%;
    box-sizing: border-box;
    width: 100%;
  }


  .section-1 .description-text {
    text-align: flex-start ;
    font-family: var(--body);
    color: var(--body-text);
    max-width: 400px;
    width: auto;
  }
  

  .section-1 .description-text p {
    margin: 0;                
    font-size: 1rem;
  }

  .section-1 .highlight-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1 220px;
    max-width: 300px;
    text-align: center;
    background-color: var(--primary-bg);
  }

  .section-1 .highlight-box h1 {
    font-family: var(--heading);
    color: var(--heading-text);
    margin-bottom: 16px;
  }

    /* Section-1 button-style links */
    .section-1 .btn-link {
      display: inline-block;
      margin-top: 12px;
      padding: 0.5rem 1rem;
      background: var(--secondary-bg);
      border: var(--button-1-border);
      border-radius: var(--radius-s);
      color: var(--body-text);
      text-decoration: none;
      font-weight: 500;
      transition: background 0.2s ease;
      bottom: 0.5rem;
    }
  
    .section-1 .btn-link:hover {
      background: var(--heading-text);
    }

  /* Section-2-styling*/
   .section-2 {
    align-items: center;  
    justify-content: center;
    background-color: var(--secondary-bg);
    padding: 1rem 0 0;
  }

  .section-2 h1 {
    font-family: var(--accent);
    font-size: 2.4rem;
    color: var(--heading-text);
    margin-bottom: 16px;
  }

  .section-2 h2 {
    font-size: 1.5rem;
    margin-top: 0;
    box-sizing: border-box;
    padding: 0 1rem;
  }

  .section-2 h3 {
    font-family: var(--heading);
    font-size: 1.5rem;
    color: var(--heading-text);
    text-align: center;
    width: 100%;
  }

  .section-2 h4 {
    font-family: var(--subtitle);
    color: var(--border-color2);
    margin: 1rem 0  0 0;
  }

  .section-2 p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 1rem 0;
  }

  /* Mission + Vision layout */
  .section-2 .description-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1rem ;
    width: 100%;
    padding-bottom: 1rem;
  }

  /* Mission and Vision Row*/
  .section-2 .description-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    box-sizing: border-box;
    
  }

  /* Mission and Vision Box*/
  .section-2 .highlight-box {
    flex: 1 1 350px;
    max-width: 500px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: auto;
    margin: 1rem ;
  }

   /* Feature Cards grid */
   .section-2 .feature-cards {
      display: grid;
      gap: 2rem;
      justify-content: center;
      width: 80%;
      box-sizing: border-box;
      padding: 0 1rem;
        /* four equal columns, each 1/4 of the container (minus gaps) */
        grid-template-columns: repeat(4, 1fr);
      }

      /* at narrower breakpoints, fall back to two columns */
      @media (max-width: 1024px) {
        .section-2 .feature-cards {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      /* single-column on very small screens */
      @media (max-width: 600px) {
        .section-2 .feature-cards {
          grid-template-columns: 1fr;
        }
      }
          
    

  /* From Imagination to Adventure Cards*/
  .section-2 .highlight-box-list {
    flex: 1 1 0; 
    min-width: 160px;   /* won’t shrink below 200px */
    /* max-width: 232px;   /* won’t grow above 232px */
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: var(--button-1-border);
    border-radius: var(--radius-s);
    box-sizing: border-box;
  }


  /* Optional: constrain box width for better alignment */
  .section-2 .highlight-box p {
    text-align: left;
  }
  
  /* Feature Summary spacing */
  .section-2 .highlight-box-end {
    padding: 0 1vw;
    width:auto;
    max-width: 1000px;
    text-align: center;
    border: var(--button-1-border);
    border-radius: var(--radius-s);
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    margin: 0 1rem;
  }

  /* Qoute in Highlight Box */
  .section-2 .highlight-box-quote {
    border: var(--button-2-border);
    text-align: center;
    border-radius: var(--radius-s);
    width: auto;
    padding: 0.2rem 1rem;
    box-sizing: border-box; 
    margin: 0 0.5rem;
    font-family: var(--blockquote);
  }
  .section-2 .highlight-box-quote span {
    display: inline;
  }

  .section-2 .highlight-box-end .highlight-box-quote{
   margin-bottom: 1rem ;
   width: fit-content;
   justify-self: center;
   font-family: var(--blockquote);
  }


  /* Vision Image style (if used) */
  .vision-image {
    width: 100%;
    max-width: 350px;
    border-radius: var(--radius-s);
  }


  

/* Section-3-styling*/
   .section-3 {
    padding: 1rem;
    background-color: var(--primary-bg);
    align-items: center;  
    justify-content: center;
  }

  .section-3 h1 {
    font-family: var(--accent);
    font-size: 2.4rem;
    color: var(--heading-text);
    margin-bottom: 16px;
  }

  .section-3 h2 {
    font-size: 1.5rem;
    margin-top: 0;
  }

  .section-3 h3 {
    font-family: var(--heading);
    font-size: 1.5rem;
    color: var(--heading-text);
  }

  .section-3 p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 12px 0;
  } 
  

  
  .section-3 .description-row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap:5%;
    align-items: space-between;
    justify-content: flex-start;
  }

  .section-3 .description-column {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap:5%;
    align-items: space-between;
    justify-content: flex-start;
    width: fit-content;
    padding: 0 2rem;
    box-sizing: border-box;
    
  }


  .section-3 .highlight-box {
    justify-content: center;
    align-items: center;
    max-width: 400px;
    width: auto;
    height: auto;
    background-color: var(--primary-bg);
    margin: auto;
  }

/* Wanted-Flyer-styling*/
  .flyer {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
    align-items: center;   
    justify-content: center;
    box-sizing: border-box;
  }

  .section-3 a {
    display: inline-block;      /* ensure the link can center itself */
    text-align: center; 
  }
  

  .flyer img {
    width: auto;
    max-width: 75%;
    border-radius: 4px;
    object-fit: cover;
    justify-content: center; 
    align-items: center;   
  }




  /* Footer-styling*/
  .site-footer {
    height: auto;
    font-size: 0.8rem;
    text-align: center;
    bottom: 0;
    left: 0;
    width: 100%;  
    padding: 0.1rem 0;
    background-color: none;
    overflow: visible;
  }

  /* Highlight Box effects */
  /* Depth on all your highlight boxes */
.highlight-box,
.section-2 .highlight-box-list,
.section-2 .highlight-box-end {
  /* soft ambient shadow */
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
  /* smooth transition for shadow (and potential transform) */
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}


/* Pulse-Effect */
.border-pulse {
  border: 1px solid var(--border-color2);
}

.border-pulse:hover {
  border: 1px solid var(--border-color2);
  box-shadow: 0 4px 8px var(--border-color2);
}

.border-pulse:hover h4 {
  color: var(--border-color1);
}

/* Pulse-Effect 
.highlight-box-quote:hover {
  background-color: var(--border-color1);
  color: var(--primary-bg);
}*/