/* Custom styles */
body {
    font-family: 'Poppins', sans-serif;
}

.logo a {
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: #000;
}

header {
    border-bottom: 1px solid #ddd;
}

header .nav-link {
    color: #000;
    text-decoration: none;
    margin: 0 10px;
}

header .nav-link:hover {
    color: #a43085;
}

section {
    padding: 60px 0;
}

footer {
    background: #333;
    color: #fff;
}

/* Estilos para la sección Contact */
.section-title h2 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.section-title p {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
}

/* Estilos base para las cards */
.info-box {
    background-color: rgba(255, 255, 255, 0.1); /* Fondo semitransparente */
    border-radius: 10px; /* Bordes redondeados */
    padding: 20px;
    transition: all 0.3s ease; /* Transición para suavizar el hover */
    color: #fff; /* Texto blanco */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0); /* Sin sombra por defecto */
}

/* Efecto hover en las cards */
.info-box:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Aumenta la transparencia */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Agrega sombra al hacer hover */
    transform: translateY(-5px); /* Mueve ligeramente hacia arriba */
}

/* Estilo de los íconos en las cards */
.info-box i {
    color: #a43085; /* Ícono en color rosa pastel */
    transition: color 0.3s ease;
}

/* Cambio del color del ícono al hacer hover */
.info-box:hover i {
    color: #fff; /* Cambia a blanco al hacer hover */
}

/* Estilo para los textos */
.info-box h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #fff; /* Títulos en blanco */
}

.info-box p {
    color: #e0e0e0; /* Texto en gris claro */
    font-size: 0.9rem;
}


/* Contact Section */
#contact {
    position: relative;
    background: url('images/3.jpg') no-repeat center center/cover; /* Reemplaza con tu imagen */
    color: #fff; /* Texto en blanco para contraste */
    overflow: hidden; /* Oculta cualquier desbordamiento */
    z-index: 1; /* Asegura que el contenido esté por encima */
    padding: 5rem 0; /* Ajusta el espaciado según sea necesario */
}

#contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Oscurece el fondo */
    filter: blur(5px); /* Aplica desenfoque */
    z-index: -1; /* Coloca la capa detrás del contenido */
}

/* Texto dentro de la sección */
#contact h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: #fff; /* Título en blanco */
}

#contact p {
    color: #e0e0e0; /* Texto secundario más claro */
}

.info-box h4 {
    color: #fff; /* Títulos dentro de las cajas */
    font-weight: bold;
}

.info-box p {
    color: #e0e0e0; /* Texto dentro de las cajas */
}

/* Map Container */
.map-container iframe {
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* About Us Section */
#about .video-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#about .video-container img {
    width: 100%;
    height: auto;
}

#about .video-container .play-btn {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-decoration: none;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

#about .video-container .play-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

#about .about-text h2 {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

#about .about-text p {
    color: #555;
    font-size: 16px;
    line-height: 1.6;
}

#about .feature {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
}

#about .feature h5 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

#about .feature p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* Home Section */
#home {
    height: 100vh;
    background: url('images/back.jpg') no-repeat center center/cover;
    position: relative;
}

#home .overlay {
    background: rgba(0, 0, 0, 0.6); /* Oscurece el fondo */
    height: 100%;
    width: 100%;
}

#home .text-accent {
    color: #be6ed6;
}

#home h1 {
    color: #fff;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

#home p {
    color: #d1d1d1;
    font-size: 18px;
}

/* Navbar base style */
.navbar {
    transition: all 0.3s ease-in-out;
    z-index: 999;
}

/* Transparente para Home */
.navbar.bg-transparent {
    background-color: transparent !important;
    box-shadow: none;
}

/* Fondo blanco con texto oscuro para otras secciones */
.navbar.scrolled {
    background-color: #fff !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.navbar.scrolled .nav-link {
    color: #a43085 !important; /* Morado oscuro */
}

.navbar.scrolled .navbar-brand {
    color: #a43085 !important; /* Morado oscuro */
}

.nav-link {
    color: #fff !important; /* Blanco para fondo transparente */
    transition: color 0.3s ease-in-out;
}

.nav-link:hover {
    text-decoration: underline;
}
/* Navbar */
.navbar-nav {
    gap: 20px; /* Espaciado entre las opciones */
}

.navbar-collapse {
    justify-content: center; /* Centrar las opciones del navbar */
    background-color: transparent; /* Fondo por defecto */
    transition: background-color 0.3s ease;
    text-align: center;

}

.navbar-collapse.show {
    background-color: rgba(0, 0, 0, 0.9); /* Fondo más oscuro cuando está expandido */
}

.navbar .nav-item {
    text-align: center;
}

/* Cambia el color del ícono hamburguesa */
.navbar-toggler {
    border: none;
}

.navbar-toggler-icon {
    background-color: transparent;
    border: 2px solid #a43085; /* Morado oscuro */
    border-radius: 4px;
    padding: 4px;
    transition: all 0.3s ease;
}

.navbar.scrolled .navbar-toggler-icon {
    border-color: #a43085; /* Morado oscuro para fondo blanco */
}

.navbar.scrolled .navbar-toggler {
    background-color: #a43085; /* Fondo morado oscuro para destacar el botón */
}


.navbar-nav .nav-item .nav-link {
    cursor: pointer;
}

/* Button */
.btn-accent {
    background-color: #a43085;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}

.btn-accent:hover {
    background-color: #4c274e;
    color: #fff;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}


/* Estilos para la sección Services */
#services {
    position: relative;
    background: url('images/services.jpg') no-repeat center center/cover;
    color: #fff; /* Texto en blanco para contrastar */
    z-index: 1; /* Asegura que el contenido esté por encima */
    overflow: hidden; /* Oculta cualquier desbordamiento */
}

#services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Oscurece el fondo */
    filter: blur(5px); /* Aplica desenfoque */
    z-index: -1; /* Coloca la capa detrás del contenido */
}

/* Ajustes para el contenido */
#services h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    z-index: 1; /* Asegura que el título esté sobre el fondo */
}

#services .col-md-4 h4 {
    font-size: 1.5rem;
    margin-top: 1rem;
}

#services .col-md-4 p {
    font-size: 1rem;
    color: #e0e0e0; /* Texto ligeramente más claro */
}



#services i{
    color: #df92be;
}

/* Estilos específicos para pantallas pequeñas */
@media (max-width: 991px) {
    .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.8) !important; /* Fondo oscuro solo en móvil */
    }

    .navbar-collapse.show {
        background-color: rgba(0, 0, 0, 0.9) !important; /* Fondo más oscuro cuando está expandido */
    }

    .navbar-collapse .nav-link {
        color: #fff !important; /* Opciones en blanco para mayor visibilidad */
    }

    .navbar-toggler {
        border: none;
    }

    .navbar-toggler-icon {
        color: #fff; /* Botón hamburguesa en blanco */
    }
}

/* Estilos para pantallas grandes (escritorio) */
@media (min-width: 992px) {
    .navbar-collapse {
        background-color: transparent !important; /* Fondo transparente en escritorio */
    }

    .navbar .nav-link {
        color: #ffffff !important; /* Color morado para las opciones */
    }

    .navbar .nav-link:hover {
        text-decoration: underline;
    }
}

/* Portfolio Section */
.portfolio-item {
    position: relative;
    overflow: hidden;
}

.portfolio-img img {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Fondo semitransparente oscuro */
    color: #fff; /* Texto en blanco */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Oculta el overlay inicialmente */
    transition: opacity 0.3s ease;
}

.portfolio-overlay h4 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.portfolio-overlay p {
    font-size: 1rem;
    margin: 0;
}

/* Hover Effect */
.portfolio-item:hover .portfolio-overlay {
    opacity: 1; /* Muestra el overlay */
}

.portfolio-item:hover img {
    transform: scale(1.1); /* Zoom sobre la imagen */
    opacity: 0.8; /* Reduce la opacidad de la imagen */
}


/* Estilo para el logo */
.navbar-brand .logo {
    height: auto;
    max-height: 50px; /* Ajusta este valor según la altura deseada */
    width: auto;
    display: block;
}