/* General Styles */
body {
    font-family: Arial, sans-serif;
}
/* Navbar Styles */
.navbar {
    transition: background-color 0.3s; /* Smooth transition for background color */
    padding-left: 0; /* Remove left padding from the navbar */
}
/* Logo Styles */
.navbar-brand {
    padding-left: 5px; /* Adjust this value as needed for minimal padding */
    padding-right: 15px; /* Optional: Adjust right padding if needed */
}
.navbar .nav-link {
    color: #ff5722; /* Red color for nav links */
    transition: color 0.3s; /* Smooth transition for link color */
}

.navbar .nav-link:hover {
    color: #007bff; /* Change color on hover to blue */
}

.navbar .nav-link.active {
    color: #ff5722; /* Active link color */
}
/* Navbar Styles */
.navbar-nav .nav-item {
    margin-right: 10px; /* Reduce space between items */
}

.navbar-nav .nav-link {
    padding: 5px 10px; /* Reduce padding for better alignment */
}

/* Adjust button styles */
.navbar .btn-primary {
    margin-left: 10px; /* Add space between button and links */
}

/* Ensure the last item has no margin */
.navbar-nav .nav-item:last-child {
    margin-right: 0; /* Remove margin for the last item */
}

/* Top Bar Styles */
.top-bar {
    background-color: #f8d7da; /* Light pink background for the top bar */
}

.header-social a {
    color: #333; /* Color for social icons */
    transition: color 0.3s; /* Smooth transition for hover effect */
}

.header-social a:hover {
    color: #ff5722; /* Change color on hover */
}
/* Hero Section */
.hero-section {
    position: relative; /* Position relative for overlay */
    height: 50vh; /* Set height to 50% of the viewport */
    background-size: cover; /* Cover the entire section */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent repeating the image */
}

/* Overlay */
.overlay {
    background: rgba(0, 0, 0, 0.5); /* Dark overlay with 50% opacity */
    position: absolute; /* Ensure it covers the hero section */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Ensure it is above the background image */
}

.hero-content {
    position: relative; /* Position relative to be above the overlay */
    z-index: 2; /* Higher z-index to be above the overlay */
    color: white; /* Set text color to white for contrast */
}

/* Section Titles */
.section-title {
    font-weight: bold;
    text-decoration: none; /* Remove underline from titles */
}
.card {
    border: 1px solid #dee2e6; /* Light border for cards */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Padding inside the card */
    background-color: #ffffff; /* White background for cards */
    transition: transform 0.2s; /* Smooth hover effect */
}

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

h4 {
    margin-bottom: 15px; /* Space below the heading */
    text-decoration: none; /* Remove underline from h4 */
}

p {
    margin-bottom: 0; /* Remove bottom margin for paragraphs */
}

.cursor-effect {
    position: relative;
    display: inline-block;
    transition: transform 0.3s ease; /* Smooth transition for movement */
}

.cursor-effect:hover {
    transform: translateY(-5px); /* Move text up on hover */
}

.cursor-effect::after {
    content: '';
    position: absolute;
    width: 2px; /* Width of the cursor */
    height: 1em; /* Height of the cursor */

    left: 0;
    bottom: 0;
    animation: blink 1s infinite; /* Blink effect */
}

/* Intro Section */
.intro-section {
    padding: 5rem 0;
    background-color: #f8f9fa; /* Light background for contrast */
}

.intro-section h4 {
    color: #5072A7; /* Blue color for headings */
    text-decoration: none; /* Remove underline from h4 */
}
/* About Us Section */
.about-us-section {
    padding: 5rem 0;
    background-color: #f8f9fa; /* Light background for contrast */
}

.about-image img {
    max-width: 100%; /* Ensure the image is responsive */
    height: auto; /* Maintain aspect ratio */
}

.about-content {
    padding: 2rem; /* Add padding around the text */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .about-content {
        text-align: center; /* Center text on smaller screens */
    }
}
/* What We Do Section */
.what-we-do-section {
    padding: 5rem 0;
    background-color: #f8f9fa; /* Light background for contrast */
}
.list-group-item {
    background-color: #e9ecef; /* Light background for list items */
    border: none; /* Remove borders */
    margin-bottom: 10px; /* Space between list items */
}
.list-group-item strong {
    color: #007bff; /* Blue color for strong text */
}

img {
    max-height: 400px; /* Set a max height for the image */
    object-fit: cover; /* Ensure the image covers the area */
}
.what-we-do-section h2 {
    margin-bottom: 2rem; /* Space below the section title */
    text-decoration: none; /* Remove underline from h2 */
}
.approach-section {
    background-color: #f8f9fa; /* Light background for the approach section */
}

.bpo-specialty-section {
    background-color: #ffffff; /* White background for the BPO section */
}

.card {
    border: none; /* Remove card borders */
}

.card-img-top {
    height: 200px; /* Set a fixed height for images in cards */
    object-fit: cover; /* Ensure images cover the area */
}
.what-we-do-section .card {
    background-color: #ffffff; /* White background for cards */
    border: 1px solid #ddd; /* Light border for cards */
    border-radius: 8px; /* Rounded corners */
    padding: 2rem; /* Padding inside cards */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.what-we-do-section .card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow on hover */
}

.what-we-do-section h4 {
    font-weight: bold; /* Bold headings */
    margin-bottom: 1rem; /* Space below headings */
    text-decoration: none; /* Remove underline from h4 */
}

.what-we-do-section p {
    margin-bottom: 1.5rem; /* Space below paragraphs */
}

/* Impact Section */
.impact-section {
    padding: 5rem 0;
}

/* Initiative Card Styles */
.initiative-card {
    min-height: 280px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.initiative-card:hover {
    background-color: #e3f2fd; /* Light blue on hover */
    transform: scale(1.05);
}
/* Hero Text Styles */
.hero-text {
    color: white; /* Set text color to white */
    position: relative; /* Ensure it is positioned above the overlay */
    z-index: 2; /* Higher z-index to be above the overlay */
    opacity: 0; /* Start hidden */
    transform: translateX(-50px); /* Start from the left */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Transition for smooth effect */
    border: none; /* Remove any border */
}

.hero-text.visible {
    opacity: 1; /* Fully visible */
    transform: translateX(0); /* Move to original position */
}
/* Animation Styles */
.animate-on-scroll {
    opacity: 0; /* Start hidden */
    transform: translateY(20px); /* Start slightly below */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth transition */
}

.animate-on-scroll.visible {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Move to original position */
}

/* Button Styles */
.btn-primary {
    background-color: #007bff; /* Blue background for the button */
    border: none; /* Remove border */
}

.btn-primary:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.stat-box {
    transition: transform 0.3s ease; /* Smooth transition for scaling */
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: flex-start; /* Align items to the start */
}

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

.stat-number {
    font-size: 2rem; /* Adjust font size for visibility */
    margin: 0; /* Remove default margin */
}

.stat-box p {
    margin-top: 1rem; /* Add consistent margin above the paragraph */
    margin-bottom: 0; /* Remove bottom margin for paragraphs */
    text-align: center; /* Center align text */
}
/* Partners Section Styles */
.partners-section {
    background-color: #f8f9fa; /* Light background for the partners section */
}

.partners-section .section-title {
    font-size: 2.5rem; /* Title font size */
}

.partners-section img {
    max-width: 100%; /* Ensure logos are responsive */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center logos */
}
/* Partners Section Logo Styles */
.partner-logo {
    max-width: 100%; /* Ensure logos are responsive */
    height: auto; /* Maintain aspect ratio */
    width: 100px; /* Set a fixed width for uniformity */
    margin: 0 auto; /* Center logos */
}
.partners-section p {
    font-size: 1.2rem; /* Font size for the description */
    color: #333; /* Darker text color for better readability */
}
/* Footer Styles */
.footer {
    background-color: #343a40; /* Dark background for footer */
    color: white; /* White text color */
}

.footer h5 {
    color: #ff5722; /* Change heading color to match branding */
    margin-bottom: 15px; /* Space below headings */
}

.footer p {
    margin-bottom: 10px; /* Space below paragraphs */
}

.footer .list-unstyled li {
    margin-bottom: 10px; /* Space between list items */
}

.footer .list-unstyled i {
    color: #f8c102; /* Icon color */
}

.footer-bottom {
    background-color: #23272b; /* Darker background for footer bottom */
    padding: 10px 0; /* Padding for footer bottom */
}

.footer-bottom p {
    margin: 0; /* Remove default margin */
}
/* Remove underline from links in the footer */
.footer a,
.footer a:visited {
    text-decoration: none; /* Remove underline */
}