@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500;600&family=Noto+Sans:wght@400;700&family=Roboto+Slab:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500;600&family=Montserrat&family=Noto+Sans:wght@400;700&family=Roboto+Slab:wght@600&display=swap');


.packages-block {
    background-color: #f8f0ff;
    border-radius: 20px;
    border-color: #9a89be;
    border-width: 3px;
}

.package-name {
    color: #48278f !important;
    text-transform: capitalize !important;
}

    .package-name b {
        text-transform: capitalize !important;
    }

.packages-banner {
    font-family: 'Josefin Sans', sans-serif !important;
    font-family: 'Noto Sans', sans-serif !important;
    /*font-family: 'Roboto Slab', serif!important;*/
}

.ribbon {
    position: absolute;
    right: var(--right, 10px);
    top: var(--top, -3px);
    filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5));
}

    .ribbon > .content {
        color: white;
        font-size: 1.25rem;
        text-align: center;
        font-weight: 400;
        background: var(--color, #2ca7d8) linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.25) 100%);
        padding: 8px 2px 4px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
        width: var(--width, 32px);
        min-height: var(--height, 36px);
        transition: clip-path 1s, padding 1s, background 1s;
    }

    .ribbon.slant-up > .content {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 50% calc(100% - 6px), 0 100%);
    }

    .ribbon.slant-down > .content {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 6px), 0 calc(100% - 12px));
    }

    .ribbon.down > .content {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 50% 100%, 0 calc(100% - 8px));
    }

    .ribbon.up > .content {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
    }

    .ribbon.check > .content {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 40% 100%, 0 calc(100% - 12px));
    }


.package-collapse {
    margin-top: 8rem !important;
}

.ribbon-wrapper {
    position: relative;
    z-index: 1;
    margin: 5% auto;
}

h1.post-title {
    visibility: hidden;
    width: 0;
    height: 0;
}

.ribbon-price {
    font-size: 20px !important;
    text-transform: uppercase;
    width: 95%;
    position: relative;
    background-color: #ff6684; /* For browsers that do not support gradients */
    background-image: linear-gradient(#f35b5b,#ca3581);
    color: #fff;
    text-align: center;
    padding: 1em 2em;
    margin: 2em auto 3em
}

.package-rupees {
    font-family: 'Josefin Sans', sans-serif;
    font-family: 'Montserrat', sans-serif;
    /*font-family: 'Noto Sans', sans-serif;
    font-family: 'Roboto Slab', serif;*/
}

.package-test-count {
    font-size: 45px !important;
    color: #e14a6b;
}

@supports (-webkit-touch-callout: none) {
    /* CSS specific to iOS devices */
    .package-old-price {
        margin-top: 10px;
        text-decoration: line-through solid;
        /*text-decoration: line-through #e14a6b;*/
        color: #74698b;
        font-size: 18px;
        font-weight: 500;
    }
}

@supports not (-webkit-touch-callout: none) {
    /* CSS for other than iOS devices */
    .package-old-price {
        margin-top: 10px;
        /*text-decoration: line-through solid;*/
        text-decoration: line-through #e14a6b;
        color: #74698b;
        font-size: 18px;
        font-weight: 500;
    }
}




.package-rupees-symbol {
    font-size: 35px !important;
    color: #4d3737;
}

.package-whatsapp {
    width: 35px !important;
}

.package-total {
    color: #e14a6b;
}

.package-test-total {
    font-size: 40px !important;
    color: #e14a6b;
}

.ribbon-price:after,
.ribbon-price:before {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid #e14a6b;
    z-index: -1 !important;
}

.ribbon-price:before {
    left: -2em;
    border-right-width: 1.5em;
    border-left-color: transparent
}

.ribbon-price:after {
    right: -2em;
    border-left-width: 1.5em;
    border-right-color: transparent
}

.ribbon-price.ribbon-inner:after,
.ribbon-price.ribbon-inner:before {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #b23232 transparent transparent;
    bottom: -1em
}

.ribbon-price.ribbon-inner:before {
    left: 0;
    border-width: 1em 0 0 1em
}

.ribbon-price.ribbon-inner:after {
    right: 0;
    border-width: 1em 1em 0 0
}