@import url('https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-safety-primary { background-color: #FACC15; } /* Yellow 400 */
    .bg-safety-dark { background-color: #111827; } /* Gray 900 */
    .bg-safety-blue { background-color: #1E3A8A; } /* Blue 900 */
    .bg-safety-light { background-color: #F3F4F6; } /* Gray 100 */
    
    .text-safety-primary { color: #EAB308; }
    .text-safety-dark { color: #111827; }
    .text-safety-blue { color: #1E3A8A; }
    
    .font-saira { font-family: 'Saira', sans-serif; }
    .font-roboto { font-family: 'Roboto', sans-serif; }
}

body {
    font-family: 'Roboto', sans-serif;
    color: #374151;
    background-color: #FFFFFF;
}

.safety-btn {
    @apply inline-flex items-center justify-center px-8 py-3.5 bg-[#FACC15] text-[#111827] font-saira font-bold text-lg tracking-wider hover:bg-[#EAB308] transition-all duration-300 shadow-[4px_4px_0_0_#111827] hover:shadow-none hover:translate-x-1 hover:translate-y-1;
}

.safety-btn-outline {
    @apply inline-flex items-center justify-center px-8 py-3.5 border-2 border-[#111827] text-[#111827] font-saira font-bold text-lg tracking-wider hover:bg-[#111827] hover:text-white transition-all duration-300 shadow-[4px_4px_0_0_#FACC15] hover:shadow-none hover:translate-x-1 hover:translate-y-1 bg-white;
}

/* Caution Tape Pattern */
.caution-tape {
    background: repeating-linear-gradient(
        -45deg,
        #FACC15,
        #FACC15 20px,
        #111827 20px,
        #111827 40px
    );
}

.caution-tape-subtle {
    background: repeating-linear-gradient(
        -45deg,
        #FACC15,
        #FACC15 20px,
        #1E3A8A 20px,
        #1E3A8A 40px
    );
    opacity: 0.1;
}

/* Hover effects for service cards */
.service-card {
    @apply bg-white p-8 border border-gray-200 transition-all duration-300 relative overflow-hidden z-10;
}

.service-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 4px;
    background-color: #FACC15;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
    z-index: -1;
}

.service-card:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.service-card:hover {
    @apply shadow-xl border-[#111827];
}

/* Hard Hat Float */
.float-helmet {
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}