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

          //  .banner {
          //   .banner_bg {
          //     background-image: url(./../img/banner/bg8.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;
          //       }
          //     }
          //   }
          // }
    // Blog main
    .blog_main {
        padding: 100px 0;

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

            @media screen and(max-width:1200px) {
               margin-right: 30px;
               padding: 0;
            }
            .blog_wrapper {
                margin: 0 30px;
                @media screen and(max-width:1200px) {
                    margin-right: 0px;
                 }
                a{text-decoration: none;}
                .card {
                    border-radius: 0;
                    border: none;
                    padding: 40px 0;
                    .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;
                        .card-title {
                            font-size: 30px;
                            text-transform: uppercase;
                            color: $color-brand3;
                            padding-top: 15px;
                            margin: 0 10px;
                        }
                        .title_details {
                            font-size: 16px;
                            padding-top: 15px;
                            margin: 0 10px;
                            line-height: 1.8;
                            font-weight: 600;
                            letter-spacing: 0px;
                            font-family: "Open Sans", sans-serif;
                            color: $color-brand2;
                        }
                        .blog-links {
                            padding-top: 20px;
                            margin-top: 10px;
                        }
                        ul {
                            display: flex;
                            padding-left: 0;
                            .icon {
                                max-width: 20px;
                                display: block;
                                img {
                                    width: 100%;
                                }
                            }
                            li {
                                padding: 0 10px;
                                a {
                                    color: $color-grey;
                                    text-decoration: none;
                                    text-transform: uppercase;
                                    letter-spacing: 2px;
                                    font-size: 11px;
                                    &:hover {
                                        color: $color-hover;
                                    }
                                }
                            }
                        }
                        .card-text {
                            margin-top: 30px;
                            display: flex;
                            justify-content: space-between;
                            span {
                                a {
                                    color: $color-brand3;
                                    text-decoration: none;
                                    text-transform: uppercase;
                                    letter-spacing: 2px;
                                    font-size: 12px;
                                    font-weight: 700;
                                    &:hover {
                                        color: $color-hover;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

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