@font-face {
  font-family: 'Bahnschrift';
  src: url(/fonts/Bahnschrift-Font/BAHNSCHRIFT.TTF);
}
@font-face {
  font-family: 'Theano';
  src: url(/fonts/Bahnschrift-Font/TheanoDidot-Regular.ttf);
}

:root {
  --base-color: #4CF5E1;
  /* --light-text-color: #E2FFFB; */
  --dark-color: #007076;
  --black: #00383B;
}

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

*:focus {
  outline: none;
}

body {
  font-family: 'Bahnschrift';
  overflow: hidden;
}

.inline-block {
  display: inline-block;
}

.lg-container {
    height: 100%;
    position: relative;
    margin: auto;
}

#alt-nav{
  display: none;
}
.alt-nav-hamburger{
  display: none;
 }
 .alt-nav-icon{
   display: none;
 }

/* Nav Area */
#nav-area {
  display: grid;
  grid-template-columns: 4fr 1fr 1fr;
  /* border: 2px red solid; */
  position: sticky;
  top: 0;
  z-index: 101;
  height: 85px;
}

#navbar {
  width: 550px;
  /* border: 2px red solid; */
  display: inline-flex;
  list-style: none;
  align-items: center;
  justify-content: space-around;
}

#navbar li a {
  color: var(--base-color);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
#nav-area .cta-btn {
  width: 135px;
  height: 35px;
  border: 2.5px solid var(--base-color);
}
#nav-area .cta-btn a{
  color: var(--base-color);
}
.nav-icon {
  width: 85px;
  height: 100%;
}

.main-content {
  width: 75vw;
  height: 75vh;
  margin: auto;
  position: relative;
  overflow: hidden;
}

/* !!!PAGE STYLING!!!! */

/* HOME PAGE */
.main-content-hm{
  background-image: linear-gradient(to bottom, #ccffeb, #e6fff5, #f5fffb)
}

#hero-svg {
  grid-area: hero-svg;
  position: absolute;
  right: 0;
  top: 10%;
}

#hero-cta {
  display: grid;
  grid-template-rows: 3fr 2fr 2fr;
  position: absolute;
  height: 320px;
  width: 500px;
  left: 5%;
  top: 18%;
}

#hero-cta h1 {
  color: #007076;
  font-size: 60px;
  font-weight: 999;
  margin-top: 10px;
}

.mynt {
  color: var(--base-color);
}

#hero-cta p {
  color: #002223;
  font-size: 20px;
  margin-top: 25px;
  margin-bottom: 50px;
  width: 100%;
}

.cta-btn {
  border-radius: 22px;
  align-self: center;
  justify-self: center;
  background-color: transparent;
  border: 2.5px solid #007076;
} 

.cta-btn a {
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  color: #007076;
}

.cta-btn:hover {
  background-color: #007076;
  cursor: pointer;
}

.cta-btn:hover a {
  color: #CCFFEB;
}

#hero-cta .cta-btn {
  width: 155px;
  height: 38px;
}

/* SERVICE PAGE */
.main-content-svc{
  background-image: linear-gradient(to bottom, #5B69BC, #ADB4DD, #ebecf7)
}
.systems-info, .social-info, .web-info{
  width: 60%;
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 30px ;
  padding: 25px;
  color: #192256;
}
.svc-titles {
  text-align: center;
}
.social-paras, .systems-paras, .web-paras {
  opacity: 0;
  height: 135px;
  position: relative;
}
.svc-titles {
  grid-column-start: 1;
  grid-column-end: 5;
  opacity: 0;
  font-size: 60px;
}
.systems-intro, .web-intro {
  grid-column-start: 1;
  grid-column-end: 5;
  opacity: 0;
}
.left-paras {
  grid-column-start: 1;
  grid-column-end: 3;
}
.right-paras {
  grid-column-start: 3;
  grid-column-end: 5;
}
.systems-paras p, .social-paras p, .web-paras p{
  position: absolute;
  width: 90%;
  top: 0;
  right: 0;

}
.systems-paras h2, .social-paras h2, .web-paras h2{
  position: absolute;
  font-size: 160px;
  top: -22%;
  left: -5%;
  opacity: 0.15;
}
.systems-paras h3, .social-paras h3, .web-paras h3{
  position: absolute;
  border-bottom: 2px solid;
  transform: rotate(270deg);
}
.systems-para1 h3{
  left: -6.5%;
  top: 13%;
}
.systems-para2 h3{
  left: -15.5%;
  top: 35%;
}
.systems-para3 h3{
  left: -3%;
  top: 5%;
}
.systems-para4 h3{
  left: -13%;
  top: 27.5%;
}

.social-para1 h3{
  left: -9%;
  top: 18.5%;
}
.social-para2 h3{
  left: -8%;
  top: 16%;
}
.social-para3 h3{
  left: -13%;
  top: 27%;
}
.social-para4 h3{
  left: -5%;
  top: 8%;
}

.web-para1 h3{
  left: -9.5%;
  top: 19%;
}
.web-para2 h3{
  left: -6.5%;
  top: 13.5%;
}
.web-para3 h3{
  left: -8.5%;
  top: 16%;
}
.web-para4 h3{
  left: -3%;
  top: 4%;
}

#system-svgs {
  width: 500px;
  position: absolute;
  right: -10%;
  top: 10%;
}
#web-svgs {
  width: 500px;
  position: absolute;
  right: 0;
  top: 15%;
}
.twitter-lines {
  position: absolute;
  right: 10%;
  bottom: 5%;
}
.facebook-lines {
  position: absolute;
  right: 20%;
  top: 20%;
}
.pinterest-lines {
  position: absolute;
  right: 2.5%;
  top: 15%;
}

.buttons {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 2%;
  display: inline-block;
  margin: 5px;
}

.buttons button {
  opacity: 0;
  background-color: transparent;
  border: none;
  margin: 10px;
  color: #192256;
  font-size: 15px;
  font-weight: 600;
}
.buttons button:hover {
  color: #3244AB;
}

.svg-paths {
  opacity: 0;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.animated .svg-paths {
  opacity: 1;
  animation-name: writeSVG;
}

@keyframes writeSVG {
  100% {
    stroke-dashoffset: 0;
  }
}

/* ABOUT PAGE */
.main-content-abt {
  background-image: linear-gradient(to bottom, #9A64D4, #D4BCED, #f5f0fb);
  overflow: hidden;
}

.about-pg-sections {
  height: 100%;
  width: 100%;
}

.abt-buttons {
  position: absolute;
  bottom: 2.5%;
  left: 47.5%;
}

.inactive-abt-button{
  background: #9A64D4;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: none;
  margin: 5px;
}
.inactive-abt-button:hover,
.inactive-abt-button:focus{
  cursor: pointer;
  width: 20px;
  height: 20px;
  background: #9A64D4 content-box;
  border: 2px solid #9A64D4;
  border-radius: 50%;
  padding: 2.5px;
  margin: 5px;
}
.active-abt-button {
  width: 20px;
  height: 20px;
  background: #9A64D4 content-box;
  border: 2px solid #9A64D4;
  border-radius: 50%;
  padding: 2.5px;
  margin: 5px;
}
.active-abt-button:hover {
  pointer-events: none;
  cursor: none;
}

#abt-section h1, #philosophy h1, #mission h1 {
  position: absolute;
  font-size: 160px;
  color: #5B69BC;
}

#about-paragraph-section{
  opacity: 0;
  color: #192256;
}

#about-para-bg{
  width: 500px;
  position: absolute;
  left: -7%;
  top: -7%;
}

#about-paragraph-section h3 {
  border-bottom: 2px solid;
  font-size: 18px;
  position: absolute;
  bottom: 40%;
  left: 5%;
  display: block;
  transform: rotate(270deg);
}

#abt-section p {
  position: absolute;
  font-size: 16px;
  width: 35%;
  top: 48.5%;
  left: 12%;
}
#our1 {
  top: -5%;
  right: 40%;
}
#story {
  right: -3%;
  top: 42%;
}

.philosophy-info{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 37%;
  height: 100%;
}
#philosophy h1 {
  font-size: 140px;
}
#our2 {
  right: 25%;
  opacity: 0;
}
#phresh {
  right: 6%;
  top: 27%;
  opacity: 0;
}
#philosophy-h1 {
  right: -14.5%;
  top: 59%;
  opacity: 0;
}
.philosophy-paras{
  width: 100%;
  position: relative;
  opacity: 0;
}
.philosophy-paras h2{
  font-size: 140px;
  color: #5B69BC;
  position: absolute;
  top: -35%;
  opacity: 0.25;
}
.philosophy-paras h3{
  border-bottom: 2px solid;
  position: absolute;
  transform: rotate(270deg);
  font-size: 18px;
  color: #192256;
}
#phil-para2 h2{
  top: -65%;
}
#phil-para1 h3, #phil-para2 h3{
  bottom: 20%;
  left: -1%;
}

#phil-para3 h3{
  bottom: 40%;
  left: 3.5%;
}
.philosophy-paras p{
  position: relative;
  float: right;
  width: 80%;
  color: #192256;
}

#mission h1 {
  font-size: 130px;
}
#the-h1 {
  top: 5%;
  left: -20%;
  opacity: 0;
}
#mynt-h1 {
  right: -35%;
  top: 35%;
  opacity: 0;
}
#mission-h1 {
  left: -40%;
  top: 65%;
  opacity: 0;
} 
.mission-paras {
  position: absolute;
  width: 40%;
  height: 20%;
  opacity: 0;
}
.mission-paras h2{
  font-size: 140px;
  color: #5B69BC;
  position: absolute;
  top: -20%;
  opacity: 0.35;
}
.mission-paras h3{
  position: absolute;
  font-size: 18px;
  left: 5%;
  color: #192256;
}
.mission-paras hr{
  position: absolute;
  width: 100px;
  border: none;
  height: 2px;
  background-color: #192256;;
  left: 5%;
  top: 20%;
}
.mission-paras p {
  position: absolute;
  width: 90%;
  right: 5%;
  bottom: 0;
  color: #192256;
}
#mission-para1 {
  top: 10%;
  right: -50%;
}
#mission-para1 p {
  bottom: 10%;
}
#mission-para2 {
  bottom: 40%;
  left: -47%;
}
#mission-para2 p {
  bottom: -5%;
}
#mission-para3 {
  bottom: 10%;
  right: -52%;
}
#mission-para3 p {
  bottom: 10%;
}

/* CASE STUDY */
.transition-els {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
}
.case-info{
  top: -100%;
  background-color: var(--base-color);
}
.case-creation{
  right: -100%;
  background-color: #f9f9fc;
}
.case-evolution{
  left: -100%;
  background-color: #ccffeb;
}
.case-responsive{
  bottom: -100%;
  background-color: #f2ebfa;
}
.case-page-links{
  position: absolute;
  text-decoration: none;
  font-size: 14px;
  color: #007076;
  z-index: 11;
}
#mynt-link{
  top: 2%;
  left: 48.5%;
  border-top: 2px solid;
}
#evolution-link{
  top: 45%;
  left: -2.5%;
  border-bottom: 2px solid;
  transform: rotate(90deg);
}
#creation-link{
  top: 45%;
  right: -2.5%;
  border-bottom: 2px solid;
  transform: rotate(270deg);
}
#responsive-link{
  bottom: 2%;
  left: 44.5%;
  border-bottom: 2px solid;
}
.case-container{
  opacity: 0;
}
/* Intro */
.main-content-cs1{
  background-color: var(--base-color);
}
#brand-intro{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
}
#brand-intro-logo {
  height: 300px;
}
#brand-intro p{
  width: 50%;
}
/*Brand Creation */
.main-content-cs2{
  background-color: #f9f9fc;
}
#brand-creation {
  width: 100%;
  height: 100%;
}
#brand-description{
  position: absolute;
  width: 30%;
  left: 8.5%;
  top: 30%;
}
#biz-front{
  position: absolute;
  top: 7%;
  right: 37%;
  height: 150px;
  z-index: 4;
}
#biz-back{
  position: absolute;
  top: 16%;
  right: 20%;
  height: 150px;
  z-index: 4;
}
#brand-inspo1{
  position: absolute;
  top: 5%;
  right: 3%;
  object-fit: cover;
  width: 150px;
  height: 150px;
  z-index: 4;
}
#brand-inspo2{
  position: absolute;
  bottom: 27.5%;
  left: 44%;
  object-fit: cover;
  width: 100px;
  height: 100px;
}
#brand-inspo3{
  position: absolute;
  bottom: 5%;
  right: 20%;
  object-fit: cover;
  width: 135px;
  height: 135px;
  z-index: 4;
}
#font{
  position: absolute;
  font-size: 40px;
  bottom: 35%;
  right: 22%;
  color: var(--dark-color);
  z-index: 5;
}
.round-logo{
  position: absolute;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  top: 0;
}
.logo-left{
  top: 36%;
  left: 50%;
}
.logo-right{
  top: 30%;
  right: 7%;
  z-index: 5;
}
.med-dots{
  position: absolute;
  border-radius: 50%;
  width: 35px;
  height: 35px;
}
.small-dots{
  position: absolute;
  border-radius: 50%;
  width: 25px;
  height: 25px;
}
.xtra-small-dots{
  position: absolute;
  border-radius: 100%;
  width: 10px;
  height: 10px;
}
.red{
  background: #9A64D4;
}
.blue{
  background-color: #3244AB;
}
.red-med-dot {
  top: 20%;
  right: 16.5%;
  opacity: 0.5;
}
.blue-med-dot {
  bottom: 15%;
  left: 44%;
  opacity: 0.5;
}
.red-small-dot {
  bottom: 25%;
  right: 38%;
}
.blue-small-dot {
  top: 3%;
  right: 36%;
}
.blue-xtra-small-dot1{
  bottom: 6%;
  left: 57%;
}
.blue-xtra-small-dot2{
  top: 50%;
  right: 20%;
}
.blue-xtra-small-dot3{
  bottom: 45%;
  right: 35%;
  opacity: 0.5;
}
.red-xtra-small-dot1{
  top: 40%;
  left: 45%;
}
.red-xtra-small-dot2{
  bottom: 25%;
  right: 10%;
  opacity: 0.5;
}
.red-xtra-small-dot3{
  top: 5%;
  right: 25%;
}
.prim-color-dots1{
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 170px;
  z-index: 5;
}
.prim-color-dots2{
  position: absolute;
  top: 50%;
  right: 30%;
  width: 45px;
  height: 125px;
  opacity: 0.5;
}
.prim-color-dots3{
  position: absolute;
  bottom: 15%;
  right: 19%;
  width: 25px;
  height: 65px;
  z-index: 5;
}
.prim-color-dots4{
  position: absolute;
  top: 5%;
  left: 40%;
  width: 60px;
  height: 170px;
  opacity: 0.5;
}
.prim-color-dots5{
  position: absolute;
  bottom: 10%;
  left: 50%;
  width: 45px;
  height: 125px;
}
.prim-color-dots6{
  position: absolute;
  top: 10%;
  right: 30%;
  width: 25px;
  height: 65px;
  z-index: 5;
}
.dot{
  width: 85%;
  height: 29%;
  margin: 6.5% 7.5%;
  border-radius: 50%;
}
.prim-dot1{
  background-color: #007076;
}
.prim-dot2{
  background-color: #4CF5E1;
}
.prim-dot3{
  background-color: #CCFFEB;
}
/* Evolution */
.main-content-cs3{
  background-color: #ccffeb;
}
#brand-evolution{
  width: 100%;
  height: 100%;
  display: inline-flex;
}
.phases {
  width: 32%;
  margin: 20px 10px;
  text-align: center;
  color: #007076;
  position: relative;
}
.phases img {
  width: 100%;
  height: 45%;
  position: absolute;
  left: 0;
  top: 5%;
}
.phases h3 {
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
}
.evolution-info{
  position: absolute;
  width: 30%;
  text-align: center;
}
#e-i1{
  bottom: 18.6%;
  left: 2%;
}
#e-i2{
  bottom: 15%;
  left: 36%;
}
#e-i3{
  bottom: 15%;
  left: 68%;
}
/* Responsive */
.main-content-cs4{
  background-color: #f2ebfa
}
#brand-responsive{
  width: 100%;
  height: 100%;
  display: inline-flex;
}
.responsive-info{
  width: 70%;
  margin: auto;
  margin-top: 50px;
}
#lg-site {
  position: absolute;
  width: 555px;
  height: 320px;
  left: 15%;
  bottom: 10%;
}
#md-site {
  position: absolute;
  width: 210px;
  height: 275px;
  left: 55%;
  bottom: 10%;
}
#sm-site {
  position: absolute;
  width: 85px;
  height: 195px;
  left: 70%;
  bottom: 10%;
}

/* CONTACT PAGE */
.main-content-ctc {
  background-image: linear-gradient(to bottom, #4CF5E1, #C9FCF6, #F5FFFE)
}

.container {
  width: 60%;
  margin: auto;
  padding: 5px;
}

.form-sections {
  margin: 20px;
  text-align: center;
}

.name label, .company label {
  display: block;
  font-size: 20px;
  padding: 5px;
  color: var(--dark-color);
}

.name input, .company input {
  width: 35%;
  margin: 5px;
  padding: 7px;
  background: transparent;
  border-top: none;
  border-right: 2.5px solid var(--dark-color);
  border-bottom: 2.5px solid var(--dark-color);
  border-left: none;
}
fieldset{
  border: none;
}
fieldset legend {
  font-size: 20px;
  margin: 5px;
  color: var(--dark-color);
}
.check-labels {
  display: inline-flex;
  width: 45%;
  margin: 10px;
  align-items: center;
  justify-content: center;
  color: var(--dark-color);
}

.check-labels label {
  display: block;
  position: relative;
  margin-left: 2.5px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.check-labels label input {
  position: absolute;
  height: 15px;
  width: 15px;
  top: 0;
  right: -25px;
  z-index: 5;
  cursor: pointer;
  opacity: 0;
}
.checkbox {
  position: absolute;
  height: 15px;
  width: 15px;
  top: 0;
  right: -25px;
  background: transparent;
  border-top: none;
  border-right: 2.5px solid var(--dark-color);
  border-bottom: 2.5px solid var(--dark-color);
  border-left: none;
}

.check-labels label:hover input ~ .checkbox,
.check-labels input:checked ~ .checkbox {
  background-color: var(--dark-color);
}

.checkbox::after {
  content: "";
  position: absolute;
  display: none;
}

.check-labels input:checked ~ .checkbox::after {
  display: block;
}

.check-labels .checkbox::after {
  left: 4.5px;
  top: 1px;
  width: 3px;
  height: 7px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.message textarea{
  width: 75%;
  height: 70px;
  background-color: transparent;
  border-top: none;
  border-right: 2.5px solid var(--dark-color);
  border-bottom: 2.5px solid var(--dark-color);
  border-left: none;
  resize: none;
}

.message textarea:focus {
  background-color: transparent;
}

.button {
  width: 100%;
  display: flex;
  justify-content: center;
}
.button button {
  width: 10%;
  height: 29px;
  padding: 6px;
  background-color: transparent;
  border-top: none;
  border-right: 2.5px solid var(--dark-color);
  border-bottom: 2.5px solid var(--dark-color);
  border-left: none;
  color: var(--dark-color);
  font-size: 16px;
}
.button button:hover {
  background-color: var(--dark-color);
  color: #F5FFFE;
}
#thanks {
  color: #007076;
  margin-top: 150px;
  text-align: center;
}

/* Footer */
footer {
  position: absolute;
  z-index: -1;
  height: 40%;
  width: 100%;
  bottom: 0;
  text-align: center;
}
.footer-content {
  color: var(--base-color);
}
.footer-logo {
  position: absolute;
  bottom: 13%;
  left: 49.6%;
}
.top-line, .bottom-line {
  position: absolute;
  display: flex;
  width: 60%;
  justify-content: space-between;
  align-items: flex-end;
  bottom: 50px;
  left: 20%;
}
.bottom-line {
  width: 80%;
  bottom: 5px;
  left: 10%;
}

.top-line p {
  font-size: 13px;
}
.bottom-line p {
  font-size: 12px;
}
.hr1, .hr2 {
  position: absolute;
  bottom: 35px;
  height: 1px;
  border-width: 0;
  background-color: var(--base-color);
  width: 40%;
  left: 5%;
}
.hr2 {
  left: 55%;
}

#alt-footer{
  display: none;
}