/* Reset de estilos básicos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* Navbar */

header {
    background-color: rgba(51, 51, 51, 0.6); /* Fondo con transparencia */
    color: #fff;
    padding: 0.3rem;
    position: fixed; /* Fijar la barra de navegación en la parte superior */
    width: 100%;
    height: 13%;
    z-index: 1000; /* Asegurarse de que la barra de navegación esté encima del contenido */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

body {
    margin-top: 70px; /* Altura de la barra de navegación, ajusta según sea necesario */
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    font-family: 'Exo 2';
}

.logo {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.7rem;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.logo a{
    color: #fff;
}

.logo a:hover{
    color: #fff;
    text-decoration: none;
    background-color: chocolate;
    border-radius: 500%;
}

.nav-list {
    list-style: none;
    display: flex;
}

.nav-list li {
    margin-right: 15px;
}

.nav-list a {
    text-decoration: none;
    color: #fff;
    padding: 2%;

}

.nav-list a:hover {
    background-color: rgba(255, 136, 0, 0.623); /* Cambia el color de fondo al pasar el puntero por encima */
    color: #e2e2e2; /* Cambia el color del texto al pasar el puntero por encima */
    text-decoration: none;
    padding: 5%;
    border-radius: 50%;
    transition: background-color 0.4s, border-radius 0.4s;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Carousel */
.carousel {
    width: 100%;
    overflow: hidden;
    z-index: 1;
}

.logo img {
    width: 60px; /* Ajusta el tamaño según tus necesidades */
    margin-right: 10px; /* Ajusta el margen derecho según tus necesidades */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.carousel img {
    width: 100%;
    height: auto;
    display: none;
}

footer {
    background-color: rgba(51, 51, 51, 0.6); /* Fondo con transparencia */
    color: #fff;
    position: fixed;
    bottom: 0; /* Fija la barra de navegación en la parte inferior */
    width: 100%;
    height: 6%;
    z-index: 1000; /* Asegurarse de que la barra de navegación esté encima del contenido */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    


}

.social {
    text-align: center;
    font-size: 95%;
    text-decoration: none;
}
    


.social i {
    color: #0097fc; /* Puedes cambiar este color según tus preferencias */
    font-size: 15px; /* Ajusta el tamaño del icono según sea necesario */
    margin-right: 3px;
    margin-top: 1%;
}

.social a {
    text-decoration: none;
    color: #fff;
    padding:0.4rem;
    font-family: 'Exo 2';
}

.social a:hover {
    background-color: rgba(255, 136, 0, 0.623);
    color: #e2e2e2;
    text-decoration: none;
    padding: 0.2rem;
    border-radius: 50%;
    transition: background-color 0.4s, border-radius 0.4s;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.designed{
    font-family: 'Exo 2';
    text-align: right;
    font-size: 70%;
    padding-right: 1rem;
    margin-top: -1rem;
    color: rgb(236, 233, 233);
    
}

.direction{
    font-family: 'Exo 2';
    font-size: 80%;
    text-align: left;
    margin-left: 1%;
    margin-top: -2.5%;
}