

.middle {
  width: 100%;
  text-align: center;
  /* Made by */
}
.middle h1 {
  font-family: "Helvetica";
  font-weight:normal;
  color: #555;
}
.middle input[type="radio"] {
  display: none;
}
.middle input[type="radio"]:checked + .box {
 
}
.front-end.box:hover {
    color: darkorange !important;
}
.front-end.box span:hover {
    
    color:darkorange !important;
}
.back-end.box:hover {
    color: darkorange !important;
}
.back-end.box span:hover {
    color: darkorange !important;
}
.middle input[type="radio"]:checked + .box span {
    color:#000;
    transform: translateY(70px);
}
.middle input[type="radio"]:checked + .box span:before {
  transform: translateY(0px);
  opacity: 1;
}
    .middle .box {
        width: 270px;
        height: 137px;
      
        transition: all 250ms ease;
        will-change: transition;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        position: relative;
     
      
    }
#reg {
    background-image: url(../img/urself.png);
   // width: 200px;
   margin-bottom:10px;
    height: 104px;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    background-position: center;
}
#adv {
    background-image: url("../img/advisry (1).png") ;
    //width: 200px;
    margin-bottom:10px;
    height: 100px;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    background-position: center;
}.middle .box:active {
    transform: translateY(10px);
}
        .middle .box:hover {
            transform: translateY(10px);
        }
        .middle .box span {
          
            transform: translate(0, 60px);
            left: 0;
            right: 0;
            transition: all 300ms ease;
            font-size: 1.2em;
            user-select: none;
            color: #555;
        }

.middle p {
  color: #fff;
  font-family: "Dax", sans-serif;
  font-weight: 400;
}
.middle p span:after {
  content: '\f0e7';
  font-family: FontAwesome;
  color: yellow;
}
#aum11 {
    /*background-image: url("../img/asset.png");*/
    /*width: 200px;
    height: 100px;
    background-repeat: no-repeat;
    
    background-position: right;*/
}
#pp1 {
    /*background-image: url("../img/profit.png");
    width: 200px;
    height: 100px;
    background-repeat: no-repeat;
  
    background-position: right;*/
}

