.expert{
    width:100%;
}

img {
	max-width: 100%;
}

.gallery{
  max-width: 900px;
  padding: 0 30px;
	margin-inline: auto;
}



/*.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{*/
/*        background: #252421!important;*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    transform: scale(0);*/
/*    transform-origin: left top;*/
/*}*/
/* .swiper-container-wrapper--timeline .swiper-slide {*/
/*	 display: flex;*/
/*	 background: #fff;*/
/*	 min-height: 300px;*/
/*	 align-items: center;*/
/*	 justify-content: center;*/
/*	 border-radius: 10px;*/
/*}*/
/* .swiper-container-wrapper--timeline .swiper-slide .container {*/
/*	 padding: 0;*/
/*	 width: 100%;*/
/*}*/
/* .swiper-container-wrapper--timeline .swiper-slide .title {*/
/*	 font-size: 18px;*/
/*	 opacity: 0;*/
/*	 transition: 0.5s ease 0.5s;*/
/*}*/
/* .swiper-container-wrapper--timeline .swiper-slide-active .title {*/
/*	 opacity: 1;*/
/*}*/
/* .swiper-container-wrapper--timeline .swiper-pagination-progressbar {*/
/*	 position: relative;*/
/*	 margin-bottom: 70px;*/
/*	 background-color: transparent;*/
/*	 height: 4px;*/
/*	 border-bottom: 1px solid #888;*/
/*	 width: 75%;*/
/*}*/
/* .swiper-container-wrapper--timeline .swiper-pagination-progressbar-fill {*/
/*	 background-color: #000;*/
/*	 height: 3px;*/
/*	 top: 2px;*/
/*}*/
/* .swiper-container-wrapper--timeline .swiper-pagination-progressbar:before {*/
/*	 position: absolute;*/
/*	 top: 2px;*/
/*	 left: -100%;*/
/*	 width: 100%;*/
/*	 height: 3px;*/
	 /*background-color: #000;*/
/*	 content: "";*/
/*}*/
/* .swiper-container-wrapper--timeline .swiper-pagination-progressbar:after {*/
/*	 position: absolute;*/
/*	 top: 3px;*/
/*	 right: -100%;*/
/*	 width: 100%;*/
/*	 height: 1px;*/
/*	 background-color: #888;*/
/*	 content: "";*/
/*}*/
/* .swiper-container-wrapper--timeline .swiper-pagination-custom {*/
/*	 position: relative;*/
/*	 list-style: none;*/
/*	 margin: 1rem 0;*/
/*	 padding: 0;*/
/*	 display: flex;*/
/*	 line-height: 1.66;*/
/*	 bottom: 0;*/
/*	 z-index: 11;*/
/*	 width: 75%;*/
/*	 display: flex;*/
/*}*/
/* .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch {*/
/*	 position: relative;*/
/*	 width: 100%;*/
/*	 height: 30px;*/
/*	 line-height: 30px;*/
/*	 display: block;*/
/*}*/
/* .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch .switch-title {*/
/*	 position: absolute;*/
/*	 font-weight: 400;*/
/*	 right: 0;*/
/*	 transform: translateX(50%);*/
/*	 transition: 0.2s all ease-in-out;*/
/*	 transition-delay: 0s;*/
/*	 cursor: pointer;*/
/*	 z-index: 1;*/
/*}*/
/* .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch .switch-title:after {*/
/*	 position: absolute;*/
/*	 top: calc(100% + 19px);*/
/*	 right: 50%;*/
/*	 transform: translateX(50%) translateY(-50%);*/
/*	 width: 12px;*/
/*	 height: 12px;*/
/*	 background: #000;*/
/*	 border-radius: 2rem;*/
/*	 content: "";*/
/*	 transition: 0.2s all ease-in-out;*/
/*	 transition-delay: 0s;*/
/*	 z-index: 1;*/
/*}*/
/* .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active .switch-title {*/
/*	 font-weight: 400;*/
/*	 transition-delay: 0.4s;*/
/*}*/
/* .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active .switch-title:after {*/
/*	 background: #000;*/
/*	 width: 25px;*/
/*	 height: 25px;*/
/*	 transition-delay: 0.4s;*/
/*}*/
/* .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active ~ .swiper-pagination-switch .switch-title {*/
/*	 color: #888;*/
/*	 font-weight: 16px;*/
/*}*/
/* .swiper-container-wrapper--timeline .swiper-pagination-custom .swiper-pagination-switch.active ~ .swiper-pagination-switch .switch-title:after {*/
/*	 background: #888;*/
/*}*/
 
.image{
       width: 269px;
}
.stroy{
        padding: 5%;
}
.tree1 {
    position: relative;
    width: 100%;
    height: 100%;
    background: url('Frame.png') no-repeat center;
    background-size: contain;
        }
        .counter-container {
            position: absolute;
            text-align: center;
        }
        .counter {
            font-size: 24px;
            font-weight: bold;
        }
        .label {
               font-size: 21px;
               color: orange;
        }
        .exp {    
               top: -12%;
               left: 46%;
         }
        .transformed {
             top: 26%;
             left: 4%;
            
        }
        .projects { 
                      top: 10%;
    right: 0%;
        }
        .solutions {
               bottom: 34%;
    right: -4%;
            
        }
        .success {
              bottom: 23%;
    left: 7%;
            }
.img7{
          margin: -142px 47%;
    display: block;
    position: absolute;
    vertical-align: middle;
}
.scroll_anime{
        margin: 26% 0%;
}
.arrows {
    width: 60px;
    height: 72px;
    position: absolute;
    left: 50%;
    margin-left: -30px;
    bottom: 64px;
}

.arrows path {
    stroke: #fa8a0e;
    fill: transparent;
    stroke-width: 1px;
    animation: arrow 2s infinite;
    -webkit-animation: arrow 2s infinite;
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
	animation-delay:-1s;
	-webkit-animation-delay:-1s; /* Safari 和 Chrome */
}

.arrows path.a2 {
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}

.arrows path.a3 {	
	animation-delay:0s;
	-webkit-animation-delay:0s; /* Safari 和 Chrome */
}
.bounce_letter{
        text-align: center;
}
.bounce_anime {
  color: #EEE;
  padding-top: 30px;
  font-family: 'Coiny', cursive;
  text-align: center;
  font-size: 70px;
-webkit-animation: bounce .4s ease infinite alternate;
}

@-webkit-keyframes bounce {
  0% {
      text-shadow:
                  0 5px 0 #ccc,
                  0 2px 3px rgba(0, 0, 0, 1);  
  }
  100% {
    transform:translateY(-20px);
    text-shadow:  0 50px 0 #black,
                  0 0px 20px rgba(0, 0, 0, .8);
  }
}
button {
	 appearance: none;
	 background: transparent;
	 border: none;
	 cursor: pointer;
	 isolation: isolate;
}
 .button {
	 font-size: 16px;
	 line-height: 1.5;
	 font-weight: 500;
	 width: 240px;
	 border-radius: 9999rem;
	 background: #efefef;
	 position: relative;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 position: relative;
	 isolation: isolate;
	 overflow: hidden;
}
 .button > span.text {
	 color: #121212;
	 width: 100%;
	 text-align: left;
	 padding-block: 12px;
	 padding-left: 24px;
	 z-index: 2;
	 transition: all 200ms ease;
}
 .button > div.overlay {
	 color: #ededed;
	 width: 48px;
	 height: calc(100% - 2px);
	 display: flex;
	 justify-content: flex-end;
	 align-items: center;
	 padding: 12px;
	 border-radius: inherit;
	 background: #242424;
	 position: absolute;
	 right: 1px;
	 z-index: 1;
	 transition: all 400ms ease;
}
 .button self:is(:hover, :focus) > span.text {
	 color: #ededed;
}
 .button self:is(:hover, :focus) > div.overlay {
	 width: calc(100% - 2px);
	 transition: width 200ms ease;
}
 
a {
    color: #000000 !important;
    text-decoration: none;
    transition: 0.3s;
}
@media (min-width: 768px) {
    h4{
        color:#000000;
    }
    .img1{
        width:100px!important;
    }
    .img2{
        width:100px!important;
    }
     .img3{
        width:100px!important;
    }
    .img4{
        width:100px!important;
    }
}
.front h2{
        color: white;
    font-size: 22px;
    font-weight: 400;
    transform: translateZ(50px);
    text-align: center;
    margin: 22% 0% 0% 0%;
}
.icon{
    margin-top: 50%;
    position: absolute;
    display: block;
    margin-left: 19%;
}
.counter1{
    width: 59px;
}
.counter{
    width:100px;
}
.bold{
    font-size:50px;
}
.statistics {
    width: 100%;
    /*background: #4f8280;*/
    /*background: linear-gradient(*/
    /*    90deg,*/
    /*    rgba(79, 130, 128, 1) 0,*/
    /*    rgba(119, 194, 190, 1) 100%*/
    /*);*/
}
.statistics-card {
    height: auto;
}
.statistics-card > h2 {
    text-align: center;
    color:#000000;
    margin-bottom: 15px;
}

.statistics-card > img {
    display: block;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
}

.statistics-card > p {
    text-align: center;
    color: #000000;
    margin-bottom: 10px;
}


@media only screen and (max-width: 1470px) {
    .statistics-container {
        gap: 80px 200px;
    }
}

.box{
    height: 1000px;
    background-color: red;
}
#counter-section-container {
  width: 100%;
  text-align: center;
}

#counter-box-container {
  /*border: 1px solid #999999;*/
  overflow: hidden;
}

#counter-box {
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
    float: left;
    text-align: center;
    color: #000000;
}
a:hover {
    color: #0056b3;
    text-decoration: auto;
}
@media (min-width: 1200px) {
    .container {
        max-width: 1240px;
    }
}
.cards {
    grid-column: span 12;
    display: grid;
    gap: 2rem;

    @include mQ(61.25rem) {
      grid-column: span 5;
    }

    .card {
      cursor: pointer;
      padding: 2em;
      border-radius: 1rem;
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 2.188rem;
      align-items: center;
      transition: 0.3s;
      position: relative;
      border: 0.094rem solid transparent;

      img {
        display: block;
        width: 3.35rem;
        height: 3.35rem;
        border-radius: 50%;
        filter: grayscale(1);
        transition: 0.5s;
      }

      > div {
        h3 {
          text-transform: capitalize;
          font-size: 1.025rem;
        }

        p {
          text-transform: capitalize;
          color: #767676;
          font-size: 0.9rem;
        }
      }
    }
    .card.active {
      background: #fff;
      border: 0.094rem solid #0f172a14;

      .gradient {
        background-image: linear-gradient(
          to right,
          #4755690a,
          #9d0cb28a,
          #4343c899,
          #4755690a
        );
        width: 50%;
        height: 0.094rem;
        position: absolute;
        content: "";
        bottom: -0.063rem;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0px 0.125rem 0.75rem #4343c84d;
      }
    }
    .card.active img {
      filter: grayscale(0);
    }
  }

.service1{
    /*background: url("ux.png");*/
    /*background-size: contain;*/
    /*display: block;*/
    /*background-repeat: no-repeat;*/
}
.img11{
    width:100%;
}
.number1{
     font-size: 40px!important;
  padding: 0!important;
  font-weight: bold!important;
}
.number::after {
    content: "+";
}
.number1::after {
    content: "%";
     font-size: 40px;
  padding: 0;
  font-weight: bold;
}
.sectionClass {
  position: relative;
  display: block;
}

.fullWidth {
  width: 100% !important;
  display: table;
  float: none;
  padding: 0;
  min-height: 1px;
  height: 100%;
  position: relative;
}


.sectiontitle {
  background-position: center;
  margin: 30px 0 0px;
  text-align: center;
  min-height: 20px;
}

.sectiontitle h2 {
  font-size: 30px;
  color: #222;
  margin-bottom: 0px;
  padding-right: 10px;
  padding-left: 10px;
}


.headerLine {
  width: 160px;
  height: 2px;
  display: inline-block;
  background: #101F2E;
}

.projectFactsWrap{
    display: flex;
    background: #f3b82d;
}


#projectFacts .fullWidth{
  padding: 0;
}

.projectFactsWrap .item{
    width: 100%;
    height: 100%;
    padding: 50px 0px 50px 0px;
    text-align: center;
}

.projectFactsWrap .item p.number{
  font-size: 40px;
  padding: 0;
  font-weight: bold;
}

.projectFactsWrap .item p{
      color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    margin: 0;
    padding: 10px;
    font-family: 'Open Sans';
    text-align: center;
}


.projectFactsWrap .item span{
  width: 60px;
  background: rgba(255, 255, 255, 0.8);
  height: 2px;
  display: block;
  margin: 0 auto;
}


.projectFactsWrap .item i{
  vertical-align: middle;
  font-size: 50px;
  color: rgba(255, 255, 255, 0.8);
}


.projectFactsWrap .item:hover i, .projectFactsWrap .item:hover p{
  color: white;
}

.projectFactsWrap .item:hover span{
  background: white;
}

@media (max-width: 786px){
  .projectFactsWrap .item {
     flex: 0 0 50%;
  }
}

/* AUTHOR LINK */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
      h4{
          color:#000000;
      }
}
@media (min-width: 1200px) {
    .h4, h4 {
           font-size: 1rem;
    color: #000000!important;
    }
}
@media only screen and (max-width: 600px) {
    .bold {
    font-size: 26px;
}
    .back p {
    line-height: 2rem;
    text-align: left;
    display: block;
    margin: 99px 29px !important;
    transform: translateZ(50px);
}

    .service {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 305px;
    width: 100%;
    position: relative;
    transform-style: preserve-3d;
    perspective: 700px;
    margin: 5% 0%;
}
    .projectFactsWrap{
     display: block;
    flex-direction: row;
    flex-wrap: wrap;
    background: #224a89;
}
    .head {
        padding: 0% 0%!important;
}
.animate-text{
          height: 38px!important;
    overflow: hidden;
}
    .services {
    display: block!important;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 95%;
    margin: 20px auto 20px auto!important;
}
    .img11{
          width: 50%!important;
    margin: 0 auto;
    text-align: center;
    display: block;
    }
   .img6 {
        width: 90%!important;
    margin: 0 auto;
    text-align: center;
    display: block;
    float: none!important;
}
    p {
      margin-top: 1rem;
    text-align: justify;
    margin-bottom: 1rem;
    line-height: 2rem;
    /* margin: 15px!important; */
}
    .who_we {
        display:block!important;
    }
    .tagline {
            margin: 69px auto;
    display: block;
}
    h4{
          color: #000000;
    height: 200px!important;
    }
          h1 {
        font-size: 24px;
        text-align: center!important;
    }
    .mobile-nav-active .navmenu{
            position: fixed;
    overflow: hidden;
    inset: 0;
    background: #000000;
    transition: 0.3s;
    }
    .navmenu a i, .navmenu a:focus i{
            font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), #000000 90%);
    float: right;
    margin-top: 2%;
    }
    .navmenu a i:hover, .navmenu a:focus i:hover {
        background-color: #ff6707;
        color: var(--contrast-color);
    }
    .img2 {
    width: 200px;
    float: none!important;
}
.img3 {
    width: 200px;
    float: none !important;
}
 .laptop{
    display:none!important;
  }
  .mobile{
      display:block!important;
  }
  .img_spcs {
    display: block!important;
    text-align: center;
    margin-top: 5%;
    position: static;
    margin: 0px 0px;
}
}
.laptop{
    display:block;
}
.mobile{
    display:none;
}
.slick-vertical .slick-slide{
        display: block;
    height: auto;
    border: 1px solid transparent;
    font-size: 28px;
}
.background {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/*ul {*/
/*  display: flex;*/
/*  list-style: none;*/
/*  padding: 0;*/
/*  margin: 0;*/
/*}*/

.socials {
  gap: 20px;
}

.socials a {
  font-size: 24px;
}

.links {
  gap: 10px;
  flex-direction: column;
}

.legal {
  font-size: 12px;
  margin: 0;
}
.tagline{
        margin: 69px auto;
    display: block;
}
h1{
    text-align: left;
}
.slick-next, .slick-prev{
        font-size: 0;
    line-height: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px\9;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: 0;
    background: 0 0;
    display: none!important;
}
.services {
       display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 50px auto 20px auto;
    gap: 20px;
}
.service {
       display: flex;
    justify-content: center;
    align-items: center;
    height: 305px;
    width: 100%;
    position: relative;
    transform-style: preserve-3d;
    perspective: 700px;
}

.front {
    position: absolute;
    display: block;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform: rotateX(0deg);
    transform-style: preserve-3d;
    background-image: linear-gradient(45deg, rgb(58, 58, 58), rgb(22, 22, 22));
    transition: 0.7s;
    border-radius: 20px;
}

.back {
    position: absolute;
    color: whitesmoke;
    text-align: center;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform: rotateX(-180deg);
    background-image: linear-gradient(45deg, rgb(36, 36, 36), rgb(71, 71, 71));
    transition: 0.7s;
    border-radius: 20px;
}

.service:hover .back {
	transform: rotateX(0deg);
}

.front h4 {
       color: white;
    font-size: 22px;
    font-weight: 400;
    transform: translateZ(50px);
    text-align: center;
    margin: 22% 0% 0% 0%;
}
.back h3 {
	display: inline-block;
	margin: 50px auto 30px auto;
	transform: translateZ(50px);
	color: rgb(116, 116, 116);
}

.back p {
	margin: 68px 40px;
	transform: translateZ(50px);
}

.service1 .front {
       background: linear-gradient(45deg, rgb(253 191 43), rgb(254 191 43));
}

.service2 .front {
        background: linear-gradient(45deg, rgb(253 191 43), rgb(254 191 43));
}

.service3 .front {
       background: linear-gradient(45deg, rgb(253 191 43), rgb(254 191 43));
}
.service:hover .front {
	transform: rotateX(180deg);
}
.who_we11{
       padding: 2% 0%;
}
.img6{
     float: right;
    width: 90%;
}
.fronttext{
     text-align: center;
    font-size: 24px;
    display: block;
    margin: 10% 0%;
    transform: translateZ(50px);
}
a{
  text-decoration:none;
}
.floating_btn {
       left: 20px;
    position: fixed;
    bottom: 40px;
    /* right: 16px; */
    width: 42px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    float: left;
}

@keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

.contact_icon {
     background-color: #42db87;
    color: #fff;
    width: 45px;
    height: 45px;
    font-size: 30px;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translatey(0px);
    animation: pulse 1.5s infinite;
    box-shadow: 0 0 0 0 #42db87;
    -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    font-weight: normal;
    font-family: sans-serif;
    text-decoration: none !important;
    transition: all 300ms ease-in-out;
}


.text_icon {
  margin-top: 8px;
  color: #707070;
  font-size: 13px;
}

.count{
  font-family: 'Josefin Sans', sans-serif;
  font-size: 40px;
  font-weight: bold;
}
.counter-wrapper{
  background: #333;
   background-image:url('https://images.unsplash.com/photo-1568563643102-37d43956d1d3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
  background: cover;
  background-position: center center;
  position: relative;
}
.counter-wrapper:after{
  content: '';
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background: rgba(0,0,0,.5);
}
.counter-inner{
  position:relative;
  z-index:2;
}
.count-icon{
  font-size: 48px;
}


h3 {
     font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
}
.clients {
      align-items: center;
    -webkit-box-align: center;
    display: grid;
 
    justify-items: center;
    max-width: 1024px;
    line-height: 6rem;
    }

.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 img {*/
/*  height: 4rem; }*/
    
}

/* --- Images (gray logo) --- */
.clients img {
     -webkit-filter: grayscale(100%) brightness(10%) contrast(10%);
    filter: grayscale(1);}

.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; }
  .head{
      padding:2% 0%;
  }
  .heading{
      padding:2% 0%;
  }
  .image_logo{
      padding:2% 0%;
  }
  @import url(//fonts.googleapis.com/css?family=Lato:300:400);


.inner-header {
    height: 74vh;
    width: 100%;
    margin: 0;
    padding: 0;
}

.header1 {
    position: relative;
    text-align: center;
    background: #ffe6ac;
    color: white;
}
.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}

.content {
  position:relative;
  height:20vh;
  text-align:center;
  background-color: white;
}

/* Animation */
.head{
    color: #000000;
    font-size: 26px;
}
.slider h4{
     font-size: 47px!important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #FF7902 , #F9B21D);
}
.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
}}
.field1{
    width: 100px;
    height: 100px;
    border-radius: 50px;
    margin: 10% 0%;
    background-color: rgb(252 189 44);
}
.field {
         display: flex;
    align-items: center;
    justify-content: space-around;
    width: 302px;
    margin: 21px -51px;
    position: absolute;
}
 .mouse {
         width: 26px;
    height: 42px;
    border: 2px solid #fff;
    border-radius: 60px;
    position: relative;
    margin: 28% 36px;
}
/* .mouse::before {*/
/*	 content: '';*/
/*	 width: 12px;*/
/*	 height: 12px;*/
/*	 position: absolute;*/
/*	 top: 10px;*/
/*	 left: 50%;*/
/*	 transform: translateX(-50%);*/
/*	 background-color: #333;*/
/*	 border-radius: 50%;*/
/*	 opacity: 1;*/
/*	 animation: wheel 2s infinite;*/
/*	 -webkit-animation: wheel 2s infinite;*/
/*}*/
 @keyframes wheel {
	 to {
		 opacity: 0;
		 top: 60px;
	}
}
 @-webkit-keyframes wheel {
	 to {
		 opacity: 0;
		 top: 60px;
	}
}
 .scroll {
	 width: 60px;
	 height: 60px;
	 border: 2px solid #333;
	 border-radius: 50%;
	 position: relative;
	 animation: down 1.5s infinite;
	 -webkit-animation: down 1.5s infinite;
}
 .scroll::before {
	 content: '';
	 position: absolute;
	 top: 15px;
	 left: 18px;
	 width: 18px;
	 height: 18px;
	 border-left: 2px solid #333;
	 border-bottom: 2px solid #333;
	 transform: rotate(-45deg);
}
 @keyframes down {
	 0% {
		 transform: translate(0);
	}
	 20% {
		 transform: translateY(15px);
	}
	 40% {
		 transform: translate(0);
	}
}
 @-webkit-keyframes down {
	 0% {
		 transform: translate(0);
	}
	 20% {
		 transform: translateY(15px);
	}
	 40% {
		 transform: translate(0);
	}
}
#particles-js {
  position: relative;
  width: 100%;
  height: 100vh;
    background-color: #000;
  background-image: url("http://preview.ibb.co/c9jYzv/cover.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
canvas.particles-js-canvas-el {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.home{
  position: absolute;
  width: 100%;
  height: 100%;
}
.header_image{
    margin: -115px auto;
    display: block;
}
canvas {
  display: block;
  vertical-align: bottom;
}
/* ---- particles.js container ---- */
#particles-js {
     position: absolute; 
    width: 100%;
    height: 100%;
    background-image: url('banner.png')!important;
    background-repeat: no-repeat;
    background-size: cover;
}
wrapper{
  width: 1080px;
}
#Animation-front{
  font: normal 40px/50px 'Raleway', sans-serif;
  color: #ffffff;
}
.slidingVertical {
    position: relative;
    overflow: hidden;
    height: 50px;
    font-size: 35px;
    color: #000000;
  }

  .slidingVertical span {
       position: absolute;
    width: 100%;
    /* text-align: center; */
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .slidingVertical span.active {
    opacity: 1;
    transform: translateY(0);
  }

  #dynamicImage {
      width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
    transform: translateY(20%);
    border-radius: 50px;
    position: relative;
    margin: 0 auto;
    display: block;
  }

  #dynamicImage.active {
    opacity: 1;
    transform: translateY(0);
  }
  .img1{
         width: 200px!important;
  }
   .img2{
            width: 200px!important;
    /* float: left; */
  } 
  .img3{
          width: 200px!important;
    /* float: right; */
  }
   .img4{
        width: 200px!important;
    
  }
  .img_spcs{
       display: flex;
    text-align: center;
    margin-top: 5%;
    position: static;
    margin: 0px  0px;
  }
p1{
  white-space: nowrap;
}
.circle {
      --width: 200px;
    --height: 200px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--width, 200px);
    height: var(--height, 200px);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    margin: 0px auto;
    display: block;
}

.logo_rotate {
       position: absolute;
    /*background-color: rgb(252 189 44);*/
    /* background: url("https://lh6.googleusercontent.com/iv7HpcbMVOb_zmWfKDjrbpv429lvFISEqeqZmkCDTAhYuy0Yg3LsIEiu4Wx1LFsuwYI=w2400"); */
    background-size: cover;
    width:125px;
    height: 125px;
    /*width: 59%;*/
    /*height: 60%;*/
    border-radius: 100%;
    margin: 38px 19%;
    border: 1px solid red;
}

.text_rotate {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotateText 10s linear infinite;
    -webkit-animation: rotateText 10s linear infinite;
    font-size: 12px;
    font-family: sans-serif;
}

.text_rotate .char {
  position: absolute;
  left: 50%;
  font-size: 1.1em;
  transform-origin: 0 calc(var(--width, 350px) / 2);
}

@media (min-width: 500px) {
  .text_rotate .char {
      font-size: 1.2em;
  }
}

@keyframes rotateText {
  0% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
}

@media (max-width: 500px) {
  .circle {
    --width: 300px;
    --height: 300px;
  }
}
@media (max-width: 350px) {
  .circle {
    --width: 220px;
    --height: 220px;
  }

  .text_rotate .char {
    font-size: 0.7em;
  }
}
@media (max-width: 230px) {
  .circle {
    --width: 150px;
    --height: 150px;
  }

  .text_rotate .char {
    font-size: 0.4em;
  }
}

.b {
      overflow: hidden;
    position: relative;
    height: 53px;
    float: left;
    margin-top: 2%;
}
p {
    margin-top: 1rem;
    text-align: justify;
    margin-bottom: 1rem;
    line-height: 2rem;
}
.who_we_are{
            color: #e97f3a;
}
p2{
     font-family: 'Titillium Web', sans-serif;
    display: inline-block;
    color: #000;
    position: relative;
    white-space: nowrap;
    top: 0;
    left: 0;
    font-size: 55px;
    letter-spacing: 2px;
    font-weight: bold;
}
p3{
      height: 50px;
    float: left;
    white-space: nowrap;
    position: relative;
    font-size: 70px;
}
span1 {
  display: inline-block;
  color: #e74c3c;
  position: relative;
  white-space: nowrap;
  animation: move 6s;
  animation-iteration-count: infinite;
  animation-delay: 1s;
  font-size: 30px;
  letter-spacing: 2px;
}
@keyframes move {
  0%  { top: 0px; }
  20% { top: -50px; }
  40% { top: -100px; }
  60% { top: -150px; }
  60% { top: -150px; }
  80% { top: -0px;}
  80% { top: -0px;}
}
.text_animation{
    height: 700px;
    padding: 5% 0%;
}
.who_we{
        display: flex;
            width: 100%;
}
/*.who_we img{*/
/*         width: 90%;*/
/*    margin: 0 auto;*/
/*    text-align: center;*/
/*    display: block;*/
/*}*/
.centerflipcards {
     display: flex;
    text-align: center;
    margin: 20px auto;
}

.card-flip {
  width: 100%;
  height: 250px;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  -webkit-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -ms-transform: perspective(1000px);
  transform: perspective(1000px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
  float: left;
}

.frontCard,
.backCard {
  width: 100%;
  height: 100%;
  padding: 10px;
  -ms-transition: transform 2s cubic-bezier(.5, .3, .3, 1);
  transition: transform 2s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 2s cubic-bezier(.5, .3, .3, 1);
  overflow: hidden;
  position: absolute;
  top: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card-flip .frontCard {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  z-index: 1;
}

.card-flip:hover .frontCard {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
 transform: rotateX(-180deg); 
  transform-style: preserve-3d;
}

.card-flip .backCard {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
   transform: rotateX(180deg); 
  transform-style: preserve-3d;
  z-index: 1;
}

.card-flip:hover .backCard {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateX(0deg); 
  transform-style: preserve-3d;
}

.invCard,
.applyCard2,
.directionsCard {
  background: url(http://israel.dcs-cms.com/Dealers/00001_01000/00030_Israel/images/fxslide1.jpg) center center no-repeat content-box;
  background-size: cover;
}

.invCard2,
.applyCard,
.directionsCard2 {
  background: url(http://israel.dcs-cms.com/Dealers/00001_01000/00030_Israel/images/fxslide3.jpg) center center no-repeat content-box;
  background-size: cover;
}

.frontCard:before,
.backCard:before {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  background-image: linear-gradient(to bottom right, #a53c3c, #2221ff);
  opacity: .6
}

.card-flip i {
  color: #fff;
  font-size: 4em;
}

.card-flip h2 {
  color: white;
  font-family: "Lato";
  font-weight: 700;
  font-size: 24px;
  text-align: center;
}

.card-flip h3 {
  color: white;
  font-family: "Lato";
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
}

.centerflipcards p {
  font-family: "Lato";
  font-size: 13px;
  margin-top: 10px;
  font-weight: 700;
}

.flip-button {
  display: block;
  width: 200px;
  padding: 20px;
  font-family: "Lato";
  font-weight: 300;
  font-size: 1.5em;
  color: #fff;
  margin: 0 auto;
  border-radius: 2px;
  text-decoration: none;
  background: #2221ff;
   Old browsers 
  background: -moz-linear-gradient(-45deg, #4bbcff 0%, #4954de 49%, #2221ff 100%);
   FF3.6-15 
  background: -webkit-linear-gradient(-45deg, #4bbcff 0%, #4954de 49%, #2221ff 100%);
   Chrome10-25,Safari5.1-6 
  background: linear-gradient(135deg, #4954de 0%, #4bbcff 49%, #2221fff 100%);
   W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ 
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4bbcff', endColorstr='#2221ff', GradientType=1);
   IE6-9 fallback on horizontal gradient 
  opacity: .7;
}

a.flip-button:hover {
  opacity: 1;
  color: #fff;
  text-decoration: none;
}


.card-container {
  padding: 0 40px;
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transform: translateY(-50%) translateX(0px) scale(1);
  -ms-transform: translateY(-50%) translateX(0px) scale(1);
  transform: translateY(-50%) translateX(0px) scale(1);
  transform-style: preserve-3d;
  z-index: 2;
}

.card-flip:hover .card-container {
  -webkit-transform: translateY(-50%) translateX(-650px) scale(.88);
  -ms-transform: translateY(-50%) translateX(-650px) scale(.88);
  transform: translateY(-50%) translateX(-650px) scale(.88);
  transform-style: preserve-3d;
}

.card-container2 {
  padding: 40px;
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transition: transform 0.60s cubic-bezier(.5, .3, .3, 1);
  -webkit-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88);
  -ms-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88);
  transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88);
  transform-style: preserve-3d;
  z-index: 2;
}

.card-flip:hover .card-container2 {
  -webkit-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
  -ms-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
  transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
  transform-style: preserve-3d;
}


ADD SHADOWS OPTIONAL

.card-flip .frontCard .boxshadow,
.card-flip .frontCard .textshadow,
.card-flip .backCard .boxshadow,
.card-flip .backCard .textshadow {
  -ms-transition: 0.60s;
  transition: 0.60s;
  -webkit-transition: 0.60s;
}

.card-flip .frontCard .boxshadow {
  -webkit-box-shadow: 24px 42px 58px -8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 24px 42px 58px -8px rgba(0, 0, 0, 0.3);
  box-shadow: 24px 42px 58px -8px rgba(0, 0, 0, 0.3);
}

.card-flip .frontCard .textshadow, .card-flip i {
  -webkit-text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
  -moz-text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
}

.card-flip:hover .frontCard .boxshadow,
.card-flip:hover .frontCard .textshadow {
  -webkit-box-shadow: 240px 42px 58px -8px rgba(0, 0, 0, 0.0);
  -moz-box-shadow: 240px 42px 58px -8px rgba(0, 0, 0, 0.0);
  box-shadow: 240px 42px 58px -8px rgba(0, 0, 0, 0.0);
}

.card-flip .backCard .boxshadow {
  -webkit-box-shadow: 240px 42px 58px -8px rgba(0, 0, 0, 0.0);
  -moz-box-shadow: 240px 42px 58px -8px rgba(0, 0, 0, 0.0);
  box-shadow: 240px 42px 58px -8px rgba(0, 0, 0, 0.0);
}

.card-flip .backCard .textshadow {
  -webkit-text-shadow: 240px 42px 58px -8px rgba(0, 0, 0, 0.0);
  -moz-text-shadow: 240px 42px 58px -8px rgba(0, 0, 0, 0.0);
  text-shadow: 240px 42px 58px -8px rgba(0, 0, 0, 0.0);
}

.card-flip:hover .backCard .boxshadow {
  -webkit-box-shadow: 25px 25px 50px 0px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 25px 25px 50px 0px rgba(0, 0, 0, 0.8);
  box-shadow: 25px 25px 50px 0px rgba(0, 0, 0, 0.8);
}
.logo_divi{
        height: 200px;
}