// abstracts
  @import '../abstracts/mixins'; // Sass Mixins Folder
  @import '../abstracts/variables'; // Sass Variables

// core/
  @import '../core/typography'; // Typography Rules

/*.banner{display: flex; height: 100vh; align-items: center;
  &__heading{font-size: $basefont-size * 5.125; margin-bottom: 50px; font-weight: 800; letter-spacing: -0.015em;}
  p {font-size: $basefont-size * 1.125; margin-top:50px }
}

.creds{display: flex;
  &__item{margin-right: 30px; min-width: 130px;}
  span{ display:block }
  &__number { font-size: $basefont-size * 1.875; font-weight: bold; color: $color__secondary;}
  &__cnt{ font-size: $basefont-size * 0.875; letter-spacing: 1px; text-transform: uppercase;}
}*/

.banner-hero  {display: flex; height:100vh; align-items: center; 
  h1 {font-size:$basefont-size * 5.125; margin-bottom: 50px; font-weight: 800; letter-spacing:-0.015em; transform:skew(0deg,-6deg); color:#20376A; } 
  p {font-size: $basefont-size * 1.25; font-weight:500; opacity:0.7; } 
  &__left {width: 50%; padding-left: 100px; padding-right: 10px; display: flex; flex-direction: column; justify-content: center; } 
  &__right {width: 50%; }
  .line1 {position: absolute; transform: rotate(-55deg); right: -239px; top: 106px; } 
  .line2 {position: absolute; transform: rotate(-55deg); left: -121px; top: 106px; }
}

/*.services{
  &__sidebar {position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; height: 100%; top: 150px; bottom: auto; padding-bottom: 50px; }

  &__wrapper {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    &-item {width: 100%; padding: 30px; margin-bottom: 50px; display: flex; align-items: flex-start;
      &:first-child {margin-top:100px; }
      &:last-child {margin-bottom: 0; }
      .icon {margin-right: 50px;
        ion-icon {font-size: $basefont-size * 3.75; color: $color__primary; }
      }
      img {margin-right:50px; }  
      .number {font-size:$basefont-size * 2; display: block; margin-right: 30px; line-height: 1; color: $color__primary; }
    }
  }
  &__item-body {width: 80%;    
    h5 {margin-top: 0px; font-size:$basefont-size * 1.75; } 
    p {font-size: $basefont-size * 1.125; font-weight: 500; margin-top: 20px; }
    ul {padding-left: 17px; font-size: $basefont-size * 0.9; 
      li {margin-bottom: 10px; }
    }
    .link-arrow {display: flex; align-items: center; margin-top: 20px; color: #cf307d; font-size: $basefont-size * 0.9; font-weight:500;
      .fa { font-size: $basefont-size * 1; margin-right: 10px; width: 30px; height: 30px; border: 2px solid; border-radius: 100%; text-align: center; line-height: 27px;}
    }
  } 
}*/

.service {position: relative; border-top: 1px solid #f0f4f7; border-bottom: 1px solid #f0f4f7;
  &:after {position: absolute; content:""; height: 100%; width: 60%; background: #f0f4f7; top:0; z-index: -1; }
  &__sidebar {position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; height: 100%; top: 150px; bottom: auto; padding-bottom: 50px;
    .heading{ padding-right:150px }
  }
  &__wrapper {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    &-item {width: 100%; margin-bottom: 150px; display: flex; align-items: flex-start;
      &:first-child {margin-top:100px; }
      &:last-child {margin-bottom: 0; }
      ul {padding-left: 17px; font-size: $basefont-size * .9; font-weight:600; margin-top:30px; color:#000;
        li {margin-bottom: 10px; }
      }      
      .link-arrow {margin-top: 30px; }
      .icon {margin-right: 50px;
        ion-icon {font-size: $basefont-size * 3.75; color: $color__primary; }
      }
      img {margin-right:50px; } 
      h5 {margin-top: 0px; font-size: $basefont-size * 3.125; letter-spacing:-0.015em; color:#000; } 
      p {font-size: $basefont-size * 1.125; font-weight: 500; margin-top: 20px; opacity:0.7; } 
      .number {font-size:$basefont-size * 4.5; display: block; margin-right: 20px; line-height: 1; font-weight:800; opacity:0.1; }

    }
  }
} 

.reviewsection{background-color:#474747; color: #fff;
  h2 {font-size: $basefont-size * 3.875; }
  .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 * 1.125; opacity: 0.6; margin-top: 20px; }
  }
}

.client_logo{
  h5{  margin-bottom:50px; position: relative;
    span{color:#fff; background: #474747; display: inline-block; padding:5px 30px; position: relative; z-index: 1; letter-spacing: 3px; text-transform: uppercase; font-size: $basefont-size * 1; }
    &:after{ content:''; position:absolute; left:0; top:50%; border-top:1px solid rgba(255,255,255,.1); width:100%; height:1px; z-index:0 }
  }
  ul{ margin: 0; padding: 0; list-style: none;
    li{ border-right: 1px solid rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.3);      
      a{ display:block; transition: .5s ease all; cursor: default; position: relative;
        &:after{ content:''; display:block; padding-bottom:100% }
        img{ width: 110px; filter: grayscale(100%); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)}
        span{ display:block; width:100%; color:rgba(255,255,255,.6); font-size:$basefont-size * 1; text-transform:uppercase }
      }
    }
    &.col8{display: grid; gap: 0; grid-template-columns: repeat(5, 1fr); grid-template-rows: masonry; width: 940px; margin:0 auto;
      li{ /*width: 12.5% !important; break-inside: avoid;*/ position: relative;
        a{
          img{ width:60% !important}
        }
        &.bouble{background-color: #fff; color: #474747; grid-column: span 2; 
        }    
        .stats_feature{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);min-width: 170px;
          span{ display:block;
            &:last-child{font-size: $basefont-size * .8; line-height: 18px; margin-top: 5px}
          }
          .big-text {font-size:$basefont-size * 2.5; font-weight: 700; color: #474747; display: inline-block; line-height: 100%;}
        }
      }
    }
  }
}