@import "variables.less";

.main-content {
  height: 2390px;
  background-image: url("../images/main-background-dots.png");
  background-color: @grey-background-color;
  
  .container {
    position: relative;
      
    &:after {
      display: block;
      content: " ";
      top: 250px;
      right: 0;
      position: absolute;
      background: #FF5912;
      box-shadow: 0px 0px 160px 120px #FF5912;
      z-index: 1;
    }

    &:before {
      display: block;
      content: " ";
      top: 410px;
      left: 540px;
      position: absolute;
      background: #FF5912;
      box-shadow: 0px 0px 130px 120px #FF5912;
      z-index: 1;
    }    
  }
  
  .first-container {
    position: relative;
    height: 800px;
    padding: 75px 0;
    box-sizing: border-box;
    
    .image-container {
      width: 1130px;
      height: 420px;
      border-radius: 30px 250px;
      overflow: hidden;
    }
    
    .check-list {
      margin-left: 40px;
    }
  }
  
  .second-container {
    position: relative;
    height: 700px;    
    padding: 75px 0;
    box-sizing: border-box;
  }
  
  .third-container {
    position: relative;
    height: 890px;  
    padding: 75px 0;
    box-sizing: border-box;
    
    .check-list {
      width: 840px;
    }
    
    .image-container {
      border-radius: 250px;
      width: 840px;
      height: 515px;
      overflow: hidden;
      margin-left: 30px;
    }
  }
    
  h2 {
    font-family: Oswald;
    font-size: 135px;
    font-weight: 700;
    line-height: 200px;
    margin-bottom: 25px;

    span {
      color: @orange-color;
    }
  }
  
  .content {
    display: flex;
    flex-direction: row;
  }
  
  .check-item {
    padding-left: 75px;
    position: relative;
    height: 45px;
    line-height: 45px;
    font-size: 30px;
    margin-bottom: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    
    a {
      color: @black-color;
    }
    
    &.has-link:after {
      content: " ";
      display: block;
      width: 15px;
      height: 45px;
      margin-left: 30px;
      background: url("../images/link-arrow.svg");
      background-repeat: no-repeat;
      background-position: center;
      transition: @defaultTransitionProps;
    }
    
    &.has-link:hover:after {
      margin-left: 40px;
      transition: @defaultTransitionProps;
    }
    
    
    &:before {
      content: " ";
      position: absolute;
      top: 0;
      left: 0;
      background: url("../images/check-icon.svg");
      width: 45px;
      height: 45px;
    }
  }
}