/* body */
.home{
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -99;
      font-family: 'Poppins', sans-serif;

    }
    .rectangle {
      border-radius: 15px;
      background: white;
      padding: 1px;
      width: 1360px;
      height: 44px;
      opacity: 30%;
    }
    .home h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: white;
    font-size: 20px;
    letter-spacing: 5px;
    }

    .container{

        width: 100%;
        height: auto;
        margin: 100px auto;
        /* flex box */
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-flow: wrap;
        
      
      
      }
      
      .container .box{
        position: relative;
        width: 20%;
        height: 300px;
        background-color: #2a2546;
        float: left;
        margin: 15px;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 10px;
          font-family: 'Poppins', sans-serif;
      }
      
      .container .box .icon{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #100d21;
        transition: 0.5s;
        z-index: 1;
      }
      
      .container .box:hover .icon{
        top:10px;
        left: calc(50% - 40px);
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
      
      .container .box .icon .fas{
        position: absolute;
        top: 50%;
        left:50%;
        transform: translate(-50%,-50%);
        font-size: 80px;
        transition: 0.5s;
        color: #fff;
      }
      /*  */
      .container .box .icon h1{
      position: absolute;
      top: 90%;
      left:50%;
      transform: translate(-50%,-50%);
      font-size: 15px;
      text-align: center;
      transition: 0.5s;
      color: #fff;
      }
      
      .container .box:hover .icon .fas{
        font-size: 40px;
      }
      /* change */
      .container .box:hover .icon h1{
      top: 100px;
      }
      
      .container .box .content{
        position: absolute;
        top: 100%;
        height: calc(100% - 100px);
        text-align: center;
        padding: 20px;
        box-sizing: border-box;
        transition: 0.5s;
        opacity: 0;
      }
      .container .box:hover .content{
        top: 100px;
        opacity: 100;
      }
      .container .box .content h3{
        margin: 0 0 10px;
        padding: 0;
        color: #fff;
        font-size: 20px;
      }
      
      .container .box .content p{
        margin: 15px 0;
        padding: 0;
        color: #fff;
        font-size: 13px;
      }
      .container .box .content .download{
        position: absolute;
        top: 80%;
        left:50%;
        transform: translate(-50%,-50%);
        border-style: solid;
        border-color: white;
        width: 100px;
        height: 20px;
      }
      .container .box .content a{
       
        text-decoration: none;
        color: white;
      }
      
      

      @media screen and (max-width: 1200px) {
        .home .rectangle{
            width: 800px;
          }
          

        .container .box {
          width: 40%;
        }
      }
      
      @media only screen and (max-width: 900px) {
        .home  {
          position: absolute;
        }
        .home .rectangle{
          width: 500px;
        }
        
      }
      @media screen and (max-width: 600px) {
        .container .box {
          width: 70%;
        }
      
    
      
        .home .rectangle{
          width: 400px;
        }
      }