body{font-size:$basefont-size * 1.125; font-family:$font__regular; color:$black; overflow-x: hidden; overflow-y: scroll; line-height:1.6; }
h1, h2, h3, h4, h5 {line-height: 1.3; font-weight:800; } 
.container {max-width:1200px; }
section{position: relative;}
a {color: $black; text-decoration:none; outline:none;
  &:hover {color:$color__primary-hover } 
  &:hover,  &:focus {text-decoration:none; outline:none; }
}

.burger {padding:$spacer*5 0; } 
.t-burger {padding-top: $spacer*5; } 
.b-burger {padding-bottom: $spacer*5; } 
.gutter {padding:0 $spacer*5; } 
.gutter-sm {padding:0 $spacer*2.5; } 

.offset {margin-top: 100px; } 

.animate{transition: all .3s ease-in;}

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

.underline-2 {border-bottom: 2px solid #fd2e35; }

/*.chosen-container {width:100% !important; } 
.checkbox, .radio {
  label {margin-bottom:0; cursor:pointer;
    &:after {content: ''; display: table; clear: both; } 
    input[type="checkbox"], input[type="radio"] {display: none; } 
  }
  .checkbox{
    .cr {position: relative; display: inline-block; border: 1px solid #a9a9a9; border-radius: 2px; width: 1.3em; height: 1.3em; float: left; margin-right: .5em;
      .cr-icon {position: absolute; font-size: $basefont-size * .8; line-height: 0; top: 50%; left: 13%; } 
    } 
  }
  .radio{
    .cr {position: relative; display: inline-block; border: 1px solid #a9a9a9; border-radius: 100%; width: 1.3em; height: 1.3em; float: left; margin-right: .5em; border-radius: 50%;
      .cr-icon {position: absolute; font-size: $basefont-size * .8; line-height: 0; top: 50%; left: 13%; margin-left: 0.04em; } 
    }
  }
} 
input[type="checkbox"] + .cr > .cr-icon, input[type="radio"] + .cr > .cr-icon {transform: scale(3) rotateZ(-20deg); opacity: 0; transition: all .3s ease-in; } 
.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon, .radio label input[type="radio"]:checked + .cr > .cr-icon {transform: scale(1) rotateZ(0deg); opacity: 1; } 
.checkbox label input[type="checkbox"]:disabled + .cr, .radio label input[type="radio"]:disabled + .cr {opacity: .5; } */

/*.bg-0 {background:rgb(33, 32, 34); } 
.bg-1 {background:#FBEECA; } 
.bg-2 {background:#C6DBF2; } 
.bg-3 {background:rgba(123, 216, 240,0.3); } 
.bg-4 {background:#f9939a40; } 
.bg-5 {background:rgba(193, 219, 131,0.5); } 
.bg-6 {background:#a1c7f4 } 
.bg-7 {background:rgba(244, 204, 161,0.5); } 
.bg-8 {background:#b9adf6 } 
.alt-bg-2 {background-color: #E4EDED; }
.theme-bg {background-image: linear-gradient(to right,#0f346c 30%,#764ca6 100%); }*/

/*.hero{display: flex; height: 100vh; align-items: center;
  p {font-size: $basefont-size * 1.125; }
}*/

.bg-light {background-color:$white !important; } 
.white-text {color:$white; }
.background_1 {background-color:#f8f8f8}
.background_2 {background-color: #E4EDED; }
.background_3 {background-color:#f4f4f4;}
.background_4 {background-color:#333; color:#FFF}
.background_5, .common-card.background_5 {background-color:#f0f4f7;}
.background_6 {background-color:#f5f5f7;}
.background_7 {background-color:#c4c4c4;}

.big-text {font-size: $basefont-size * 1.875; font-weight:600; line-height:1.5; } 
.shade {display: inline; color: #fd2e35; font-weight: bold; text-transform: uppercase; font-size: $basefont-size * .825; letter-spacing: 2px; }
.border-top, .border-bottom {border-color: #000 !important; }
.section-header{
  h2 {font-size: $basefont-size * 2.75; line-height: 1.4; margin-top: 20px; }
}
.big-h2 {font-size: $basefont-size * 2.75; }
.big-h3 {font-size: $basefont-size * 2.5; font-weight: 500; line-height: 1.5; }
.big-h1 {font-size:  $basefont-size * 3.75; }
.big-light {font-size: $basefont-size * 2.5 !important; font-weight: 500 !important; }
.bigger-h1 {font-size: $basefont-size * 4.5; letter-spacing: -0.015em; line-height: 1.05;}

.more-stuffs {padding: 10px 0; }

.blur-heading {display: block;text-transform: uppercase; font-size: $basefont-size * 0.8; font-weight: bold; letter-spacing: 2px; position: relative; }

.underline {border-bottom: 8px solid #fedc86; }

.project {display: flex; flex-wrap: wrap;
  &__item {flex: 0 0 50%; max-width: 50%; position: relative; width: 100%; min-height: 1px; padding-right: 20px; padding-left: 20px; margin-top: 30px; 
    img {max-width: 100%; border-radius: 8px; }
    &-brief {display: block; margin-top: 20px; justify-content: space-between;
      p {/*margin-right: 50px; width: 350px; */    margin-bottom: 10px;}
      h3 {font-size: $basefont-size *1.5; line-height: 1.5; font-weight: 500; }
    }
  }
}
.cursor {position: fixed; pointer-events: none; opacity: 0; } 
.cursor-eye {top: -50px; left: -50px; padding: 20px; z-index: 1; border-radius: 50%; background-color: var(--darkblue); } 
.cursor-show {height: 60px; width: 60px; background: rgba(0,0,0,0.8); display: flex; border-radius: 100%; text-align: center; color: #FFF; justify-content: center; align-items: center; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; font-size: $basefont-size * .675; }

.techicons {/*display: flex; flex-wrap: wrap;*/ /*flex-wrap: wrap; justify-content: center;*/ list-style: none; /*overflow: auto; padding: 0;*/     margin-bottom: 0;
  li {display: inline-block; max-width: 12rem; flex-basis: 12rem; margin:.5rem; 
    a {position: relative; display: inline-flex; min-width:130px; align-items: center; /*width: calc(100% - 1em);*/ padding: 10px; line-height: 130%; color: #000; background-color: #FFF; box-shadow: 0 1px 2px rgba(0,0,0,0.2); border-radius: 8px; /*margin-bottom: 16px;*/ border: 1px solid #eee; font-size: $basefont-size * 0.8; transition: 0.3s all; 
        .ti-image {margin-right: 15px; display: flex; img{ width:24px; height:auto }
      } 
      &:hover {border-color:#fd2e35; }
    }
  }
}

.stats-light {color: #FFF;
  .why-item .big {border-color:#FEDC86; color:#FEDC86; }
}

.industries{ overflow: hidden;
  .grid{ position: relative; padding: 1em 0 2em;
    figure{ background-color: transparent !important;
      .img{ position: relative; display: block; overflow: hidden;
        img{ position:absolute; left:50%; top:50%; transform: translate(-50%, -50%) scale(1.1) rotate(2deg); transition: .35s ease all; width:100%; min-height:100%; object-fit:cover;}
        &:after{ content:''; display:block; padding-bottom:105% }
      }
      figcaption{ transition: .05s all ease; position: relative; padding: 1.2em 1.5em;
        a{    text-indent: 0; border: 1px solid; color: #fff; opacity: 1; font-size: $basefont-size * 1.125; padding: 4px 20px 8px; border-radius: 20px; margin-top: 20px; display: inline-block;}
        h2{ color:#fff; margin-top:0; padding-top:0; font-size: $basefont-size *1.375; font-weight:600; }
        p {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); padding: 0; text-overflow:ellipsis; overflow:hidden; display: -webkit-box !important;-webkit-line-clamp: 2; color: $white;-webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px; font-size: $basefont-size * 1.125; font-weight: 300;}
      }
      &:nth-child(1n){
        figcaption{background: #20376a !important;}
      }
      &:nth-child(2n){
        figcaption{background: #58698f !important;}
      }
      &:nth-child(3n){
        figcaption{background: #8f9bb4 !important;}
      }
      &:nth-child(4n){
        figcaption{background: #aeb6c7 !important;}
      }
      &:nth-child(5n){
        figcaption{background: #8f9bb4 !important;}
      }
      &:nth-child(6n){
        figcaption{background: #58698f !important;}
      }
      &:nth-child(7n){
        figcaption{background: #20376a !important;}
      }
      &:hover{
        .img img{ transform: translate(-50%, -50%) scale(1.0) rotate(0deg)}
      }
    }
  }
  .swiper-pagination{ bottom: 0; left: 50%; transform: translateX(-50%);
    .swiper-pagination-bullet{ margin:2px !important }
  }
}

.swiper-button-next, .swiper-button-prev{ height: 100px !important; width: 60px !important; background-color: $white; color: $black !important; box-shadow: 0 2px 4px rgba($black, 0.2);}

/*Services*/
.shade-big {display: inline; color: #fd2e35; font-weight: bold; text-transform: uppercase; font-size: $basefont-size * 1.25; letter-spacing: 2px; }
.lined {position: relative;
  &:after {width: 1px; height: 100%; content: ""; position: absolute; background-color: #CCC; left: 33%; top: 0; }
}

.sidebar {position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; height: 100%; top: 150px; bottom: auto; padding-bottom: 50px; }
.projects{
  .heading{font-size: $basefont-size * 2.75;}
}

.projects {display: flex; flex-wrap: wrap; /*margin-right: -20px; margin-left: -20px; */}
.project-item {flex: 0 0 50%; max-width: 50%; position: relative; width: 100%; min-height: 1px; padding-right: 20px; padding-left: 20px; margin-top: 30px; 
  img {max-width: 100%; border-radius: 8px; }
}
  .big-p {font-size: $basefont-size * 1.25; font-weight: 500; }

  div[role="progressbar"] {--size: 5rem; --fg: #fd2e35; --bg: #666; --pgPercentage: var(--value); animation: growProgressBar 3s 1 forwards; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, #333 80%, transparent 0 99.9%, #333 0), conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0) ; font-family: Helvetica, Arial, sans-serif; font-size: calc(var(--size) / 5); color: var(--fg); z-index: 9; position: relative; }

div[role="progressbar"]::before {counter-reset: percentage var(--value); content: counter(percentage) '%'; display: none; }
.p-line{ position: relative;
  &:after {position: absolute; content: ""; height: 1px; width: 100%; background-color: #FFF; top: 14%; }
}

.do-approach {
  p {font-size: $basefont-size * 0.8; color: rgba(255,255,255,0.6); } 
  .media-heading {color: #FFF; font-size: $basefont-size * 1.125; font-weight:500; margin-top:20px; margin-bottom:20px; }
}

.why-item {
  .big {font-size: $basefont-size * 4; font-weight: bold; display: block; border-bottom: 1px solid #000; } 
  .title {font-size: $basefont-size * 1.25; font-weight: 500; margin-top: 20px; display: block; } 
  p {font-size: $basefont-size * .75; opacity: 0.6; margin-top: 20px; }
}

.banner__clients{ margin-top: 30px;
  &-logos{ margin-bottom: 20px;
    blur-heading{}
    img{ width: auto; padding: 10px 20px; max-width: 150px; }
  }
}

.blur-heading {display: block; margin-top: 26px; text-transform: uppercase; font-size: $basefont-size * .8; font-weight: bold; opacity: 1; letter-spacing: 1px; position: relative;
    span{ display:inline-block; padding:5px 10px;  position: relative; z-index:1; background:$white }
    &:before {width: 300px; height: 2px; background: $black; position: absolute; content: ""; top: 50%; left: 50%; margin-left:-150px }
}

.common-card {background: #FFF; border-radius: 18px; padding: 40px; height: 100%; } 
.service-3 .common-card {min-height: 435px; margin-bottom: 28px; }
#models .bullet-points {padding-left: 0;
  li {padding-bottom: 10px; list-style: none; margin-bottom: 10px; padding-left: 30px; border-bottom:1px solid #ccc; position: relative;
    &:before{ content: ''; display: inline-block; width: 8px; height: 15px; position: absolute; left: 5px; top: 3px; /* border-radius: 100%; */ border: 2px solid #000; border-left: 0; border-top: 0; transform: rotate(45deg); }
  }
}

.lining{
  .shade {position: relative; display: block;
    &:before {height: 1px; background: #fd2e35; content: ""; position: absolute; width: 100px; left: -15%; top: 47%; }
    &.no-line{ padding-left: 0px;
      &:before{ display:none }
    }
  }
  .big-p {opacity: 0.6; }
}

.commoncard {background: #FFF; border-radius: 18px; padding: 40px; margin: .75rem 0;
  &__image {height: 60px; min-width: 60px; max-width: 60px; display: flex; border-radius: 10px; background: #fd2e35; justify-content: center; align-items: center; }
  h3 {font-size: $basefont-size * 1.4; font-weight: 700; margin-top: 30px; min-height: 55px; }
  &__content{ display:none }
}

.borderbox{
  .commoncard {
    p {font-size: $basefont-size; opacity: 0.7; }
    h3{ font-size: $basefont-size * 1.4; margin-top: 0}
  }
  img {width: 50px; }
  h3 {font-size: $basefont-size * 1.4;; }
}
.highlighted1 {box-shadow: 0 -1.4em 0 0 #fedc86 inset !important; }

.bulletpoint{ background: #fc0;
  &__item{display: flex; background: white; padding: 20px; margin-bottom: 20px; border-radius: 45px; align-items: center;
    &-number{
      img{ width:40px; height:auto }
    }
    h5 {font-size: $basefont-size * 1.125; font-weight: 600; line-height: 1.5; margin-bottom: 0; margin-left: 20px; }
  }
}

.industry_list{ margin:0; padding:0;
  li{ display: inline-block; margin:8px 16px 8px 0 ;
    a{ display:block; padding:7px 27px; font-size: $basefont-size * 1; background:#FFF; border:2px solid; color: #20376A; border-radius:30px; transition: 0.3s ease all;
      &:hover{ background:#20376A; color:#fff }
    }
  }
}

.zebra{ position: relative;
  &:before {border-bottom: 2px solid #81d4fa; content: " "; height: 1rem; left: 96%; position: absolute; width: 105px; top: 21px; } 
  &:after {background-color: #81d4fa; border-radius: 50%; content: " "; height: 20px; left: 100%; margin-left: 75px; margin-top: -5px; position: absolute; top: 30px; width: 20px; }
  .media{
    .im-step {height: 70px; width: 70px; background-color: #81d4fa; margin-right: 0 !important; line-height: 70px; font-weight: 600; font-size: $basefont-size * 2; text-align: center;}    
    .media-body {display: flex; align-items: center; font-size: $basefont-size * 1.25; background-color: #b3e5fc; height: 70px; padding-left: 20px;
      .media-heading {font-weight: 600 !important; margin: 0; font-size: $basefont-size * 1.125; }
    }
  }
}
.sml-part {padding-left: 115px; font-size: $basefont-size * 1.125; margin-top: 15px; }
.loadmore{ color:$color__text; margin-top:30px; position:relative; padding: 10px 20px;
  span{animation-name: example; animation-duration: 2s; animation-iteration-count: infinite;}
}
@keyframes example {
  0%   { opacity:1; filter: blur(0px);; }
  50%  { opacity:.1; filter: blur(5px);; }
  100% { opacity:1; filter: blur(0px);; }
}

.form-group {font-weight: 500; font-size: $basefont-size * .9; margin-bottom:20px }

.icon-box{padding: 30px;}

.inner-hero {height:calc(100vh - 0px); align-items: center; display: flex; 
  h1 {font-size: $basefont-size * 3.125; } 
  .case-points {margin-bottom: 20px; 
    .cp-label {display: block; font-size: $basefont-size * .75; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; color: #fd2e35; margin-bottom: 10px; } 
      .cp-value {font-size: $basefont-size * 1; } 
      ul.cp-value {padding-left: 17px; li {margin-bottom: 5px; } 
    }
  } 
}
.big-points {list-style: none; padding: 0; margin-top: 50px;
  li {font-size: $basefont-size * 1.25; border-bottom: 1px solid #DDD; padding: 16px 0; font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
}
.tick {color: lightgreen; }

.achieved-section{background-size:50%; background-repeat: no-repeat; background-position: right bottom;}
.service-img{ position:relative;  overflow: hidden; display: block;
  &:before{ content:''; display:block; padding-bottom:40% }
  img{ width:100%; height:auto; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) }
}
.css-case{
  .techicons li{display: flex; align-items: center;
    a {min-width: 155px;
      &:after {content: ""; position: absolute; height: 1px; width: 40px; background: #000; top: 24px; right: -50px; }
    }
  }
  .tip-title {margin-left: 60px; font-size: 14px; color: #666; }
}

ul{
  &.timeline{list-style-type: none; position: relative;
    &:before{content: ' '; background: #444fe5; display: inline-block; position: absolute; left: 29px; width: 2px; height: 100%; z-index: 400;}    
    > li {margin: 20px 0; padding-left: 20px; font-size: 16px;
      &:before {content: ' '; background: white; display: inline-block; position: absolute; border-radius: 50%; border: 3px solid #444fe5; left: 20px; width: 20px; height: 20px; z-index: 400; margin-top: 5px; }
    }
  }
}

.banner-half {
  min-height: 50vh;
  display: flex;
  align-items: center;
}


/* Industry page css */


.banner_industry_client .blur-heading:before{
  margin-left: 30px;
  width: 70px;
} 


.industry__item {
  margin: .75rem 0;
  display: flex; }
  .industry__item-title {
    font-size: 1.25rem;
    font-weight: 600;
    display: block; }
  .industry__item p {
    font-size: 1rem;
    opacity: 0.7;
    margin-top: 30px; }

.industry__item-star {
  margin-right: 20px;
  color: #fd2e35;
  font-size: 24px;
  line-height: 34px;
  font-weight: bold; }

.other_industry_item {
  background: #f4f4f4;
  border-radius: 4px;
  padding: 10px 30px;
/*  transition: all ease .3s;*/
  img {
    width: 40px;
    opacity: .5;
/*    transition: all ease .3s;*/
  }
  h4 {
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 0;
  }
  &:hover img {
    opacity: 1;
  }
}
.x-big-p {
  font-size: 1.4rem;
  opacity: .7;
}