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


.modal-header{ border-bottom: none; padding-right: 22px; padding-top: 16px; }
.info-box { padding: 29px; margin: 5px; border-radius: 20px; 
    -webkit-box-shadow: 1px 4px 9px -6px rgb(0 0 0 / 66%);
    -moz-box-shadow: 1px 4px 9px -6px rgb(0 0 0 / 66%);
    box-shadow: inset 0 0 0.2vw 0.2vw rgb(0 0 0 / 17%); 
}
    
.crs-type{height:57px;}
.showplan { box-shadow: none;  padding-left: 0;  margin-top: 125px; }
.info-logo{padding-bottom: 30px; }
.info-logo img {width: 150px; }
.info-box h2{color: #40b8de; font-size: 24px !important; font-weight: bolder;}
.info-desc{ font-size:17px; color:#808080; height: 131px; font-family: 'Roboto', sans-serif; line-height: 20px; }
.no-cloud{margin-top:-25px; height: 155px;}
.info-list-height{height: 232px;}
.btn-plan{padding: 15px; background: #f69b21 !important; border-radius: 10px; font-size: 18px;}

.svg-Essential{ border-top: 6px solid #8399ce;  border-left: 4px solid #8399ce;  border-right: 4px solid #8399ce;background: var(--Essential);}
.svg-Silver{ border-top: 6px  solid #ff914d; border-left: 4px  solid #ff914d;  border-right: 4px  solid #ff914d; background: var(--Silver); }
.svg-Silver-Plus{ border-top: 6px  solid #00c2cb; border-left: 4px  solid #00c2cb; border-right: 4px  solid #00c2cb; background: var(--Silver-Plus);}
.svg-Gold{ border-top: 6px  solid #ffbd59; border-left: 4px  solid #ffbd59; border-right: 4px  solid #ffbd59; background: var(--Gold);}

.prd-card{ border-radius: 20px; }
.pkg-category { font-size: 20px; padding: 10px; border-top-left-radius: 20px; border-top-right-radius: 20px; color: white; font-weight: bold; }
.cat-Essential{ background-color: #8399ce;}
.cat-Silver{ background-color: #ff914d;}
.cat-Silver-Plus{ background-color: #00c2cb;}
.cat-Gold{ background-color: #ffbd59; }

.prd-desc{ border-left: 4px solid; margin-left: -15px; margin-right: -15px; border-right: 4px solid; border-bottom: 4px solid;
    border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; line-height: 30px;}
.prd-desc-Essential {border-color: #8399ce;}
.prd-desc-Silver{border-color:#ff914d; }
.prd-desc-Gold{border-color: #ffbd59; }
.prd-desc-Silver-Plus{border-color: #00c2cb; }
.prd-desc-cloud{height: 220px;}
.prd-desc-no-cloud{height: 165px;}
.btn-buy{ background-color: #000; border-color: #000; font-size: 14px; border-radius: 12px; padding: 11px;}
.btn-buy:hover { color: #fff; background-color: #080808; border-color: #000; }

.actual{text-decoration: line-through; margin-right: -41px;;}
.offer { color: rgb(252, 136, 4); font-size: 31px; font-weight: bold; margin-top: -6px; }
.saving{margin-left: -40px; font-size: 14px; color: red;}

.storage { font-size: 20px; }
.cloud-cont.nottext { font-size: 13px; margin-top: -49px; }
.upgrade-contact{cursor:pointer; font-weight: bold; text-decoration: none;}

@media only screen and (max-width: 1440px) {
    .svg-Essential { width: 100%; }
    .svg-Silver { width: 100%; }
    .svg-Silver-Plus { width: 100%; }
    .svg-Gold { width: 100%; }
}

@media only screen and (max-width: 1024px) {
    .info-logo img {width: 183px; }
    .info-box h2{ font-size:29px; }
    .info-desc{ height: 240px; }
    .showplan h2{ font-size: 22px; color: #40b8de; margin-bottom: -25px; }
    .showplan .info-desc{ height: 300px; }
    .info-logo img { width: 164px; }
    .prd-card{font-size: 14px;}
    .actual{margin-right: -27px; }
    .saving { margin-left: -25px; }
    .cloud-cont.nottext {margin-top: -105px; }
}

@media only screen and (max-width: 979px) {
    .showplan{margin-top: 0px;}
    .showplan h2{ font-size: 30px; }
    .showplan .btn-plan{ margin-bottom: 35px; }
    .showplan .info-desc { max-height: 228px; }
    .prd-desc{margin-left: 0px; margin-right: 0px; font-size: 16px;}
}

@media only screen and (max-width: 767px) {
    .showplan{margin-top: 0px;}
    .info-desc { height: auto; }
    .prd-desc{margin-left: 0px; margin-right: 0px;}
}

@media only screen and (max-width: 579px) {
    .showplan{margin-top: 0px;}
    .info-desc { height: auto; }
    .prd-desc{margin-left: 0px; margin-right: 0px;}
}

@media only screen and (max-width: 479px) {
    .info-desc { height: auto; }
    .prd-desc{margin-left: 0px; margin-right: 0px;}
}

@media only screen and (max-width: 379px) {
    .info-desc { height: auto; margin: 0px -27px; font-size: 15px; }
    .info-box h2 { font-size: 19px; margin-bottom: -24px;}
    .info-logo img { width: 141px; }
    .info-box{margin: 0px -16px 20px -16px;}
    .showplan h2{ font-size: 19px; }
    .prd-card{width: 120%; left: -42px;}
}