@import url("https://fonts.googleapis.com/css?family=Lato:300,700");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");

#body:not(#footer) {
    /* margin-top: 139px !important; */
    margin-top: 67px !important;
    /* padding-left:9%;
      padding-right: 9%; */
        padding-top:20px;
      padding-bottom:30px;

}

nav{
    /* background-color: white !important; */
    /* margin-left: 15px; */
    /* padding-right: 60px; */
    z-index: 10000 !important;
   

}
 .nav-wrapper {
  font-weight: 600;
    color: #63859D;
    font-size: 70vw;
   
}

a:hover{
    /* color:#00e5ff !important;
     */
     
     color:#aa9a8d !important;
    text-decoration:none !important;    
}




#soup-nav {
   
    position: absolute;
    left: 0;
    right: 0;
    bottom: 32px;
    z-index: 9002;
    font-size: 64px;
  }
  
  .soup-title {
    font-size: 32px;
  }
  
  .soup-desc {
    font-size: 16px;
  }
  
  text-anim {
    width: 100%;
    height: 100%;
    background-color: #fff;
    color: #111;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
  }
  
  #soup-container {
      margin-top: 2%;
    width: 100%;
    height: 100%;
    min-width: 320px;
    min-height: 480px;
    position: relative;
  }
  
  .letters-wrap {
    position: absolute;
    overflow: hidden;
    display: inline-block;
  }
  .letters-wrap.mutable {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .letters-wrap.mutable .letter {
    position: absolute;
    left: 0;
    top: 0;
    transition: left 2s, top 2s, color 2s;
    color: "#AAA";
  }
  .letters-wrap.mutable .letter.active {
    color: "#111";
    z-index: 9001;
  }
  .letters-wrap.position-data {
    top: 10%;
    left: 25%;
    /*opacity: 0.1;*/
    visibility: hidden;
    transform: translate(-50%, -50%);
  }
  
  .segment {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .letter {
    /*display: inline-block;*/
  }
  
  button {
    z-index: 9001;
    position: relative;
  }




  /* get in touch btn */

  /* a {
    text-decoration: none;
    line-height: 80px;
    color: black;
  }
  
  .centerer {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 1rem;
  }
  
  @media (min-width: 600px) {
    .wrap {
      width: 50%;
      float: left;
    }
  }
  [class^="btn-"] {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 80px;
    max-width: 250px;
    margin: 1rem auto;
    text-transform: uppercase;
    border: 1px solid currentColor;
  }

  .btn-6 {
    color: #3bac88;
  }
  .btn-6 span {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: #0e5e45;
    -webkit-transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
    transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: -1;
  }
  .btn-6:hover {
    color: #c5e7dc;
  }
  .btn-6:hover span {
    width: 225%;
    height: 562.5px;
  }
  .btn-6:active {
    background-color: #189d73;
  }
  
   */

  .btn-get-in-touch{
border:1px solid 
black!important;
  }


  /* material card */

  
.card {
    background: #fff;
    border-radius: 2px;
    display: inline-block !important;
    /* height: 300px; */
    margin: 1rem;
    position: relative;
    /* width: 300px; */
  }
  
  .card-1 {
      background-image: url('../../assets/images/pic-1.png');
      background-position: center;
      background-size: cover;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  }
  
  .card-1:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  }
  
  .card-2 {
    background-image: url('https://mir-s3-cdn-cf.behance.net/project_modules/1400/4fae4958535989.5a0b58961c2fe.jpg');
    background-position: center;
    background-size: cover;


    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  }
  .card-2:hover {
    background-image: url('https://mir-s3-cdn-cf.behance.net/project_modules/1400/4fae4958535989.5a0b58961c2fe.jpg');
    background-position: center;
    background-size: cover;

    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  }
  .card-3 {
    background-image: url('https://mir-s3-cdn-cf.behance.net/project_modules/1400/4fae4958535989.5a0b58961c2fe.jpg');
    background-position: center;
    background-size: cover;

    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }
  .card-3:hover {
    background-image: url('https://mir-s3-cdn-cf.behance.net/project_modules/1400/4fae4958535989.5a0b58961c2fe.jpg');
    background-position: center;
    background-size: cover;


    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  }
  
  .card-4 {
    background-image: url('https://mir-s3-cdn-cf.behance.net/project_modules/1400/4fae4958535989.5a0b58961c2fe.jpg');
    background-position: center;
    background-size: cover;

    box-shadow: 0 14px 28px rgba(0,0,0,0.19), 0 10px 10px rgba(0,0,0,0.22);
  }
  .card-4:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  }
  
  .card-5 {
    background-image: url('https://mir-s3-cdn-cf.behance.net/project_modules/1400/4fae4958535989.5a0b58961c2fe.jpg');
    background-position: center;
    background-size: cover;

    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  }
  .card-5:hover {
    background-image: url('https://mir-s3-cdn-cf.behance.net/project_modules/1400/4fae4958535989.5a0b58961c2fe.jpg');
    background-position: center;
    background-size: cover;

    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  }
  .content{
    padding-top: 11%;
      margin-top: 9%;
      /* margin-left: 14%;
margin-right: 14%; */
  }

  .white-text{
    color:#000 !important;
}



  .footer-copyright{

    background-color: #fff !important;
    color: #000 !important;

    /* background-color: #18ffff; */
  }

  .page-footer{
    background-color: e0e0e0 !important;
    color: #000 !important;
    margin-left: 0%;
    margin-right: 0%;

    /* background-color: #00e5ff; */
  }


  /* Bouncing Down arrow */


  
   .fa-arrow-down {
    color: #fff;
    text-decoration: none;
  }
  .arrow {
      font-size: 30%;
    text-align: center;
    margin: 8% 0;
    /*margin-right: -92% !important;*/
  }
  .bounce {
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
  }
  @-webkit-keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    40% {
      -webkit-transform: translateY(-30px);
              transform: translateY(-30px);
    }
    60% {
      -webkit-transform: translateY(-15px);
              transform: translateY(-15px);
    }
  }
  @keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    40% {
      -webkit-transform: translateY(-30px);
              transform: translateY(-30px);
    }
    60% {
      -webkit-transform: translateY(-15px);
              transform: translateY(-15px);
    }
  }

  

  /* Bouncing down arrow end */



  /**
 * Demo Styles
 */
/* 
html {
    box-sizing: border-box;
  }
  
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
   */
  /* html {
    min-height: 100%;
  } */
  
  /* body {
    margin: 64px auto;
    max-width: 640px;
    width: 94%;
    text-align: center;
  } */
  
  /**
   * Circle Styles
   */
  
  .circle {
    position: relative;
    float: right;
    display: block;
    margin: 2em 0;
    z-index: 9999;
     margin-top: 30%;
    margin-right: 8em !important;
  
    color: #ffffff;
    text-align: center;
    width: 5% !important ;
  }
  
  .circle:after {
    display: block;
    padding-bottom: 100%;
    width: 100%;
    height: 0;
    border-radius: 50%;
    background-color: #ddd;
    content: "";
    background-color: #ee6e73;
  }
  
  .circle__inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .circle__wrapper {
    display: table;
    width: 100%;
    height: 100%;
    
  }
  
  .circle__content {
    display: table-cell;
    padding: 1em;
    vertical-align: middle;
    
  }
  
  @media (min-width: 480px) {
    .circle__content {
      font-size: 2em;
    }
  }
  
  @media (min-width: 768px) {
    .circle__content {
      font-size: 4em;
    }
    .card{
        height: 54vh;
    }
    
  }



  .recent-work-style{
    text-align: center;
    margin-top: 0%;
    padding-top: 0%;
  }
  .recent-work-style .heading{
    font-size: 200%;
    font-weight: 400;
    

  }
  
  .recent-work-style .content{
    margin-top: 1%;
    padding-top: 1%;
    font-size: 100%;
    font-weight: 400;
    padding-bottom: 3%;
    margin-bottom: 0%;
  }



  /* skill css */
  /* font-family: 'Oswald', sans-serif;

html { 
  font-size: 62.5%; } 
body {
font-size: 1.5em;
line-height: 1.6;
font-weight: 400;
font-family: 'lux', sans-serif;
color: #222;
background-color: #f6f6f6;
overflow-y: scroll;
} */


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 { 
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 2rem; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

/* p {
  margin-top: 0; }

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

section.intro {
font-family: oswald;
position: relative;
height: 100vh;
width: 100%;

/* background: #f6f6f6; */

/* background: -moz-radial-gradient(center, ellipse cover, #f6f6f6 1%, #d3d3d3 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#f6f6f6), color-stop(100%,#d3d3d3)); */

/* background: -webkit-radial-gradient(center, ellipse cover, #f6f6f6 1%,#d3d3d3 100%); */

/* background: -o-radial-gradient(center, ellipse cover, #f6f6f6 1%,#d3d3d3 100%);
background: -ms-radial-gradient(center, ellipse cover, #f6f6f6 1%,#d3d3d3 100%); */
/* background: radial-gradient(ellipse at center, #f6f6f6 1%,#d3d3d3 100%); */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#d3d3d3',GradientType=1 );
overflow: hidden;
z-index: 1;
}











.welcome {
font-size: 60px;
text-align: center;
color: #333;
}







/********************************************************************************************************************************
                                            Hexagon Intro Blocks
********************************************************************************************************************************/
.intro-block {
position: relative;
display: flex;
align-items: center;
height: 100%;
/* box-shadow: inset 0px 0px 64px 0px rgba(50,50,50,0.75); */
}

.hex-bg-big-text {
position: absolute;
z-index: -1;
height: 100%;
width: 100%;
}

.centerfold-wrap {
position: relative;
display: flex;
justify-content: center;
align-items: center;
/* flex: 1; */
}

.hoverblock {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.hover-notify {
position: absolute;
bottom: -80px;
left: 0;
width: 100%;
text-align: center;
font-size: 50px;
}

.code-display {
position: relative;
color: #f6f6f6;
width: 600px;
height: 260px;
}

.code-display::before {
content: "Expertise";
position: absolute;
top: -70px;
left: 0;
font-size: 3.0rem;
color: #333;
}

.code-display h1 {
color: #333;
}

.code-description {
width: 100%;
height: 100%;
color: #333;
}

.code-description * {
display: none;
}

.code-description > div {
padding: 0px 40px;
font-size: 26px;
border-left: 2px solid #DDDDDD;
}

.desc-active {
display: block;
/*height: 100%;*/
position: relative;
}

.desc-active > p {
display: block;
margin: 0;
}

.desc-active > p > span {
display: inline-block;
/* font-weight: bold; */
width: 125px;
}

p.code-title {
position: relative;
font-size: 6rem;
}

.desc-active::after {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
content: "";
opacity: .2;
z-index: -1;
}

.backend-desc.desc-active::after {
background: url(https://i.imgur.com/Dc8HgeM.png);
background-repeat: no-repeat;
background-size: contain;
background-position: right center;
}

.frontend-desc.desc-active::after {
background: url(https://i.imgur.com/QcfXSkf.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: right center;
}

.html-desc.desc-active::after {
background: url(https://i.imgur.com/0g3HZSF.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: right center;
}

.css-desc.desc-active::after {
background: url(https://i.imgur.com/poC0TYE.png);
background-repeat: no-repeat;
background-size: contain;
background-position: right center;
}

.javascript-desc.desc-active::after {
background: url(https://i.imgur.com/QjrmHkb.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: right center;
}

.gui-desc.desc-active::after {
background: url(https://i.imgur.com/YmCqPpk.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: right center;
}

.seo-desc.desc-active::after {
background: url(https://i.imgur.com/V9vAVUO.png);
background-repeat: no-repeat;
background-size: contain;
background-position: right center;
}
















.hex-master-wrap {
position: relative;
/* width: 50%; */
min-width: 665px;
height: 460px;
}

.border-1,
.border-2,
.border-3 {
position: absolute;
width: 100%;
height: 88px;
top: 46px;
left: 0;
border-left: 3px solid;
border-right: 3px solid;
border-radius: 8px;
z-index: 2;
border-color: #333;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.border-2 {
transform: rotate(60deg);
}

.border-3 {
transform: rotate(120deg);
}

.border-3::before {
display: none;
position: absolute;
content: "";
bottom: 10%;
left: 42px;
width: 50%;
height: 83%;
background-color: rgba(255, 255, 255, 0);
border-top: 1px solid;
border-bottom: 1px solid;
border-color: white;
border-radius: 50%;
visibility: visible;
z-index: -1;
/* transform: rotate(60deg); */
}






.intro-block .grid-1,
.intro-block .grid-2,
.intro-block .grid-3 {
display: flex;
align-items: center;
justify-content: center;
width: 75%;
margin: 0 auto;
margin-bottom: -50px;
}

.intro-block .grid-3 {
margin-bottom: -50px;
}

.intro-block .grid-2,
.intro-block .grid-3 {
margin-top: -50px;
}

.hex-wrap {
position: relative;
width: 150px;
height: 190px;
margin: 0 1em 0 0;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border: 0px solid;
transform: scale(1.1);
}

.hex-wrap .label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 58px;
color: #f6f6f6;
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
}

.hex-wrap .label svg, .hex-wrap .label img {
height: 50px;
width: 50px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.hexagon {
width: 300px;
height: 150px;
margin: 15px 0 0 -75px;
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(90deg);
cursor: pointer;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.hex-inner-1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}

.hex-inner-2 {
position: relative;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
/* background-image: url(http://placekitten.com/240/240); */
visibility: visible;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
overflow: hidden;
}







.hex-inner-2::before, .hex-inner-2::after {
position: absolute;
background-repeat: no-repeat;
background-position: 50%;
background-size: contain;
top: 0;
left: 0;
height: 110%;
width: 110%;
content: "";
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}

/**********************************************************************************
                                Hex Hover Area
**********************************************************************************/
.hex-init {
position: absolute;
top: 46px;
left: 0px;
height: 46%;
width: 100%;
z-index: 9;
transform: rotate(-60deg);
cursor: pointer;
}

.hex-init::after {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
content: "";
transform: rotate(-60deg);
}

.hex-init::before {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
content: "";
transform: rotate(60deg);
}
  /* end skill css */


  /* Testimonial start */
  @import url(//cdn.rawgit.com/rtaibah/dubai-font-cdn/master/dubai-font.css);



.testim {
		width: 100%;
		/* position: sticky; */
		top: 50%;
		-webkit-transform: translatey(-50%);
		-moz-transform: translatey(-50%);
		-ms-transform: translatey(-50%);
		-o-transform: translatey(-50%);
    transform: translatey(-50%);
    padding-top: 25%;
}

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

.testim .arrow {
    display: block;
    /*position: absolute;*/
    color: #000;
    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: #ea830e;
}
    

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

.testim .arrow.right {
    /* right: 10px !important; */
}

.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: #ea830e;
    border-color: #ea830e;
}

.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: #ea830e;
    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 #ea830e;        
        box-shadow: 0px 0px 10px 5px #ea830e;        
    }

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

@-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 #ea830e;        
        box-shadow: 0px 0px 10px 5px #ea830e;        
    }

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

@-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 #ea830e;        
        box-shadow: 0px 0px 10px 5px #ea830e;        
    }

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

@-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 #ea830e;        
        box-shadow: 0px 0px 10px 5px #ea830e;        
    }

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

@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 #ea830e;        
    }

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

@-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;
    }
  

}



/* testimonial end */


@media (max-width: 768px) {
    .nav-expand{
        display: none;
    }
    .nav-collapse{
        display: block !important;
    }
    .btn-get-in-touch{
        border: 1px solid 
 black!important;
    width: 50%;
    height: 6%;
    font-size: 2.5vw !important;
    float: left !important;
    }
    #soup-container{
        font-size: 515% !important; 
        padding: 0;
    }
    section.intro {
      display:none;
        }
        .testim{
            
   
    top: 39% !important;
        }
        #body:not(footer){
            /* margin-left: 4% !important;
            margin-right: 4% !important; */

            text-align: justify !important;
        }
        .circle{
            display: none !important;
            /* position: absolute !important;
            width: 8% !important;
            bottom: 9% !important;
            right: 8em !important; */
        }

        .btn-linkedin{
            background-image: url('../images/linkedin.png');
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          background-size: contain;
          width: 100%;
          
          /* padding: 20px; */
          
          height: 100%;
          
          }
        /* .circle__content{ */
          
            /* padding:0; */

        /* } */
        /* .fa-2x { */
            /* font-size: 162%; */
        /* } */

        .card{
            height: 30vh;
        }
        
}

@media (min-width: 769px) {
    .nav-expand{
        display: block !important;
    }
    .nav-collapse{
        display: none !important;
    }
    .btn-linkedin{
        background-image: url('../images/linkedin.png');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-size: contain;
      width: 100%;
      
      padding: 20px;
      
      height: 100%;
      
      }
      .popup-menu-wrapper{
          display: none;
      }
}








#loader-container {
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  height: 100%;
  background: #008c8a;
  color: #08aeac;
  opacity: 0.99;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: table;
}
.loading-wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.image-wrap {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 100%;
  margin: 0 auto;
  position: relative;
}
.loader-img-animation {

  -webkit-animation: loader-img 2s infinite linear;

          animation: loader-img 2s infinite linear;
}
@-webkit-keyframes loader-img {
  0% {
    top: 0;
  }
  50% {
    top: -20px;
  }
  100% {
    top: 0;
  }
}
@keyframes loader-img {
  0% {
    top: 0;
  }
  50% {
    top: -20px;
  }
  100% {
    top: 0;
  }
}
.image-wrap img {
  width: 100px;
  height: 100px;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.loader-name {
  color: #fafafa;
  opacity: 0.9;
  text-align: center;
  font-size: 32px;
  letter-spacing: -2px;
  padding-left: 2px;
  padding-right: 2px;
  font-weight: 200;
  margin-top: 12px;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.loader-name-animation {
  -webkit-animation: loader-name 2s 1 ease-in;
          animation: loader-name 2s 1 ease-in;
}
@-webkit-keyframes loader-name {
  0% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes loader-name {
  0% {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.loader-job {
  margin-bottom: 40px;
  text-align: center;
  font-weight: 200;
  margin-top: 5px;
  color: #d8d8d8;
  font-size: 16px;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.loader-job-animation {
  -webkit-animation: loader-job 2s 1 ease-in;
          animation: loader-job 2s 1 ease-in;
}
@-webkit-keyframes loader-job {
  0% {
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes loader-job {
  0% {
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}