.modal-box{ font-family: 'Poppins', sans-serif; }
.show-modal{
    color: #fff;
    background: linear-gradient(to right, #33a3ff, #0675cf, #49a6fd);
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
    padding: 10px 15px;
    margin: 200px auto 0;
    border: none;
    outline: none;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    display: block;
    transition: all 0.3s ease 0s;
}
.show-modal:hover,
.show-modal:focus{
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    outline: none;
}
.modal-dialog{
    width: 400px;
    margin: 70px auto 0;
}
.modal-dialog{ transform: scale(0.5); }
.modal-dialog{ transform: scale(1); }
.modal-dialog .modal-content{
    text-align: center;
    border: none;
}
.modal-content .close{
    color: #fff;
    background-color:#c71111;
    font-size: 25px;
    font-weight: 400;
    text-shadow: none;
    line-height: 27px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    overflow: hidden;
    opacity: 1;
    position: absolute;
    left: auto;
    right: 8px;
    top: 8px;
    z-index: 1;
    transition: all 0.3s;
}
.modal-content .close:hover{
    color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.close:focus{ outline: none; }
.modal-body{ padding: 2px 20px 20px !important; }
.modal-body .title{
    color: #000000;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0 0 -1px;
    padding-bottom: 8px;
    font-family: 'Bebas Neue', sans-serif;
}

.modal-body .description{
    color: #9A9EA9;
    font-size: 16px;
    margin: 0 0 20px;
}
.modal-body .form-group{
    text-align: left;
    margin-bottom: 20px;
    position: relative;
}
.modal-body .input-icon{
    color: #777;
    font-size: 18px;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: 20px;
}
.modal-body .form-control{
font-size: 15px;
    height: 42px;
    width: 100%;
    margin: 0 auto;
    border: 1px solid #767676;
    font-family: system-ui;
    border-radius: 3px;
    box-shadow: none;
    outline: none;
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
}
.form-control::placeholder{
    color: #AEAFB1;
}
.form-group.checkbox{
    width: 130px;
    margin-top: 0;
    display: inline-block;
}
.form-group.checkbox label{
    color: #9A9EA9;
    font-weight: normal;
}
.form-group.checkbox input[type=checkbox]{
    margin-left: 0;
}
.modal-body .forgot-pass{
    color: #7F7FD5;
    font-size: 13px;
    text-align: right;
    width: calc(100% - 135px);
    margin: 2px 0;
    display: inline-block;
    vertical-align: top;
    transition: all 0.3s ease 0s;
}
.forgot-pass:hover{
    color: #9A9EA9;
    text-decoration: underline;
}
.modal-content .modal-body .btn{
    color: #fff;
    background-color: #ff7777;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 38px;
    width: 28%;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 3px;
    border: none;
    display: inline-block;
    transition: all 0.6s ease 0s;
}
.modal-content .modal-body .btn:hover{
    color: #fff;
    letter-spacing: 2px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.modal-content .modal-body .btn:focus{ outline: none; }
@media only screen and (max-width: 480px){
    .modal-dialog{ width: 95% !important; }
    .modal-content .modal-body{
        padding: 10px 12px 15px !important;
    }
}


.fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}
.fade.in{opacity:1}


.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;filter:alpha(opacity=50);opacity:.5}
button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:0 0;border:0}
.modal-open{overflow:hidden}
.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0}
.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%)}
.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}
.modal-open .modal{overflow-x:hidden;overflow-y:auto}
.modal-dialog{position:relative;width:auto;margin:10px}
.modal-content{position:relative;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5)}
.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}
.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}
.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}
.modal-header{padding:15px;border-bottom:1px solid #e5e5e5}
.modal-header .close{margin-top:-2px}
.modal-title{margin:0;line-height:1.42857143}

.modal-body{position:relative;padding:15px}
.modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}
.modal-footer .btn+.btn{margin-bottom:0;margin-left:5px}
.modal-footer .btn-group .btn+.btn{margin-left:-1px}
.modal-footer .btn-block+.btn-block{margin-left:0}
.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}
@media (min-width:768px){.modal-dialog{width:600px;margin:30px auto}}


         /* Global Variables */
:root {
    --color01: #ffffff;
    --color02: #502883;
    --color02Hover: #ff7777;
    --color03: #2a2a33;
    --color04: #00bcd4;
    --color04Hover: #ff7777;
    --color05: #ffd400;
    --color06: #f96e6e;
    --color06Hover: #ff7777;
    --color07: #0097a7;
    --color08: #f4f4f4;
    --color09: #fbfbfb;
    --color10: #ffd400;
    --color11: #f96e6f;
    --color12: #362e42;
    --color13: black;
}

/* Reset Default Settings */
* {
    box-sizing: border-box;
    margin: 0;
}



.container-sub{
   margin-bottom: 20px;
   margin-top: 20px;
    width: 100%;

    /* Flex */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 300px));
    gap: 25px;
    justify-content: center;
    align-items: center;
}
@media (max-width: 644px) {
    .container {
        gap: 40px;
    }
}

.card {
    width: 300px;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;

    /* Flex */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    transform: scale(1.04);
}

.card::before {
    background-color: var(--color05);
    color: white;
    padding: 20px 35px 10px;

    /* Transform */
    transform: translate(calc(31px + 35px), -35px) rotate(45deg);
    transform-origin: top left;

    content: 'NEW';
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.card:nth-of-type(2)::before {
    background-color: var(--color06);
    color: white;
}

.card:nth-of-type(3)::before {
    background-color: var(--color07);
    color: white;
}

/* Info */
.card__info {
    width: 100%;
    height: 130px;

    /* Background */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    /* Position */
    position: relative;
    z-index: 0;

    /* Flex */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card__info::before {
    background-color: #000000b0;
    width: 100%;
    height: 100%;
    opacity: 0.8;

    content: '';
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
}


.card__name {
color: var(--color01);
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 1px;
    font-family: 'Bebas Neue', sans-serif;
}

.card__price {
    color: var(--color05);
    font-size: 22px;
    font-weight: 400;
}

.card__priceSpan {
    color: white;
}

.card:nth-of-type(3) .card__priceSpan {
    color: var(--color01);
}

/* Content */
.card__content {
    background-color: var(--color09);
    width: 100%;
    height: calc(100% - 130px);
    border-top: solid 2px;
    border-bottom: solid 2px;

    /* Flex */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card__rows {
    width: 100%;
}

.card__row {
    color: var(--color13);
    width: 100%;
    padding: 20px 0;
    text-align: center;
}

.card__row:nth-of-type(odd) {
    background-color: var(--color08);
}

.card__link {
    color: var(--color01);
    padding: 10px 15px;
    margin: 20px 0;
    text-decoration: none;
    border-radius: 4px;
}

.card__link:hover {
    background-color: var(--color02Hover) !important;
}

.card:nth-of-type(2) .card__link:hover {
    background-color: var(--color06Hover) !important;
}

.card:nth-of-type(3) .card__link:hover {
    background-color: var(--color04Hover) !important;
}