:root {
  --green-bg-color:#1fd049;
}
:root {
  --purple-bg-color:#8c09f1;
}
:root {
  --pink-bg-color:#f0386b;
}
:root {
  --yellow-bg-color:#f6ff59;;
}

:root {
  --background-dk-color:#1d1e18;
}

h1, h2, h3, h4, h5, h6

{
  color: #f0386b;
}

body {
  color:#e1e1e1;
  background-color:var(--background-dk-color);
}
footer {
  background-color:#1d1e18;
}

a {
  color:var(--green-bg-color);
}
a:hover {
  color:#cdff72;
}

.navbar > ul > li > a:before {
  background-color:var(--yellow-bg-color);
}


.navbar a, .navbar a:focus {
  font-size:.9rem;
}


.name {
  color:var(--green-bg-color);
}
.hero-single.tall {

  height:430px;

}

.title-box {
  margin-bottom:3rem;
}

.hero .hero-title {
  text-align:left;
}
.green-block {
  background-color: var(--green-bg-color);
  width: 40%;
  height: 3em;
  z-index: 100;
  position: absolute;
  opacity: 0.64;
  margin-top:-1.5em;
}

.purple-block {
  background-color: var(--purple-bg-color);
  width: 83%;
  height: 3em;
  z-index: 100;
  position: absolute;
  opacity: 0.64;
  margin-top: 1.2em;
  right:0em;
}

.purple-block-2 {
  background-color: var(--purple-bg-color);
  width: 65%;
  height: 3em;
  z-index: 100;
  position: absolute;
  opacity: 0.64;
  margin-top: -2em;
  left:0em;
}

.pink-block {
  background-color: var(--pink-bg-color);
  width: 80%;
  height: 3em;
  z-index: 100;
  position: absolute;
  opacity: 0.64;
  margin-top: -1.5em;
  left:0em;
}

.yellow-block {
  background-color: var(--yellow-bg-color);
  width: 70%;
  height: 3em;
  z-index: 100;
  position: absolute;
  opacity: 0.64;
  margin-top: -5.5em;
  right:0em;
}

.no_break {
  white-space: nowrap;
}

.paralax-mf {
    position: relative;
    padding: 3rem 0;
}

#about,#work,#blog, #services,.navbar-mobile ul {
  background-color:var(--background-dk-color);
}

#work {
  margin-bottom:4rem;
}



.service-box .s-description {

color:#bfb7c8;

}

.sect-mt4 {
  margin-top:-4rem;
}

.about-mf .box-shadow-full,.service-box,.work-content, .box-shadow-full {
    background-color: hsl(0deg 0% 15% / 90%);
}

@media (min-width: 768px){
.hero .hero-title {
    font-size: 3rem;
    margin-top: 3rem;
}
}

/*bounce effect*/
.box {

}

/* Button D */

a.buttonD,.title_letter {
  display: inline-block;
  text-decoration: none;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

a.buttonD:hover,.title_letter:hover{
  animation-name: rubberBand;
}

/*.title_letter {
  animation-name: rubberBand;
}*/


@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, .95, 1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

/*letters effects*/

.ml6 {
  position: relative;
font-weight: 900;
font-size:6rem;
}

.ml6 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.2em;
  padding-right: 0.05em;
  padding-bottom: 0.1em;
  overflow: hidden;
}

.ml6 .letter {
  display: inline-block;
  line-height: 1em;
}

@media (max-width: 767.98px) {
.hero .hero-title {
  font-size:1.5rem;

}

.ml6  {
  font-size:2rem;
}
 }