:root{
    --red_nav_background: #F20400;
    --grey_footer_background: #15151E;
    --grey_footer_border: #38383F;
    --f1-regular: 'f1-regular';
    --f1-bold: 'f1-bold';
    --f1-wide: 'f1-wide';
    --TitilliumWeb_light: 'TitilliumWeb-Light';
    --TitilliumWeb_regular: 'TitilliumWeb-regular';
    --TitilliumWeb_bold: 'TitilliumWeb-bold';
}

/* ----------------------------------------------------------FUENTES---------------------------------------------------------- */
@font-face {
    font-family: 'f1-regular';
    src: url(../assets/fonts/Formula1-Regular.otf);
}
.fuente_f1_reg{
    font-family: 'f1-regular';
}

@font-face {
    font-family: 'f1-bold';
    src: url(../assets/fonts/Formula1-Bold.otf);
}
.fuente_f1_bold{
    font-family: 'f1-bold';
}

@font-face {
    font-family: 'f1-wide';
    src: url(../assets/fonts/Formula1-Wide.otf);
}
.fuente_f1_wide{
    font-family: 'f1-wide';
}

@font-face {
    font-family: 'TitilliumWeb-Light';
    src: url(../assets/fonts/TitilliumWeb-Light.ttf);
}
.fuente_tw_Light{
    font-family: 'TitilliumWeb-Light';
}

@font-face {
    font-family: 'TitilliumWeb-Regular';
    src: url(../assets/fonts/TitilliumWeb-Regular.ttf);
}

.fuente_tw_regular{
    font-family: 'TitilliumWeb-Regular';
}

@font-face {
    font-family: 'TitilliumWeb-bold';
    src: url(../assets/fonts/TitilliumWeb-Bold.ttf);
}
.fuente_tw_bold{
    font-family: 'TitilliumWeb-Bold';
}
/* }-------------------------------------------------------------------------------------------------------------------- */


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
}
::selection{
    background-color: #F20400;
    color: #fff;
}


/* ----------------------------------------------- nav ----------------------------------------------------*/
header{
    background-color: #F20400;
    position: sticky;
    top: 0;
    z-index: 10000;
}

nav{
    min-height: 3.75em;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav .container_logo_f1{
    margin-left: 3.125em;
    margin-top: 5px;
    & img{
        width: 7.8em;
    }
}

.img_burger_menu{
    display: none;
    cursor: pointer;
}

ul{
    list-style: none;
    font-family: var(--f1-regular);
    font-size: 17px;
    color: #fff;
    width: 100%;

    display: flex;
    justify-content: center;
}

.ul_principal > li > a{
    padding: 1.1em;
    color: #fff;
    border-bottom: 3px solid #F20400;
    transition: all .3s;
    display: flex;
}

.ul_principal > li > a:hover{
    background-color: #15151E;
}

.container_icon_perfil{
    background-color: #15151E;;
    min-width: 2.8em;
    min-height: 2.8em;
    border-radius: 9px;
    margin-right: 4.13em;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: all .2s ease;
}

.container_icon_perfil:hover{
    background-color: #20202e;
    cursor: pointer;
    transform: scale(1.05);
}

.container_icon_perfil img{
    width: 1.8em;
}
/*-----------------------------------------------------------------------------------------------------*/


/*----------------------------- menú para mobile RESPONSIVE--------------------------------------------*/
.menu_desplegable_oculto{
    /* display: none; */
    display: flex;
    justify-content: center;
    
    background-color: #F20400;

    position: fixed;
    left: 0;
    /* top: 3.75em; */
    top: -19em;
    z-index: 100;

    width: 100%;

    transition: all .4s;
}
    
.menu_desplegable_oculto .ul_secundario{
    width: 100%;
    padding: 1em 3em;
    display: grid;
    grid-template-columns: 1fr;
}

.menu_desplegable_oculto .ul_secundario li{
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom-right-radius: 1em;

    width: 100%;
    margin-bottom: 1em;

}

.ul_secundario a{
    height: 2em;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr 1fr;

    transition: all .2s;

    & > span{
        justify-self: end;
        margin-right: 1.5em;
        transition: all .2s;
    }
}

.ul_secundario a:hover{
    transform: translateX(.5em);
}


.mostrar_menu{
    top: 3.75em;
    transition: all .4s;
    
}
/*-----------------------------------------------------------------------------------------------------*/





/*------------------------------------bkgrds equipos--------------------------------------------------*/
.backgroundRedbull{
    background-color: #3671C6;
    color: #3671C6;
}

.backgroundRb{
    background-color: #6692FF;
    color: #6692FF;
}

.backgroundFerrari{
    background-color: #E80020;
    color: #E80020;
}

.backgroundWilliams{
    background-color: #64C4FF;
    color: #64C4FF;
}

.backgroundHaas{
    background-color: #B6BABD;
    color: #B6BABD;
}

.backgroundAlpine{
    background-color: #0093CC;
    color: #0093CC;
}

.backgroundAston_martin{
    background-color: #229971;
    color: #229971;
}

.backgroundKick_sauber{
    background-color: #52E252;
    color: #52E252;
}

.backgroundMercedes{
    background-color: #27F4D2;
    color: #27F4D2;
}

.backgroundMclaren{
    background-color: #FF8000;
    color: #FF8000;
}

/*-----------------------------------------------------------------------------------------------------*/



















.desplegable_pilotos,
.desplegable_equipos,
.desplegable_cronograma,
.desplegable_mas{
    border-bottom: 2px solid #F20400;
}

.fondo_del_nav_seleccionado_al_hacer_hover_en_desplegable{
    background-color: #15151E;
}




/*---------------------------------------desplegable pilotos--------------------------------------------*/
.nav_pilotos:hover + .desplegable_pilotos,
.desplegable_pilotos:hover{
    display: block;
    left: 0;
    top: 3.5em;
}

.desplegable_pilotos{
    display: none;
    position: absolute;
    padding: 3em 5em;
    background-color: #15151E;
    width: 100%;

    & .container_titulos{
        border-right: 2px solid #38383F;
        border-bottom: 2px solid #38383F;
        border-bottom-right-radius: 10px;
        padding-bottom: 1em;

        & .titulo_all_drivers,
        .titulo_salon_fama{
            color: #fff;
            margin-right: 4em;

            & >span{
                color: #F20400;
            }
        }

        .titulo_all_drivers:hover,
        .titulo_salon_fama:hover{
            text-decoration: underline #F20400;
            text-underline-offset: 5px;
        }
    }
}

.contenedor_pilotos{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1em 4em;
    margin-top: 2em;

    & .piloto{
        display: flex;
        align-items: center;

        height: 2em;
        padding-bottom: .5em;
        font-size: .9em;

        border-right: 2px solid #38383F;
        border-bottom: 2px solid #38383F;
        border-bottom-right-radius: 10px;
        transition: all .2s;
    }
    
    .rectangulo_vertical{
        width: .4em;
        height: .9em;
        margin-right: 1em;
    }

    .nombre{
        width: 80%;
        color: #fff;

        & .apellido{
            margin-left: .6em;
        }
    }

    .pico{
        width: 10%;
        padding-bottom: .1em;
        transition: all .2s;
        font-size: 1.4em;
        color: #fff;
    }

    a:hover .pico{
        transform: translateX(.5em);
    }

}
/*-----------------------------------------------------------------------------------------------------*/

/*---------------------------------------desplegable equipos--------------------------------------------*/
.nav_equipos:hover + .desplegable_equipos,
.desplegable_equipos:hover{
    display: block;
    left: 0;
    top: 3.5em;
}

.desplegable_equipos{
    display: none;
    position: absolute;
    width: 100%;
    padding: 3em 5em;
    background-color: #15151E;

    & .equipo{
        font-size: 1.4em;
        position: relative;
        border-right: 2px solid #38383F;
        border-bottom: 2px solid #38383F;
        border-bottom-right-radius: .7em;
        width: 90%;
        transition: all .4s;

        & > div{
            display: flex;
            justify-content: space-between;
        }
        div > span{
            margin-right: 1em;
            transition: all .4s;
        }

        > img{
            position: relative;
            z-index: 20;
            left: .6em;
            filter: brightness(.7);
            width: 206px;
        }
    }

    .titulo{ 
        border-right: 2px solid #38383F;
        border-bottom: 2px solid #38383F;
        border-bottom-right-radius: 10px;
        display: block;
        padding-bottom: 1em;
        span{
            color: #F20400;
        }
    }
    .titulo:hover{
        text-decoration: underline #F20400;
        text-underline-offset: 5px;
    }

    .contenedor_equipos{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
        max-height: 60vh;
        overflow: auto;



        gap: 1em;
        margin-top: 2.5em;

        & .rectangulo_de_color{
            color: #15151E;
            position: absolute;
            z-index: 10;
            bottom: 1.1em;
            width: 1.8em;
            height: 1em;
        }
    }
}

/*--------------------------------------------scroll---------------------------------------*/
/*esto va combinado con q al contenedor_equipos le tengo q poner el overflow auto y con el max-height*/

.contenedor_equipos::-webkit-scrollbar{ /* este debe estar para "activar" la scrollbar?*/
    width: 10px;
}
.contenedor_equipos::-webkit-scrollbar-thumb {
    background-color: #38383F; /*parte que se mueve*/
    border-radius: 10px;
    height: 5px;
}

.contenedor_equipos::-webkit-scrollbar-track {
    background-color: #15151E; /*parte quieta*/
}

/*----------------------------------------------------------------------------------------*/

.desplegable_equipos a{
    color: white;
}

.desplegable_equipos a:hover span{
    transform: translateX(.5em);;
}

.equipo:hover img{
    filter: brightness(1);
}

.redbull{
    background-image: linear-gradient(to right,#15151E, #3671C6);
}
.borde_redbull:hover{
    border-bottom-color: #3671C6;
    border-right-color: #3671C6;
}
.borde_redbull:hover span{
    color: #3671C6;
}

.rb{
    background-image: linear-gradient(to right,#15151E, #6692FF);
}
.borde_rb:hover{
    border-bottom-color: #6692FF;
    border-right-color: #6692FF;
}
.borde_rb:hover span{
    color: #6692FF;
}

.ferrari{
    background-image: linear-gradient(to right,#15151E, #E80020);
}
.borde_ferrari:hover{
    border-bottom-color: #E80020;
    border-right-color: #E80020;
}
.borde_ferrari:hover span{
    color: #E80020;
}

.williams{
    background-image: linear-gradient(to right,#15151E, #64C4FF);
}
.borde_williams:hover{
    border-bottom-color: #64C4FF;
    border-right-color: #64C4FF;
}
.borde_williams:hover span{
    color: #64C4FF;
}

.haas{
    background-image: linear-gradient(to right,#15151E, #B6BABD);
}
.borde_haas:hover{
    border-bottom-color: #B6BABD;
    border-right-color: #B6BABD;
}
.borde_haas:hover span{
    color: #B6BABD;
}

.alpine{
    background-image: linear-gradient(to right,#15151E, #0093CC);
}
.borde_alpine:hover{
    border-bottom-color: #0093CC;
    border-right-color: #0093CC;
}
.borde_alpine:hover span{
    color: #0093CC;
}

.aston_martin{
    background-image: linear-gradient(to right,#15151E, #229971);
}
.borde_aston_martin:hover{
    border-bottom-color: #229971;
    border-right-color: #229971;
}
.borde_aston_martin:hover span{
    color: #229971;
}

.kick_sauber{
    background-image: linear-gradient(to right,#15151E, #52E252);
}
.borde_kick_sauber:hover{
    border-bottom-color: #52E252;
    border-right-color: #52E252;
}
.borde_kick_sauber:hover span{
    color: #52E252;
}

.mercedes{
    background-image: linear-gradient(to right,#15151E, #27F4D2);
}
.borde_mercedes:hover{
    border-bottom-color: #27F4D2;
    border-right-color: #27F4D2;
}
.borde_mercedes:hover span{
    color: #27F4D2;
}

.mclaren{
    background-image: linear-gradient(to right,#15151E, #FF8000);
}
.borde_mclaren:hover{
    border-bottom-color: #FF8000;
    border-right-color: #FF8000;
}
.borde_mclaren:hover span{
    color: #FF8000;
}

/*--------------------------------------------------------------------------------------------------------------------*/



/*---------------------------------------------desplegable resultados------------------------------------------------------*/
.nav_resultados:hover + .desplegable_resultados,
.titulos-nav:hover .desplegable_resultados{
    display: flex;
    visibility: visible;
    left: 0;
    top: 3.5em;
}

.desplegable_resultados{
    background-color: #15151E;
    position: absolute;
    left: 0;
    top: 3.5em;

    width: 100%;
    padding: 3em 5em;

    display: flex;
    visibility: hidden;
    gap: 3em;

    & .desplegable_resultados_de_equipos,
    .desplegable_resultados_de_pilotos{

        width: 100%;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        & a{
            color: #fff;
            font-size: 1.5em;
            margin-bottom: 1em;
        }
        .cada_equipo_o_piloto_del_desplegable{
            color: #fff;
            font-size: 1em;
            padding: .3em;

            display: flex;
            justify-content: space-evenly;

            border-top: solid #38383F 2px;
            border-right: solid #38383F 2px;
            border-top-right-radius: 1em;


            & img{
                width: 7em;
            }
            div{
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
            }

            span{
                background-color: #000;
                padding: .2em .5em;
                border-radius: 1em;
            }
        }
    }

    .desplegable_resultados_de_equipos{
        gap: 1em;
    }


    .desplegable_resultados_de_pilotos{
        & .cada_equipo_o_piloto_del_desplegable img{
            width: 5.2em;
        }
    }

    .titulo_desplegable_resultados{
        & span{
            color: #F20400;
        }
    }

    .titulo_desplegable_resultados:hover{
        text-decoration: underline #F20400;
    }

    .cada_equipo_o_piloto_del_desplegable:hover{
        border-color: #F20400;
    }
}
/*--------------------------------------------------------------------------------------------------------------------*/



/*---------------------------------------------desplegable calendario------------------------------------------------------*/
.nav_cronograma:hover + .desplegable_cronograma,
.desplegable_cronograma:hover{
    display: block;
    left: 0;
    top: 3.5em;
}

.desplegable_cronograma{
    display: none;

    background-color: #15151E;
    position: absolute;
    left: 0;
    top: 3.5em;

    width: 100%;
    padding: 3em 5em;

    & .container_titulos{ 
        border-right: 2px solid #38383F;
        border-bottom: 2px solid #38383F;
        border-bottom-right-radius: 10px;
        padding-bottom: 1em;
        span{
            color: #F20400;
        }
    }

    .titulo{
        color: #fff;
        margin-right: 4em;
    }
    .titulo:hover{
        text-decoration: underline #F20400;
        text-underline-offset: 5px;
    }
}

.contenedor_gps{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3.1em;
    margin-top: 2.5em;

    overflow: visible;
    max-height: 60vh;
    padding-right: 1em;
}

/*--------------------------------------------scroll---------------------------------------*/
/*esto va combinado con q al contenedor_gps le tengo q poner el overflow auto y con el max-height */

.contenedor_gps::-webkit-scrollbar{ /* este debe estar para "activar" la scrollbar?*/
    width: 10px;
}
.contenedor_gps::-webkit-scrollbar-thumb {
    background-color: #38383F; /*parte que se mueve*/
    border-radius: 10px;
    height: 5px;
}

.contenedor_gps::-webkit-scrollbar-track {
    background-color: #15151E; /*parte quieta*/
}

/*----------------------------------------------------------------------------------------*/
.gp{
    position: relative;

    padding: .8em .8em 0 .8em;
    padding-left: 0;
    color: #fff;
}

.borde_gris_gp{
    border-top: solid .7em #38383F;
    border-right: solid .7em #38383F;
    border-top-right-radius: 2em;
}
.borde_transp_gp{
    border-top: solid .7em #15151E;
    border-right: solid .7em #15151E;
    border-top-right-radius: 2em;
}

.t_posicionado1,
.t_posicionado2,
.t_posicionado3{
    position: absolute;
    background-color: #15151E;
    top: -1.1em;
}
.t_posicionado1{
    width: 5.5em;
}
.t_posicionado2{
    width: 6.1em;
}
.contenedor_img_titulo_gp{
    border-right: solid 1px #15151E;
    border-bottom: solid 1px #15151E;

    border-radius: 1em;
    border-bottom-left-radius: 0;

    overflow: hidden;
}

.gp img{
    width: 100%;
    height: auto;
    
    transition: all .2s;
}

.contenedor_titulo_gp{
    border-bottom-right-radius: 1em;
    padding-bottom: .5em;
    transition: all .2s;

    & .titulo_gp{
        font-size: .8em;
        color: #38383F;
        background-color: #15151E;
        padding: 1.1em 0 1.5em 0;
    }
    .fecha_gp{
        width: 100%;
        display: grid;
        grid-template-columns: 85% 15%;

        & span{
            color: #38383F;
            transition: all .2s;
        }
    }
}

.fondo_delGP{
    position: relative;
    filter: brightness(.5);
    transition: all .2s;

    & .nav_nombre_del_gp{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        width: 100%;
        text-align: center;
        font-size: 1.4em;
    }
}


.gp:hover .contenedor_titulo_gp{
    border-right: solid 1px #F20400;
    border-bottom: solid 1px #F20400;
}

.gp:hover span{
    color: #fff;
    transform: translateX(1em);
}

.gp:hover .fondo_delGP{
    filter: brightness(.8);
    transform: scale(1.1);
}


/*--------------------------------------------------------------------------------------------------------------------*/

/*-------------------------------------------desplegable_mas   --------------------------------------------------*/
.nav_mas:hover + .desplegable_mas,
.desplegable_mas:hover{
    display: block;
}

.desplegable_mas{
    display: none;
    background-color: #15151E;

    position: absolute;
    left: 0;
    top: 3.5em;

    width: 100%;
}

.contenedor_de_titulos_mas{
    margin: 3em 5em;
    padding-bottom: 1em;

    border-right: 2px solid #38383F;
    border-bottom: 2px solid #38383F;
    border-bottom-right-radius: 10px;

    & a{
        color: #fff;
        margin-right: 4em;
    }

    a:hover{
        text-decoration: underline #F20400;
        text-underline-offset: 5px;
    }
    span{
        color: #F20400;
    }
}
/*--------------------------------------------------------------------------------------------------------------------*/




















/* ------------------------------------------------- footer -----------------------------------------------------*/
footer{
    background-color: #15151E;
    min-height: 31em;
    display: flex;
    flex-direction: column;

    & .footer_s1{
        display: flex;
        flex-direction: column;
        min-height: 12em;
        border-bottom: 2px solid #38383F;
        margin: 0 3em;
        padding-bottom: 1.5em;
        
        & .div1 {
        display: flex;
        justify-content: center;
        align-items: center;
        
            img{
                width: 100px;
            }

            .footer_titulo{
                color: #fff;
                font-size: 1.2em;
                padding-left: 0.5em;
                padding-bottom: 0.3em;
            }
        }
        
        .div2 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
            width: 100%;
            place-items: center;
            row-gap: 2.5em;
            
            /* display: flex; */
            /* width: 65em; */
            justify-content: space-between;
            /* align-items: center;
            align-self: center; */
            
        }
    }

    .footer_s2{

        /* display: grid; */
        /* grid-template-columns: repeat(auto); */
        /* min-height: 13.5em; ------------------------------------------------------------------------------------HACERRRRR*/
        display: flex;
        /* flex-direction: row;  */
        min-height: 13.5em;
        min-width: 80%;
        margin: 2em 3em 0.2em 3em; /*-----------------------*/
        border: 7px solid #38383F;
        border-left: none;
        border-top: none;
        border-bottom-right-radius: 3em ;

        & .seccion_links{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
            min-width: 60%;
            /* grid-template-columns: 1fr 1fr 1fr;
            width: 60em; */
            margin-left: 8em;
            padding-bottom: 2em;

            & div{
                display: grid;
                grid-template-rows: 1fr 1fr 1fr;
                gap: 0;
                /*
                flex-direction: column; 
                align-items: center;
                justify-content: center;
                */
            }

            div a{
                color: #fff;
                margin-bottom: 1.5em;
                font-size: 1.3em;
                width: 80%;
                height: 2em;
                text-align: start;
                text-decoration: underline #15151E;
                transition: all .2s;
            }

            div a:hover{
                text-decoration: underline #F20400;
                text-underline-offset: .2em ;
            }

        }

        .seccion_redes {
            width: 40%;

            & .div_redes_1{
                
                display: grid;
                grid-template-columns: 1fr 1fr;
                justify-content: space-around;
                /* display: flex;
                justify-content: space-evenly; */

                & .redes_a_pirelli{
                    margin-right: -7em;
                }

                .redes_a_fia img{
                    width: 5em;
                    padding-top: 1.8em;
                }

                .redes_a_pirelli img{
                    width: 7em;
                }
            }

            .div_redes_2 {
                min-height: 5.7em;
                width: 20em;
                display: grid;
                grid-template-columns: repeat(4,1fr);
                /* display: flex; */
                /* justify-content: center;
                align-items: center; */

            }
            .div_redes_2 a{
                width: 2.5em;
                height: 2.5em;
                margin: .8em;
                position: relative;
            }
            .div_redes_2 .img_facebook{
                width: 2.4em;
                height: 2em;
                margin-right: 1em;
            }
            .div_redes_2 .img_x{
                width: 3em;
                height: 2.6em;
                margin-right: 1em;
                position: absolute;
                left: -.35em;
            }
            .div_redes_2 .img_instagram{
                width: 1.8em;
                height: 1.8em;
                margin-right: 1em;
                position: absolute;
                top: .3em;
                left: .23em;
            }
            .div_redes_2 .img_youtube{
                width: 3.7em;
                height: 1.6em;
                margin-right: 1em;
                position: absolute;
                top: .4em;
                left: -.8em;
            }
        }
    }

    .footer_s3{
        min-height: 2.1em;
        display: flex;
        justify-content: space-between;
        margin: .7em 3em;
        align-items: center;

        & img{
            width: 7em;
        }

        p {
            font-size: 0.8em;
            color: #38383F;
        }
    }
}

/*-----------------------------------------------------------------------------------------------------*/


@media screen and (max-width: 1355px) {

    #br_relleno{
        display: none;
    }

    .contenedor_de_titulos_mas{
        & a{
            margin-right: 2em;
        }
    }

    .contenedor_gps{
        overflow: auto;
    }

    .footer_s2{
        flex-direction: column;
        align-items: center;
    }

    .seccion_links{
        margin: 0 !important;
        place-items: center;
    }

    .seccion_redes{
        width: 100%;
        margin: 0 !important;
        align-content: center;

        & .div_redes_1{
            justify-items: center;
        }

        .div_redes_2{
            min-width: 100%;
            justify-items: center;
        }

        .redes_a_pirelli{
            margin: 0 !important;
        }
    }
}

@media screen and (max-width: 915px){
    nav ul{
        display: none;
    }

    nav .container_logo_f1{
        margin-left: 0;
    }

    .img_burger_menu{
        display: block;
        margin-left: 3em;
    }
}

@media screen and (max-width: 750px) {

    nav .container_logo_f1 img{
        width: 6.5em;
    }

    .img_burger_menu{
        margin-left: 1em;
    }

    .container_icon_perfil{
        margin-right: 1em;
    }

    .container_icon_perfil{
        min-width: 2.5em;
        min-height: 2.5em;
    }
    
    .container_icon_perfil img{
        width: 1.5em;
    }

    .menu_desplegable_oculto .ul_secundario{
        padding: 1em;
    }

    /* .desplegable_mas .contenedor_de_titulos_mas a{
        margin-right: .5em;
    } */

    .seccion_links{
        height: 22em;
    }
    .seccion_redes{
        min-width: 100%;
    }

    .footer_s3{
        flex-direction: column;
        gap: 1em;
        
        & p{
            text-align: center;
        }
    }

}

@media screen and (max-width: 412px){
    nav .container_logo_f1 img{
        width: 6em;
    }

    .footer_s1{
        & .div2{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr !important;
            gap: 1em;

            & img{
                width: 6em;
            }
        }
    }
}