* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

}

html {
    height: 100%;
}

body {
    min-height: 100%;
    font-family: "Montserrat", sans-serif;
    font-size: 1.2rem;
    min-height: 100%;

}

.grid-container {
    box-shadow: -1px 1px 7px 0px rgb(0, 0, 0, 0.75);
    border-radius: 4px;
    padding: 10px;
    text-align: center;
}

.grid-container {
    display: grid;
    gap: 0px;
    grid-template-areas:
        "header"
        "navbar"
        "carrusel"
        "sidebar"
        "main"
        "info"
        "footer";
}

.header {
    grid-area: header;
    background-color: #5B208A;

}
.navbar {
    grid-area: navbar;
    background-color: #5B208A;
}

/*------navar menu-------*/

  
/*---navbar final-----*/
.carrusel {
    grid-area: carrusel;
    background-color: aquamarine;
}
.sidebar{
    grid-area: sidebar;
    background-color: aquamarine;
}
.main {
    grid-area: main;
    background-color: aquamarine;
}
.info{
    grid-area: info;
    background-color: aquamarine;
}
.footer{
    grid-area: footer;
    background-color: dimgray;
    color: white;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra los elementos en el eje principal */
    align-items: center; /* Centra los elementos en el eje secundario */
    position: relative;
}

/*  footer/*
  
    /*footerr */
    footer {
        background-color: #333;
        color: #fff;
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Centra los elementos en el eje principal */
        align-items: center; /* Centra los elementos en el eje secundario */
        position: relative;
    }
    .footer-left, .footer-right {
        flex: 1 1 50%;
        display: flex;
        flex-direction: column; /* Cambia la dirección del flex container a columna */
        justify-content: center;
        align-items: center;
        margin-bottom: 10px; /* Espacio entre las secciones en dispositivos pequeños */
    }
    .footer-left {
        justify-content: flex-start;
    }
    .footer-right {
        justify-content: flex-end;
        text-align: right; /* Alinea el texto a la derecha en dispositivos grandes */
    }
    .social-iconsOne {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .social-iconsOne li {
        margin-right: 10px;
        text-align: center; /* Alinea el texto de los íconos al centro */
    }
    .social-iconsOne li:last-child {
        margin-right: 0;
    }
    .social-iconsOne li a {
        color: #fff;
        text-decoration: none;
        font-size: 16px;
    }
    .contact-info {
        font-size: 15px;
    }
    .contact-info span {
        display: block;
        margin-bottom: 5px;
    }

    /* Media query para hacer el footer responsivo */
    @media screen and (max-width: 768px) {
        .footer-left, .footer-right {
            flex: 1 1 100%;
            justify-content: center;
            text-align: center;
        }
        .footer-right {
            margin-top: 10px; /* Espacio entre las secciones en dispositivos pequeños */
        }
    }
      /*footerr */

/* footer finaol /*
/* movil */
@media screen and (min-width: 300px) {
    .header img{
        width: 90px;
    }
    .main P{
        font-weight: 900;
        padding-top: 20px;
    }

    .grid-container {
        grid-template:
            "header header" 50px
            "navbar navbar" auto
            "carrusel carrusel" 300px
            "sidebar sidebar" auto
            "main main" auto
            "info info" auto
            "footer footer" 200px/
            200px auto;

    }

}

/*----------Lap mia------------ */
@media (min-width: 900px) {

    .header img{
        width: 100px;
    }
    
    .carrusel h1{
        font-weight: 900;
    }
    .info p{
        font-size: large;
    }
    
    .grid-container {
        grid-template:
            "header header header" 70px
            "navbar navbar navbar" 80px
            "carrusel carrusel carrusel" auto
            "sidebar sidebar sidebar" auto
            "main main main" auto
            "info info info" auto
            "footer footer footer" 100px/
            200px auto;

    }


}