@import url('https://fonts.googleapis.com/css?family=Roboto:400|Varela+Round&display=swap');

*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-size: 62.5%;
     font-family: 'Varela Round', sans-serif;
}

html{
     scroll-behavior: smooth;
}

body{
     background-color: #0e0e0e;
}

.banner-img{
     background-size: cover;
     background-repeat: no-repeat;
     height: 100vh;
}

.b-img1{
     background-image: url('images/Product-Engineering-Banner.jpg');
}

.b-img2{
     background-image: url('images/Automation-Banner.jpg');
}

.b-img3{
     background-image: url('images/devops-banner-new.jpg');
}

.banner-content{
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 1;
     width: 100%;
}

.inner-container{
     padding: 2rem 0 0 0;
}

.content-partner {
     padding: 2rem 0;
}

.partner-inner img{
     transition: all .5s ease 0s;
}

.partner-inner:hover img{
     transform: scale(1.1) rotate(2deg);
}

.img-partner{
     position: relative;
}

.img-partner::before{
     position: absolute;
     content: '';
     width: 100%;
     height: 100%;
     background: #ef0e34;
     right: 0;
     bottom: 0;
     opacity: 0;
     transition: all .5s ease;
     z-index: -1;
}

.partner-inner:hover .img-partner::before{
     opacity: 1;
     right: -25px;
     bottom: -25px;
}

.service-container{
     align-items: center;
     padding: 2rem 0;
}

.tech-stack{
     justify-content: space-between;
}

.tech-stack .lists{
     padding: 2rem 4rem;
     background-color: #3b3b3b;
     width: 30%;
     transition: all .5s ease-out;
     border-radius: 10px;
}

.tech-stack .list-common li{
     color: #fff;
}

.tech-stack h3{
     text-transform: uppercase;
     margin-bottom: 1rem;
     color: #fff;
     text-align: center;
}

.lists:hover{
     background-color: #fff;
     transform: scale(1.05);
}

.lists:hover .list-common li{
     color: #000;
}

.lists:hover h3{
     color: #ef0e34;
}

nav{
     position: relative;
     z-index: 3;
}

nav .wrapper{
     position: absolute;
     z-index: 1;
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     padding: 1rem 2rem;
}

.menu ul{
     margin: 0;
     list-style-type: none;
}

.menu li{
     margin: 0 .5rem;
     display: inline-block;
}

.menu a{
     font-size: 1.6rem;
     color: #fff;
     padding: .5rem;
     transition: all .5s ease-out;
}

.menu a:hover{
     text-decoration: none;
     color: #ef0e34;
}

.contact{
     padding-top: 2rem;
}

.branches .city{
     position: relative;
     display: flex;
     flex-direction: column;
     width: calc(49% - 5px);
     margin-bottom: 40px;
     box-shadow: 0 2px 8px 0 rgba(0,0,0,.2);
}

.branches .city .item {
     overflow: hidden;
     position: relative;
}

.city-width:hover .item::before {
     width: 100%;
     height: 100%;
}

.item::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 0;
     height: 0;
     background-color: #ffffff12;
     transition: all .5s ease-out;
     z-index: 1;
}

.branches img {
     width: 100%;
     transition: transform 1s ease 0s;
}

.item::after {
     content: "";
     position: absolute;
     bottom: 0;
     right: 0;
     width: 0;
     height: 0;
     background-color: #ffffff12;
     transition: all .5s ease-out;
}

.city-width:hover .item::after {
     width: 100%;
     height: 100%;
}

.branches .card-padding {
     padding: 30px;
     background: #191919;
     flex: 1;
}

.card h3 {
     font-weight: 700;
     color: #fff;
}

.branches address {
     margin-bottom: 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: #666;
}

.address-height>p {
     height: auto;
     margin: 0;
}

.watermark-text h1 {
     font-size: 30px;
     font-weight: 700;
     color: #d30f2f;
     margin: 0;
}

.city-width:hover .item>img {
     transform: rotate(2deg) scale(1.2);
}

.form{
     background-color: #191919;
     padding: 2rem;
     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
     border-radius: 2px;
}

.f-wrapper{
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
}

.form-field {
     width: 49%;
     margin-bottom: 1rem;
}

label{
     font-size: 14px;
     color: #fff;
}

input {
     width: 100%;
     padding: 1rem;
     border: 1px solid #19191959;
     font-size: 16px;
}

button{
     font-size: 16px;
     cursor: pointer;
     width: 100%;
     padding: 1rem;
}

.service-container.row{
     margin: 0;
}

.even .inner-container {
     padding: 0 5rem;
}

.odd .inner-container {
     padding: 0 5rem 0 0;
}

.tech-img{
     background-color: #fff;
     border: 1px solid #ccc;
     background: #dcdcdc;
     margin: -1px 0 -2px -1px;
     transition: all .5s ease 0s;
     position: relative;
}

.tech-img img{
     margin: auto;
}

.slick-initialized .slick-slide {
     outline: none;
}
 
.slick-slider .slick-dots {
     position: absolute;
     list-style: none;
     left: 0;
     right: 0;
     text-align: center;
     padding: 0;
     bottom: -3rem;
}

.slick-slider .slick-dots li {
     float: none;
     line-height: 0;
     display: inline-block;
     padding: 5px;
}

.dotstyle-dotstroke li.slick-active {
     box-shadow: 0 0 0 2px rgba(239,14,52,.3);
     background: rgba(239,14,52,.3);

}

.dotstyle-dotstroke li {
     border-radius: 50%;
     box-shadow: 0 0 0 2px rgba(255,255,255,0);
     -webkit-transition: box-shadow .3s ease;
     transition: box-shadow .3s ease;
}

.dotstyle-dotstroke li, .dotstyle-fall li {
     position: relative;
     display: block;
     float: left;
     margin: 0 8px;
     width: 16px;
     height: 16px;
     cursor: pointer;
}

.dotstyle-dotstroke li.slick-active button {
     -webkit-transform: scale(.4);
     transform: scale(.4);
     background: #ef0e34;
}

.dotstyle-dotstroke li button {
     background-color: rgba(255,255,255,.7);
     -webkit-transition: background-color .3s ease,-webkit-transform .3s ease;
     transition: background-color .3s ease,transform .3s ease;
}

.dotstyle-dotstroke li button, .dotstyle-fall li button {
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     outline: 0;
     border-radius: 50%;
     border: none;
     background-color: #fff;
     text-indent: -999em;
     cursor: pointer;
     position: absolute;
}

.slick-dots button {
     border: 2px solid #fff;
     background: 0 0;
     font-size: 0;
     line-height: 0;
     height: 10px;
     width: 10px;
     padding: 0;
     outline: 0;
}

.toggle {
     position: relative;
     cursor: pointer;
     width: 30px;
     height: 30px;
     display: none;
     z-index: 2;
}

.fg {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 15px;
}

.toggle .fg em:first-child {
     top: -10px;
}

.toggle .fg em {
     background: #fff;
}

.toggle .fg em {
     position: absolute;
     content: '';
     background: #fff;
     width: 25px;
     height: 2px;
     transition: all .2s ease-in-out;
}

.toggle .fg em:last-child {
     top: 10px;
}
 
/* .wrapper.scrollUp {
     transform: translateY(-100%);
} */

/* .wrapper.fixed-header {
     padding: 10px 2rem;
     z-index: 999;
     position: fixed;
     width: 100%;
     background-color: #000;
} */

.sucess a{
     display: inline-block;
     overflow: hidden;
}

.success-bt {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 1;
     width: 100%;
}

.suc-hover{
     overflow: hidden;
}

.suc-hover img{
     transition: all .5s ease-out;
}

.suc-hover:hover img{
     transform: rotate(2deg) scale(1.1);
}

.not-home .wrapper,
.not-home nav{
     position: unset;
}

.case-study h1{
     font-size: 4rem;
}

.banner-inner {
     position: absolute;
     top: 50%;
     text-align: center;
     transform: translateY(-50%);
     z-index: 1;
     padding: 3rem;
}

.banner-inner h1{
     font-size: 3.5rem;
     font-weight: 600;
}

.case-inner{
     margin: 4rem auto;
     width: 90%;
}

.case-inner h2{
     margin-bottom: 1rem;
}

.case-inner p{
     margin-bottom: 2rem;
}

.case-pad{
     padding: 4rem 4rem 7rem 4rem;
}

.case-num {
     margin-bottom: 3rem;
}

.case-num h2{
     font-size: 4rem;
     font-weight: 600;
     color: #f00;
}

.case-pad h3{
     font-weight: 600;
     font-size: 2rem;
}

.work-did .d-flex>div {
     border: 1px solid #d3d8e3bf;
     margin-top: -1px;
     margin-left: -1px;
     background-color: #fff;
}

.success-bt h2{
     font-size: 2.5rem;
}

.progress-page {
     position: fixed;
     right: 50px;
     bottom: 50px;
     height: 40px;
     width: 40px;
     border-radius: 50px;
     box-shadow: inset 0 0 0 1px #0e0e0e;
     opacity: 0;
     z-index: 10;
     -webkit-transform: scale(0.8);
     transform: scale(0.8);
     -webkit-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
}

.progress-page.is-active.is-visible {
     opacity: 1;
     transform: scale(1);
}

.scrolltotop {
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 18px;
     height: 40px;
     right: 0px;
     bottom: 100px;
     width: 40px;
     cursor: pointer;
     opacity: 0;
     position: absolute;
     -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     -o-transition: all 0.2s ease-in-out;
     -ms-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
}
 
.scrolltotop:before {
     color: #ef0e34;
}
 
.scrolltotop.is-active.is-visible {
     opacity: 1;
     bottom: 0;
}

.progress-page svg.progress-circle path {
     stroke: #ef0e34;
     stroke-width: 5;
     box-sizing: border-box;
}

.progress-page svg path {
     fill: none;
}

.icon-arrow-up:before {
     content: "\e001";
     font-family: 'tech' !important;
     color: #ef0e34;
     transform: rotate(180deg);
}

.client-pic img{
     background-color: #fff;
     margin: auto;
}

.text-size{
     font-size: 1.8rem;
     margin-bottom: 2rem;
}

@media (min-width: 768px){
     .abt-num .b-r:nth-child(3n){
          border: none;
     }
     .logo-sec .slick-dots{
          display: none;
     }
}

@media(max-width:992px){
     .odd .inner-container {
          padding: 0;
     }
     .even .inner-container {
          padding: 0;
     }
     .inner-container .list-common{
          margin-bottom: 2rem;
     }
     .service-container{
          display: flex;
          padding: 2rem 1.5rem;
     }
     .ser-img{
          order: 2;
          text-align: center;
     }
     .tech-stack .lists{
          width: 48%;
          margin-bottom: 2rem;
     }
     .watermark-text h1{
          font-size: 2rem;
     }
     .branches .card-padding{
          padding: 1.5rem;
     }
     .banner-content h1{
          font-size: 3rem;
     }
     .case-pad{
          padding: 3rem;
     }
}

@media (max-width: 767px){
     .abt-num .b-r:nth-child(2n){
          border: none;
     }
     .abt-num div{
          padding: 2rem!important;
     }
     .branches .city{
          width: 100%;
     }
     .f-wrapper{
          flex-direction: column;
     }
     .form-field{
          width: 100%;
     }
     .logo-sec{
          padding-bottom: 5rem;
     }
     .banner-content h1{
          font-size: 2.5rem;
     }
     .toggle{
          display: block;
     }
     .menu ul{
          display: block;
          right: 0%;
          background: #000;
          z-index: 3;
          position: fixed;
          width: 300px;
          top: 0;
          transform: translateX(100%);
          transition: .3s ease;
          height: 100%;
     }
     .menu li{
          display: block;
     }
     .menu a{
          padding: 1rem 2rem;
          /* color: #000; */
          display: inline-block;
     }.open-menu ul{
          transform: translateX(0);
     }
     .close-icon{
          position: relative;
          padding: 2rem 0;
     }
     .close-icon span{
          font-size: 26px;
          display: inline-block;
          position: absolute;
          right: 7px;
          top: 12px;
          color: #fff;
          cursor: pointer;
     }
     body.open-menu{
          overflow: hidden;
     }
     .open-menu .site-layer {
          background: rgba(0,0,0,.5);
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 2;
      }
      .logo{
           z-index: 4;
     }
     .success-bt p{
          display: none;
     }
     .case-pad{
          padding: 2rem;
     }
     .case-study h1{
          font-size: 3rem;
     }
     .banner-inner h1{
          font-size: 2rem;
     }
     .case-num h2{
          font-size: 2rem;
     }
     .banner-content a{
          font-size: 2rem;
     }
     .success-bt h2{
          font-size: 2rem;
     }
}

@media (max-width: 575px){
     .abt-num div{
          padding: 1rem!important;
          margin-bottom: 2rem !important;
     }
     .tech-stack .lists{
          width: 100%;
     }
     .tech-stack{
          justify-content: center;
     }
     .case-num{
          margin-bottom: 1rem;
     }
     .case-pad h3{
          margin-bottom: 1rem;
     }
     .banner-content h1 {
          font-size: 2rem;
     }
     .img-partner {
          text-align: center;
     }
     .content-partner {
          margin-left: 13px;
     }
     .success-bt{
          display: none;
     }
     .b-img2{
          background-position: right;
     }
}

@media (max-width: 450px){
     .abt-num .col-6{
          width: 100%;
          flex: 0 0 100%;
          max-width: 100%;
          background-color: #fff;
          margin: 0 !important;
     }
     .abt-num span,
     .abt-num h3{
          color: #ef0e34;
     }
     .abt-num .text-gray{
          color: #000;
     }
     .b-r{
          border-right: none;
          border-bottom: 1px solid #dcdcdc;
     }
     .abt-num .b-r:nth-child(2n) {
          border-bottom: 1px solid  #dcdcdc;
     }
     .partner{
          margin-top: 2rem;
     }
     .img-partner::before{
          display: none;
     }
     .partner-inner:hover img {
          transform: none;
     }
     .content-partner {
          padding: 1rem 0 1rem 0;
     }
     .menu ul{
          width: 100%;
     }

     .menu li:nth-child(2){
          margin-top: 3rem;
     }
     .w-100 .w-25{
          width: 50% !important;
     }
}