@charset "utf-8";
/* CSS Document */

:root {
  --primary: #661ff2;
  --bright: #88BEFF;
  --darkest: #1D1D1F;
  --darker: #380898;
  --dark: #4D536D;
  --medium: #8A95A8;
  --light: #EDEEF1;
  --light-grey: #F9FAFB;
  --lighter: #F0F2FF;
  --lightest: #F6F8FF;
  --black: #000000;
  --white: #ffffff;
}

body {
  font-family: "Inter", system-ui;
  font-size: 18px;
  font-weight: 300;
  color: #1D1D1F;
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; 
    background: var(--light-grey);
    margin: 0;
    z-index: 9999;
    webkit-transition: 0.5s;
     -moz-transition: 0.5s;
      -ms-transition: 0.5s;
       -o-transition: 0.5s;
          transition: 0.5s;
}
.navbar-toggler:focus {
  box-shadow: none;
}

/* FONTS */
h1 {
	color: var(--darkest);
	font-size: 42px;
	line-height: 64px;
	font-weight: 700;
}
h1.large {
	font-size: 65px;
	line-height: 75px;
}
h2 {
	color: var(--darkest);
	font-size: 33px;
	line-height: 52px;
	font-weight: 600;
}
h3 {
  color: var(--darkest);
  font-size: 26px;
  line-height: 42px;
  font-weight: 600;
}
h4 {
  color: var(--dark);
  font-size: 20px;
  line-height: 32px;
  font-weight: 500;
}
p {
	font-size: 18px;
	line-height: 28px;
  color: var(--dark);
  font-weight: 300;
}
strong {
  color: var(--darkest);
  font-weight: 600;
}
a {
  color: var(--primary);
}
a:hover {
  color: var(--darker);
}
ul {
  color: var(--dark);
}

/* Buttons */
.btn {
  padding: 12px 24px;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  font-weight: 500;
}
.btn-primary{
  background: var(--primary);
}
.btn-primary:hover {
  background: var(--darker);
}
.btn-primary:focus {
  background: var(--primary) !important;
  box-shadow: 0 0 0 0.25rem #dfcdff !important;
}

/* BACKGROUNDS */
.hero__bg__gradient {
  background: radial-gradient(50.08% 44.51% at 100% 100%,rgba(169,137,245,.2) 0,rgba(0, 135, 255, 0) 100%),radial-gradient(60.76% 48.01% at 0 100%,rgb(218, 192, 255) 0,rgba(226,67,41,0) 100%),#EFEEFF;
}
.header__bg__yellow {
  background: #FFFBD8;
}
.header__bg__blue {
  background: var(--lighter);
}
.header__bg__green {
  background: #F2FFEF;
}
.hero__content {
  padding-top: 80px;
}
.lightest {
  background: var(--lightest) !important;
  padding: 80px 0;
}
.financeDark {
  background: #24242f;
}
.darker {
  background: var(--darker) !important;
  padding: 80px 0;
}

.darker p,
.darker strong {
  color: var(--white);
}
.darker h1,
.darker h2,
.darker h3,
.darker h4 {
  color: var(--lighter);
}
.darker a {
  color: var(--lighter) !important;
}
.white {
  background: var(--white);
}
.primary {
	color: var(--primary) !important;
}
.white {
  color: var(--white);
}
small {
  font-size: 16px;
  font-weight: 400;
}
img  {
	max-width: 100%;
	height: auto;
}
img.half {
  max-width: 60%;
}

.logo {
  max-width: 115px;
}
.badge {
  font-size: 12px;
  line-height: 20px;
  color: var(--primary);
  background: #EBE0FF;
  border: 1px solid var(--primary);
  padding: 2px 12px;
  border-radius: 100px;
}
.socialNav {
  position: absolute;
  right: 0;
  top: 4px;
  display: flex;
  gap: 16px;
}
.info-box {
  display: flex;
  width: 100%;
  padding: 12px;
  align-items: flex-start;
  gap: var(--spacing-spacing-8, 8px);
  border-radius: var(--border-radius-md, 8px);
  border: 1px solid var(--Bright, #88BEFF);
  background: var(--fill-lighter, #F0F2FF);
  color: var(--Darkest, #1D1D1F);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 150% */
}

/* Section background -- optional */
section {
  position: relative;
  padding-top: 48px;
  padding-bottom: 48px;
}
.wave__bg::before {
  background: url(../images/designbgHub.png);
    background-repeat: repeat;
    background-size: auto;
  background-repeat: repeat;
  background-size: auto;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  content: "";
  height: 1500px;
  width: 100%;
  top: -100px;
  left: 0;
  z-index: -1;
}

/* HERO */
#hero .container {
  margin-top: 100px;
}
.overview {
  background: var(--lightest);
  padding: 80px 0;
}

/* NAV */
.navbar-nav li {
  padding: 0 30px;
  font-size: 16px !important;
}
.navbar-nav li a {
	color: var(--darkest) !important;
	font-weight: bold;
  position: relative;
}
.navbar-nav li a:hover {
	color: var(--primary) !important;
}
.navbar-nav li a.active {
	color: var(--darkest) !important;
	border-bottom: 2px solid var(--darkest);
}
.nav-link {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.navbar-toggler {
  position: relative;
  top: 9px;
}
.navbar-nav li a.active::before,
.navbar-nav li a.active::after {
   width: 100%;
}
.navbar-collapse {
  flex-direction: column;
}
.navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.55);
  border-color: transparent;
}

/* Random Div Move - compass */
.compass {
  width: 50px;
  height:50px;
  background:url(../images/compass.png) no-repeat;
  position:fixed;
  top: 60px;
  left: 220px;
}
.comp {
  width: 50px;
  height:50px;
  background:url(../images/compass.png) no-repeat;
  position:fixed;
  top: 60px;
  right: 220px;
}

/* NAV ICON */
#nav-icon {
  width: 35px;
  height: 45px;
  position: relative;
  margin: 0px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
#nav-icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #1D1D1F;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
  top: 0px;
}
#nav-icon span:nth-child(2) {
  top: 13px;
  left: -10px;
}
#nav-icon span:nth-child(3) {
  top: 26px;
}
#nav-icon.open span:nth-child(1) {
  top: 18px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
#nav-icon.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}
#nav-icon.open span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

/* PROJECTS HOME */
#projectsHome {
  margin: 64px 0;
}
#projectsHome a {
  text-decoration: none;
}
#projectsHome .project {
  background: radial-gradient(50.08% 44.51% at 100% 100%,rgba(169,137,245,.2) 0,rgba(0, 135, 255, 0) 100%),radial-gradient(60.76% 48.01% at 0 100%,rgb(218, 192, 255) 0,rgba(226,67,41,0) 100%),#EFEEFF;
  padding: 30px;
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 300px;
  transition: 0.3s;
  border-radius: 16px;
}
#projectsHome .project:hover {
  box-shadow: 0 5px 40px rgba(0,0,0,0.2);
}
#projectsHome h2 {
  font-size: 26px;
  line-height: 42px;
}
#projectsHome small {
  color: var(--primary);
  position: relative;
  z-index: 999;
}
#projectsHome .project img {
  position: absolute;
  width: auto;
  top: 20px;
  right: -10px;
  transition: 0.5s;
}
#projectsHome .project.tpl img {
  position: absolute;
  width: auto;
  top: 104px;
  right: 0px;
}
#projectsHome .project.subscriber img {
  position: absolute;
  width: 400px;
  right: -20px;
  top: 80px;
}
#projectsHome .project:hover img {
  top: 24px;
  transition: 0.5s;
}
#projectsHome .project.tpl:hover img {
  top: 100px;
  transition: 0.5s;
}
#projectsHome .project.subscriber:hover img {
  top: 85px;
  transition: 0.5s;
}

/* FADE IN effect on load */
.fadeIn {
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein s;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Scroll to TOP */
.back-to-top {
    position: fixed;
    bottom: 0;
    right: 10px;
    text-decoration: none;
    color: #288dc1;
    font-size: 60px;
    padding: 15px;
    display: none;
    z-index: 99999;
}
  .back-to-top i {
    color: #900BFF;
    -webkit-transition: 0.3s;
       -moz-transition: 0.3s;
        -ms-transition: 0.3s;
         -o-transition: 0.3s;
            transition: 0.3s;
  }
  .back-to-top:hover i {    
      color: #900BFF;
  }

 #uidesigns a {
  margin-bottom: 30px;
  display: block;
  max-height: 400px;
  overflow: hidden;
 } 

 /* ABOUT */
#about .profilepic {
    border-radius: 20px;
    margin: 0 auto;   
    width: 100%;
    max-width: 400px;
    text-align: center;
}
#about .icon {
  width: 25px;
  position: relative;
  top: -2px;
  margin-right: 12px;
}
#about ul.items {
  list-style: none;
  padding: 0;
}
#about ul.items li {
  background: var(--lighter);
  float: left;
  margin: 5px;
  -webkit-border-radius: 2rem;
          border-radius: 2rem;
}
#about ul.items li p {
  font-size: 16px;
  padding: 5px;
  margin: 0;
  padding: 4px 16px;
}

/* Prototype videos */
.proto__subscriber video {
  max-width: 1000px;
  width: 100%;
  border-radius: 24px;
  border: 10px solid #000;
  box-shadow: 0 2px 20px 10px rgba(0, 0, 0, .3);
}
.proto__campaignhub video {
  max-width: 500px;
  width: 100%;
}

/* UI Designs */
.ch__phone__animate {
  padding: 48px;
  -webkit-filter: drop-shadow(0px 2px 20px rgba(0,119,255,0.15));
  filter: drop-shadow(0px 2px 20px rgba(0,119,255,0.15));
  -webkit-transition: 0.3s;
     -moz-transition: 0.3s;
      -ms-transition: 0.3s;
       -o-transition: 0.3s;
          transition: 0.3s;
  -webkit-transform: rotate(15deg);
     -moz-transform: rotate(15deg);
      -ms-transform: rotate(15deg);
       -o-transform: rotate(15deg);
          transform: rotate(15deg);
}
.ch__phone__animate:hover {
  -webkit-transform: scale(1.2);
     -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
       -o-transform: scale(1.2);
          transform: scale(1.2);
}

/* Footer */
footer {
  padding: 24px 0;
}
footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footerNav {
  list-style: none;
  max-width: 400px;
  margin: 24px 0;
  padding: 0;
}
.footerNav li a {
  font-size: 16px;
  float: left;
  padding: 4px 16px;
  color: var(--darkest);
  text-decoration: none;
  font-weight: 600;
}
.footerNav li a:hover {
  color: var(--primary);
}
footer .socialNav {
  position: static;
}
footer .social {
  padding-top: 15px;
  gap: 16px;
}

/* RESPONSIVE */
@media only screen and (max-width: 1112px) {
  #projectsHome .project img {
   top: 116px;
 }
 #projectsHome .project:hover img {
   top: 120px;
 }
 #projectsHome .project.subscriber img {
  right: -48px;
  top: 116px;
}
}
@media only screen and (max-width: 991px) {
    #hero .container {
      margin-top: 50px;
    }
    .hero__content {
      padding-top: 40px;
    }
    .nav-link {
      padding: 20px;
    }
    .navbar-nav {
      margin-top: 20px;
      background: var(--lighter);
      border-radius: 12px;
      margin-bottom: 16px;
    }
    .socialNav {
      position: static;
      justify-content: space-evenly;
    }
    .ch__phone__animate {
      padding: 24px;
    }  
}
@media only screen and (max-width: 640px) {
  footer .container {
    flex-direction: column !important;
 }
 #projectsHome .project img {
  position: static !important;
  margin-top: 16px;
 }
}