/*site styles*/

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&family=Fjalla+One&family=Inconsolata:wght@300&display=swap');    
@font-face {
    font-family: SpaceFont;
    src: url(../fonts/SpaceFont.ttf);
}
@font-face {
    font-family: Grounday;
    src: url(../fonts/Grounday.ttf);
}

:root {
    --green: #66ad4c;
    --dark-green: #3d6f2b;
    --light-gray: #dadad6;
    --white: #fcfcfc;
    --black: #1C1D1E;
    --text: #404040;
    --jacks-br: 3px;
    line-height: 1;
    font-size: 17px;
    font-weight: 300;
    font-family: 'Fira Sans', 'Segoe UI', Tahoma, Verdana, sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;            
}

img, video {
    max-width: 100%;
}

p, li {
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
}

h1, h2, h4 {
    font-family: 'Fjalla One', Impact, Arial, sans-serif;
    line-height: 1.5;
    margin: 10px 0;
}

.heroic {
    font-family: 'Grounday', 'Segoe UI', Tahoma, Verdana, sans-serif; 
    font-weight: normal;
    color: var(--black);
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.35rem;
}

h3 {
    font-size: 1em;
    font-family: 'Fira Sans';
    text-transform: uppercase;
    font-weight: 300;
}

h5 {
    color: var(--white);
    font-weight: 400;
    margin: 10px 0;
}

a {
    color: var(--green);
    text-decoration: none;
}

a:hover, a:focus {
    color: var(--dark-green);
    text-decoration: underline;
}

.button {
  background: var(--green);
  border-radius: 50px;
  box-shadow: var(--dark-green) 0 10px 20px -10px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  outline: 0 solid transparent;
  padding: 8px 18px;
  line-height: 1.7;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: fit-content;
  word-break: break-word;
  border: 0;
  transition: .2s ease-in-out;
}

.button:hover {
    transform: scale(.95);
    text-decoration: none;
    color: #FFFFFF;
    box-shadow: var(--dark-green) 0 6px 14px -8px;
}

.center {
    text-align: center;
}

.start {
    align-self: start !important;
}

.relative {
    position: relative;
}

.light-text {
    color: var(--white);
}

.dark-green {
    color: var(--dark-green);
}

.bigger {
    font-size: 2.25em;
}

.flex {
    display: flex;
    flex-flow: row wrap;
}

.flex-item {
    box-sizing: border-box;
}

.whole {
    width: 100%;
}

.half {
    width: 50%;
}

.grid {
    display: grid;
}

.grid div, .grid ul, .grid img {
    align-self: center;
}

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

.twinsies-varA{
    grid-template-columns: 35% 60%;
}

.twinsies-varB{
    grid-template-columns: 60% 35%;
}

.triad {
    grid-template-columns: repeat(3, 1fr);
}

/*nav*/

#mobile-menu {
    display: none;
}

nav {
    position: fixed;
    top: 0;
    z-index: 10;
}

nav a:hover {
    color: var(--white);
    text-decoration: none;
}

.menu-nav {
    justify-content: space-evenly;
    padding: 0 2% 0 15%;
}

#logo {
    cursor: pointer;
}

#socials li {
    list-style: none;
    display: inline;
    margin: 0 15px;
}

#socials li {
    font-size: 11px;
    margin: 0 0 0 5px;
}

#socials img {
    width: 25px;
}

.hasSubmenu {
    position: relative;
}

.submenu {
    display: none;
    position: absolute;
    text-align: left;
    background: var(--black);
    padding: 10px;
    width: 260px;
    border-bottom: 1px solid var(--dark-green);
    border-left: 1px solid var(--dark-green);
    border-right: 1px solid var(--dark-green);
}

.submenu div {
    padding: 10px;
}

.hasSubmenu:hover .submenu {
    display: block;
}

#menu {
    background: var(--black);
    padding: 15px 3vw;
    grid-template-columns: 1fr 9fr 2fr;
}

.hero {
    min-height: 75vh;
    color: var(--white);
    margin-top: 75px;
    padding: 5% 0 0;
    background:#111;
}

.hero h1 {
    font-size: clamp(3vw, 5vw, 7vw);
    text-transform: uppercase;
    text-align: center;
    float: left;
    padding: 10% 0 0 3%;
}

.laptop {
    position: relative;
    aspect-ratio: 17 / 11;
    width: 50%;
    background-image: url(../img/laptopBlank.png);
    background-size: cover;
    background-position: center center;
    left: 70%;
    transform: translateX(-50%);
}

section {
    padding: 50px 10%;
}

.subtitle {
    text-align: center;
    letter-spacing: 2px;
}

/*attribute*/

.attribute section {
    min-height: unset;
    padding: 0;
}

.attribute h2, .attribute p {
    line-height: 1.25;
}

.attribute h2 {
    margin: 50px 0 0;
}

.attribute p {
    margin: 0;
}

.attribute section.hero {
    margin-top: 88px;
    background: var(--black);
    background-image: url(../img/green-ink.jpg);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    color: var(--white);
    min-height: 50vh;
    position: relative;
}

.attribute .hero h1 {
    position: absolute;
    bottom: 20px;
    left: 10%;
}

.attribute .section2.grid {
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    grid-auto-rows: 1fr;
}

.attribute #grid-item1 {
    background: var(--black);
    height: 100%;
    overflow: hidden;
}

.attribute #grid-item2 {
    padding: 35px 0 75px;
}

/*footer*/

footer {
    background: var(--black);
    padding: 20px 7.5%;
}

footer p {
    font-size: 15px;
    line-height: 1.1;
    margin: 0;
    color: var(--white);
}


.shapedivider{
    overflow:hidden;
    position:relative;
    }
    .shapedivider:before{ 
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    background-size: 100% 90px;
    background-position: 50% 0%;  
    background-image: url('data:image/svg+xml;charset=utf8, <svg preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2001 77"><g fill="%23ffffff"><path opacity=".5" d="M1993 46V24l-19-11-19 11v22l19 11 19-11zM1942 72V60l-10-5-10 5v12l10 5 10-5z"/><path opacity=".75" d="M1961 52V36l-14-8-14 8v16l14 9 14-9zM1969 69v-8l-7-4-6 4v8l6 4 7-4z"/><path opacity=".5" d="M1871 46V24l19-11 19 11v22l-19 11-19-11z"/><path opacity=".75" d="M1903 52V36l14-8 14 8v16l-14 9-14-9zM1895 69v-8l7-4 7 4v8l-7 4-7-4z"/><path opacity=".5" d="M1855 46V24l-19-11-19 11v22l19 11 19-11zM1803 72V60l-9-5-10 5v12l10 5 9-5z"/><path opacity=".75" d="M1823 52V36l-14-8-14 8v16l14 9 14-9zM1831 69v-8l-7-4-7 4v8l7 4 7-4z"/><path opacity=".5" d="M1733 46V24l19-11 19 11v22l-19 11-19-11z"/><path opacity=".75" d="M1765 52V36l14-8 14 8v16l-14 9-14-9zM1757 69v-8l6-4 7 4v8l-7 4-6-4z"/><path opacity=".5" d="M1717 46V24l-19-11-19 11v22l19 11 19-11zM1665 72V60l-9-5-10 5v12l10 5 9-5z"/><path opacity=".75" d="M1685 52V36l-14-8-14 8v16l14 9 14-9zM1693 69v-8l-7-4-7 4v8l7 4 7-4z"/><path opacity=".5" d="M1594 46V24l19-11 20 11v22l-20 11-19-11z"/><path opacity=".75" d="M1626 52V36l14-8 15 8v16l-15 9-14-9zM1618 69v-8l7-4 7 4v8l-7 4-7-4z"/><path opacity=".5" d="M1579 46V24l-19-11-20 11v22l20 11 19-11zM1527 72V60l-10-5-9 5v12l9 5 10-5z"/><path opacity=".75" d="M1547 52V36l-14-8-15 8v16l15 9 14-9zM1555 69v-8l-7-4-7 4v8l7 4 7-4z"/><path opacity=".5" d="M1456 46V24l19-11 19 11v22l-19 11-19-11z"/><path opacity=".75" d="M1488 52V36l14-8 14 8v16l-14 9-14-9zM1480 69v-8l7-4 7 4v8l-7 4-7-4z"/><path opacity=".5" d="M1441 46V24l-20-11-19 11v22l19 11 20-11zM1389 72V60l-10-5-9 5v12l9 5 10-5z"/><path opacity=".75" d="M1408 52V36l-14-8-14 8v16l14 9 14-9zM1416 69v-8l-6-4-7 4v8l7 4 6-4z"/><path opacity=".5" d="M1318 46V24l19-11 19 11v22l-19 11-19-11z"/><path opacity=".75" d="M1350 52V36l14-8 14 8v16l-14 9-14-9zM1342 69v-8l7-4 7 4v8l-7 4-7-4z"/><path opacity=".5" d="M1302 46V24l-19-11-19 11v22l19 11 19-11zM1251 72V60l-10-5-10 5v12l10 5 10-5z"/><path opacity=".75" d="M1270 52V36l-14-8-14 8v16l14 9 14-9zM1278 69v-8l-7-4-7 4v8l7 4 7-4z"/><path opacity=".5" d="M1180 46V24l19-11 19 11v22l-19 11-19-11z"/><path opacity=".75" d="M1212 52V36l14-8 14 8v16l-14 9-14-9zM1204 69v-8l7-4 7 4v8l-7 4-7-4z"/><path opacity=".5" d="M1164 46V24l-19-11-19 11v22l19 11 19-11zM1112 72V60l-9-5-10 5v12l10 5 9-5z"/><path opacity=".75" d="M1132 52V36l-14-8-14 8v16l14 9 14-9zM1140 69v-8l-7-4-7 4v8l7 4 7-4z"/><path opacity=".5" d="M1041 46V24l20-11 19 11v22l-19 11-20-11z"/><path opacity=".75" d="M1074 52V36l14-8 14 8v16l-14 9-14-9zM1066 69v-8l6-4 7 4v8l-7 4-6-4z"/><path opacity=".5" d="M1026 46V24l-19-11-20 11v22l20 11 19-11zM974 72V60l-9-5-10 5v12l10 5 9-5z"/><path opacity=".75" d="M994 52V36l-14-8-14 8v16l14 9 14-9zM1002 69v-8l-7-4-7 4v8l7 4 7-4z"/><path opacity=".5" d="M903 46V24l19-11 20 11v22l-20 11-19-11z"/><path opacity=".75" d="M935 52V36l14-8 15 8v16l-15 9-14-9zM927 69v-8l7-4 7 4v8l-7 4-7-4z"/><path opacity=".5" d="M888 46V24l-20-11-19 11v22l19 11 20-11zM836 72V60l-10-5-9 5v12l9 5 10-5z"/><path opacity=".75" d="M856 52V36l-15-8-14 8v16l14 9 15-9zM864 69v-8l-7-4-7 4v8l7 4 7-4z"/><path opacity=".5" d="M765 46V24l19-11 19 11v22l-19 11-19-11z"/><path opacity=".75" d="M797 52V36l14-8 14 8v16l-14 9-14-9zM789 69v-8l7-4 7 4v8l-7 4-7-4z"/><path opacity=".5" d="M749 46V24l-19-11-19 11v22l19 11 19-11zM698 72V60l-10-5-9 5v12l9 5 10-5z"/><path opacity=".75" d="M717 52V36l-14-8-14 8v16l14 9 14-9zM725 69v-8l-7-4-6 4v8l6 4 7-4z"/><path opacity=".5" d="M627 46V24l19-11 19 11v22l-19 11-19-11z"/><path opacity=".75" d="M659 52V36l14-8 14 8v16l-14 9-14-9zM651 69v-8l7-4 7 4v8l-7 4-7-4z"/><path opacity=".5" d="M611 46V24l-19-11-19 11v22l19 11 19-11zM560 72V60l-10-5-10 5v12l10 5 10-5z"/><path opacity=".75" d="M579 52V36l-14-8-14 8v16l14 9 14-9zM587 69v-8l-7-4-7 4v8l7 4 7-4z"/><path opacity=".5" d="M489 46V24l19-11 19 11v22l-19 11-19-11z"/><path opacity=".75" d="M521 52V36l14-8 14 8v16l-14 9-14-9zM513 69v-8l7-4 6 4v8l-6 4-7-4z"/><path opacity=".5" d="M473 46V24l-19-11-19 11v22l19 11 19-11zM421 72V60l-9-5-10 5v12l10 5 9-5z"/><path opacity=".75" d="M441 52V36l-14-8-14 8v16l14 9 14-9zM449 69v-8l-7-4-7 4v8l7 4 7-4z"/><path opacity=".5" d="M350 46V24l20-11 19 11v22l-19 11-20-11z"/><path opacity=".75" d="M382 52V36l15-8 14 8v16l-14 9-15-9zM374 69v-8l7-4 7 4v8l-7 4-7-4z"/><path opacity=".5" d="M335 46V24l-19-11-20 11v22l20 11 19-11zM283 72V60l-10-5-9 5v12l9 5 10-5z"/><path opacity=".75" d="M303 52V36l-14-8-14 8v16l14 9 14-9zM311 69v-8l-7-4-7 4v8l7 4 7-4z"/><path opacity=".5" d="M212 46V24l19-11 20 11v22l-20 11-19-11z"/><path opacity=".75" d="M244 52V36l14-8 14 8v16l-14 9-14-9zM236 69v-8l7-4 7 4v8l-7 4-7-4z"/><path opacity=".5" d="M197 46V24l-20-11-19 11v22l19 11 20-11zM145 72V60l-10-5-9 5v12l9 5 10-5z"/><path opacity=".75" d="M164 52V36l-14-8-14 8v16l14 9 14-9zM173 69v-8l-7-4-7 4v8l7 4 7-4z"/><path opacity=".5" d="M74 46V24l19-11 19 11v22L93 57 74 46z"/><path opacity=".3" d="M53 68V54l13-8 13 8v14l-13 8-13-8zM191 68V54l13-8 13 8v14l-13 8-13-8zM330 68V54l13-8 13 8v14l-13 8-13-8zM468 68V54l13-8 13 8v14l-13 8-13-8zM606 68V54l13-8 13 8v14l-13 8-13-8zM744 68V54l13-8 13 8v14l-13 8-13-8zM883 68V54l12-8 13 8v14l-13 8-12-8zM1021 68V54l13-8 13 8v14l-13 8-13-8zM1159 68V54l13-8 13 8v14l-13 8-13-8zM1297 68V54l13-8 13 8v14l-13 8-13-8zM1435 68V54l13-8 13 8v14l-13 8-13-8zM1574 68V54l13-8 12 8v14l-12 8-13-8zM1712 68V54l13-8 13 8v14l-13 8-13-8zM1850 68V54l13-8 13 8v14l-13 8-13-8z"/><path opacity=".75" d="M106 52V36l14-8 14 8v16l-14 9-14-9zM98 69v-8l7-4 7 4v8l-7 4-7-4z"/><path opacity=".5" d="M58 46V24L39 13 20 24v22l19 11 19-11z"/><path opacity=".75" d="M34 69v-8l-7-4-6 4v8l6 4 7-4z"/><path d="M2001 0v15l-21 12-24-14-23 14-23-14-24 14-23-14-23 14-23-14-24 14-23-14-23 14-24-14-23 14-23-14-23 14-24-14-23 14-23-14-24 14-23-14-23 14-23-14-24 14-23-14-23 14-24-14-23 14-23-14-23 14-24-14-23 14-23-14-24 14-23-14-23 14-23-14-24 14-23-14-23 14-24-14-23 14-23-14-24 14-23-14-23 14-23-14-24 14-23-14-23 14-24-14-23 14-23-14-23 14-24-14-23 14-23-14-24 14-23-14-23 14-23-14-24 14-23-14-23 14-24-14-23 14-23-14-23 14-24-14-23 14-23-14-24 14-23-14-23 14-24-14-23 14-23-14-23 14-24-14-23 14-23-14-24 14-23-14-23 14-23-14-24 14L0 13V0h2001z"/><path opacity=".75" d="M12 28L0 35v19l12 7 14-9V36l-14-8z"/><path opacity=".3" d="M2001 46l-13 8v14l13 8V46z"/></g></svg>'); 
    }
    
    @media (min-width:2100px){
    .shapedivider:before{
    background-size: 100% calc(2vw + 90px);
    }
    }
     

/* .custom-shape-divider-top-1693193073 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 2;
}

.custom-shape-divider-top-1693193073 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 119px;
}

.custom-shape-divider-top-1693193073 .shape-fill {
    fill: #FFFFFF;
} */

/*------Mobile Styles------*/
@media screen and (max-width: 600px) {
    #menu {
        display: none;
    }
    
    #mobile-menu {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100vw;
        background: var(--white);
    }

    #mobile-menu p {
        line-height: 1;
    }

    #menu-icon {
        width: 35px;
    }

    .menu-nav.nav-button {
        padding: 25px 40px;
    }

    .grid div, .grid ul, .grid img {
        align-self: start;
    }

    #mobile-menu #logo-box {
        width: 60%;
    }

    .nav-button {
        position: relative;
        text-align: right;
    }

    .nav-button .nestled {
        display: none;
    }

    .nestled {
        background: var(--black);
        width: 300px;
        padding: 10px;
        text-align: left;
        position: absolute;
        right: 0;
    }

    .nestled .menu-item {
        padding: 10px 0;
    }

    .nav-button:hover .nestled {
        display: block;
    }

    #socials {
        margin: 10px 20px 0 0;
        padding: 15px 0 0;
        border-top: 1px solid var(--green);
    }
    

    .hero h1 {
        float: unset;
        font-size: 7vw;
    }

    .laptop {
        width: 100%;
        left: 0;
        transform: translate(0, 10%);
    }

    .whiteBox p, .blackBox p{
        font-size: 2vw;
    }

    .numbers p {
        line-height: .7;    
        font-size: .7em;
    }

    .hero {
        min-height: 55vh;
    }

    .twinsies, .twinsies-varA, .twinsies-varB, .triad {
        grid-template-columns: 1fr;
    }

    .half {
        width: 100%;
    }

    footer .item {
        padding: 10px 0;
    }

}