@import 'partials';

.inner-banner{
    &.invester-banner{background-image: url(../img/for-investors-banner.png); }
}

.help-u-wrap{padding:75px 0; background: #F0F0F3;
    .head-wrap{ text-align: center; padding: 0 0 100px 0;
        .title{ font-size:44px; color: #2F2F7D; font-weight: 400; font-family: $secondary-font; line-height: 1.4; }
    }
    .box-wrap{background: #ffffff; border-radius: 10px; padding:100px 45px 50px 45px; height: 100%; position: relative;
        .img{ background: #FFFFFF; width: 109px; height: 109px; border-radius: 50%; box-shadow: 0px 10px 50px 0px rgba(235,235,252,1); display: flex; align-items: center; justify-content: center; margin: -55px auto 0 auto; position: absolute; left: 0; right: 0; top: 0;
            img{}
        }
        .sub-title{ color: #080836; padding: 0 0 40px 0; font-size: 22px; line-height: 1.2; font-weight: 600; margin: 0;
            .break{display: block;}
        }
        .para{font-size: 18px; color: #080836; line-height: 1.8; margin: 0; padding: 0;}
    }
}

.services-wrap{ padding: 90px 0; background: #fff;
    .head-wrap{max-width: 970px; margin: 0 auto; text-align: center; padding: 0 0 70px 0;
        .title{ font-size:32px; color: #2F2F7D; font-weight: 400; font-family: $secondary-font; line-height: 1.2; margin: 0; padding: 0 0 30px 0;}
        .para{font-size: 16px; color: #080836; line-height: 1.4; margin: 0; padding: 0;}
    }
    .listing-wrap{
        .listing{ display: flex; flex-wrap: wrap; margin: 0 -10px;
            li{ padding: 0 10px; width: 33.33333%; flex: 0 0 33.3333%; list-style: none; margin-bottom: 20px;
                .content{ background: #F4F4F7; border-radius: 10px; padding: 40px 30px; height: 100%; display: flex; align-items: center; transition: all 0.3s ease;
                    .img{ display: flex; align-items: center; justify-content: center; width: 93px; height: 93px; background: #fff; border-radius: 50%; flex: 0 0 93px;  margin: 0 25px 0 0;
                        img{}
                    }
                    span{ font-size: 26px; color: #262677; line-height: 1.2; font-weight: 400; font-family: $secondary-font;}
                    &:hover{background: #262677;
                        span{color: #fff;}
                    }
                }
            }
        }
    }
}


.testimonial-section{
    background-color:  #F0F0FF;
    padding: 80px 0px;
    @media($sm-1679){
     padding: 80px 0px;
     }
     @media($sm-1481){
         padding: 60px 0px;
     }
     @media($sm-1199){
         padding: 40px 0px 80px 0px;
     }
     .title-sec{
         padding-bottom: 50px;
         @media($sm-1679){
             padding-bottom: 40px;
         }
         @media($sm-1481){
             padding-bottom: 30px;
         }
         @media($sm-1199){
             padding-bottom: 20px;
         }
         .subtitle{
             color: #080836;
             font-weight: 600;
             font-size: 16px;
             line-height: 1.2;
             text-align: center; padding-bottom: 30px;
             @media($sm-1679){
                 font-size: 14px;
                 line-height: 28px;
             }
 
         }
         .title-testimonial{
             font-family:$secondary-font;
             font-weight: 400;
             font-size: 46px;
             line-height: 1.6;
             text-align: center;
             color: #2F2F7D;
             @media($sm-1679){
                 font-size: 38px;
                 line-height: 46px;
               }
               @media($sm-1481){
                 font-size: 36px;
                 line-height: 44px;
               }
               @media($sm-1199){
                 font-size: 34px;
                 line-height: 42px;
               }
               @media($sm-991){
                 font-size: 28px;
                 line-height: 40px;
                 br{
                     display: none;
                 }
               }
               @media($sm-767){
                 font-size: 26px;
                 line-height: 38px;
               }
               @media($sm-579){
                 font-size: 24px;
                 line-height: 34px;
               }
         }
     }
     .slick-track{display: flex;}
     .testimonial{
         border: 1px solid #E1E1F5;
         border-radius: 16px;
         margin: 0px 10px;
         padding: 35px; height: auto;
         @media($sm-991){
             padding: 20px;
         }
 
         .heading{
             font-family:$secondary-font;
             color: #2F2F7D;
             font-weight: 400;
             font-size: 28px;
             line-height: 1.4; margin: 0; padding-bottom: 15px;
             @media($sm-1679){
                 font-size: 26px;
                 line-height: 34px;
             }
             @media($sm-1481){
                 font-size: 24px;
                 line-height: 32px;
             }
             @media($sm-1199){
                 font-size: 22px;
                 line-height: 30px;
             }
             @media($sm-991){
                 font-size: 18px;
                 line-height: 28px;
             }
             @media($sm-767){
                 font-size: 16px;
                 line-height: 26px;
             }
 
         }
         .testi-content{
             color: #080836;
             font-weight: 400;
             font-size: 18px;
             line-height: 2;
              margin: 0;
             @media($sm-1679){
                 font-size: 16px;
                 line-height: 26px;
             }
             @media($sm-1481){
                 font-size: 14px;
                 line-height: 24px;
             }
 
         }
         .author-info{
             display: flex;
             align-items: center;
             padding-top: 10px;
             @media($sm-1679){
                 padding-top: 10px;
             }
             .author-img{
                 margin-right: 23px;
                 width: 65px;
                 height: 65px;
                 border-radius: 50px;
                 flex-shrink: 0;
                 @media($sm-1679){
                     width: 55px;
                     height: 55px;
                    
                 }
                 @media($sm-1481){
                     width: 50px;
                     height: 50px;
                 }
                 img{
                     width: 100%;
                     height: 100%;
                     object-fit: cover;
                 }
             }
             .author-details{
                 font-family: 'Timeless';
                 font-weight: 700;
                 font-size: 20px;
                 color: #2E2E78;
                 @media($sm-1679){
                     font-size: 18px;
                 }
                 @media($sm-1481){
                     font-size: 16px;
                 }
                 @media($sm-1199){
                     font-size: 14px;
                 }
             }
         }
     }
     .slick-next:before, .slick-prev:before {
         display: none;
     }
     .slick-prev,.slick-next{
         width: 30px;
         height: 30px;
         bottom: 0;
         top: unset;
         cursor: pointer;
        
      
     }
     .slick-prev{
         left: unset;
         right: 59px;
         bottom: -60px;
        
     }
     .slick-next{
         bottom: -47px;
         right: 20px;
     }
     .slick-next{
         transform: rotate(180deg);
     }
 }










 // process

.the-process {
    padding: 120px 0;

    .title-sec{
        padding-bottom: 50px;
        @media($sm-1679){
            padding-bottom: 40px;
        }
        @media($sm-1481){
            padding-bottom: 30px;
        }
        @media($sm-1199){
            padding-bottom: 20px;
        }
        .subtitle{
            color: #080836;
            font-weight: 600;
            font-size: 16px;
            line-height: 33px;
            letter-spacing: 0%;
            text-align: center;
            @media($sm-1679){
                font-size: 14px;
                line-height: 28px;
            }

        }
        .title-testimonial{
            font-family:$secondary-font;
            font-weight: 400;
            font-size: 46px;
            line-height: 59px;
            letter-spacing: 0%;
            text-align: center;
            color: #2F2F7D;
            @media($sm-1679){
                font-size: 38px;
                line-height: 46px;
              }
              @media($sm-1481){
                font-size: 36px;
                line-height: 44px;
              }
              @media($sm-1199){
                font-size: 34px;
                line-height: 42px;
              }
              @media($sm-991){
                font-size: 28px;
                line-height: 40px;
                br{
                    display: none;
                }
              }
              @media($sm-767){
                font-size: 26px;
                line-height: 38px;
              }
              @media($sm-579){
                font-size: 24px;
                line-height: 34px;
              }
        }
    }
  
    .process-item {
      padding: 0 50px;
      border-radius: 30px;
  
      .item-row {
        position: relative;
  
        &:before {
          position: absolute;
          content: "";
          height: 100%;
          width: 6px;
          background: #dadaed;
          left: 34%;
        }
      }
  
      .img-cover {
        padding: 35px 5px;
      }
  
      .text-cover {
        position: relative;
        padding: 0 50px 0 90px;
  
        span.steps {
          background: #2f2f7d;
          border-radius: 60px;
          padding: 10px 20px;
          color: #fff;
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          left: -50px;
          height: 40px;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 15px;
        }
  
        p {
          font-size: 18px;
          line-height: 35px;
          color: #080836;
        }
  
        h4 {
          font-size: 28px;
          font-family: $secondary-font;
          color: #2f2f7d;
          margin-bottom: 15px;
        }
      }
  
      &:hover {
        background: #35367d;
  
        h4 {
          color: #fff !important;
        }
  
        p {
          color: #fff;
        }
  
        .text-cover {
          span.steps {
            background: #fff;
            padding: 10px 20px;
            color: #35367d;
          }
        }
      }
    }
    @media (lg-1680) {
      padding: 90px 0;
      .item-row {
        .text-cover {
          padding: 0 0 0 55px;
          p {
            font-size: 14px;
            margin: 0;
            line-height: 24px;
            h4 {
              font-size: 26px;
            }
          }
        }
  
        span.steps {
          left: -40px;
          height: 30px;
          font-size: 11px;
        }
      }
    }
  
    @media ($sm-1481) {
      padding: 80px 0;
      .the-process {
        padding: 80px 0;
      }
      .process-item {
        .item-row {
          span.steps {
            left: -40px;
            height: 30px;
            font-size: 11px;
          }
          .text-cover {
            padding: 0 0 0 55px;
            p {
              font-size: 14px;
              margin: 0;
              line-height: 20px;
              h4 {
                font-size: 26px;
              }
            }
          }
        }
      }
    }
  
    @media ($sm-767) {
      padding: 40px 0;
  
      .the-process {
        padding: 50px 0;
      }
  
      .process-item {
        .item-row {
          &:before {
            content: "";
            left: 0;
          }
  
          .img-cover {
            padding: 35px 15px 35px 0;
          }
  
          .text-cover {
            padding: 0 0 0 55px;
  
            p {
              font-size: 14px;
              margin: 0;
  
              h4 {
                font-size: 20px;
              }
            }
          }
  
          span.steps {
            left: -40px;
            height: 30px;
            font-size: 11px;
          }
        }
      }
  
  
    }
  }