@import url('https://fonts.googleapis.com/css?family=Varela+Round&display=swap');

    /* COLOR SCHEME
        color: #2ecc71; 
    */

body {
    margin: 0;
    font-family: 'Varela Round', sans-serif;
}

*{
    box-sizing: border-box;
}

h1{
    color: white;
}

.btn{
    justify-self: center;
    width: auto;
    font-family: 'Varela Round', sans-serif;
    font-weight: 500;
    font-size: 1.2em;
    letter-spacing: 1px;
    text-decoration: none;
    color:white;
    background: #2ecc71;
    /* border:#2ecc71 2px solid; */
    padding: 7px 23px 7px 23px;
    border-radius: 50px;
    margin-top: 30px;
}

.btn:hover{
    color:#2ecc71;
    background: white;
    /* border: white 2px solid; */
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.nav-collapse-content {
    padding: 0 32px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }

#showcase{
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;
    width: 100%;
    height: 50vh;

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

#showcase-overlay{
    width: 100%;
    height: 50vh;
    position: absolute;
    background: #333;
    opacity: 0.7;
    z-index: 1;
}

#showcase-content{
    position: relative;
    z-index: 2;

    display: grid;
    justify-content: center;
}

.separator{
    min-height: 35vh;
    background-image: linear-gradient(90deg, #2ecc71 0%, #27b462 100%);
    color: white;
    display: grid;
    align-items: center;
    justify-content: center;
    padding: 32px 15%;
    text-align: center;
}

.container{
    padding: 0 15%;
    margin-top: 50px;
    margin-bottom: 100px;

}

#devis{
    padding: 100px 15%;
}

#devis h2{
    text-align: center;
}

.categories-list{
    margin-top: 72px; 
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    gap: 32px;
}

.categories-list a{
    color: #666;
}

.categories-list a:hover{
    text-decoration: none;
    color: #2ecc71;
}

.box{
    width: 200px;
    height: 200px;

    padding: 0 10px;
    display: grid;
    align-content: center;
    text-align: center;
    border: rgb(233, 233, 233) 2px solid;
    border-radius: 10px;
}

.box img{
    justify-self: center;
    margin-bottom: 16px;
    width: 72px;
    height: 72px;
}

.box:hover{
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    font-weight: 600;
    border-color: white;
}

.title{
    padding-top: 50px;
    text-align: center;
}

.center{
    display: grid;
    justify-content: center;
    margin-top: 24px;
}

.separator-forgot{
    min-height: 35vh;
    background-image: linear-gradient(90deg, #2ecc71 0%, #27b462 100%);
    color: white;
    display: grid;
    justify-content: center;
    align-content: center;
    padding: 32px 15%;
}

.separator-forgot .btn{
    border-color: white;
    background: white;
    color: #2ecc71;
}

.separator-forgot .btn:hover{
    border-color:#2ecc71;
    background: #2ecc71;
    color: white;
}

#outro{
    background: #f4f4f4;
    height: 65vh;

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

#outro img{
    width: 400px;
}


#footer{
    min-height: 15vh;
    background: #333;

    display: grid;
    justify-content: center;
    align-items: center;
    color: #acacac;
    padding: 30px 0;
}

#footer *{
    padding: 0;
    margin: 0;
}

#footer a{
    color: #acacac;
}

#footer a:hover{
    color: #1aa4b8;
    text-decoration: none;
}

#footer #footer-social img{
    height: 50px;
    width: auto;
}

#footer-social #ig{
    padding: 5px;
}

/* TABLET */
@media (max-width: 980px) {
    h2{
        font-size: 1.7em;
    }

    #showcase{
        padding: 16px;
        text-align: center;

    }

    .separator{
        padding-top: 72px;
        padding-bottom: 72px;
        /* text-align: center; */
    }

    #footer{
        padding: 30px 15px;
        text-align: center;
    }
}

/* PHONE*/
@media (max-width: 630px) {
    #devis{
        padding: 100px 32px;
    }

    #devis .categories-list{
        grid-template-columns: 1fr;
    }

    .box{
        width: 100%;
        height: 200px;
    }

    .title{
        padding-bottom: 32px;

    }

    .separator-forgot{
        text-align: center;
    }

    #outro{
        padding: 15%;
    }

    #outro img{
        width: 100%;
    }
}