/* File: css/style.css */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Righteous&display=swap');

:root {
  /* Clean Light Theme */
  --clr-bg: #ffffff;
  --clr-surface: #f4f6f9; /* Very soft matte gray/blue for the second row */
  --clr-card: #ffffff;
  --clr-border: #e1e4e8;
  
  /* Matte Brand Colors */
  --clr-blue: #5a8dee;
  --clr-green: #5ba370;
  --clr-purple: #8c6bba;
  
  /* Text */
  --clr-text: #333333;
  --clr-text-inverse: #ffffff;
  
  /* Fonts */
  --font-heading: 'Righteous', cursive;
  --font-body: 'DM Sans', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-body);
  min-height: 200vh; 
 
}

/* css/style.css (Add to the bottom of the file) */

/* ==========================================
   HERO SECTION STYLES
   ========================================== */
.hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 5%; /* Good breathing room on all sides */
    min-height: 70vh; /* Fills a nice portion of the screen */
    background-color: var(--clr-bg);
}

.hero-image {
    width: 100%; /* CRITICAL FIX: Forces image to shrink on small mobile screens */
    max-width: 280px; /* Stops it from getting too massive on desktop */
    aspect-ratio: 1 / 1; /* Forces a perfect square so border-radius makes a perfect circle */
    object-fit: cover; /* Ensures the photo crops nicely inside the circle without stretching */
    border-radius: 50%; /* Makes it a circle */
    border: 6px solid var(--clr-surface);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1); /* Soft modern drop shadow */
    margin-bottom: 2rem;
}

.hero-text {
    font-family: var(--font-heading); /* Uses your bold Righteous font */
    font-size: 2.5rem; /* Big, impactful size */
    background: linear-gradient(90deg, var(--clr-blue), var(--clr-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    max-width: 700px;
    line-height: 1.3;
    margin: 0;
}

/* Mobile Adjustments for the Text */
@media (max-width: 600px) {
    .hero-text {
        font-size: 1.8rem; /* Scales text down slightly for phones */
    }
}