/* Estilos generales */
body {
    font-family: 'Arial', sans-serif;
}

/* Navbar */
.navbar {
    position: sticky;
    top: 0; /* Se pega en la parte superior */
    z-index: 1000; /* Asegura que el navbar esté por encima de otros elementos */
    width: 100%; /* Ocupa todo el ancho */
    background-color: #fff; /* Fondo del navbar (puedes cambiarlo según tu diseño) */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra para dar un efecto de elevación */
}
/* Estilos para el navbar al hacer scroll */
.navbar-scrolled {
    background-color: #f8971d !important; /* Cambia el fondo a naranja */
    transition: background-color 0.3s ease; /* Transición suave */
}

.navbar-scrolled .nav-link {
    color: white !important; /* Cambia el color del texto a blanco */
}

.navbar-scrolled .navbar-brand img {
    filter: brightness(0) invert(1); /* Cambia el logo a blanco */
}
.navbar-brand img{
    max-height: 50px;
}
/* Hero Slider */
.hero-slider .carousel-item {
    height: 500px;
    background-size: cover;
    background-position: center;
}

.hero-slider .carousel-item:nth-child(1) {
    background-image: url('casa.jpeg');
}

.hero-slider .carousel-item:nth-child(2) {
    background-image: url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
}

.hero-slider .carousel-item:nth-child(3) {
    background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
}

.hero-slider .carousel-caption {
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 10px;
}

/* Servicios Section */
.services-section {
    padding: 60px 0;
}

.service-card {
    margin-bottom: 30px;
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
}

/* Galería Section */
.gallery-section {
    padding: 60px 0;
    background-color: #f8f9fa;
}

.owl-carousel .item img {
    border-radius: 10px;
}

/* Nosotros Section */
.bg-light {
    background-color: #f8f9fa;
}

/* Contacto Section */
form {
    max-width: 600px;
    margin: 0 auto;
}
/* Estilos para la sección de contacto */
#contacto {
    background-color: #f8971d; /* Fondo naranja */
    color: white; /* Color del texto en blanco para contrastar */
    padding: 60px 0; /* Ajusta el padding según sea necesario */
}

/* Ajustes adicionales para los elementos dentro de la sección de contacto */
#contacto h2 {
    color: white; /* Color del título en blanco */
}

#contacto .form-label {
    color: white; /* Color del texto de las etiquetas del formulario */
}

#contacto .form-control {
    background-color: rgba(255, 255, 255, 0.8); /* Fondo semi-transparente para los inputs */
    border: 1px solid #ccc; /* Borde para los inputs */
    color: #333; /* Color del texto dentro de los inputs */
}

#contacto .form-control::placeholder {
    color: #666; /* Color del placeholder */
}

#contacto .btn-primary {
    background-color: #333; /* Color de fondo del botón */
    border-color: #333; /* Color del borde del botón */
    color: white; /* Color del texto del botón */
}

#contacto .btn-primary:hover {
    background-color: #555; /* Color de fondo del botón al pasar el mouse */
    border-color: #555; /* Color del borde del botón al pasar el mouse */
}

#contacto .contact-info h4 {
    color: white; /* Color de los títulos de la información de contacto */
}

#contacto .contact-info p {
    color: white; /* Color del texto de la información de contacto */
}

#contacto .social-icons a {
    color: white; /* Color de los iconos de redes sociales */
}

#contacto .social-icons a:hover {
    color: #333; /* Color de los iconos al pasar el mouse */
}

/* Footer */
.footer {
    background-color: #333;
    color: white;
    padding: 20px 0;
}