﻿.hero {
    background-color: #FAD961;
    background-image: linear-gradient(90deg, #FAD961 0%, #F76B1C 100%);
    height: 70vh;
    border-radius: 0 0 0 125px;
}

.hero1 {
    background-color: #FAD961;
    background-image: linear-gradient(90deg, #FAD961 0%, #F76B1C 100%);
    height: 70vh;
    border-radius: 125px 0 0 0;
}

.heroPaltanium {
    background-color: #8EC5FC;
    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
    height: 70vh;
    border-radius: 0 0 0 125px;
}

.heroPaltanium1 {
    background-color: #8EC5FC;
    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
    height: 70vh;
    border-radius: 125px 0 0 0;
}

.heroBronze {
    background-color: #198754;
    background-image: linear-gradient(45deg, #198754 0%, #FFFB7D 100%);
    height: 70vh;
    border-radius: 0 0 0 125px;
}

.heroBronze1 {
    background-color: #198754;
    background-image: linear-gradient(45deg, #198754 0%, #FFFB7D 100%);
    height: 70vh;
    border-radius: 125px 0 0 0;
}
.subscription-custom-btn {
    width: 130px;
    height: 40px;
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
    font-family: inherit;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1);
    outline: none;
}

/*#region silver-card */
.silver-card {
    background-image: url('../images/subscription img/silver-card-bg.png');
    background-size: cover;
}

.silver-card-header {
    background-image: linear-gradient(45deg, #198754 0%, #FFFB7D 100%);
    height: 19vh;
    border-bottom-left-radius: 50% 65%;
    border-bottom-right-radius: 50% 65%;
    box-shadow: 0px 9px 0 0px hsl(133 35% 75% / 1), 0 18px 0 0px hsl(132.71deg 39.91% 88.99%);
}

.silver-card-text {
    font-family: fantasy;
    color: #40a634;
}
.silver-btn {
    background: rgb(0,172,238);
    background: linear-gradient(0deg, #198754 0%, #40a634 100%);
    width: 155px;
    height: 43px;
    line-height: 42px;
    padding: 0;
    border: none;
}

    .silver-btn span {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }

    .silver-btn:before,
    .silver-btn:after {
        position: absolute;
        content: "";
        right: 0;
        top: 0;
        background: #40a634;
        transition: all 0.3s ease;
    }

    .silver-btn:before {
        height: 0%;
        width: 2px;
    }

    .silver-btn:after {
        width: 0%;
        height: 2px;
    }

    .silver-btn:hover {
        background: transparent;
        box-shadow: none;
    }

        .silver-btn:hover:before {
            height: 100%;
        }

        .silver-btn:hover:after {
            width: 100%;
        }

    .silver-btn span:hover {
        color: #40a634;
    }

    .silver-btn span:before,
    .silver-btn span:after {
        position: absolute;
        content: "";
        left: 0;
        bottom: 0;
        background: #40a634;
        transition: all 0.3s ease;
    }

    .silver-btn span:before {
        width: 2px;
        height: 0%;
    }

    .silver-btn span:after {
        width: 0%;
        height: 2px;
    }

    .silver-btn span:hover:before {
        height: 100%;
    }

    .silver-btn span:hover:after {
        width: 100%;
    }

/*#endregion */

/*#region golden-card */
.golden-card {
    background-image: url('../images/subscription img/golden-card-bg.png');
    background-size: cover;
}

.golden-card-header {
    background-image: linear-gradient(90deg, #F76B1C 0%, #FAD961 100%);
    height: 19vh;
    border-bottom-left-radius: 50% 65%;
    border-bottom-right-radius: 50% 65%;
    box-shadow: 0px 9px 0 0px hsl(27 71% 75% / 1), 0 18px 0 0px hsl(27 71% 87% / 1);
}

.golden-card-text {
    font-family: fantasy;
    color: #f87421;
}
.golden-btn {
    background: rgb(0,172,238);
    background: linear-gradient(0deg, #F76B1C 0%, #fab761 100%);
    width: 155px;
    height: 43px;
    line-height: 42px;
    padding: 0;
    border: none;
}

    .golden-btn span {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }

    .golden-btn:before,
    .golden-btn:after {
        position: absolute;
        content: "";
        right: 0;
        top: 0;
        background: #fab761;
        transition: all 0.3s ease;
    }

    .golden-btn:before {
        height: 0%;
        width: 2px;
    }

    .golden-btn:after {
        width: 0%;
        height: 2px;
    }

    .golden-btn:hover {
        background: transparent;
        box-shadow: none;
    }

        .golden-btn:hover:before {
            height: 100%;
        }

        .golden-btn:hover:after {
            width: 100%;
        }

    .golden-btn span:hover {
        color: #F76B1C;
    }

    .golden-btn span:before,
    .golden-btn span:after {
        position: absolute;
        content: "";
        left: 0;
        bottom: 0;
        background: #F76B1C;
        transition: all 0.3s ease;
    }

    .golden-btn span:before {
        width: 2px;
        height: 0%;
    }

    .golden-btn span:after {
        width: 0%;
        height: 2px;
    }

    .golden-btn span:hover:before {
        height: 100%;
    }

    .golden-btn span:hover:after {
        width: 100%;
    }
/*#endregion */

/*#region platinum-card */
.platinum-card {
    background-image: url('../images/subscription img/platinum-card-bg.png');
    background-size: cover;
    box-shadow: 0px 9px 30px rgb(0 0 0 / 30%);
    /*box-shadow: 0px 25px 80px rgba(0, 0, 0, 0.15);*/
}

.platinum-card-header {
    background-image: linear-gradient(62deg, #292929 0%, #dedede 100%);
    height: 19vh;
    border-bottom-left-radius: 50% 65%;
    border-bottom-right-radius: 50% 65%;
    box-shadow: 0px 9px 0 0px hsl(219deg 3.57% 78.12%), 0 18px 0 0px hsl(252deg 6.2% 88.25%);
}

.platinum-card-text {
    font-family: fantasy;
    color: #292929;
}

.platinum-btn {
    background: rgb(0,172,238);
    background: linear-gradient(0deg, #292929 0%, #b0b0b0 100%);
    width: 155px;
    height: 43px;
    line-height: 42px;
    padding: 0;
    border: none;
}

    .platinum-btn span {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }

    .platinum-btn:before,
    .platinum-btn:after {
        position: absolute;
        content: "";
        right: 0;
        top: 0;
        background: #616161;
        transition: all 0.3s ease;
    }

    .platinum-btn:before {
        height: 0%;
        width: 2px;
    }

    .platinum-btn:after {
        width: 0%;
        height: 2px;
    }

    .platinum-btn:hover {
        background: transparent;
        box-shadow: none;
    }

        .platinum-btn:hover:before {
            height: 100%;
        }

        .platinum-btn:hover:after {
            width: 100%;
        }

    .platinum-btn span:hover {
        color: #616161;
    }

    .platinum-btn span:before,
    .platinum-btn span:after {
        position: absolute;
        content: "";
        left: 0;
        bottom: 0;
        background: #616161;
        transition: all 0.3s ease;
    }

    .platinum-btn span:before {
        width: 2px;
        height: 0%;
    }

    .platinum-btn span:after {
        width: 0%;
        height: 2px;
    }

    .platinum-btn span:hover:before {
        height: 100%;
    }

    .platinum-btn span:hover:after {
        width: 100%;
    }

/*#endregion */

#subscriptionModal .modal-content {
    background-image: url("../images/Subscription Img/subscription_modal_bg.jpg") !important;
    background-size: cover !important;
    background-blend-mode: luminosity;
    background-color: var(--bs-shrdn-primary) !important;
}



