/* Blue Theme Colors */
.text-dark-blue {
    color: #1E3A8A; /* Dark blue for headings */
}
.text-light {
    color: #E0F2FE !important; /* Light blue for readability on dark backgrounds */
}
.text-white {
    color: #ffffff !important; /* White text for readability on dark backgrounds */
}

p.lead {
    font-size: 1.2rem;
}

/* Showcase Section */
.showcase {
    background-color: #1E3A8A; /* Dark blue background */
    color: #E0F2FE; /* Light blue text */
    padding: 60px 0;
    text-align: center;
}

/* Ensure headings inside showcase sections have light color */
.showcase h1, .showcase h2, .showcase h3 {
    color: #E0F2FE !important; /* Light blue or white for headings inside showcase sections */
}

/* Ensure hero section headings have light color */
.hero h1, .hero h2, .hero h3 {
    color: #E0F2FE !important; /* Light blue or white for headings inside hero sections */
}

/* Section Titles */
h2 {
    font-weight: bold;
    font-size: 2rem;
    color: #1E3A8A; /* Dark blue */
}

/* Section Spacing */
.container section {
    margin-bottom: 2rem;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* Call-to-Action Button */
.btn-primary {
    background-color: #2563EB;
    border-color: #2563EB;
    color: white;
    padding: 10px 20px;
    font-size: 1rem;
}

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

/* General Styles */
.container {
    max-width: 1140px;
    margin: auto;
    padding: 0 15px;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #1E3A8A; /* Dark blue text */
}

h1, h2, h3 {
    font-weight: bold;
    color: #1E40AF; /* Slightly lighter blue for headings */
}

a {
    color: #2563EB; /* Blue for links */
    text-decoration: none;
}

a:hover {
    color: #1D4ED8; /* Darker blue on hover */
}

.container {
    max-width: 1140px;
    margin: auto;
    padding: 0 15px;
}

.my-5 {
    margin: 3rem 0;
}

/* Navbar */
.bg-primary-blue {
    background-color: #1E3A8A; /* Dark blue background for the navbar */
}

.navbar-brand {
    font-size: 1.8rem;
    font-weight: bold;
    color: #F0F9FF; /* Light blue for the brand */
}

.navbar-nav .nav-link {
    margin-right: 1rem;
    font-weight: 500;
    color: #EFF6FF; /* Light blue for the nav links */
}

.navbar-nav .nav-link:hover {
    color: #93C5FD; /* Lighter blue on hover */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 0.7)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); /* Custom white navbar toggle icon */
}

.navbar-toggler {
    border: none;
}

/* Mobile menu alignment */
@media (max-width: 992px) {
    .navbar-nav {
        text-align: center;
        margin-top: 10px;
    }

    .navbar-nav .nav-item {
        margin-bottom: 10px;
    }
}

/* Footer */
.bg-dark-blue {
    background-color: #1E3A8A; /* Dark blue background */
    color: #E0F2FE; /* Light blue text for contrast */
}

footer p {
    margin: 0;
    color: #E0F2FE; /* Light blue text color */
    font-size: 1rem;
}

.social-icons a {
    color: #93C5FD; /* Light blue for social icons */
    text-decoration: none;
    margin: 0 10px;
    font-weight: 500;
}

.social-icons a:hover {
    color: #BFDBFE; /* Even lighter blue on hover */
}

/* Footer responsiveness */
@media (max-width: 768px) {
    footer p, .social-icons {
        text-align: center;
    }

    .social-icons a {
        display: inline-block;
        margin-bottom: 10px;
    }
}

/* Hero Section */
.hero {
    background: url('/static/images/hero-bg.png') no-repeat center center/cover;
    color: #E0F2FE; /* Light blue text */
    padding: 80px 0;
}

.hero .btn-light {
    color: #1E3A8A; /* Dark blue text for buttons */
    background-color: #E0F2FE; /* Light blue button */
    border: none;
}

.hero .btn-light:hover {
    background-color: #93C5FD; /* Slightly darker light blue on hover */
}


/* Team Card Hover Effect */
.team-card {
    border: none;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Elevate the card on hover */
}

/* Card Styles */
.card {
    border: none;
    border-radius: 10px;
}

.card-img-top {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 250px;
    object-fit: cover;
}

.card-body {
    padding: 20px;
}

/* Testimonials */
.testimonials {
    background-color: #F3F4F6; /* Light gray background */
}

blockquote {
    font-size: 1.25rem;
    color: #1E3A8A; /* Dark blue text */
    margin: 0;
}

/* Buttons */
.btn-primary {
    background-color: #2563EB;
    border-color: #2563EB;
    color: white;
}

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

/* CTA Button */
.text-center .btn {
    padding: 10px 20px;
    font-size: 1.2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero {
        padding: 70px 0;
    }

    .card-img-top {
        height: 200px;
    }

    .footer p, .social-icons {
        text-align: center;
    }
}

@media (max-width: 576px) {
    .hero {
        padding: 50px 0;
        font-size: 1.1rem;
    }

    .card-img-top {
        height: 150px;
    }
}

/* Contact Page Styles */
.container {
    max-width: 1140px;
    margin: auto;
    padding: 0 15px;
}

.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for a card-like effect */
}

/* Form Field Styles */
.form-control {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #2563EB; /* Blue border on focus */
    box-shadow: 0 0 5px rgba(37, 99, 235, 0.3); /* Blue glow on focus */
}

/* Button */
.btn-primary {
    background-color: #2563EB;
    border-color: #2563EB;
    color: white;
    padding: 10px 20px;
    font-size: 1rem;
    width: 100%; /* Full-width button */
}

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

/* Two-column layout adjustments */
@media (max-width: 768px) {
    .row {
        flex-direction: column;
    }

    .card {
        margin-bottom: 30px; /* Add space between card and content in mobile view */
    }
}

/* Animations (using AOS) */
[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 0.5s;
}

[data-aos].aos-animate {
    opacity: 1;
    transform: translate(0, 0);
}


/* Two-Column Layout for About Us Section */
.about-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 60px 0;
}

.about-section .lead {
    font-size: 1.2rem;
}

/* Image Styling */
.about-section img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

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

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