@import url("/css/main.css");

/* header section starts here */

.header {
    width: 100%;
    height: 130vh;
    overflow: hidden;
    background-image: url(../images/service_page/banner_img.svg);
    background-size: cover;
    background-repeat: no-repeat;
  }


.website_footer,
.cta_sec,
.benefits {
  margin-top: 150px;
}

.main_heading {
  height: 70vh;
  margin-top: 90px;
}

@media only screen and (max-width: 1200px) {
    .main_heading {
      height: 80vh;
    }
  }


  .why_start {
    margin-top: 380px;
  }
  
  .header_title {
    color: white;
  }
  
  .header_title h2 {
    padding-left: 250px;
    padding-right: 250px;
    color: white;
  }


  .sec_heading {
    width: 100%;
  
  }
  
  .title2 {
    margin-top: 50px;
    width: 100%;
    background: url(../images/service_page/bg_cube.svg)no-repeat;
    background-size: 100%;
    background-position: center bottom;
  }
  
  .title2 h3 {
    padding: 50px 90px 0px 90px;
    color: grey;
    margin-top: 40px;
  }
  
  .h_para {
    font-size: 22px;
    margin-top: 20px;
    padding: 0px 200px;
  }
  
  .sec2_title1 {
    color: #0078D5;
    padding-top: 60px;
  }
  
  .sec2_para1 {
    line-height: 1.5 !important;
    letter-spacing: 1px;
    padding: 30px 0px;
  }
  
  .why_start .bg_shape {
    position: absolute;
    z-index: -1;
    left: -15%;
  }
  
  .sec3_artwork {
    top: 165%;
    left: -9%;
  }
  
  .benefit_title {
    color: #0078D5;
    padding-bottom: 120px;
  }

  .bg_shape
{
  animation-name: bg_shape;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes bg_shape {
  from { transform: translate(0,  0px); }
  65%  { transform: translate(0, 15px); }
  to   { transform: translate(0, -0px); }    
}

.artwork2
{
  animation-name: artwork2;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes artwork2 {
  from { transform: translate(0,  0px); }
  65%  { transform: translate(0, 25px); }
  to   { transform: translate(0, -0px); }    
}
  
  
 /* tab view portrait */ 
  
  @media only screen and (min-width: 600px) and (max-width: 991px) {
  
    .main_heading {
      margin-top: 15px;
      height: 80vh;
    }
  
    .header_title h2 {
      padding-left: 80px;
      padding-right: 80px;
      color: white;
    }
  
    .title2 {
      margin-top: 100px;
    }
  
    .title2 h3 {
      padding: 20px 40px 0px 40px;
    }
  
    .h_para {
      font-size: 22px;
      margin-top: 20px;
      margin-bottom: 100px;
      padding: 0px 80px;
    }
  
    .why_start {
      margin-top: 320px;
    }
  
    .sec3_artwork {
      top: 148%;
      left: 45%;
      display: block !important;
    }
  
  }

  /* mobile device */
  
  @media only screen and (max-width: 600px) {
    .main_heading {
      margin-top: 15px;
      height: 80vh;
    }
  
    .header_title {
      height: 60vh;
      padding-top: 30px;
    }
  
    .main_heading p {
      font-size: 32px;
    }
  
    .main_heading h2 {
      font-size: 22px;
      padding: 0px 10px;
    }
  
    .title2 {
      margin-top: 0px;
    }
  
    .title2 h3 {
      font-size: 28px;
      padding: 15px 15px;
    }
  
    .h_para {
      font-size: 22px;
      margin-top: 20px;
      margin-bottom: 100px;
      padding: 0px 10px;
    }
  
    .sec_heading {
      height: 100vh;
    }
  
    .sec3_artwork {
      display: none;
    }
  
    .why_start {
      margin-top: 600px;
    }
  
    .cta_sec,
    .benefits {
      margin-top: 100px;
    }
  
    .benefit_title {
      padding-bottom: 60px;
    }
  
  }