:root {
    --primary-color: #83171D /* Ruby Red / RAL 3003 */
    --primary-hover: #7A1626; /* Darker shade for hover */

}

body {
    font-family: 'Arial', sans-serif;
}

.fade-in {
    opacity: 0;
    transition: opacity 1s ease-in;
}

.fade-in.visible {
    opacity: 1;
}

.banner-text {
    opacity: 0;
    transition: opacity 1s ease-in;
}

.banner-text.visible {
    opacity: 1;
}

.service-slider .slider {
    display: flex;
    gap: 16px; /* Space between images */
}

.service-slider .slider-item {
    flex: 0 0 calc(33.33% - 16px); /* Adjust width to account for gap */
}

button.bg-red-600 {
    background-color: var(--primary-color);
}

button.bg-red-600:hover {
    background-color: var(--primary-hover);
}

a.text-red-600 {
    color: var(--primary-color);
}

a.text-red-600:hover {
    color: var(--primary-hover);
}

button.bg-red-700 {
    background-color: var(--primary-hover);
}

.focus\:ring-red-600:focus {
    --tw-ring-color: var(--primary-color);
}

.banner {
    background-image: url('./homebanner.jpg');
    background-color: black;
    height: 100vh;
    position: relative; /* Required for pseudo-element positioning */
}

.banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
}

/* Fade-in animation */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* Modal styles */
#imageModal {
    transition: opacity 0.3s ease-in-out;
    background-color: rgba(0, 0, 0, 0.7);
    
}

#modalImage {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

#closeModal {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}