hr {
    color: grey;
}

blockquote {
    border:none;
    font-family:Georgia, "Times New Roman", Times, serif;
    margin-bottom:-30px;
    position: relative;
    max-width: 400px;
    margin: 0 auto;
    padding-left: 0.4em;
}

blockquote h3 {
    font-size:21px;
}

blockquote h3:before {
    content: "\201C";
    font-weight: bold;
    font-size:100px;
    color:#889c0b;
    position: absolute;
    top: -0.2em;
    left: -0.5em;
    font-family: 'Georgia';
}

blockquote h3:after {
    content: "\201D";
    font-weight: bold;
    font-size:100px;
    color:#889c0b;
    position: absolute;
    bottom: -0.6em;
    right: 0;
    font-family: 'Georgia';
}

input[type="radio"] {
    display: none;
}

.custom-tab-bar {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    background-color: #F9FAFB;
    padding: 30px;
}

.tabs {
    display: flex;
    position: relative;
    background-color: #ffffff;
    box-shadow: 0 10px 20px 0 rgba(7, 41, 19,.1),
    0 0 20px 0 rgba(7, 41, 19,.1);
    padding: 10px;
    border-radius: 100px;
}

.tabs > *{
    z-index: 2;
}

.tab{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    width: 200px;
    font-size: 1.25rem;
    font-weight: 500;
    border-radius: 99px;
    cursor: pointer;
    transition: color .5s, text-shadow .5s, font-size .5s;
}

input[type="radio"]:checked + label {
    color: var(--color-8);
    text-shadow: 0 0 20px var(--color-8);
    font-size: 1.5rem;
}

.selector {
    position: absolute;
    display: flex;
    height: 54px;
    width: 200px;
    background-color: var(--color-11);
    z-index: 1;
    border-radius: 100px;
    transition: transform .5s ease-in-out;
}

input[id="tab1"]:checked ~ .selector {
    transform: translateX(0);
}

input[id="tab2"]:checked ~ .selector {
    transform: translateX(100%);
}

input[id="tab3"]:checked ~ .selector {
    transform: translateX(200%);
}

input[id="tab4"]:checked ~ .selector {
    transform: translateX(300%);
}

.showClass {
    display: block !important;
    animation: apear 0.5s ease;
}

.hideClass {
    display: none !important;
}


#plan-card-preview-container {
    width: 50%;
}

#plan-card-preview-container .app-items div div img{
    width: 200px;
}

@keyframes apear {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.benefit div {
    display: flex;
}

.plan-sub-description {
    font-size: 20px;
}

* {
    margin: 0;
    /* padding: 0; */
    box-sizing: border-box;
}

body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background-color: var(--secondary-text);
    border-radius: 100px;
}

body::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 100px;
}

.faq-section .accordion {
    width: 100%;
}

.accordion-button:not(.collapsed) {
    /* background-color: #c5e5d8;*/
    background-color: var(--secondary-text);
}

.accordion-button:not(.collapsed)::after {
    background-image: none;
    transform: none;
}

.accordion-button:focus {
    box-shadow: none;
}

.faq-section .accordion-button h5 {
    /*   color: #7dbc9e; */
    color: var(--primary-text);
    margin-right: 13px;
}
.accordion-body {
    background-color: var(--secondary-text);
}
/* button:focus:not(:focus-visible) {
    outline: 0;
} */

/* list */
.accordion-body ol {
    counter-reset: step-counter;
    list-style-type: none;
    padding-left: 0;
}

.accordion-body ol > li {
    counter-increment: step-counter; /* Increment custom counter */
    margin-bottom: 10px;
}

.accordion-body ol > li::before {
    content: "Steps " counter(step-counter) ": "; /* Custom prefix */
    font-weight: bold;
}

@media screen and (min-width: 768px) {
    /*   .faq-section .accordion {
      width: 50%;
      margin: 0 auto;
    } */

    .accordion-button:before {
        right: 0.75rem;
    }

    .accordion-button.collapsed:after {
        right: 1.1875rem;
    }

    .faq-section .accordion-button h5 {
        margin-right: 0px;
    }
}

.responsive-quote {
    position: relative;
    margin: 20px;
    padding: 40px;
    background-color: var(--quote-bg-color);
    border-radius: 16px;
    scale: 0.8;
}

.responsive-quote::before {
    content: url("data:image/svg+xml,%3Csvg class='quote-svg' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.56863 4H4.43137C2.56863 4 1 5.6 1 7.5V10.8C1 12.7 2.56863 14.3 4.43137 14.3H6.78431C7.56863 14.3 8.35294 14 9.03922 13.6V15.7C9.03922 17 8.05882 18 6.78431 18H5.21569C4.62745 18 4.23529 18.4 4.23529 19C4.23529 19.6 4.62745 20 5.21569 20H6.78431C9.13725 20 11 18.1 11 15.7V10V7.5C11 5.6 9.43137 4 7.56863 4Z'%3E%3C/path%3E%3Cpath d='M19.6638 4H16.4299C14.5679 4 13 5.6 13 7.5V10.8C13 12.7 14.5679 14.3 16.4299 14.3H18.7818C19.5658 14.3 20.3497 14 21.0357 13.6V15.7C21.0357 17 20.0557 18 18.7818 18H17.2138C16.6259 18 16.2339 18.4 16.2339 19C16.2339 19.6 16.6259 20 17.2138 20H18.7818C21.1337 20 22.9956 18.1 22.9956 15.7V10V7.5C23.0936 5.6 21.5257 4 19.6638 4Z'%3E%3C/path%3E%3C/svg%3E");
    position: absolute;
    top: -10px;
    left: -10px;
    transform: scale(2);
    opacity: 0.1;
}

.responsive-quote::after {
    content: url("data:image/svg+xml,%3Csvg class='quote-svg' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.56863 4H4.43137C2.56863 4 1 5.6 1 7.5V10.8C1 12.7 2.56863 14.3 4.43137 14.3H6.78431C7.56863 14.3 8.35294 14 9.03922 13.6V15.7C9.03922 17 8.05882 18 6.78431 18H5.21569C4.62745 18 4.23529 18.4 4.23529 19C4.23529 19.6 4.62745 20 5.21569 20H6.78431C9.13725 20 11 18.1 11 15.7V10V7.5C11 5.6 9.43137 4 7.56863 4Z'%3E%3C/path%3E%3Cpath d='M19.6638 4H16.4299C14.5679 4 13 5.6 13 7.5V10.8C13 12.7 14.5679 14.3 16.4299 14.3H18.7818C19.5658 14.3 20.3497 14 21.0357 13.6V15.7C21.0357 17 20.0557 18 18.7818 18H17.2138C16.6259 18 16.2339 18.4 16.2339 19C16.2339 19.6 16.6259 20 17.2138 20H18.7818C21.1337 20 22.9956 18.1 22.9956 15.7V10V7.5C23.0936 5.6 21.5257 4 19.6638 4Z'%3E%3C/path%3E%3C/svg%3E");
    position: absolute;
    bottom: -10px;
    right: -10px;
    transform: scale(2) rotate(180deg);
    opacity: 0.1;
}
.responsive-quote p {
    font-size: calc(16px + 0.25vw);
}

.responsive-quote cite {
    font-size: calc(14px + 0.25vw);
}

.parent-container {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.blog h2 {
    font-size: 30px;
}

.blog h3 {
    font-size: 25px;
}

.produit-desc {
    display:flex;
}

.produit-desc .saving-info-illustration img {
    width: 500px;
    float: left;
}


.blog p {
    width: 90%;
}

.pret-blog p {
    width: 70%;
}