body {
    font-family: 'Metrophobic', sans-serif;
    background-color: #ffffff;
    color: #000000;
    margin: 0;
    padding: 0;
}

/* Navbar Styles */
.navbar {
    height: 100%;
}

.navbar-light .navbar-nav .nav-link {
    color: #177e89; /* Primary color */
    font-weight: bold;
    text-decoration: underline;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #5c3f86; /* Secondary color */
    text-decoration: none;
}

.nav-active {
    color: #000000 !important; /* Secondary color */
    text-decoration: none !important;
}

.header-text {
    color: #5c3f86;
    text-align: left;
    font-size: 2.5rem; /* Adjust as needed to fill the space */
    line-height: 1.2;
}

.header-text div {
    line-height: 1.2; /* Ensuring each word fits nicely on its own line */
}

.btn-primary {
    background-color: #ff8060;
    border-color: #ff8060;
}

.btn-primary:hover {
    background-color: #e66f50;
    border-color: #e66f50;
}

.btn-secondary {
    background-color: #5c3f86;
    border-color: #5c3f86;
}

.btn-secondary:hover {
    background-color: #644c85;
    border-color: #644c85;
}

.top-buttons {
    position: absolute;
    right: 5px;
    top: 5px;
}

.btn-client-login {
    margin: 7px; /* Adjust margin */
    margin-right: 15px;
}

.btn-lets-chat {
    margin: 7px; /* Adjust margin */
}

/* Section with Background & Image Styles */

.section-custom {
    background-color: #177e89;
    color: #ffffff;
    padding: 20px;
    border-radius: 7px;
}

.section-header {
    font-weight: bold;
    text-transform: uppercase;
}

.section-last-p {
    margin-bottom: 15%;
}

.img-fluid {
    max-width: 100%;
}

.row.align-items-start {
    align-items: flex-start;
}

.section-img-overflow {
    border: solid 2px #177e89;
    border-radius: 7px;
    margin-top: -15%;
    margin-bottom: -15%;
}

a.link-white {
    color: #ffffff;
    text-decoration: underline;
}

a.link-secondary {
    color: #5c3f86;
    text-decoration: underline;    
}

/* No Background Section Styles */
.section-no-bg {
    background-color: transparent;
}

.section-header-no-bg {
    font-weight: bold;
    color: #177e89;
}

.primary-bg-section {
    background-color: rgba(230, 111, 80, 0.2);
    border-radius: 7px;
    padding: 15px;
}

/* List Styles */
.list-custom {
    padding-left: 20px; /* Add padding to align bullets */
}

.list-custom-item {
    border: none; /* Remove outline */
    color: #000000;
    display: list-item;
    list-style-type: disc; /* Round bullet points */
}

.list-custom-item strong {
    font-weight: bold;
    font-size: 1.1rem;
}

/* Bottom Section Styles */
.section-bottom {
    background-color: #177e89;
    color: #ffffff;
    padding: 20px;
    border-radius: 7px;
}

.section-header-bottom {
    font-weight: bold;
    text-transform: uppercase;
    color: #ffffff;
}

.list-bottom {
    color: #ffffff;
    padding-left: 20px;
}

.list-bottom li {
    margin-bottom: 10px;
}

.list-bottom strong {
    font-weight: bold;
    font-size: 1.1rem;
}

/* Card Styles */

.card-header {
    /* background-color: #ff8060; */
    /* color: #ffffff; */
    font-size: 1.4rem;
    font-weight: bold;
}

.card {
    border-radius: 7px;
    /* border-color: #ff8060; */
}

.footer-text-1 {
    color: #ffffff;
    font-size: 1.1rem;
}

.footer-text-2 {
    color: #ffffff;
    font-size: 0.9rem;
}

.social-icons {
    max-width: 25px;
    margin: 3px;
}

.footer-social-links {
    /* This forces the social icons to show verticaly aligned, the media query below will swap then to horizontal by increasing the width */
    max-width: 30px;
}

.emphaize {
    font-weight: bold;
    font-size: 1.05rem;
}

.italic {
    font-style: italic;
}

/* Responsive Styles */
@media (max-width: 768px) {
    header {
        flex-direction: column; /* Stack elements vertically */
    }
    
    .order-1 {
        order: 1; /* Ensure logo and text come after the navbar */
    }
    
    .order-2 {
        order: 2; /* Ensure navbar comes first */
    }

    .top-buttons {
        position: static; /* Remove absolute positioning */
        width: 100%; /* Make buttons full width */
        text-align: center; /* Center align buttons */
    }
    
    .btn-client-login {
        width: 45%; /* Make button full width */
        font-size: 1rem; /* Smaller font size */
        margin: 5px; /* Adjust margin */
    }

    .btn-lets-chat {
        width: 45%; /* Make button full width */
        font-size: 1rem; /* Smaller font size */
        margin: 5px; /* Adjust margin */
    }
    
    .navbar-nav {
        text-align: center; /* Center align menu items */
    }

    .navbar-nav .nav-link {
        font-size: 1.2rem; /* Slightly larger font for mobile */
        margin: 5px 0; /* Add margin for spacing */
    }

    .navbar-toggler {
        align-self: flex-end; /* Align hamburger menu button to the right */
    }

    .section-img-overflow {
        margin-top: 20px;
    }

    .footer-social-links {
        max-width: 100%; /* Make social icons full width */
    }
}