/* Custom CSS for Navigation Link Size and Spacing */
/* Target navigation links specifically on larger screens (md breakpoint and up) */
@media (min-width: 768px) {
        .navbar-nav .nav-link {
          font-size: 1.15rem; /* Increase the font size */
          padding-left: 1.25rem !important; /* Increase space between links */
          padding-right: 1.25rem !important; /* Increase space between links */
          font-weight: 400; /* Make them slightly bolder */
        }
}

/* Optional: Reduce the logo size slightly for better balance */
.navbar-brand img {
  width: 140px; /* Reduced from 165px */
  height: auto; /* Maintain aspect ratio */
}

.body-container {
    background-color: #fffefc;
}

.navbar-toggler {
    background-color: #e8a228;
}

/* Medium Screen Font Size (sm and md breakpoints: 576px up to 992px) */
@media (min-width: 576px) {
    .card-img-overlay .home-header h2 {
        font-size: 1.2rem !important; /* Medium size for tablets/small laptops */
    }
}

/* * Large screen font size (lg breakpoint) to ensure the header text
* is prominently sized when the screen is wide enough.
*/
@media (min-width: 992px) {
    .card-img-overlay .home-header h2 {
        font-size: 1.7rem !important; /* Explicitly large size for desktop */
    }
}

/* Custom css for icons */
.icon-card {
    padding: 1.5rem;
    text-align: center;
}
.icon-card .fa-5x {
    color: #2e261f;
    margin-bottom: 1rem;
}

/* Controls the size of the images in the founder's once screen becomes lg */
@media (min-width: 992px) {
    .founder-page-images {
        width: 380px;
        height: 280px;
    }
}

/* Custom css for buttons */
.btn {
    background-color: #e8a228;
    color: #2e261f;
}
/* takes effect when you hover over the buttons */
.btn:hover {
    background-color: #f7b84a;
    color: whitesmoke;
}

/* css for the footer section */
.footer-section{
    background-color: #2e261f;
}