html {
      scroll-behavior: smooth;
  }
  
  body {
      font-family: "Poppins", sans-serif;
      position: relative;
  }
  
  body::before {
      content: "";
      position: fixed;
      inset: 0;
      background-image: url('/images/municipal-logo.jpg');
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      opacity: 0.2;
      z-index: -1;
  }
  
  #moreText {
      transition: all 0.3s ease;
  }
  
  header {
      position: sticky;
      top: 0;
      z-index: 999;
      background: white;
  }
  
  .hero {
      background-image: url('/images/background.jpg');
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      height: 85vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
  }
  
  .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 40, 80, 0.65);
  }
  
  .hero-content {
      position: relative;
      z-index: 2;
      color: white;
      text-align: center;
      max-width: 700px;
  }
  
  .hero-content h1 {
      font-size: 3rem;
      font-weight: 700;
  }
  
  .hero-content p {
      font-size: 1.25rem;
  }
  
  .section-title {
      text-align: center;
      font-weight: 700;
      margin-bottom: 30px;
  }
  
  .program-card {
      border-radius: 15px;
      background: white;
      padding: 20px;
      border-left: 5px solid #0d6efd;
      transition: .3s;
      text-align: center;
  }
  
  .program-card:hover {
      transform: scale(1.02);
  }
  
  .program-card img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      border-radius: 12px;
      margin-bottom: 15px;
  }
  
  .role-card {
      border-radius: 18px;
      padding: 25px;
      text-align: center;
      background: white;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
      transition: .3s;
  }
  
  .role-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
  }
  
  .role-icon {
      width: 70px;
      height: 70px;
      margin-bottom: 15px;
      object-fit: cover;
      border-radius: 50%;
  }
  
  .contact-footer {
      background-color: #e9e9e9;
      padding: 50px 0px;
  }
  
  .icon-circle {
      width: 70px;
      height: 70px;
      background-color: #27b7c4;
      color: #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .footer-bottom-bar {
      height: 70px;
      background-color: #27b7c4;
  }
  
  .contact {
      width: 500px;
  }
  
  @media (max-width: 600px) {
      .contact-footer .row {
          flex-direction: row;
          gap: 2px;
          margin: 0 10px 0 10px;
      }
      .contact-footer .col-md-3 {
          width: 100%;
          max-width: 100px;
      }
      .contact-footer .icon-circle {
          margin-bottom: 10px;
      }
      .contact-footer h6 {
          font-size: 14px;
      }
      .contact-footer p {
          font-size: 13px;
      }
  }