/* =============================================================
   THE CONTROL PANEL
   These are CSS variables. Every colour and font on the site
   points back to this block. Change a value here, save, and
   watch the whole site update at once.

   TODO (Day 2): Swap these grey placeholders for the palette
   and fonts from your team's Design Brief.
   ============================================================= */
:root {
  --color-background: #81c14b; /* page background */
  --color-primary: #81c14b; /* hero section */
  --color-accent: #ffffff; /* call-to-action section */
  --color-text: #000000; /* body text */

  --font-heading: "Bungee";
  
}

/* === WHOLE PAGE === */
body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);

  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  font-size: larger;
}

h1,
h2 {
  font-family: var(--font-heading);
  transition: transform 0.3s ease-in-out;
}
 h1:hover{
  color: rgb(35, 88, 37);
  transform: scale(1.5);
 }
 
/* Images never overflow their section. */
img {
  max-width: 100%;
  width: 300px;
  padding: 5px;
  margin: 5px;

  margin-top: 20px;
 border-radius: 20px;
 transition: transform 0.3s ease-in-out;
}
img:hover{
  transform: scale(1.1);
  box-shadow:0 4px 8px green (0, 0, 0, 0.4) ;
}

/* === HERO SECTION === */
.hero {
  background-color: var(--color-primary);
  color: #000000;
  text-align: center;
  border-radius: 50px;
}

/* === WHY IT MATTERS SECTION === */
.about {
  background-color: #2e933c;
  text-align: center;
   border-radius: 50px ;
   transition: transform 0.3s ease-in-out;
   margin: 20px;
   padding: 10px;
}

/* === CALL TO ACTION SECTION === */
.cta {
  background-color: #2e933c;
  color: #000000;
  text-align: center;
  border-radius: 50px;

  padding: 50px 40px;
  margin-top: 20px;
}
.cta-button{
  display: inline-block;
  margin-top: 20px;
  padding: 16px 40px;
  background-color: #81c14b;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.cta-button:hover{
  background-color: #ffffff;
  transform:scale(1.05) translateY(-3px);
  box-shadow: 0 8px 25px rgba(162, 239, 180, 0.6);
}

.cta a {
  color: #000000;
  font-weight: bold;
  transition: transform 0.3s ease-in-out;
  }

.cta a:hover{
  transform: scale(1.3);
  box-shadow: 0 4px 8px green (0, 0, 0 ,0.4 );
}

/* =============================================================
   Notice what is NOT here yet: no spacing, no rounded corners,
   no shadows, no layout, no motion. That is the rest of your
   week. Day 3: spacing & decoration. Day 4: layout & motion.
   ============================================================= */