.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;
   position: relative;
   display: flex;
      justify-content: center;
      align-items: center;
}

.tagline
{
   font-size: 50px;
   font-weight: bold;
   font-family: "PP Neue Montreal", sans-serif;
   text-align: center;
   margin: 0;
   padding-top: 0;
   padding-bottom: 0;
}

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

.hero-description
{
   margin-top: 0;
   margin-bottom: 0;
   color: white;
   font-size: 20px;
   text-align: center;
}
/* ===== 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: 50px;
   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: 8rem;
}