/* General Styles */


body {
    font-family: 'Axiforma', sans-serif;
    background-color: #153B6C;
    color: white;
    margin: 0;
    padding: 0;
    position: relative;
    padding-top: 0px; /* Adjust if necessary */
    scroll-behavior: smooth; /* Ensure smooth scrolling */
}
section {
    scroll-margin-top: 100px; /* Match navbar height */
}
.navbar {
    padding: 10px 15px;
}

.navbar .nav-link {
    font-size: 16px;
    color: white;
    margin-left: 15px;
    text-decoration: none;
}

.navbar .nav-link:hover {
    text-decoration: underline;
}



.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

    .hero-section h1 {
        font-size: 3rem;
        line-height: 1.2;
    }

    .hero-section .highlight {
        border-bottom: 4px solid #f69020;
    }

    .hero-section .btn-primary {
        background-color: white;
        color: #153B6C;
        padding: 10px 20px;
        border-radius: 5px;
    }

    .hero-section .btn-outline-light {
        border: 2px solid white;
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
    }

.row .img-fluid {
    border-radius: 8px;
    transition: transform 0.3s ease;
}

    .row .img-fluid:hover {
        transform: scale(1.05);
    }
/* About Section Styles */
/* About Section Styles */
.about-section {
    background: linear-gradient(to bottom, #4c6186, #133b6c);
    padding: 40px 0;
    text-align: center;
    color: white;
}

.about-section h2 {
    font-size: 2.5rem;
    font-family: 'Axiforma', sans-serif;
    margin-bottom: 20px;
    display: inline-block;
}

.about-section .highlighted-text {
    position: relative;
    color: white;
    font-weight: bold;
}

.about-section .highlighted-text::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #e8953d, #ffe627);
    border-radius: 2px;
}

.about-section .icon img {
    width: 60px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.about-section p {
    font-size: 1.2rem;
    margin: 10px auto;
    max-width: 700px;
}

.about-section p.fw-bold {
    font-weight: bold;
    margin-top: 20px;
}

.icon .fa-handshake {
    color: white;
    font-size: 3rem;
}
/* Separator Line Between Sections */
div[style="border-top: 1px solid white; margin: 0; padding: 0;"] {
    height: 1px;
    background: white;
    margin: 0;
}

/* Recruitment Section Styles */
.recruitment-section {
    background: #133b6c;
    padding: 40px 0;
    text-align: center;
    color: white;
}

    .recruitment-section .icon i {
        color: white;
        font-size: 2.5rem;
    }

    .recruitment-section p {
        font-size: 1.1rem;
        margin: 10px auto;
        max-width: 800px;
        line-height: 1.6;
    }

    .recruitment-section h3 {
        font-size: 1.5rem;
        margin-top: 20px;
        line-height: 1.4;
        color: #f69020;
    }

    .recruitment-section .btn {
        padding: 10px 20px;
        font-size: 1.1rem;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }

    .recruitment-section .btn:hover {
        background-color: #d9781d;
    }

    .recruitment-section ul {
        list-style-type: none; /* Hides the bullet points */
        padding: 0; /* Removes default padding */
        margin: 0 auto; /* Centers the <ul> horizontally */
        text-align: center; /* Centers the text */
        max-width: 100%; /* Adjusts the width of the <ul> to fit its contents */
    }

    .recruitment-section ul li {
        display: inline-block; /* Places list items in a line */
        width: 100%; /* Each item takes full width to center align individually */
        text-align: center; /* Ensures text is centered within each item */
    }
    

/* Competitive Pricing Section */
#competitive-pricing {
    background-color: #ffffff;
    padding: 40px 0;
}

    #competitive-pricing .container {
        background-color: #f9f5f2;
        border-radius: 15px;
        padding: 40px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }



    #competitive-pricing h2 {
        font-family: 'Axiforma', sans-serif;
        font-weight: bold;
        font-size: 2rem;
        position: relative;
        display: inline-block;
        margin-bottom: 20px;
        color: #000; /* Ensure text is black or intended color */
    }

        #competitive-pricing h2::after {
            content: '';
            position: absolute;
            bottom: -5px; /* Adjust as needed for spacing */
            left: 0;
            width: 100%; /* Matches full width of the text */
            height: 4px; /* Thickness of underline */
            background: linear-gradient(to right, #e8953d, #ffe627); /* Gradient color */
            border-radius: 2px; /* Rounded underline */
        }

    #competitive-pricing .highlighted-text {
        width: 100px;
        height: 3px;
        background: linear-gradient(to right, #e8953d, #ffe627);
        margin-top: 5px;
        margin-bottom: 20px;
    }

    #competitive-pricing p {
        font-size: 1.1rem;
        color: #555555;
        line-height: 1.6;
        margin-top: 15px;
    }
    #competitive-pricing .rounded-image {
        border-radius: 15px 15px 350px 15px; /* Top-left, top-right, bottom-right, bottom-left */
        max-width: 100%;
        height: auto;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    }

#why-choose-us {
    background-color: #ffffff;
    padding: 40px 0;
}
#why-choose-us .container {
    background-color: #f9f5f2; /* Same background color */
    padding: 40px;
    border-radius: 15px; /* Add some rounding for consistency */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
    #why-choose-us h2 {
        font-family: 'Axiforma', sans-serif;
        font-weight: bold;
        font-size: 2rem;
        position: relative;
        display: inline-block;
        margin-bottom: 20px;
        color: #000; /* Ensure text is black or intended color */
    }

        #why-choose-us h2::after {
            content: '';
            position: absolute;
            bottom: -5px; /* Adjust as needed for spacing */
            left: 0;
            width: 100%; /* Matches full width of the text */
            height: 4px; /* Thickness of underline */
            background: linear-gradient(to right, #a2c03a, #e2e993); /* Gradient color */
            border-radius: 2px; /* Rounded underline */
        }

    #why-choose-us .highlighted-text {
        width: 100px;
        height: 3px;
        background: linear-gradient(to right, #a2c03a, #e2e993);
        margin-top: 5px;
        margin-bottom: 20px;
    }

    #why-choose-us p {
        font-size: 1.1rem;
        color: #555555;
        line-height: 1.6;
        margin-top: 15px;
    }

    #why-choose-us .rounded-image {
        border-radius: 15px 15px 15px 200px; /* Top-left, top-right, bottom-right, bottom-left */
        max-width: 100%;
        height: auto;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    }
/* Join Us */

#join-us {
    background-color: #ffffff;
    padding: 40px 0;
}
#join-us .container {
    background-color: #f9f5f2;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
    #join-us h2 {
        font-family: 'Axiforma', sans-serif;
        font-weight: bold;
        font-size: 2rem;
        position: relative;
        display: inline-block;
        margin-bottom: 20px;
        color: #000; /* Ensure text is black or intended color */
    }
        #join-us h2::after {
            content: '';
            position: absolute;
            bottom: -5px; /* Adjust as needed for spacing */
            left: 0;
            width: 100%; /* Matches full width of the text */
            height: 4px; /* Thickness of underline */
            background: linear-gradient(to right, #ee4391, #faced9); /* Gradient color */
            border-radius: 2px; /* Rounded underline */
        }
    #join-us .highlighted-text {
        width: 100px;
        height: 3px;
        background: linear-gradient(to right, #ee4391, #faced9); /* Gradient color */
        margin-top: 5px;
        margin-bottom: 20px;
    }
    #join-us p {
        font-size: 1.1rem;
        color: #555555;
        line-height: 1.6;
        margin-top: 15px;
    }

    #join-us .rounded-image {
        border-radius: 15px 15px 350px 15px; /* Top-left, top-right, bottom-right, bottom-left */
        max-width: 100%;
        height: auto;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    }
/*  Calculator Section */
#candidate-calculator {
    background-color: #ffffff;
    padding: 40px 0;
}

    #candidate-calculator .container {
        background-color: #f9f5f2;
        border-radius: 15px;
        padding: 40px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

#candidate-calculator h2 {
    font-family: 'Axiforma', sans-serif;
    font-weight: bold;
    font-size: 2rem;
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
    color: #000; /* Ensure text is black or intended color */
}

    #candidate-calculator h2::after {
        content: '';
        position: absolute;
        bottom: -5px; /* Adjust as needed for spacing */
        left: 0;
        width: 100%; /* Matches full width of the text */
        height: 4px; /* Thickness of underline */
        background: linear-gradient(to right, #e8953d, #ffe627); /* Gradient color */
        border-radius: 2px; /* Rounded underline */
    }

.calculator-section h3 {
    font-size: 1.25rem;
    color: #333333;
    margin-bottom: 15px;
}

.calculator-section .form-check-label {
    font-size: 1rem;
    font-weight: bold;
    color: #333333;
}

.calculator-section .btn-primary {
    background-color: #f69020;
    border: none;
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 5px;
}

    .calculator-section .btn-primary:hover {
        background-color: #d9781d;
    }

#result {
    font-size: 1rem;
    line-height: 1.6;
    background: #f9f5f2; /* Light background for contrast */
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    color: #333333; /* Ensures the text inside the result box is black */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

    #result p {
        font-size: 1rem;
        margin: 5px 0;
        color: #333333; /* Ensures individual paragraphs inside the result are also black */
    }
/* Styling for the result table */
.table-borderless th,
.table-borderless td {
    border: none; /* Removes all borders */
    color: #333333; /* Ensures black text for readability */
    font-size: 1rem; /* Modern and consistent font size */
    line-height: 1.5; /* Adds proper spacing */
}

.bg-white {
    background-color: #f9f5f2; /* Matches the calculator section */
    color: #333333; /* Text in black for visibility */
}

.shadow-sm {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for a modern look */
}

/* Invest Section */
#invest-section {
  background-color: #133b6c;
}

#invest-section .director-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#invest-section .director-card h3 small {
  display: block;
  font-size: 0.9rem;
  color: #e0e0e0;
}

#invest-section .director-card p {
  font-size: 0.95rem;
  line-height: 1.5;
}
#invest-section .director-card img {
  width: 250px;
  height: 250px;
  object-fit: cover;
}
#invest-section .director-card .card-body {
  padding: 20px;
}

#invest-section .director-subtitle {
  color: #f69020;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}
#invest-section .nadia-photo {
  width: 220px;
  height: 220px;
  object-fit: cover;
  /* move the photo up by 20% so the face is centred in the circle */
  object-position: 50% 20%;
}


/* Contact Section Styles */
#contact-section {
    background-color: #133b6c;
    color: white;
    padding: 60px 0;
}
    #contact-section p {
        font-size: 1.25rem;
        font-weight: bold;
        margin-top: 20px;
    }

    #contact-section h2 {
        font-family: 'Axiforma', sans-serif;
        font-size: 2rem;
        font-weight: bold;
    }

    #contact-section a {
        color: white;
        text-decoration: none;
        font-size: 1rem;
    }

        #contact-section a:hover {
            text-decoration: underline;
        }

    #contact-section img {
        height: 120px;
        margin-right: 20px;
    }


/* Acknowledgement Section */
#acknowledgement-section {
    background-color: #101d34;
    color: white;
    padding: 40px 20px;
    text-align: center;
}

    #acknowledgement-section p {
        font-family: 'Axiforma', sans-serif;
        font-size: 1rem;
        margin-bottom: 10px;
    }

        #acknowledgement-section p:last-child {
            font-weight: bold;
        }
    #acknowledgement-section img {
        height: 50px;
        margin-bottom: 20px;
    }

/* Responsive Design */
@media (max-width: 768px) {
    #competitive-pricing .container {
        padding: 20px;
    }

    #competitive-pricing h2 {
        font-size: 1.5rem;
    }

    #competitive-pricing p {
        font-size: 1rem;
    }
}



/* Responsive Design */
@media (max-width: 768px) {
    .hero-section {
        text-align: center;
        flex-direction: column;
    }

        .hero-section h1 {
            font-size: 2rem;
        }

        .hero-section .btn-primary,
        .hero-section .btn-outline-light {
            width: 100%;
            margin-bottom: 10px;
        }

    .row .img-fluid {
        margin-bottom: 10px;
    }
}
/* General Styles */
html, body {
    height: 100%;
    scroll-behavior: smooth; /* Enable smooth scrolling */
    
}

body {
    font-family: 'Axiforma', sans-serif;
    background-color: #153B6C;
    color: white;
    margin: 0;
    padding: 0;
}

section {
    scroll-margin-top: 100px; /* Match navbar height */
}

/* Adjustments for smaller viewports */
@media (max-width: 768px) {
    section {
        scroll-margin-top: 110px; /* Add extra margin for smaller viewports */
    }
}

/* WebKit (iOS Safari and Chrome) specific adjustments */
@supports (-webkit-touch-callout: none) {
    body {
        -webkit-overflow-scrolling: touch; /* Enable smooth scrolling for iOS */
    }

    section {
        scroll-margin-top: 120px; /* Additional margin for Safari quirks */
    }
}

/* Hero Section Fix */
.hero-section {
    padding-top: 100px; /* Adjust to match navbar height */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

    /* Additional Layout Fixes */
    .hero-section h1 {
        margin-top: 0; /* Prevent overlapping issues */
    }