.swiper-container {
    width: auto;
    height: auto;
  }

  .swiper-slide {
    text-align: center;
   

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: auto;
    height: auto;
    object-fit: cover;
  }
  .swiper {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  .swiper-slide {
    background-size: cover;
    background-position: center;
  }

  .mySwiper2 {
    height: auto;
    width: 100%;
  }

  .mySwiper {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
  }

  .mySwiper .swiper-slide {
    width: 25%;
    height: 100%;
    border: 5px solid;
    opacity: 0.4;
  }

  .mySwiper .swiper-slide-thumb-active {
    opacity: 1;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
.fact-counter{
    position: relative;
}

.fact-counter .counter-column{
    position:relative;
    margin-bottom:40px;
}

.fact-counter .count-box{
    position: relative;
    font-size: 60px;
    line-height: 1em;
    color: #ffffff;
    font-weight: 700;
    padding: 20px 0;
    padding-left: 20px;
}

.fact-counter .count-box:before{
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    width: 50px;
    border: 2px solid #2c97ea;
    content: "";
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
}

.fact-counter .count-box:hover:before{
    -webkit-box-shadow: #2c97ea 0 0px 0px 40px inset;
    -moz-box-shadow: #2c97ea 0 0px 0px 40px inset;
    -ms-box-shadow: #2c97ea 0 0px 0px 40px inset;
    -o-box-shadow: #2c97ea 0 0px 0px 40px inset;
    box-shadow: #2c97ea 0 0px 0px 40px inset;
}

.fact-counter .count-box .count{
    position: relative;
    float: left;
    margin-right: 15px;
}

.fact-counter .count-box .count-text{
    position: relative;
    display: inline-block;
    font-size: 60px;
    line-height: 1em;
    color: #000;
    font-weight: 700;
}

.fact-counter .count-box .counter-title{
    position: relative;
    display: flex;
    font-size:15px;
    line-height: 1.2em;
    font-weight:bold;
    color:#2c97ea;
    padding: 9px 0;
    font-family: "Rubik", sans-serif;
}
.padding-about {
    display: block;
    padding-top: 60px;
}
.d-flex {
    display: flex;
}
.map {
    height: 500px;
    padding-top: 20px;
}
.map-text {
  text-orientation: upright;
  writing-mode: vertical-lr;
}
.map-text::first-letter {
    color: #ffb600;
    font-weight: bold;
}
@media only screen and (max-width: 599px){
.map-text{
  text-orientation: upright;
  writing-mode: horizontal-tb;
  text-align: center;
  padding-bottom: 20px;
}
.map {
    height: unset;
}
.product-mob{
    width: 100%;
}
.founder-left {
    background: #eaf1f8;
    padding: 25px!important;
    box-shadow: 11px 11px 15px rgb(0 0 0 / 10%);
    right: -25px;
    width: 86%;
}
.founder-heading1{
    font-size: 23px!important;
}
.text-2 {
    padding-left: 0px;
}
.founder-right {
    width: 100%;
    top: -23px;
}
.founder-bottom {
    display: none;
}
.founder-bottom-2 {
    display: none;
}
.founder-bottom-3 {
    display: none;
}
.founder-right {
    left: 5px;
}
.founder-img{
    height: 222px;
    box-shadow: unset;
}
.founder-img {
    box-shadow: unset;
}
.guide {
    padding-right: 0px!important;
    padding-left: 0px!important;
}
.guide-title {
    color: white!important;
    text-align: center!important;
    font-size: 25px!important;
}
}
.founder-left{
    background: #eaf1f8;
    padding: 50px;
    box-shadow: 11px 11px 15px rgb(0 0 0 / 10%);
    right: -55px;
}
.founder-right {
    left: 33px;
    width: 30%;
    top: -25px;
}

.founder-bottom {
    top: -55px;
    left: 40px;
}
.founder-bottom-2 {
    top: -75px;
    left: 40px;
}
.founder-bottom-3 {
    top: -75px;
    left: 40px;
}
.founder-heading1 {
    text-transform: unset;
    padding-bottom: 20px;
    padding-top: 14px;
    font-size: 30px;
    color: black;
}
.guide{
    padding-right: 50px;
    padding-left: 50px;
}
.guide-title {
    color: white;
    text-align: center;
}
.guide-left{
    background-image: url('../images/homeGuide.jpg');
    background-size: cover;
    background-position: center;
    padding: 15px;
    box-shadow: 11px 11px 15px rgb(0 0 0 / 10%);
    clip-path: polygon(100% 0%, 100% 74%, 49% 96%, 0 75%, 0 0);
}
#particle-canvas {
    width: 100%;
    position: absolute;
    inset: 0px;
    z-index: 1;
    background: transparent;
    height: 100%;
  }
  .guid-logo{
    width: auto!important;
  }
  @media only screen and (max-width: 599px){
    .guid-logo{
        width: auto!important;
        margin: auto;
    }
  }
  
 /* ABOUT SECTION start  */

.banner-outer .slide1, .banner-outer .slide2, .banner-outer .slide3 {
    display: block;
    height: 365px;
}
@media (max-width: 767px){
.banner-outer .slide1, .banner-outer .slide2, .banner-outer .slide3 {
height: 399px;
}
}
.d-flex {
display: flex;
}
.img-p{
padding-top: 5%;
padding-bottom: 20px;
}
.img-p2{
padding-top: 3%;
padding-bottom: 0;
}
.text-yellow {
color: #ffb600;
padding-right: 10px;
font-weight: bold;
margin-bottom: 5px;
}
.text-blue2 {
color: #ffb600;
padding-right: 10px;
font-weight: bold;
}
@media only screen and (max-width: 599px){
.text-blue2{
    font-size: 25px;
    text-align: center;
}
.text-blue3{
    color: #ffb600;
    text-align: left;
    font-size: 14px;
    font-weight: bold;
}
.text-blue{
    font-size: 40px;
}
.founder2-heading1{
    font-size: 40px;
}
}
.card-about {
text-transform: unset;
/* margin-top: 20px; */
margin-bottom: 20px;
}
.card-about:after{
content:''; 
display:block; 
width:80px; 
height:4px; 
background:#2c97ea; 
margin:0 auto; 
margin-top:15px; 
border-radius:3px;
}
.card {
padding: 20px;
transition: all 300ms ease;
}
.card:hover{
box-shadow: 0 8px 15px rgb(0 0 0 / 15%);
transition: all 300ms ease;
}
.about-section {
position: relative;
background-repeat: no-repeat;
background-position: center left;
padding: 100px 0;
}
.about-section2 {
position: relative;
background-repeat: no-repeat;
background-position: center left;
padding: 100px 0;
}
.auto-container {
position: static;
max-width: 1200px;
padding: 0px 15px;
margin: 0 auto;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
}
.about-section .image-column {
position: relative;
}
.about-section .image-column .inner-column {
position: relative;
text-align: right;
margin-right: -15px;
}
.about-section .image-column .title-box {
position: absolute;
left: 95px;
bottom: 75px;
width: 100%;
text-align: left;
z-index: 9;
}
.about-section .image-column .title-box h2 {
position: relative;
display: block;
font-size: 50px;
line-height: 78px;
color: #f2f2f2;
font-weight: 900;
text-transform: uppercase;
text-shadow: 0 0 10px #000;
font-family: "Rubik", sans-serif;
}
.about-section .image-column .image-box {
position: relative;
z-index: 1;
padding-top: 110px;
}
.about-section .image-column .image-box .alphabet-img {
position: absolute;
left: 0;
top: 0;
}
.about-section .image-column .image-box .alphabet-img img {
max-width: 100%;
height: 360px;
width: auto;
}
.about-section .image-column .image-box .image {
position: relative;
margin-bottom: 0;
}
.about-section .image-column .image img {
display: inline-block;
max-width: 100%;
height: auto;
-webkit-box-shadow: 0 8px 20px rgb(0 0 0 / 18%);
-moz-box-shadow: 0 8px 20px rgba(0,0,0,0.18);
-ms-box-shadow: 0 8px 20px rgba(0,0,0,0.18);
-o-box-shadow: 0 8px 20px rgba(0,0,0,0.18);
box-shadow: 0 8px 20px rgb(0 0 0 / 18%);
}
.about-section .content-column {
position: relative;
}
.about-section .content-column .inner-column {
position: relative;
padding-top: 170px;
}
.about-section .content-column .content-box {
position: relative;
padding: 70px 90px 74px;
background-color: #ffffff;
border: 20px solid #ffb600;
border-left: 0;
}
.about-section2 .content-column2 {
position: relative;
}
.about-section2 .content-column2 .inner-column2 {
position: relative;
padding-top: 50px;
}
.about-section2 .content-column2 .content-box2 {
position: relative;
padding: 70px 45px 45px;
background-color: #ffffff;
border: 20px solid #1F1F1F;
border-left: 0;
}
@media only screen and (max-width: 1139px){
.about-section .content-column .content-box {
padding-left: 45px;
padding-right: 15px;
}
.about-section2 .content-column2 .content-box2 {
padding-left: 45px;
padding-right: 15px;
}
}
@media only screen and (max-width: 1023px) {
.about-section .content-column .inner-column, .about-section .image-column .inner-column {
margin: 0;
}
.about-section2 .content-column2 .inner-column2 {
margin: 0;
}
.about-section .image-column .title-box {
position: relative;
display: inline-block;
left: 0;
top: 0;
text-align: center;
}
.about-section .image-column .title-box {
position: relative;
display: inline-block;
left: 0;
top: 0;
text-align: center;
}
.about-section .content-column .inner-column, .about-section .image-column .image-box {
padding-top: 50px;
text-align: center;
}
.about-section2 .content-column2 .inner-column2 {
padding-top: 50px;
text-align: center;
}
.about-section .image-column .image-box .alphabet-img {
position: relative;
display: inline-block;
}
.about-section .image-column .image-box .alphabet-img img{
  height: auto;
}
.about-section .image-column .image img {
display: none;
}
.about-section .content-column .inner-column, .about-section .image-column .image-box {
padding-top: 50px;
text-align: center;
margin: 0;
}
.about-section2 .content-column2 .inner-column2 {
padding-top: 50px;
text-align: center;
margin: 0;
}
.about-section .content-column .content-box {
padding-left: 15px;
padding-right: 15px;
border: 2px solid #dddddd;
text-align: left;
}
.about-section2 .content-column2 .content-box2 {
padding-left: 15px;
padding-right: 15px;
border: 2px solid #dddddd;
text-align: left;
}
.image-column .title-box h2 br {
display: none;
}
}
@media only screen and (max-width: 599px){
.about-section .content-column .content-box .title h2 {
font-size: 22px;
line-height: 1.3em;
}
.about-section2 .content-column2 .content-box2 .title2 h2 {
font-size: 22px;
line-height: 1.3em;
}
}
.about-section .content-column .content-box .title {
position: relative;
margin-bottom: 35px;
}
.about-section2 .content-column2 .content-box2 .title2 {
position: relative;
margin-bottom: 35px;
}
.about-section .content-column .content-box .title h2 {
position: relative;
display: block;
font-size: 30px;
line-height: 42px;
color: #222222;
font-weight: 500;
padding-bottom: 35px;
}
.about-section2 .content-column2 .content-box2 .title2 h2 {
position: relative;
display: block;
font-size: 30px;
line-height: 42px;
color: #222222;
font-weight: 500;
padding-bottom: 35px;
}
.about-section .content-column .content-box .title h2:before {
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 45px;
background-color: #ffb600;
content: "";
}
.about-section .content-column .content-box .text {
position: relative;
display: block;
font-size: 14px;
line-height: 28px;
color: #777777;
margin-bottom: 45px;
}
.about-section2 .content-column2 .content-box2 .title2 h2:before {
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 45px;
background-color: #ffb600;
content: "";
}
.about-section2 .content-column2 .content-box2 .text2 {
position: relative;
display: block;
font-size: 14px;
line-height: 28px;
color: #777777;
margin-bottom: 27px;
}
.about-section .content-column .content-box .link-box {
position: relative;
}
.about-section .content-column .content-box .link-box a {
font-weight: 700;
display: inline-block;
padding: 5px 20px;
border: 2px #2c97ea solid;
border-radius: 20px;
font-size: 12px;
color: #3e4095;
}
.about-section .content-column .content-box .link-box a:hover {
background: linear-gradient(to right, #ffb600, #3e4095); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border: 2px #0000 solid;
color: #fff;
}
.btn-style-one:before {
position: absolute;
top: -1px;
right: -1px;
left: -1px;
bottom: -1px;
content: "";
border-radius: 50px;
border: 2px solid #222222;
transition: all 300ms ease;
opacity: 0;
}

.bg-about{
position: relative;
max-width: 1720px;
margin: 0 auto;
background-image: url('../v2/theme3/images/aboutCommited.html');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 0px 0;
z-index: -2;
}

.bg-about:before{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #222222;
opacity: 0.90;
content: "";
z-index: -1;
}
.bg-about2{
background: white;
}
.bg-why-choose {
background-image: url('../images/about/11.jpg');
background-size: cover;
/* background-attachment: fixed; */
height: 100vh;
box-shadow: 0 8px 15px rgb(0 0 0 / 10%);
}
/***

====================================================================
    Video Section
====================================================================

***/

.video-section{
position: relative;
}

.video-section .outer-box{
position: relative;
max-width: 1720px;
margin: 0 auto;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 100px 0;
}

.video-section .outer-box:before{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #222222;
opacity: 0.90;
content: "";
}

.video-section .content-column{
position: relative;
order: 12;
}

.video-section .content-column .inner-column{
position: relative;
padding: 35px 35px 0px 40px;
}

.video-section .content-column .sec-title{
margin-bottom: 22px;
}

.video-section .content-column .title{
position: relative;
display: block;
font-size: 18px;
line-height: 25px;
color: #ff8a00;
font-weight: 400;
margin-bottom: 30px;
}
@media only screen and (max-width: 599px){
.video-section .content-column .title{
    text-align: center;
}
}
.video-section .content-column .text{
position: relative;
display: block;
font-size: 14px;
line-height: 28px;
color: #ffffff;
font-weight: 400;
}

.video-section .video-column .inner-column{
position: relative;
padding-left: 0px;
}

.video-section .video-column .video-box{
position: relative;
}

.video-section .video-column .video-box .image{
position: relative;
margin-bottom: 0;
}

.video-section .video-column .video-box .image img{
display: block;
width: 100%;
height: auto;
}

.video-section .video-column .video-box .link{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
text-align: center;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}

.video-section .video-column .video-box .link:hover{
background-color: rgba(0,0,0,0.50);
}

.video-section .video-column .video-box .link .icon{
position: absolute;
left: 50%;
top: 50%;
height: 60px;
width: 60px;
background-color: #333333;
padding-left: 4px;
font-size: 18px;
color: #ff8a00;
border-radius: 50%;
text-align: center;
line-height: 60px;
margin-top: -30px;
margin-left: -30px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}

.video-section .video-column .video-box .link:hover .icon{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}

/*== Video Section Style Two ==*/

.video-section.style-two .outer-box{
padding-bottom: 155px;
}

.video-section.style-two .outer-box:before{
display: none;
}

.video-section.style-two .content-column .text{
color: #777777;
}

<!-- SERVICE SECTION -->

/***
====================================================================
        Fun Fact And Features
====================================================================
***/
.fact-counter{
position: relative;
}

.fact-counter .counter-column{
position:relative;
margin-bottom:40px;
}

.fact-counter .count-box{
position: relative;
font-size: 60px;
line-height: 1em;
color: #ffffff;
font-weight: 700;
padding: 20px 0;
padding-left: 20px;
}

.fact-counter .count-box:before{
position: absolute;
left: 0;
top: 0;
height: 100px;
width: 50px;
border: 2px solid #ffb600!important;
content: "";
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-ms-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
}

.fact-counter .count-box:hover:before{
-webkit-box-shadow: #ffb600 0 0px 0px 40px inset!important;
-moz-box-shadow: #ffb600 0 0px 0px 40px inset!important;
-ms-box-shadow: #ffb600 0 0px 0px 40px inset!important;
-o-box-shadow: #ffb600 0 0px 0px 40px inset!important;
box-shadow: #ffb600 0 0px 0px 40px inset!important;
}

.fact-counter .count-box .count{
position: relative;
float: left;
margin-right: 15px;
}

.fact-counter .count-box .count-text{
position: relative;
display: inline-block;
font-size: 60px;
line-height: 1em;
color: #000;
font-weight: 700;
}

.fact-counter .count-box .counter-title{
position: relative;
display: flex;
font-size:15px;
line-height: 1.2em;
font-weight:bold;
color:#ffb600!important;
padding: 9px 0;
font-family: "Rubik", sans-serif;
}
.padding-about2 {
background: url('../v2/theme3/images/login-background/login2.html');
display: block;
padding-top: 60px;
}
.d-flex {
display: flex;
}
.map {
height: 500px;
padding-top: 20px;
}
.map-text {
text-orientation: upright;
writing-mode: vertical-lr;
}
.map-text::first-letter {
color: #ffb600;
font-weight: bold;
}
@media only screen and (max-width: 599px){
.service-heading2 {
    padding-bottom: 20px;
    font-size: 30px;
}
.map-text{
text-orientation: upright;
writing-mode: horizontal-tb;
text-align: center;
padding-bottom: 20px;
}
.map {
height: unset;
}

.text-2 {
padding-left: 0px;
}
@media only screen and (max-width: 736px){

.founder2-right {
left: 211px!important;
width: 20%!important;
top: -57px!important;
}
.founder2-left {
background: #eaf1f8;
padding: 50px;
box-shadow: 11px 11px 15px rgb(0 0 0 / 10%);
right: 0px!important;
}

}

.founder2-bottom[data-v-f2b6376c] {
display: none;
}
.founder2-bottom-2[data-v-f2b6376c] {
display: none;
}
.founder2-bottom-3[data-v-f2b6376c] {
display: none;
}
.founder2-right[data-v-f2b6376c] {
left: 5px;
}
.founder2-img{
height: 130px;
box-shadow: unset;
}
.founder2-img[data-v-648c8d9a] {
height: 140px;
box-shadow: unset;
}
.guide[data-v-f2b6376c] {
padding-right: 0px;
padding-left: 0px;
}
.guide-title[data-v-f2b6376c] {
color: white;
text-align: center;
font-size: 25px;
}
}
.founder2-left{
background: #eaf1f8;
padding: 50px;
box-shadow: 11px 11px 15px rgb(0 0 0 / 10%);
right: -55px;
}
.founder2-right {
left: 10px;
width: 30%;
top: 36px;
}
.founder2-img {
/* box-shadow: 11px 11px 15px rgb(0 0 0 / 10%); */
}
.founder2-bottom {
top: -55px;
left: 40px;
}
.founder2-bottom-2 {
top: -75px;
left: 40px;
}
.founder2-bottom-3 {
top: -75px;
left: 40px;
}
.founder2-heading1 {
text-transform: unset;
padding-bottom: 20px;
color: black;
}
.service-heading1 {
text-transform: unset;
font-size: 18px;
font-family: unset;
padding-bottom: 20px;
}
.m-top {
margin-top: 20px;
}
.service-area {
bottom: 190px!important;
}
@media only screen and (max-width: 599px){
.service-area {
    bottom: 113px!important;
    font-size: 12px!important;
}
}
@media only screen and (max-width: 736px){
.service-area {
    bottom: 113px!important;
    font-size: 12px!important;
}
}

.card2 {
margin: 4.5%;
padding: 8.5%;
color: #171717;
border-radius: 5px;
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;

box-shadow: -2px 4px 7px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.5s cubic-bezier(.25,.8,.25,1);
}

.card2:hover {
background-color: #eaf1f8;
/* box-shadow: -2px 4px 7px #171717, 0 1px 2px #171717; */
transform: translateY(-5px);;
}

<---SAMPLE SECTION--->

.about-image:last-child {
    padding-bottom: 40px!important;
}
.presentation-heading{
    clip-path: polygon(100% 0%, 100% 74%, 49% 96%, 0 75%, 0 0);
}
.shadow {
    box-shadow: 11px 11px 15px rgb(0 0 0 / 10%);
}
.presentation-heading:after {
    
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: #fff;
    margin: 0 auto;
    margin-top: 15px;
    border-radius: 3px;

}
.header-title{
    color: #cdd0d7!important;
    font-family: sans-serif;
    padding-top: 15px;
    letter-spacing: 1px;
}

.container1 {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 800px;
    height: 470px;
    border: 1px solid #ffb600;
    background: #fff;
    border-radius: 20px;
    margin: 20px;
}
.container1 .imgBx {
    position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
top: 0px;
left: -1px;
border-radius: 20px;
height: 100%;
background: #ffb60057;
transition: all 0.3s ease-in-out;
}


.container1 .imgBx img {
    position: relative;
    width: auto;
    height: 387px;
    transition: transform .5s ease;
}
.container1 .imgBx img:hover  {
    transform: scale(1.1);
  }

.container1 .details {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    padding: 40px;
}

.container1 .details h2{
    margin: 0;
    padding: 0;
    font-size: 2.4em;
    line-height: 1em;
    color: #444;
}

.container1 .details h2 span {
    font-size: 0.4em;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
}

.container1 .details p {
    max-width: 85%;
    margin-left: 15%;
    color: #333;
    font-size: 15px;
    margin-bottom: 36px;
}

.container1 .details h3 {
    margin: 0;
    padding: 0;
    font-size: 2.5em;
    color: #a2a2a2;
    float: left;
}
.container1 .details button {

        font-weight: 700;
        display: inline-block;
        padding: 9px 28px;
        margin-top: 25px;
        text-transform: uppercase;
        letter-spacing: 2px;
        border: 2px #2c97ea solid;
        border-radius: 25px;
        font-size: 12px;
        color: #3e4095;
}
    .container1 .details button:hover {
        background: linear-gradient(to right, #ffb600, #3e4095); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border: 2px #0000 solid;
        color: #fff;
    }
    


.product-colors span {
    width: 26px;
    height: 26px;
    top: 7px;
    margin-right: 12px;
    left: 10px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    display: inline-block;
}

.black {
    background: #000;
}

.red {
    background: #D5212E;
}

.orange {
    background: #F18557;
}

.product-colors .active:after{
    content: "";
    width: 36px;
    height: 36px;
    border: 2px solid #000;
    position: absolute;
    border-radius: 50%;
    box-sizing: border-box;
    left: -5px;
    top: -5px;
}

/* responsive */
@media (max-width: 1080px) {
    .container1 {
        height: auto;
        width: auto;
    }
    .container1 .imgBx {
        padding: 40px;
        box-sizing: border-box;
        width: 100% !important;
        height: auto;
        text-align: center;
        overflow: hidden;
    }


    .container1 .imgBx img {
        left: initial;
        max-width: 100%;
        height: auto;
        transition: transform .5s ease;
    }
    .container1 .imgBx img:hover  {
        transform: scale(1.1);
      }
    .details {
        width: 100% !important;
        height: auto;
        padding: 20px;
    }
    .container1 .details p {
        margin-left: 0;
        max-width: 100%;
    }
}
.top-desc{
    margin-top: 10px;
}

.team-sec{
    margin-top: 20px;
    margin-bottom: 60px;
}
.team-classic {
    position: relative;
    overflow: hidden;
    text-align: left;
    max-width: 370px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
}
.team-classic-figure {
    display: block;
}
.team-classic-figure img {
    width: 100%;
    filter: grayscale(100%);
    transition: all .3s ease;
}

.team-classic-figure img:hover{
    filter: grayscale(0);
    transform: scale(1.1);
}
.team-classic-caption {
    position: absolute;
    overflow: hidden;
    left: 0;
    bottom: 27px;
    width: 80%;
    min-width: 300px;
    margin-left: -25px;
    padding: 15px 20px 15px 50px;
    transition: all .3s ease;
    z-index: 1;
}
.team-classic-caption::before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(17, 17, 17, 0.5);
    transform: skew(
10deg
);
    transform-origin: 50% 100%;
    z-index: -1;
}
.team-classic-name {
    color: #ffffff;
}
.team-classic-name a {
    color: inherit;
}
.team-classic-status {
line-height: 1.5;
color: rgba(255, 255, 255, 0.6);
letter-spacing: .025em;
}
.newsletter form button {
width: 100px;
height: 44px;
font-weight: 500;
color: #fff;
position: absolute;
top: 51px;
right: 118px;
border-radius: 30px 0 0 30px;
background-color: #ffb600;
border-color: #ffb600;
}
.newsletter form input {
width: 90%;
height: 43px;
border: none;
background: #fff;
padding: 3px 102px 0 12px;
font-size: 13px;
}
@media (max-width: 736px){
.quote-creative {
margin-bottom: 65px!important;
}
}
.quote-creative {
text-align: center;
margin-top: 45px;
padding: 0 15px 30px;
letter-spacing: .025em;
background: #ffffff;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.15));
}
.quote-creative-figure {
display: inline-block;
margin-top: -42px;
border: 15px solid #ffffff;
border-radius: 50%;
}
.img-circles {
border-radius: 50%;
}
.quote-creative-cite {
margin-top: 18px;
}
.quote-creative-cite {
color: #3c6a36;
font-weight: 400;
}
.testimonial-sec{
margin-top: -23px;
margin-bottom: 27px;
}
.row-xxl{
margin-top: 15px;
margin-bottom: 15px;
}
.box-pricing {
position: relative;
overflow: hidden;
max-width: 370px;
margin-left: auto;
margin-right: auto;
padding: 70px 15px 0;
border-radius: 8px;
box-shadow: 0 0 10px 0 rgb(0 0 0 / 17%);
}
.box-pricing-body {
max-width: 260px;
margin-left: auto;
margin-right: auto;
}
.divider-35 {
margin: 35px 0;
}

.divider {
font-size: 0;
line-height: 0;
height: 1px;
width: 100%;
background: #d7d7d7;
}
.box-pricing-list > li.active {
color: #151515;
}

.box-pricing-list > li {
text-indent: -25px;
padding-left: 25px;
color: #9b9b9b;
}
.box-pricing-list > li + li {
margin-top: 14px;
}
.box-pricing-list > li.active::before {
color: #3c6a36;
}

.box-pricing-list > li::before {
position: relative;
display: inline-block;
content: '\f00c';
left: 0;
top: 0;
width: 25px;
font-size: 14px;
line-height: 1;
text-indent: 0;
font-family: "FontAwesome";
color: #9b9b9b;
}
.box-pricing-button {
margin-top: 40px;
margin-left: -15px;
margin-right: -15px;
}
.box-pricing .button {
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}

.button-lg {
padding: 20px 33px 18px;
line-height: 1.33;
}
.button-gray-100{

background: linear-gradient(to right, #ffb600, #3e4095); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border: 2px #0000 solid;
color: #fff;
}
.button-gray-100:hover {
color: #fff;
background-color: #ffb600;
border-color: #ffb600!important;
}
.button-block {
display: block;
width: 100%;
}
.button {
position: relative;
overflow: hidden;
display: inline-block;
min-width: 200px;
padding: 19px 32px 17px;
font-size: 14px;
line-height: 1.34;
border: 2px solid;
font-weight: 500;
letter-spacing: 0.075em;
text-transform: uppercase;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
cursor: pointer;
vertical-align: middle;
user-select: none;
transition: 250ms all ease-in-out;
}
.product-img{
width: auto;
height: 246px;
}
.product-img img:hover{
width: auto;
height: 246px;
transition: all .3s ease;
}
.box-pricing-caption{

margin-top: -64px;
margin-left: -54px;
}
.map{
margin-bottom: 132px;
}
.gallery-sec{
padding: 20px;
width: 1280px;
margin: 40px auto;
}
.gallery-sec ul{
display: flex;
margin-bottom: 10px;
}
.gallery-sec ul li{
list-style: none;
background: #eee;
padding: 8px 20px;
margin: 5px;
letter-spacing: 1px;
cursor: pointer;
}
.gallery-sec ul li.active{
background: #03a9f4;
color: #fff;
}
.gallery-product{
display: flex;
flex-wrap: wrap;
}
.gallery-product .itemBox{
position: relative;
width: 300px;
height: 300px;
margin: 5px;
}
.gallery-product .itemBox img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.team-classic1 {
position: relative;
overflow: hidden;
text-align: left;
max-width: 370px;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
}
.team-classic-figure1 {
display: block;
}
.team-classic-figure1 img {
width: 100%;
transition: 1s;
transform: scale(1.2);
}

.team-classic-figure1 img:hover{
transition: 1s;
transform: scale(1);
}
@keyframes rotate {
100% {
-webkit-transform: rotate3d(1,0,0, 360deg);
transform: rotate3d(1,0,0, 360deg);
}
}

@keyframes rotate2 {
100% {
-webkit-transform: rotate3d(0,1,0, -360deg);
transform: rotate3d(0,1,0, -360deg);
}
}

@keyframes rotate3 {
100% {
-webkit-transform: rotate3d(1,0,1, -360deg);
transform: rotate3d(1,0,1, -360deg);
}
}

@keyframes rotate4 {
100% {
-webkit-transform: rotate3d(1,1,1, -360deg);
transform: rotate3d(1,1,1, -360deg);
}
}

.ring {
width: 44rem;
height: 44rem;
border: 6px solid #1F1F1F!important;
border-radius: 50%;
animation: rotate 5s linear infinite;
position: absolute;
}

.two {
animation: rotate2 5s 1s linear infinite;
}

.three {
animation: rotate3 5s  2.5s linear infinite;
}

.four {
animation: rotate4 5s 1s linear infinite;
}

@media only screen and (min-width: 375px) and (max-width: 736px)  and (min-width: 320px) and (max-width: 568px){
.why-font-resp{
font-size: 18px!important;
}
.img-logo-resp{
width: auto!important;
height: 165px!important;
margin-left: 6px!important;
}
.product-desc-resp{
padding-left: 12px!important;
padding-right: 12px!important;
text-align: justify!important;
}
.gallery-product{
display: block!important;
}
.gallery-product .itemBox{
position: relative!important;
width: 300px!important;
height: 300px!important;
margin: 14px auto!important;
}
.gallery-sec{
padding: 15px!important;
width: auto!important;
margin: 0!important;
}
.gallery-sec ul li{
padding: 8px 8px!important;
margin: 6px!important;
}
.ring {
width: 18rem;
height: 18rem;
left: 67px;
}
.newsletter form button {
width: 147px;
height: 44px;
font-weight: 500;
color: #fff;
position: absolute;
top: 51px;
right: 53px;
border-radius: 30px 0 0 30px;
background-color: #ffb600;
border-color: #ffb600;
}
}
@media only screen  and (min-width: 768px) and (max-width: 1024px){

.gallery-product .itemBox {
position: relative;
width: 345px!important;
height: 300px!important;
margin: 10px!important;
}
.gallery-product {
display: flex!important;
flex-wrap: wrap!important;
max-width: 65%;
}
.row-test {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.test-flexible {
max-width: 50%;
flex: 0 0 50%;
-webkit-box-flex: 0;
}
.mobi-img {
position: absolute;
left: 47%;
}
.mobi-particle{
display: block;
width: 370px;
position: relative;
height: 38px;
top: 55px;
}
.newsletter form button {
width: 100px;
height: 44px;
font-weight: 500;
color: #fff;
position: absolute;
top: 51px;
right: 63px;
border-radius: 30px 0 0 30px;
background-color: #ffb600;
border-color: #ffb600;
}

}
@media only screen  and (min-width: 1024px) and (max-width: 1366px){

.gallery-product .itemBox {
position: relative;
width: 309px!important;
height: 300px!important;
margin: 10px!important;
}
.gallery-product {
display: flex;
flex-wrap: wrap;
max-width: 90%;
}
.newsletter form button {
width: 100px;
height: 44px;
font-weight: 500;
color: #fff;
position: absolute;
top: 51px;
right: 69px;
border-radius: 30px 0 0 30px;
background-color: #ffb600;
border-color: #ffb600;
}
}
@media only screen  and (min-width: 375px) and (max-width: 667px){
.gallery-product {
display: block!important;
min-width: 65%;
}
.gallery-product .itemBox {
position: relative!important;
width: 340px!important;
height: 300px!important;
margin: 14px auto!important;
}
.ring {
width: 22rem!important;
height: 22rem!important;
left: 50px!important;
}

}
@media only screen  and (min-width: 375px) and (max-width: 812px){
.gallery-product {
display: block;
min-width: 65%;
}

.ring {
width: 22rem!important;
height: 22rem!important;
left: 43px!important;
}


}
@media only screen  and (min-width: 414px) and (max-width: 736px){
.gallery-product {
display: block!important;
min-width: 65%;
}
.gallery-product .itemBox {
position: relative!important;
width: 370px!important;
height: 300px!important;
margin: 14px auto!important;
}
.ring {
width: 22rem!important;
height: 22rem!important;
left: 69px!important;
}

}
@media only screen  and (min-width: 320px) and (max-width: 568px){
.why-font-resp{
font-size: 18px!important;
}
.img-logo-resp{
width: auto!important;
height: 200px!important;
margin-left: 6px!important;
}
.product-desc-resp{
padding-left: 12px!important;
padding-right: 12px!important;
text-align: justify!important;
}
.gallery-product{
display: block!important;
min-width: 65%;
}

.gallery-sec{
padding: 15px!important;
width: auto!important;
margin: 0!important;
}
.gallery-sec ul li{
padding: 8px 7px!important;
margin: 5px!important;
}
.ring {
width: 15rem;
height: 15rem;
left: 55px;
}
.newsletter form button {
    width: 147px;
    height: 44px;
    font-weight: 500;
    color: #fff;
    position: absolute;
    top: 51px;
    right: 48px;
    border-radius: 30px 0 0 30px;
    background-color: #ffb600;
    border-color: #ffb600;
}
}

.container-gall
{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 40px 0;
}

.container-gall .box
{
position: relative;
width: 320px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
margin: 40px 30px;
transition: 0.5s;
}

.container-gall .box::before
{
content:' ';
position: absolute;
top: 0;
left: 50px;
width: 50%;
height: 100%;
text-decoration: none;
background: #fff;
border-radius: 8px;
transform: skewX(15deg);
transition: 0.5s;
}

.container-gall .box::after
{
content:'';
position: absolute;
top: 0;
left: 50;
width: 50%;
height: 100%;
background: #fff;
border-radius: 8px;
transform: skewX(15deg);
transition: 0.5s;
filter: blur(30px);
}

.container-gall .box:hover:before,
.container-gall .box:hover:after
{
transform: skewX(0deg);
left: 20px;
width: calc(100% - 90px);

}

.container-gall .box:nth-child(1):before,
.container-gall .box:nth-child(1):after
{
background: linear-gradient(315deg, #ffbc00, #ff0058)
}

.container-gall .box:nth-child(2):before,
.container-gall .box:nth-child(2):after
{
background: linear-gradient(315deg, #03a9f4, #ff0058)
}

.container-gall .box:nth-child(3):before,
.container-gall .box:nth-child(3):after
{
background: linear-gradient(315deg, #4dff03, #00d0ff)
}

.container-gall .box span
{
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
pointer-events: none;
}

.container-gall .box span::before
{
content:'';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
opacity: 0;
transition: 0.1s;  
animation: animate 2s ease-in-out infinite;
box-shadow: 0 5px 15px rgba(0,0,0,0.08)
}

.container-gall .box:hover span::before
{
top: -50px;
left: 50px;
width: 100px;
height: 100px;
opacity: 1;
}

.container-gall .box span::after
{
content:'';
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
opacity: 0;
transition: 0.5s;
animation: animate 2s ease-in-out infinite;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
animation-delay: -1s;
}

.container-gall .box:hover span:after
{
bottom: -50px;
right: 50px;
width: 100px;
height: 100px;
opacity: 1;
}

@keyframes animate
{
0%, 100%
{
transform: translateY(10px);
}

50%
{
transform: translate(-10px);
}
}

.container-gall .box .content
{
position: relative;
left: 0;
padding: 20px 40px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border-radius: 8px;
z-index: 1;
transform: 0.5s;
color: #fff;
}

.container-gall .box:hover .content
{
left: -25px;
padding: 60px 40px;
}

.container-gall .box .content h2
{
font-size: 2em;
color: #fff;
margin-bottom: 10px;
}

.container-gall .box .content p
{
font-size: 1.1em;
margin-bottom: 10px;
line-height: 1.4em;
}

.container-gall .box .content a
{
display: inline-block;
font-size: 1.1em;
color: #111;
background: #fff;
padding: 10px;
border-radius: 4px;
text-decoration: none;
font-weight: 700;
margin-top: 5px;
}

.container-gall .box .content a:hover
{
background: #ffcf4d;
border: 1px solid rgba(255, 0, 88, 0.4);
box-shadow: 0 1px 15px rgba(1, 1, 1, 0.2);
}
/* Projects area
================================================== */
/* Project filter nav */
.shuffle-btn-group {
    display: inline-block;
    margin: 20px 0 50px;
    width: 100%;
    border-bottom: 3px solid #ffb600;
  }
  
  .shuffle-btn-group label {
    display: inline-block;
    color: #212121;
    font-size: 14px;
    padding: 6px 25px;
    padding-top: 10px;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s;
    cursor: pointer;
    margin: 0;
  }
  
  .shuffle-btn-group label.active {
    color: #212121;
    background: #ffb600;
  }
  
  .shuffle-btn-group label input {
    display: none;
  }
  
  /* Project shuffle Item */
  /* .shuffle-item {
    padding: 0!important;
  } */
  .main-container{
      margin-top: 50px;
      margin-bottom: 50px;
  }
  .shuffle-item .project-img-container {
    position: relative;
    overflow: hidden;
    /* border-radius: 25px; */
    margin: 6px;
    border: 1px solid #1f1f1f;
  }
  
  .shuffle-item .project-img-container img {
    -webkit-transform: perspective(1px) scale3d(1.1, 1.1, 1);
            transform: perspective(1px) scale3d(1.1, 1.1, 1);
    transition: all 400ms;
        max-width: 100%;
    height: 330px;
}
  
  
  .shuffle-item .project-img-container:hover img {
    -webkit-transform: perspective(1px) scale3d(1.15, 1.15, 1);
            transform: perspective(1px) scale3d(1.15, 1.15, 1);
  }
  .img-product{
    max-width: 100%;
    height: auto;
  }
  .shuffle-item .project-img-container:after {
    opacity: 0;
    position: absolute;
    content: '';
    top: 0;
    right: auto;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    transition: all 400ms;
  }
  
  .shuffle-item .project-img-container:hover:after {
    opacity: 1;
  }
  
   .gallery-icon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    padding: 5px 12px;
    background: #ffb600;
    color: #fff;
    opacity: 0;
    -webkit-transform: perspective(1px) scale3d(0, 0, 0);
            transform: perspective(1px) scale3d(0, 0, 0);
    transition: all 400ms;
  }
  
  .shuffle-item .project-img-container:hover .gallery-popup .gallery-icon {
    opacity: 1;
    -webkit-transform: perspective(1px) scale3d(1, 1, 1);
            transform: perspective(1px) scale3d(1, 1, 1);
  }

  
  .shuffle-item .project-img-container .project-item-info {
    position: absolute;
    top: 50%;
    margin-top: -10%;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 30px;
    z-index: 1;
  }
  
  .shuffle-item .project-img-container .project-item-info-content {
    opacity: 0;
    -webkit-transform: perspective(1px) translate3d(0, 15px, 0);
            transform: perspective(1px) translate3d(0, 15px, 0);
    transition: all 400ms;
  }
  
  .shuffle-item .project-img-container .project-item-info-content .project-item-title {
    font-size: 20px;
  }
  
  .shuffle-item .project-img-container .project-item-info-content .project-item-title a {
    color: #fff;
  }
  
  .shuffle-item .project-img-container .project-item-info-content .project-item-title a:hover {
    color: #ffb600;
  }
  
  .shuffle-item .project-img-container .project-item-info-content .project-cat {
    background: #ffb600;
      display: inline-block;
      padding: 5px 12px;
      font-weight: bolder;
      margin-top: 15px;
      color: #fff;
      font-size: 15px;
    text-transform: uppercase;
  }
  
  .shuffle-item .project-img-container:hover .project-item-info-content {
    opacity: 1;
    -webkit-transform: perspective(1px) translate3d(0, 0, 0);
            transform: perspective(1px) translate3d(0, 0, 0);
  }
  
  .general-btn .btn-primary:hover {
    background: #000;
  }
  
  /* Project owl */
  .owl-theme.project-slide {
    margin-top: 60px;
  }
  
  .project-slide .item {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  
  .project-item img {
    width: 100%;
    max-width: auto;
    transition: all 0.6s ease 0s;
  }
  
  .project-item:hover img {
    -webkit-transform: scale(1.1, 1.1);
            transform: scale(1.1, 1.1);
  }
  
  .project-item-content {
    position: absolute;
    bottom: -1px;
    padding: 15px 20px;
    width: 100%;
    background: #ffb600;
  }
  
  .owl-theme.project-slide .owl-nav > div {
    position: absolute;
    top: -70px;
    right: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  
  .project-slide .owl-nav > div {
    display: inline-block;
    margin: 0 2px;
    font-size: 20px;
    background: #ffb600;
    color: #fff;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  
  .owl-theme.project-slide .owl-nav > .owl-prev {
    right: 35px;
    left: auto;
  }
  
  /* Projects Single page */
  .project-title {
    font-size: 30px;
  }
  
  .project-info-label {
    color: #303030;
    font-weight: 700;
    font-size: 14px;
  }
  .arrow-prod {
    color: #ffb600;
    margin-right: 7px;
    font-size: 15px;
}
.column-title {
    margin: 0 0 40px;
}
.mrt-0 {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}
  .project-info-content {
    font-size: 12px;
  }
  
  .project-info li {
    margin-bottom: 5px;
  }
  .project-info {
    margin-top: 10px;
  }
  .project-link {
    margin-top: 15px;
  }
  .mt-lg-5, .my-lg-5 {
    margin-top: 3rem!important;
}
.ring {
    width: 44rem;
    height: 44rem;
    border: 6px solid #ffb600;
    border-radius: 50%;
    animation: rotate 5s linear infinite;
    position: absolute!important;
    top: -5px;
  }
  
  .two {
    animation: rotate2 5s 1s linear infinite;
  }
  
  .three {
    animation: rotate3 5s  2.5s linear infinite;
  }
  
  .four {
    animation: rotate4 5s 1s linear infinite;
  }

  @media only screen and (min-width: 375px) and (max-width: 736px)  and (min-width: 320px) and (max-width: 568px){
    .ring {
        width: 18rem;
        height: 18rem;
        left: 67px;
        }
  }
  @media only screen  and (min-width: 375px) and (max-width: 667px){
    .ring {
        width: 22rem!important;
        height: 22rem!important;
        left: 50px!important;
    }
  }
  @media only screen  and (min-width: 375px) and (max-width: 812px){
    .ring {
        width: 22rem!important;
        height: 22rem!important;
        left: 43px!important;
    }
  }
  @media only screen  and (min-width: 414px) and (max-width: 736px){
    .ring {
        width: 22rem!important;
        height: 22rem!important;
        left: 69px!important;
    }
  }
  @media only screen  and (min-width: 320px) and (max-width: 568px){
    .ring {
        width: 15rem;
        height: 15rem;
        left: 55px;
    }
  }
  

  

  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flip-card {
    perspective: 1000px;
    cursor: pointer;
    position: relative;
  }
  .flip-card .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    box-shadow: 0px 0px 10px 1px #0000000a;
    border-radius: 10px;
  }
  .flip-card .flip-card-inner .flip-card-front,
  .flip-card .flip-card-inner .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    padding: 30px 20px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .flip-card .flip-card-inner .flip-card-front {
    background: #1f1f1f;
  }
  .flip-card .flip-card-inner .flip-card-back {
    transform: rotateY(180deg);
    background: #1f1f1f;
    display: flex;
    align-items: center;
  }
  .flip-card .flip-card-inner .flip-card-back p {
    color: white;
  }
  .flip-card .flip-card-inner .page-corner {
    color: white;
    position: absolute;
    bottom: 0%;
    right: 0%;
    width: 57px;
    height: 57px;
    border-top: 57px #1f1f1f;
    border-right: 57px solid transparent;
    border-radius: 10px 0px 0px 0px;
    background: #1f1f1f;
  }
  .flip-card .flip-card-inner .page-corner i {
    top: 0;
    left: 50%;
    margin-top: 10px;
    position: absolute;
    margin-left: 10px;
    font-size: 16px;
    opacity: 0.7;
  }
  .flip-card .flip-card-inner .flip-card-front:after {
    content: "";
    position: absolute;
    bottom: 0%;
    right: 0%;
    width: 0px;
    height: 0px;
    border-bottom: 78px solid #ffb600;
    border-left: 78px solid transparent;
    margin-bottom: -10px;
    margin-right: -10px;
  }
  
  .flip-card.active .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flip-card:hover .flip-card-front {
    background: #1f1f1f;
  }
  
  h1 {
    font-size: 30px;
    font-family: "Shrikhand", cursive;
    color: #f8f8f8;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0px 0px 30px 0px;
    color: #1f1f1f;
    text-align: center;
  }
  
  .steps {
    display: flex;
    max-width: 700px;
    margin: auto;
  }
  .steps .steps_one,
  .steps .steps_two {
    display: grid;
    grid-template-rows: repeat(6, 2fr);
    flex: 1 0 auto;
  }
  .steps .steps_one .step,
  .steps .steps_two .step {
    grid-row: span 2;
    margin: 15px 0px;
    height: 190px;
  }
  .steps .steps_one h4,
  .steps .steps_two h4 {
    margin: 0px;
    line-height: 100%;
    font-family: "Shrikhand", cursive;
    color: #f8f8f8;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 25px;
  }
  .steps .steps_one p,
  .steps .steps_two p {
    margin-bottom: 0;
    font-size: font-size("small");
    font-size: 17px;
    font-weight: 600;
  }
  .steps .steps_one img,
  .steps .steps_two img {
    width: auto;
    margin: auto auto 15px auto;
    max-height: 95px;
    max-width: 40%;
  }
  .steps .steps_one {
    border-right: 2px solid #ffb600;
    padding: 1em 2em 1em 1em;
  }
  .steps .steps_one .step_number {
    left: 100%;
    margin-left: 21px;
  }
  .steps .steps_two {
    padding: 1em 1em 1em 2em;
  }
  .steps .steps_two #second {
    grid-row-start: 2;
    grid-row-end: 4;
  }
  .steps .steps_two #fourth {
    grid-row-start: 4;
    grid-row-end: 6;
  }
  
  .steps .steps_two .step_number {
    right: 100%;
    margin-right: 21px;
  }
  
  .step_number {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: black;
    background: #1f1f1f;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: #f8f8f8 7px solid;
    box-shadow: 0px 0px 1px 1px #ffb600;
  }
  
  .flip-card:hover .step_number {
    border: #1f1f1f 7px solid;
    background: #f8f8f8;
  }

  .testim {
		width: 100%;
}

.testim .wrap {
    position: relative;
    width: 100%;
    max-width: 1020px;
    padding: 40px 20px;
    margin: auto;
}

.testim .arrow {
    display: block;
    position: absolute;
    color: #ffb600;
    cursor: pointer;
    font-size: 2em;
    top: 50%;
    -webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
    -webkit-transition: all .3s ease-in-out;    
    -ms-transition: all .3s ease-in-out;    
    -moz-transition: all .3s ease-in-out;    
    -o-transition: all .3s ease-in-out;    
    transition: all .3s ease-in-out;
    padding: 5px;
    z-index: 22222222;
}

.testim .arrow:before {
		cursor: pointer;
}

.testim .arrow:hover {
    color: #ffb600;
}
    

.testim .arrow.left {
    left: 10px;
}

.testim .arrow.right {
    right: 10px;
}

.testim .dots {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 60px;
    left: 0;
    display: block;
    z-index: 3333;
		height: 12px;
}

.testim .dots .dot {
    list-style-type: none;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #eee;
    margin: 0 10px;
    cursor: pointer;
    -webkit-transition: all .5s ease-in-out;    
    -ms-transition: all .5s ease-in-out;    
    -moz-transition: all .5s ease-in-out;    
    -o-transition: all .5s ease-in-out;    
    transition: all .5s ease-in-out;
		position: relative;
}

.testim .dots .dot.active,
.testim .dots .dot:hover {
    background: #ffb600;
    border-color: #ffb600;
}

.testim .dots .dot.active {
    -webkit-animation: testim-scale .5s ease-in-out forwards;   
    -moz-animation: testim-scale .5s ease-in-out forwards;   
    -ms-animation: testim-scale .5s ease-in-out forwards;   
    -o-animation: testim-scale .5s ease-in-out forwards;   
    animation: testim-scale .5s ease-in-out forwards;   
}
    
.testim .cont {
    position: relative;
		overflow: hidden;
}

.testim .cont > div {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 0 70px 0;
    opacity: 0;
}

.testim .cont > div.inactive {
    opacity: 1;
}
    

.testim .cont > div.active {
    position: relative;
    opacity: 1;
}
    

.testim .cont div .img img {
    display: block;
    width: 100px;
    height: 100px;
    margin: auto;
    border-radius: 50%;
}

.testim .cont div h2 {
    color: #ffb600;
    font-size: 1em;
    margin: 15px 0;
}

.testim .cont div p {
    font-size: 1.15em;
    color: #000;
    width: 80%;
    margin: auto;
}

.testim .cont div.active .img img {
    -webkit-animation: testim-show .5s ease-in-out forwards;            
    -moz-animation: testim-show .5s ease-in-out forwards;            
    -ms-animation: testim-show .5s ease-in-out forwards;            
    -o-animation: testim-show .5s ease-in-out forwards;            
    animation: testim-show .5s ease-in-out forwards;            
}

.testim .cont div.active h2 {
    -webkit-animation: testim-content-in .4s ease-in-out forwards;    
    -moz-animation: testim-content-in .4s ease-in-out forwards;    
    -ms-animation: testim-content-in .4s ease-in-out forwards;    
    -o-animation: testim-content-in .4s ease-in-out forwards;    
    animation: testim-content-in .4s ease-in-out forwards;    
}

.testim .cont div.active p {
    -webkit-animation: testim-content-in .5s ease-in-out forwards;    
    -moz-animation: testim-content-in .5s ease-in-out forwards;    
    -ms-animation: testim-content-in .5s ease-in-out forwards;    
    -o-animation: testim-content-in .5s ease-in-out forwards;    
    animation: testim-content-in .5s ease-in-out forwards;    
}

.testim .cont div.inactive .img img {
    -webkit-animation: testim-hide .5s ease-in-out forwards;            
    -moz-animation: testim-hide .5s ease-in-out forwards;            
    -ms-animation: testim-hide .5s ease-in-out forwards;            
    -o-animation: testim-hide .5s ease-in-out forwards;            
    animation: testim-hide .5s ease-in-out forwards;            
}

.testim .cont div.inactive h2 {
    -webkit-animation: testim-content-out .4s ease-in-out forwards;        
    -moz-animation: testim-content-out .4s ease-in-out forwards;        
    -ms-animation: testim-content-out .4s ease-in-out forwards;        
    -o-animation: testim-content-out .4s ease-in-out forwards;        
    animation: testim-content-out .4s ease-in-out forwards;        
}

.testim .cont div.inactive p {
    -webkit-animation: testim-content-out .5s ease-in-out forwards;    
    -moz-animation: testim-content-out .5s ease-in-out forwards;    
    -ms-animation: testim-content-out .5s ease-in-out forwards;    
    -o-animation: testim-content-out .5s ease-in-out forwards;    
    animation: testim-content-out .5s ease-in-out forwards;    
}

@-webkit-keyframes testim-scale {
    0% {
        -webkit-box-shadow: 0px 0px 0px 0px #eee;
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        -webkit-box-shadow: 0px 0px 10px 5px #eee;        
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        -webkit-box-shadow: 0px 0px 10px 5px #ffb600;        
        box-shadow: 0px 0px 10px 5px #ffb600;        
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 0px #ffb600;        
        box-shadow: 0px 0px 0px 0px #ffb600;        
    }
}

@-moz-keyframes testim-scale {
    0% {
        -moz-box-shadow: 0px 0px 0px 0px #eee;
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        -moz-box-shadow: 0px 0px 10px 5px #eee;        
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        -moz-box-shadow: 0px 0px 10px 5px #ffb600;        
        box-shadow: 0px 0px 10px 5px #ffb600;        
    }

    100% {
        -moz-box-shadow: 0px 0px 0px 0px #ffb600;        
        box-shadow: 0px 0px 0px 0px #ffb600;        
    }
}

@-ms-keyframes testim-scale {
    0% {
        -ms-box-shadow: 0px 0px 0px 0px #eee;
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        -ms-box-shadow: 0px 0px 10px 5px #eee;        
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        -ms-box-shadow: 0px 0px 10px 5px #ffb600;        
        box-shadow: 0px 0px 10px 5px #ffb600;        
    }

    100% {
        -ms-box-shadow: 0px 0px 0px 0px #ffb600;        
        box-shadow: 0px 0px 0px 0px #ffb600;        
    }
}

@-o-keyframes testim-scale {
    0% {
        -o-box-shadow: 0px 0px 0px 0px #eee;
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        -o-box-shadow: 0px 0px 10px 5px #eee;        
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        -o-box-shadow: 0px 0px 10px 5px #ffb600;        
        box-shadow: 0px 0px 10px 5px #ffb600;        
    }

    100% {
        -o-box-shadow: 0px 0px 0px 0px #ffb600;        
        box-shadow: 0px 0px 0px 0px #ffb600;        
    }
}

@keyframes testim-scale {
    0% {
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        box-shadow: 0px 0px 10px 5px #ffb600;        
    }

    100% {
        box-shadow: 0px 0px 0px 0px #ffb600;        
    }
}

@-webkit-keyframes testim-content-in {
    from {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -webkit-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@-moz-keyframes testim-content-in {
    from {
        opacity: 0;
        -moz-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -moz-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@-ms-keyframes testim-content-in {
    from {
        opacity: 0;
        -ms-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -ms-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@-o-keyframes testim-content-in {
    from {
        opacity: 0;
        -o-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -o-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@keyframes testim-content-in {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        transform: translateY(0);        
    }
}

@-webkit-keyframes testim-content-out {
    from {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        -webkit-transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@-moz-keyframes testim-content-out {
    from {
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        -moz-transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@-ms-keyframes testim-content-out {
    from {
        opacity: 1;
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        -ms-transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@-o-keyframes testim-content-out {
    from {
        opacity: 1;
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@keyframes testim-content-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        transform: translateY(-100%);        
    }
}

@-webkit-keyframes testim-show {
    from {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -webkit-transform: scale(1);       
        transform: scale(1);       
    }
}

@-moz-keyframes testim-show {
    from {
        opacity: 0;
        -moz-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -moz-transform: scale(1);       
        transform: scale(1);       
    }
}

@-ms-keyframes testim-show {
    from {
        opacity: 0;
        -ms-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -ms-transform: scale(1);       
        transform: scale(1);       
    }
}

@-o-keyframes testim-show {
    from {
        opacity: 0;
        -o-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -o-transform: scale(1);       
        transform: scale(1);       
    }
}

@keyframes testim-show {
    from {
        opacity: 0;
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        transform: scale(1);       
    }
}

@-webkit-keyframes testim-hide {
    from {
        opacity: 1;
        -webkit-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}

@-moz-keyframes testim-hide {
    from {
        opacity: 1;
        -moz-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -moz-transform: scale(0);
        transform: scale(0);
    }
}

@-ms-keyframes testim-hide {
    from {
        opacity: 1;
        -ms-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -ms-transform: scale(0);
        transform: scale(0);
    }
}

@-o-keyframes testim-hide {
    from {
        opacity: 1;
        -o-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -o-transform: scale(0);
        transform: scale(0);
    }
}

@keyframes testim-hide {
    from {
        opacity: 1;
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        transform: scale(0);
    }
}

@media all and (max-width: 300px) {
	body {
		font-size: 14px;
	}
}

@media all and (max-width: 500px) {
	.testim .arrow {
		font-size: 1.5em;
	}
	
	.testim .cont div p {
		line-height: 25px;
	}

}

/*******************************/
/*********** Blog CSS **********/
/*******************************/
.blog {
    position: relative;
    width: 100%;
    padding: 45px 0 15px 0;
}

.blog .blog-item {
    position: relative;
    width: 100%;
    text-align: center;
    border: 1px solid;
    margin-bottom: 30px;
}

.blog .blog-img {
    position: relative;
    overflow: hidden;
}

.blog .blog-img img {
    width: 100%;
    height: 330px;
    object-fit: contain;
}

.blog .blog-title {
    display: flex;
    align-items: center;
    height: 60px;
    background: #030f27;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.blog .blog-title h3 {
    margin: 0;
    /* padding: 0 15px 0 25px; */
    width: calc(100% - 60px);
    font-size: 17px;
    font-weight: 700;
    color: #fdbe33;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.blog .blog-title a.btn {
    width: 60px;
    height: 60px;
    padding: 3px 0 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    line-height: 60px;
    font-weight: 100;
    color: #030f27;
    background: #fdbe33;
    border-radius: 0;
    transition: .3s;
}

.blog .blog-item:hover a.btn {
    color: #ffffff;
}

.blog .blog-meta {
    position: relative;
    padding: 25px 0 10px 0;
    background: #f3f6ff;
}

.blog .blog-meta::after {
    position: absolute;
    content: "";
    width: 100px;
    height: 1px;
    left: calc(50% - 50px);
    bottom: 0;
    background: #fdbe33;
}

.blog .blog-meta p {
    display: inline-block;
    margin: 0;
    padding: 0 3px;
    font-size: 14px;
    font-weight: 300;
    font-style: italic;
    color: #666666;
}

.blog .blog-meta p a {
    margin-left: 5px;
    font-style: normal;
}

.blog .blog-text {
    padding: 10px 25px 25px 25px;
    background: #f3f6ff;
}

.blog .blog-text p {
    margin: 0;
    font-size: 16px;
}

.blog .pagination .page-link {
    color: #030f27;
    border-radius: 0;
    border-color: #fdbe33;
}

.blog .pagination .page-link:hover,
.blog .pagination .page-item.active .page-link {
    color: #fdbe33;
    background: #030f27;
}

.blog .pagination .disabled .page-link {
    color: #999999;
}
 #chartdiv {
            width	: 100%;
            height	: 500px;
          }						
          .amcharts-map-area {
            -webkit-transition: -webkit-transform .5s cubic-bezier(0,.45,.15,2);
            -webkit-transform-origin: 50% 50%;
          
            transition: transform .5s cubic-bezier(0,.45,.15,2);
            transform-origin: 50% 50%;
          }
          .amcharts-map-area:hover {
          /*   -webkit-transform: scale(1.05); */
          /*   transform: scale(1.05);   */
          }