/*  GENERAL     <   */
html {
    font-size: 18px;
    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
}

    body {
        width: 100%;
    }

    a {
        text-decoration: none;
        color: black;
    }

    img {
        width: 100%;
    }

    .width-adjust {
        width: 70%;
    }

    section {
        margin: auto;
    }

    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
/*  GENERAL     >   */



/*   HEADER     <   */
header {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
    header img {
        width: 70%;
        margin: auto;
    }

    .navbar {
        display: flex;
        margin: auto;
    }
        .navbar a {
            margin: 1rem;
        }

        .navbar a:hover {
            text-decoration: underline;
        }
/*   HEADER     <   */





/*  HERO < */
.hero-content {
    margin: 2rem;

}
    .hero-content img {
        margin: auto;
    }

    .hero-content p {
        text-align: center;
        padding: 1rem 0rem;
        border-bottom: 1px solid;
        border-top: 1px solid;
    }

/*  HERO > */





/*  SERV - INC  <   */
    .servicii .grid {
        gap: 5px;
        margin: 3rem auto;        
    }
        .servicii .grid div {
            margin: 1rem;
        }
/*  SERV - INC  >   */





/*  COLLAGE     <   */
#collage {
    text-align: center;
}
    .collage-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
        margin: 3rem auto;
        padding-right: 1rem;
        height: 80vh;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    #collage ::-webkit-scrollbar {
        width: 20px;
      }
    
    #collage ::-webkit-scrollbar-thumb {
        background: rgb(0, 0, 0);
        width: 1rem;
    }

    #collage ::-webkit-scrollbar-track {
        background-color: rgba(128, 128, 128, 0.174);
    }
/*  COLLAGE     >   */





/*  CLIENTI     <   */
#Clienti {
    text-align: center;
    border-top: 1px solid;
}   
    #Clienti .collage-container {
        overflow-x: hidden;
        overflow-y: hidden;
        height: auto;
    }
        #Clienti img {
            margin: 1px;
            width: 10%;
        }
/*  CLIENTI     >   */





/*  CONTACT     <   */
#contact {
    display: flex;
    justify-content: space-evenly;
    margin: 3rem auto;
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
    width: 60%;
    font-size: 20px;
    text-align: center;
}
    #contact a {
        text-decoration: none;
        color: black;
    }

    .address {
        padding: 2rem 0rem;
    }
/*  CONTACT     >   */




/*  Footer < */
footer {
    display: flex;
    justify-content: space-between;
    margin: auto;
    color: rgba(128, 128, 128, 0.475);
}
    footer a{
        color: rgba(128, 128, 128, 0.475); 
        text-decoration: none;
    }

/*  Footer > */





@media (max-width:1400px) {     /*  1400px  */
    .navbar a {
        font-size: 12px;
        margin: 0.5rem;
    }

    .servicii .grid {
        grid-template-columns: 1fr;
    }

    .change-direction {
        display: flex;
        flex-direction: column-reverse;
    }
}

@media (max-width:1000px) {
    html {
        font-size: 15px;
    } 
    footer {
        margin-bottom: 2rem;
    }
}

@media (max-width:700px) {

    .width-adjust {
        width: 75%;
        margin-left: 5%;
    }

    .navbar {
        display: block;
    }
        .navbar a {
            font-size: 9px;
            margin: 1px;
        }
    
    .servicii .grid-container {
        grid-template-columns: 1fr;
    }

    .collage-container {
        grid-template-columns: 1fr;
    }

    #Clienti img {
        margin: 2px;
    }

    #contact {
        display: block;
        text-align: center;
        margin: auto;
        width: 100%;
    }
        .address {
            margin: 0;
            padding: 0rem 0rem 1rem 0rem;
        }
        #contact h1 {
            margin-bottom: 0;
            margin-top: 1rem;
        }

    footer {
        font-size: 12px;
    }
}