@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap');

/* @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); */

/* @import url("https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,700"); */

:root {
  
  --primary:#2DFFC6;

  --success:#0AD69F;

  --info: #17A2B8;

  --dark: #000000;

  --grey: #1E2029;

  /* --dark-blue: #1b1834; */
  --dark-blue: #12141D;
  /* --dark-blue: #020011; */

  --light: #8F8F8F;
}

.card-grey{
  background-color: var(--grey);
}


body {
  background-image: url("../img/bg4.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: cover;
  background-size: cover;
  

  font-family: 'Poppins', sans-serif;
}

.header {
  height: calc(100vh - 100px);
  display: grid;
  align-content: center;
  
  background: url("../img/home.png") no-repeat;
  background-attachment: fixed;
  background-size: cover!important;
}

.collapse-header { border-radius: .5em; font-size:.8rem; background:var(--dark-blue) !important; padding:.5em 1em; display:grid; grid-auto-flow: column; grid-template-columns:1fr auto; align-content:center; cursor: pointer; -webkit-border-radius: .5em; -moz-border-radius: .5em; -ms-border-radius: .5em; -o-border-radius: .5em; }
.collapse-header:not(active)::after { content:"\F0140" !important; font-family:"Material Design Icons"; color:var(--primary) !important; font-size:2em !important; }

.cta-container { display: grid; height: 30vh; align-items: center; }

@media (min-width: 810px) { 
  .heading-primary { font-weight: 700; font-size: 4em !important;} 
}

@media (max-width: 810px) {
  .heading-primary { font-weight: 700; font-size: 2.5em !important;}
  .heading-secondary { font-weight: 600; font-size: 2.2em !important;}
  .tagline { padding-top: 5em; }
  /* .tagline2 { font-size: .7em !important;} */
  .video-home iframe { height: 50vh !important;}
  .small-display-none { display: none !important; }
}
@media (max-width: 481px) {
  .heading-primary { font-weight: 700; font-size: 2.4em !important;}
  .heading-secondary { font-weight: 600; font-size: 1.6em !important;}
  .tagline { padding-top: 5em; font-size: .7em !important;}
  /* .tagline2 { font-size: .7em !important;} */
  .brand { width: 10em; }
  .video-home iframe { width: 100vw !important;}
  .small-display-none { display: none !important; }
  .home-btn { justify-content: center !important; }
  .service-cards { width: 90vw !important; }
  .sticky-container section { min-width: 50vw !important; font-size: .2em !important; }
}
@media (max-width: 320px) {
  .heading-primary { font-weight: 700; font-size: 1.5em !important;}
  .heading-secondary { font-weight: 600; font-size: 1.5em !important;}
  .tagline { padding-top: 5em; font-size: .8em !important;}
  /* .tagline2 { font-size: .6em !important;} */
  .brand { width: 8em; }
  .container { width: 90% !important; }
  .home-btn { justify-content: center !important; }
  .cta-btn { width: 100% !important; }

  .small-display-none { display: none !important; }
  .sticky-container section { width: 100vw !important; }
}

.home-btn { justify-content: start; }

.heading-primary { font-weight: 700; font-size: 4em;}
.heading-secondary { font-weight: 700; font-size: 3em;}
.heading-tertiary { font-weight: 700; font-size: 0.8em !important;}
.p-tsize { font-size: 1.2em !important;  }
.p-tsize-h { font-size: 1.3em !important;  }

.relative { position: relative; }


.b-navbar { padding: .5em; background-color: #000; }
.b-navbar nav { display: grid; grid-gap: 2em; }



.tagline { padding-top: 5em; font-size: 1.5em;}
/* .tagline2 { font-size: 1.5em;} */

.cta-btn {
  font-weight: 500;
  cursor: pointer;
  color: #111;
  padding: .5em 3em;
  display: grid;
  justify-items: center;
  margin-top: 1em;
  transition: .5s;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
}

.cta-btn:hover {
  letter-spacing: 1px;
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  box-shadow: var(--success) 0px 5px 24px, var(--success) 0px 1px 2px; 
}

/* video */
.video-home iframe {
  /*margin-top: -10em;
  *//*border: .25px solid var(--primary);
  */
  width: 100vw !important;
  height: 100vh;
  z-index: 10;
  transition: .5s;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  border-radius: .1em;
  -webkit-border-radius: .1em;
  -moz-border-radius: .1em;
  -ms-border-radius: .1em;
  -o-border-radius: .1em;
}

/* .video-home:hover iframe { width: 80vw !important; height: 100vh;} */

.width-100 { width:100% !important;  }

.video-home { transition: 3s all; -webkit-transition: 3s all; -moz-transition: 3s all; -ms-transition: 3s all; -o-transition: 3s all; }

.headerSVG-1 { position: absolute; top: 20%; left: 7.5%;}
.headerSVG-2 { position: absolute; top: 44%; right: 10%; z-index: 9;}
.headerSVG-3 { position: absolute; top: 140%; left: 10%; z-index: 9;}
.SVG-4 { position: absolute; top: 327%; left: 10%; z-index: 9; }

.primary-text { color: var(--primary)!important;  }
.primary-bg { background-color: var(--primary); }

.success-text { color: var(--success); }
.success-bg { background-color: var(--success); }

.info-text { color: var(--info); }
.info-bg { background-color: var(--info); }

.dark-text { color: var(--dark); }
.dark-bg { background-color: var(--dark-blue); }

.light-text { color: var(--light); }

.vh-100 { min-height: 100vh; }

.neon-shadow { box-shadow: var(--success) 0px 5px 24px, var(--success) 0px 1px 2px;  }

.circle-numbers { font-family: 'Poppins', sans-serif; font-weight: 700 !important; display: grid; justify-content: center; align-items: center; color: #000; border-radius: 50%; width: 3em; height: 3em; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }

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

.container-80 { width: 70%; margin: 0 auto;}

.primary-heading { font-size: 5em !important; }

.blur-bg { filter: blur(8px);
  -webkit-filter: blur(8px); }

.header-about { 
  height: 90vh!important; 
  display: grid;
  align-content: center;
  background-color: #fff;
  background: url("../img/about.jpg") no-repeat;
  background-attachment: fixed;
  background-size: cover!important;}

.header h1 { 
  font-family: "Popping", sans-serif; 
  font-weight: 600;
  color: #fff; }

.showcase
{
  right: 0;
  width: 100%;
  display: grid;
  align-items: center;
  background: url("../img/influencer.jpg") no-repeat;
  background-attachment: fixed;
  background-size: cover!important;
  /* animation: up-down 20s infinite; */
  /* -webkit-animation: up-down 20s infinite; */
}

/* @keyframes up-down {
  0% { background-position: top; }
  25% { background-position: center; }
  50% { background-position: bottom; }
  75% { background-position: center; }
  100% { background-position: top; }
} */

/* @keyframes zigzag {
  0% { background-position: center;  }
  25% { background-position: top left;  }
  50% { background-position: top right;  }
  75% { background-position: center; background-size: 200%; }
  90% { background-position: right;  }
  100% { background-position: center;  }
} */






/*------------------------------ HEADING TEXT ANIMATION ------------------------------*/
  .dropping-texts > div {
    opacity:0;
    position:absolute;
  }

  .dropping-texts div {
    /* font-size: 3em!important; */
    /* font-family: 'Monserrat', sans-serif; */
    /* font-weight: 700; */
    color: var(--primary);
  }

  .dropping-texts > div:nth-child(1) {
    animation: roll 10s linear infinite 0s;
    -webkit-animation: roll 10s linear infinite 0s;
  }
  .dropping-texts > div:nth-child(2) {
    animation: roll 10s linear infinite 2s;
    -webkit-animation: roll 10s linear infinite 2s;
  }
  .dropping-texts > div:nth-child(3) {
    animation: roll 10s linear infinite 4s;
    -webkit-animation: roll 10s linear infinite 4s;
  }
  .dropping-texts > div:nth-child(4) {
    animation: roll 10s linear infinite 6s;
    -webkit-animation: roll 10s linear infinite 6s;
  }
  .dropping-texts > div:nth-child(5) {
    animation: roll 10s linear infinite 8s;
    -webkit-animation: roll 10s linear infinite 8s;
  }

  @keyframes roll {
    0% {
      font-size:0px;
      opacity:0;
      margin-left:-30px;
      margin-top:0px;
    }
    3% {
      opacity:1;
    }
    5% {
      font-size:inherit;
      opacity:1;
      margin-left:0px;
      margin-top:0px;
    }
    20% {
      font-size:inherit;
      opacity:1;
      margin-left:0px;
      margin-top:0px;
    }
    24% {
      font-size:0px;
      opacity:0;
      margin-left:100px;
    }
    100% {
      font-size:0px;
      opacity:0;
      margin-left:-40px;
      margin-top:0px;
    }
  }
/*------------------------------ heading-text animation END ------------------------------*/










/*------------------------------ scroll indicator animation ------------------------------*/

.scroll-indicator {
  animation: bounce 3s infinite;
  position: absolute;
  margin-top: -6em;
  -webkit-animation: bounce 3s infinite;
  background-color: var(--dark);
  color: var(--success);
  width: 3em;
  height: 3em;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

@keyframes bounce {
  0% {
    bottom: 55px;
  }
  50% {
    bottom: 65px;
  }
  100% {
    bottom: 55px;
  }
}
/*------------------------------ scroll indicator animation END------------------------------*/


/*------------------------------ Service Cards ------------------------------*/
.service-cards {
  background-color: var(--grey);
  border-radius:1.5em;
  /*background: radial-gradient(circle, rgb(2, 51, 38) 0%, rgb(0, 20, 16) 92%);*/
  -webkit-border-radius:1.5em;
  -moz-border-radius:1.5em;
  -ms-border-radius:1.5em;
  -o-border-radius:1.5em;
}

.service-cards { padding: 1.5em 2em; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; }
.service-cards:hover {  /*box-shadow: 0px 4px 17px var(--success)!important; border: 1px solid var(--primary);*/  transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); }
.service-cards:hover + .service-cards-title { background-color: #fff; }

.service-cards-title { color: var(--primary); }
.service-cards-title .white-text { color: var(--primary); letter-spacing: .3em;}

/* .service-cards-btn span { border-bottom: 1px solid var(--success); } */
.service-cards-btn span:hover { border: none; color: #fff;}

.service-cards-btn a{ max-height: 2.8em; padding: .5em 1em; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; }
.service-cards-btn a:hover{ box-shadow: 0px 3px 10px var(--success); transform: translateY(-.2em); background-color: var(--success); padding: .5em 1em; color: var(--dark); border-radius: .2em; -webkit-border-radius: .2em; -moz-border-radius: .2em; -ms-border-radius: .2em; -o-border-radius: .2em; -webkit-transform: translateY(-.2em); -moz-transform: translateY(-.2em); -ms-transform: translateY(-.2em); -o-transform: translateY(-.2em); }

/* Glassmorphism card effect */
/* .home-bg { background: url(../img/bmd-bg1.jpg); } */

/* .service-cards {
  background:rgba(27, 24, 52, .5);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter:blur(5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
}
.service-cards:hover { 
  backdrop-filter:blur(10);
  --moz-backdrop-filter:blur(10);
} */

/*------------------------------ Service Cards End------------------------------*/




/*------------------------------ Glitch Effect ------------------------------*/
    /* html, body, h1 {
      padding: 0;
      margin: 0;
      font-family: "Montserrat", sans-serif;
    } */

    #services-glitch {

      /* font-family: "Montserrat", sans-serif;
      font-weight: 700;
      background: #0a0a0a;
      height: 20vh; */
      width: 100%;
      /* margin: 0;
      padding: 0; */
      /* display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; */
      /* background: linear-gradient(rgba(10, 10, 10, 0.6), #020011), repeating-linear-gradient(0, transparent, transparent 2px, black 3px, black 3px), url("../img/wwd-bg.jpg"); */
      /* background-size: cover; */
      /* background-position: center; */
      /* z-index: 1; */
    }

    #wrapper {
      text-align: center;
    }

    /* .sub {
      color: #64dcdc;
      letter-spacing: 1em;
    } */

    /* Our mixin positions a copy of our text
    directly on our existing text, while
    also setting content to the appropriate
    text set in the data-text attribute. */
    .glitch {
      position: relative;
      /* color: white; */
      /* font-size: 2.5em; */
      /* font-weight: 700; */
      /* letter-spacing: 0.2em; */
      /* Animation provies a slight random skew. Check bottom of doc
      for more information on how to random skew. */
      /*animation: glitch-skew 1s infinite linear alternate-reverse;*/
    }
    .glitch::before {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* left: 2px; */
      text-shadow: -2px 0 #ff00c1;
      /*Createsaninitialclipforourglitch.Thisworksinatypicaltop,right,bottom,leftfashionandcreatesamasktoonlyshowacertainpartoftheglitchatatime.*/clip: rect(44px, 450px, 56px, 0);
      /*Runsourglitch-animdefinedbelowtorunina5sloop,infinitely,withanalternatinganimationtokeepthingsfresh.*/
      /*animation: glitch-anim 5s infinite linear alternate-reverse;*/
      /*-webkit-animation: glitch-anim 5s infinite linear alternate-reverse;*/
      display:none;
    }
    .glitch::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      left: -2px;
      text-shadow: -2px 0 #7e0000, 2px 2px #ff00c1;
      /*animation: glitch-anim2 1s infinite linear alternate-reverse;*/
      display:none;
    }

    /* Creates an animation with 20 steaps. For each step, it calculates 
    a percentage for the specific step. It then generates a random clip
    box to be used for the random glitch effect. Also adds a very subtle
    skew to change the 'thickness' of the glitch.*/
    @keyframes glitch-anim {
      0% {
        clip: rect(45px, 9999px, 98px, 0);
        transform: skew(0.45deg);
      }
      5% {
        clip: rect(72px, 9999px, 80px, 0);
        transform: skew(0.69deg);
      }
      10% {
        clip: rect(60px, 9999px, 20px, 0);
        transform: skew(0.36deg);
      }
      15% {
        clip: rect(48px, 9999px, 75px, 0);
        transform: skew(0.43deg);
      }
      20% {
        clip: rect(25px, 9999px, 6px, 0);
        transform: skew(0.36deg);
      }
      25% {
        clip: rect(36px, 9999px, 13px, 0);
        transform: skew(0.23deg);
      }
      30% {
        clip: rect(84px, 9999px, 87px, 0);
        transform: skew(0.48deg);
      }
      35% {
        clip: rect(8px, 9999px, 61px, 0);
        transform: skew(0.06deg);
      }
      40% {
        clip: rect(5px, 9999px, 46px, 0);
        transform: skew(0.92deg);
      }
      45% {
        clip: rect(58px, 9999px, 65px, 0);
        transform: skew(0.62deg);
      }
      50% {
        clip: rect(67px, 9999px, 43px, 0);
        transform: skew(0.78deg);
      }
      55% {
        clip: rect(88px, 9999px, 98px, 0);
        transform: skew(0.83deg);
      }
      60% {
        clip: rect(49px, 9999px, 95px, 0);
        transform: skew(0.92deg);
      }
      65% {
        clip: rect(99px, 9999px, 90px, 0);
        transform: skew(0.56deg);
      }
      70% {
        clip: rect(72px, 9999px, 35px, 0);
        transform: skew(0.76deg);
      }
      75% {
        clip: rect(53px, 9999px, 82px, 0);
        transform: skew(0.41deg);
      }
      80% {
        clip: rect(28px, 9999px, 44px, 0);
        transform: skew(0.68deg);
      }
      85% {
        clip: rect(74px, 9999px, 48px, 0);
        transform: skew(0.28deg);
      }
      90% {
        clip: rect(96px, 9999px, 18px, 0);
        transform: skew(0.93deg);
      }
      95% {
        clip: rect(67px, 9999px, 28px, 0);
        transform: skew(0.65deg);
      }
      100% {
        clip: rect(45px, 9999px, 31px, 0);
        transform: skew(0.18deg);
      }
    }
    @keyframes glitch-anim2 {
      0% {
        clip: rect(37px, 9999px, 76px, 0);
        transform: skew(0.48deg);
      }
      5% {
        clip: rect(87px, 9999px, 69px, 0);
        transform: skew(0.51deg);
      }
      10% {
        clip: rect(93px, 9999px, 68px, 0);
        transform: skew(0.9deg);
      }
      15% {
        clip: rect(38px, 9999px, 83px, 0);
        transform: skew(0.95deg);
      }
      20% {
        clip: rect(94px, 9999px, 52px, 0);
        transform: skew(0.27deg);
      }
      25% {
        clip: rect(20px, 9999px, 28px, 0);
        transform: skew(0.93deg);
      }
      30% {
        clip: rect(20px, 9999px, 24px, 0);
        transform: skew(0.3deg);
      }
      35% {
        clip: rect(51px, 9999px, 96px, 0);
        transform: skew(0.81deg);
      }
      40% {
        clip: rect(2px, 9999px, 79px, 0);
        transform: skew(0.47deg);
      }
      45% {
        clip: rect(56px, 9999px, 99px, 0);
        transform: skew(0.53deg);
      }
      50% {
        clip: rect(52px, 9999px, 44px, 0);
        transform: skew(0.91deg);
      }
      55% {
        clip: rect(53px, 9999px, 88px, 0);
        transform: skew(0.86deg);
      }
      60% {
        clip: rect(9px, 9999px, 6px, 0);
        transform: skew(0.19deg);
      }
      65% {
        clip: rect(29px, 9999px, 20px, 0);
        transform: skew(0.04deg);
      }
      70% {
        clip: rect(24px, 9999px, 95px, 0);
        transform: skew(0.04deg);
      }
      75% {
        clip: rect(76px, 9999px, 1px, 0);
        transform: skew(0.99deg);
      }
      80% {
        clip: rect(23px, 9999px, 67px, 0);
        transform: skew(0.38deg);
      }
      85% {
        clip: rect(68px, 9999px, 44px, 0);
        transform: skew(0.87deg);
      }
      90% {
        clip: rect(84px, 9999px, 29px, 0);
        transform: skew(0.31deg);
      }
      95% {
        clip: rect(60px, 9999px, 84px, 0);
        transform: skew(0.94deg);
      }
      100% {
        clip: rect(37px, 9999px, 17px, 0);
        transform: skew(0.26deg);
      }
    }
    @keyframes glitch-skew {
      0% {
        transform: skew(-2deg);
      }
      10% {
        transform: skew(2deg);
      }
      20% {
        transform: skew(-3deg);
      }
      30% {
        transform: skew(-1deg);
      }
      40% {
        transform: skew(3deg);
      }
      50% {
        transform: skew(3deg);
      }
      60% {
        transform: skew(-4deg);
      }
      70% {
        transform: skew(1deg);
      }
      80% {
        transform: skew(-3deg);
      }
      90% {
        transform: skew(2deg);
      }
      100% {
        transform: skew(2deg);
      }
    }
/*------------------------------ Glitch Effect END ------------------------------*/




/*------------------------------ Horizontal Scroll ------------------------------*/
.reviews-container {  padding-top:5em; }
.reviews-container h5 { padding-bottom: .5em; font-size: 2em; }

.horizontal-scroll {
  overflow-x: hidden;
  display: flex;
  /* width: 80%; */
 
  /* height: 100vh; */
  font-family: sans-serif;
}

.horizontal-scroll .reviews {
  background: var(--success);
  /* background: radial-gradient(circle, rgba(9,116,87,1) 0%, rgba(2,50,37,1) 92%);  */
  min-width: 40vw;
  max-height: 30vh;
  display: grid;
  align-items: start;
  color: white;
  margin-right: 3em;
  border-radius: .25em;
  padding: 2em;
}

.horizontal-scroll .reviews h2 { padding-bottom: 1em; }

.reviews div {
  /* display: grid; */
  /* justify-items: center; */
}
/* .horizontal-scroll .reviews:nth-child(even) { */
  /* background-color: #eee; */
  /* color: #000; */
/* } */

/*------------------------------ Horizontal Scroll END ------------------------------*/





/*------------------------------ Logo Marquee ------------------------------*/

.logoMarqueeSection,.partnersections {
  padding-top: 5em;
  padding-bottom: 5em;
  /* background-color: red; */
}

#logoMarqueeSection {
  /* max-width: 1920px!important; */
  margin: 0 auto;
}

.default-content-container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
    width: 100%;
    min-height: 100vh;
}

div.marquee>a>img {
  height: 120px;
}

.logoMarqueeSection>div>div {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
}

.marquee-wrapper {
  display:  inline-block;
  white-space: nowrap;

}



.marquee {
    display:  inline-block;
    white-space: nowrap;
    position: relative;
    transform: translate3d(0%, 0, 0);
    animation-name: marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    padding: .5em;
    animation-delay:2s;
    background: white;
    border-radius: var(--radius);
    animation-play-state: paused ;
}

.marquee a {
    display:  inline-block;
    white-space: nowrap;
    padding-right: 5.4rem;
}


.marquee img { border-radius: var(--radius); -webkit-border-radius: var(--radius); -moz-border-radius: var(--radius); -ms-border-radius: var(--radius); -o-border-radius: var(--radius); }

.marquee-wrapper:hover .marquee {
    animation-play-state: paused!important ;
}
.partnersections:hover .marquee {
  animation-play-state: running;
}

@keyframes marquee {
    0% {
        transform: translate3d(0%, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}
/*------------------------------ Logo Marquee END ------------------------------*/








/*------------------------------ footer ------------------------------*/


footer{
  /* position: fixed; */
  background: #000;
  width: 100%;
  bottom: 0;
  left: 0;
  position: relative;
}
footer::before{
  content: '';
  position: absolute;
  left: 0;
  top: 120px;
  height: 1px;
  width: 100%;
  background: rgb(56, 56, 56);
}
footer .content{
  max-width: 80%;
  margin: auto;
  padding: 30px 40px 40px 40px;
}
footer .content .top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 50px;
}
.content .top .logo-details{
  color: #fff;
  font-size: 30px;
}

.logo-details img { max-width: 20em; }

.content .top .media-icons{
  display: flex;
}
.content .top .media-icons a{
  height: 40px;
  width: 40px;
  margin: 0 8px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 17px;
  text-decoration: none;
  transition: all 0.4s ease;
}
.top .media-icons a:nth-child(1){
  background: #4267B2;
}
.top .media-icons a:nth-child(1):hover{
  color: #4267B2;
  background: #fff;
}
.top .media-icons a:nth-child(2){
  background: #1DA1F2;
}
.top .media-icons a:nth-child(2):hover{
  color: #1DA1F2;
  background: #fff;
}
.top .media-icons a:nth-child(3){
  background: #E1306C;
}
.top .media-icons a:nth-child(3):hover{
  color: #E1306C;
  background: #fff;
}
.top .media-icons a:nth-child(4){
  background: #0077B5;
}
.top .media-icons a:nth-child(4):hover{
  color: #0077B5;
  background: #fff;
}
.top .media-icons a:nth-child(5){
  background: #FF0000;
}
.top .media-icons a:nth-child(5):hover{
  color: #FF0000;
  background: #fff;
}
footer .content .link-boxes{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
footer .content .link-boxes .box{
  width: calc(100% / 5 - 10px);
}
.content .link-boxes .box .link_name{
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 10px;
  position: relative;
}
.link-boxes .box .link_name::before{
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 35px;
  background: #fff;
}
.content .link-boxes .box li{
  margin: 6px 0;
  list-style: none;
}
.content .link-boxes .box li a{
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  opacity: 0.8;
  transition: all 0.4s ease
}
.content .link-boxes .box li a:hover{
  opacity: 1;
  text-decoration: underline;
}
.content .link-boxes .input-box{
  margin-right: 55px;
}
.link-boxes .input-box input{
  height: 40px;
  width: calc(100% + 55px);
  outline: none;
  border: 2px solid #AFAFB6;
  background: #140B5C;
  border-radius: 4px;
  padding: 0 15px;
  font-size: 15px;
  color: #fff;
  margin-top: 5px;
}
.link-boxes .input-box input::placeholder{
  color: #AFAFB6;
  font-size: 16px;
}
.link-boxes .input-box input[type="button"]{
  background: #fff;
  color: #140B5C;
  border: none;
  font-size: 18px;
  font-weight: 500;
  margin: 4px 0;
  opacity: 0.8;
  cursor: pointer;
  transition: all 0.4s ease;
}
.input-box input[type="button"]:hover{
  opacity: 1;
}
footer .bottom-details{
  width: 100%;
background: #2c303a;
}
footer .bottom-details .bottom_text{
  max-width: 1250px;
  margin: auto;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
}
.bottom-details .bottom_text span,
.bottom-details .bottom_text a{
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  opacity: 0.8;
  text-decoration: none;
}
.bottom-details .bottom_text a:hover{
  opacity: 1;
  text-decoration: underline;
}
.bottom-details .bottom_text a{
  margin-right: 10px;
}
@media (max-width: 900px) {
  footer .content .link-boxes{
    flex-wrap: wrap;
  }
  footer .content .link-boxes .input-box{
    width: 40%;
    margin-top: 10px;
  }
}
@media (max-width: 700px){
  footer{
    position: relative;
  }
  .content .top .logo-details{
    font-size: 26px;
  }
  .content .top .media-icons a{
    height: 35px;
    width: 35px;
    font-size: 14px;
    line-height: 35px;
  }
  footer .content .link-boxes .box{
    width: calc(100% / 3 - 10px);
  }
  footer .content .link-boxes .input-box{
    width: 60%;
  }
  .bottom-details .bottom_text span,
  .bottom-details .bottom_text a{
    font-size: 12px;
  }
}
@media (max-width: 520px){
  footer::before{
    top: 145px;
  }
  footer .content .top{
    flex-direction: column;
  }
  .content .top .media-icons{
    margin-top: 16px;
  }
  footer .content .link-boxes .box{
    width: calc(100% / 2 - 10px);
  }
  footer .content .link-boxes .input-box{
    width: 100%;
  }
}

/*------------------------------ footer END ------------------------------*/



/* .service-card { display: grid; align-items: center; min-height: 15em; padding: 2em;} */
.service-cards ul { list-style: none; }
.service-cards li .mdi { line-height: 2em; color: var(--primary);}
.btn-appear .b-btn { display: none; }
.btn-appear:hover .b-btn { display: block; }


.about-card { background-color: rgba(255, 255, 255, 0.055); display: grid; align-items: center; min-height: 15em; padding: 2em;}
.about-card ul { list-style: none; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; }
.about-card img { max-height: 15em; }

.width-70{ width: 50vw !important; }
.block { display: block; }

.header-team { height: 90vh; display: grid; align-items: center; background-image: url('../img/team.jpg'); 
  /* background: url("../img/bmd-bg.jpg") no-repeat; */
  background-attachment: fixed;
  background-size: cover!important; }

.header-contact { min-height: 90vh; display: grid; align-items: center; padding: 5em 0em; background: url("../img/contact.jpg") no-repeat; background-attachment: fixed;
  background-size: cover!important;}

.header-marketing {
height: 90vh!important; 
display: grid;
align-content: center;
background-color: #fff;
background: url("../img/marketing.jpg") no-repeat;
background-attachment: fixed;
background-size: cover!important;}

.header-influencer {
height: 90vh!important; 
display: grid;
align-content: center;
background-color: #fff;
background: url("../img/influencer.jpg") no-repeat;
background-attachment: fixed;
background-size: cover!important;}

.header-video {
height: 90vh!important; 
display: grid;
align-content: center;
background-color: #fff;
background: url("../img/video.jpg") no-repeat;
background-attachment: fixed;
background-size: cover!important;}

.header-social {
height: 90vh!important; 
display: grid;
align-content: center;
background-color: #fff;
background: url("../img/social.jpg") no-repeat;
background-attachment: fixed;
background-size: cover!important;}

.header-software {
height: 90vh!important; 
display: grid;
align-content: center;
background-color: #fff;
background: url("../img/software.jpg") no-repeat;
background-attachment: fixed;
background-size: cover!important;}

.b-h1 {
  margin-bottom: .4em;
  font-family: 'Calibre',Arial,sans-serif;
  font-size: 4em;
  line-height: .89;
  font-weight: 500;
  letter-spacing: -.1vw;
}

.b-content {
  color: #fff;
  /* max-width: 900px; */
  margin-bottom: 1em;
  margin-top: 1em;
  font-family: 'Poppins',sans-serif;
  font-size: 1.4em;
  line-height: 1.3;
  font-weight: 200;
  /* letter-spacing: 1px; */
}

.team-card-container { padding: 5em 0em; }
.team-card { border-radius: .5em; background-color: #000; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; -webkit-border-radius: .5em; -moz-border-radius: .5em; -ms-border-radius: .5em; -o-border-radius: .5em; }
.team-card:hover { overflow: hidden; margin: 0 auto; box-shadow: var(--success) 0px 5px 24px, var(--success) 0px 1px 2px; transform: translateY(-.2em) scale(1.05); -webkit-transform: translateY(-.2em) scale(1.05); -moz-transform: translateY(-.2em) scale(1.05); -ms-transform: translateY(-.2em) scale(1.05); -o-transform: translateY(-.2em) scale(1.05); }
.team-img { width: 300px; height: 320px; overflow: hidden; }
.team-card:hover img {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
}

/* .team-card .team-img { height: 15em; width: 15em;} */
.team-card img { transition: .3s; width: 300px; height: 320px; object-fit: cover; border-radius: .5em .5em 0 0; -webkit-border-radius: .5em .5em 0 0; -moz-border-radius: .5em .5em 0 0; -ms-border-radius: .5em .5em 0 0; -o-border-radius: .5em .5em 0 0; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; }

.team-socials a { transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; }
.team-socials a:hover { color: var(--success); }

.team-gradient { background: radial-gradient(circle, var(--dark-blue) 0%, rgba(0,0,0,1) 92%);  }

.contact-form label { font-weight: 300; font-size: 1.3em; margin-left: .2em; }
.input-field { transition: .5s !important; border-color: var(--primary); background-color: rgb(47, 46, 63)!important; -webkit-transition: .5s !important; -moz-transition: .5s !important; -ms-transition: .5s !important; -o-transition: .5s !important; }
.input-field input { color: #ffffff; }
.input-field textarea { color: #ffffff; line-height: 1.5em;}
.input-field:hover, .input-field:focus { border: 1px solid var(--success)!important; }

.input-field select option{ background-color: var(--dark-blue); color: #fff !important; }
.input-field select option:hover{ background-color: var(--success) !important; color: #fff !important; }

/* .contact-form .cta-btn { font-weight: 400 !important;  font-size: 1.3em;} */
/* .contact-form .cta-btn:hover { transform: translateX(.7em); -webkit-transform: translateX(.7em); -moz-transform: translateX(.7em); -ms-transform: translateX(.7em); -o-transform: translateX(.7em); } */

.eli-searchable-select-container.active, .eli-searchable-select-container:focus-within { background-color: var(--dark-blue) !important;} 
.eli-searchable-select-container .eli-searchable-select-optionsbox a:hover, .eli-searchable-select-container .eli-searchable-select-optionsbox a:focus, .eli-searchable-select-container .eli-searchable-select-optionsbox a:active { background-color: var(--success) !important; color: #000; }

/* .img-bg { min-height: 100vh; background-image: url('../img/bg3.jpg'); position: absolute fixed; background-size: cover; background-repeat: no-repeat; } */



/*   */

      .vertical-section {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .reviews-container h1 {
          overflow-x: hidden;
          position: sticky;
          top:1em
        }

        .sticky-container main {
            overflow-x: hidden;
            display: flex;
            position: sticky;
            top:25%;
            bottom: 0;
            overflow-x: auto;
        }

        /* .sticky-container h1 {
            margin: 0;
            padding: 0;
        } */

       .sticky-container section {
            min-width: 40vw;
            min-height: 60vh;
            display: grid;
            justify-items: center;
            align-items: center;
            /* font-size: 4ch; */
            background: var(--dark-blue);
            color: white;
            margin-right: 0em;
            margin-left:0em;
        }

        .sticky-container section:nth-child(even) {
            /* background-color: ; */
            /* color: teal; */
        }

/*  */


.btn-dropdown > .dropdown.is-visible {
 
  left: -5em!important;
  width: fit-content; 
  min-width: 220px;
  padding: 1em 0em;
}

.softwareservice { width:50vw;}


@media screen and (max-width: 812px) {  

  .softwareservice { min-width:100%;}


  .sticky-container section {
    min-width: 100vw !important;
  }


header .dropdown.is-visible {
    animation:fadeIn .5s;
    display: inherit!important;
    position: relative!important;
    background:inherit!important;
    left: -50px;
    min-width:150px;
    list-style: none!important;
    text-align: left!important;
    color: inherit!important;
    border-radius: var(--radius);
    border: none!important;
    transition:height 1s ease-in-out;
    top: .5em!important;
    
}

header .dropdown.is-visible > li a { position: relative; }
header .dropdown.is-visible > li a::before { content : " - "; position:absolute; left:-1em; top:-.2em; color:white; }
header .dropdown.is-visible > li:hover a::before { color:var(--primary); }
header a:hover { color:var(--primary); }


.btn-dropdown > .dropdown.is-visible {
  display: block;
  position: absolute;
  top: 37px;
  background: var(--dark) !important;
  left: 0;
  width: 350%;
  list-style: none;
  text-align: left;
  color: rgba(0,0,0,.8);
  border-radius: 0px !important;
  border: none !important;
  transition: .5s height ease-in-out;
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  -ms-border-radius: 0px !important;
  -o-border-radius: 0px !important;
}

.btn-dropdown ul {  margin-bottom:1em; }

.cta-container { height: 30em !important; width: 100vw !important;}

@media (max-width:812px){
  footer::before{ display: none; }
  footer .content .link-boxes { display: grid; grid-gap:2em; }
  footer .content .link-boxes .box { width: 100%; }
  .btn-dropdown > .dropdown.is-visible {
    left: 0px!important;
  }
  nav.active:not(.social)::before { color: white!important;; }
}


@media screen and (min-width:1200px) {
  body { font-size:110%; } /* Increase the font size */
}
@media screen and (min-width:1400px) {
  .container {  } /* Reduce the container width */
}
@media screen and (min-width:1600px) {
  body { font-size:125%; } /* Increase the font size */
}
@media screen and (min-width:1800px) {
  /*html { padding:0 20%; }*/ /* Reduce the container width */
}

.ad-ul ul { list-style: none; }
.ad-ul ul li i{ color: var(--primary);  }
.ad-ul ul li { padding-bottom: 1em !important;  }