<section class="personal-goals">
        <h2>My Zero-Waste Goals</h2>
        <hr>
        <p>As a student just starting my zero-waste journey, I'm exploring ways to reduce my environmental impact and
            develop sustainable habits.</p>

        
        <article class="goals-grid">
            <section class="goal-card">
               
                <header class="goal-header">
                    <span class="goal-icon">🥤</span> <!-- Icon inside span for potential specific styling -->
                    <h3 class="goal-title">Eliminate Single-Use Plastics</h3>
                    
                </header>
                
                <p class="goal-description">Commit to reducing plastic waste by avoiding single-use items. Opt for
                    biodegradable or compostable alternatives for straws, utensils, and packaging.</p>
                <footer class="progress-container">
                    <!-- Replaced div.progress-bar and div.progress-fill with native progress element -->
                    <progress class="progress-bar" value="50" max="100"></progress>
                    <span class="progress-text">50% Complete</span>
                </footer>
            </section>

            <!-- Second card-->
            <section class="goal-card">
                <header class="goal-header">
                    <span class="goal-icon">📦</span>
                    <h3 class="goal-title">Use Reusable Containers</h3>
                </header>
                <p class="goal-description">Embrace sustainability by using glass or stainless steel containers for food
                    storage and transport. This reduces reliance on disposable packaging and promotes a zero-waste
                    lifestyle.</p>
                <footer class="progress-container">
                    <progress class="progress-bar" value="30" max="100"></progress>
                    <span class="progress-text">30% Complete</span>
                </footer>
            </section>

        </article>
    </section>

    <section class="challenges-section">
        <h2>Challenges & Solutions</h2>
        <p>Every journey toward sustainability comes with obstacles. Here are the main challenges I face as a student
            pursuing zero-waste living, along with practical solutions I've developed to overcome them.</p>

        <div class="challenges-grid">
            <div class="challenge-card">
                <div class="challenge-header">
                    <div class="challenge-icon">💰</div>
                    <div class="challenge-title">Budget Constraints</div>
                </div>
                <div class="challenge-problem">As a student, initial costs for reusable items like good water bottles
                    can be expensive.</div>
                <div class="challenge-solution">
                    <strong>Solution:</strong> I can start small with one item at a time and consider it a long-term
                    investment that saves money.
                </div>
            </div>

            <div class="challenge-card">
                <div class="challenge-header">
                    <div class="challenge-icon">⏰</div>
                    <div class="challenge-title">Convenience vs Sustainability</div>
                </div>
                <div class="challenge-problem">Busy study schedules make it tempting to choose convenient disposable
                    options, especially during exam periods.</div>
                <div class="challenge-solution">
                    <strong>Solution:</strong> Prepare reusable items in advance, set reminders, and make sustainable
                    choices as easy as possible by keeping items accessible.
                </div>
            </div>
        </div>
    </section>
    
css:

/* Goals Grid*/
.goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}
.goal-card {
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.07);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column; 
  align-items: center;
  min-height: 280px; 
}

.goal-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 8px 25px rgba(76, 175, 80, 0.15);
}

/* The :active state remains, though consider the usability implications */
.goal-card:active {
  transform: translateY(-2px) scale(0.98);
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
  transition: transform 0.1s, box-shadow 0.1s;
}

/* New: Style for the goal-header (<header>) */
.goal-header {
  display: flex; /* Use flex to align icon and title */
  flex-direction: column; /* Stack icon and title vertically */
  align-items: center;
  margin-bottom: 1rem;
}

/* .goal-icon is now a <span> inside the header, class selector still works */
.goal-icon {
  font-size: 3rem;
  /* margin-bottom is handled by the header's flex gap or direct margin if needed */
}

/* .goal-title is now an <h3>, class selector still works */
.goal-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #256029;
  margin-top: 0.5rem; /* Add some space between icon and title */
  margin-bottom: 0; /* Remove bottom margin if handled by header or next element */
}

/* .goal-description is now a <p>, class selector still works */
.goal-description {
  font-size: 1.1rem;
  color: #222;
  line-height: 1.5;
  text-align: center;
  flex-grow: 1; /* Makes the description take up available space */
  margin-bottom: 1.5rem;
}

/* .progress-container is now a <footer>, class selector still works */
.progress-container {
  width: 100%;
  margin-top: auto; /* Pushes container to the bottom when using flex-column on parent */
}

/* Styling the native <progress> element */
.progress-bar {
  /* Basic progress style */
  -webkit-appearance: none; /* Remove default webkit styles */
  -moz-appearance: none; /* Remove default gecko styles */
  appearance: none; /* Remove default styles */
  border: none; /* Remove default border */
  border-radius: 10px;
  height: 10px;
  width: 100%;
  margin-bottom: 0.5rem;
  overflow: hidden; /* Ensure fill stays within bounds */
  background: #e0e0e0; /* Fallback/track color */
}


/* .progress-text is still a <span>, class selector still works */
.progress-text {
  font-size: 1rem; /* Slightly smaller might look better */
  font-weight: bold; /* Added weight for emphasis */
  color: #256029; /* Theme color */
}

/* Challenges Grid*/
.challenges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.challenge-card {
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.07);
  padding: 1.5rem;
  transition: transform 0.3s ease;
}

.challenge-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(76, 175, 80, 0.15);
}

.challenge-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.2rem;
}

.challenge-icon {
  font-size: 2.5rem;
  margin-right: 1rem;
}

.challenge-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: #256029;
}

.challenge-problem {
  font-size: 1.1rem;
  color: #222;
  line-height: 1.5;
  margin-bottom: 1.2rem;
  padding: 1.2rem;
  background: #fff5f5;
  border-radius: 8px;
  border: 4px solid #ff6b6b;
}

.challenge-solution {
  font-size: 1.1rem;
  color: #222;
  line-height: 1.5;
  padding: 1.2rem;
  background: #f1f8e9;
  border-radius: 8px;
  border: 4px solid #8bc34a;
}

.challenge-solution strong {
  color: #256029;
}

can you simplify the code by using fewer tags and simpler tags and only keep minimal comments