@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
:root{
  --bg-1 : #1D0143;
  --bg-2: #291674;
  --bg-3: #192057;
  --bg-4: #28054D;
  --bg-5: #473591;
  --bg-6: #15CAB1;
  --bg-7: #7D60F9;
  --color-ass: #dbdbdb;
}

/* background color */
.bg-1{
  background: var(--bg-1) !important;
}
.bg-2{
  background: var(--bg-2) !important;
}
.bg-3{
  background: var(--bg-3) !important;
}
.bg-4{
  background: var(--bg-4) !important;
}
.bg-5{
  background: var(--bg-5) !important;
}
.bg-6{
  background: var(--bg-6) !important;
}
.bg-7{
  background: var(--bg-7) !important;
}
.cl-ass{
  color: var(--color-ass) !important;
}
.fs-16{
  font-size: 16px !important;
}
.fs-14{
  font-size: 14px !important;
}
.fw-md{
  font-weight: 500 !important;
}

h1,h2,h3,h4,h5,h6,p,span,button{
  font-family: "Poppins" !important;
}


/* menu */
#myMenuContent .nav-pills .nav-link.active{
  background: transparent !important;
  position: relative;
  transition: .4s;
}
#myMenuContent .nav-pills .nav-link.active::after{
  background: transparent !important;
  content: '';
  position: absolute;
  width: 100%;
  /* height: 3px; */
  top: 100%;
  left: 0;
  border-bottom: 2px solid turquoise;
  animation-delay: .3s;
}

/* hero section */
#home{
  height: 100vh;
  background: #1D0143 url(../img/bg-2.jpg) center center;
  background-blend-mode: multiply;

  
}
.dollar-text{
    color: #ccc;
    transition: .3s;
}
.dollar-text:hover{
    color: #fff !important;
}
.scroll-down{
  color: #15CAB1 !important;
  cursor: pointer;
  animation: down 2s infinite alternate;
}
@keyframes down {
  100%,0%{
    transform: translateY(7px);
  }
  50%{
    transform: translateY(-7px);
  }
}
.img-anim{
  animation: imgani 3s infinite alternate;
}
@keyframes imgani {
  100%,0%{
    transform: translateY(8px);
  }
  50%{
    transform: translateY(-8px);
  }
}


/* trust */
#trust .icon-box{
  transition: ease-in-out .4s;
}
#trust .icon-box:hover{
  transform: translateY(-15px);
  box-shadow: 0 6px 12px 0 rgba(255, 255, 255, 0.3)
}



/* video */
video{
  max-width: 100%;
}
.new-video .venobox{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.new-video,
.new-video img{
  border-radius: 10px;
}
.new-video .video-area{
  transform: translateY(-1.5rem);
}
.new-video .bx-play::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  background: #fff;
  border-radius: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
  animation: v-ani 2s infinite ;
}
@keyframes v-ani {
  0%{
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100%{
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* services */
#services .icon-box img{
  /* filter: brightness(100); */
  padding: 15px;
  border: 1px solid #15CAB1;
  border-radius: 50%;
  transition: transform .4s, border .4s ease-in-out;
}
#services .icon-box:hover img{
  /* filter: brightness(100); */
  padding: 15px;
  border: 1px solid transparent;
  transform: scale(.8);
}

/* update section */
.update-box{
  background: #15CAB1 url(../img/wave-shap.png) center center;
  /* background-size: auto; */
  background-blend-mode: multiply;
}



/* accordition */
.accordion-button::after {
  filter: brightness(100);
}


/* quality */
#quality{
  background: url(../img/bg-3.jpg) center center;
  background-blend-mode: darken;
  background-size: cover;
  position: relative;
  z-index: 1;
}
#quality::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #0060a0dc;
  z-index: -1;
}
#quality > .contaienr{
  z-index: 2;
}


/* latest posts */
.post-area .featured-img img{
  transition: .4s;
}
.post-area:hover .featured-img img{
  transform: scale(1.3) rotate(5deg);
}

/* login */
.faka{
  border: 1px solid #cf0000;
}


@media screen and (max-width:768px) {
  #home{
    height: auto !important;
    padding-top: 100px;
  }
  #home .dollar{
    font-size: 13px !important;
  }
}