body { font-family: Arial, sans-serif; margin: 0; color: #333; background-color: #f4f4f4;  }
header { text-align: center; padding: 20px; background-color: #ffffff; }
.logo { max-width: 300px; }
nav { background-color: #333; text-align: center; padding: 10px; }
nav a { color: white; margin: 0 15px; text-decoration: none; }
section { padding: 20px; max-width: 1200px; margin: 0 auto; }
#hero { position: relative; text-align: center; color: black; }
.hero-image { width: 100%; height: 400px; object-fit: cover; }
/*.hero-text { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); animation: fade 20s forwards;}*/
.section-image { width: 100%; max-height: 300px; object-fit: cover; margin-bottom: 20px; }
.svcs_section-image { width: 100%; object-fit: cover; margin-bottom: 20px; }

form { max-width: 600px; margin: 0 auto; }
form label { display: block; margin: 10px 0 5px; }
form input, form textarea { width: 100%; padding: 10px; margin-bottom: 10px; }
form button { padding: 10px 20px; background-color: #333; color: white; border: none; cursor: pointer; }
footer { background-color: #333; color: white; text-align: center; padding: 10px; }

.fade-out {
    animation: fade 2s forwards;
}

@keyframes fade {
    0% {
        opacity: 1;
        visibility: visible;
    }
    99% {
        opacity: 0;
        visibility: visible;
    }
    100% {
        visibility: hidden;
    }
}


/* Responsive */
@media (max-width: 768px) {
    .hero-text h1 { font-size: 24px; }
    nav a { display: block; margin: 10px 0; }
}