/* Reset básico */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f8ff; /* Fondo general azul claro */
    color: #03396c; /* Color principal del texto */
}

/* Estilo del navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 99%;
    background: #005b96; /* Azul oscuro para el fondo */
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    z-index: 1000;
}

.navbar .logo {
    font-size: 1.5rem;
    font-weight: bold;
}

.navbar .logo-text {
    color: white;
    font-size: 2rem; /* Tamaño grande para el texto */
    font-weight: bold; /* Hacer el texto en negrita */
    margin-left: 116px; /* Ajusta el margen para que el texto no se superponga al logo */
    position: absolute;
}

.navbar .menu {
    display: flex; /* Mostrar el menú en pantallas grandes */
    list-style: none;
}

.navbar .menu a {
    color: #fff;
    text-decoration: none;
    margin: 0 1rem;
    transition: color 0.3s;
}

.navbar .menu a:hover {
    color: #33a1fd; /* Azul claro para el hover */
}

/* Estilo de las secciones */
section {
    padding: 5rem 1rem;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Estilos específicos para cada sección */
#home {
    background: #87ceeb; /* Azul cielo */
}



#services {
    background: #4682b4; /* Azul acero */
    color: #fff; /* Texto en blanco */
}

#portfolio {
    background: #5f9ea0; /* Azul cadete */
    color: #fff; /* Texto en blanco */
}

#contact {
    background: #1e90ff; /* Azul dodger */
    color: #fff; /* Texto en blanco */
}

/* Estilo para la sección con el slider */
#home {
    position: relative;
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    overflow: hidden; /* Asegura que no se vea el contenido fuera de la sección */
}

.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    top:25px;
}

.slider {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out; /* Animación de transición para el slider */
}

.slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen ocupe todo el espacio sin deformarse */
}

/* Estilos para la sección de contacto */
#contact {
    padding: 2rem 1rem;
    background: #1e90ff; /* Azul dodger */
    color: white;
    text-align: center;
}

.contact-info {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    width: 80%;
}

.contact-info h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.contact-item {
    margin-bottom: 1.5rem;
    color: black;
}

.contact-item h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.contact-item ul {
    list-style-type: none;
    padding: 0;
}

.contact-item ul li {
    margin-bottom: 0.5rem;
}

.contact-item p {
    margin: 0.5rem 0;
}


/* Estilo del formulario */
.contact-item form {
    max-width: 800px; /* Ajusta el tamaño máximo */
    width: 80%; /* El formulario ocupará el 80% del ancho */
    margin: 0 auto; /* Centra el formulario */
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Asegurarse que el formulario se adapte bien a pantallas pequeñas */
@media (max-width: 768px) {
    .contact-item form {
        width: 90%; /* En pantallas pequeñas, el formulario ocupará el 90% */
    }
}


.contact-item .form-group {
    margin-bottom: 1rem;
}

.contact-item .form-group label {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.contact-item .form-group input,
.contact-item .form-group textarea {
    width: 100%;
    padding: 0.8rem;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.contact-item .form-group textarea {
    resize: vertical;
    min-height: 150px;
}

.contact-item button {
    background-color: #005b96;
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 4px;
    width: 100%;
    margin-top: 1rem;
}

.contact-item button:hover {
    background-color: #33a1fd;
}

/* Estilo para la sección de servicios */
#services {
    background: url('imgs/main.jpg') no-repeat center center; /* Ruta de tu imagen de fondo */
    background-size: cover; /* Hacer que la imagen cubra toda la sección */
    color: white; /* Texto en blanco */
    padding: 5rem 1rem;
    min-height: 100vh; /* Asegura que la sección ocupe toda la altura de la pantalla */
    text-align: center;
}


#services h2 {
    margin-left: 2rem; /* Deja un margen a la izquierda para el título */
    font-size: 2rem;
    font-weight: bold;
}

/* Estilos para los botones */
#services .service-button-container {
    display: flex;
    justify-content: center;
    gap: 2rem; /* Espaciado entre los botones */
    margin-top: 2rem;
}

#services .service-button {
    background: #005b96; /* Azul oscuro para los botones */
    color: #fff; /* Texto blanco */
    padding: 1rem 2rem;
    font-size: 1.2rem;
    border: 2px solid white; /* Agregar borde blanco */
    border-radius: 50px; /* Bordes redondeados */
    cursor: pointer;
    transition: background 0.3s, transform 0.3s, border-color 0.3s;
    width: 80%; /* Los botones ocupan el 80% del ancho */
    max-width: 300px; /* Maximo ancho de los botones */
}

#services .service-button:hover {
    background: #33a1fd; /* Cambiar a un azul más claro al hacer hover */
    transform: scale(1.1); /* Aumentar el tamaño del botón */
}

#services .service-button:active {
    transform: scale(0.9); /* Efecto cuando el botón se presiona */
}

/* Contenedor de "Our Services" dentro de una caja blanca */
#services .services-title-container {
    background: #fff; /* Caja blanca */
    padding: 2rem 3rem;
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    text-align: center; /* Centra el texto dentro de la caja */
    width: 80%; /* Ajusta el tamaño de la caja */
    max-width: 600px; /* Máximo ancho de la caja */
}

/* Estilo del título */
#services .services-title-container h2 {
    font-size: 2rem;
    font-weight: bold;
    color: #03396c; /* Color de texto principal */
}


/* Responsividad para dispositivos móviles */
@media (max-width: 768px) {
    #services .service-button-container {
        flex-direction: column; /* Asegura que los botones estén apilados verticalmente */
        align-items: center; /* Centra los botones */
        gap: 1rem; /* Reduce el espaciado entre los botones */
    }

    #services .service-button {
        width: 90%; /* Los botones ocupan el 90% del ancho del contenedor en pantallas pequeñas */
        padding: 1rem; /* Ajustamos el padding para que se vean bien */
        font-size: 1rem; /* Reducimos el tamaño de la fuente para pantallas pequeñas */
    }


}


/* Estilo para la sección de confirmación */
#confirmation {
    background: #f0f8ff; /* Fondo azul claro */
    padding: 5rem 1rem;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contenedor del mensaje de confirmación */
.confirmation-container {
    background: #fff; /* Fondo blanco */
    padding: 2rem 3rem;
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    text-align: center; /* Centrar el texto */
    width: 80%; /* Ancho ajustado */
    max-width: 600px; /* Máximo ancho */
}

/* Estilo para el título */
.confirmation-container h2 {
    font-size: 2rem;
    color: #03396c;
    font-weight: bold;
}

/* Estilo para el mensaje */
.confirmation-container p {
    font-size: 1.2rem;
    color: #03396c;
    margin: 1rem 0;
}

/* Estilo para el botón */
.btn-back {
    display: inline-block;
    padding: 1rem 2rem;
    background-color: #005b96;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2rem;
    transition: background-color 0.3s;
}

/* Efecto hover para el botón */
.btn-back:hover {
    background-color: #03396c;
}


  /* Sección "About Us" */
        #about-us {
            background: linear-gradient(135deg, #005b96, #03396c);
            color: white;
            padding: 60px 20px;
            text-align: center;
        }

        #about-us h1 {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        #about-us p {
            font-size: 1.2rem;
            line-height: 1.8;
            max-width: 800px;
            margin: 0 auto;
        }

        #about-us .highlight {
            font-weight: bold;
            color: #ffd700; /* Toque dorado para resaltar */
        }


/* boton de whatsapp */
.float{
  position:fixed;
  width:60px;
  height:60px;
  bottom:40px;
  right:10px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
  margin-top:16px;
}
/*----------------------------------*/




















/* Responsividad */
@media (max-width: 768px) {

    .navbar {
        flex-direction: column;
        padding: 1rem; /* Aumentamos el padding para mejorar el espaciado */
    }

    /* Menú oculto por defecto */
    .navbar .menu {
        display: none; /* Ocultamos el menú */
        flex-direction: column;
        align-items: flex-start; 
        position: absolute;
        top: 130px;
        left: 0;
        background: #005b96;
        width: 100%;
        text-align: left;
        padding: 0.5rem 0; /* Agregamos padding para mejor separación entre los items */
    }

    /* Cuando el menú está activo, lo mostramos */
    .navbar .menu.active {
        display: flex; /* Mostrar el menú */
    }

    /* Estilos para los elementos del menú */
    .navbar .menu a {
        padding: 1rem;
        width: 100%; /* Para que ocupe todo el ancho */
        border-bottom: 1px solid #03396c;
        margin: 0; /* Elimina los márgenes laterales */
    }

    .navbar .logo-text {
        color: white;
        font-size: 1rem; /* Tamaño grande para el texto */
        font-weight: bold; /* Hacer el texto en negrita */
        margin-left: 0; /* Elimina el margen izquierdo en móviles */
        position: absolute;
        top: 115px; /* Coloca el texto debajo del logo */
        left: 0;
        width: 100%;
        text-align: center;
    }



    /* Mostrar el botón de hamburguesa en pantallas pequeñas */
    .hamburger {
        display: block;
        font-size: 2rem;
        cursor: pointer;
        position: absolute;
        top: 60px;  /* Colocamos un poco más abajo para mejorar el espaciado */
        left: 20px; /* Colocamos a la derecha */
        z-index: 1001; /* Aseguramos que el botón esté por encima del menú */
    }

    /* Cambiar el color del botón hamburguesa */
    .hamburger:hover {
        color: #33a1fd;
    }
}

/* En pantallas grandes, ocultar el botón hamburguesa */
@media (min-width: 769px) {
    .hamburger {
        display: none; /* El botón hamburguesa no se muestra en pantallas grandes */
    }
}