.main_body_project {
    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_project {
        .banner_project {
          .banner_bg {
            background-image: url(./../img/banner/bg7.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.7vw;
                font-weight: 700;
                color: $color-brand2;
              }
              .card-text {
                color: $color-white;
                font-size: 4.3vw;
                font-weight: bolder;
              }
              .text-bottom {
                font-size: 28px;
                color: $color-white;
                font-weight: bolder;
                padding-bottom: 40px;
                letter-spacing: 2px;
                span{
                    padding-right: 40px;
                }
              }
            }
          }
        }
      }
    }
    

    .project{
        background: $color-brand;
        padding: 100px 0;


        @media screen and(max-width:768px){
          padding: 40px 0;
        }

        .wrapper{
            .branding{
                margin-top: 50px;


                @media screen and(max-width:768px){
                  margin-top: 0px;
                }
                .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-brand2;
                      margin: auto;
                    }
                    span {
                      font-weight: 700;
                      color: $color-white;
                      font-size: 30px;
                      letter-spacing: 2px;
                    }
                  }
    
                  .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-brand2;
                      font-weight: bold;
                      display: inline-block;
                      width: 1em;
                      margin-left: -1em;
                      position: absolute;
left: -8px;
                    }
                    li {
                      font-size: 11px;
                      letter-spacing: 2px;
                      padding-bottom: 16px;
                      font-weight: 600;
                      color: $color-white;
                      text-transform: uppercase;
                      position: relative;
                    }
                  }
                  p{
                    font-family: 'Open Sans', sans-serif;
                    font-size: 17px;
                    line-height: 2.5rem;
                    color: $color-white;
                  }
            }
        }
    }
   

    // project details

    .project_details{
        background: $color-white;
        padding: 100px 0;

        @media screen and(max-width:768px){
          padding: 40px 0;
        }
        .wrapper{
            padding: 0 50px;

            @media screen and(max-width:768px){
              padding: 0px 20px;
            }
            @media screen and(max-width:415px){
              padding: 0px 10px;
            }
           .project_heading{
               color: $color-brand;
               font-size: 30px;
               font-weight: 700;
               padding-bottom: 40px;
           }

           .project_desc{
            font-family: 'Open Sans', sans-serif;
            font-size: 17px;
            line-height: 2.5rem;
          color: $color-grey;
          font-weight: 500;
           }

         
        }
        // .project_top{

        // }
        .project_bottom{
            margin-top: 50px;
            margin-bottom: 50px;
            .single{
               max-width: 460px;

               @media screen and(max-width:992px){
               max-width: 990px;
               padding-bottom: 30px;
               object-fit: cover;
              }

               img{
                 width: 100%;
               
               }
            }

            .single_2{
                color: $color-brand2;
                font-size: 25px;
                padding-bottom: 30px;
            }
        }


        .single_3{
          max-width: 1600px;
          img{
            width: 100%;
          }
        }
    }



.part_two{
.wrapper{
  padding: 0 50px;

  @media screen and(max-width:768px){
    padding: 0px 20px;
  }

  @media screen and(max-width:415px){
    padding: 0px 10px;
  }
  .project_heading{
    color: $color-brand;
    font-size: 30px;
    font-weight: 700;
    padding-bottom: 40px;
}

.project_desc{
 font-family: 'Open Sans', sans-serif;
 font-size: 17px;
 line-height: 2.5rem;
color: $color-grey;
font-weight: 500;
}


}
.wrapper_part_two{
  margin-top: 40px;
  padding-bottom: 100px;

  @media screen and(max-width:768px){
  margin-top: 0;
  padding-bottom: 0px;
  }
  .single_img_part_two{
max-width: 1000px;
margin: auto;
padding-top: 40px;

img{
  width: 100%;
}

&:nth-child(4) {
  img {
margin-bottom: 100px;
    
  }
}
  }
  
}

.project_top{

  .wrapper_3{
    position: relative;
    top: 100%;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%)
  }
.img_nine{
  max-width: 1000px;
  @media screen and(max-width:768px){
    margin-top: 40px;
   
    }
  img{
    width: 100%;
  }
}
}

.single_3{
  max-width: 1600px;
  margin-top: 100px;
  img{
    width: 100%;
  }
}
}






.project_last{
  background: $color-brand2;
  padding: 100px 0;
  @media screen and(max-width:768px){
         padding: 50px 0;
  }
  .wrapper{
      .branding{
          margin-top: 50px;
          @media screen and(max-width:768px){
         
            }

          .wrapper_brand{
            @media screen and(max-width:768px) {
         padding-left: 20px;
         padding-bottom: 30px;
               }
          }

          .team_heading {
              text-transform: uppercase;
              margin-top: 20px;
           
              h5 {
                font-size: 16px;
                font-weight: 700;
                color: $color-brand2;
                margin: auto;
              }
              span {
                font-weight: 700;
                color: $color-white;
                font-size: 30px;
                letter-spacing: 2px;
              }
            }

            .branding_info {
              margin-top: 40px;
        
          .own{
           
            p{
              font-size: 17px;
              color: $color-white;
              font-weight: 700;
            }
            
            span{
              font-size: 17px;
              color: $color-white;
              font-weight:200;
              padding-top: 10px;
            }
          }
            }
            p{
              font-family: 'Open Sans', sans-serif;
              font-size: 17px;
              line-height: 2.5rem;
              color: $color-white;
            }
      }
  }
}

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

}





  
  