.main_body_service{ 
  z-index: 3;
  position: relative;
  background-color: #fff;
  margin-bottom: 400px;
  @media screen and(max-width:768px) {
    margin-bottom: 800px;
       }


       .wrapper_cnt {
        position: relative;
  
        .banner {
          .banner_bg {
            background-image: url(./../img/banner/bg5.jpg);
            justify-content: center;
            width: 100%;
            margin: auto;
            background-size: cover;
            height: 100vh;
            background-repeat: no-repeat;
            background-position: center;
      
            @media screen and(max-width:768px) {
              height: auto;
            }
            .card {
              display: none;
              background: transparent;
              padding-top: 100px;
              padding-bottom: 100px;
              border: none !important;
              letter-spacing: -2px;
              // animation-name: fadeInOut;
              // animation-delay: 1s;
              // animation-duration: 3s;
              text-transform: uppercase;
              @media screen and(max-width:996px) {
                display: block;
                padding-top: 200px;
                padding-left: 100px;
              }
              @media screen and(max-width:768px) {
                display: block;
                padding-top: 200px;
                padding-left: 100px;
              }
              @media screen and(max-width:572px) {
                display: block;
                padding-top: 100px;
                padding-left: 25px;
              }
              @media screen and(max-width:450px) {
                display: block;
                padding-top: 100px;
                padding-left: 20px;
              }
              .card-title {
                font-size: 2.5vw;
                font-weight: 700;
                color: $color-brand2;
                @media screen and(max-width:996px) {
                  font-size: 25px;
                }
                @media screen and(max-width:572px) {
                  font-size: 18px;
                }
                @media screen and(max-width:768px) {
                  font-size: 25px;
                }
              }
              .card-text {
                color: $color-white;
                font-size: 3.5vw;
                font-weight: bolder;
                @media screen and(max-width:996px) {
                  font-size: 40px;
                }
                @media screen and(max-width:768px) {
                  font-size: 40px;
                }
                @media screen and(max-width:572px) {
                  font-size: 30px;
                }
              }
              .text-bottom {
                
      
                span{
                  font-size:25px;
                  color: $color-brand2;
                  font-weight: bolder;
                  padding-bottom: 40px;
                  letter-spacing: 0px;
      
                  @media screen and(max-width:572px) {
                    font-size: 20px;
                  }
                  @media screen and(max-width:415px) {
                    font-size: 14px;
                  }
                }
      
                
              }
            }
          }
          .banner_left {
            width: 100%;
            height: 100vh;
            background-color: #b22126;
      
            @media screen and(max-width:996px) {
              display: none;
            }
            p {
              // first we make all instances of this transparent.
              opacity: 0;
              // as we're using the same animation for each instance, call it here so we're not repeating it
              animation: fadeInUp 1s ease-in-out 0s forwards;
              // then define the animation delay in each class
              &.first {
                animation-delay: 1s;
              }
              &.second {
                animation-delay: 3s;
              }
              &.third {
                animation-delay: 5s;
              }
              &.fourth {
                animation-delay: 7s;
              }
              &.fifth {
                animation-delay: 9s;
              }
              &.sixth {
                animation-delay: 11s;
              }
            }
            .card {
              background: transparent;
              padding-top: 150px;
              padding-bottom: 100px;
              border: none !important;
              letter-spacing: -2px;
              // animation-name: fadeInOut;
              // animation-delay: 1s;
              // animation-duration: 3s;
              text-transform: uppercase;
              //@media screen and(max-width:768px){
              //padding-top:50px;
              //padding-bottom: 100px;
              // }
              .card-title {
                font-size: 2.5vw;
                font-weight: 700;
                color: $color-brand2;
              }
              .card-text {
                color: $color-white;
                font-size: 3.5vw;
                font-weight: bolder;
              }
              .text-bottom {
                font-size: 20px;
                color: $color-brand2;
                font-weight: bolder;
                padding-bottom: 40px;
                letter-spacing: 0px;
              }
            }
          }
        }
      
          
      }
      
      .service{
          background: $color-brand2;
          padding: 100px 0;
      
      
          @media screen and(max-width:992px) {
            padding: 50px 0px;
                       }
          .heading{
              h1 {
                  text-align: center;
                  color: $color-white;
                  text-transform: uppercase;
                  font-size: 65px;
                  letter-spacing: -2px;
                  font-weight: 700;
                  margin-bottom: 30px !important;
      
                  @media screen and(max-width:768px) {
                    font-size: 40px;
                     }
                }
          }
          .wrapper{
              padding: 0 60px;
              @media screen and(max-width:992px) {
                padding: 0;
                 }
              .service_bg{
                  background-image: url(./../img/service/1.jpg);
                  justify-content: center;
                  width: 100%;
              margin-top: 90px;
                  background-size: cover;
                  height: 50vh;
                  background-repeat: no-repeat;
                  background-position: center;
                  padding-top: 50px;
              }
      
      
              .bg2{
                  background-image: url(./../img/service/2.jpg) !important;
                  justify-content: center;
                  width: 100%;
              margin-top: 90px;
                  background-size: cover;
                  height: 50vh;
                  background-repeat: no-repeat;
                  background-position: center;
                  padding-top: 50px;
              }
      
              .bg3{
                  background-image: url(./../img/service/3.jpg);
                  justify-content: center;
                  width: 100%;
              margin-top: 90px;
                  background-size: cover;
                  height: 50vh;
                  background-repeat: no-repeat;
                  background-position: center;
                  padding-top: 50px;
              }
              .branding{
                  margin-top: 50px;
      
                  .wrapper_brand{
                    @media screen and(max-width:768px) {
                 padding-left: 30px;
                       }
                  }
                  .team_heading {
                      text-transform: uppercase;
                      margin-top: 20px;
                   
                      h5 {
                        font-size: 16px;
                        font-weight: 700;
                        color: $color-brand;
                        margin: auto;
                      }
                      span {
                        font-weight: 700;
                        color: $color-white;
                        font-size: 30px;
                        letter-spacing: 2px;
                      }
      
                      // @media screen and(max-width:992px) {
                      //   padding-left: 50px;
                      //              }
                    }
      
                    .branding_info {
                      margin-top: 40px;
                
                      ul {
                        padding-left: 0;
                        h4 {
                          color: $color-brand2;
                          font-size: 18px;
                          padding-bottom: 15px;
                        }
                      }
                      ul li::before {
                        content: "\2022";
                        color: $color-brand;
                        font-weight: bold;
                        display: inline-block;
                        width: 1em;
                        margin-left: -1em;
                      }
                      li {
                        font-size: 11px;
                        letter-spacing: 3px;
                        padding-bottom: 15px;
                        color: $color-h-bg;
                        text-transform: uppercase;
                      }
                    }
                    p{
                      font-family: 'Open Sans', sans-serif;
                      font-size: 17px;
                      line-height: 2.5rem;
                      color: $color-white;
                    }
              }
      
           
          }
      }
           // skill
      
           .skills{
             background-color: $color-brand2;
            .skill_img{
                max-width: 750px;
                @media screen and(max-width:992px) {
                  max-width: 100%;
                }
                
            img{
                width: 100%;
            }
            }
            .skill_info{
              .wrapper{
        //         -ms-transform: translate(0px,35%); /* IE 9 */
        // transform: translate(0px,35%); /* Standard syntax */
        padding-top: 100px;
      
        @media screen and(max-width:992px) {
        padding-top: 50px;
        padding-bottom: 40px;
           }
                h3{
                  color: $color-brand;
                  text-align: center;
                  font-size: 40px;
                  padding-bottom: 40px;
                }
                .progress_info{
                  padding: 20px 50px;
                  margin-bottom: 20px;
                  .p_details{
                    position: relative;
      
                    .p_heading{
      position: absolute;
      left: 0;
      bottom: 10px;
      color: $color-brand;
      font-size: 15px;
      letter-spacing: 2px;
      text-transform: uppercase;
                    }
                    .p_perc{
                      position: absolute;
      bottom: 10px;
      color: $color-brand;
      font-size: 15px;
      letter-spacing: 2px;
      text-transform: uppercase;
                   
                      right: 0;
                    }
                  }
                  .progress{
                    
                  
      
                     .progress-bar {
                        position: unset;
                        top: 0;
                        height: 3px;
                        width: 0;
                        background-image: linear-gradient(90deg, #B8C1E5 0%, #FF2E38 100%);
                        z-index: 11;
                        transition: width .2s;
                        will-change: width;
                    }
      
                    
                  }
                }
              }
            }
          
        }  
      
        // Our service
      
        .our_service{
      
          padding: 100px 0;
          @media screen and(max-width:992px) {
            padding-top: 50px;
            padding-bottom: 0;
                       }
          .heading{
            color: $color-brand2;
        padding-bottom: 50px;
        h1{
            text-align: center;
            color: $color-brand2;
            text-transform: uppercase;
            font-size: 65px;
            letter-spacing: -2px;
            font-weight: 700;
            margin-bottom: 10px;
      
            @media screen and(max-width:768px) {
              font-size: 40px;
               }
      
        }
        p{
            text-align: center;
            text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 13px;
      font-weight: 500;
      
        }
        }
      
        .wrapper {
          margin-top: 75px;
          @media screen and(max-width:992px) {
      margin-top: 0;
                       }
          
            margin: 0;
              .card {
                  border-radius: 0;
                  border: none;
                  margin-bottom: 50px;
             
                  .img_wrapper{
                      overflow: hidden;
                  }
                  .card-img-top {
                      border-radius: 0;
                     
      
                      overflow: hidden;
                  &:hover{
                          overflow: hidden;
                          transform: scale(1.1);
                         
                          -webkit-transition: all 1s ease;
                                          -moz-transition: all 1s ease;
                                          -o-transition: all 1s ease;
                                          transition: all 1s ease-in-out;
                                          transition-property: all;
      
                      }
                  }
                  .card-body {
                    margin-top: 10px;
                    margin-right: 30px;
                      .card-title {
                          font-size: 20px;
                          text-transform: uppercase;
                          color: $color-brand2;
                          padding-top: 15px;
                          
                      }
               
      
                      .card-text{
                          margin-top: 30px;
                          font-family: 'Open Sans', sans-serif;
                          font-size: 13px;
                          line-height: 29px;
                          color: $color-brand2;
                      
                         
                     }
                  }
              }
          }
      }
        
      
        // partner service
      
        .partners_service{
          background: $color-brand3;
          padding: 100px 0;
      
          .wrapper{
              h3{
            
                  color: $color-brand;
                  text-transform: uppercase;
                  font-size: 45px;
                  font-weight: 700;
                  
                  margin-bottom: 10px;
                  @media screen and(max-width:768px) {
                      font-size: 30px;
                       }
          
              }
      
              
          }
          .partners_contents{
      
              margin-top: 30px;
              padding: 60px;
      
              @media screen and(max-width:768px) {
      padding: 0;
      margin-top: 60px;
                      }
              .brd{
                  a{
                      width: 100%;
                      height: 100%;
                      border: 1px solid;
                      border-color: red;      
                      display: block;    
                      border-top-color: transparent;   
                      border-left-color: transparent;
                      
                  }
          
                  &:nth-child(4) {
                      a {
                          border-right-color: transparent !important;
                      }
                  }
      
                  @media screen and(max-width:768px) {
                      &:nth-child(2) {
                          a {
                              border-right-color: transparent !important;
                          }
                      }
                  }
                  @media screen and(max-width:768px) {
                      &:nth-child(6) {
                          a {
                              border-right-color: transparent !important;
                          }
                      }
      
      
                      &:nth-child(10) {
                          a {
                              border-right-color: transparent !important;
                              border-bottom-color: transparent !important;
                          }
                      }
                  }
                  &:nth-child(8) {
                      a {
                          border-right-color: transparent !important;
                      }
                  }
      
      
                  &:nth-child(9) {
                      a {
                          
                          border-bottom-color: transparent !important;
                      }
                  }
      
                  &:nth-child(10) {
                      a {
                          
                          border-bottom-color: transparent !important;
                      }
                  }
      
                  &:nth-child(11) {
                      a {
                          
                          border-bottom-color: transparent !important;
                      }
                  }
      
                  &:nth-child(12) {
                      a {
                          border-right-color: transparent !important;
                          border-bottom-color: transparent !important;
                      }
                  }
      
                  @media screen and(max-width:768px) {
                      &:nth-child(11) {
                          a {
                    
                              border-top-color: red !important;
                          }
                      }
                      &:nth-child(12) {
                          a {
                    
                              border-top-color: red !important;
                          }
                      }
                  }
              }
            
          }
         
      }
            
      
      
              .part_wrapp{
                  margin: auto;
      padding:40px 20px;
                 max-width: 200px;
                 
                  img{
                    
                      width: 100%;
                     &:hover{
      
                      -moz-transition: all 500ms linear;
              -webkit-transition: all 500ms linear;
              -o-transition: all 500ms linear;
              transition: all 500ms linear;
              filter: grayscale(100%) sepia(100%) brightness(102%) hue-rotate(128deg) saturate(1000%) contrast(1000%) invert(100%);
      -webkit-filter: grayscale(100%) sepia(100%) brightness(102%) hue-rotate(128deg) saturate(1000%) contrast(1000%) invert(100%);
      -moz-filter: grayscale(100%) sepia(100%) brightness(102%) hue-rotate(128deg) saturate(1000%) contrast(1000%) invert(100%);
                    
                     }
                  }
                  
              }
        
      
 /* defines the animation */
// @keyframes fadeInUp {
//   from {
//     opacity: 0;
//     -webkit-transform: translate3d(0, 100%, 0);
//     transform: translate3d(0, 100%, 0);
//   }
//   to {
//     opacity: 1;
//     -webkit-transform: none;
//     transform: none;
//   }
// }
.b_wrapp{
  position: absolute;
  bottom: 40px;
  z-index: 999;
  right: 26%;
  @media screen and(max-width:650px) {
    right: 40%;
    bottom: 20px;
  }
  .btn.btn-down {
  position: relative;
  z-index: 999;
color: $color-white;
  &::after{
  display: block;
  top: 103%;
left: 50%;
position: absolute;
  content: '';
  width: 16px;
  height: 16px;
  margin: -12px 0 0 -8px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
   }
   &::before{
  display: block;
    position: absolute;
      top: 26%;
      left: 29%;
      z-index: -1;
      content: '';
      width: 44px;
      height: 44px;
      box-shadow: 0 0 0 0 rgba(255,255,255,.1);
      border-radius: 100%;
      opacity: 0;
      -webkit-animation: sdb03 3s infinite;
      animation: sdb03 3s infinite;
      box-sizing: border-box;
    }
    @-webkit-keyframes sdb03 {
      0% {
        opacity: 0;
      }
      30% {
        opacity: 1;
      }
      60% {
        box-shadow: 0 0 0 60px rgba(255,255,255,.1);
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }
    @keyframes sdb03 {
      0% {
        opacity: 0;
      }
      30% {
        opacity: 1;
      }
      60% {
        box-shadow: 0 0 0 60px rgba(255,255,255,.1);
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }
  }
}
     
             
}







        