/* ------------------------ BASE ------------------------ */



body{

    margin: 0;

    background-color: #39201Eff;

    font-family: "Zalando Sans Expanded", sans-serif;

    font-optical-sizing: auto;

    font-weight: 200;

    font-style: normal;   

}



/* NAVBAR */

#navbar{

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px;

    z-index: 1;

}



#div_logo{

    display: flex;

    justify-content: center;

    align-items: center;

}



#img_logo{

    display: flex;

    justify-content: center;

    align-items: center;

    max-height: 120px;

    width: auto;       

}



#div_login{

    display: flex;

    justify-content: right;

    align-items: center;

}



#div_login:hover{

    cursor: pointer;

}



/* icona login */

#icona_login{

    color:#E2AD78ff;

    margin-right:20px;

    font-size:40px;

}



/* link arrotondati */

#div_link {

    display: flex;

    justify-content: center;

    align-items: center;

    border: 1px solid #E2AD78ff;

    border-radius: 50px;

    margin-top: 20px;

}



#div_link a {

    text-decoration: none;

    color: #E2AD78ff;

    padding: 10px 20px;   

    border-radius: 20px;    

    display: flex;          

    align-items: center;

}



#div_link a:hover {

    border: 1px solid #E2AD78ff;

    color: #ffffff;

}



#div_link a.active {

    border: 1px solid #E2AD78ff;

    color: #ffffff;

    background-color: rgba(226, 173, 120, 0.15);

}



/* FOOTER */

footer{

    color: #E2AD78ff;

    text-align: center;

    padding: 10px 0;

    display: flex;

    justify-content: space-around;

    align-items: center;

}



#link_footer_privacy{

    color: #E2AD78ff;

    text-decoration: none;

    font-size: 14px;

}



#img_logo_footer{

    height: 300px;

}



.social-links{

    color: #E2AD78ff;

    margin-top:15px; 

}



.link_social{

    color: #E2AD78ff;

    margin: 20px 15px 10px 15px; 

    font-size: 30px;

    transition: 0.3s;

}



.social-links a:hover {

    transform: scale(1.2);

    opacity: 0.8;

}



#footer_info{

    display:flex;

    justify-content:center;

    gap: 50px;

    color:#E2AD78ff;

    font-size:14px;

    flex-wrap:wrap;

    text-align:center;

    margin-bottom: 50px;

}



/* CONTENUTO PAGINA MISSION */

#container{

    display: flex;

    align-items: center;

    justify-content: center;

}



#container_2{

    display: flex;

    align-items: center;

    justify-content: center;

    width: 50%;

}



#title_mission{

    display: flex;

    justify-content: center;

    align-items: center;

    color: #E2AD78ff;

    font-size: 40px;

    background-color: #39201Eff;

    border-radius: 15px;

    border: 1px solid #39201Eff;

    width: 300px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);

    height: 400px;

    text-align: center;

}



#content_mission{

    display: flex;

    justify-content: center;

    align-items: center;

    color: #39201Eff;

    font-size: 25px;

    background-color: #E2AD78ff;

    border-radius: 15px;

    border: 1px solid #39201Eff;

    width: 800px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);

    height: 300px;

    text-align: center;

    padding: 20px;

}





/* ------------------------ TABLET ------------------------ */

@media (max-width: 1023px) {



    #navbar {

        flex-wrap: wrap;

        gap: 15px;

    }



    #img_logo {

        max-height: 100px;

    }



    #icona_login {

        font-size: 35px;

        margin-right: 0;

    }

    /* Sezione mission */

    #container {

        flex-direction: column;

        padding: 20px;

    }



    #container_2 {

        width: 90%;

        flex-direction: column;

        gap: 20px;

    }



    #title_mission {

        width: 100%;

        height: auto;

        font-size: 32px;

        padding: 20px;

    }



    #content_mission {

        width: 100%;

        height: auto;

        font-size: 20px;

    }

}





/* ------------------------ TELEFONO ------------------------ */

@media (max-width: 767px) {



    body {

        overflow-x: hidden;

    }



    #navbar{

        flex-direction: column;

        gap: 15px;

    }



    #img_logo{

        max-height: 80px;

    }



    #icona_login{

        font-size: 30px;

        margin-right: 0;

    }



    #div_link{

        flex-wrap: wrap;

        padding: 5px;

    }



    #div_link a{

        padding: 8px 12px;

        font-size: 13px;

    }



    /* Mission responsive */

    #container,

    #container_2 {

        width: 100%;

        flex-direction: column;

        padding: 10px;

        box-sizing: border-box;

    }



    #title_mission {

        width: 95%;

        height: auto;

        font-size: 26px;

        padding: 15px;

    }



    #content_mission {

        width: 95%;

        height: auto;

        font-size: 16px;

        padding: 15px;

    }



    /* Footer */

    footer {

        flex-direction: column;

        gap: 20px;

    }



    #img_logo_footer {

        height: 180px;

    }



    #footer_info {

        font-size: 12px;

        gap: 15px;

    }

}