.container {
  max-width: 1200px;
  width: 86%;
  margin: 0 auto; }

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

.fill-container {
  width: 100%; }

.logo-title {
  font-weight: 500;
  font-size: 1.4rem; }

.small-logo-title {
  font-size: 1.3rem;
  font-weight: 600; }

.logo-text {
  font-weight: 600; }

.small-text-logo {
  font-size: .9rem;
  font-weight: 500; }

.small-text-logo-title {
  font-size: 1.2rem; }

.primary-color-text {
  color: #6DA4BF; }

.bg-dark {
  color: #f4f4f4;
  background: #333; }

.bg-medium {
  color: #f4f4f4;
  background: #373D40; }

.bg-light {
  color: #333;
  background: #B0C1CA; }

.btn-light, .btn-dark, .btn-primary {
  display: block;
  text-decoration: none;
  padding: 1rem 1.5rem;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 10px;
  font-size: 1.2rem;
  text-align: center;
  font-weight: 600;
  width: 100%; }

.btn-light {
  color: #373D40;
  background: #f4f4f4;
  transition: all 450ms; }
  .btn-light:hover, .btn-light:active, .btn-light:focus {
    background: #6DA4BF; }

.btn-dark {
  color: #f4f4f4;
  background: #373D40;
  transition: all 450ms; }
  .btn-dark:hover, .btn-dark:active, .btn-dark:focus {
    background: #f4f4f4;
    color: #373D40; }

.btn-primary {
  color: #333;
  background: #6DA4BF;
  transition: all 450ms; }
  .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background: #333;
    color: #f4f4f4; }

.bottom-line {
  height: 2px;
  width: 7rem;
  background: #6DA4BF;
  display: block;
  margin: 0 auto; }

.lead {
  font-weight: bold; }

.form-contents {
  width: 100%; }

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

img {
  height: auto;
  max-width: 100%; }

ul {
  list-style: none; }

a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent; }
  a:visited {
    text-decoration: none; }

body {
  font-family: "Montserrat", sans-serif;
  color: #333;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden; }

#home-describe,
#services,
#contact,
#work,
#about,
#error,
#privacy-policy,
#terms_and_conditions {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

h3 {
  font-size: 1.4rem;
  width: 90%; }

p {
  line-height: 1.3rem; }

#mobile-nav {
  background: #373D40;
  padding: .4rem 0;
  z-index: 4;
  position: sticky;
  top: 0; }
  #mobile-nav .flex-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; }

.logo {
  z-index: 3;
  transition: all 300ms; }
  .logo p {
    color: #f4f4f4;
    font-size: 1.6rem; }

.menu-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  z-index: 4;
  border-radius: 5px;
  -webkit-tap-highlight-color: transparent; }

.menu-btn__burger {
  width: 30px;
  height: 3px;
  background: #f4f4f4;
  border-radius: 5px;
  transition: all .5s ease-in-out; }

.menu-btn__burger::before,
.menu-btn__burger::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 3px;
  background: #f4f4f4;
  border-radius: 5px;
  transition: all .5s ease-in-out; }

.menu-btn__burger::before {
  transform: translateY(-10px); }

.menu-btn__burger::after {
  transform: translateY(10px); }

.menu-btn.open .menu-btn__burger {
  transform: translateX(-50px);
  background: transparent; }

.menu-btn.open .menu-btn__burger::before {
  transform: rotate(45deg) translate(35px, -35px); }

.menu-btn.open .menu-btn__burger::after {
  transform: rotate(-45deg) translate(35px, 35px); }

#mobile-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 100%;
  width: 100%;
  min-height: 100vh;
  z-index: 3;
  background-color: #373D40;
  transition: all .3s ease-in-out;
  -webkit-tap-highlight-color: transparent; }
  #mobile-menu .current-mobile {
    color: #6DA4BF; }
  #mobile-menu .navlink-1 {
    transform: translateX(100%);
    transition: 500ms all 150ms; }
  #mobile-menu .navlink-2 {
    transform: translateX(100%);
    transition: 500ms all 250ms; }
  #mobile-menu .navlink-3 {
    transform: translateX(100%);
    transition: 500ms all 350ms; }
  #mobile-menu .navlink-4 {
    transform: translateX(100%);
    transition: 500ms all 450ms; }
  #mobile-menu .navlink-5 {
    transform: translateX(100%);
    transition: 500ms all 550ms; }
  #mobile-menu ul {
    list-style: none; }
  #mobile-menu a {
    text-decoration: none;
    display: block;
    margin: 0 auto 1.4rem;
    text-align: center;
    padding: .8rem 1rem;
    color: #f4f4f4;
    font-size: 1.3rem; }
  #mobile-menu.open {
    left: 0; }
    #mobile-menu.open .navlink-1,
    #mobile-menu.open .navlink-2,
    #mobile-menu.open .navlink-3,
    #mobile-menu.open .navlink-4,
    #mobile-menu.open .navlink-5 {
      transform: translateX(0); }

#main-nav {
  background: #373D40;
  position: sticky;
  top: 0;
  z-index: 4;
  display: none; }
  #main-nav .main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem 0; }
    #main-nav .main-nav .logo {
      transition: all 450ms; }
      #main-nav .main-nav .logo:hover {
        transform: scale(1.1); }
    #main-nav .main-nav ul {
      display: flex; }
      #main-nav .main-nav ul a {
        color: #f4f4f4;
        padding: 1rem 1.5rem;
        font-weight: 500;
        position: relative;
        transform: translate(-50%, -50%); }
        #main-nav .main-nav ul a:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #6DA4BF;
          z-index: -1;
          transition: transform 200ms;
          transform-origin: bottom right;
          transform: scale(0);
          border-radius: 10px; }
        #main-nav .main-nav ul a:hover:before {
          transition: transform 200ms;
          transform-origin: top left;
          transform: scale(1); }
        #main-nav .main-nav ul a:after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: transparent;
          box-sizing: border-box;
          z-index: -1;
          transition: transform 200ms;
          transform-origin: top left;
          transform: scale(1);
          border-radius: 10px; }
        #main-nav .main-nav ul a:hover:after {
          transition: transform 200ms;
          transform-origin: bottom right;
          transform: scale(0); }
        #main-nav .main-nav ul a:hover {
          transition: all 200ms;
          color: #333; }
        #main-nav .main-nav ul a.current {
          background: #555;
          border-radius: 10px;
          transition: all 200ms; }
          #main-nav .main-nav ul a.current:hover {
            background-color: #f4f4f4; }
          #main-nav .main-nav ul a.current:hover:before {
            transition: transform 200ms;
            transform-origin: top left;
            transform: scale(0); }

#contact-top {
  background-color: #373D40;
  color: #f4f4f4;
  text-align: center; }
  #contact-top .flex-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
  #contact-top .social-contact ul {
    display: flex;
    gap: 2rem;
    padding: .4rem 0 .3rem 0;
    justify-content: center;
    align-items: center;
    text-align: center; }
    #contact-top .social-contact ul .fab {
      border-radius: 100px;
      border: 2px solid #f4f4f4;
      padding: .5rem;
      transition: all 450ms; }
      #contact-top .social-contact ul .fab:hover {
        background: #6DA4BF;
        color: #f4f4f4; }
  #contact-top .direct-contact {
    display: flex;
    gap: 1rem;
    padding: .4rem 0 .6rem 0;
    justify-content: center;
    align-items: center; }
  #contact-top a {
    color: #f4f4f4;
    font-weight: 500;
    transition: all 450ms; }
    #contact-top a:hover {
      color: #6DA4BF; }

#home-hero {
  background: url("../img/header-home.jpg") no-repeat center center/cover;
  position: relative;
  color: #f4f4f4;
  padding: 5rem 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 82vh; }
  #home-hero::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(51, 51, 51, 0.85);
    height: 100%;
    width: 100%;
    z-index: 0; }
  #home-hero .hero-content h1 {
    line-height: 2.5rem;
    font-weight: 500;
    font-size: 2rem; }
  #home-hero .hero-content h2 {
    font-size: 1.1rem;
    font-weight: 400;
    padding: 3rem 0;
    line-height: 1.4rem; }

#home-hero > * {
  z-index: 2;
  position: relative; }

#home-describe .grid-container {
  display: grid;
  grid-template-columns: repeat(auto, 1fr); }

#home-describe .what-content,
#home-describe .home-web-design,
#home-describe .why-content,
#home-describe #process-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 0; }
  #home-describe .what-content h3,
  #home-describe .home-web-design h3,
  #home-describe .why-content h3,
  #home-describe #process-1 h3 {
    padding: 1rem 0;
    text-align: center;
    width: 90%; }
    #home-describe .what-content h3 .small-text-logo,
    #home-describe .home-web-design h3 .small-text-logo,
    #home-describe .why-content h3 .small-text-logo,
    #home-describe #process-1 h3 .small-text-logo {
      font-size: .9rem;
      font-weight: 800; }
  #home-describe .what-content p,
  #home-describe .home-web-design p,
  #home-describe .why-content p,
  #home-describe #process-1 p {
    padding: 1rem 0; }
  #home-describe .what-content ul,
  #home-describe .home-web-design ul,
  #home-describe .why-content ul,
  #home-describe #process-1 ul {
    padding: 1rem; }
  #home-describe .what-content ol,
  #home-describe .home-web-design ol,
  #home-describe .why-content ol,
  #home-describe #process-1 ol {
    padding: 1rem; }
  #home-describe .what-content li,
  #home-describe .home-web-design li,
  #home-describe .why-content li,
  #home-describe #process-1 li {
    padding: .5rem 0; }

#home-describe .what-content .img-container {
  min-width: 50%;
  height: auto;
  display: block; }
  #home-describe .what-content .img-container img {
    min-width: 100%;
    height: auto; }

#home-describe .what-content ul li p {
  text-align: center;
  padding: 0; }

#home-describe .what-content ul li:nth-child(4) img, #home-describe .what-content ul li:nth-child(5) img {
  padding: 2rem 0; }

#home-describe .what-side-content {
  padding: 2rem 0 3rem 0; }
  #home-describe .what-side-content .flex-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
  #home-describe .what-side-content h3 {
    padding: 1rem 0;
    text-align: center; }
  #home-describe .what-side-content ul {
    list-style: disc;
    padding: 1rem;
    line-height: 1.6rem; }
    @media screen and (max-width: 345px) {
      #home-describe .what-side-content ul {
        padding: 1rem 2rem; } }
  #home-describe .what-side-content .form-field {
    padding: .5rem 0; }
    @media screen and (max-width: 320px) {
      #home-describe .what-side-content .form-field {
        padding: .5rem 1rem; } }
    #home-describe .what-side-content .form-field label {
      line-height: 2rem; }
      #home-describe .what-side-content .form-field label:after {
        content: " *";
        color: red; }
  #home-describe .what-side-content .text-field {
    padding: .5rem 0; }
    @media screen and (max-width: 320px) {
      #home-describe .what-side-content .text-field {
        padding: .5rem 1rem; } }
    #home-describe .what-side-content .text-field label {
      line-height: 2rem; }
  #home-describe .what-side-content input {
    width: 100%;
    padding: .3rem .3rem;
    border: 3px #fff solid;
    border-radius: 3px;
    font-size: 1rem;
    font-family: "Montserrat", sans-serif; }
    #home-describe .what-side-content input:focus {
      outline: none;
      border-color: #6DA4BF; }
  #home-describe .what-side-content .btn-form {
    display: inline-block;
    text-decoration: none;
    padding: 1rem 1.5rem;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 10px;
    font-size: 1.2rem;
    text-align: center;
    font-weight: 600; }
  #home-describe .what-side-content #project-description {
    width: 100%;
    height: auto;
    border: 3px #fff solid;
    border-radius: 3px;
    font-size: 1rem;
    resize: none;
    padding: .3rem .3rem;
    line-height: 1.2rem;
    font-family: "Montserrat", sans-serif; }
    #home-describe .what-side-content #project-description:focus {
      outline: none;
      border-color: #6DA4BF; }
  #home-describe .what-side-content .g-recaptcha {
    padding-top: 1rem; }
  #home-describe .what-side-content #g-recaptcha-response {
    display: block !important;
    position: absolute;
    margin: -50px 0 0 0 !important;
    z-index: -999999;
    opacity: 0; }
  #home-describe .what-side-content .reassure {
    font-size: .75rem;
    text-align: center;
    padding: 1rem 0; }
  #home-describe .what-side-content button {
    width: 100%; }

#home-describe .home-web-design ul,
#home-describe .why-content ul {
  padding: 1rem; }
  #home-describe .home-web-design ul li,
  #home-describe .why-content ul li {
    padding: .5rem 0; }

#home-describe .home-web-design {
  position: relative; }
  #home-describe .home-web-design .flex-container p {
    text-align: center; }
    #home-describe .home-web-design .flex-container p:last-child {
      padding-top: 0; }
  #home-describe .home-web-design .flex-container .principle-list {
    padding-bottom: 0; }
  #home-describe .home-web-design .principle-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
  #home-describe .home-web-design ul li:first-child {
    padding-bottom: 0; }
    #home-describe .home-web-design ul li:first-child p {
      padding: 0; }
  #home-describe .home-web-design ul li:nth-child(2) {
    padding-top: 0; }
    #home-describe .home-web-design ul li:nth-child(2) h3 {
      padding-top: 0; }
    #home-describe .home-web-design ul li:nth-child(2) p {
      padding-top: 0; }
  #home-describe .home-web-design ul li:nth-child(3) {
    padding-top: 1rem; }
    #home-describe .home-web-design ul li:nth-child(3) p {
      padding-top: 0; }
  #home-describe .home-web-design::before {
    content: "";
    position: absolute;
    background: #f4f4f4;
    width: 100vw;
    height: 100%;
    top: 0;
    z-index: -1;
    overflow-x: hidden; }

#home-describe .why-content {
  background: #f4f4f4; }
  #home-describe .why-content ul {
    list-style: disc; }

#home-describe .why-side-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #B0C1CA;
  padding: 2rem 0 3rem 0;
  color: set-text-color(#6DA4BF); }
  #home-describe .why-side-content h3 {
    padding: 1rem 0;
    text-align: center; }
  #home-describe .why-side-content ul {
    list-style: disc;
    padding: 1rem;
    line-height: 1.6rem; }
    #home-describe .why-side-content ul li {
      padding: 0.5rem 0; }

#home-describe #process {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; }
  #home-describe #process h2 {
    padding-bottom: 2rem; }
  #home-describe #process .effect-text p {
    line-height: .42rem;
    font-size: .33rem;
    text-align: center;
    padding: .1rem 0; }
  #home-describe #process .lead {
    padding-top: 2rem; }
  #home-describe #process .btn-describe {
    display: none; }
  #home-describe #process .btn-describe-mobile {
    font-size: 1.2rem;
    width: 80%; }
  #home-describe #process .process {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    width: 100%; }
    #home-describe #process .process .close-mobile {
      color: #6DA4BF; }
    #home-describe #process .process .close-desktop {
      display: none; }
    #home-describe #process .process #effect-1 {
      padding: 0 0.5rem;
      margin: 0;
      color: #f4f4f4;
      visibility: hidden;
      text-align: center;
      transition: all ease-in;
      font-family: "Montserrat", sans-serif;
      font-weight: 400; }
    #home-describe #process .process #effect-2 {
      padding: 0 0.5rem;
      margin: 0;
      color: #f4f4f4;
      visibility: hidden;
      text-align: center;
      transition: all ease-in;
      font-family: "Montserrat", sans-serif;
      font-weight: 400; }
    #home-describe #process .process #effect-3 {
      padding: 0 0.5rem;
      margin: 0;
      color: #f4f4f4;
      visibility: hidden;
      text-align: center;
      transition: all ease-in;
      font-family: "Montserrat", sans-serif;
      font-weight: 400; }
    #home-describe #process .process #effect-4 {
      padding: 0 0.5rem;
      margin: 0;
      color: #f4f4f4;
      visibility: hidden;
      text-align: center;
      transition: all ease-in;
      font-family: "Montserrat", sans-serif;
      font-weight: 400; }
    #home-describe #process .process .outer-box {
      position: relative;
      height: 240px;
      width: 100%; }
    #home-describe #process .process .inner-box {
      position: absolute;
      top: 45%;
      left: 0;
      width: 100%;
      text-align: center;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: all 350ms; }
      #home-describe #process .process .inner-box h3 {
        font-weight: 500;
        padding-top: 2rem; }
    #home-describe #process .process-step {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 1.5rem;
      background: #6DA4BF;
      color: #f4f4f4;
      border-radius: 50%;
      height: 2rem;
      width: 2rem;
      line-height: 2rem;
      transition-duration: 300ms; }
    #home-describe #process .process-icon {
      border-radius: 50%;
      border: 3px #6DA4BF solid;
      background: #333;
      color: #f4f4f4;
      height: 90px;
      width: 90px;
      line-height: 90px;
      text-align: center;
      position: relative;
      transition: all 350ms ease;
      transition-duration: 350ms; }
      #home-describe #process .process-icon::before {
        transition: all 350ms; }
      @media (hover: hover) and (pointer: fine) {
        #home-describe #process .process-icon:hover {
          border-radius: 5px;
          z-index: 3;
          transform: scale(3) translateY(20px);
          color: #333;
          height: 70px;
          width: 90px;
          border: 2px #6DA4BF solid; }
          #home-describe #process .process-icon:hover::before {
            opacity: 0; }
          #home-describe #process .process-icon:hover + .inner-box {
            opacity: 0; }
          #home-describe #process .process-icon:hover .process-step {
            transform: scale(0);
            opacity: 0; }
          #home-describe #process .process-icon:hover #effect-1 {
            visibility: visible;
            transform: translateY(-83.7px);
            transition-delay: 320ms;
            text-align: left; }
          #home-describe #process .process-icon:hover #effect-2 {
            visibility: visible;
            transform: translateY(-87px);
            transition-delay: 320ms;
            text-align: left; }
          #home-describe #process .process-icon:hover #effect-3 {
            visibility: visible;
            transform: translateY(-84px);
            transition-delay: 320ms;
            text-align: left; }
          #home-describe #process .process-icon:hover #effect-4 {
            visibility: visible;
            transform: translateY(-83.8px);
            transition-delay: 320ms;
            text-align: left; } }
      #home-describe #process .process-icon.clicked {
        border-radius: 5px;
        z-index: 3;
        transform: scale(3) translateY(20px);
        color: #333;
        height: 70px;
        width: 90px;
        border: 2px #6DA4BF solid; }
        #home-describe #process .process-icon.clicked::before {
          opacity: 0; }
        #home-describe #process .process-icon.clicked + .inner-box {
          opacity: 0; }
        #home-describe #process .process-icon.clicked .process-step {
          transform: scale(0);
          opacity: 0; }
        #home-describe #process .process-icon.clicked #effect-1 {
          visibility: visible;
          transform: translateY(-83.7px);
          transition-delay: 320ms;
          text-align: left; }
        #home-describe #process .process-icon.clicked #effect-2 {
          visibility: visible;
          transform: translateY(-87px);
          transition-delay: 320ms;
          text-align: left; }
        #home-describe #process .process-icon.clicked #effect-3 {
          visibility: visible;
          transform: translateY(-84px);
          transition-delay: 320ms;
          text-align: left; }
        #home-describe #process .process-icon.clicked #effect-4 {
          visibility: visible;
          transform: translateY(-83.8px);
          transition-delay: 320ms;
          text-align: left; }

#cta {
  background: linear-gradient(to top, rgba(109, 164, 191, 0.35), #fff);
  padding: 2rem 0 3rem 0; }
  #cta .cta-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center; }
    #cta .cta-content .fol {
      font-weight: bold; }
    #cta .cta-content p {
      margin: 2rem 0; }
    #cta .cta-content .btn:hover, #cta .cta-content .btn:active, #cta .cta-content .btn:focus {
      background: #6DA4BF;
      color: #333; }

#main-footer {
  background: #333;
  color: #fff; }
  #main-footer .footer-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 1rem;
    padding: 2rem 0 1rem 0;
    text-align: center; }
    #main-footer .footer-content p {
      padding-bottom: .5rem; }
    #main-footer .footer-content .social {
      padding-top: 1rem; }
      #main-footer .footer-content .social a {
        padding: 0 1rem; }
    #main-footer .footer-content .social .fab {
      border: 2px #f4f4f4 solid;
      border-radius: 50%;
      padding: 0.5rem;
      transition: all 450ms; }
      #main-footer .footer-content .social .fab:hover {
        background: #6DA4BF; }
    #main-footer .footer-content a {
      text-decoration: none;
      color: #f4f4f4; }
    #main-footer .footer-content .legal {
      display: flex;
      flex-direction: column;
      justify-content: center; }
      #main-footer .footer-content .legal .small-legal {
        font-size: 0.8rem;
        padding: 0 1rem; }

#privacy-policy,
#terms_and_conditions {
  line-height: 1.6rem;
  padding: 2rem 0; }
  #privacy-policy h1,
  #terms_and_conditions h1 {
    padding: 1rem 0;
    text-align: center; }
  #privacy-policy h2,
  #terms_and_conditions h2 {
    padding: 1rem 0;
    text-align: center; }
  #privacy-policy ul,
  #terms_and_conditions ul {
    list-style: disc;
    padding: 1rem; }
  #privacy-policy p,
  #terms_and_conditions p {
    padding: 1rem 0; }
  #privacy-policy a,
  #terms_and_conditions a {
    text-decoration: none;
    font-weight: bold;
    color: #6DA4BF; }

#services {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem 0 3rem 0; }
  #services h1 {
    padding: 1rem 0; }
  #services h3 {
    font-weight: 500;
    padding: 1rem 0;
    font-size: 1.2rem; }
  #services .services-grid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: set-text-color(#6DA4BF); }
    #services .services-grid ul {
      list-style: disc;
      text-align: left;
      padding: 1rem; }
      #services .services-grid ul li {
        padding: 0.5rem;
        font-weight: 500; }
    #services .services-grid .card {
      background: #6DA4BF;
      padding: 2rem 0;
      border-radius: 5px;
      box-shadow: 1px 1px 5px 3px #555;
      align-items: center;
      margin-bottom: 2rem;
      width: 100%; }
    #services .services-grid .services-1 {
      background: linear-gradient(to top right, rgba(109, 164, 191, 0.35), 25%, #fff); }
    #services .services-grid .services-2 {
      background: linear-gradient(360deg, rgba(109, 164, 191, 0.35), #fff); }
    #services .services-grid .services-3 {
      background: linear-gradient(to top left, rgba(109, 164, 191, 0.35), 25%, #fff); }
  #services .btn:hover, #services .btn:active, #services .btn:focus {
    background: #6DA4BF;
    color: #333; }

#contact {
  padding: 2rem 0 3rem 0; }
  #contact .flex-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
  #contact h1 {
    padding: 1rem; }
  #contact h4 {
    padding: 1rem 0;
    text-align: center; }
  #contact ul {
    list-style: disc;
    padding: 1rem;
    line-height: 1.6rem; }
  #contact .form-field {
    padding: .5rem 0; }
    @media screen and (max-width: 320px) {
      #contact .form-field {
        padding: .5rem 1rem; } }
    #contact .form-field label {
      line-height: 2rem; }
      #contact .form-field label:after {
        content: " *";
        color: red; }
  #contact .text-field {
    padding: .5rem 0; }
    @media screen and (max-width: 320px) {
      #contact .text-field {
        padding: .5rem 1rem; } }
    #contact .text-field label {
      line-height: 2rem; }
  #contact input {
    width: 100%;
    padding: .3rem .3rem;
    border: 3px #B0C1CA solid;
    border-radius: 3px;
    font-size: 1rem;
    font-family: "Montserrat", sans-serif; }
    #contact input:focus {
      outline: none;
      border-color: #6DA4BF; }
  #contact .btn-form {
    display: inline-block;
    text-decoration: none;
    padding: 1rem 1.5rem;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 10px;
    font-size: 1.2rem;
    text-align: center;
    font-weight: 600; }
    #contact .btn-form:hover, #contact .btn-form:active, #contact .btn-form:focus {
      background: #6DA4BF;
      color: #333; }
  #contact #project-description {
    width: 100%;
    height: auto;
    border: 3px #B0C1CA solid;
    border-radius: 3px;
    font-size: 1rem;
    resize: none;
    padding: .3rem .3rem;
    line-height: 1.2rem;
    font-family: "Montserrat", sans-serif; }
    #contact #project-description:focus {
      outline: none;
      border-color: #6DA4BF; }
  #contact .g-recaptcha {
    padding-top: 1rem; }
  #contact #g-recaptcha-response {
    display: block !important;
    position: absolute;
    margin: -50px 0 0 0 !important;
    z-index: -999999;
    opacity: 0; }
  #contact .reassure {
    font-size: .75rem;
    text-align: center;
    padding: 1rem 0; }
  #contact button {
    width: 100%; }

#my-info {
  background: linear-gradient(to top, rgba(109, 164, 191, 0.35), #fff); }
  #my-info .my-info-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem 0 3rem 0;
    color: #333; }
    #my-info .my-info-content h3 {
      font-weight: 500; }
    #my-info .my-info-content p {
      font-weight: 500; }
      #my-info .my-info-content p a {
        text-decoration: none;
        color: #333; }
    #my-info .my-info-content .reassure {
      font-size: 0.8rem;
      font-weight: 400;
      color: #767676; }
  #my-info .info {
    border-bottom: 1px dotted #333;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem 0; }
    #my-info .info:last-child {
      border: none; }

#work {
  padding: 2rem 0 3rem 0; }
  #work .container {
    display: flex;
    flex-direction: column; }
    #work .container .btn-primary {
      align-self: center; }

.items {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.8rem;
  padding: 2rem 0; }

.item {
  position: relative;
  background: #6DA4BF;
  overflow: hidden;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3); }
  .item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: inherit;
    opacity: .9;
    height: 100%;
    width: 100%;
    transform: scale(2) translateX(-75%) translateY(-75%) rotate(-28deg);
    transition: transform 3s cubic-bezier(0.2, 1, 0.3, 1); }
  .item.clicked::after {
    transform: scale(2) translateX(0) translateY(0) rotate(-28deg); }
  .item.clicked .item-image {
    transform: scale(1.2); }
  .item.clicked .item-text {
    opacity: 1;
    transform: translateY(0); }
  .item-image {
    height: auto;
    display: block;
    transform: translateZ(0);
    transition: transform 750ms cubic-bezier(0.2, 1, 0.3, 1); }
  .item-image:before {
    content: "";
    display: block;
    padding-top: 75%;
    overflow: hidden; }
  .item-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 0; }
  .item-text {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    text-align: center;
    z-index: 1;
    color: #fff;
    transform: translateY(-20%);
    transition: opacity 500ms cubic-bezier(0.2, 1, 0.3, 1), transform 1s cubic-bezier(0.18, 0.72, 0.48, 0.95);
    transition-delay: 450ms; }
  .item-text-wrap {
    width: 100%;
    height: 100%;
    padding: 3rem 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); }
  .item-text-title {
    font-size: 2rem;
    padding: 0 1rem;
    margin: 5px 0 0 0; }
  .item-category {
    text-transform: uppercase;
    font-size: 1.2rem;
    opacity: .7;
    margin: 0; }
  .item .btn {
    text-decoration: none;
    padding: 3% 6%;
    border-radius: 10px;
    background: #f4f4f4;
    color: #333;
    cursor: pointer;
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translate(-50%);
    transition: 1.5s cubic-bezier(0.2, 1, 0.3, 1);
    transition-delay: 200ms;
    opacity: 0;
    z-index: 2;
    pointer-events: none; }
  .item.clicked .btn {
    top: 75%;
    left: 50%;
    transform: translate(-50%);
    opacity: 1;
    pointer-events: initial; }

#about {
  padding: 2rem 0 3rem 0; }
  #about .about-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    #about .about-title h1 {
      padding: 1rem 0;
      text-align: center; }
    #about .about-title .bottom-line {
      margin-bottom: 2rem; }
  #about .flex-container {
    flex-direction: column; }
    #about .flex-container .about-info {
      grid-column: 1;
      background: linear-gradient(to top left, rgba(109, 164, 191, 0.5), 25%, #fff);
      box-shadow: 1px 1px 5px 3px #555;
      border-radius: 5px;
      padding: 2rem 0; }
      #about .flex-container .about-info p {
        text-indent: 2rem;
        font-weight: 500; }
  #about .my-pic {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    width: 100%; }
    #about .my-pic h3 {
      font-weight: 500;
      padding: 1rem 0;
      text-align: center; }
    #about .my-pic img {
      max-width: 100%;
      height: auto;
      border-radius: 50%;
      box-shadow: 1px 1px 10px 5px #555; }

#error {
  padding: 2rem 0 3rem 0; }
  #error h1 {
    text-align: center;
    padding: 1rem 0; }
  #error h3 {
    text-align: center;
    padding: 1rem 0 2rem; }
    #error h3 a {
      color: #6DA4BF; }
  #error .error-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
  #error .small-logo-title {
    font-size: 1.1rem;
    font-weight: 800; }
  #error .error-img {
    height: auto;
    min-width: 100%;
    padding: 1rem 0; }
    #error .error-img img {
      min-width: 100%;
      height: auto; }

@media screen and (max-width: 320px) {
  #home-describe .what-side-content ul {
    padding: 1rem; }
  #home-describe .what-side-content .form-field,
  #home-describe .what-side-content .text-field {
    padding: .5rem 0; }
  #contact .form-field,
  #contact .text-field {
    padding: .5rem 0; } }

@media screen and (max-device-width: 1024px) and (max-device-height: 500px) and (orientation: landscape) {
  #main-nav {
    display: none; }
  #mobile-menu ul {
    padding-top: 5%; }
  #mobile-menu a {
    padding: 0rem 1rem; }
  #work .item-text-wrap {
    height: auto;
    padding: 0; } }

@media screen and (min-width: 768px) {
  #contact-top .flex-container {
    flex-direction: row;
    justify-content: space-between; }
  #contact-top .social-contact {
    padding-bottom: .5rem; }
  #home-hero .hero-content h1 {
    font-size: 3rem;
    line-height: 3.5rem;
    padding: 2rem 0; }
  #home-hero .hero-content h2 {
    padding: 2rem 0 4rem; }
  #home-describe .what-content ul li {
    padding: 0; }
    #home-describe .what-content ul li .flex-container {
      flex-direction: row;
      gap: 2rem; }
    #home-describe .what-content ul li:nth-child(2n) .flex-container {
      flex-direction: row-reverse; }
  #home-describe .what-content .img-container {
    max-width: 50%; }
  #home-describe .what-content img {
    min-width: 50%; }
  #home-describe .home-web-design .img-container {
    max-width: 50%; }
    #home-describe .home-web-design .img-container img {
      width: 100%;
      height: auto; } }

@media screen and (min-width: 768px) and (hover: hover) and (pointer: fine) {
  #home-describe #process .btn-describe {
    display: block; }
  #home-describe #process .btn-describe-mobile {
    display: none; } }

@media screen and (min-width: 768px) {
  #home-describe #process .process {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2rem; } }
  @media screen and (min-width: 768px) and (hover: hover) and (pointer: fine) {
    #home-describe #process .process .close-mobile {
      display: none; }
    #home-describe #process .process .close-desktop {
      display: block;
      color: #6DA4BF; } }

@media screen and (min-width: 768px) {
  #my-info .my-info-content {
    flex-direction: row; }
  #my-info .info {
    border-bottom: none;
    border-right: 1px dotted #333;
    padding: 0 .5rem; }
  .item-text-wrap {
    height: auto;
    padding: 0; }
  .item .btn {
    padding: 1.8rem 3rem;
    pointer-events: initial; }
  .item.clicked::after {
    transform: scale(2) translateX(0) translateY(0) rotate(-28deg); }
  .item.clicked .item-image {
    transform: scale(1.2); }
  .item.clicked .item-text {
    opacity: 1;
    transform: translateY(0); }
  .item.clicked .btn {
    top: 70%;
    left: 50%;
    transform: translate(-50%);
    opacity: 1; } }

@media screen and (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .item:hover::after {
    transform: scale(2) translateX(0) translateY(0) rotate(-28deg); }
  .item:hover .item-image {
    transform: scale(1.2); }
  .item:hover .item-text {
    opacity: 1;
    transform: translateY(0); }
  .item:hover .btn {
    top: 70%;
    left: 50%;
    transform: translate(-50%);
    opacity: 1; } }

@media screen and (min-width: 1025px) {
  #mobile-nav {
    display: none; }
  #main-nav {
    display: block; }
  #home-hero .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
  #home-hero .btn {
    width: 60%; }
  #home-describe .grid-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(auto, 1fr);
    max-width: 1200px;
    margin: 0 auto; }
    #home-describe .grid-container .what-content {
      grid-column: 1 / span 2; }
    #home-describe .grid-container .what-side-content {
      grid-column: 3;
      margin: auto 0;
      border-radius: 10px;
      box-shadow: 1px 1px 5px 3px #555; }
    #home-describe .grid-container .home-web-design {
      grid-column: 1 / span 3;
      background: #f4f4f4; }
    #home-describe .grid-container .why-content {
      grid-column: 1 / span 2;
      background: none; }
    #home-describe .grid-container .why-side-content {
      grid-column: 3;
      border-radius: 10px;
      box-shadow: 1px 1px 5px 3px #555;
      margin: auto 0; }
  #home-describe .home-web-design p {
    padding: 1rem 0 !important; }
  #home-describe .home-web-design h3 {
    padding: 1rem 0 !important; }
  #home-describe .home-web-design ul li {
    padding: 1rem 0 !important; }
    #home-describe .home-web-design ul li .flex-container {
      flex-direction: row;
      gap: 4rem; }
    #home-describe .home-web-design ul li:nth-child(2) .flex-container {
      flex-direction: row-reverse; }
  #home-describe .home-web-design .img-container {
    min-width: 35%; }
  #home-describe #process {
    grid-column: 1 / span 3; }
    #home-describe #process .process {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: none;
      gap: 2rem; }
  #cta .cta-content .btn {
    width: 60%; }
  #services .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 2rem 0 3rem; }
    #services .services-grid .card {
      height: 100%;
      margin-bottom: 0; }
  #services .btn {
    width: 60%; }
  #contact .form-contents {
    max-width: 900px; }
  #work .btn-primary {
    width: 60%; }
  #work .items {
    display: grid;
    grid-template-columns: repeat(3, 1fr); }
  #work .item-text-wrap {
    height: 100%;
    padding: 3rem 0; }
  #work .btn {
    padding: 1rem 1.5rem; }
  #about .flex-container {
    flex-direction: row-reverse;
    gap: 2rem; }
  #main-footer .footer-content {
    flex-direction: row;
    justify-content: space-between; }
    #main-footer .footer-content .legal {
      flex-direction: row; }
      #main-footer .footer-content .legal .small-legal {
        padding: 0 .5rem; }
      #main-footer .footer-content .legal p {
        padding: 0 1rem 0 0; }
    #main-footer .footer-content .social {
      padding: 0; } }