/* assets/css/styles.css */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Montserrat', sans-serif;
}

/* Sticky Navbar Transitions */
#navbar {
    transition: all 0.3s ease-in-out;
}

.scrolled-nav {
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.scrolled-nav .nav-link {
    color: #4b5563 !important; /* gray-600 */
}
.scrolled-nav .nav-link:hover {
    color: #E53935 !important;
}

.scrolled-nav .logo-text {
    color: #0A285A !important;
}

.scrolled-nav .mobile-menu-icon {
    color: #0A285A !important;
}

/* Animations */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Custom Overlays */
.hero-overlay {
    background: linear-gradient(to right, rgba(10, 40, 90, 0.95) 0%, rgba(10, 40, 90, 0.6) 50%, rgba(10, 40, 90, 0.3) 100%);
}

.fleet-overlay {
    background: linear-gradient(to top, rgba(10, 40, 90, 0.95) 0%, rgba(10, 40, 90, 0.5) 100%);
}

/* Card Hover Effects */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(10, 40, 90, 0.1);
}

.service-card:hover .icon-container {
    background-color: #E53935;
    color: white;
}

.icon-container {
    transition: all 0.3s ease;
}

/* Trust Bar */
.trust-bar-item {
    position: relative;
}
@media (min-width: 768px) {
    .trust-bar-item:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 20%;
        height: 60%;
        width: 1px;
        background-color: rgba(255,255,255,0.2);
    }
}