.hero
{
   background: url("https://images.squarespace-cdn.com/content/v1/5d1555cc6ce5d600019bb84b/cbe26eb5-3e09-489a-9d35-f659a042824d/Ghana-Volta-Region") center/cover no-repeat;
   height: 90vh;
   display: flex;
   justify-content: center;
      align-items: center;
}

.tagline
{
   font-size: 50px;
   font-weight: bold;
   text-align: center;
   margin: 0;
}

.hero-focus
{
   font-size: 300px;
   margin: 0;
}

.hero-description
{
   color: white;
   font-size: 20px;
   text-align: center;
   margin: 0;
}

/* ===== Discover Section ===== */
.discover
{
   padding: 100px 60px;
   text-align: center;
   background-color: #fafafa;
}

.discover h2
{
   font-size: 3rem;
   margin-bottom: 15px;
   color: #333;
   font-weight: 700;
}

.section-intro
{
   max-width: 750px;
   margin: 0 auto 60px auto;
   color: #555;
   font-size: 1.3rem;
   line-height: 1.6;
}

.discover-grid
{
   display: flex;
   justify-content: center;
   gap: 40px;
      flex-wrap: wrap;
}

.discover-card
{
   background: #fff;
   border-radius: 16px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
   width: 270px;
   padding: 30px 20px;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   cursor: pointer;
}

.discover-card:hover
{
   transform: translateY(-10px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
   background: #fefefe;
}

.discover-card .icon
{
   font-size: 4rem;
   margin-bottom: 20px;
}

.discover-card h3
{
   font-size: 1.5rem;
   color: #333;
   margin-bottom: 10px;
}

.discover-card p
{
   font-size: 1.05rem;
   color: #555;
   line-height: 1.5;
}

/* ===== About Section ===== */
.about
{
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 100px 60px;
   gap: 30px;
      /* Reduced gap between text and emoji */
   background-color: #595959;
   color: white;
   flex-wrap: wrap;
}

.about-content
{
   flex: 1 1 400px;
}

.about-content h2
{
   font-size: 2.8rem;
   margin-bottom: 15px;
}

.about-content p
{
   font-size: 1.2rem;
   line-height: 1.8;
   margin-bottom: 25px;
}

.about-content .btn
{
   background-color: white;
   color: #595959;
   padding: 12px 28px;
   border-radius: 8px;
   text-decoration: none;
   font-weight: bold;
   transition: background 0.3s ease;
}

.about-content .btn:hover
{
   background-color: #e6e6e6;
}

.about-image
{
   flex: 1 1 400px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.icon-large
{
   font-size: 6rem;
      /* slightly smaller for better spacing */
   }
   
   /* ===== Mobile Responsive ===== */
   @media (max-width: 768px)
   {
      .hero
      {
         height: 70vh;
         flex-direction: column;
         padding: 0 20px;
         text-align: center;
      }
   
      .tagline
      {
         font-size: 28px;
      }
   
      .hero-focus
      {
         font-size: 90px;
         line-height: 1;
      }
   
      .hero-description
      {
         font-size: 15px;
         padding: 0 10px;
      }
   
      .discover
      {
         padding: 60px 20px;
      }
   
      .discover h2
      {
         font-size: 2rem;
      }
   
      .section-intro
      {
         font-size: 1rem;
         margin-bottom: 40px;
      }
   
      .discover-grid
      {
         flex-direction: column;
         align-items: center;
         gap: 25px;
      }
   
      .discover-card
      {
         width: 90%;
         max-width: 320px;
         padding: 25px 15px;
      }
   
      .discover-card .icon
      {
         font-size: 3rem;
      }
   
      .about
      {
         flex-direction: column;
         text-align: center;
         padding: 60px 20px;
         gap: 10px;
      }
   
      .about-content
      {
         padding: 0;
      }
   
      .about-content h2
      {
         font-size: 2rem;
      }
   
      .about-content p
      {
         font-size: 1rem;
         line-height: 1.6;
      }
   
      .icon-large
      {
         font-size: 4.5rem;
         margin-top: 10px;
      }
   
      .about-content .btn
      {
         padding: 10px 22px;
         font-size: 0.9rem;
      }
}