#yellow-underline {
    display: inline-block;
    position: relative;
    color:white;
}
#yellow-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px; /* Adjust the thickness here */
    background-color:  #ffc107; /* Change to desired underline color */
}
#yellow-underlinetwo {
    display: inline-block;
    position: relative;
}
#yellow-underlinetwo::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px; /* Adjust the thickness here */
    background-color:  #ffc107; /* Change to desired underline color */
}
.yellow-underline{
   color:black;
}
.moafooter{
   background:white;
}
#soicalmediaicon{
    color:#ffc107;
}
#moa-map{
    margin-top:0px;
    color:black;
}
#yellow-underlinetwo{
    text-align:center;
    margin-top:10px;
}
#carouselExample{
    width:2px;
    height:250px;
    background-color:whitesmoke;
}
#moa_mapcolor{
    width:255px;
    height:190px;
    background-color:whitesmoke;
}
#figcaption{
   color:black;
}
#egafooterid{
   background-color:whitesmoke;
}
/* General Footer Styling */
   .wave-footer {
       background-color: #025928;
       color: #fff;
       position: relative;
       height:auto;
       margin-top: 0 !important; /* Ensure there's no margin at the top */
   }
   
   /* Footer Content (4 Columns) */
   .footer-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 4 columns, adjust this as needed */
    gap: 4px;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 40px;
    overflow: auto; /* Prevent clipping */
   }
   
   /* Individual Columns */
   .footer-column h3 {
       font-size: 20px;
       margin-bottom: 15px;
       color: #fff;
       height: auto; 
   }
   
   .footer-column p, .footer-column ul {
       font-size: 14px;
       color: #bbb;
   }
   
   .footer-column ul {
       list-style-type: none;
       padding: 0;
   }
   
   .footer-column ul li {
       margin-bottom: 10px;
   }
   
   .footer-column ul li a {
       color: #fff;
       text-decoration: none;
       transition: color 0.3s ease;
   }
   
   .footer-column ul li a:hover {
       color: #3498db;
   }
   
   /* Vertical Lines between Columns */
   .footer-column:not(:last-child) {
       border-right: 1px solid #bbb;
       padding-right: 40px;
   }
   
   /* Social Links Styling */
   .social-links {
       list-style: none;
       padding: 0;
       margin: 0;
       display: flex;
       gap: 15px;
   }
   
   .social-links li a {
       color: #fff;
       text-decoration: none;
       font-size: 18px;
       transition: color 0.3s ease;
   }
   
   .social-links li a:hover {
       color: #3498db;
   }
   
   /* SVG Wave Styling */
   /* Ensuring footer content appears above the wave */
.moafooter {
    position: relative;
    z-index: 10; /* Make sure it's above the SVG */
    text-align: center;
    padding: 20px 0; /* You can adjust padding as needed */
}

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    overflow: hidden;
    margin-top: -30px;
    z-index: 1; /* Keep the wave at the bottom */
}
   
   .wave svg {
       width: 100%;
       height: 100%;
       display: block;
       position: absolute;
       bottom: 0;
       left: 0;
   }
   /* Style for the agenda image to have a white background */
   .agenda-image img {
    max-width: 200px;  /* Set the desired width */
    height: auto;      /* Maintain the aspect ratio */
    background-color: whitesmoke;
}

/* Style for the footer to ensure it's green */
/* Adjust for mobile */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr; /* Stack the columns on small screens */
        gap: 20px;  /* Increase gap between stacked items */
        padding: 20px 0;  /* Padding around the content */
    }

    .footer-column h3 {
        font-size: 18px;  /* Slightly smaller font size for mobile */
    }

    .footer-column p, .footer-column ul {
        font-size: 14px;  /* Adjust text size for readability */
    }

    .footer-column ul {
        padding-left: 20px;  /* Add left padding for better spacing on mobile */
    }

    .social-menu {
        text-align: center;  /* Center social media icons on mobile */
    }

    .agenda-image img {
        max-width: 100%;  /* Ensure image fits the screen */
        margin-top: 20px; /* Adjust margin on mobile */
    }
}