/* ==========================================================================
   1. Base & Layout
   ========================================================================== */
html, body {
    height: 100%; /* Ensure full viewport height */
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    font-family: 'Frutiger', sans-serif;
}

main {
    flex: 1 0 auto; /* Main content grows to push footer down */
}

footer {
    flex-shrink: 0; /* Footer stays at the bottom */
}

p {
    font-size: 1.125rem; /* Increase from the default size */
    font-weight: 500; /* Make it slightly bolder */
}
h1{
    color:#005EB8;
}
h2{
    color:#005EB8;
}
h3{
    color:#005EB8;
}
h4{
    color:#005EB8;
}
h5{
    color:#005EB8;
}


/* ==========================================================================
   2. Header & Navigation
   ========================================================================== */

/* Header container (if needed) */
.site-header {
    /* Add header-specific styles here */
}

/* Logo size adjustments */
.primary-logo {
    max-height: 135px;
    width: 100%;
    height: 135px;
}

.secondary-logo {
    max-height: 122px;
}

/* Slogan styling */
.slogan {
    /* Customize font size, font-family, etc. */
}

/* Navbar customization */
.nav-custom {
    background-color: #fff;
}

/* Navbar brand & links */
.navbar-brand,
.nav-link {
    line-height: 1.5; /* Consistent vertical alignment */
}

.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link {
    color: #005EB8 !important;
}

    .navbar-light .navbar-brand:hover,
    .navbar-light .navbar-nav .nav-link:hover {
        color: #005EB8 !important;
    }

.nav-link.active {
    color: #005EB8 !important;
    font-weight: bold;
}

.navbar-brand,
.navbar-nav .nav-link {
    font-size: 1.125rem; /* Increase font size as desired */
    font-weight: 600; /* Increase font weight */
}

.navbar-nav .nav-link {
    transition: transform 0.2s ease;
}

    .navbar-nav .nav-link:hover {
        transform: scale(1.1); /* Scale text 10% larger on hover */
    }

@media (min-width: 992px) {
    .navbar-nav.me-auto > .nav-item {
        margin-right: 1.5rem; /* Adjust spacing as needed */
    }
}


/* ==========================================================================
   3. Banner Section
   ========================================================================== */
.banner-section {
    position: relative;
    width: 100%;
    height: 500px; /* Desktop banner height; adjust as needed */
    overflow: hidden;
    margin-bottom: 1rem;
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; /* Now the image is centered both horizontally and vertically */
    display: block;
}

.banner-overlay {
    position: absolute;
    top: 60%; /* Adjust vertical placement as needed */
    left: 0; /* Start at the very left edge */
    padding: 1.5rem 2rem; /* Increased padding */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
    font-size: 1.4rem; /* Increased font size */
    max-width: 60%;
    /* Background and text color can be set inline or with additional classes */
}

/* Mobile adjustments for banner */
@media (max-width: 768px) {
    .banner-section {
        height: 150px; /* Smaller banner height on mobile */
    }

    .banner-overlay {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }
}

/* ==========================================================================
   4. Social Icons
   ========================================================================== */
.social-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    transition: filter 0.2s ease-in-out;
    text-decoration: none; /* Remove underline from links */
}

    .social-icon-link:hover {
        filter: brightness(1.2);
    }

    .social-icon-link img {
        height: 20px;
        transition: transform 0.2s ease-in-out;
    }

    .social-icon-link:hover img {
        transform: scale(1.15);
    }


.custom-social-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    transition: filter 0.2s ease-in-out;
    text-decoration: none; /* Remove underline from links */
}

    .custom-social-icon-link:hover {
        filter: brightness(1.2);
    }

    .custom-social-icon-link img {
        height: 50px;
        transition: transform 0.2s ease-in-out;
    }

    .custom-social-icon-link:hover img {
        transform: scale(1.15);
    }

.custom-social-links-ul {
    width: fit-content; /* Shrink-wrap the UL to its contents */
    margin: 0 auto; /* Center the UL */
    text-align: center; /* Center any inline content, if needed */
    list-style: none; /* Remove bullet points */
    padding: 0;
}

/* ==========================================================================
   4. header buttons
   ========================================================================== */

.button-link {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    padding: 15px;
    height: 40px;
    transition: filter 0.2s ease-in-out;
    text-decoration: none; /* Remove underline from links */
    color: #fff;
    font-size: 1rem;
}

    .button-link:hover {
        filter: brightness(1.2);
    }

    .button-link img {
        height: 30px;
        padding-left: 0px;
        padding-right: 5px;
        transition: transform 0.2s ease-in-out;
    }

    .button-link:hover img {
        transform: scale(1.15);
    }


/* ==========================================================================
   5. Footer
   ========================================================================== */
.site-footer {
    background-color: #005EB8;
    color: #fff;
    padding: 1rem 0;
    margin-top: 3rem;
}

.footer-link {
    text-decoration: none;
    color: #fff;
    transition: color 0.2s ease-in-out;
}

    .footer-link:hover {
        text-decoration: underline;
        color: #fff;
    }

.footer-copy p {
    margin: 0;
    font-size: 0.9rem;
}

/* ==========================================================================
   6. Card Block
   ========================================================================== */
.card-block {
    border-radius: 1rem; /* Rounded corners */
    padding: 1.5rem;
    text-align: center;
    width: 100%;
    max-width: 300px; /* Limit card width */
    margin: 1rem auto; /* Center horizontally */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    text-decoration: none; /* Remove underline */
    transition: filter 0.2s ease-in-out;
}

    .card-block:hover,
    .card-block:focus,
    .card-block:active {
        filter: brightness(1.1); /* Lighten on hover */
        text-decoration: none;
    }

    .card-block .card-icon {
        margin-bottom: 1rem;
    }

        .card-block .card-icon img {
            width: 80px;
            height: 80px;
            object-fit: contain;
        }

    .card-block h3 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    .card-block p {
        font-size: 1rem;
        margin-bottom: 0;
    }

/* ==========================================================================
   7. Additional Responsive or Custom Styling
   ========================================================================== */
/* Add any extra responsive tweaks or custom styles below */

.image-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; /* Centers vertically */
    justify-content: center; /* Centers horizontally */
    overflow: hidden;
}

.banner-image {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}