.main_body_about{
  z-index: 2;
  position: relative;
  background-color: #fff;
  margin-bottom: 500px;
  @media screen and(max-width:768px) {
margin-bottom: 800px;
  }
.header {
  position: relative;
  z-index: 1;
  .wrapper_about {
  .banner_about {
    .banner_bg {
      background-image: url(./../img/banner/bg4.jpg) !important;
      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 {
          font-size: 30px;
          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;
        }
      }
    }
  }
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.about_sec {
  .about_main {
    background: $color-brand2;
    padding: 50px 0;
    .wrapper_a {
      padding: 100px;
      @media screen and(max-width:768px) {
        padding: 20px 30px;
      }
      .who {
        font-size: 28px;
        font-weight: 700;
        color: $color-brand;
        letter-spacing: 1px;
      }
      .who_details {
        font-family: "Open Sans", sans-serif;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.7em;
        letter-spacing: 2px;
        color: $color-h-bg;
        @media screen and(max-width:768px) {
margin-top: 20px;
font-size: 14px;
font-weight: normal;
        }
      }
    }
    .abt_bottom {
      margin-top: 40px;
      padding-top: 40px;
      ul {
        padding-left: 0;
        @media screen and(max-width:768px) {
padding-left: 15px;
        }
        h4 {
          color: $color-brand;
          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;
      }
    }
  }
  .team {
    background: $color-brand3;
    padding: 100px;
    @media screen and(max-width:768px) {
   padding: 50px 20px;
              }
    .mg {
      margin: 50px 0;
      @media screen and(max-width:768px) {
    margin: 0;
                }
    }
    .team_heading {
      text-transform: uppercase;
      margin-top: 20px;
      h5 {
        font-size: 16px;
        font-weight: 700;
        color: $color-brand;
        @media screen and(max-width:768px) {
font-size: 15px;
                  }
      }
      span {
        font-weight: 700;
        color: $color-white;
        font-size: 30px;
        letter-spacing: 2px;
        @media screen and(max-width:768px) {
    font-size: 24px;
                  }
      }
    }
    .img_wrapper {
      margin: 20px;
      @media screen and(max-width:768px) {
   margin: 20px 0;
   padding-top: 20px;
                }
      .team_img {
        max-width: 400px;
        @media screen and(max-width:768px) {
         max-width: 100%;
                  }
        img {
          width: 100%;
        }
      }
      h6 {
        font-size: 18px;
        font-weight: 700;
        color: $color-white;
        padding-top: 15px;
      }
      p {
        font-size: 12px;
        letter-spacing: 3px;
        color: $color-white;
      }
    }
  }
  .creative {
    background-color: $color-off-white;
    padding: 100px;
    @media screen and(max-width:992px) {
      padding: 50px 0px;
                 }
    .mg {
      margin: 50px 0;
      @media screen and(max-width:768px) {
        margin-top: 15px;
         }
    }
    .wrapper{
    .heading {
      padding-bottom: 50px;
      h1 {
        text-align: center;
        color: $color-brand2;
        text-transform: uppercase;
        font-size: 65px;
        letter-spacing: -2px;
        font-weight: 700;
        margin:0;      
        @media screen and(max-width:768px) {
          font-size: 40px;
           }
      }
    }
    .wrapper_2{
      padding: 0 50px;
      margin: 50px 100px;
      @media screen and(max-width:768px) {
        margin: 0;
         }
    .top{
      color: $color-text;
      font-family: 'Open Sans', sans-serif;
      font-size: 14px;
      line-height: 29px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing:0;
    }
    .bottom{
      margin-top: 40px;
      .text{
        color: $color-brand2;
      }
    }
  }
}
.slider_part{
  margin: 0 -100px;
  padding-top: 50px;
  @media screen and(max-width:992px) {
    margin: 0;
     }
  .create_img{
    transform: translate3d(375px, 0px, 0px);
    @media screen and(max-width:768px) {
      transform: translate3d(75px, 0px, 0px);
       }
       @media screen and(max-width:415px) {
        transform: translate3d(0px, 0px, 0px);
         }
    .img_wrapper{
      max-width: 750px;
      @media screen and(max-width:768px) {
        max-width: 400px;
         }
      img{
        width: 100%;
      }
    }
    padding-bottom: 50px;
  }
  .owl-carousel {
    position: relative;
    .owl-item {
  // max-width: 750px;
    }
    .owl-nav {
      position: absolute;
      right: 40%;
      bottom: -20%;
      width: 250px;
      text-align: center;
      padding-top: 23px;
      @media screen and(max-width:992px) {
 bottom: -10%;
           }
      @media screen and(max-width:768px) {
      right: 35%;
      bottom: -20%;
         }
         @media screen and(max-width:415px) {
         right: 21%;
           }
    }
    .owl-prev {
      color: $color-brand2;
      margin-right: 15px;
      //   &::after{
      //   content: "";
      //   position: absolute;
      //   height: 3px;
      //   width: 18px;
      //   background-color: #f0f0f0;
      //   top: 59px;
      //   left: 78px;
      //   display: none;
      // }
      &:hover {
        color: $color-brand2;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        padding-right: 15px;
        &::after {
          content: "";
          position: absolute;
          height: 3px;
          width: 33px;
          background-color:  $color-brand2;
          top: 59px;
          left: 75px;
          display: block;
          -webkit-transition: 0.5s;
          transition: 0.5s;
        }
        i {
          font-size: 45px;
          -webkit-transition: 0.5s;
          transition: 0.5s;
        }
      }
      i {
        font-size: 45px;
        padding: 15px;
      }
    }
    .owl-next {
      color: $color-brand2;
      &::after {
        content: "";
        position: absolute;
        height: 3px;
        width: 5px;
        background-color: #f0f0f000;
        top: 58px;
        left: 153px;
        display: block;
      }
      &:hover {
        color:  $color-brand2;
        padding-left: 15px !important;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        &::after {
          content: "";
          position: absolute;
          height: 3px;
          width: 40px;
          background-color:  $color-brand2;
          top: 59px;
          left: 139px;
          display: block;
          -webkit-transition: 0.5s;
        transition: 0.5s;
        }
        i {
          font-size: 45px;
          padding: 15px;
        }
      }
      i {
        font-size: 45px;
        padding: 15px;
      }
    }
    .owl-dots {
      position: absolute;
      bottom: 5%;
      right: 5%;
      @media screen and(max-width:1000px) {
        left: 150px;
      }
      @media screen and(max-width:768px) {
        left: 100px;
      }
      @media screen and(max-width:600px) {
        left: 75px;
      }
    }
  }
}
  }
  .pricing{
    background-color: $color-brand2;
    padding: 100px;
    @media screen and(max-width:992px) {
      padding: 50px 0px;
                 }
    .mg {
      margin: 50px 0;
      @media screen and(max-width:768px) {
        margin-top: 15px;
         }
    }
    .wrapper{
      padding: 0 50px;
      @media screen and(max-width:1250px) {
      padding: 0;
         }
      .heading{
    padding-bottom: 50px;
    h1{
        text-align: center;
        color: $color-white;
        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;
 color: $color-brand;
    }
    }
.cd2{
 .card-title{
   padding: 40px 0  !important;
 }
 .card-body{
   padding-bottom: 30px !important;
 }
 @media screen and(max-width:768px) {
margin-top: 80px;
margin-bottom: 60px;
  .card-body{
    padding-bottom: 0px !important;
  }
  .card-title{
    padding: 20px 0  !important;
  }
   }
}
.cd1{
  margin-top: 20px !important;
}
.cd3{
  margin-top: 20px !important;
}
    .card{
      border: none;
      background:$color-brand3;
      padding-bottom: px;
      border-top-left-radius: 8px !important;
          border-top-right-radius: 8px !important;
          border-bottom-left-radius: 8px !important;
             border-bottom-right-radius: 8px !important;
           .card-body{
            border: none;
             padding: 0;;
             border-bottom-left-radius: 8px !important;
             border-bottom-right-radius: 8px !important;
             margin-bottom: 30px;
             padding-bottom: 20px;
        .card-title{
          background:$color-brand;
          border: none;
          padding: 22px 0;
          font-size: 15px;
          color: $color-black;
          border-top-left-radius: 8px !important;
          border-top-right-radius: 8px !important;
          margin-bottom: 0;
        }
        .card-text{
          border: none;
          background-color: $color-brand3;
        padding-top: 40px;
        font-size: 75px;
        color: $color-white;
        font-weight: normal;
        p{
          text-transform: uppercase;
          font-size: 15px;
          margin-bottom: 0;
        }
        }
        .card-content{
          background-color: $color-brand3;
padding:40px 0;
          .tick{
            max-width: 10px;
            position: absolute;
            img{
              width: 100%;
            }
          }
          ul{
            li{
              position: relative;
              padding-bottom: 15px;
              &:last-child{
                padding-bottom: 0;
              }
              span{
                text-transform: uppercase;
                color: $color-white;
                letter-spacing: 5px;
                text-align: center;
                font-size: 11px !important;
              }
            }
          }
        }
      }
    }
    }
  }
}
   
  .testimonial_main{
    padding-bottom: 70px;
        margin-top: 100px;
        margin-bottom: 100px;
        @media screen and(max-width:768px) {
          padding-bottom: 130px;
         }
    .test_content{
        .test_img{
            max-width: 120px;
            margin: auto;
            img{
                width: 100%;
                border-radius: 50%;
            }
        }
        .test_details{
            margin-top: 60px;
            position: relative;
            background-color: $color-brand;
            padding: 30px 20px;
            font-family: 'Open Sans', sans-serif;
        font-size: 15px;
        line-height: 29px;
        letter-spacing: 2px;
        color:$color-white;
        font-weight: 700;
        text-align: justify;
        &:after{
            content: " ";
            position:absolute;
            background-color: $color-brand;
            height: 20px;
            width: 20px;
            left: 50%;
    top: -10px;
            -webkit-transform: translateX(-50%) rotate(45deg);
    -ms-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
        }
        }
        .name{
            margin-top: 20px;
            text-align: center;
            color: $color-brand2;
            font-size: 16px;
            font-weight: 700;
            span{
                color: $color-grey;
            }
        }
    }
        #owl-theme2 button.owl-dot span {
            height: 8px;
            width: 8px;
            color: $color-white;
            background-color:$color-brand2;
            display: block;
            font-weight: bolder;
            border-radius: 50%;
            margin: 20px;
          }
          #owl-theme2 button.owl-dot.active span {
            color: $color-hover;
            height: 12px;
            width: 12px;
            font-size: 25px;
            -webkit-transition: 1s;
        transition: 1s;
          }
          #owl-theme2 {
            position: relative;
       .owl-dots {
              position: absolute;
              bottom: -14%;
              right: 38%;
              -webkit-transform:translateX(-21%) rotate(-1deg);
              -ms-transform:translateX(-21%) rotate(-1deg);
              transform:translateX(-21%) rotate(-1deg);
              @media screen and(max-width:1000px) {
               right:31%;
              }
              @media screen and(max-width:768px) {
                right:25%;
              }
              @media screen and(max-width:650px) {
                right:26%;
              }
              @media screen and(max-width:500px) {
                right:21%;
              }
              @media screen and(max-width:414px) {
                right:15%;
                bottom: -10%;
              }
              @media screen and(max-width:375px) {
                right:11%;
              }
            }
          }
        }
}
