body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  width: auto;
  height: auto;
}

.banner-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../image/banner1.jpg");
  height: 80%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.banner-text {
  text-align: center;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.banner-text button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: black;
  background-color: #ddd;
  text-align: center;
  cursor: pointer;
}

.banner-text button:hover {
  background-color: #555;
  color: white;
}

.banner-text>h1{
  font-size:50px;
  font-weight: 800;
  color:#51AF33;
  font-family: ethnocentric;
}

.banner-form-head{

  text-align: left;
  font-size: 30px;
}
.banner-form-desc{
text-align: left;
color: #333333;
}

@mixin btn-border-drawing($color: #ccc, $hover: black, $width: 2px, $vertical: top, $horizontal: left, $duration: 0.25s) {
  box-shadow: inset 0 0 0 $width $color;
  color: $color;
  transition: color $duration $duration/3;
  position: relative;
  
  &::before,
  &::after {
    border: 0 solid transparent;
    box-sizing: border-box;
    content: '';
    pointer-events: none;
    position: absolute;
    width: 0; height: 0;
    
    #{$vertical}: 0; 
    #{$horizontal}: 0;
  }

  &::before {
    $h-side: if($horizontal == 'left', 'right', 'left');
    
    border-#{$vertical}-width: $width;
    border-#{$h-side}-width: $width;
  }
  
  &::after {
    $v-side: if($vertical == 'top', 'bottom', 'top');
    
    border-#{$v-side}-width: $width;
    border-#{$horizontal}-width: $width;
  }
  
  &:hover {
    color: $hover;
    
    &::before,
    &::after {
      border-color: $hover;
      transition: border-color 0s, width $duration, height $duration;
      width: 100%;
      height: 100%;
    }
    
    &::before { transition-delay: 0s, 0s, $duration; }
    
    &::after { transition-delay: 0s, $duration, 0s; }
  }
}

.draw-border {
  @include btn-border-drawing(#58afd1, #ffe593, 4px, bottom, right);
}

//=== Button styling, semi-ignore
.btn {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1.5;
  font: 700 1.2rem 'Roboto Slab', sans-serif;
  
  letter-spacing: 0.05rem;
  
  &:focus { outline: 2px dotted #55d7dc; }
}

.btn-banner{
border: 1px solid #51AF33;
background: none;
        color: #51AF33;
        padding: 7px 41px;
        margin-left: -323px;

}

.btn-banner:hover{
  color: #51AF33!important;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-text {
  padding: 20px 50px;
  background-color: #ffffff;
  text-align: center;
  position: absolute;
  top: 60%;
  left: 26%;
  transform: translate(-50%, -50%);
  color: white;
  color: #000;
}
@media (max-width: 1024px){

  .form-text{
    left:30%;
  }
}

.service img{
  width: 100%;
  height: 160px;

}

.serviceSec{
  box-shadow: 1px 1px 6px #666666;
    border-radius: 5px;
  margin: 15px 5px;
}

.img-desc{
    padding-top: 16px;
    line-height: 8px;
    padding-bottom: 1px;

}

@font-face{

  font-family: ethnocentric;
  src:url("../font/ethnocentric.regular.ttf");
}

.price-link{

  text-decoration: none;
  font-size: 14px;
}

.footer-lnk{
  text-decoration: none;
  color: #333333;

}
.footer-lnk span{
  font-weight: 600;
  padding: 0 20px;
}

.footer-ver-line{
  border-left: 2px solid #51AF33;
}



a:hover{
text-decoration: none;
}