:root {
    --brand-blue: #007bff;
    --nav-bg: rgba(250, 250, 250, 0.9);
    --hover-blue: blue;
    --overlay-white: rgba(255, 255, 255, 0.5);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    background-color: white;
    padding-top: 100px;
    overflow-x: hidden;
}

/* Navbar */
#navigation {
    transition: top 0.3s ease-in-out;
    background-color: var(--nav-bg) !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    will-change: transform;
}

.navbar-nav .nav-link {
    padding: 0.5rem 1rem;
    color: #000 !important;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--hover-blue) !important;
    outline: none;
}

.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='orange' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler {
    border-color: var(--brand-blue) !important;
}

#navBarLogo {
    width: 150px;
    height: auto;
}

@media (max-width: 767.98px) {
    .navbar-nav {
        flex-direction: column;
        align-items: center;
        text-align: center;
        background-color: var(--nav-bg);
        transition: background-color 0.3s ease;
    }

    .navbar-nav .nav-item {
        width: 100%;
    }

    .navbar-nav .nav-link {
        display: block;
        width: 100%;
        padding: 0.75rem 1rem;
    }
}

/* Hero Section */
#home {
    background-image: url(ant-assets/homepage-background3.png);
    background-attachment: fixed;
    min-height: calc(100vh - 100px);
    position: relative;
    overflow: hidden;
}

#home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-white);
    z-index: 0;
    pointer-events: none;
}

#home > * {
    position: relative;
    z-index: 1;
}

#heroImage {
    width: 70%;
    height: auto;
}

/* About, Services, Contact Sections */
#aboutUs,
#services,
#contactUs,
#home {
    min-height: 100vh;
    scroll-margin-top: ;
    position: relative;
    z-index: 1;
}

#aboutUsImage {
    max-width: 100%;
    height: auto;
}

/* Carousel Section */
#carouselSection {
    background-image: url(ant-assets/contact-us-background.png);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.carouselImage {
    width: 300px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Client Logos */
.companyLogos {
    width: 200px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Services Section */
.serviceCardImages {
    width: 210px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.serviceCards {
    transition: transform 0.3s ease;
}

.serviceCards:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Why Choose Us Section */
#whyChooseUs {
    background-image: url(ant-assets/our-services-background.png);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Footer */
#footerLogo {
    width: 150px;
    height: auto;
}

/* AOS Timing Optimization */
[data-aos] {
    transition-duration: 0.6s !important;
    transition-timing-function: ease-in-out !important;
    will-change: opacity, transform;
}

[data-aos][data-aos-delay] {
    transition-delay: 0.1s !important;
}

[data-aos=fade-up],
[data-aos=fade-down],
[data-aos=fade-left],
[data-aos=fade-right],
[data-aos=zoom-in] {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
}

[data-aos].aos-animate {
    opacity: 1;
    transform: none;
    transition-property: opacity, transform;
}

@media (max-width: 768px) {
    #heroImage {
        width: 90%;
    }
}