/*working css*/

::-moz-selection {
  background-color: #99DFFF;

}

::selection {
  background-color: #99DFFF;

}

.p-80 {
  padding-bottom: 80px;
  padding-top: 80px;
}

.pbt-80 {
  padding-bottom: 80px;
}

.ptp-80 {
  padding-top: 80px;
}

.pd-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.pbtm-100 {

  padding-bottom: 100px;
}


/*portfolio style code*/


/*.imgages:hover {
  opacity: 1;
  box-shadow: 0px 0px 0px 25px #0077BD;
  transform: scale(1.2;
}*/


/*.new_footer_area {
    background: #fbfbfd;
}*/


.new_footer_top {
  padding: 50px 0px 225px;
  position: relative;
  overflow-x: hidden;
}

.new_footer_area .footer_bottom {
  padding-top: 5px;
  padding-bottom: 5px;
}

.footer_bottom {
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
  color: #7f88a6;
  padding: 27px 0px;
}

.new_footer_top .company_widget p {
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: #6a7695;
  margin-bottom: 20px;
}

.new_footer_top .company_widget .f_subscribe_two .btn_get {
  #333 border-width: 1px;
  margin-top: 20px;
}

.btn_get_two:hover {
  background: transparent;
  color: #0077bd;
}

.btn_get:hover {
  color: #fff;
  background: #6754e2;
  border-color: #6754e2;
  -webkit-box-shadow: none;
  box-shadow: none;
}

a:hover,
a:focus,
.btn:hover,
.btn:focus,
button:hover,
button:focus {
  text-decoration: none;
  outline: none;
}



.new_footer_top .f_widget.about-widget .f_list li a:hover {
  color: #0077bd;
}

.new_footer_top .f_widget.about-widget .f_list li {
  margin-bottom: 11px;
}

.f_widget.about-widget .f_list li:last-child {
  margin-bottom: 0px;
}

.f_widget.about-widget .f_list li {
  margin-bottom: 15px;
}

.f_widget.about-widget .f_list {
  margin-bottom: 0px;
}

.new_footer_top .f_social_icon a {
  width: 44px;
  height: 44px;
  line-height: 43px;
  background: transparent;
  border: 1px solid #e2e2eb;
  font-size: 24px;
}

.f_social_icon a {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 45px;
  color: #858da8;
  display: inline-block;
  background: #ebeef5;
  text-align: center;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.ti-facebook:before {
  content: "\e741";
}

.ti-twitter-alt:before {
  content: "\e74b";
}

.ti-vimeo-alt:before {
  content: "\e74a";
}

.ti-pinterest:before {
  content: "\e731";
}

.btn_get_two {
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #0077bd;
  border-color: #0077bd;
  color: #fff;
}

.btn_get_two:hover {
  background: transparent;
  color: #0077bd;
}

.new_footer_top .f_social_icon a:hover {
  background: #0077bd;
  border-color: #0077bd;
  color: #fff;
}

.new_footer_top .f_social_icon a+a {
  margin-left: 4px;
}

.new_footer_top .f-title {
  margin-bottom: 30px;
  color: #263b5e;
}

.f_600 {
  font-weight: 600;
}

.f_size_18 {
  font-size: 18px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #4b505e;
}

.new_footer_top .f_widget.about-widget .f_list li a {
  color: #6a7695;
}


.new_footer_top .footer_bg {
  position: absolute;
  bottom: 0;
  background: url("../images/footer/footer_bg.png") no-repeat scroll center 0;
  width: 100%;
  height: 248px;
}

.new_footer_top .footer_bg .footer_bg_one {
  background: url("../images/footer/volks.gif") no-repeat center center;
  width: 330px;
  height: 105px;
  background-size: 100%;
  position: absolute;
  bottom: 0;
  left: 30%;
  -webkit-animation: myfirst 22s linear infinite;
  animation: myfirst 22s linear infinite;
}

.new_footer_top .footer_bg .footer_bg_two {
  background: url("../images/footer/cyclist.gif") no-repeat center center;
  width: 88px;
  height: 100px;
  background-size: 100%;
  bottom: 0;
  left: 38%;
  position: absolute;
  -webkit-animation: myfirst 30s linear infinite;
  animation: myfirst 30s linear infinite;
}



@-moz-keyframes myfirst {
  0% {
    left: -25%;
  }

  100% {
    left: 100%;
  }
}

@-webkit-keyframes myfirst {
  0% {
    left: -25%;
  }

  100% {
    left: 100%;
  }
}

@keyframes myfirst {
  0% {
    left: -25%;
  }

  100% {
    left: 100%;
  }
}

/*************footer End*****************/

/*alaknanda divison started here*/

.about {
  $cubic: cubic-bezier(0.64, 0.01, 0.07, 1.65);
  $transition: 0.6s $cubic;
  $size: 40px;
  position: fixed;
  z-index: 10;
  bottom: 10px;
  right: 10px;
  width: $size;
  height: $size;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  transition: all 0.2s ease;

  .bg_links {
    width: $size;
    height: $size;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(#fff, 0.2);
    border-radius: 100%;
    backdrop-filter: blur(5px);
    position: absolute;
  }



  &:hover {
    width: 105px;
    height: 105px;
    transition: all $transition;

    .logo {
      opacity: 1;
      transition: all 0.6s ease;
    }

    .social {
      opacity: 1;

      .icon {
        opacity: 0.9;
      }

      &:hover {
        background-size: 28px;

        .icon {
          background-size: 65%;
          opacity: 1;
        }
      }

      &.portfolio {
        right: 0;
        bottom: calc(100% - 40px);
        transition: all 0.3s 0s $cubic;

        .icon {
          &:hover {
            background-color: #698fb7;
          }
        }
      }

      &.dribbble {
        bottom: 45%;
        right: 45%;
        transition: all 0.3s 0.15s $cubic;

        .icon {
          &:hover {
            background-color: #ea4c89;
          }
        }
      }

      &.linkedin {
        bottom: 0;
        right: calc(100% - 40px);
        transition: all 0.3s 0.25s $cubic;

        .icon {
          &:hover {
            background-color: #0077b5;
          }
        }
      }
    }
  }
}

.wrapper {
  width: 100vw;
  margin: 0 auto;
  height: 400px;
  background-color: #161616;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: all 0.3s ease;
}

@media screen and (max-width: 767px) {
  .wrapper {
    height: 700px;
  }
}

.content-spl {
  max-width: 1024px;
  width: 100%;
  padding: 0 4%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .content {
    padding-top: 300px;
    flex-direction: column;
  }
}

.card {
  width: 100%;
  max-width: 300px;
  min-width: 200px;
  /*height: 250px;*/
  /*   background-color: #fff;*/
  margin: 10px;
  /*   border-radius: 10px;
   box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24);
   border: 2px solid rgba(0, 119, 189, 1);*/
  font-size: 16px;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.3s ease;
}

.material-icons.md-18 {
  font-size: 18px;
}

.material-icons.md-24 {
  font-size: 24px;
}

.material-icons.md-36 {
  font-size: 36px;
}

.material-icons.md-48 {
  font-size: 48px;
}



.about-bg {
  background-color: #effaff;
}

.service-bg {
  background-color: #fffdf2;

}

/*division css end here*/

/*about section css file started here*/

.section-title-s22 {
  font-size: 38px;
  margin-top: 5px;
  color: #444;
  position: relative;
  display: block;
  padding-bottom: 15px;
  font-weight: 700;
  margin-top: 160px;
  display: inline-block;
}

.section-title-s23 {
  font-size: 38px;
  margin-top: 0px;
  color: #444;
  position: relative;
  display: block;
  padding-bottom: 15px;
  font-weight: 700;
  margin-top: 110px;
  display: inline-block;
}

.section-title-thankyou {
  font-size: 38px;
  margin-top: 0px;
  color: #444;
  position: relative;
  display: block;
  padding-bottom: 15px;
  font-weight: 700;
  margin-top: 35px;
  display: inline-block;
}

.section-title-about {
  font-size: 38px;
  margin-top: 5px;
  color: #444;
  position: relative;
  display: block;
  padding-bottom: 15px;
  font-weight: 700;
  margin-top: 65px;
  display: inline-block;
}




@media screen and (max-width: 600px) {
  .mobile-res {
    margin-top: 0;
  }
}

@media screen and (max-width: 800px) {
  .mobile-res {
    margin-top: 0;
  }
}

/*about section css file end here*/

.service-section-profile .services-wrapper-profile {
  text-Align: center;
  margin-bottom: 30px;
  background: #fff;
  padding: 45px 45px 22px;
  text-Align: center;
}

.quote-section-form {

  padding-bottom: 0px;

}


.section-title-service {
  font-size: 38px;
  margin-top: 5px;
  color: #444;
  position: relative;
  display: block;
  padding-bottom: 15px;
  font-weight: 700;
  margin-top: 100px;
  display: inline-block;
}

.section-title-service-atl {
  font-size: 38px;
  margin-top: 0px;
  color: #444;
  position: relative;
  display: block;
  padding-bottom: 15px;
  font-weight: 700;
  margin-top: 0px;
  display: inline-block;
}

@media screen and (max-width: 600px) {
  .mobile-res-service {
    margin-top: 0;
  }
}

@media screen and (max-width: 800px) {
  .mobile-res-service {
    margin-top: 0;
  }
}

@media screen and (max-width: 600px) {
  .mobile-res-section-title {
    margin-bottom: 0px;
  }
}

@media screen and (max-width: 800px) {
  .mobile-res-section-title {
    margin-bottom: 0px;
  }
}


.ad-services-icon-wrapper {
  position: relative;
  z-index: 1;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 50px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #222;
  margin: auto;
}

.ad-services-wrapper {
  text-Align: center;
  margin-bottom: 30px;
  background: #effaff;
  padding: 45px 45px 22px;
  text-Align: center;
}

.p-140 {

  padding-bottom: 80px;
  padding-top: 140px
}

@media screen and (max-width: 600px) {
  .mobile-res-ads {
    padding-bottom: 0px;
    padding-top: 0px
  }
}

@media screen and (max-width: 800px) {
  .mobile-res-ads {
    padding-bottom: 0px;
    padding-top: 0px
  }
}

/*======= clients code css comes here =================*/


/*.wrap {
  padding: 4.8rem;
  position:relative;
  width: 90%;
}*/

.clients {
  align-items: center;
  -webkit-box-align: center;
  display: grid;
  gap: 4.8rem 4.8rem;
  grid-template-columns: auto auto;
  justify-items: center;
  margin: 4.8rem auto;
  max-width: 1024px;
}

.clients li {
  list-style: none;
  margin: 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.clients img {
  height: 3.2rem;

}

.clients:hover li {
  filter: blur(0px);
  -webkit-filter: blur(0px);
}

.clients:hover li:not(:hover) {
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

.clients li:hover {
  -webkit-transform: translateY(-0.3rem);
  transform: translateY(-0.3rem);
}

@media (min-width: 1024px) {
  .clients {
    grid-template-columns: auto auto auto auto;
  }

  .clients img {
    height: 100px;
  }
}

/* --- Images (gray logo) --- */

/*.clients img {
  -webkit-filter: grayscale(10%) brightness(5%) contrast(5%);
          filter: grayscale(10%) brightness(5%) contrast(5%); }*/

.clients img:hover {
  background: none;
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

/*========================================hover port============================*/


/* ------------------------------------------------------------------------------- */
/*  Custom Portfolio [28-11-2019]
/* ------------------------------------------------------------------------------- */


.button {
  display: inline-block;
  padding: 0.5em 1.0em;
  border-radius: 4px;
  background: #ffffff;
  font-family: sans-serif;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #000000;
  margin: 10px;
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
}

.button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.button:active,
.button.is-checked {
  background-color: rgba(0, 0, 0, 0.1);
  outline: none;
}

.button-group {
  margin: 20px 0;
  text-align: center;
}

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

img {
  vertical-align: middle;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.grid article {
  background-color: #FFFFFF;
  display: block;
  float: left;
  margin: 1%;
  width: 23%;
}

@media (max-width: 1024px) {
  .grid article {
    width: 31.3%;
  }
}

@media (max-width: 767px) {
  .grid article {
    width: 48%;
  }
}

@media (max-width: 479px) {
  .grid article {
    margin: 2% 0;
    width: 100%;
  }
}

/*===================================================02-12-2019=============================================*/



.our-service-sass {
  background: url(https://new.alaknandaindia.com/alaknandaindia/assets/images/home/division/background/region_map.png) no-repeat center bottom;
  background-size: 100%;
  background-position: center;
  position: relative;
  padding: 15px 0 115px;
  background-color: #f9f9f9;
}

.theme-title-one .icon-box .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.our-service-sass .service-block .title a {
  font-size: 22px;
  line-height: 32px;
  color: #253d5f;
  margin-bottom: 30px;
}

.theme-title-one .icon-box {
  display: inline-block;
  margin-bottom: 25px;
  position: relative;
}



[class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after {
  font-family: Flaticon;
  font-size: inherit;
  font-style: normal;
  color: inherit;
}

.icon-img {
  float: left;
  width: 100px;
  height: 200px;
  position: absolute;
  top: 50px;
  text-align: center;
}

/************************/

.our-service-sass .inner-wrapper:after {
  content: url(../images/shape/shape-14.svg);
  position: absolute;
  bottom: -165px;
  right: -165px;
  z-index: -1
}

.our-service-sass .service-block {
  border: 1px solid #eff7ff;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  z-index: 5;
  padding: 90px 20px 25px 20px;
  -webkit-box-shadow: 0px 2px 10px 0px rgba(12, 0, 46, 0.06);
  box-shadow: 0px 2px 10px 0px rgba(12, 0, 46, 0.06);
  border: 1px solid #e6e4e4;
  margin-top: 45px
}

.our-service-sass .service-block:before {
  content: '';
  width: 273px;
  height: 273px;
  background: #0077BD;
  border-radius: 50%;
  position: absolute;
  top: -148px;
  left: -83px;
  transform: scale(0)
}

.our-service-sass .service-block:hover:before {
  transform: scale(1);
  transition: all .5s linear;
  transition-delay: .1s
}

.our-service-sass .service-block:hover {
  border-color: transparent
}

.our-service-sass .service-block .icon-s {
  position: absolute;
  font-size: 65px;
  left: 40px;
  top: 52px
}

.our-service-sass .single-block:nth-child(1) .service-block .icon-s {
  color: #0077BD
}

.our-service-sass .single-block:nth-child(2) .service-block .icon-s {
  color: #0077BD
}

.our-service-sass .single-block:nth-child(3) .service-block .icon-s {
  color: #0077BD
}

.our-service-sass .service-block .title {
  font-size: 22px;
  line-height: 32px;
  color: #253d5f;
  margin-bottom: 30px
}

.our-service-sass .service-block p {
  color: #737f92;
  padding-bottom: 20px
}

.our-service-sass .service-block .detail-button {
  font-size: 40px;
  color: #cad5e5
}

.our-service-sass .service-block .hover-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #99DFFF;
  z-index: -3;
  opacity: 0;
  transition: all .3s linear
}

.our-service-sass .service-block:hover .hover-content {
  opacity: 1
}

.our-service-sass .service-block .hover-content:before {
  content: '';
  width: 493px;
  height: 493px;
  background: #99DFFF;
  border-radius: 50%;
  position: absolute;
  top: -250px;
  left: -180px;
  z-index: 1;
  transform: translate(-50%, -50%);
  opacity: 0
}

.our-service-sass .service-block:hover .hover-content:before {
  opacity: 1;
  transform: translate(0, 0);
  transition: all .9s linear
}

.our-service-sass .service-block .hover-content:after {
  content: '';
  width: 602px;
  height: 602px;
  background: #99DFFF;
  border-radius: 50%;
  position: absolute;
  top: -196px;
  left: -180px;
  z-index: -1;
  transform: translate(-50%, -50%);
  opacity: 0
}

.our-service-sass .service-block:hover .hover-content:after {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 1.3s linear
}

.our-service-sass .service-block .snow-dot {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: rgba(255, 255, 255, .5);
  z-index: -1
}



@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


.our-service-sass .service-block .snow-dot:nth-child(1) {
  top: 25px;
  left: 41%;
  z-index: 1;
  animation: scale-upOne 1s alternate infinite ease-in
}

.our-service-sass .service-block .snow-dot:nth-child(2) {
  top: 25px;
  left: 78%;
  animation: scale-upOne 1.1s alternate infinite ease-in
}

.our-service-sass .service-block .snow-dot:nth-child(3) {
  top: 75px;
  left: 61%;
  animation: scale-upOne .8s alternate infinite ease-in
}

.our-service-sass .service-block .snow-dot:nth-child(4) {
  top: 136px;
  left: 84%;
  animation: scale-upOne 1s alternate infinite ease-in
}

.our-service-sass .service-block .snow-dot:nth-child(5) {
  bottom: 35px;
  right: 12%;
  animation: scale-upOne 1.2s alternate infinite ease-in
}

.our-service-sass .service-block .snow-dot:nth-child(6) {
  bottom: 80px;
  right: 31%;
  animation: scale-upOne .9s alternate infinite ease-in
}

.our-service-sass .service-block .snow-dot:nth-child(7) {
  bottom: 40px;
  right: 51%;
  animation: scale-upOne 1s alternate infinite ease-in
}

.our-service-sass .service-block:hover .detail-button,
.our-service-sass .service-block:hover .icon-s,
.our-service-sass .service-block:hover .title a,
.our-service-sass .service-block:hover p {
  color: #fff !important
}

.theme-more-feature.our-service-sass .inner-wrapper:after,
.theme-more-feature.our-service-sass .inner-wrapper:before,
.theme-more-feature.our-service-sass:after,
.theme-more-feature.our-service-sass:before {
  display: none
}

.our-service-sass.theme-more-feature {
  background: 0 0;
  padding: 165px 0 180px
}

.our-service-app {
  position: relative;
  padding: 260px 0 200px;
  border-bottom: 1px solid #ededed
}

.our-service-app .main-content {
  max-width: 1450px;
  padding: 0 15px;
  margin: 90px auto 0
}

.our-service-app .main-content .inner-wrapper {
  text-align: center;
  position: relative;
  margin-top: 50px
}

.our-service-app .main-content .inner-wrapper .title {
  font-size: 24px;
  color: #4e4e4e;
  margin: 45px 0 30px
}

.our-service-app .main-content .inner-wrapper:hover .title {
  color: #614ef9
}

.our-service-app .main-content .inner-wrapper p {
  line-height: 30px;
  padding: 0 50px;
  color: #8c929d
}

.our-service-app .main-content .inner-wrapper .illustration-box {
  display: inline-block;
  position: relative;
  min-height: 230px
}

.our-service-app .main-content .single-block:nth-child(1) .illustration-box .bg-shape,
.our-service-app .main-content .single-block:nth-child(3) .illustration-box .bg-shape {
  animation: rotated 35s infinite linear
}

.our-service-app .main-content .single-block:nth-child(1) .illustration-box .block-shape-one {
  position: absolute;
  top: 42px;
  left: -16px
}

.our-service-app .main-content .single-block:nth-child(1) .illustration-box .block-shape-two {
  position: absolute;
  top: 42px;
  right: 0
}

.our-service-app .main-content .single-block:nth-child(1) .illustration-box .block-shape-three {
  position: absolute;
  bottom: 24px;
  right: 0
}

.our-service-app .main-content .single-block:nth-child(1) .illustration-box [class*=block-shape] {
  transform: scale(1.5)
}

.our-service-app .main-content .single-block .illustration-box [class*=block-shape] {
  opacity: 0;
  transition: all 1.5s ease-in-out
}

.our-service-app .main-content .single-block:nth-child(2) .illustration-box .block-shape-one {
  position: absolute;
  top: 120px;
  left: 26px;
  transform: scale(1.5)
}

.our-service-app .main-content .single-block:nth-child(2) .illustration-box .block-shape-two {
  position: absolute;
  top: 0;
  left: 120px;
  transform: scale(1.5)
}

.our-service-app .main-content .single-block:nth-child(2) .illustration-box .block-shape-three {
  position: absolute;
  top: 66px;
  right: 6px;
  transform: scale(1.5)
}

.our-service-app .main-content .single-block:nth-child(2) .illustration-box .block-shape-four {
  position: absolute;
  top: 52px;
  right: 63px;
  transform: translateY(30px)
}

.our-service-app .main-content.show-pr .single-block:nth-child(2) .illustration-box [class*=block-shape] {
  opacity: 1;
  transform: scale(1)
}

.our-service-app .main-content.show-pr .single-block:nth-child(2) .illustration-box .block-shape-four {
  transform: translateY(0)
}

.our-service-app .main-content .single-block:nth-child(3) .illustration-box .block-shape-one {
  position: absolute;
  top: 7px;
  left: 45px;
  transform: scale(1.5)
}

.our-service-app .main-content.show-pr .single-block:nth-child(1) .illustration-box [class*=block-shape],
.our-service-app .main-content.show-pr .single-block:nth-child(2) .illustration-box [class*=block-shape],
.our-service-app .main-content.show-pr .single-block:nth-child(3) .illustration-box [class*=block-shape] {
  opacity: 1;
  transform: scale(1)
}


.our-service-app .main-content .single-block:nth-child(2) .illustration-box:after,
.our-service-app .main-content .single-block:nth-child(2) .illustration-box:before {
  content: '';
  position: absolute;
  width: 145px;
  height: 1px;
  border-top: 1px dashed #e6e6e6;
  top: 45%
}

.our-service-app .main-content .single-block:nth-child(2) .illustration-box:before {
  right: -150px
}

.our-service-app .main-content .single-block:nth-child(2) .illustration-box:after {
  left: -150px
}

.our-service-app .main-content .more-button {
  display: block;
  width: 230px;
  line-height: 51px;
  border-radius: 30px;
  background: #614ef9;
  border: 2px solid #614ef9;
  font-size: 14px;
  color: #fff;
  text-transform: uppercase;
  margin: 100px auto 0;
  text-align: center
}

.our-service-app .main-content .more-button:hover {
  background: #fff;
  color: #614ef9
}

.our-service-app .main-content .down-arrow {
  display: block;
  width: 60px;
  height: 60px;
  box-shadow: 0 15px 20px 0 rgba(209, 218, 235, .35);
  background: #fff;
  border-radius: 50%;
  margin: 0 0 0 -30px;
  line-height: 60px;
  text-align: center;
  color: #7494b5;
  font-size: 20px;
  position: absolute;
  bottom: -30px;
  left: 50%;
  z-index: 1
}

.our-service-app .main-content .down-arrow span {
  display: block;
  transform: rotate(-90deg)
}

.our-service-app .main-content .down-arrow:hover {
  color: #fff;
  background: #614ef9
}

/****************animation*************/


@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


.bg-shape {
  -webkit-animation: rotate-center 5s linear infinite both;
  animation: rotate-center 5s linear infinite both;
  cursor: pointer;
}


@-webkit-keyframes scale-upOne {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  100% {
    -webkit-transform: scale(.2);
    transform: scale(.2)
  }
}

@keyframes scale-upOne {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  100% {
    -webkit-transform: scale(.2);
    transform: scale(.2)
  }
}

.image {

  min-width: 290px;
}

.title-h5 {
  text-align: center;
}


/*=============================font animation========================================*/


#chooseSVG {
  max-height: 380px;
}

@keyframes greenbox {
  0% {
    opacity: 0.36;
    fill: #000;
  }

  10% {
    opacity: 0.36;
  }

  100% {
    opacity: 1;
    fill: var(--green-color, #4caf50);
  }
}

@keyframes tick {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes arm {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-8deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes scaleup {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-6deg);
  }

  50% {
    transform: rotate(4deg);
  }

  75% {
    transform: rotate(-3deg);
  }

  100% {
    transform: rotate(5deg);
  }
}

#chooseSVG #arm {
  animation: arm 1.5s ease 0s forwards;
  animation-delay: 1.5s;
  transform-origin: 50% 43%;
}

#chooseSVG #floaters>* {
  animation: wiggle 20s ease infinite;
  animation-direction: alternate;
  transform-origin: 50% 43%;
}

#chooseSVG #floaters>g:nth-child(2n) {
  animation-delay: -1s;
}

#chooseSVG #floaters>g:nth-child(3n) {
  animation-delay: -2s;
}

#chooseSVG #floaters>g:nth-child(4n) {
  animation-delay: -4s;
}

#chooseSVG #floaters>g:nth-child(5n) {
  animation-delay: -4.4s;
}

#chooseSVG #floaters>g:nth-child(6n) {
  animation-delay: -2s;
}

#chooseSVG #floaters>g:nth-child(7n) {
  animation-delay: -4.6s;
}

#chooseSVG #floaters>g:nth-child(8n) {
  animation-delay: -3s;
}

#chooseSVG #floaters>g:nth-child(9n) {
  animation-delay: -4s;
}

#chooseSVG #floaters>g:nth-child(10n) {
  animation-delay: -5s;
}

#chooseSVG .st0 {
  fill: #e6e6e6;
}

#chooseSVG .st1 {
  opacity: 0.1;
  enable-background: new;
}

#chooseSVG .st2 {
  opacity: 0.36;
  animation: greenbox 1.5s ease 0s forwards;
  animation-delay: 2.5s;
}

#chooseSVG .st3 {
  opacity: 1;
  fill: none;
  stroke: #ffffff;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: tick 0.7s ease 0s forwards;
  animation-delay: 2.5s;
}

#chooseSVG .st4 {
  opacity: 0.4;
}

#chooseSVG .st5 {
  fill: none;
  stroke: #ffffff;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

#chooseSVG .st6 {
  opacity: 0.3;
  transform: scale(0);
  enable-background: new;
  transform-origin: 65% 30%;
  animation: scaleup 0.5s ease 0s forwards, wiggle 10s ease infinite alternate;
  animation-delay: 2.5s, 9.3s;
}

#chooseSVG .st7 {
  opacity: 0.1;
  transform: scale(0);
  fill: #9a1144;
  enable-background: new;
  transform-origin: 65% 30%;
  animation: scaleup 0.7s ease 0s forwards, wiggle 10s ease infinite alternate;
  animation-delay: 2.5s, 9.1s;
}

#chooseSVG .st8 {
  opacity: 0.1;
  transform: scale(0);
  fill: #ffffff;
  enable-background: new;
  transform-origin: 65% 30%;
  animation: scaleup 0.6s ease 0s forwards, wiggle 10s ease infinite alternate;
  animation-delay: 2.5s, 9.6s;
}

#chooseSVG .st9 {
  opacity: 0.5;
}

#chooseSVG .st10 {
  fill: url(#SVGID_1_);
}

#chooseSVG .st11 {
  fill: #fda57d;
}

#chooseSVG .st12 {
  fill: #9a1144;
}

#chooseSVG .st13 {
  opacity: 5e-2;
  enable-background: new;
}

#chooseSVG .st14 {
  fill: #373737;
}

#chooseSVG .st15 {
  fill: #333333;
}

#chooseSVG .st16 {
  fill: #47e6b1;
}

#chooseSVG .st17 {
  opacity: 0.5;
  fill: #4d8af0;
  enable-background: new;
}

#chooseSVG .st18 {
  opacity: 0.5;
  fill: #f55f44;
  enable-background: new;
}

#chooseSVG .st19 {
  opacity: 0.5;
  fill: #47e6b1;
  enable-background: new;
}

/*================================= background animation =================================================*/

background-body {

  animation: colorchange 40s;

  -webkit-animation: colorchange 40s;
  /* Chrome and Safari */
  animation-iteration-count: infinite;
}

@keyframes colorchange {
  0% {
    background: #ff6c6c;
  }

  25% {
    background: #80cac6;
  }

  50% {
    background: #8090ca;
  }

  75% {
    background: #80ca95;
  }

  95% {
    background: #2be5c0;
  }

  100% {
    background: #ff6c6c;
  }

}

@-webkit-keyframes colorchange

/* Safari and Chrome - necessary duplicate */
  {
  0% {
    background: #ff6c6c;
  }

  25% {
    background: #80cac6;
  }

  50% {
    background: #8090ca;
  }

  75% {
    background: #80ca95;
  }

  95% {
    background: #2be5c0;
  }

  100% {
    background: #ff6c6c;
  }
}


/* 
@keyframes ckw {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} */

/* @keyframes sun {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);

    0% {
        transform: rotate(0deg);
    }
    }
} */


@-webkit-keyframes move-right {
  0% {
    -webkit-transform: translatex(0%);
  }

  100% {
    -webkit-transform: translate3d(790px, 0, 0);
  }
}

@-webkit-keyframes move-left {
  0% {
    -webkit-transform: translatex(0%);
  }

  100% {
    -webkit-transform: translate3d(-790px, 0, 0);
  }
}


@-webkit-keyframes rotate-right {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate-left {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-360deg);
  }
}

@-webkit-keyframes hover {
  0% {
    -webkit-transform: translateY(0%);
  }

  50% {
    -webkit-transform: translateY(30%);
  }

  100% {
    -webkit-transform: translateY(0%);
  }
}

@-webkit-keyframes hover-right {
  0% {
    -webkit-transform: translateY(0%);
  }

  30% {
    -webkit-transform: translateX(30%);
  }

  50% {
    -webkit-transform: translateX(50%);
  }

  70% {
    -webkit-transform: translateX(30%);
  }

  98% {
    -webkit-transform: translateY(0%);
  }
}


@-webkit-keyframes hover-left {
  0% {
    -webkit-transform: translateY(0%);
  }

  30% {
    -webkit-transform: translateX(-30%);
  }

  50% {
    -webkit-transform: translateX(-50%);
  }

  70% {
    -webkit-transform: translateX(-30%);
  }

  100% {
    -webkit-transform: translateY(0%);
  }
}

@-webkit-keyframes pull {
  0% {
    -webkit-transform: scaleY(1);
  }

  40% {
    -webkit-transform: scaleY(1.01);
  }

  60% {
    -webkit-transform: scaleY(0.99);
  }

  80% {
    -webkit-transform: scaleY(1.01);
  }

  100% {
    -webkit-transform: scaleY(0.99);
  }

  80% {
    -webkit-transform: scaleY(1.01);
  }

  100% {
    -webkit-transform: scaleY(1);
  }
}



#container {

  margin: auto 0;
}

#animation {
  width: 100%;
  margin: 0 auto;
}

#circle1 {
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transform-origin: 0px 0px;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-animation: pull 12s linear 0s infinite;
}

#baloon {

  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transform-origin: 200px 200px;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-animation: hover 12s linear 0s infinite;
}

#car1 {

  -webkit-transform: translate3d(100px, 0, 0);
  -webkit-animation: move-right 10s linear 0s infinite;
}

#car2 {

  -webkit-transform: translate3d(100px, 0, 0);
  -webkit-animation: move-left 10s linear 0s infinite;
}

#wheel {
  animation-name: ckw;
  animation-duration: 15.5s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  display: inline-block;
}

#sun {
  animation-name: sun;
  animation-duration: 50s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  display: inline-block;
}


#cloud1 {

  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transform-origin: 200px 200px;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-animation: hover-right 12s linear 0s infinite;
}

#cloud2 {

  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transform-origin: 200px 200px;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-animation: hover-left 12s linear 0s infinite;


}


/*=================================bubles animation css=============================*/



.area {
  background: #fff;
  background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
  /* width: 100%;
    height:100vh;*/


}

.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(61, 71, 86, 0.6);
  animation: animate 5s linear infinite;
  bottom: -150px;

}

.circles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}


.circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 30s;
}

.circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
}

.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 30s;
}

.circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 3s;
}

.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 5s;
  animation-duration: 45s;
}

.circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circles li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 35s;
}



@keyframes animate {

  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 10%;
  }

  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }

}


/*===============================  fly overflow bubles ===============================*/

.blur,
.main,
.particles {
  width: 100%;
  height: 350px;
  top: 0;
  left: 0;
  z-index: 1;
}

.blur {
  /* background-color: #F7FFF7;*/
  filter: blur(0px);
  transform: scale(1.1);
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 100;
}


.particles {
  position: absolute;
  z-index: 200;
  transform-style: preserve-3d;
  /*     animation: rotate-container 10s infinite ease-in-out alternate; */
  overflow: hidden;
}



@keyframes move {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  10%,
  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(45vw);
    opacity: 0;
  }
}

@keyframes rotate-container {
  0% {
    transform:
      perspective(1000px) translateZ(0px);
  }

  100% {
    transform:
      perspective(1000px) translateZ(150px);
  }
}





/*================================= ANIMATION CSS CODE COMES HERE =================================*/


.xQcXJfLK_0 {
  stroke-dasharray: 25 27;
  stroke-dashoffset: 26;
  animation: xQcXJfLK_draw_0 7200ms linear 0ms infinite, xQcXJfLK_fade 7200ms linear 0ms infinite;
}

.xQcXJfLK_1 {
  stroke-dasharray: 56 58;
  stroke-dashoffset: 57;
  animation: xQcXJfLK_draw_1 7200ms linear 0ms infinite, xQcXJfLK_fade 7200ms linear 0ms infinite;
}

.xQcXJfLK_2 {
  stroke-dasharray: 923 925;
  stroke-dashoffset: 924;
  animation: xQcXJfLK_draw_2 7200ms linear 0ms infinite, xQcXJfLK_fade 7200ms linear 0ms infinite;
}

.xQcXJfLK_3 {
  stroke-dasharray: 56 58;
  stroke-dashoffset: 57;
  animation: xQcXJfLK_draw_3 7200ms linear 0ms infinite, xQcXJfLK_fade 7200ms linear 0ms infinite;
}

.xQcXJfLK_4 {
  stroke-dasharray: 313 315;
  stroke-dashoffset: 314;
  animation: xQcXJfLK_draw_4 7200ms linear 0ms infinite, xQcXJfLK_fade 7200ms linear 0ms infinite;
}

.xQcXJfLK_5 {
  stroke-dasharray: 359 361;
  stroke-dashoffset: 360;
  animation: xQcXJfLK_draw_5 7200ms linear 0ms infinite, xQcXJfLK_fade 7200ms linear 0ms infinite;
}

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

@keyframes xQcXJfLK_fade {
  0% {
    stroke-opacity: 1;
  }

  94.44444444444444% {
    stroke-opacity: 1;
  }

  100% {
    stroke-opacity: 0;
  }
}

@keyframes xQcXJfLK_draw_0 {
  11.11111111111111% {
    stroke-dashoffset: 26
  }

  38.88888888888889% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes xQcXJfLK_draw_1 {
  13.88888888888889% {
    stroke-dashoffset: 57
  }

  41.66666666666667% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes xQcXJfLK_draw_2 {
  16.666666666666664% {
    stroke-dashoffset: 924
  }

  44.44444444444444% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes xQcXJfLK_draw_3 {
  19.444444444444446% {
    stroke-dashoffset: 57
  }

  47.22222222222222% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes xQcXJfLK_draw_4 {
  22.22222222222222% {
    stroke-dashoffset: 314
  }

  50% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes xQcXJfLK_draw_5 {
  25% {
    stroke-dashoffset: 360
  }

  52.77777777777778% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.contact-font {
  text-align: center;
}

/*==================================== four buble loadeer  [07-12-19] =============================*/




.load {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*change these sizes to fit into your project*/
  width: 100px;
  height: 100px;
}

.load hr {
  border: 0;
  margin: 0;
  width: 40%;
  height: 40%;
  position: absolute;
  border-radius: 50%;
  animation: spin 2s ease infinite
}

.load :first-child {
  background: #19A68C;
  animation-delay: -1.5s
}

.load :nth-child(2) {
  background: #F63D3A;
  animation-delay: -1s
}

.load :nth-child(3) {
  background: #FDA543;
  animation-delay: -0.5s
}

.load :last-child {
  background: #193B48
}

@keyframes spin {

  0%,
  100% {
    transform: translate(0)
  }

  25% {
    transform: translate(160%)
  }

  50% {
    transform: translate(160%, 160%)
  }

  75% {
    transform: translate(0, 160%)
  }
}


/*==================================== animation font  [07-12-19] =============================*/






/*
=========================================== fly rocket [07-12-19]  ==============================================*/


.page-body {
  background-color: #85b9dd;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 500px;
}

/** {
  position: relative;
}*/

.frame {
  width: 500px;
  height: 100%;
  margin: 15% auto 0;
  /* position: absolute;*/
  width: 100%;
}

svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/**
 * Paper Plane
 */
/*Paper Plane: Container*/
.plane-container {
  width: 200px;
  margin: 0px auto;
  z-index: 3;
}

/*Paper Plane: Image*/
.plane {
  width: 100%;
  height: 60px;
}

/*Paper Plane: Animation*/
.plane-container {
  -webkit-animation: paper-plane-scoping 2s alternate infinite;
  -moz-animation: paper-plane-scoping 2s alternate infinite;
  animation: paper-plane-scoping 2s alternate infinite;

  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes paper-plane-scoping {
  0% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
  }

  100% {
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    transform: translateY(100px);
  }
}

.plane {
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;

  -webkit-animation: paper-plane-soaring 4s forwards infinite;
  -moz-animation: paper-plane-soaring 4s forwards infinite;
  animation: paper-plane-soaring 4s forwards infinite;
}

@-webkit-keyframes paper-plane-soaring {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  40% {
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  50% {
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  60% {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

/**
 * Clouds
 */
.clouds {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  transform: translateZ(0);
}

.cloud {
  position: absolute;
  top: 20%;
  width: 300px;
  right: 0;
  opacity: 1;
}

.cloud.front {
  z-index: 9;
}

.cloud.distant {
  z-index: 1;
}

.cloud.background {
  z-index: 1;
}

/*Cloud Sizing*/
.cloud.smaller {
  margin-right: 400px;
  width: 100px;
  margin-top: 50px;
}

.cloud.small {
  margin-right: 200px;
  width: 150px;
}

.cloud.big {
  width: 500px;
  margin-top: 50px;
  margin-right: 150px;
}

.cloud.massive {
  width: 600px;
  margin-top: 20px;
  margin-right: 0px;
}


/*Cloud: Animation*/
.cloud {
  -webkit-animation-name: cloud-movement;
  -webkit-animation-timing-function: linear;
  -webkit-animation-direction: forwards;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 8s;

  -moz-animation-name: cloud-movement;
  -moz-animation-timing-function: linear;
  -moz-animation-direction: forwards;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 8s;

  animation-name: cloud-movement;
  animation-timing-function: linear;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-duration: 8s;
}

.slow {
  -webkit-animation-duration: 9.2s;
  -moz-animation-duration: 9.2s;
  animation-duration: 9.2s;
}

.slower {
  -webkit-animation-duration: 11.2s;
  -moz-animation-duration: 11.2s;
  animation-duration: 11.2s;
}

.slowest {
  -webkit-animation-duration: 13.5s;
  -moz-animation-duration: 13.5s;
  animation-duration: 13.5s;
}

.super-slow {
  -webkit-animation-duration: 20.5s;
  -moz-animation-duration: 20.5s;
  animation-duration: 20.5s;
}

@-webkit-keyframes cloud-movement {
  0% {
    opacity: 0.1;
    -webkit-transform: translateX(300px);
    -moz-transform: translateX(300px);
    transform: translateX(300px);
  }

  10% {

    opacity: 0.7;
  }

  90% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-1000px);
    -moz-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }
}


@media (max-width: 767px) {
  .mobile-rocket {

    background-color: #85b9dd;
    /* margin: 0; */
    padding: 0;
    width: 100%;
    height: 260px;
  }
}

/*================================= roll animation [7-12-19]==================================*/

@keyframes turning {
  0% {
    border-radius: 0 0 0 0;
    transform: rotate(0deg);
  }

  25% {
    border-radius: 50% 0 0 0;
    transform: rotate(45deg);
  }

  50% {
    border-radius: 50% 50% 0 0;
    transform: rotate(90deg);
  }

  75% {
    border-radius: 50% 50% 50% 0;
    transform: rotate(135deg);
  }

  100% {
    border-radius: 50% 50% 50% 50%;
    transform: rotate(180deg);
  }
}

.div-roll {
  width: 120px;
  height: 120px;
  background-color: violet;
  margin: 50px;
  animation: turning 2s ease-out 1s infinite alternate;
}

.div-roll:hover {
  animation-play-state: paused;
}


/*============================================== SCSS CODEPEN CODE [10-12-19]=============================================*/



.div-body {
  margin: 0;
  width: 100%;
  height: 400px;
  color: #fff;
  background: linear-gradient(-45deg, #0077bd, #fff, #0077bd, #3D4756);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


/*================================== Background Animation Code [10 - 12 - 2019] =====================================*/


.wrapper-railway {
  /*position: fixed;*/
  bottom: 0px;
  right: 0px;
  /*margin-right: -26px;
  margin-bottom: 20px;*/
  /*width: 700px;*/
  height: 500px;
  background-color: #005aaa;
}

.animation {
  width: 800px;
  margin: 0 auto;
}

.back-frame {
  background: url(http://funkyimg.com/i/2yp2N.png) no-repeat center center;
}

.ballon {
  height: 500px;
  background: url(http://funkyimg.com/i/2yp2G.png) no-repeat 400px 250px;
  transform-origin: top center;

  animation:
    ballon-up 6s cubic-bezier(.49, 0, .53, 1) infinite alternate,
    ballon-swing 6s cubic-bezier(.49, 0, .53, 1) infinite alternate;
  -moz-animation:
    ballon-up 6s cubic-bezier(.49, 0, .53, 1) infinite alternate,
    ballon-swing 6s cubic-bezier(.49, 0, .53, 1) infinite alternate;
  -ms-animation:
    ballon-up 6s cubic-bezier(.49, 0, .53, 1) infinite alternate,
    ballon-swing 6s cubic-bezier(.49, 0, .53, 1) infinite alternate;
  -webkit-animation:
    ballon-up 6s cubic-bezier(.49, 0, .53, 1) infinite alternate,
    ballon-swing 6s cubic-bezier(.49, 0, .53, 1) infinite alternate;
  -o-animation:
    ballon-up 6s cubic-bezier(.83, 1.15, .9, .24) infinite alternate,
    ballon-swing 6s cubic-bezier(.49, 0, .53, 1) infinite alternate;

  animation-delay: 1s;
  -moz-animation-delay: 1s;
  -ms-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  -o-animation-delay: 1s;
}

@keyframes ballon-up {
  from {
    background-position: 400px 250px, 0 0;
  }

  to {
    background-position: 400px 50px, 0 0;
  }
}

@keyframes ballon-swing {
  25% {
    transform: translate(-2px, 4px) rotate(6deg)
  }

  100% {
    transform: translate(0, -5px) rotate(3deg)
  }
}

.cloud-1 {
  background: url(http://funkyimg.com/i/2yp2J.png) no-repeat 220px 190px;
  animation: cloud-1 6s cubic-bezier(.13, .16, .17, .8) infinite alternate;
  animation-delay: 3s;
}

.cloud-2 {
  background: url(http://funkyimg.com/i/2yp2K.png) no-repeat 480px 175px;
  animation: cloud-2 6s cubic-bezier(.13, .16, .17, .8) infinite alternate;
  animation-delay: 3s;
}

.cloud-3 {
  background: url(http://funkyimg.com/i/2yp2L.png) no-repeat 370px 50px;
  animation: cloud-3 6s cubic-bezier(.13, .16, .17, .8) infinite alternate;
  animation-delay: 3s;
}

@keyframes cloud-1 {
  from {
    background-position: 220px 190px, 0 0;
  }

  to {
    background-position: 180px 190px, 0 0;
  }
}

@keyframes cloud-2 {
  from {
    background-position: 480px 175px, 0 0;
  }

  to {
    background-position: 550px 175px, 0 0;
  }
}

@keyframes cloud-3 {
  from {
    background-position: 370px 50px, 0 0;
  }

  to {
    background-position: 270px 50px, 0 0;
  }
}

.train {
  background: url(http://funkyimg.com/i/2yp2M.png) no-repeat 500px 408px;
  animation: train 3s linear 1s infinite;
  /*              train-out 2s linear 4s infinite; */
}

@keyframes train {
  from {
    background-position: 500px 408px, 0 0;
  }

  to {
    background-position: -1500px 408px, 0 0;
  }
}

@keyframes train-out {
  from {
    background-position: 700px 408px, 0 0;
  }

  to {
    background-position: 500px 408px, 0 0;
  }
}

.car {
  background: url(http://funkyimg.com/i/2yp2H.png) no-repeat 400px 424px;
  animation: car 3s linear 1s infinite;
  /*              car-out 2s linear 1 4s forwards; */
}

@keyframes car {
  0% {
    background-position: 800px 424px, 0 0;
  }

  100% {
    background-position: 50px 424px, 0 0;
  }

  /*   100% { background-position: 800px 424px, 0 0; } */
}

@keyframes car-out {
  from {
    background-position: 600px 424px, 0 0;
  }

  to {
    background-position: 350px 424px, 0 0;
  }
}

.left-outline-frame {
  background: url(http://funkyimg.com/i/2yp2P.png) no-repeat -128px 260px;
  /*  height: 750px;*/
}

.right-outline-frame {
  background: url(http://funkyimg.com/i/2yp2Q.png) no-repeat 625px 313px;
  height: 750px;
}



/*================================== Fly Animation Code [10 - 12 - 2019] =====================================*/



.gallery {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
}

.row--2x {
  grid-row-end: span 2;
}

.img-fluid {
  max-width: 100%;
}

.gallery a {
  display: block;
}

.gallery a:hover img {
  filter: none;
  box-shadow: 0px 4px 14px rgba(0, 0, 0, .15);
}

.gallery a img {
  filter: grayscale(100%);
  transition: all ease-in 0.2s;
}


/*================================== Mouse Css [10 - 12 - 2019] =====================================*/




.fa {
  font-size: 50px;
  color: #0077bd;
  bottom: 100px;
  position: absolute;
  left: 50%;
  margin-left: -18px;
  animation-name: arrow;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-play-state: running;
  -webkit-animation-name: arrow;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-play-state: running;
}

.pulse {
  margin: 0 auto;
  border-radius: 100px;
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 0;
  background-color: transparent;
  opacity: 0;
  width: 110px;
  height: 110px;
  border: 10px solid #00baff;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -o-border-radius: 100px;
  -ms-border-radius: 100px;
  border-radius: 100px;
  /* Giving Animation Function */
  -webkit-animation: pulse 1s linear infinite 0.3s;
  -moz-animation: pulse 1s linear infinite 0.3s;
  border-image: initial;
}

@keyframes arrow {
  0% {
    bottom: 0;
  }

  75% {
    bottom: 90px;
  }

  100% {
    bottom: 0;
  }
}

@-webkit-keyframes arrow {
  0% {
    bottom: 0;
  }

  75% {
    bottom: 90px;
  }

  100% {
    bottom: 0;
  }
}

@keyframes circle {
  0% {
    height: 120px;
  }

  10% {
    height: 120px;
  }

  50% {
    height: 130px;
  }

  75% {
    height: 150px;
  }

  90% {
    height: 130px;
  }

  100% {
    height: 120px;
  }
}

@-webkit-keyframes circle {
  0% {
    height: 120px;
  }

  10% {
    height: 120px;
  }

  50% {
    height: 130px;
  }

  75% {
    height: 150px;
  }

  90% {
    height: 130px;
  }

  100% {
    height: 120px;
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }

  8% {
    -webkit-transform: scale(0);
    opacity: 0;
  }

  15% {
    -webkit-transform: scale(0.1);
    opacity: 1;
  }

  30% {
    -webkit-transform: scale(0.5);
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1.5);
  }
}

@-moz-keyframes pulse {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }

  8% {
    -webkit-transform: scale(0);
    opacity: 0;
  }

  15% {
    -webkit-transform: scale(0.1);
    opacity: 1;
  }

  30% {
    -webkit-transform: scale(0.5);
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1.5);
  }
}


/*============================================= [11- 12- 2019] ==========================================*/




*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


.mouse_scroll {
  display: block;
  margin: 0 auto;
  width: 24px;
  height: 100px;
  margin-top: -380px;
}


.m_scroll_arrows {
  display: block;
  width: 5px;
  height: 5px;
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Chrome, Safari, Opera */
  transform: rotate(45deg);

  border-right: 2px solid #3D4756;
  border-bottom: 2px solid #3D4756;
  margin: 0 0 3px 4px;

  width: 16px;
  height: 16px;
}


.unu {
  margin-top: 1px;
}

.unu,
.doi,
.trei {
  -webkit-animation: mouse-scroll 1s infinite;
  -moz-animation: mouse-scroll 1s infinite;
  animation: mouse-scroll 1s infinite;

}

.unu {
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;

  animation-direction: alternate;
  animation-delay: alternate;
}

.doi {
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;

  animation-delay: .2s;
  animation-direction: alternate;

  margin-top: -6px;
}

.trei {
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -webkit-animation-direction: alternate;

  animation-delay: .3s;
  animation-direction: alternate;


  margin-top: -6px;
}

.mouse {
  height: 42px;
  width: 24px;
  border-radius: 14px;
  transform: none;
  border: 2px solid #99DFFF;
  top: 170px;
}

.wheel {
  height: 5px;
  width: 2px;
  display: block;
  margin: 5px auto;
  background: #fff;
  position: relative;

  height: 4px;
  width: 4px;
  border: 2px solid #99DFFF;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

.wheel {
  -webkit-animation: mouse-wheel 0.6s linear infinite;
  -moz-animation: mouse-wheel 0.6s linear infinite;
  animation: mouse-wheel 0.6s linear infinite;
}

@-webkit-keyframes mouse-wheel {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}

@-moz-keyframes mouse-wheel {
  0% {
    top: 1px;
  }

  25% {
    top: 2px;
  }

  50% {
    top: 3px;
  }

  75% {
    top: 2px;
  }

  100% {
    top: 1px;
  }
}

@-o-keyframes mouse-wheel {

  0% {
    top: 1px;
  }

  25% {
    top: 2px;
  }

  50% {
    top: 3px;
  }

  75% {
    top: 2px;
  }

  100% {
    top: 1px;
  }
}

@keyframes mouse-wheel {

  0% {
    top: 1px;
  }

  25% {
    top: 2px;
  }

  50% {
    top: 3px;
  }

  75% {
    top: 2px;
  }

  100% {
    top: 1px;
  }
}

@-webkit-keyframes mouse-scroll {

  0% {
    opacity: 0;
  }

  50% {
    opacity: .5;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes mouse-scroll {

  0% {
    opacity: 0;
  }

  50% {
    opacity: .5;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes mouse-scroll {

  0% {
    opacity: 0;
  }

  50% {
    opacity: .5;
  }

  100% {
    opacity: 1;
  }
}

@keyframes mouse-scroll {

  0% {
    opacity: 0;
  }

  50% {
    opacity: .5;
  }

  100% {
    opacity: 1;
  }
}


/*======================================================= [11 - 12- 2019] Division===============================================*/






.blob {
  min-height: 350px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.blob:before,
.blob:after {
  mix-blend-mode: multiply;
  content: '';
  width: 70vmax;
  height: 70vmax;
  position: absolute;
  background: #ccc;
  top: 50%;
  left: 100%;
  transform: translate3d(-50%, -50%, 0) rotate(0);
  animation:
    morph 15s linear infinite alternate,
    spin 20s linear infinite;
  will-change: border-radius, transform;
  pointer-events: none;
}

.blob:after {
  background: #ccc;
  animation:
    morph 10s linear infinite alternate,
    spin 26s linear infinite reverse;
  z-index: 3;
}

.card-division {
  font-family: proxima-nova, sans-serif;
  width: auto;
  height: auto;
  margin: auto 0;
  display: block;
  background: #fff;
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.5);
  top: 20%;
  left: 5%;
  position: absolute;
  border-radius: 20px;
  padding: 10px 50px;
}




@keyframes morph {

  /*0% { border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; }
    100% { border-radius: 40% 60%; }*/
  0%,
  100% {
    border-radius: 43% 77% 80% 40% / 40% 40% 80% 80%;
  }

  20% {
    border-radius: 47% 73% 61% 59% / 47% 75% 45% 73%;
  }

  40% {
    border-radius: 46% 74% 74% 46% / 74% 58% 62% 46%;
  }

  60% {
    border-radius: 47% 73% 61% 59% / 40% 40% 80% 80%;
  }

  80% {
    border-radius: 50% 70% 52% 68% / 51% 61% 59% 69%;
  }
}

@keyframes spin {
  to {
    transform: translate3d(-50%, -50%, 0) rotate(1turn);
  }
}


@media screen and (max-width: 767px) {
  .blob-mobile {
    min-height: 100px;
    /*display: flex;*/
    align-items: center;
    overflow: hidden;
    position: relative;
  }


  .blob-mobile:before,
  .blob-mobile:after {
    mix-blend-mode: multiply;
    content: '';
    width: 70vmax;
    height: 70vmax;
    position: absolute;
    background: #ccc;
    top: 50%;
    left: 100%;
    transform: translate3d(-50%, -50%, 0) rotate(0);
    animation:
      morph 15s linear infinite alternate,
      spin 20s linear infinite;
    will-change: border-radius, transform;
    pointer-events: none;
  }

  .blob-mobile:after {
    background: #ccc;
    animation:
      morph 10s linear infinite alternate,
      spin 26s linear infinite reverse;
    z-index: 3;
  }

}



/*======================================= [11-12-2019 Portfolio V2.0] =========================================*/


* {
  box-sizing: border-box;
}

.slider {
  display: flex;
  background: #000;
}

.slider .slide {
  height: 100vh;
  position: relative;
  z-index: 10;
  border: solid #fff;
  border-width: 1px;
  background-size: cover;
  background-position: center center;
  opacity: 0.25;
  width: 30%;
  transition: width 0.8s ease, opacity 0.5s ease;
}

.slider .slide:hover {
  width: 200%;
  opacity: 1;
}


/*======================================= [12-12-2019 Custom Code Comes Here] =========================================*/



.textcontainer {
  /*padding: 40px 0;*/
  /*text-align: center;*/
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-size: 1rem;
  color: #3D4756;
}

.particletext {
  text-align: center;
  font-size: 48px;
  position: relative;
}

.particletext.bubbles>.particle {
  opacity: 0;
  position: absolute;
  background-color: rgba(33, 150, 243, 0.5);
  animation: bubbles 3s ease-in infinite;
  border-radius: 100%;
}

.particletext.hearts>.particle {
  opacity: 0;
  position: absolute;
  background-color: #cc2a5d;
  animation: hearts 3s ease-in infinite;
}

.particletext.hearts>.particle:before,
body .particletext.hearts>.particle:after {
  position: absolute;
  content: '';
  border-radius: 100px;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #cc2a5d;
}

.particletext.hearts>.particle:before {
  transform: translateX(-50%);
}

.particletext.hearts>.particle:after {
  transform: translateY(-50%);
}

.particletext.lines>.particle {
  position: absolute;
  background-color: rgba(244, 67, 54, 0.5);
  animation: lines 3s linear infinite;
}

.particletext.confetti>.particle {
  opacity: 0;
  position: absolute;
  animation: confetti 3s ease-in infinite;
}

.particletext.confetti>.particle.c1 {
  background-color: rgba(76, 175, 80, 0.5);
}

.particletext.confetti>.particle.c2 {
  background-color: rgba(156, 39, 176, 0.5);
}

.particletext.fire>.particle {
  position: absolute;
  background-color: rgba(255, 193, 7, 0.5);
  border-radius: 40px;
  border-top-right-radius: 0px;
  animation: fires 0.8s linear infinite;
  transform: rotate(-45deg);
  opacity: 0;
}

.particletext.fire>.particle:before {
  position: absolute;
  content: '';
  top: 60%;
  left: 40%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  border-radius: 40px;
  border-top-right-radius: 0px;
  background-color: rgba(251, 140, 0, 0.5);
}

.particletext.sunbeams>.particle {
  position: absolute;
  background-color: rgba(253, 216, 53, 0.5);
  animation: sunbeams 3s linear infinite;
}

@keyframes bubbles {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
    transform: translate(0, -20%);
  }

  100% {
    opacity: 0;
    transform: translate(0, -1000%);
  }
}

@keyframes hearts {
  0% {
    opacity: 0;
    transform: translate(0, 0%) rotate(45deg);
  }

  20% {
    opacity: 0.8;
    transform: translate(0, -20%) rotate(45deg);
  }

  100% {
    opacity: 0;
    transform: translate(0, -1000%) rotate(45deg);
  }
}

@keyframes lines {

  0%,
  50%,
  100% {
    transform: translateY(0%);
  }

  25% {
    transform: translateY(100%);
  }

  75% {
    transform: translateY(-100%);
  }
}

@keyframes confetti {
  0% {
    opacity: 0;
    transform: translateY(0%) rotate(0deg);
  }

  10% {
    opacity: 1;
  }

  35% {
    transform: translateY(-800%) rotate(270deg);
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(2000%) rotate(1440deg);
  }
}

@keyframes fires {
  0% {
    transform: rotate(-70deg) translateY(0%);
  }

  25% {
    transform: rotate(-20deg) translateY(-5%);
    opacity: 1;
  }

  50% {
    transform: rotate(-70deg) translateY(-10%);
  }

  75% {
    transform: rotate(-20deg) translateY(-20%);
  }

  100% {
    transform: rotate(-70deg) translateY(-40%);
    opacity: 1;
  }
}

@keyframes sunbeams {
  0% {
    transform: translateY(40%) rotate(0deg);
  }

  50% {
    transform: translateY(-40%) rotate(180deg);
  }

  100% {
    transform: translateY(40%) rotate(360deg);
  }

  0%,
  14%,
  17%,
  43%,
  53%,
  71%,
  80%,
  94%,
  100% {
    opacity: 0;
  }

  6%,
  15%,
  24%,
  28%,
  48%,
  55%,
  78%,
  82%,
  99% {
    opacity: 1;
  }
}




/*======================================= [12-12-2019 Custom Code Comes Here] =========================================*/


/*.confetti-abt {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 450px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  overflow: hidden;
}*/

.confetti-piece {
  position: absolute;
  width: 8px;
  height: 18px;
  background: #ffd300;
  top: 0;
  opacity: 0;
}

.confetti-piece:nth-child(1) {
  left: 7%;
  transform: rotate(45deg);
  animation: makeItRain 1600ms infinite ease-out;
  animation-delay: 305ms;
  animation-duration: 2010ms;
}

.confetti-piece:nth-child(2) {
  left: 14%;
  transform: rotate(-50deg);
  animation: makeItRain 1600ms infinite ease-out;
  animation-delay: 120ms;
  animation-duration: 2006ms;
}

.confetti-piece:nth-child(3) {
  left: 21%;
  transform: rotate(23deg);
  animation: makeItRain 1600ms infinite ease-out;
  animation-delay: 112ms;
  animation-duration: 1875ms;
}

.confetti-piece:nth-child(4) {
  left: 28%;
  transform: rotate(27deg);
  animation: makeItRain 1600ms infinite ease-out;
  animation-delay: 11ms;
  animation-duration: 2268ms;
}

.confetti-piece:nth-child(5) {
  left: 35%;
  transform: rotate(-34deg);
  animation: makeItRain 1600ms infinite ease-out;
  animation-delay: 286ms;
  animation-duration: 2352ms;
}

.confetti-piece:nth-child(6) {
  left: 42%;
  transform: rotate(59deg);
  animation: makeItRain 1600ms infinite ease-out;
  animation-delay: 245ms;
  animation-duration: 2310ms;
}

.confetti-piece:nth-child(7) {
  left: 49%;
  transform: rotate(38deg);
  animation: makeItRain 1600ms infinite ease-out;
  animation-delay: 167ms;
  animation-duration: 1956ms;
}

.confetti-piece:nth-child(8) {
  left: 56%;
  transform: rotate(-8deg);
  animation: makeItRain 1600ms infinite ease-out;
  animation-delay: 41ms;
  animation-duration: 1851ms;
}

.confetti-piece:nth-child(9) {
  left: 63%;
  transform: rotate(28deg);
  animation: makeItRain 1600ms infinite ease-out;
  animation-delay: 232ms;
  animation-duration: 1594ms;
}

.confetti-piece:nth-child(10) {
  left: 70%;
  transform: rotate(29deg);
  animation: makeItRain 1600ms infinite ease-out;
  animation-delay: 111ms;
  animation-duration: 2027ms;
}

.confetti-piece:nth-child(11) {
  left: 77%;
  transform: rotate(-30deg);
  animation: makeItRain 1600ms infinite ease-out;
  animation-delay: 247ms;
  animation-duration: 1987ms;
}

.confetti-piece:nth-child(12) {
  left: 84%;
  transform: rotate(-71deg);
  animation: makeItRain 1600ms infinite ease-out;
  animation-delay: 160ms;
  animation-duration: 1685ms;
}

.confetti-piece:nth-child(13) {
  left: 91%;
  transform: rotate(-27deg);
  animation: makeItRain 1600ms infinite ease-out;
  animation-delay: 201ms;
  animation-duration: 2238ms;
}

.confetti-piece:nth-child(even) {
  z-index: 1;
}

.confetti-piece:nth-child(4n) {
  width: 5px;
  height: 12px;
  animation-duration: 3200ms;
}

.confetti-piece:nth-child(3n) {
  width: 3px;
  height: 10px;
  animation-duration: 4000ms;
  animation-delay: 1600ms;
}

.confetti-piece:nth-child(4n-7) {
  background: #ff4e91;
}

.confetti-piece:nth-child(5n+6) {
  background: #ff4040;
}

@keyframes makeItRain {
  from {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  to {
    transform: translateY(450px);
  }
}


/*================================================= [16-12-2019] Subscriber  ========================================================*/
.para {
  text-align: center;

}

/*================================================= [19-12-2019] Subscriber  ========================================================*/

.row-services {

  padding-top: 110px;

}


.card-ser {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 100%;
}

/*==============================================================[20-12-2019]============================================*/

.bottomright {
  position: absolute;
  right: 16px;
  margin-top: -35px;
}

.bottomright-divi {
  position: absolute;
  right: 16px;
  margin-top: 0px;
}

.bottomright-clients {
  position: absolute;
  right: 16px;
  margin-top: -114px;
}

/*==================================================================[20-12-2019]================================================*/

.img-align {
  padding-top: 35px;
}


/*============================================================[24-12-2014]=======================================================*/

.padding-left-services {

  padding-left: 100px;

}

.padding-left-services-digi {
  padding-left: 100px;
  padding-top: 120px;

}


.body-bro {

  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 0px;
}

.chevron {
  position: absolute;
  width: 28px;
  height: 8px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;

}

.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #3D4756;
}

.chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

@keyframes move {
  25% {
    opacity: 1;

  }

  33% {
    opacity: 1;
    transform: translateY(30px);
  }

  67% {
    opacity: 1;
    transform: translateY(40px);
  }

  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}


@keyframes pulse {
  to {
    opacity: 1;
  }
}

/*=================================================== 07-01-20 =============================================*/
@media only screen and (max-width: 600px) {
  .moblieres {
    margin-top: 120px;
  }

  .button-res {
    margin-top: -60px;
  }
}

/*@media only screen and (max-width: 700px){*/

/*  .tabres{*/

/*    margin-top: -220px;*/
/*  }*/
/*}*/

.contact-res {

  padding: 60px;
}

.align {

  text-align: center;
}



/*========================================== 17/01/2020 ==========================================*/


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

body {
  font-family: Raleway;
  background-color: #202125;
}

.heading {
  text-align: center;
  font-size: 2.0em;
  letter-spacing: 1px;
  padding: 40px;
  color: white;
}

.gallery-image {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery-image img {
  height: 250px;
  width: 350px;
  transform: scale(1.0);
  transition: transform 0.4s ease;
}

.img-box {
  box-sizing: content-box;
  margin: 10px;
  height: 250px;
  width: 350px;
  overflow: hidden;
  display: inline-block;
  color: white;
  position: relative;
  background-color: white;
}

.caption {
  position: absolute;
  bottom: 5px;
  left: 20px;
  opacity: 0.0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.transparent-box {
  height: 250px;
  width: 350px;
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color 0.3s ease;
}

.img-box:hover img {
  transform: scale(1.1);
}

.img-box:hover .transparent-box {
  background-color: rgba(0, 0, 0, 0.5);
}

.img-box:hover .caption {
  transform: translateY(-20px);
  opacity: 1.0;
}

.img-box:hover {
  cursor: pointer;
}

.caption>p:nth-child(2) {
  font-size: 0.8em;
}

.opacity-low {
  opacity: 0.5;
}


.gal {


  -webkit-column-count: 3;
  /* Chrome, Safari, Opera */
  -moz-column-count: 3;
  /* Firefox */
  column-count: 3;


}

.gal img {
  width: 100%;
  padding: 7px 0;
}

@media (max-width: 500px) {

  .gal {


    -webkit-column-count: 1;
    /* Chrome, Safari, Opera */
    -moz-column-count: 1;
    /* Firefox */
    column-count: 1;


  }

}

/* ===========================================hover animation for img card ============================ */




/*======================================================= 18-01-2020 ======================================*/


#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {
  opacity: 0.7;
}

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content,
#caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }

  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}


/*=========================================== Portfolio Code Comes Here =======================================*/

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  display: none;
  /* Hide all elements by default */
  padding: 14px;
}




/* Content */
.content {
  background-color: white;
  padding: 3px 3px;
}


.portclass {

  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}


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

  .mobile-gly {
    padding: 3px;
  }
}


/*================================ portfolio hover ======================================*/



.img-zoom-in {
  transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
}

.img-zoom-in:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1)
}



/*========================== career page banner ==============================================*/



#loadMore {
  padding-bottom: 30px;
  padding-top: 30px;
  text-align: center;
  width: 100%;
}

#loadMore a {
  background: #042a63;
  border-radius: 3px;
  color: white;
  display: inline-block;
  padding: 10px 30px;
  transition: all 0.25s ease-out;
  -webkit-font-smoothing: antialiased;
}

#loadMore a:hover {
  background-color: #021737;
}

.hidden {
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.center {
  text-align: center;
}

.pbt-50 {
  padding-bottom: 50px;
}


.para-style {
  font-weight: 700;
  text-align: center;
  font-size: 25px;
  font-family: 'Nunito', sans-serif;
  text-transform: uppercase;
  background: linear-gradient(90deg, #000, #fff, #000);
  letter-spacing: 5px;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-size: 80%;
  animation: shine 6s linear infinite;
  position: relative;
  -webkit-font-smoothing: antialiased;
  color: #3D4756;
  line-height: 1.7em;
}

@keyframes shine {
  0% {
    background-position-x: -500%;
  }

  100% {
    background-position-x: 500%;
  }

}

.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.video-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

.padding-20 {
  padding: 20px;
}



/*===================================== card codes comes here ==============================================*/

.accordion {
  background-color: #effaff;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.accordion:hover {
  color: white;
}

.active,
.accordion:hover {
  background-color: #3D4756;
}

.accordion:after {
  content: '\002B';
  font-weight: bold;
  float: right;
  margin-left: 5px;
}


.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}



/*Clients Testminols*/

.text-center {
  text-align: center;
}



.services {
  display: block;
  position: relative;
  padding: 0;
}

.container-body {
  max-width: 1200px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

.services-title {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}


.services-box {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
  margin-top: -15px;
}

.title {
  margin-left: 15px;
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 40px;
  text-align: center;
  top: 26px;

}

.services-title h2 span {
  color: #3c44a9;
}

.services-title h2 {
  margin-top: -10px;
  margin-bottom: 6px;
  text-transform: uppercase;
  font-size: 36px;
  line-height: 48px;
  font-weight: 700;
  color: #333;
  font-family: 'Ubuntu', sans-serif;
}

.box {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  max-width: 33.333333%;
}

.ser-box {
  margin-top: 75px;
  padding-bottom: 30px;
  padding: 0 20px;
  /*will-change to padding 60px to 20px*/
  min-height: 250px;
  text-align: center;
  border-radius: 10px;
  background-color: #fff;
  transition: all .4s ease-in-out;
  box-shadow: 0 0 25px 0 rgba(20, 27, 202, .17);
}

.ser-box .icon {
  margin-bottom: 0;
  transform: translateY(-50%);
  text-align: center;
}

.ser-box h4 {
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: #3c44a9;
  margin-top: -10px;
  text-align: center;
}

.ser-box p {
  color: #3D4756;
  font-size: 16px;
  font-weight: 600;
}

.ser-box:hover {
  box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
  cursor: pointer;
  background-image:
    linear-gradient(-45deg, #0077bd 0%, #0077bd 100%);
}

.ser-box:hover h4,
.ser-box:hover p {
  color: #fff;
}







@media(min-width: 768px) {
  .box {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}





@media(min-width: 600px) {
  .box {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}



@media(min-width: 992px) {
  .box {
    flex: 0 0 49.333333% !important;
    max-width: 49.333333% !important;
  }
}



@media(min-width: 414px) {
  .box {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


@media(min-width: 370px) {
  .box {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


@media(min-width: 320px) {
  .box {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.txt-cnt {
  text-align: center !important;
}


.clr-fnt {
  color: white;

}

/* .career-container {
  

} */

.career-container::before,
.career-container::after {
  display: none;
}

.posting-row {
  margin: 0 -15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  display: flexbox;
  -webkit-flex-flow: row wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.posting-div {
  float: left;
  width: 33.333%;
  padding: 0 15px !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-direction: column;

}

.job-posting {
  margin-bottom: 30px;
  -webkit-box-shadow: 0 1px 4px 0 rgb(0 0 0 / 5%);
  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 5%);
  border: 1px solid #dddfe3;
  border-radius: 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-grow: 1;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  text-decoration: none !important;
  background: #fff;
  padding: 20px;
  font-size: 14px;

}

.job-posting:hover {
  -webkit-box-shadow: 0 3px 15px -5px rgb(0 0 0 / 20%);
  box-shadow: 0 3px 15px -5px rgb(0 0 0 / 20%);
  /* color: #6a08c1; */
}

.job-posting:hover .job-post-title,
.job-posting:hover .more-details-wrapper {
  color: #6a08c1;
}

.job-post-title {
  margin: 0 0 15px;
  margin-bottom: 5px;
  font-size: 18px;
  text-align: left;
}

.more-details-icon::before {
  content: "\002192";
  ;
}

.job-details-wrapper {
  display: flex;
  gap: 12px;
  color: #4c4c4c;
  font-size: 12px;
  margin-top: 5px
}

.more-details-wrapper {
  margin-top: 10px;
}

.job-section {
  /* max-width: 980px; */
  /* margin: 0 auto; */
  /* overflow: visible; */
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.job-section .section-container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1140px;
}

.back-link{
  clear: both;
  margin: 18px 0;
}

.back-link a{
  color: #29222f;
  text-decoration: none;
}
.back-link a::before{
  content: "\002190";
  padding-right: 10px;
}

.job-jd{
  float: left;
  width: 55%;
  padding-right: 15px;
  padding-bottom: 32px;
}

.job-form{
  float: left;
  width: 45%;
  padding-left: 15px;
}

.form-container-jobs{
  background: #fff;
  border: 1px solid #dddfe3;
  padding: 35px;
}

.job-form-styling{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.requirement-list{
  list-style-type: circle;
  padding-left: 30px;
}

.bottom-content{
  margin: 20px 0 0;
}
@media (max-width:1199.98px) {
  .job-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

@media (max-width:992px) {
  .job-jd{
    width: 100%;
    padding-right: 0;
  }
  .job-form{
    width: 100%;
    padding-left: 0;
  }
}

@media (max-width:768px) {
  .posting-div{
    width: 50%;
  }
}
@media (max-width:648px) {
  .posting-div{
    width: 100%;
  }
}
/* @media (min-width:768px) {
  .job-section .section-container {
    max-width: 720px;
  }
}

@media (min-width:576px) {
  .job-section .section-container {
    max-width: 540px;
  }
} */