:root{
    --transition: all .2s ease-in-out;
    --primary: #26384E;
    --secodary: #587488;
    --btn-bg: #F87311;
    --btn-c: #FFFFFF;
    --th-c: #FFFFFF;
    --tr-bg: #FFFFFF;
    --logo-num-bg: #FFFFFF;
    --table-shadow: rgb(0 0 0 / 22%);
    --table-border: #A7B6C0;
    --txt-c: #222222;
    --bonus-txt: #1E8EE0;
    --bonus-txt-accent: #F87311;
    --h1-bg: #26384E;
    --h1-c: #FFFFFF;
    --faq-header-c: #FFFFFF;
    --faq-bg: #26384E;
    --faq-body-c: #222222 ;

}
h1.entry-title, h2.entry-title, .page-title, .widget-area .widget-title, .ename {
    margin: 0;
    color: var(--h1-c);
    background: var(--h1-bg);
    border-radius: .5rem;
    font-weight: bold;
}
h2, h3{font-weight: bold; margin: 1rem auto;}
.rounded-xl{border-radius: .5rem;}
.main-btn{
    padding: .5rem;
    border-radius: .5rem;
    background-color: var(--btn-bg);
    color: var(--btn-c);
    transform: var(--transition);
    text-decoration: none;
    width: 150px;
    max-width: 100%;
    font-weight: bold;
}
.main-btn:hover{
    background: color-mix(in srgb, var(--btn-bg) 80%, black);    
    color: var(--btn-c);
}
.primary-table{
    background: var(--secodary);
    border-radius: .5rem;
    box-shadow: 1px 3px 6px var(--table-shadow);
    border: 1px solid var(--table-border);
}
.primary-table th{
    color: var(--th-c);
}
.primary-table tbody tr{
    background: var(--tr-bg);
}
.primary-table .main-btn.follow{
    background: transparent;
    border: 1px solid var(--btn-bg);
    color: var(--btn-bg);
}
.primary-table .main-btn.follow:hover{
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--btn-bg) 80%, black);
    color: color-mix(in srgb, var(--btn-bg) 80%, black);
}
.primary-table .terms{
    border-top: 1px solid var(--table-border);
    font-size: 10px;
    color: var(--txt-c);
    width: 100%;
}
.primary-table [class*="bg-"] {
    border: none;
    border-radius: .5rem;
    position: relative;
    width: 140px;
    padding-left: .5rem;
}
.primary-table .num {
    position: absolute;
    background: var(--logo-num-bg);
    width: 17px;
    height: 17px;
    top: 0;
    left: -1px;
    border-radius: .5rem 0 0 0;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: var(--txt-c);
}
.primary-table .num.first {
    color: var(--btn-bg);
}
.primary-table .brand-bonus {
    font-size: 17px;
    font-weight: bold;
    color: var(--bonus-txt);
}
.primary-table .bonus-amount {
    color: var(--bonus-txt-accent);
}
@media screen and (max-width: 767px) {
    .primary-table {
        width: 360px;
        max-width: 100%;
    }
    .primary-table tbody tr:first-of-type{
        border-radius: .5rem .5rem 0 0;
    }
}
.faq .card-header{color: var(--faq-header-c);
    text-align: left;
    font-style: italic;
    position: relative;
    font-size: 16px;
    background: var(--faq-bg);
    width: 100%;
    margin: 0;
    border-radius: .5rem;
transition: var(--transition);
}
.faq .card-header:hover{color: var(--faq-header-c);background: color-mix(in srgb, var(--faq-bg) 80%, transparent);}
.faq .card-header[aria-expanded="true"]::after{transform: rotate(180deg); top: 31%;}
.faq .card-header:hover, .faq .card-header:focus{outline: 0;text-decoration: none;box-shadow: none;}
.faq .card-body{color: var(--faq-body-c);padding: 0.5rem 2rem 1rem;}