@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700i&display=swap');

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

body {
    font-family: 'Roboto Mono', monospace;
}

:root{
    --light:#fff;
    --dark:#181b24;
    --gray:#899495;
    --orange:#fc5130;
    --sectionGray:#f2f2f2;
    --sectionWhite:#fff;
    --blue: #0066cc;
    --transpGray: rgba(137, 148, 149, 0.5);
}

/* nav */
.nav{
    background: var(--light)
}
.nav__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 0.25rem 1rem;
    border-bottom: 0.5rem solid var(--dark);
}
.nav__wordmark {
    font-size: 4rem;
    margin: .5rem 0;
}
.nav__btn {
    font-size: 3rem;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    color: var(--gray);
}
.nav__links {
    list-style-type: none;
    background: var(--transpGray);
}
.nav__single-link {
    display: block;
    text-decoration: none;
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    font-style: italic;
    text-transform: capitalize;
    color: var(--blue);
    -webkit-transition: all .15s linear;
    -o-transition: all .15s linear;
    transition: all .15s linear;
}
.nav__single-link:hover {
    background: var(--light);
    padding-left: 1.5rem;
    cursor: pointer;
}
.nav__links {
    height: 0;
    overflow: hidden;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.show__links {
    height: 288px;
}
@media screen and (min-width: 768px){
    .nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        border-bottom: 0.5rem solid var(--dark);
    }
    .nav__header {
        border: none;
    }
    .nav__btn {
        display: none;
    }
    .nav__links {
        /* as child */
        background: transparent;
        height: auto;
        -webkit-box-flex: 1;
            -ms-flex: 1 0 auto;
                flex: 1 0 auto;
        /* as parent */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        -ms-flex-item-align: center;
            align-self: center;
    }
    .nav__single-link {
        background: transparent;
        -webkit-box-flex: 1;
            -ms-flex: 1 0 100px;
                flex: 1 0 100px;
    }
    .nav__single-link:hover {
        padding-left: 1rem;
        color: var(--dark);
    }

}
/* end of nav */

/* header */
.header {
    min-height: 100vh;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.4)), to(rgba(255, 255, 255, 0.1))), url(./img/beach-sand-lake-bcg.jpg)center/cover fixed no-repeat;
    background: -o-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1)), url(./img/beach-sand-lake-bcg.jpg)center/cover fixed no-repeat;
    background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1)), url(./img/beach-sand-lake-bcg.jpg)center/cover fixed no-repeat;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
/* end of header */

/* banner */
.banner {
    /* as a flex child */
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    /* as a parent */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    color: var(--dark);
    text-align: center;
    padding-bottom: 4rem;
    font-weight: 700;
}

.banner__title {
    font-size: 3rem;
    letter-spacing: 0.15rem;
    margin-bottom: 0.5rem;
    font-style: italic;
    text-transform: capitalize;
    opacity: 0.6;
}

.banner__jobs {
    letter-spacing: 0.15rem;
    text-transform: capitalize;
    font-size: 1.5rem;
    color: var(--light);
    opacity: 0.6;
}
/* end of banner */

/* about section */
.about {
    padding: 2rem 0;
    background: var(--sectionWhite);
}
.about__center {
    max-width: 90vw;
    margin: 2rem auto;
}
.about-img {
    margin: 3rem 0;
    position: relative;
}
.about-img__photo {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.about-img:before {
    content: "";
    background: var(--gray);
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -10px;
    left: -10px;
}
.about-info{
    margin: 3rem 0;
}
.about-info__title {
    font-size: 3rem;
    text-transform: capitalize;
    letter-spacing: 0.5rem;
    background: url('./img/trees-b-bcg.jpg')no-repeat;
    color: var(--light);
}
.about-info__text {
    color: var(--gray);
    line-height: 1.5;
    font-size: 1.2rem;
    margin: 3rem 0;
}
.about-info__single-link {
    display: inline-block;
    text-decoration: none;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
    text-transform: capitalize;
    border: 3px solid var(--dark);
    -webkit-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    transition: all 0.25s linear;
    margin-right: 1rem;
}

.dark-btn {
    background: var(--dark);
    color: var(--light);
}
.dark-btn:hover {
    background: var(--light);
    color: var(--dark);
}

.light-btn {
    color: var(--dark);
}
.light-btn:hover {
    background: var(--dark);
    color: var(--light);
}

@media screen and (min-width:992px){
    .about__center {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    .about-info, .about-img {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 calc(50% - 1rem);
                flex: 0 0 calc(50% - 1rem);
    }
    .about-info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end;
    }
}
/* end about section */
.section-title {
    text-align: center;
}
/* section title */
.section-title__name {
    font-size: 4rem;
    letter-spacing: 0.5rem;
    background: url('./img/rivers-rowers-bcg.jpg')center no-repeat;
    text-transform: capitalize;
    font-weight: 700;
    font-style: italic;
    color: var(--light);
}
/* end of section title */

/* services section */
.services {
    background: var(--sectionGray);
    padding: 3rem 0;
}
.services__center {
    max-width: 90vw;
    margin: 2rem auto;
}
.services__single-service {
    margin: 2rem auto;
    text-align: center;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 2rem 0;
}
.services__single-service:hover {
    background: var(--light);
    -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1);
            box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1);
}
.services__single-service-icon {
    font-size: 3rem;
}
.services__single-service-title {
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 1rem;
    letter-spacing: 0.2rem;
}
.services__single-service-text {
    width: 80%;
    margin: 0 auto;
    text-align: left;
    line-height: 1.5;
    letter-spacing: 0.2rem;
}


@media screen and (min-width: 768px){
    .services__center {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    .services__single-service{
        -webkit-box-flex: 0;
            -ms-flex: 0 0 calc(50% - 0.5rem);
                flex: 0 0 calc(50% - 0.5rem);
    }
}

@media screen and (min-width: 992px){
    .services__single-service {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 calc(33.333% - 0.25rem);
                flex: 0 0 calc(33.333% - 0.25rem)
    }
}
/* end services section */

/* numbers section */
.numbers {
    padding: 3rem 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), to(rgba(0,0,0,0.2))), url(./img/kids-lake-bcg.jpg)center/cover no-repeat fixed;
    background: -o-linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(./img/kids-lake-bcg.jpg)center/cover no-repeat fixed;
    background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(./img/kids-lake-bcg.jpg)center/cover no-repeat fixed;
    color: var(--light)
}
.numbers__center {
    max-width: 95vw;
    margin: 2rem auto;
}
.numbers__single-number {
    text-align: center;
    margin: 2rem 0;
}
.numbers__single-number-icon {
    font-size: 3rem;
}
.numbers__single-number-title {
    text-transform: uppercase;
    letter-spacing: 0.25rem;
}

@media screen and (min-width: 576px){
    .numbers__center {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    .numbers__single-number {
        -webkit-box-flex:0;
            -ms-flex:0 0 calc(50% - 0.5rem);
                flex:0 0 calc(50% - 0.5rem);
    }
}
@media screen and (min-width: 992px){
    .numbers__single-number {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 calc(25% - 0.25rem);
                flex: 0 0 calc(25% - 0.25rem)
    }
}
/* end of numbers section */

/* projects section */
.projects {
    padding: 3rem 0;
    background: var(--light);
}
.projects__center {
    max-width: 90vw;
    margin: 2rem auto;
}
.projects__single-project {
    margin: 2rem auto;
    position: relative;
}
.projects__single-project-img {
    display: block;
    width: 100%;
    border-radius: 0.25rem;
}
.projects__single-project:before {
    content: '';
    background: var(--dark);
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    opacity: 0;
}
.projects__single-project:hover:before {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    opacity: 0.5;
}
.projects__single-project-icon {
    color: var(--light);
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 5rem;
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);
    opacity: 0;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.projects__single-project-icon:hover {
    color: var(--gray);
}
.projects__single-project:hover .projects__single-project-icon {
    opacity: 1;
    -webkit-transform: scale(1) translate(-50%, -50%);
        -ms-transform: scale(1) translate(-50%, -50%);
            transform: scale(1) translate(-50%, -50%);
}

@media screen and (min-width: 768px){
    .projects__center {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .projects__single-project {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 calc(50% - 0.5rem);
                flex: 0 0 calc(50% - 0.5rem);
    }
}
@media screen and (min-width: 992px){
    .projects__single-project {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 calc(25% - 0.5rem);
                flex: 0 0 calc(25% - 0.5rem);
    }
}
/* end of projects section */

/* contact section */
.contact {
    background: var(--sectionGray);
    padding: 3rem 0;
}
.contact__center {
    max-width: 80vw;
    margin: 2rem auto;
}
.contact__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 2rem 0;
}
.contact__name, .contact__email, .contact__textarea {
    background: transparent;
    border: none;
    border-bottom: 3px solid var(--dark);
    padding: 0.25rem 0;
    margin: 2rem 0;
    font-size: 1.2rem;
}
.contact__name, .contact__email {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(50% - 1rem);
            flex: 0 0 calc(50% - 1rem);
}
.contact__textarea {
    width: 100%;
}
.contact__btn {
    background: var(--dark);
    color: var(--light);
    display: block;
    margin: 0 auto;
    padding: 0.5rem 1rem;
    margin-top: 2rem;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5rem;
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
.contact__btn:hover {
    background: var(--light);
    color: var(--dark);
    border-color: var(--dark);
}
.contact__icon {
    margin-right: 0.5rem;
}
/* end of contact section */

/* footer */
.footer {
    background: var(--dark);
    padding: 3rem 0;
}
.footer__icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
}
.footer__single-icon {
    font-size: 2rem;
    color: var(--light);
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.footer__single-icon:hover {
    color: var(--gray);
}
/* end footer */