/* Skyline Safety Home Page Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}
/* Custom scrollbar to match industrial theme */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0f172a;
}
::-webkit-scrollbar-thumb {
    background: #FF5E14; /* safety-orange / yellow */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #d97706;
}
/* Caution stripe styling pattern for industrial accents */
.caution-stripes {
    background: repeating-linear-gradient(
        -45deg,
        #FF5E14,
        #FF5E14 10px,
        #0f172a 10px,
        #0f172a 20px
    );
}

/* Custom animation for play button overlay hover */
.play-btn-overlay {
    transition: all 0.3s ease;
}
.play-btn-overlay:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 15px -3px rgba(255, 94, 20, 0.4);
}

/* Marquee animations for client logos */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-50%);
    }
    50% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.marquee-container {
    overflow: hidden;
    white-space: nowrap;
}

.marquee-left {
    display: inline-flex;
    animation: scroll-left 25s ease-in-out infinite;
}

.marquee-right {
    display: inline-flex;
    animation: scroll-right 25s ease-in-out infinite;
}

.marquee-item {
    flex-shrink: 0;
}