.main_body_portfolio {

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

       
       .header {
        position: relative;
        z-index: 1;
        .wrapper_portfolio {
        .banner_portfolio  {
          .banner_bg {
              background-image: url(./../img/banner/bg6.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 {
                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;
              }
            }
          }
        }
        }
      }



      // .banner_bg {
      //   background-image: url(./../img/banner/bg6.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;
      //     }
      //   }
      // }
    



  .recent_P {
      background: $color-white;
      padding-top: 100px;
      // padding-bottom: 40px;
      .heading {
          color: $color-brand3;
          padding-bottom: 50px;
          h1 {
              text-align: center;
              color: $color-brand3;
              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: 40px;
        

          .recent_content {
             padding-bottom: 100px;

              .top {
                  color: $color-brand;
                  font-size: 20px;
                  font-weight: 600;
                  margin-bottom: 5px;
                  text-transform: uppercase;
                  padding-top: 23px;
              }
              h3 {
                  color: $color-brand3;
                  font-weight: 700;
                  font-size: 30px;
                  text-transform: uppercase;
                  padding-top: 16px;
              }

              .text {
                  padding-top: 40px;
                  padding-bottom: 40px;
              }
          }
          .recent_img {
              padding-bottom: 100px;

              max-width: 380px;
              overflow: hidden;

              position: relative;

              .move {
                  // .no-js #loader { display: none;  }
                  // .js #loader { display: block; position: absolute; left: 100px; top: 0;
                  //     -webkit-transition: 1s;
                  //     transition: 1s;
              }

              // &::after {
              //     content: " ";
              //     position: absolute;
              //     top: 0;
              //     left: 0;
              //     background-color: $color-brand;
              //     width: 100%;
              //     height: 100%;
              //     z-index: 3;
              //     display: block;
              // }
          }
          img {
              width: 100%;

              &:hover {
                  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;
              }
          }
      }
  }

  .load{
      background-color: $color-brand;
   
      .load_more{
          padding: 80px 0;
          text-align: center;
      }
  }

  .b_wrappe{
    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;
        }
      }
    }
  }
  




}


