html {
  font-size: 62.5%;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  position: relative;
}

h1 {
  color: #455a64;
  font-size: 3.5rem;
  letter-spacing: 2px;
  font-family: "Luckiest Guy", cursive;
  font-weight: bolder;
}

@media screen and (max-width: 750px) {
  h1 {
    font-size: 2.5rem;
  }
}

h3 {
  color: #455a64;
  font-size: 2.5rem;
  font-family: "Bree Serif", serif;
}

@media screen and (max-width: 750px) {
  h3 {
    font-size: 2rem;
  }
}

h4 {
  color: #455a64;
  font-size: 2rem;
  font-family: "Bree Serif", serif;
}

@media screen and (max-width: 750px) {
  h4 {
    font-size: 1.6rem;
  }
}

a {
  text-decoration: none;
  font-size: 1.7rem;
  font-family: "Bree Serif", serif;
}

@media screen and (max-width: 750px) {
  a {
    font-size: 1.4rem;
  }
}

label,
p {
  line-height: 2.4rem;
  font-size: 1.4rem;
  font-family: "Merriweather", serif;
  color: #616161;
}

@media screen and (max-width: 750px) {
  label,
  p {
    font-size: 1rem;
    line-height: 2.2rem;
  }
}

header {
  width: 100%;
  z-index: 999;
  position: fixed;
  top: 0;
  text-align: center;
  background: #f9f9f9;
  height: auto;
  padding: 2rem 0rem;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
}

header nav {
  -webkit-transform: scale(1, 0);
          transform: scale(1, 0);
  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-transition: -webkit-transform 250ms ease-in-out;
  transition: -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
  background: #f9f9f9;
  width: 100%;
}

header nav ul {
  margin: 2rem 0rem 0rem 0rem;
  padding: 0;
  list-style: none;
}

header nav li {
  margin: 0 auto 2rem auto;
  width: 80%;
  border: 1px solid transparent;
  padding: 1rem;
  text-align: center;
}

header nav .active-nav a {
  color: #455a64;
  font-weight: bold;
}

header nav a {
  color: #757575;
  text-decoration: none;
  opacity: 0;
  -webkit-transition: opacity 100ms ease-in-out;
  transition: opacity 100ms ease-in-out;
}

header nav a:hover {
  color: #455a64;
  text-decoration: none;
}

header .nav-toggle {
  display: none;
}

header .nav-toggle:checked ~ nav {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

header .nav-toggle:checked ~ nav a {
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out 300ms;
  transition: opacity 250ms ease-in-out 300ms;
}

header .nav-toggle:checked ~ .nav-toggle-label {
  -webkit-transition: -webkit-transform 0.3s ease-in;
  transition: -webkit-transform 0.3s ease-in;
  transition: transform 0.3s ease-in;
  transition: transform 0.3s ease-in, -webkit-transform 0.3s ease-in;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

header .nav-toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 2rem;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: -webkit-transform 0.3s ease-in;
  transition: -webkit-transform 0.3s ease-in;
  transition: transform 0.3s ease-in;
  transition: transform 0.3s ease-in, -webkit-transform 0.3s ease-in;
}

@media screen and (min-width: 850px) {
  header {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr auto minmax(700px, 3fr) 1fr;
        grid-template-columns: 1fr auto minmax(700px, 3fr) 1fr;
  }
  header .nav-toggle-label {
    display: none;
  }
  header .brand {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / 3;
  }
  header nav {
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    grid-column: 3 / 4;
    all: unset;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  header nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0rem;
  }
  header nav li {
    margin-left: 3rem;
    margin-bottom: 0;
  }
  header nav a {
    opacity: 1;
    position: relative;
    -webkit-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
  }
}

#home {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10rem;
  z-index: 2;
  height: 70%;
}

#home main {
  -webkit-box-flex: 2;
      -ms-flex: 2 1 0px;
          flex: 2 1 0;
  padding: 0rem 3rem;
}

#home main h1 {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

#home main p {
  width: 80%;
  margin-bottom: 3rem;
}

#home main .btn-estimate {
  padding: 1.5rem 1.5rem;
  background: #455a64;
  color: #f9f9f9;
  border-radius: 1rem;
  font-size: 2rem;
  font-family: "Bree Serif", serif;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  border: 1px solid transparent;
  cursor: pointer;
}

#home main .btn-estimate:hover {
  background: #f9f9f9;
  border: 1px solid #455a64;
  color: #616161;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#home aside {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
}

#home aside object {
  width: 100%;
}

@media screen and (max-width: 700px) {
  #home {
    padding: 10rem;
    height: 90%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  #home main {
    margin-top: 2rem;
    padding: 0rem;
  }
  #home main h1 {
    font-size: 3rem;
  }
  #home main .btn-estimate {
    padding: 1rem;
    background: #455a64;
    color: #f9f9f9;
    border-radius: 0.5rem;
    font-size: 1.5rem;
  }
}

#process {
  width: 100%;
  height: auto;
  text-align: center;
  padding: 7rem 2rem;
  overflow-x: hidden;
  background: linear-gradient(161deg, rgba(75, 75, 75, 0.03) 0%, rgba(75, 75, 75, 0.03) 27%, rgba(85, 85, 85, 0.03) 27%, rgba(85, 85, 85, 0.03) 32%, rgba(174, 174, 174, 0.03) 32%, rgba(174, 174, 174, 0.03) 100%), linear-gradient(320deg, rgba(138, 138, 138, 0.03) 0%, rgba(138, 138, 138, 0.03) 55%, rgba(234, 234, 234, 0.03) 55%, rgba(234, 234, 234, 0.03) 66%, rgba(197, 197, 197, 0.03) 66%, rgba(197, 197, 197, 0.03) 100%), linear-gradient(90deg, white, white);
}

#process .process-item-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#process .row {
  margin: 2rem;
}

@media (max-width: 750px) {
  #process .row {
    margin: 0rem;
  }
}

#process h3 {
  text-align: justify;
}

#process .process-svg {
  margin: 8px 0px;
  -ms-flex-item-align: center;
      align-self: center;
  -webkit-transition: all 500ms ease-in;
  transition: all 500ms ease-in;
  height: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

#process .process-svg object {
  max-width: 70%;
}

#process .process-details {
  width: 70%;
}

@media (max-width: 750px) {
  #process .process-details {
    width: 100%;
    padding: 0rem;
  }
}

#process .process-details p {
  text-align: justify;
}

#services {
  width: 100%;
  height: auto;
  padding: 7rem 2rem;
}

#services h1 {
  text-align: center;
}

#services .separator-line {
  background: #455a64;
}

#services .row {
  margin: 3rem 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

#services .svg-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -ms-flex-line-pack: center;
      align-content: center;
  height: 250px;
}

#services .svg-wrapper object {
  max-width: 70%;
}

@media screen and (max-width: 750px) {
  #services .svg-wrapper {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

#services [data-scroll] {
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#services [data-scroll="in"] {
  opacity: 1;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

#services [data-scroll="out"] {
  opacity: 0;
  -webkit-transform: scale(0, 0);
          transform: scale(0, 0);
}

#services .text-wrapper {
  padding: 1rem;
  text-align: justify;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-left: 2px solid whitesmoke;
}

@media all and (max-width: 750px) {
  #services .text-wrapper {
    border-left: none;
  }
}

#services .text-wrapper .hr-stack {
  float: left;
  width: 80%;
}

@media all and (max-width: 750px) {
  #services .text-wrapper .hr-stack {
    width: 100%;
  }
}

#services .text-wrapper .width-box {
  padding-left: 12px;
  width: 80%;
}

@media all and (max-width: 750px) {
  #services .text-wrapper .width-box {
    padding-left: 0px;
    width: 100%;
  }
}

#services .text-wrapper h3 {
  margin-bottom: 1rem;
  width: 90%;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  text-align: left;
}

#services .text-wrapper p {
  width: 80%;
}

#services .text-wrapper .p-stack {
  font-size: 1rem;
}

#services .text-wrapper .tech-used-wrapper .tech-images img {
  width: 5rem;
}

@media screen and (max-width: 750px) {
  #services .text-wrapper p {
    width: 100%;
  }
  #services .text-wrapper .p-stack {
    font-size: 0.8rem;
  }
}

#why-us {
  width: 100%;
  height: auto;
  background: linear-gradient(161deg, rgba(75, 75, 75, 0.03) 0%, rgba(75, 75, 75, 0.03) 27%, rgba(85, 85, 85, 0.03) 27%, rgba(85, 85, 85, 0.03) 32%, rgba(174, 174, 174, 0.03) 32%, rgba(174, 174, 174, 0.03) 100%), linear-gradient(320deg, rgba(138, 138, 138, 0.03) 0%, rgba(138, 138, 138, 0.03) 55%, rgba(234, 234, 234, 0.03) 55%, rgba(234, 234, 234, 0.03) 66%, rgba(197, 197, 197, 0.03) 66%, rgba(197, 197, 197, 0.03) 100%), linear-gradient(90deg, white, white);
  text-align: center;
  padding: 7rem 2rem;
}

#why-us h3 {
  color: #455a64;
}

#why-us .why-us-head-content {
  margin: 0rem 0rem 5rem 0rem;
}

#why-us .why-us-head-content h1 {
  margin-bottom: 3rem;
}

#why-us .why-us-head-content p {
  width: 60%;
  margin: 1rem auto;
}

@media screen and (max-width: 750px) {
  #why-us .why-us-head-content p {
    width: 80%;
  }
}

#why-us .row {
  margin: 2rem;
}

#why-us .why-us-content {
  position: relative;
  padding: 3rem;
  margin-bottom: 3rem;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#why-us .why-us-content object {
  width: 30%;
  margin-bottom: 2rem;
}

#why-us .why-us-content h3 {
  margin-bottom: 2rem;
}

@media screen and (max-width: 750px) {
  #why-us .why-us-content {
    padding: 1rem;
  }
}

#portfolio {
  width: 100%;
  height: auto;
  padding: 7rem 2rem;
  padding-bottom: 5rem;
}

#portfolio h1 {
  text-align: center;
}

#portfolio .row {
  margin-bottom: 1rem;
}

#portfolio .card-wrapper {
  width: 100%;
  height: 40rem;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #455a64;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  margin: 3rem 0;
}

#portfolio .card-wrapper .card-image-1 {
  background: url("https://images.unsplash.com/photo-1523958631412-cd125bb67e58?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1919&q=80");
  background-size: cover;
  background-position: center;
}

#portfolio .card-wrapper .card-image-2 {
  background: url("https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
  background-size: cover;
  background-position: center;
}

#portfolio .card-wrapper .card-image-3 {
  background: url("https://images.unsplash.com/photo-1525459715390-11a3e77bc887?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=975&q=80");
  background-size: cover;
  background-position: center;
}

#portfolio .card-wrapper .card-image {
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

#portfolio .card-wrapper .card-image::before {
  content: "";
  display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(52, 73, 94, 0.75);
}

#portfolio .card-wrapper .card-info {
  background: #ffffff;
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 0;
  padding: 2rem;
  -webkit-transition: background-color 0.4s ease-in;
  transition: background-color 0.4s ease-in;
}

#portfolio .card-wrapper .card-info p,
#portfolio .card-wrapper .card-info h4 {
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  margin: 0;
}

#portfolio .card-wrapper:hover .card-image, #portfolio .card-wrapper:focus .card-image {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

#portfolio .card-wrapper:hover .card-image::before, #portfolio .card-wrapper:focus .card-image::before {
  display: block;
}

#portfolio .card-wrapper:hover .card-info, #portfolio .card-wrapper:focus .card-info {
  background: transparent;
  -webkit-transition: background-color 0.4s ease-out;
  transition: background-color 0.4s ease-out;
}

#portfolio .card-wrapper:hover .card-info p,
#portfolio .card-wrapper:hover .card-info h4, #portfolio .card-wrapper:focus .card-info p,
#portfolio .card-wrapper:focus .card-info h4 {
  -webkit-transform: translate(2rem, 0);
          transform: translate(2rem, 0);
  color: #f0f0f0;
}

#contact {
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: linear-gradient(161deg, rgba(75, 75, 75, 0.03) 0%, rgba(75, 75, 75, 0.03) 27%, rgba(85, 85, 85, 0.03) 27%, rgba(85, 85, 85, 0.03) 32%, rgba(174, 174, 174, 0.03) 32%, rgba(174, 174, 174, 0.03) 100%), linear-gradient(320deg, rgba(138, 138, 138, 0.03) 0%, rgba(138, 138, 138, 0.03) 55%, rgba(234, 234, 234, 0.03) 55%, rgba(234, 234, 234, 0.03) 66%, rgba(197, 197, 197, 0.03) 66%, rgba(197, 197, 197, 0.03) 100%), linear-gradient(90deg, white, white);
}

#contact .contact-svg {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  padding: 7rem 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#contact .contact-svg object {
  width: 70%;
  height: 70%;
}

#contact .contact-form {
  min-height: 95px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  border-left: 2px solid #f9f9f9;
}

#contact .contact-form .contact-iframe {
  height: 100%;
}

#contact .contact-form .contact-form-title-wrapper {
  padding: 7rem 2rem;
  padding-bottom: 0;
}

#contact .contact-form h1,
#contact .contact-form p {
  margin-bottom: 2rem;
}

#contact .contact-form label {
  margin-bottom: 0.75rem;
}

#contact .contact-form button {
  all: unset;
}

#contact .contact-form .separator-line {
  margin: 2rem 0rem;
  background: #455a64;
}

#contact .contact-form .btn-send {
  margin-top: 2rem;
  padding: 1.5rem 3rem;
  background: #455a64;
  color: #f9f9f9;
  border-radius: 1rem;
  font-size: 2rem;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: "Bree Serif", serif;
}

#contact .contact-form .btn-send svg {
  margin-left: 1rem;
}

#contact .contact-form .btn-send:hover {
  background: #f9f9f9;
  border: 1px solid #455a64;
  color: #455a64;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media screen and (max-width: 700px) {
  #contact .contact-form .btn-send {
    padding: 1rem;
    background: #455a64;
    color: #f9f9f9;
    border-radius: 0.5rem;
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 700px) {
  #contact .contact-svg {
    display: none;
  }
}

footer {
  padding: 5rem 2rem 2rem 2rem;
  width: 100%;
  height: auto;
  min-height: 10%;
  background: #455a64;
  text-align: center;
}

footer .address,
footer .email {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 1rem;
  cursor: pointer;
}

footer .address p,
footer .email p {
  margin-top: 1rem;
  color: #f9f9f9;
}

footer .address svg,
footer .email svg {
  color: #f9f9f9;
}

footer .social {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

footer .social p {
  margin-top: 1rem;
  color: #f9f9f9;
}

footer .social svg {
  color: #f9f9f9;
  margin-left: 1rem;
}
/*# sourceMappingURL=site.css.map */