:root{
    --main-color:#00b761;
    --secondary-color:yellow;
    --body-text:13px;
    --line-height:1.2;
    --heading1:40px;
    --heading2:28px;
    --heading3:22px;
    --heading4:18px;
    --heading5:16px;
    --heading6:14px;
}
*,*:before,*::after{
    margin:0;
    padding:0;
    font-family:"Racing Sans One";
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
    font-size: var(--body-text);
    transition: all .4s;
}
h1,h2,h3,h4,h5,h6,span,p,a,small{
    line-height: var(--line-height);
}
.top-bar{
    background-color: var(--secondary-color);
    display:flex;
    justify-content: center;
    align-items: center;
    padding:.2em 0;
    gap:30px;
    font-size: .7em;
}

@media(max-width:768px){
    .top-bar{
        flex-direction: column;
        gap:5px
    }
}
.top-bar .contacts-con{
    display: flex;
    gap:10px
}
nav{
    display:flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--main-color);
    box-shadow: white;
    padding:.9em 5em;
    position:sticky;
    top:0
}
nav a.logo img{
    display: block;
    width:60%;
    filter: brightness(100);
}
nav button{
    display: none;
}
@media(max-width:768px){
    nav{
        padding:.8em 1em
    }
    nav button{
        display: block;
        background-color: transparent;
        padding:.3em .5em;
        color: var(--secondary-color);
        cursor:pointer;
        border:none;
        font-size: 1em;
    }
}
nav .menus ul{
    display: flex;
    align-items: center;
    gap:10px
}
nav .menus{
    display: block;
}
nav .menus img{
    display: none;
}

nav .menus ul li a{
    color:white
}
@media(max-width:768px){
    nav .menus{
        position: fixed;
        top:0;
        left:-300px;
        width:300px;
        height:100vh;
        background-color: var(--secondary-color);
        display: grid;
        place-content: center;
        gap:10px
    }
    nav .menus img{
        display: block;
        width:70%;
        margin:auto
    }
    
    nav .menus ul{
        flex-direction: column;
    }
    nav .menus ul li a{
        color:var(--main-color);
        font-size: var(--heading2);
    }
}
.banner-main{
    background:url(https://www.envitia.com/wp-content/uploads/2022/04/innovation-header.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.banner-main .banner-wrapper{
    background: rgba(0, 0, 0, 0.671);
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:10px;
    padding: 0 200px
}
@media(max-width:768px){
    .banner-main .banner-wrapper{
        padding:0 1em;
    }
}
.banner-wrapper h1{
    font-size: var(--heading1);
    color:white

}
.banner-wrapper p{
    font-size: var(--body-text);
    color:white;
}
.banner-wrapper a.banner-action{
    padding:2em 10em;
    background-color: var(--main-color);
    color:white;
    display: block;
    border-radius: .4em;
    width: fit-content;
}
.banner-wrapper a.banner-action:hover{
    border:1px solid white;
    background-color: transparent;
    color:white;
}
@media(max-width:768px){
    .banner-wrapper a.banner-action{
        padding:1em 3em;
        font-size: var(--body-text);
    }
    .banner-wrapper h1{
        font-size: var(--heading1);
    }
}

.large-blank{
    height:100vh;
    display: grid;
    place-content: center;
    background-color: var(--main-color);
}
.large-blank h1{
    text-align: center;
    font-size: var(--heading1);
    color:var(--secondary-color)
}
.large-blank p{
    color:white;
    font-size: var(--body-text);
    text-align: center;
}
.large-blank p a{
    color:var(--secondary-color)
}
.sub-banner{
    height: 30vh;
    background-color: var(--secondary-color);
    color:var(--main-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.sub-banner h1,p{
    text-align: center;
}
.sub-banner h1{
    font-size: var(--heading1);
    text-transform: uppercase;
}
.sub-banner p{
    font-size: var(--body-text);
}


main{
    width:80%;
    margin:1em auto
}

.services{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap:10px;
}
@media(max-width:768px){
    main{
        width:98%;

    }
    .services{
        grid-template-columns: repeat(1,1fr);
    }
}
.service{
    border:1px solid whitesmoke;
    padding:2em;
}
.service h1{
    font-size: var(--heading2) !important;
}
.service p{
    font-size: var(--body-text) !important;
    text-align: left !important;
}
.service a{
    padding:.9em 1em;
    display: block;
    border:none;
    background-color: var(--main-color);
    color:var(--secondary-color);
    text-align: center;
    border-radius: .5em;
    width:fit-content
}