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

/* TOP BAR */
.top-bar {
    background: white;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.top-bar a i {
    color: #0A1F44; /* Dark blue for phone, email, WhatsApp icons */
    transition: color 0.3s;
}

.top-bar a:hover i {
    color: #12326B; /* Slightly lighter blue on hover */
}

/* NAVBAR */
.navbar {
    background: white !important;
}

.nav-link {
    color: #0A1F44 !important;
    font-weight: 500;
}

.nav-link:hover {
    color: #12326B !important;
}

/* HERO SECTION */
.hero-section {
    height: 600px;
    background-size: cover;
    background-position: center;
    transition: background-image 1s ease-in-out;
}

.overlay {
    height: 100%;
    background: rgba(10,31,68,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.big-title {
    font-size: 42px;
    font-weight: bold;
}

#typing-text {
    font-size: 38px;
    font-weight: bold;
    min-height: 50px;
    border-right: 4px solid white;
    display: inline-block;
    padding-right: 5px;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    50% { border-color: transparent; }
}

/* SERVICE BOX */
.service-box {
    background: white;
    padding: 20px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 0 10px #ccc;
}

.service-box i {
    font-size: 40px;
    color: #0A1F44; /* Dark blue icons */
    margin-bottom: 10px;
}

/* BUTTONS */
.btn-primary {
    background: #0A1F44;
    border: none;
}

/* FOOTER */
footer {
    background: #0A1F44;
    color: white;
}

/* ABOUT US */
.about-us h2 {
    color: #0A1F44; /* Dark Blue */
    font-size: 36px;
    margin-bottom: 20px;
}

.about-us p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

/* WHY CHOOSE US */
.why-choose-us h2 {
    color: #0A1F44;
    font-size: 36px;
    margin-bottom: 15px;
}

.why-choose-us p {
    font-size: 16px;
    color: #555;
}

.why-choose-us i {
    color: #0A1F44; /* Dark blue icons */
}

/* WHAT WE DO SECTION */
.what-we-do {
    background: #f8f9fa; /* light background */
}

.what-we-do h2 {
    color: #0A1F44; /* dark blue */
    font-size: 36px;
    margin-bottom: 20px;
}

.what-we-do p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.what-we-do i {
    color: #0A1F44; /* Dark blue icons */
}

/* SERVICES PAGE */
.services h2 {
    color: #0A1F44;
    font-size: 36px;
    margin-bottom: 20px;
}

.services p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.services i {
    color: #0A1F44; /* Dark blue icons */
}

/* PROJECTS PAGE */
.projects h2 {
    color: #0A1F44;
    font-size: 36px;
    margin-bottom: 20px;
}

.projects p {
    font-size: 16px;
    color: #333;
}

.projects .card-title {
    color: #0A1F44;
    font-weight: 600;
}

.projects .btn-primary {
    background-color: #0A1F44;
    border: none;
}

/* CLIENTS & ASSOCIATES */
.clients h2 {
    color: #0A1F44;
    font-size: 36px;
    margin-bottom: 15px;
}

.clients p {
    font-size: 16px;
    color: #333;
    margin-bottom: 40px;
}

.clients img {
    max-height: 80px;
    transition: all 0.3s ease;
    filter: grayscale(100%);
}

.clients img.grayscale-hover:hover {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* Force all Font Awesome icons in About Us to dark blue */
.about-us i {
    color: #0A1F44 !important; /* Dark blue */
}

/* Optional: add hover effect for About Us icons */
.about-us i:hover {
    color: #12326B !important;
}

/* WHAT WE DO SECTION ICONS */
.what-we-do i {
    color: #0A1F44;  /* Dark blue */
    transition: color 0.3s;
}

/* Optional hover effect */
.what-we-do i:hover {
    color: #12326B; /* Slightly lighter blue on hover */
}

/* SERVICES ICONS */
.services i {
    color: #0A1F44; /* Dark blue */
    transition: color 0.3s;
}

.services i:hover {
    color: #12326B; /* Slightly lighter blue on hover */
}