*{box-sizing:border-box}html{font-size:16px;font-family:Space Grotesk,sans-serif;font-optical-sizing:auto}body{margin:0;padding:0;background-color:#151515;color:#fff;width:100vw;height:100vh}#root{display:grid;grid-template-rows:110px auto 110px;height:100%}a{text-decoration:none;color:#fff}ul{list-style-type:none}header,.hero-banner-section,.service-offered>ul{border-bottom:1px #D9D9D9 solid}header{padding:2em 3em}header>nav,.contact-details{display:flex;align-items:center}header>nav{padding-bottom:2em}.logo-img{display:block;height:auto;width:12%}.contact-details{margin-left:auto;gap:1em}.contact-details>a{font-size:2em}.contact-details>a:hover,.contact-details>a:focus{color:#4ee1a0}main{width:100%}.hero-banner-section,.portfolio-section{padding:2em}.hero-banner-section{display:grid;grid-template-rows:repeat(3,auto);align-content:center;padding-bottom:2em;row-gap:2em}.hero-banner-section>h1>span,.contact-btn{border-bottom:#4EE1A0 solid .1em}.hero-banner-section>img{display:block;width:100%;max-width:350px;height:auto;margin:0 auto;border-radius:1em}h1,.hero-banner-text{text-align:center}.hero-banner-text{line-height:1.5}.hero-banner-text>p{margin-bottom:2em}.hero-banner-text>h2>i{color:#4ee1a0}.contact-btn{font-size:1.5em}.contact-btn:hover{background-color:#4ee1a0;padding:.5em;color:#151515;font-weight:700;border-radius:.5em}.service-offered>ul{padding:0 0 1em;display:flex;gap:1em;flex-wrap:wrap;align-items:center;justify-content:space-evenly;font-size:1.5em;font-weight:700}.data-container{display:grid;justify-content:center;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-template-rows:auto;gap:2em}.portfolio-container{box-shadow:0 0 5px #d9d9d9;padding:.5em;border-radius:.65em}.portfolio-container:hover{box-shadow:0 0 5px #4ee1a0}.portfolio-container>img{display:block;width:100%;height:auto;border-radius:.85em}.contact-section,.contact-section>div,.contact-section>form{display:flex;align-items:center;justify-content:center}.contact-section{background-color:#242424;flex-wrap:wrap;padding:2em}.contact-section>div,.contact-section>form{flex-direction:column}.contact-section>form{width:100%}form>input,form>textarea{background-color:transparent;color:#fff;font:1em;font-weight:600;width:100%;padding:1em;margin:1em;border:none;border-bottom:2px solid #D9D9D9;outline:none}form>input:hover,form>input:focus,form>textarea:hover,form>textarea:focus{border-bottom:2px solid #4EE1A0}form>textarea{height:150px;font-size:1em;min-width:100%}form>button{margin-left:auto;margin-top:1em;background-color:inherit;border:none;color:#fff;font-size:1.35em;font-weight:700;border-bottom:2px solid #4EE1A0;padding-bottom:.5em}form>button:hover,form>button:focus{cursor:pointer;color:#4ee1a0}.error-text{padding:2em;text-align:center}.error-text>h1>span{border-bottom:#4EE1A0 solid 3px}.error-text a{color:#4ee1a0;font-weight:700}.error-text a:hover{border-bottom:#4EE1A0 solid 3px}footer{padding:2em;border-top:1px #D9D9D9 solid}footer>nav,.contact-details{display:flex;align-items:center}@media screen and (max-width:350px){#root{grid-template-rows:170px auto 170px}.hero-banner-section,.portfolio-section,.contact-section{padding:1em .5em}header>nav,footer>nav{flex-direction:column;justify-content:center;gap:1em}.contact-details{margin:0;gap:2em}}@media screen and (min-width:720px){.hero-banner-section{display:grid;align-items:center;grid-template-columns:auto auto;grid-template-rows:auto auto;grid-template-areas:"h h" "p i";gap:1em}.hero-banner-section>h1{font-size:3em;grid-area:h;margin-bottom:0}.hero-banner-section>img{grid-area:i}.hero-banner-text{align-self:center;grid-area:p}.hero-banner-text>h2{margin:1em 0}.hero-banner-text>p{text-align:left}}@media screen and (min-width:1000px){.hero-banner-section{grid-template-areas:"h i" "p i"}.hero-banner-text{align-self:stretch}}