body {
font-family: 'Poppins', sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 0;
overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Header Styling */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}

.header img {
width: 150px;
}

.header .contact {
font-size: 14px;
color: #333;
}

/* Mobile Responsive Header */
@media (max-width: 768px) {
.header {
 flex-direction: column;
 text-align: center;
}

.header img {
 width: 120px; /* Resize logo for smaller screens */
 margin-bottom: 10px;
}

.header .contact {
 font-size: 16px; /* Slightly larger font for better readability */
}
}

/* General Section Styling */
.section {
max-width: 90%; /* Changed to 90% for better responsiveness */
margin: 100px auto;
padding: 20px;
text-align: center;
}

.section2 {
max-width: 90%; /* Changed to 90% for better responsiveness */
margin: 100px auto;
padding: 100px;
text-align: center;
background-color: white;
border-radius: 10px;
}

.section h1 {
font-family: 'Libre Baskerville', serif;
font-size: 36px;
margin-bottom: 10px;
color: #333;
}

.section p {
font-size: 18px;
color: #666;
margin-bottom: 50px;
}

.image-container {
text-align: center;
}

.rounded-image {
width: 100%;
max-width: 800px;
border-radius: 15px;
}

/* New Quote Section */
.quote-section {
background-color: #111; /* Dark background */
color: #fff;
padding: 100px 20px;
text-align: center;
}

.quote-section blockquote {
font-family: 'Libre Baskerville', serif;
font-size: 32px; /* Increase font size for impact */
font-style: italic;
margin: 0;
line-height: 1.6; /* Better line spacing for readability */
}

.quote-author {
margin-top: 30px;
display: flex;
flex-direction: column; /* Stack the image and text vertically */
align-items: center;
}

.quote-author img {
border-radius: 50%;
width: 80px; /* Slightly larger image for visibility */
height: 80px;
margin-bottom: 10px; /* Space between image and text */
}

.quote-author div {
text-align: center; /* Center align name and title */
}

.quote-author div h4 {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #fff;
}

.quote-author div p {
margin: 0;
font-size: 14px;
color: #bbb;
}

footer {
padding: 20px;
display: flex;
align-items: center;
gap: 20px;
}

/* Box Section Styles */
.stats-container {
text-align: center;
padding-top: 50px;
}

.stats-container h2 {
font-size: 24px;
color: #333;
margin-bottom: 30px;
}

.container {
display: flex;
justify-content: space-around;
background-color: #f9f9f9;
padding: 20px;
flex-wrap: wrap;
max-width: 100%; /* Ensure the container does not exceed the width of the screen */
}

.box {
text-align: center;
width: calc(30% - 20px); /* Use calc to account for margin */
padding: 20px;
background-color: #d4f1ff; /* Slightly lighter blue */
border-radius: 10px;
margin: 10px;
box-sizing: border-box; /* Include padding and border in element's total width and height */
}

.number {
font-size: 3em;
color: #004080; /* Dark blue */
}

.text {
font-size: 1.5em;
color: #004080;
}

/* Responsive Design for boxes */
@media (max-width: 768px) {
.box {
 width: calc(100% - 20px); /* Full width for mobile, adjusted for margin */
 margin: 10px auto; /* Center align with auto margin */
}

.container {
 flex-direction: column; /* Stack boxes vertically on small screens */
 align-items: center; /* Center items */
}
}

@media (max-width: 480px) {
.section h1 {
 font-size: 28px;
}

.quote-section blockquote {
 font-size: 24px;
}
}

/* Adjust spacing between sections */
section {
margin-bottom: 80px; /* Increased bottom margin for sections */
}

/* Services and Products Section */
.services-products {
display: flex;
flex-wrap: wrap; /* Allow wrapping */
justify-content: center; /* Center the cards */
padding: 20px;
background-color: #f6f8f9;
gap: 20px; /* Increased space between cards */
max-width: 90%; /* Make sure it does not exceed viewport width */
margin: 0 auto; /* Center the section */
}

.service-card {
background-color: #eaf4ee;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 20px;
width: calc(30% - 20px); /* Use calc to keep within the viewport */
max-width: none; /* Remove max width limit */
text-align: center;
position: relative;
transition: transform 0.3s ease; /* Subtle hover effect */
}

.service-card:hover {
transform: scale(1.01); /* Slightly enlarge on hover */
}

.service-card h3 {
font-size: 1.25rem;
color: #003366;
}

.service-card p {
font-size: 1rem;
color: #333;
margin-top: 10px;
}

/* Arrow link styling */
.service-link {
position: absolute;
bottom: 15px;
right: 15px;
font-size: 1.5rem;
color: #003366;
text-decoration: none;
transition: color 0.3s ease;
}

.service-link:hover {
color: #0080ff; /* Change color on hover */
}

/* Responsive styles */
@media (max-width: 768px) {
.services-products {
 flex-direction: column; /* Stack cards vertically on small screens */
 align-items: center; /* Center cards */
}

.service-card {
 width: calc(100% - 40px); /* Full width for stacked layout, adjusted for margin */
 margin: 10px auto; /* Center align with auto margin */
}
}

.our-team {
text-align: center;
padding: 60px 20px;
background-color: #f6f8f9;
}

.our-team h2 {
font-size: 36px;
margin-bottom: 40px;
color: #333;
}

.team-container {
display: flex;
justify-content: center;
flex-wrap: wrap; /* Allow wrapping on smaller screens */
max-width: 90%; /* Ensure it doesn’t exceed the viewport */
margin: 0 auto; /* Center align the team container */
}

.team-member {
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin: 10px;
padding: 20px;
text-align: center;
width: calc(30% - 20px); /* Keep width manageable */
transition: transform 0.3s ease; /* Add transition for hover effect */
}

.team-member:hover {
transform: scale(1.05); /* Slightly enlarge on hover */
}

.profile-photo {
width: 100px; /* Set a specific size for profile photos */
height: 100px;
border-radius: 50%; /* Make it circular */
margin-bottom: 15px; /* Space between photo and text */
}

.team-member h3 {
font-size: 20px;
color: #003366; /* Dark blue for names */
margin: 5px 0; /* Reduce margin */
}

.team-member p {
font-size: 16px;
color: #666; /* Grey for titles */
}

/* Responsive Design for Team Section */
@media (max-width: 768px) {
.team-member {
 width: calc(45% - 20px); /* Adjust for smaller screens */
}
}

@media (max-width: 480px) {
.team-member {
 width: calc(100% - 20px); /* Full width for mobile */
}

.our-team h2 {
 font-size: 28px; /* Adjust heading size */
}

.profile-photo {
 width: 80px; /* Smaller profile photo on mobile */
 height: 80px;
}

.team-member h3 {
 font-size: 18px; /* Adjust name size */
}

.team-member p {
 font-size: 14px; /* Adjust title size */
}

.description {
 font-size: 12px; /* Smaller description size */
}
}

.description {
font-size: 14px;
color: #666; /* Grey for descriptions */
margin-top: 10px; /* Space above descriptions */
line-height: 1.6; /* Improve readability */
}

/* Adjust the team member cards for description space */
.team-member {
height: auto; /* Allow height to adjust based on content */
padding: 20px;
}

/* Offices Section */
.offices-section {
    text-align: center;
    padding: 60px 20px;
    background-color: #f6f8f9;
    max-width: 90%;
    margin: 0 auto;
}

.offices-section h2 {
    margin-bottom: 40px;
}

.office-cards {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.office-card {
    background-color: #ffffff;
    border: 1px solid #d4d4d4;
    padding: 30px;
    border-radius: 8px;
    width: calc(40% - 20px);
    box-sizing: border-box;
    transition: box-shadow 0.2s ease;
    text-align: left;
}

.office-card h3 {
    font-size: 1.5rem;
    color: #033e88;
    margin-bottom: 15px;
}

.office-card p {
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
}

.office-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Responsive Design for Offices Section */
@media (max-width: 768px) {
    .office-card {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .offices-section h2 {
        font-size: 28px;
    }

    .office-card h3 {
        font-size: 20px;
    }

    .office-card p {
        font-size: 16px;
    }
}

.ventures-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin-top: 30px;
}
.venture-card {
    flex: 1;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.venture-card img {
    width: 100%;
    height: auto;
    display: block;
}
.venture-card:hover {
    transform: scale(1.05);
    opacity: 0.9;
}
@media (max-width: 768px) {
    .ventures-container {
        flex-direction: column;
        align-items: center;
    }
    .venture-card {
        width: 80%;
    }
}