body {
    /* background-color: #080810;  */
    background-image: url("/static/img/Group4.1379e52153e7.png");
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; /* Centra la imagen de fondo */
    /* background-size: auto; */
    /* background-attachment: fixed; Hace que la imagen de fondo esté fija
    background-position: center; Centra la imagen de fondo */
}

/*NAVBAR*/
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Agrega una sombra */
    z-index: 1000; /* Asegura que la navbar esté siempre encima de otros elementos */
    padding: 5px 0;
}

.navbar-nav {
    justify-content: right;
    width: 100%;
    gap: 3rem;
}

.navbar a {
    color: #B6FF00;
    font-size: 20px;
    text-decoration: none;
    padding: 5px 30px;
    font-family: "Goldman", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.navbar-collapse {
    display: flex;
    width: 100%;
}

.navbar a:hover {
    color: #9EA3A6; /* Cambia este color al que desees para el hover */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(182, 255, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.content {
    margin-top: 70px; /* Añade espacio para evitar que el contenido quede oculto detrás de la navbar */
    padding: 2rem;
    background: rgba(255, 255, 255, 0.8); /* Fondo blanco semitransparente para el contenido */
    border-radius: 10px;
}

/*HERO*/
.hero_title {
    color: #E5E8ED;
    font-family: "Goldman", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.highlight {
    color: #E5E8ED;
}

.hero_text {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #9EA3A6;
    font-size: 2rem;
}

/* ABOUT */
#about {
    background: rgba(8, 8, 16, 0.041); /* Fondo semi-transparente */
    backdrop-filter: blur(10px); /* Desenfoque de fondo */
    -webkit-backdrop-filter: blur(10px); /* Desenfoque de fondo para Safari */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Sombra para dar efecto de profundidad */
    
}

.row-about {
    display: flex; /* Asegura que sea un contenedor Flexbox */
    flex-wrap: wrap; /* Permite que los elementos se ajusten en múltiples líneas */
    justify-content: center; /* Centra horizontalmente los elementos */
    align-items: center; /* Centra verticalmente los elementos */
    margin: 0 auto; /* Asegura que el contenedor esté centrado */
}

.content-about {
    margin: 4rem 1rem;
    border-radius: 8px;  
}

.content-about h3 {
    font-family: "Goldman", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.9rem;
    color: #E5E8ED;
}

.content-about p {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #9EA3A6;
    font-size: 1.3rem;
    text-align: justify;
}

/* seccion skills */
#skills {
    margin-top: 7rem;
}
.section-skills {
    margin: 5rem 0;
    padding: 1rem 0;
}


.container-skills {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    row-gap: 2rem;
    margin: 3rem;
    padding: 10px;
}

.card-skills {
    color: #E5E8ED;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2;
    width: 8rem;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    text-align: center;
    font-size: 1rem;
    padding: 10px;
    border-radius: 8px;
}

.card-skills img {
    display: block;
    margin: 0 auto;
    width: 3rem;
    height: auto;
}



/* PROJECTS */

#projects {
    margin-top: 3rem;
}

.subtitle-projects {
    color:#9EA3A6;
    display: flex;
    justify-content: center; /* Alinea horizontalmente */
    align-items: center; /* Alinea verticalmente */
    text-align: center; /* Alinea el texto dentro del elemento */
    margin: 0 auto; /* Centra el contenedor en el espacio disponible */
    margin-bottom: 3rem;
}

.card {
    position: relative;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    color: #e4d5b4;
}

.card-img-top {
    height: 200px; /* Ajusta la altura de la imagen */
    object-fit: cover; /* Asegura que la imagen cubra el área */
}

.card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.card-title {
    color: #E5E8ED;
    font-family: "Goldman", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.card-text {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem; /* Reduce el tamaño de la fuente */
    line-height: 1.2; /* Ajusta la altura de la línea */
    margin-bottom: 10px; /* Ajusta el margen inferior */
    color: #9EA3A6;
}

.tags {
    margin-top: 10px;
}

.tag {
    display: inline-block;
    color: #593feb;
    padding: 5px 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 0.875rem;
}

.mt-auto {
    margin-top: auto;
    display: flex; /* Asegura la flexibilidad del contenedor de botones */
    justify-content: center; /* Centra horizontalmente los botones */
    flex-wrap: wrap; /* Permite que los botones se apilen verticalmente si es necesario */
}

/* Custom button styles */
.custom-btn {
    display: inline-flex; /* Alinea íconos y texto horizontalmente */
    align-items: center; /* Centra verticalmente íconos y texto */
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    margin: 5px; /* Añade margen entre botones */
}

.custom-btn i {
    margin-right: 8px; /* Espacio entre el ícono y el texto */
}

.custom-btn.btn-primary {
    background-color: transparent;
    border: none;
    color: #B6FF00;
    font-family: "Goldman", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.2rem;
}

.custom-btn.btn-primary:hover {
    background-color: transparent;
    border: none;
    color: #9EA3A6;
}

/* contacto */

#contact {
    margin-top: 4rem;
    margin-bottom: 7rem;
}

.container-form {
    border-radius: 7px;
    flex: 1;
    padding: 20px;
}

.container-form h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #9EA3A6;
}

.container-form p {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
    color: #9EA3A6;
}
  
.div-input {
    margin-bottom: 20px; /* Añade un espacio entre los campos del formulario */
}

.form-label {
    display: block;
    margin-bottom: 5px; /* Añade un espacio entre la etiqueta y el campo de entrada */
    color: #E5E8ED;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.1rem;

}
  
.item-form {
    width: 100%;
    padding: 10px;
    color: #E5E8ED;
    border: 1px solid #474747;
    background: rgba(168, 168, 168, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 4px; /* Añade bordes redondeados a los campos del formulario */
}

/* Aplica estilo al autocompletado en Chrome, Edge y otros navegadores basados en Chromium */
.item-form:-webkit-autofill {
    background-color: rgba(168, 168, 168, 0.2) !important; /* Color de fondo personalizado */
    color: #E5E8ED !important; /* Color del texto */
    -webkit-text-fill-color: #E5E8ED !important; /* Asegura que el color del texto no se sobrescriba */
    transition: background-color 5000s ease-in-out 0s; /* Evita que el fondo blanco predeterminado reaparezca */
}

/* Para Firefox (todavía no soporta autofill completo pero futuro-proofing) */
.item-form:autofill {
    background-color: rgba(168, 168, 168, 0.2);
    color: #E5E8ED;
}


.item-form:focus {
    color: #E5E8ED;
    background: rgba(168, 168, 168, 0.2); /* Color de fondo cuando el input está enfocado */
    border-color: #474747; /* Mantiene el color del borde cuando está enfocado */
    outline: none; /* Elimina el borde de enfoque predeterminado del navegador */
}

.item-form::placeholder {
    color: #9EA3A6; /* Color del placeholder */
    opacity: 1; /* Asegura que el color se aplique correctamente en todos los navegadores */
}

.item-form[type="submit"] {
    background-color: #B6FF00; /* Cambia el color de fondo del botón de envío */
    font-family: "Goldman", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #141C26;
    font-size: 20px;
    padding: 10px;
    border: none;
    cursor: pointer; /* Cambia el cursor a un puntero cuando se pasa sobre el botón de envío */
}
  
.item-form[type="submit"]:hover {
    background-color: #9EA3A6; /* Cambia el color de fondo del botón de envío cuando se pasa el cursor sobre él */
}

/* alertas mensajes*/
.alert {
    margin-top: 3px;
    position: relative; /* Necesario para posicionar el botón de cierre */
}
  
.btn-close {
    position: absolute;
    top: 50%;
    right: 10px; /* Ajusta el valor si necesitas más espacio */
    transform: translateY(-50%);
}

/* FOOTER */
footer {
    background-color: #000000;
    color: #B6FF00;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.div-content {
    padding: 5rem 0;
}

.div-content_text h3 {
    font-family: "Goldman", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.items-icon {
    text-align: center;
    margin-bottom: 1rem;
    color: #B6FF00;
    transition: color 0.3s;
}

.items-icon:hover {
    color: #9EA3A6;
}

hr {
    border-top: 1px solid #9EA3A6;
    margin: 0;
}

.div-copy {
    padding: 2rem 0;
}

.div-copy p {
    margin: 0;
}


/* ESTILOS GLOBALES */
.title-section {
    color: #E5E8ED;
    font-family: 'Goldman', sans-serif;
    font-weight: 700;
    font-style: normal;
    padding: 1rem;
    margin: 3rem auto;
    text-align: center;
    /* font-size: 3rem; */
}

.background-elements {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.836) 100%, rgba(165, 165, 165, 0.034) 100%);
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.226), -10px -10px 25px rgba(0, 0, 0, 0.233); /* Sombra para dar efecto de profundidad */
    border: 2px solid #2e2e2e79;
}

/* buttons */
.button-small {
    background-color: #f44e1a;
    font-family: 'roboto', sans-serif;
    font-weight: 500;
    color: #141C26;
    padding: 10px 20px;
    font-size: 16px;
    line-height: 1.5;
    border-radius: 3px;
    margin: 0 5px;
    border: none;
    cursor: pointer;
}

.button-small:hover { /* Estilos para el botón al pasar el cursor */
    background-color: #6fa700; /* Cambia el color de fondo al pasar el cursor */
}




.button-large {
    background-color: #B6FF00; /* Color de fondo del botón */
    font-family: "Goldman", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #111810; /* Color del texto del botón */
    border: none; /* Elimina el borde */
    font-size: 20px; /* Tamaño de fuente */
    padding: 10px 80px; /* Espaciado interno del botón */
    border-radius: 3px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
}

.button-large:hover { /* Estilos para el botón al pasar el cursor */
    background-color: #9EA3A6; /* Cambia el color de fondo al pasar el cursor */
}

/* Media Queries para diferentes tamaños de pantalla */
@media (max-width: 1024px) {
    /* seccion Skills */
    .card-skills {
        width: 50%; /* Ajusta el ancho en pantallas medianas */
    }

    .div-content {
        padding: 3rem 0;
    }

    /* seccion Footer */
    .div-content_icons {
        padding: 1rem 0; 
    }
}

@media (max-width: 768px) {
    /* seccion Skills */
    .card-skills {
        width: 70%; /* Ajusta el ancho en pantallas pequeñas */
    }

    .div-content {
        padding: 1rem 0;
    }

    /* seccion Footer */
    .div-content_icons {
        padding: 3rem 0; 
    }
}

@media (max-width: 480px) {
    /* seccion Skills */
    .card-skills {
        width: 90%; /* Ajusta el ancho en pantallas muy pequeñas */
    }

    .card-skills img {
        width: 48px; /* Ajusta el tamaño de la imagen en pantallas muy pequeñas */
    }
    
    /* seccion Footer */
    .div-content_icons {
        padding: 3rem 0; /* Ajusta el relleno en pantallas muy pequeñas */
    }

    .content-about p {
        font-size: 1rem;
        text-align: justify;
    }

    .custom-btn {
        width: 100%; /* Los botones ocupan todo el ancho */
        justify-content: center; /* Centra el contenido dentro de los botones */
    }
}