.hero {
     padding: 1rem 1rem;
     text-align: center;
 }

 .hero h1 {
     font-size: 1.5rem;
     margin-bottom: 1rem;
 }

 .hero p {
     font-size: 1rem;
     color: #444;
     max-width: 90%;
     margin: 0 auto 2rem;
 }

 .buttons {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     align-items: center;
 }

 .buttons a {
     text-decoration: none;
     padding: 0.75rem 1.5rem;
     border-radius: 25px;
     font-size: 1rem;
     transition: background 0.3s ease;
     cursor: pointer;
     display: inline-block;
     width: 80%;
     max-width: 250px;
 }

 .start-btn {
     background-color: #2e7d32;
     color: white;
 }

 .start-btn:hover {
     background-color: #1b5e20;
 }

 .how-btn {
     background-color: white;
     border: 2px solid #2e7d32;
     color: #2e7d32;
 }

 .how-btn:hover {
     background-color: #e8f5e9;
 }

 /* Tablet and up */
 @media (min-width: 600px) {
     .hero {
         padding: 2rem 1rem;
     }

     .hero h1 {
         font-size: 2.2rem;
     }

     .hero p {
         font-size: 1rem;
         max-width: 600px;
     }

     .buttons {
         flex-direction: row;
         justify-content: center;
     }

     .buttons a {
         width: auto;
     }
 }

 /* Desktop and up */
 @media (min-width: 1024px) {
     .hero {
         padding: 2rem 1rem;
     }

     .hero h1 {
         font-size: 2.6rem;
     }

     .hero p {
         font-size: 1.2rem;
         max-width: 80%;
     }
 }

 /* Features */
 .features {
     padding: 1rem;
     max-width: 1000px;
     margin: 0 auto;
     text-align: center;
     padding-bottom: 2rem;
 }

 .features h2 {
     font-size: 1.5rem;
     color: #2e7d32;
     margin-bottom: 1rem;
 }

 .features-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 1.5rem;
 }

 .feature-card {
     background: #f7fafc;
     padding: 1.5rem;
     border-radius: 10px;
     cursor: pointer;
     transition: all 0.3s ease;
     border: 2px solid #e2e8f0;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
 }

 .feature-card:hover,
 .feature-card:focus {
     border-color: #189416;
     transform: translateY(-2px);
     box-shadow: 0 10px 20px rgba(102, 126, 234, 0.1);
 }

 .feature-icon {
     font-size: 3rem;
     margin-bottom: 1rem;
 }

 .feature-card h3 {
     color: #2e7d32;
     margin-bottom: 0.75rem;
 }

 .feature-card p {
     color: #444;
     font-size: 1rem;
 }

 a.feature-card {
     text-decoration: none;
     color: inherit;
     display: block;
 }

 .btn {
     margin-top: 1rem;
     padding: 0.5rem 1.2rem;
     background-color: #2e7d32;
     color: white;
     border: none;
     border-radius: 20px;
     cursor: pointer;
     font-weight: 600;
     transition: background-color 0.3s ease;
 }

 .btn:hover {
     background-color: #1b5e20;
 }

 /* Tablet and larger */
 @media (min-width: 600px) {

     .features h2 {
         font-size: 2rem;
         margin-bottom: 1.5rem;
     }

     .features-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 /* Desktop and larger */
 @media (min-width: 900px) {
     .features-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 /* Breathing Exercise */