body{
    background-color: rgb(234, 238, 238);
}

/* our services */
.service_headline{
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}
.service_headline h1{
    font-size:  34px;
    font-weight: 600;
}
.detail {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 30px;
}
.frame {
    padding-block: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.frame {
    border-radius: 5%;
    background-color: rgba(255, 255, 255, 0);
    /* width: 300px;
    height: 180px;  */
    /* perspective: 1000px; */
  }
.layer {
  margin-bottom: 5%;
    border-radius: 5%;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: ease-in-out 0.6s;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.26);
  }
  .layer:hover{
    background-color: rgba(48, 112, 32, 0.329);
  }
    .frame .img-fluid{
    padding: 10px;
    border-radius: 20px;
    }  

    .info h5{
    margin-left: 20px;
    display:flex;
    justify-content: left;
    font-size: 16px;
    font-weight: 600;
    }
    .info .btn{
    margin-left: 20px;
    margin-bottom: 15px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    border-color: black;
    color: black;
    background-color: rgba(240, 248, 255, 0);
    }
    .info .btn:hover{
    transition: ease-in-out 0.2s;
    background-color: rgba(255, 255, 255, 0.877);
    border-color: rgba(129, 245, 114, 0);
    }

/* advertise */
    #advertise{
      background-color: darkslategrey;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      text-align: center;
      margin-top: 10%;
      margin-bottom: 10%;
    }
    #advertise .advertise_detail{

      margin-top: 10%;
      margin-bottom: 10%;
    }
  #advertise h5{
    color: rgb(255, 255, 255);
  font-weight: 500;
  }
    #advertise .btn{
      margin-left: 20px;
      margin-bottom: 15px;
      text-decoration: none;
      font-size: 14px;
      font-weight: 400;
      border-color: rgb(255, 255, 255);
      color: rgb(255, 255, 255);
      background-color: rgba(240, 248, 255, 0);
    }
    #advertise .btn:hover{
      transition: ease-in-out 0.2s;
      color:rgb(0, 0, 0);
      background-color: rgba(255, 255, 255, 0.877);
      border-color: rgba(255, 255, 255, 0.247);
    }

    /* join */
    .join{
      margin-bottom: 5%;
    }
    .join .join_img{
      margin-left: 0px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    .join .img-fluid{
      padding-top: 0%;
      height: auto;
    }
    .join .join_info{
      margin-top: 5%;
    }
  
    .join h5{
      font-size: 16px;
      font-weight: 700;
    }
    .join h2{
      font-size: 32px;
      font-weight: 300;
    }
    .join b{
      font-weight: 700;
      color:rgb(209, 74, 74);
    }
    .join .btn{
      margin-left: 20px;
      margin-bottom: 15px;
      text-decoration: none;
      font-size: 14px;
      font-weight: 400;
      border-color: black;
      color: black;
      background-color: rgba(240, 248, 255, 0);
    }
    .join .btn:hover{
      transition: ease-in-out 0.2s;
      background-color: rgba(255, 255, 255, 0.877);
      border-color: rgba(0, 0, 0, 0.452);
    }

    /* mobile  */
    @media only screen and (max-width:720px){
      .join .join_img{
        margin-bottom: 10%;
      }
      .join h5{
        margin-left: 5px;
      }
      .join h2{
        margin-left: 5px;
      }
      .join p{
        margin-left:5px;
      }
    }