html {
  scroll-behavior: smooth;
}

body {
  background-image: url('../images/dark-denim.png'), linear-gradient(145deg, #e7ebec 0%, #a9bdc4 100%) ;
  height: 100%;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.subintro {
  position: relative;
}

.subposition {
    margin-top: 200px;
    width: 100%;
    z-index: 10;
}

.card1 {grid-area: card1; background-color: #FFF;}
.card2 {grid-area: card2; background-color: #FFF;}
.card3 {grid-area: card3; background-color: #FFF;}
.card4 {grid-area: card4; background-color: #FFF;}
.card5 {grid-area: card5; background-color: #FFF;}
.card6 {grid-area: card6; background-color: #FFF;}

.about1 {grid-area: about1; background-color: #FFF;}
.about2 {grid-area: about2; background-color: #FFF;}

.team1 {grid-area: team1; background-color: #FFF;}
.team2 {grid-area: team2; background-color: #FFF;}
.team3 {grid-area: team3; background-color: #FFF;}

.content1 {grid-area: card6; background-color: #FFF;}

.footer {grid-area: footer; background-color: #FFF;}

.intakecard {grid-area: intakecard; background-color: #FFF;}

.subfooter1 {grid-area: subfooter1;}
.subfooter2 {grid-area: subfooter2;}
.subfooter3 {grid-area: subfooter3;}
.subfooter4 {grid-area: subfooter4;}

.project1 {grid-area: project1; background-color: #FFF;}
.project2 {grid-area: project2; background-color: #FFF;}
.project3 {grid-area: project3; background-color: #FFF;}
.project4 {grid-area: project4; background-color: #FFF;}



.card1, .card2, .card3, .about1, .about2 {
  height: auto;
  border-radius: 30px;
  padding: 15px;
  margin-bottom: 100px;
}

.card4, .card5, .card6, .content1, .project1, .project2, .project3, .project4 {
  height: 800px;
  width: 100%;
  border-radius: 30px;
  padding: 30px;
  margin-bottom: 100px;
}

.project1, .project2, .project3, .project4 {
  height: 450px;
  border-radius: 30px;
}

.project3 p {
  color: transparent;
}

.project4 {
  height: auto;
}

.footer {
  height: auto;
  border-radius: 30px;
  padding-top: 30px;
  margin-bottom: 100px;
}

.subfooter {
  height: auto;
}

.subfooter1, .subfooter2, .subfooter3, .subfooter4 {
  height: auto;
  width: 100%;
  border-radius: 30px;
  padding: 30px;
  margin-bottom: 10px;
}

.subfooter1 {
  padding: 15px 30px 30px 30px;
}

.card1, .card2, .card3, .card4, .card5, .card6, .content1, .footer, .about1, .about2, .project1, .project2, .project3, .project4 {
  z-index: 1;
  box-shadow: 1px 30px 29px 2px rgba(0,0,0,0.22);
-webkit-box-shadow: 1px 30px 29px 2px rgba(0,0,0,0.22);
-moz-box-shadow: 1px 30px 29px 2px rgba(0,0,0,0.22);
}

.about1, .about2 {
  padding: 30px;
  border: solid 1px #f2f2f2;
}



#menu .minilogo a, .topnav .minilogo {
          font-family: 'Prompt', sans-serif;
          line-height: 6.5rem;
          font-size: 1.719rem;
          font-weight: 600;
          font-style: normal;
          color: #dddfe1;
          text-transform: uppercase;
          padding-right: 20px;
      }

#subfooter #submenu .minilogo a {
          font-family: 'Prompt', sans-serif;
          /*line-height: 6.5rem;*/
          font-size: 1.719rem;
          font-weight: 600;
          font-style: normal;
          color: #171717;
          text-transform: uppercase;
          padding-right: 20px;
          letter-spacing: 1.7px;
          text-decoration: none;
      }

.subfooter1 ul, .subfooter2 ul, .subfooter3 ul, .subfooter4 ul
      {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

.subfooter1 ul li p
      {
        width: 250px;
      }

.subfooter2, .subfooter3, .subfooter4 {
  height:300px;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  padding: 10px;
}

.subfooter2 li, .subfooter3 li, .subfooter4 li {
  padding-bottom: 5px;
}

.subfooter2 ul li a, .subfooter3 ul li a, .subfooter4 ul li a {
  color: #000000;
  text-decoration: none;
}

li {
  margin-bottom: 14px;
}

      h1 {
          font-family: 'Prompt', sans-serif;
          /*line-height: 7rem;
          font-size: 7.285rem;*/
          line-height: 11.787rem;
          font-size: 11.787rem;
          font-weight: 600;
          font-style: normal;
          color: #ffffff;
          text-align: center;
          text-transform: uppercase;
          width: 100%;
          /*background: -webkit-linear-gradient(#f07a79, #406ea8);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;*/
          text-shadow: 1px 16px 13px rgba(0,0,0,0.43);
      }

      h2 {
          font-size: 7.285rem;
          font-family: Oswald;
          font-weight: 400;
          font-style: normal;
          color: #444444;
          text-transform: capitalize;
          letter-spacing: 1px;
          padding-top: 30px;
      }

      h3 {
          font-size: 4.5026rem;
          font-family: Oswald;
          font-weight: 400;
          font-style: normal;
          color: #444444;
          text-transform: uppercase;
          margin-bottom: 5px;
      }

      h4 {
          line-height: 3.5rem;
          font-size: 2.782rem;
          font-family: Oswald;
          font-weight: 400;
          font-style: normal;
          color: #444444;
          text-align: center;
          scroll-margin-top: 120px;
      }

      .subintro h3 {
        text-align: center;
      }

      #about h4, .project4 h4 {
        text-align: left;
        margin: 0;
      }

      .card1 h4, .card2 h4, .card3 h4 {
        color: #FFF;
        margin: 0;
      }

    .header-text {
        font-size:1.719rem; padding-bottom: 10px; font-family: Libre Baskerville;
        font-weight: 400;
        font-style: normal;}
    }

    p {
      font-size:1.063rem; 
      padding-bottom: 10px; 
      font-family: Libre Baskerville;
      font-weight: 400;
      font-style: normal;
      line-height: 24px;
      color: red;
  }

  p {
    font-size:1.063rem; 
        color: #444444;
    line-height: 24px;
  }

/* Top Menu */
#menu li {
    display: inline-block;
    margin: 1%;
    color: #FFFFFF;
    /*background: #fff;*/
    background: transparent;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

#menu li a {
  /*color: #dddfe1;*/ 
  color: #FFFFFF;
  font-family: Lato,Helvetica,Arial,sans-serif; 
  font-weight: 400;
  /*font-size: 1.1rem;
  letter-spacing: 2px;*/
  font-size: 2.1rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  border-radius: 35px;
  /*background-color: #f07a79;*/
  padding: 10px;
}

#menu li a:hover {color: #999999;}
#menu li.active a:hover {color: #999999;}
#menu li:hover {background: transparent;}
#menu li a, #menu li.active a {padding:0px 15px;}
#menu li.active a {/*color:rgb(240, 122, 121) !important;*/ color: #FFFFFF;}
#menu li.active {background:transparent;}

/* Top Menu */
#menu {
  text-align:center; 
  top: inherit;
  bottom: 0px;
  height: 50px;
  /*background-color: rgba(0, 0, 0, 0.7);*/
}

#menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 40px;
    z-index: 70;
    width: 100%;
    padding: 0;
    margin: 0;
}


.logos img {  
      height: 60px;
}

.logos div {
    display: inline-flex;
    margin: auto;
    padding-right: 30px;
}

.logos  {  
      text-align: center;
      position: relative;
      top: 90%;
      z-index: -1;
}

#menu {
    width: 35%;
    height: 60px;
    margin: 1% auto;
    left: 0;
    right: 0;
    padding: 8px 25px 5px 22px;
    background: linear-gradient(to bottom, #171717, #242424);
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #292929;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(6, 6, 22, 0.4) 0px 2px 8px 0px, rgba(6, 6, 22, 0.5) 0px 28px 40px -8px;

}

#menu li a {
  font-size: 1.063rem;
  letter-spacing: 1.7px;
  text-decoration: none;
}

  li {
    text-align: -webkit-match-parent;
}

.salesbullets {
  margin-bottom: 120px;
}

.salesbullets, .salesbullets span {
  display: block;
}

.salesbullets span img {
  position: relative;
  top: 30px;
}

.salesbullets span p {
  color: #FFF;
  margin: 0;
  padding-left: 40px;
}

.salesbullets .button {
  text-align: center;
}

.blockdiv {
  display: block;
}

.aiTransform {
  color: #406ea8 !important;
}

#zoom-text {
  /*position: fixed;*/
  position: relative;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: font-size 0.25s ease-out;
}

section {
  /*mask: linear-gradient(to bottom, transparent, black 5%);
  backdrop-filter: blur(60px);*/
  background: #C5CACC;
  background: linear-gradient(180deg,rgba(197, 202, 204, 0) 0%, rgba(204, 208, 209, 1) 10%);
  width: 100%;
  margin: 0 auto;
  padding-top: 5%;
}

section.wide {
  width: 100%;
  margin: 0 auto;
}

.cardmid {
  border-radius: 18px;
  width: 50%;
  margin: 0 auto;
  padding: 5px;
  color: #444;
  background-color: #FFF;
  margin-top: 40px;
  margin-bottom: 20px;
}

.cardmid img {
  width:150px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.workcardmid {
  border-radius: 18px;
  height: auto;
  padding: 15px;
  margin-bottom:15px;
  color: #444;
  background-color: #ffffffde;
  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(6, 6, 22, 0.4) 0px 2px 8px 0px, rgba(6, 6, 22, 0.5) 0px 28px 40px -8px;
}

.workcardmid p {
  margin: 4px;
}

.workcardmid p a {
  padding-top: 10px;
  color: #fff;
  text-align: left;
}

.button {
  background-color: #000;
  border: none;
  color: white;
  padding: 12px 22px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 30px;
}

.card1 .button, .card2 .button, .card3 .button {
  position: absolute;
  bottom: 20px;
  width: 80%;
  background-color: #FFF;
  color: #000;
  left: 10%;


} 

.card1, .card2, .card3 {
  background-image: url("images/background-task.png"), linear-gradient(45deg, #343434, #242222);
  background-repeat: no-repeat;
  color: #FFF;
  position: relative;
}

#cards .feature, #cards .forwho {
  margin-bottom: 0;
  margin-top: 40px;
  color: #FFF;
}

#cards li {
  padding-bottom: 5px;
}

.contentAbout p, .contentAbout div {
  width: 45%;
  margin-left: 10px;
}

/* MOBILE MENU START */

.mobile-container {
  max-width: 480px;
  margin: auto;
  background-color: #555;
  height: 500px;
  color: white;
  border-radius: 10px;
}

.topnav {
  overflow: hidden;
  background-color: #171717;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  /*background-color: #04AA6D;*/
  color: white;
}

#container {
  position: sticky;
  top: 0; 
  z-index: 100;    
}
/* MOBILE MENU END */

#designbuild, #focus {
  scroll-margin-top: 120px;
}

/* @ MEDIA 480 */
/* @ MEDIA 480 */
/* @ MEDIA 480 */

@media (max-width: 480px) {

  h3 {
    font-size: 2.5026rem !important;
  }

  h4 {
    line-height: 1.5rem !important;
    font-size: 1.382rem !important;
  }

  .subposition {
    margin-top: 45px;
  }
}

/* @ MEDIA 780 */
/* @ MEDIA 780 */
/* @ MEDIA 780 */

@media (max-width: 780px) {
  h3 {
    font-size: 3.5026rem;
  }

  h4 {
    line-height: 2.5rem;
    font-size: 2.382rem;
  }

  .topnav {
        display: block !important;
      }

  .topnav .minilogo {
    line-height: 1.3rem;
    font-size: 1.4rem;
  }

  #menu {
    display: none !important;
  }

  .subposition {
    margin-top: 0px;
}

}

/* @ MEDIA 1024 */
/* @ MEDIA 1024 */
/* @ MEDIA 1024 */

@media (max-width: 1024px) {

      .topnav {
        display: none;
      }

      #cards, #cardWork, #content, #about, #team, #footer, #projects, #projects2, #intakeform {
      margin: 0 auto;
      max-width: 90%;
      height: auto;
      display: grid;
      gap: 30px;
      padding: 0px;
}

    #subfooter {
      margin: 0 auto;
      height: auto;
      display: grid;
      gap: 30px;
      padding: 0px;
}

  .subfooter2, .subfooter3, .subfooter4 { 
    height: auto !important; 
    width: 100% !important;
    padding: 30px !important;
    margin-bottom: 10px !important;

}
    #cardWork {
    grid-template-areas: 
              'card4'
              'card5'
              'card6' !important;
  }

    #about {
    grid-template-areas: 
              'about1'
              'about2' !important; 
    }


    #cards {
    grid-template-areas: 
              'card1'
              'card2'
              'card3'!important;
  } 

    #content {
    grid-template-areas: 
              'content1 content1 content1 content1'
              'content1 content1 content1 content1'; }

  #team {
  grid-template-areas: 
              'team1 team1 team2 team2 team3 team3'
              'team1 team1 team2 team2 team3 team3'; }

  #footer {
  grid-template-areas: 
            'footer footer footer footer';
  }

  #subfooter {
  grid-template-areas: 
              'subfooter1'
              'subfooter2'
              'subfooter3'
              'subfooter4'!important; 
  }

}

/* @ MEDIA 1200 */
/* @ MEDIA 1200 */
/* @ MEDIA 1200 */

@media (max-width: 1200px) {

  .topnav {
        display: none;
      }

  #menu {
    width: 90%;
  } 

    #cards, #cardWork, #content, #about, #team, #footer, #projects, #projects2, #intakeform {
      margin: 0 auto;
      max-width: 90%;
      height: auto;
      display: grid;
      gap: 30px;
      padding: 0px;
}

    #subfooter {
      margin: 0 auto;
      height: auto;
      display: grid;
      gap: 30px;
      padding: 0px;
}

      #projects {
    grid-template-areas: 
              'project1'
              'project2'!important;
  }

        #projects2 {
    grid-template-areas: 
              'project3'
              'project4'!important;
  } 

  .project4 {
      height: auto;
  } 


      #intakeform {
        grid-template-areas: 
              'intakecard';
      }

      #cardWork {
    grid-template-areas: 
              'card4 card4 card5 card5 card6 card6'
              'card4 card4 card5 card5 card6 card6';

  }

    #about {
    grid-template-areas: 
              'about1 about1 about1 about2 about2'
              'about1 about1 about1 about2 about2'; 
    }


    #cards {
    grid-template-areas: 
              'card1 card1 card2 card2 card3 card3'
              'card1 card1 card2 card2 card3 card3';

  }

    #content {
    grid-template-areas: 
              'content1 content1 content1 content1'
              'content1 content1 content1 content1'; }

  #team {
  grid-template-areas: 
              'team1 team1 team2 team2 team3 team3'
              'team1 team1 team2 team2 team3 team3'; }

  #footer {
  grid-template-areas: 
            'footer footer footer footer';
  }

  #subfooter {
  grid-template-areas: 
              'subfooter1 subfooter2 subfooter3 subfooter4'
              'subfooter1 subfooter2 subfooter3 subfooter4'; 
  }
}

/* @ MEDIA 1201 */
/* @ MEDIA 1201 */
/* @ MEDIA 1201 */

@media (min-width: 1201px) {

  .topnav {
        display: none;
      }

  #menu {
    width: 55%;
  } 

      #cards, #cardWork, #content, #about, #team, #footer, #projects, #projects2, #intakeform {
      margin: 0 auto;
      max-width: 80%;
      height: auto;
      display: grid;
      gap: 30px;
      padding: 0px;
}

    #subfooter {
      margin: 0 auto;
      height: auto;
      display: grid;
      gap: 30px;
      padding: 0px;
}

    #intakeform {
        grid-template-areas: 
              'intakecard';
      }

    #cards {
    grid-template-areas: 
              'card1 card1 card2 card2 card3 card3'
              'card1 card1 card2 card2 card3 card3';

  }

    #cardWork {
    grid-template-areas: 
              'card4 card4 card5 card5 card6 card6'
              'card4 card4 card5 card5 card6 card6';

  }

    #projects {
     grid-template-areas: 
              'project1 project1 project2 project2'
              'project1 project1 project2 project2';
    }

    #projects2 {
     grid-template-areas: 
              'project3 project3 project4 project4'
              'project3 project3 project4 project4';
    }

    #about {
    grid-template-areas: 
              'about1 about1 about1 about2 about2'
              'about1 about1 about1 about2 about2'; 
    }

    #content {
    grid-template-areas: 
              'content1 content1 content1 content1'
              'content1 content1 content1 content1'; }

  #team {
  grid-template-areas: 
              'team1 team1 team2 team2 team3 team3'
              'team1 team1 team2 team2 team3 team3'; }

  #footer {
  grid-template-areas: 
            'footer footer footer footer';
  }

  #subfooter {
  grid-template-areas: 
              'subfooter1 subfooter2 subfooter3 subfooter4'
              'subfooter1 subfooter2 subfooter3 subfooter4'; 
  }
}