/* style.css */

/* Header */

body {
    font-family: Arial, sans-serif;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-color: #fff;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 60px;
}

.logo-text {
    margin-left: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    line-height: 1.2;
}
nav button {
    display: none;
}
nav ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin: 0 10px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

nav ul li a:hover {
    color: #f0c040;
}

.book-consultation {
    padding: 10px 20px;
    background-color: #f0c040;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.book-consultation:hover {
    background-color: #e0b030;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    header {
        flex-direction: column; 
        align-items: center;
    }

    .logo {
        justify-content: center; 
        margin-bottom: 20px; 
    }
    
    .hamburger {
        display: block;
        margin-bottom: 15px; 
        font-size: 16px; 
    }
    
    nav button {
    display: block;
}

    nav ul {
        flex-direction: column;
        align-items: center; /* Aligns nav items in the center */
        width: 100%;
        display: none;
    }
    
    nav ul.open {
        display: block;
    }

    nav ul li {
        width: 100%; /* Full width for each nav item */
    }

    nav ul li a {
        display: block; /* Makes link take the full space of li */
        padding: 10px; /* Adds padding for better tap targets */
    }
    
    .book-consultation {
        width: 90%; /* Makes the button almost full width */
        margin-top: 20px; /* Adds space above the book consultation button */
    }
}


/* INDEX Ambitions Section*/

/* Ambitions Section Styles */
.ambitions-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-color: #f5f5f5; 
}

.ambitions-content {
    width: 50%;
    padding-right: 20px; 
}

.ambitions-content h1 {
    font-family: 'Noto Serif', serif;
    font-size: 24px;
    color: #333; 
    margin-bottom: 20px; 
}

button {
    background-color: #f0c040; 
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px; /* Rounded corners for the button */
    transition: background-color 0.3s;
}

button:hover {
    background-color: #dab700; /* Darker shade for hover effect */
}

.ambitions-image {
    width: 50%;
}

.ambitions-image img {
    width: 100%; 
    height: auto; 
}



/* Services Section */


.services-section {
    background-color: #000; 
    color: #fff; 
    padding: 50px;
    text-align: center; 
}

.section-heading {
    font-family: 'Noto Serif', serif;
    font-weight: 700; /* Bold weight */
    font-style: normal;
    font-size: 24px; /* Slightly larger text for heading */
    margin-bottom: 30px; /* Space below the heading */
    
}

.services-container {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30px; /* Space above the button */
}

.service {
    font-family: 'Noto Serif', serif;
    font-weight: 400; /* Standard weight */
    font-style: normal;
    width: 30%; /* Equal width for each service block */
}

.service h3 {
    font-size: 20px; /* Bold font size for subheadings */
    margin-bottom: 15px; /* Space below subheadings */
}

.view-services {
    padding: 10px 20px;
    background-color: #f0c040; /* Yellow button color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
}

.view-services:hover {
    background-color: #e0b030; /* Darker yellow on hover */
}

@media (max-width: 768px) {
    .services-container {
        flex-direction: column;
    }

    .service {
        width: 100%; /* Full width for each block on small screens */
        margin-bottom: 20px; /* Space between service blocks */
    }
}



/* trust-us section */


.trust-us-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px;
}

.trust-us-content, .choose-us-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
    width: 100%;
}

.text-content {
    width: 40%;
    padding: 20px;
    font-family: 'Noto Serif', serif;
}

.text-content h2, .text-content h3 {
    font-size: 30px;
    color: #333;
    margin-bottom: 20px;
}

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    margin-bottom: 10px;
}

img {
    width: 45%;
    height: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

/* Ensures text alternates sides with images */
.trust-us-content img {
    order: -1; /* Image before text */
}

@media (max-width: 768px) {
    .trust-us-content, .choose-us-content {
        flex-direction: column;
    }

    .text-content, img {
        width: 100%;
    }
}



/* trusted-leaders section */

.trusted-leaders {
    text-align: left;
    font-family: 'Noto Serif', serif;
    margin: 50px 0;
    background-color: #f5f5f5;
    padding: 20px;
}

.trusted-leaders h2 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
}

.leaders-container {
    display: flex;
    justify-content: space-between;
}

.leader {
    width: 30%;
}

.profile {
    display: flex;
    align-items: center;
}

.profile img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: 20px;
}

.name, .company-name {
    font-size: 14px;
}

.logo-center {
    text-align: center;
    margin-top: 20px;
}

.logo-center img {
    width: 100px; /* Adjust based on actual logo size */
    height: auto;
}

@media (max-width: 768px) {
    .leaders-container {
        flex-direction: column;
    }

    .leader {
        width: 100%;
        margin-bottom: 20px;
    }

    .profile {
        flex-direction: column;
        align-items: flex-start;
    }
}




/* unlock potential */

.unlock-potential {
    background-color: #333; /* Darker gray background */
    text-align: left; /* Align text to the left */
    padding: 50px 20px; /* Padding for spacing inside the section */
    font-family: 'Noto Serif', serif; /* Using the Google font  */
}

.unlock-potential.content {
    max-width: 600px; /* Restricting content width for better readability */
    margin: 0 auto; /* Centering the content block horizontally */
}

.unlock-potential h2 {
    font-size: 28px; /* Larger font size for the heading */
    color: #fff; /* White for better contrast against dark background */
    font-weight: bold; /* Bold font weight */
    margin-bottom: 20px; /* Space between the heading and paragraph */
}

.unlock-potential p {
    font-size: 20px; /* Increased font size for paragraph */
    color: #ccc; /* Lighter gray for the paragraph to differentiate from heading */
    margin-bottom: 30px; /* Space above the button */
}

.unlock-potential button {
    padding: 10px 20px;
    background-color: #f0c040; /* Yellow color for the button */
    color: white; /* White text on the button */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold; /* Bold text for the button */
}

.unlock-potential button:hover {
    background-color: #e0b030; /* Darker shade of yellow on hover */
}




/* contact-section and footer */



.contact-section {
    font-family: 'Noto Serif', serif;
    text-align: left;
    padding: 20px;
    background-color: #f5f5f5;
}

.contact-section h2, .contact-info p {
    margin-bottom: 10px;
}

footer {
    text-align: center;
}

footer nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    margin: 0;
}

footer nav ul li {
    display: inline;
    margin-right: 20px;
}

footer nav ul li a {
    color: #000;
    text-decoration: none;
}

footer nav ul li a:hover {
    color: #f0c040;
}

.menu-icon {
    display: none;
    font-size: 24px;
    cursor: pointer;
    padding: 20px;
}




/* PAGES - SERVICES */


.services-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}

.text-block {
    width: 40%; /* Reduced width to give more space to the image */
    padding-right: 20px; /* Adjust the spacing between text and image */
}

.text-block h1 {
    font-size: 48px; /* Large font size for header */
    font-weight: bold;
    margin: 0; 
}

.image-block {
    width: 60%; 
    display: flex;
    justify-content: flex-end; /* Align the image to the right side of the block */
}

.image-block img {
    width: 100%; /* Ensure the image fills the container */
    height: auto; /* Maintain aspect ratio */
}


/* pages-services private sector */

.text-block h1 {
    font-family: 'Noto Serif', serif;
}

.private-sector {
    font-family: 'Noto Serif', serif;
    padding: 20px;
    background-color: #f5f5f5;
}

.private-sector h2 {
    font-size: 36px; /* Increased size */
    font-weight: bold;
    color: #000;
    margin-bottom: 10px;
}

.private-sector h3 {
    font-size: 24px; /* Increased size */
    font-weight: bold;
    color: #333;
    margin-top: 20px;
    margin-bottom: 5px;
    text-align: left; /* Align h3 to the left */
    padding: 20px;
}

.private-sector .service-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.private-sector .service-area p {
    width: 60%; /* Adjust based on desired text width */
    text-align: left; /* Align paragraph text to the right */
    font-size: 16px;
    line-height: 1.5;
    padding: 30px;
}

@media (max-width: 768px) {
    .private-sector .service-area {
        flex-direction: column;
        align-items: normal;
    }

    .private-sector .service-area p {
        text-align: left; /* Align text to the left on smaller screens */
        width: 100%;
    }
}




/*  pages-services public sector */

.public-sector {
    font-family: 'Noto Serif', serif; 
    padding: 20px;
    background-color: #e0e0e0; /* Light gray background */
    color: #333;
}

.public-sector h2 {
    font-size: 36px;
    font-weight: bold;
    color: #000;
    margin-bottom: 20px;
}

.public-sector .service-area {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px; /* Space between service areas */
}

.public-sector h3 {
    width: 30%; /* h3 takes less space, adjust as necessary */
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 0; /* No additional margins */
    padding: 30px;
}

.public-sector .service-area p {
    width: 65%; /* p takes more space, adjust as necessary */
    font-size: 16px;
    line-height: 1.5;
    text-align: left; /* Text aligned to the left */
    margin-left: 5%; /* Some space between h3 and p */
    padding: 30px;
}

@media (max-width: 768px) {
    .public-sector .service-area {
        flex-direction: column;
        align-items: flex-start;
    }

    .public-sector h3, .public-sector .service-area p {
        width: 100%;
        text-align: left;
        margin-left: 0;
    }
}


/* pages/services cta banner */

.cta-banner {
    background-color: #4a4a4a; /* Darker gray background */
    padding: 20px;
    text-align: center;
}

.cta-banner h2 {
    color: #fff; /* White text for better contrast against dark background */
    font-family: 'Noto Serif', serif;
    font-size: 24px;
    margin-bottom: 20px; /* Space between text and button */
}

.cta-banner button {
    font-family: 'Noto Serif', serif;
    font-size: 18px;
    color: #333; /* Dark text on light button */
    background-color: #fdd835; /* Vibrant yellow */
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.cta-banner button:hover {
    background-color: #ffe066; /* Lighter yellow on hover */
    color: #000;
}




/* PAGES - ABOUT US */

.about-us {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px; 
    background-color: #f5f5f5; /* Light background color */
}

.about-us-text {
    
    width: 100%; 
}

.about-us-text h1 {
    font-size: 48px; /* Large font size for heading */
    font-weight: bold;
    margin: 0; /* Remove default margin */
    font-family: 'Noto Serif', serif;
}

.about-us-image {
    flex-grow: 1;
    margin-left: 20px; 
    text-align: right; /* Aligns the content to the right */
}

.about-us-image img {
    width: auto; /* Default width setting */
    max-width: 50%; /* Ensures it doesn't overflow the container */
    height: auto; /* Maintain aspect ratio */
}


.slogan-section {
    text-align: center; /* Centers the text horizontally */
    padding: 50px 20px; /* Top and bottom padding, with a bit of side padding */
    background-color: #f5f5f5; /* Light background color to make the text stand out */
    font-family: 'Noto Serif', serif; /* Consistent with your preferred font style */
}

.slogan-section h1 {
    font-size: 32px; 
    color: #333; /* Dark color for high contrast */
    font-weight: bold;
}
    

.company-overview {
    display: flex;
    align-items: center; 
    justify-content: space-between; /* Provides space between the image and text */
    padding: 20px;
    background-color: #f5f5f5; /* Light gray background for contrast */
}

.overview-image {
    flex: 0 0 auto; 
    width: auto; 
    max-width: 600px; /* Increased max width for a larger image */
    margin-right: 40px; /* Increased margin for more space between image and text */
}

.overview-image img {
    width: 100%;
    height: auto; /* Ensures the image maintains its aspect ratio */
}

.overview-text {
    flex-grow: 1; /* Allows the text block to expand to fill available space */
    max-width: 60%; /* Limits the text block width for balance */
    font-family: 'Noto Serif', serif;
}

.overview-text h2, .overview-text p {
    margin: 0 0 10px 0; /* Consistent margin for spacing */
    padding: 0;
}

.overview-text h2 {
    font-size: 24px; 
    color: #333; /* Dark grey for better readability */
}

.overview-text p {
    font-size: 16px; /* Standard paragraph text size */
    line-height: 1.5; /* Adequate line height for readability */
}


 
.agency-sectors {
    display: flex;
    justify-content: space-between; /* Ensures space between the columns */
    padding: 20px; /* Padding around the container */
    background-color: #f5f5f5; /* Light gray background */
    font-family: 'Noto Serif', serif;
}

.public-sector, .private-sector {
    flex-basis: 48%; /* Allocates nearly half the width to each section */
    margin: 10px; /* Margin between the sections for separation */
    background-color: #f5f5f5; 
}

.public-sector h2, .private-sector h2 {
    font-size: 24px; /* Large font size for clarity */
    font-weight: bold; /* Bold for emphasis */
    margin-bottom: 10px; /* Space below the heading */
    color: #333; /* Dark text color for contrast */
    font-family: 'Noto Serif', serif;
}

.public-sector p, .private-sector p {
    font-size: 16px; 
    line-height: 1.5; /* Proper line height for readability */
    text-align: justify; /* Justifies the text for a uniform appearance */
    font-family: 'Noto Serif', serif;
}


.mission-vision {
    display: flex;
    justify-content: space-between; /* Distributes space evenly between the columns */
    padding: 20px; /* Adds padding around the sections */
    background-color: #e0e0e0; /* Light gray background for contrast */
    font-family: 'Noto Serif', serif;
}

.mission, .vision {
    flex-basis: 48%; /* Each section takes roughly half the parent's width */
    padding: 10px; /* Adds internal padding for text separation */
}

.mission h2, .vision h2 {
    font-size: 24px; /* Large font size for headings */
    font-weight: bold; /* Bold font for emphasis */
    color: #333; /* Dark gray text color for contrast */
    margin-bottom: 10px; /* Space below the heading */
    font-family: 'Noto Serif', serif;
}

.mission p, .vision p {
    font-size: 16px; /* Standard paragraph text size */
    line-height:
}


.team-section {
    font-family: 'Noto Serif', serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background-color: #333; /* Dark gray background for the entire section */
    color: #fff; /* White text color for contrast */
}

.team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    width: 90%;
}

.team-member img {
    width: 150px;
    height: auto;
    border-radius: 50%;
    margin-bottom: 10px;
}

.team-member h3 {
    font-size: 26px;
    color: #fff; /* Ensures the headings are also white */
    margin-bottom: 5px;
}

.team-member p {
    font-size: 14px;
    line-height: 1.5;
}



.hero-banner {
    position: relative;
    width: 100%;
    height: 300px; /* Adjust the height as necessary */
    background: url('../images/maryrodriguez.jpg') no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.banner-content {
    text-align: center;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay with some opacity */
    padding: 20px;
    border-radius: 8px;
}

.hero-banner h1 {
    margin-bottom: 20px;
    font-size: 24px; /* Adjust size as needed */
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #ffcc00; /* Bright yellow */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #e6b800; /* Darker yellow on hover */
}


/* PAGES/CLIENTS */

.clients-section {
    display: flex;
    align-items: center; /* Vertically center content in the section */
    justify-content: space-between; /* Space between the title and image */
    padding: 20px; /* Padding around the content */
}

.clients-section h1 {
    font-size: 48px; /* Large font size for visibility */
    color: #333; /* Dark grey color for the text */
    margin-right: 20px; /* Spacing between the title and the image */
}

.clients-section img {
    width: 30%; /* Control the size of the image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; 
}


.title-container {
    width: 100%; /* Full width of the container */
    text-align: center; /* Center the text horizontally */
    padding: 50px 0; /* Adds vertical padding for spacing */
    font-size: 48px; /* Large font size for the title */
    color: #333; /* Dark grey color for the text */
    font-family: 'Noto Serif', serif;
}


.champions-client-section {
    display: flex;
    align-items: center;
    padding: 20px;
    background: #f8f8f8; /* Light grey background */
    font-family: 'Noto Serif', serif;
}

.champions-client-image img {
    width: 50%; 
    height: auto;
    border-radius: 8px; 
}

.champions-client-content {
    width: 500%;
    padding-left: 20px; /* Space between the image and the text */
}

.champions-client-content h1 {
    font-size: 24px; /* Adjust size as needed */
    color: #333; /* Dark text color */
    margin-bottom: 5px;
}

.champions-client-content h2 {
    font-size: 20px;
    color: #555; /* Slightly lighter text color */
    margin-bottom: 10px;
}

.champions-client-content p {
    font-size: 16px;
    line-height: 1.6; /* Improved readability */
    color: #666; /* Even lighter text color for the list */
}


.empower-section {
    background-color: #333; /* Adjust background color if needed */
    padding: 40px 20px;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.empower-section h2 {
    font-size: 24px; /* Adjust font size as needed */
    margin-bottom: 20px;
    font-family: 'Arial', sans-serif;
    line-height: 1.4;
    width: 80%; 
}

.empower-section button {
    background-color: #f0c040; 
    color: #000;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.empower-section button:hover {
    background-color: #dab700; /* Slightly darker shade for hover effect */
    border-radius: 5px;
}



/* PAGES/CONTACTUS */







.contact-content {
    max-width: 800px;
    margin: 40px auto;
    text-align: center;
    background-color: #333;
    color: white;
}

.contact-content h1 {
    margin-bottom: 20px;
}

.contact-content p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 15px;
}