/* Scroll Reveal Utility Classes */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Delays for staggered animations */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Modern Styles */
.hero-bg {
    background-image: linear-gradient(rgba(30, 41, 59, 0.7), rgba(50, 73, 118, 0.8)), url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.section-title {
    position: relative;
    display: inline-block;
}
.section-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background-color: #BB6B53;
    margin-top: 8px;
    border-radius: 2px;
    transition: width 0.3s ease;
}
.group:hover .section-title::after {
    width: 100%;
}

.glass-nav {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Mobile Menu Animation */
#mobile-menu {
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
#mobile-menu.active {
    max-height: 400px;
    opacity: 1;
}

/* Animation for Infinite Scroll */
@keyframes infinite-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-25%); } /* Move 25% because we have 4 sets of logos, seamless loop occurs after 1 set passes */
}
.animate-infinite-scroll {
    animation: infinite-scroll 40s linear infinite;
}
/* Pause animation on hover */
.animate-infinite-scroll:hover {
    animation-play-state: paused;
}