body {
      overflow-x: hidden;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --Essential: #8399ce;
      --Silver: #ff914d;
      --Gold: #ffbd59;
      --Silver-Plus: #00c2cb;
    }

    .Essential{
      border: 4px solid #8399ce;
    }

    .Silver{
      border: 4px solid #ff914d;
    }

    .Silver-Plus{
      border: 4px solid #00c2cb;  
    }

    .Gold{
      border: 4px solid #ffbd59;
    }

    .cloud-cont,
    .plan-cont {
      display: flex;
      flex-direction: row;
      width: 100%;
    }

    .cloud-box {
      width: calc(50% - 40px - 4px);
      text-align: center;
      font-size: 18px;
      margin: 20px;
      padding: 50px;
      display: inline-block;
      vertical-align: middle;
      max-height: 447px;      
      box-shadow: inset 0 0 0.2vw 0.2vw rgb(0 0 0 / 17%);
      border-radius: 20px;
    }

    .pkg-logo img {
      width: 210px;
    }

    .cloud-box h2 {
      color: #40b8de;
      font-size: 30px;
      padding-bottom: 30px;
      margin-bottom: unset;
    }

    .cloud-box .btn,
    .plan-box .btn {
      background-color: fff;
      color: #fff;
      font-size: 20px;
      border-radius: 10px;
      padding: 20px;
      border: 0px;
      margin: 10px;
      background: #f69b21;
      cursor: pointer;
    }

    .plan-box .btn {
      font-size: 14px;
      padding: 10px;
      font-size: 14px;
      padding: 10px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      background: #000;
      font-size: 15px;
    }

    .showplan .cloud-box {
      box-shadow: none;
      width: calc(40% - 40px - 4px);
      padding-left: 0;
    }

    .title.subtitle {
      font-weight: normal !important;
      font-size: 16px !important;
    }

    #all-plans {
      width: calc(50% - 20px - 4px);
      display: inline-block;
      vertical-align: middle;
      visibility: hidden;
      transform: translateX(100%);
      transition: all ease-in-out .3s;
    }

    .showplan #all-plans {
      visibility: visible;
      transform: translateX(0);
      width: calc(60% - 20px - 4px);
    }

    .plan-box {
      text-align: center;
      width: 50%;
      border-radius: 10px;
      line-height: 30px;
      margin: 5px;
      background: #fff;
      position: relative;
    }

    .plan-box-banner {
      padding: 10px;
      margin-top: -30px;
      padding-bottom: 70px;
    }

    .plan-box:hover {
      background-color: #ffc;
    }

    .plan-box:hover svg path {
      fill: #ffc !important;
    }

    .plan-box .title {
      font-size: 24px;
      font-weight: bold;
    }

    .actual {
      text-decoration: line-through;
      font-size: 14px;
    }

    .offer {
      color: rgb(252, 136, 4);
      font-size: 26px;
      font-weight: bold;
    }

    .title.main-title {
      padding: 8px;
      color: #fff;
    }


    .storage {
      font-size: 20px;
    }


    .cloud-box p {
      padding-bottom: 30px;
      color: #808080;
    }

    .pkg-logo {
      padding-bottom: 30px;
    }

    .cloud-cont {
      max-width: 64vw;
      margin: 0 auto;
      position: relative;
      display: block;
      overflow: hidden;
    }
    .plan-box div {
        font-size: 16px;
        line-height: 30px;
    }
    .pricing {
        margin-top: 15px;
    }
    .cloud-cont.nottext {
      margin-top: 20px;
    }
    @media only screen and (max-width :1450px) {
      .plan-box div {
          line-height: 28px;
      }
      .plan-box div {
          font-size: 14px;
      }
      .pkg-logo img {
          width: 150px;
      }
      .cloud-box h2 {
          font-size: 24px !important;
      }
      .cloud-box {
          padding: 30px;
      }
      .plan-box .title {
        font-size: 20px;
      }
      .offer {
          font-size: 24px;
      }

      .cloud-box {        
        font-size: 16px;
      }
      .cloud-box .btn, .plan-box .btn{
        padding: 15px;
      }
      .pkg-desc{
        height : 120px;
      }
      .plan-box .btn{
        font-size: 14px;
      }
      .cloud-cont{
        max-width: 80vw;
        font-size: 16px;
      }
    }
    @media only screen and (max-width :1024px) {
      .cloud-cont {
          max-width: 100vw;
      }

    }
    @media only screen and (max-width :1000px) {
      .showplan .cloud-box {
          width: calc(100% - 20px - 4px);
          box-shadow: inset 0 0 0.5vw 0.5vw rgb(0 0 0 / 17%);
      }
      .showplan #all-plans {
          width: calc(100% - 20px - 4px);
      }
      .cloud-box {
        padding: 20px;
        width: calc(50% - 40px - 4px);
        transform: translateX(0%) !important;
        height: auto !important;
        max-height: unset;
      }

      #all-plans {
        width: calc(100% - 20px);
      }

    }

    @media only screen and (max-width: 500px) {
      .cloud-box {
        width: calc(100% - 40px - 4px);
      }
      .cloud-cont {
        display: block;
        width: 100% !important;
      }
      .cloud-cont,
      .plan-cont {
        display: block;
      }
      .plan-box {
        width: calc(100% - 20px);
        margin: 20px;
      }

    }