/* Custom Color Scheme */
.bg-custom-green { background-color: #016B02; }
.text-custom-green { color: #016B02; }
.hover\:text-custom-green:hover { color: #016B02; }
.bg-custom-yellow { background-color: #F9CD30; }
.text-custom-yellow { color: #F9CD30; }
.hover\:bg-custom-green:hover { background-color: #016B02; }
.hover\:bg-custom-yellow:hover { background-color: #F9CD30; }
.border-custom-green { border-color: #016B02; }
.focus\:ring-custom-green:focus { --tw-ring-color: #016B02; }

/* Fix for icons on green backgrounds - make them yellow */
.bg-custom-green .text-custom-green,
.bg-custom-green .fas,
.bg-custom-green .fab,
.bg-custom-green .far {
    color: #F9CD30 !important;
}

/* Fix for buttons with green text on green background */
.bg-custom-green.text-custom-green {
    color: #F9CD30 !important;
}

/* Hover states for icons on green backgrounds */
/* .bg-custom-green:hover .text-custom-green, */
.bg-custom-green:hover .fas,
.bg-custom-green:hover .fab,
.bg-custom-green:hover .far {
    color: #F9CD30 !important;
}

/* Specific fix for icon containers with green background */
.bg-custom-green.bg-opacity-10 .fas,
.bg-custom-green.bg-opacity-10 .fab,
.bg-custom-green.bg-opacity-10 .far {
    color: #F9CD30 !important;
}

/* Fix for group hover states */
.group:hover .bg-custom-green .fas,
.group:hover .bg-custom-green .fab,
.group:hover .bg-custom-green .far {
    color: #F9CD30 !important;
}

/* Ensure icons in benefit cards are visible */
.group .bg-custom-green .fas,
.group .bg-custom-green .fab,
.group .bg-custom-green .far {
    color: #F9CD30 !important;
}

/* Fix for icon containers with bg-opacity-10 */
.bg-custom-green.bg-opacity-10 .fas,
.bg-custom-green.bg-opacity-10 .fab,
.bg-custom-green.bg-opacity-10 .far {
    color: #F9CD30 !important;
}

/* Fix for all icon containers with green background and green text */
.bg-custom-green .text-custom-green {
    color: #F9CD30 !important;
}

/* Ensure yellow background buttons have visible text */
.bg-custom-yellow {
    color: #016B02 !important;
}

/* Specific fix for yellow background buttons with green text */
.bg-custom-yellow.text-custom-green {
    color: #016B02 !important;
}

/* Ensure yellow background buttons maintain text visibility on hover - only when hovering the button itself */
button.bg-custom-yellow:hover,
a.bg-custom-yellow:hover,
input[type="submit"].bg-custom-yellow:hover {
    color: #F9CD30 !important;
}

/* Fix for WhatsApp button hover - ensure text remains visible */
a.bg-custom-yellow:hover .text-custom-green,
a.bg-custom-yellow:hover .fab,
a.bg-custom-yellow:hover .fas,
a.bg-custom-yellow:hover .far {
    color: #F9CD30 !important;
}

/* Hero section styling for consistent heights */
.hero-section {
    min-height: 300px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Homepage hero section - larger */
.hero-home {
    min-height: 500px;
    background-image: linear-gradient(rgba(1, 107, 2, 0.8), rgba(1, 107, 2, 0.8)), url('../img/occupational-health.webp');
}

/* Other pages hero sections - smaller */
.hero-about {
    background-image: linear-gradient(rgba(1, 107, 2, 0.7), rgba(1, 107, 2, 0.7)), url('../img/occupational-health.webp');
}

.hero-services {
    background-image: linear-gradient(rgba(1, 107, 2, 0.7), rgba(1, 107, 2, 0.7)), url('../img/occupational-health.webp');
}

.hero-contact {
    background-image: linear-gradient(rgba(1, 107, 2, 0.7), rgba(1, 107, 2, 0.7)), url('../img/occupational-health.webp');
}

body {
    font-family: 'Open Sans', sans-serif;
}
.testimonial-slide {
    transition: transform 0.5s ease;
}
.mobile-menu {
    transition: all 0.3s ease;
}
.whatsapp-float {
    animation: float 3s ease-in-out infinite;
}
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}
/* Form fields - light mode */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="file"],
select,
textarea {
    background-color: #fff !important;
    color: #1a202c !important;
}