/*menuzord menu*/
/****************/
.menuzord{
  background-color: transparent;
  
  ul li a{
    font-size: $h5;
     font-weight: 400;
    color: #fff;
    text-transform: uppercase;
  }

  ul>li a,ul>li.active a{
    color: #fff;
    font-family: $alt_font;
    &:hover{
      color: #ececec;
    }
  }
}


/*Header Section*/
/****************/
.header{
  background-color: $primary-color;
  color: $white;

  .intro-box{
    display: table;
    text-align: center;
    width: 100%;
    
    .intro{
      display: table-cell;
      vertical-align: middle;
      height: 100vh;
      
      .header-title{
        font-family: $title_font;
      }
      .header-subtitle{
        font-weight: 300;
      }
    }
  }
}


/*About Section*/
/***************/
.about{
  background-color: #eee;
  
  p{
    margin-top: 45px;
    font-size: 1.414rem;
    line-height: 2.121rem;
    font-weight: 300;
  }
}

/*Icon-col-3*/
/************/
.icon-3-col{
  @media (min-width: 48rem){
    .row{
      margin-top: 100px;
    }
  }
  .item{
    .icon{
      font-size: 3.998rem;
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: all 0.4s ease-in-out;
      
      .line-top, .line-bottom{
        position: absolute;
        width: 6px;
        height: 20px;
        left: calc(50% - 3px);
        background-color: $accent;
        transition: all 0.4s ease-in-out;
      }
      .line-top{
        top: -20px;
      }
      .line-bottom{
        bottom: -20px;
      }
    }
    
    &:hover{
      .icon{
        margin-top: 30px;
        
        .line-top{
          top: -5px;
        }
        .line-bottom{
          bottom: -5px;
        }
        .line-top, .line-bottom{
          display: block;
        }
      }
    }
    
    p.sub{
      font-style: italic;
      color: $light;
    }
  }
}

/*cta*/
/********/

.cta{
  background-color: #63d6e4;  
  color:#fff;

  h2{
    margin-bottom: 20px;
  }

  .cta-buttons button{
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: $primary-border-radius;
    padding: 5px 14px;
    text-transform: uppercase;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: $p;
  }

}

/*fun facts*/
/********/

.funfacts{
  background-color: #333;

  .number{
    font-family: $title_font;
    color: #63d6e4;
    font-size: $h2;
  }

  .count-description{
    color: #f8f8f8;
    font-size: $h4;
    font-weight: 300;
  }

  .counter-box{
    position: relative;
    margin-bottom: 30px;

    @media (min-width: 768px){
      margin-bottom: 0;
    }

    @media (min-width:1200px){
      &:after{
        position: absolute;
        content: url('../images/fun-facts/1.png');
        right: -20px;
        top:50%;
        transform: translateY(-50%);
      }
    }
    
  }

  .single-counter:last-child .counter-box{
    &:after{
      content: '';
    }
  }
}


/*contact*/
/********/

.contact-form{
  h3{
    margin-top: 0;
    color:#999999;
  }

  p{
    margin-bottom: 40px;
  }

  .contact-header{
    margin-bottom: 30px;
  }

  .contact-desc{
    margin-bottom: 40px;

    @media (min-width){
      margin-bottom: 0;
    }
  }

  .contact-icon-block{
    margin-bottom: 30px;
    span.contact-form-icons{
      float: left;
      background-color: #333333;
      width:30px;
      height: 30px;
      margin-top: 10px;
      margin-right: 20px;
      transform: rotate(-45deg);
      border-radius: $primary-border-radius;
      position: relative;

      i{
        position: absolute;
        color:#fff;
        font-size:18px;
        top:50%;
        left:50%;
        transform: translatex(-50%) translatey(-50%) rotate(45deg);
      }
    }

    .contact-small-header{
      font-family: $title_font;
      font-size:$p;
    }

    .contact-small-text{
      float: left;
      span{
        display: block;
      }
    }
  }

  input,textarea{
    display: block;
    width: 100%;
    border: 1px solid #999;
    border-radius: 2px;
    padding:10px 5px;
  }

  textarea{
    height:146px;
  }

  .form-field,textarea{
    margin-bottom: 15px;
  }

  .form-submit-button{
    background-color: #333;
    color: #fff;
    font-family: $title_font;
  }
}

/*pricing*/
/********/

.price-header{
  span{
    display: block;
  }
}

.price-features,.price-cta{
  padding: 40px 10px;
}
.price-header{
  padding: 20px 10px;
  background-color: #666; 
  border-radius: $primary-border-radius $primary-border-radius 0 0;
}

.price-features{
  background-color: #f2f2f2;

  ul{
    padding-left:30px;
    li{
      margin-bottom: 20px;
      font-size: $p;
      position: relative;

      &:before{
        content: '\f383';
        position: absolute;
        left: -30px;
      }
    }
  }
}

.price-cta{
  background-color: #e5e5e5;
    span{
      font-size:20px;
    }

    .price-top{
      .price-cta-number{
        font-size: 32px;
      }
    }
  .price-cta-button{
    width:155px;
    background-color: #63d6e4;
    border: none;
    padding: 10px 0;
    text-transform: capitalize;
    font-size:23px;
  }
}


/*** map ***/

#map{
  width:100%;
  height:350px;
}


/*Footer*/
/********/
footer{
  padding-top: 90px;
  padding-bottom: 90px;
  
  a{
    color: $light;
    font-size: $p;
  }
  .social-icons{
    text-align: center;
    .social-icon{
      width: 30px;
      height: 30px;
      border-radius: $br;
      border: 1px solid $light;
    }
  }
}