.package-box {
     border: 3px solid #ccd3dc 
}
.package-box:hover {
    border: 3px solid #324fa2;
    transition: .9s all ease-in-out;
    -webkit-transition: .9s all ease-in-out;
    -moz-transition: .9s all ease-in-out;
    -ms-transition: .9s all ease-in-out;
    -o-transition: .9s all ease-in-out;
    cursor: pointer;
}
.package-box .title {
     color: #051428;
     font-size: 1.2rem 
}
.package-box .dis-title {
     width: 125px;
     background: #7d8692;
     margin: 0 auto 
}
.package-box:hover .dis-title {
    background: #324fa2;
    transition: .9s all ease-in-out;
    -webkit-transition: .9s all ease-in-out;
    -moz-transition: .9s all ease-in-out;
    -ms-transition: .9s all ease-in-out;
    -o-transition: .9s all ease-in-out;
}
.package-box .duration {
     font-size: .9rem 
}
.package-box .price {
     color: #7d8692;
     line-height: 2.2rem 
}
.price sup {
     top: -25px;
     font-size: 1.5rem 
}
.package-box.active-box {
     border: 3px solid #324fa2 
}
.package-box .btn-warning.purple-gradient {
     padding: 1rem 1.3rem!important 
}
.number input {
    height: 25px;
    width: 75px;
    text-align: center;
    font-size: .9rem;
    border: 1px solid #ccd3dc;
    outline: 0;
    box-shadow: none;
    display: inline-block;
}
.promo input {
    height: 35px;
    width: 140px;
    text-align: left;
    text-indent: 10px;
    border-radius: 3px;
    text-transform: capitalize;
}
.label-tag {
     font-size: .8rem;
     padding: .25rem .4rem .2rem;
     border-radius: 3px 
}
 .payment .form-group .form-control {
     box-shadow: none;
     border-radius: 0;
     border-color: #ccd3dc;
     height: 50px 
}
 .payment .form-group .form-control::placeholder {
     font-size: .9rem;
     color: #000;
     text-transform: capitalize 
}
.payment .card-body {
    padding: 0 2.5rem 2.5rem;
}
 .label-tag-title .opt {
     color: #83888e 
}
 .opt-box {
     border-radius: 0;
     border: 1px solid #ccd3dc;
     padding: 2.02rem 2.5rem;
     cursor: pointer 
}
 .checkbox-1 {
     margin-top: 0 
}
 .checkbox-1 label {
     display: inline-block;
     color: #000;
     font-weight: 500;
     font-size: 14px;
     cursor: pointer;
     position: relative 
}
 .checkbox-1 label .checkbox-addon {
     display: inline-block;
     position: relative;
     background-color: #cdd4dc;
     width: 20px;
     height: 20px;
     z-index: 1;
     transform-origin: center;
     border: 2px solid #cdd4dc;
     margin-right: 6px;
     vertical-align: -4px;
     transition: background-color 150ms .2s,transform 350ms cubic-bezier(.78,-1.22,.17,1.89) 
}
 .checkbox-1 label .checkbox-addon:before {
     content: "";
     width: 0;
     height: 2px;
     border-radius: 2px;
     background: #324fa2;
     position: absolute;
     transform: rotate(45deg);
     top: 8px;
     left: 6px;
     transition: width 50ms ease 50ms;
     transform-origin: 0 0 
}
.checkbox-1 input[type=checkbox]:checked+label .checkbox-addon:before {
    width: 5px;
    background: #000;
    transition: width 150ms ease .1s;
}
 .checkbox-1 label .checkbox-addon:after {
     content: "";
     width: 0;
     height: 2px;
     border-radius: 2px;
     background: #324fa2;
     position: absolute;
     transform: rotate(305deg);
     top: 12px;
     left: 6px;
     transition: width 50ms ease;
     transform-origin: 0 0 
}
.checkbox-1 input[type=checkbox]:checked+label .checkbox-addon:after {
    width: 10px;
    background: #000;
    transition: width 150ms ease .1s;
}
 .checkbox-1 input[type=checkbox] {
     display: none 
}
 .number span {
     cursor: pointer 
}
 .number {
     margin-right: .5rem;
     margin-left: .7rem 
}
 .number .minus,.number .plus {
     position: absolute;
     border-radius: 0;
     text-align: center 
}
 .number .minus {
     top: 2px;
     left: 5px 
}
 .number .plus {
     right: 5px;
     top: 2px 
}
 .opt-box .card {
     border: none 
}
.promo input[type=button] {
    text-indent: 0;
    width: 100px;
    top: 0;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .8px;
}
 .opt-box .card-header {
     border-bottom: none;
     padding: 0;
     background-color: transparent 
}
 .opt-box .card-link {
     color: #051428;
     font-weight: 500;
     position: relative;
     padding-left: 1.5rem;
     font-size: 1.1rem 
}
 .opt-box .card-header:first-child {
     border-radius: 0 
}
.trust-pilot {
     border: 1px solid #00aa72 
}
.rating {
     position: absolute;
     left: 0;
     right: 0;
     top: 0 
}
 .stars ul li {
     display: inline-block 
}
 .all-plans {
     border: 1px solid #ccd3dc 
}
.all-plans ul li {
     margin-bottom: 1.37rem;
     position: relative;
     padding-left: 1rem 
}
 .all-plans ul li:last-child {
     margin-bottom: .6rem 
}
 .all-plans ul li:after {
     content: "\f054";
     font-family: "Font Awesome 5 Free";
     font-weight: 600;
     color: #324fa2;
     position: absolute;
     top: .1rem;
     left: 0;
     font-size: 13px 
}
 .all-plans ul li a {
     color: #000;
     font-size: .9rem;
     font-weight: 500;
     pointer-events: none;
     cursor: text 
}
.active-box {
     border: 3px solid #324fa2 
}
.dollar-sign {
     font-size: 1.05rem;
     padding-right: .1rem 
}
.alert {
     position: relative;
     padding: .75rem 1.25rem;
     margin-bottom: 1rem;
     border: 1px solid transparent;
     border-radius: .25rem 
}
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

@media only screen and (max-width: 991.98px) {
    .package-box .title {
        color: #051428;
        font-size: .9rem;
        margin: .5rem .8rem;
    }
    .package-box .dis-title {
        padding: 5px;
    }
    .price.font-4rem {
        margin-bottom: 0!important;
        font-size: 2rem;
    }
    .package-box .w-40 {
        width: 65%!important;
    }
    .price.font-4rem {
        margin-bottom: 0!important;
        font-size: 2rem;
    }
    .price sup {
        top: -6px;
        font-size: .95rem;
    }
    .label-tag {
        margin-bottom: .5rem;
        display: inline-block;
    }
    .label-tag-title {
        font-size: .9rem;
        line-height: 22px;
        padding-right: .5rem;
    }
    .payment .form-group .form-control {
        height: 35px;
    }
    .payment .form-group .form-control::placeholder {
        font-size: .7rem
    }
    .opt-box {
        padding: 1.5rem 1.5rem;
    }
    .checkbox-1 input[type=checkbox] {
        display: block;
        opacity: 0;
        bottom: -22px;
        position: relative;
        z-index: 1;
        width: 20px;
        height: 19px;
    }
    .checkbox-1 label {
        line-height: 28px;
        margin-bottom: 0;
    }
    .payment .card-body {
        padding: 0 1.5rem 2rem;
    }
    .opt-box .card-link {
        font-size: .9rem;
        padding-top: .2rem;
        padding-left: 2.5rem;
    }
    .accordion-btn {
        left: 0;
    }
    .number.promo {
        margin: 0;
        margin-top: .5rem;
        width: 100%;
    }
    .number input {
        height: 38px;
        width: 68%;
    }
    .promo input[type=button] {
        margin-left: .3rem;
        letter-spacing: 0;
        width: 30%;
        display: inline-block;
    }
    .payment .btn-warning.purple-gradient {
        width: 100%!important;
        font-size: .8rem;
        padding: 1rem 0!important;
    }
    .stars ul li {
        width: 12%;
    }
    .all-plans h5 {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }
    .all-plans ul li {
        line-height: 24px;
        margin-bottom: 1rem;
        position: relative;
        padding-left: 1rem;
    }
}
@media only screen and (max-width: 767px) {
    .package-box.h-100 {
        height: auto!important;
    }
    .checkbox-1 label .checkbox-addon {
        width: 22px;
        z-index: 1;
    }
    .plan-content {
        line-height: 1.5rem;
        font-size: .9rem;
    }
}
@media only screen and (max-width: 375px) {
    .all-plans ul li {
        line-height: unset;
    }
}