/* btn primary */

.btn-primary{
    border: 0px solid transparent !important;
    border-radius: 50px !important;
    padding: 3px 20px !important;
    color: var(--white-color) !important;
    font-size: var(--button-text-font-size) !important;
    font-family: var(--font-family-segoe-ui-bold) !important;
    line-height: 21.28px !important;
    text-transform: capitalize !important;
    width: fit-content !important;
    min-width: 150px !important;
    height: 45px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative !important;
    text-decoration: none !important;
    transition: none !important;
    z-index: 0;
    overflow: hidden !important;
}


.btn-primary::before,
.btn-primary::after{
    content: "" !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    margin: 0px;
    opacity: 1;
    display: block !important;
    transition: .3s ease-in-out;
}

.btn-primary > span{
    position: relative;
    z-index: 1;
}

.btn-primary::before {
    background: transparent;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    margin-left: 1px;
    margin-top: 1px;
    z-index: 1;
    border-radius: 39px;
}

.btn-primary::after{
    background: var(--primary-color);
}

.btn-primary:hover::before{
    background: var(--white-color);
}

.btn-primary:hover::after{
    background: var(--tertiary-color);
}

.btn-primary:hover > span{
    background: var(--tertiary-color);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-primary:focus{
    box-shadow: none !important;
}

.btn-primary:focus::after{
    border-radius: 50px !important;
    border: 0px !important;
    box-shadow: none !important;

    width: calc(100%) !important;
    height: 45px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border: 0px !important;
    right: inherit !important;
    bottom: inherit !important;
} 

/* btn primary*/


/* btn secondary white */

.btn-secondary-white{
    border-radius: 50px;
    padding: 3px 20px;
    color: var(--white-color);
    font-size: var(--button-text-font-size);
    font-family: var(--font-family-segoe-ui-bold);
    line-height: 150% !important;
    text-transform: capitalize;
    width: fit-content;
    min-width: 150px !important;
    height: 45px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    transition: none !important;
    border: 1px solid var(--white-color);
}

.btn-secondary-white span{
    position: relative;
    z-index: 1;
}

.btn-secondary-white:hover span{
    background: var(--tertiary-color);
    background-clip: text; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
}


.btn-secondary-white::before {
    content: '' !important; 
    position: absolute;
    z-index: 1;
    background-color: transparent;
    display: block !important;
    margin-left: 0px !important;
    opacity: 1 !important;
    border-radius: 50px;
    width: calc(100% - 2px);
    height: 43px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0px !important;
}

.btn-secondary-white::after{
    position: absolute;
    content: '';
    z-index: 0;
    border-radius: 50px;
    background-color: transparent;
    margin-left: 0px !important;
    width: calc(100%);
    height: 45px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0px !important;
}

.btn-secondary-white:hover::before{
    background-color: var(--white-color);
}

.btn-secondary-white:hover::after{
    background: var(--tertiary-color);
}

.btn-secondary-white:hover{
    border: 0px solid transparent !important;
    text-decoration: none !important;
    padding: 3px 20px !important;
    color: none !important;

    background: var(--tertiary-color);
    background-clip: text; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
}
/* btn secondary white */


/* btn secondary */

.btn-secondary{
    border-radius: 50px;
    padding: 3px 20px;
    color: var(--black200-color) !important;
    font-size: var(--button-text-font-size);
    font-family: var(--font-family-segoe-ui-bold);
    line-height: 21.28 !important;
    text-transform: capitalize;
    width: fit-content;
    min-width: 150px !important;
    height: 45px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    transition: none !important;
    border: 1px solid #000000;
    overflow: hidden;
}

.btn-secondary::before {
    content: '' !important; 
    position: absolute;
    z-index: -1;
    background-color: transparent;
    display: block !important;
    margin-left: 0px !important;
    opacity: 1 !important;
    border-radius: 50px;
    width: calc(100% - 2px);
    height: 43px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0px !important;
    right: inherit !important;
    bottom: inherit !important;
}

.btn-secondary::after{
    position: absolute;
    content: '';
    z-index: -2;
    border-radius: 50px;
    background-color: transparent;
    margin-left: 0px !important;
    width: calc(100%);
    height: 45px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0px !important;
    right: inherit !important;
    bottom: inherit !important;
}

.btn-secondary:hover::before{
    background-color: var(--white-color);
}

.btn-secondary:hover::after{
    background: var(--tertiary-color);
}

.btn-secondary:hover{
    border: 0px solid transparent !important;
    text-decoration: none !important;
    padding: 3px 20px !important;
    color: none !important;

    background: var(--tertiary-color);
    background-clip: text; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
}
/* btn secondary */

/* to top */
.uk-totop{
    background-color: var(--primary-color);
    width: 40px;
    height: 40px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uk-totop svg{
    display: none;
}
/* to top */

/* btn teriary */
.btn-teriary{
    font-size: var(--button-text-font-size);
    font-family: var(--font-family-segoe-ui-bold);
    line-height: 150% !important;
    text-transform: capitalize;
    color: var(--black200-color);
    position: relative;
    border: 0px;
    background: transparent;
    height: 22px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 3px 25px;
    padding-left: 0px;
    transition: none !important;
    width: fit-content;
}

.btn-teriary:hover{
    background: var(--tertiary-color);
    background-clip: text; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    padding: 3px 25px !important;
    padding-left: 0px !important;
    border: 0px !important;
}

.btn-teriary::after{
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    mask-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.87492 5.80083L2.16159 10.515L0.982422 9.33666L5.69659 4.6225L1.57159 0.497498H10.9999V9.92583L6.87492 5.80083Z' fill='%23ED0579'/%3E%3C/svg%3E%0A");
    background: var(--primary-color);
    opacity: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-position: center;
}

.btn-teriary:hover::after{
    background: var(--tertiary-color);
}
/* btn teriary */

/* btn tag */

.btn-tag .btn-link{
    font-family: 'Segoe UI Bold';
    font-size: var(--h5-font-size);
    line-height: 30px !important;
    padding: 0px 0px 0px 26px;
    border: 0px;
    color: #888B8D;
    display: inline-block;
    position: relative;
    text-decoration: none;
    background-color: transparent;
    margin-bottom: 14px;
}

.btn-tag.uk-active .btn-link{
    background: var(--tertiary-color);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-tag:not(.uk-acitve):hover .btn-link{
    background-color: none !important;
    background: none !important;
    border: 0px !important;
    padding: 0px 0px 0px 26px !important;
    text-decoration: none !important;
    color: #888B8D;
}

.btn-tag.uk-active:hover .btn-link{
    background-color: none !important;
    text-decoration: none !important;
    background: var(--tertiary-color) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}

.btn-tag::after{
    display: none !important;
}

.btn-tag .btn-link::before{
    content: "";
    width: 4px;
    height: 100%;
    position: absolute;
    right: calc(100% - 4px);
    top: 0px;
    background-color: #888B8D;
    display: block !important;
    opacity: 1 !important;
}

.btn-tag.uk-active .btn-link::before{
    width: 12px;
    right: calc(100% - 12px);

    background-color: var(--primary-color);
    display: block !important;
    opacity: 1 !important;
}

/* btn tag */

/* card */
.superhub-card{
    border-radius: 40px 40px 0px 0px;
    overflow: hidden;
    display: grid;
    grid-gap: 10px;
}

.superhub-card canvas{
    height: 360px;
}

.superhub-card{
    text-decoration: none !important;
}

.superhub-card .uk-card{
    display: grid;
    grid-gap: 20px;
}

.superhub-card .uk-card .uk-card-body h4{
    margin-bottom: 10px;
}

.superhub-card .cat{
    font-size: var(--body-text-font-size);
    font-family: var(--font-family-segoe-ui-normal);
    color: var(--black200-color);
    text-transform: uppercase;
    line-height: 21.28px;
}

.superhub-card h4{
    color: var(--black200-color);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.superhub-card p{
    font-size: var(--body-text-font-size);
    font-family: var(--font-family-helvetica-normal);
    color: var(--black200-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 24px;
}

.superhub-card:hover h4{
    background: var(--tertiary-color);
    background-clip: text; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
}
/* card */

/* arrow */
.uk-slidenav-next,
.uk-slidenav-previous{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    margin: 0px;
    visibility: visible !important;
}

.uk-slidenav-next{
    top: -92px;
}

.uk-slidenav-previous{
    top: -92px;
    right: 79px;
    left: inherit;
}

.uk-slidenav-previous.uk-invisible,
.uk-slidenav-next.uk-invisible{
    opacity: .5;
    pointer-events: none;
}

.uk-slidenav-previous svg{
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5L5 12M5 12L12 19M5 12L19 12' stroke='%23393E41' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.uk-slidenav-next svg{
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 19L19 12M19 12L12 5M19 12H5' stroke='%23393E41' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.uk-slidenav-previous:hover svg,
.uk-slidenav-next:hover svg{
    background: var(--white-color);
}

.uk-slidenav-next svg,
.uk-slidenav-previous svg{
    background: var(--black200-color);
    mask-repeat: no-repeat;
    mask-position: center;
    width: 24px;
    height: 24px;
}

.uk-slidenav-next:hover::before,
.uk-slidenav-previous:hover::before {
    background-color: var(--tertiary-color);
}

.uk-slidenav-next::before,
.uk-slidenav-previous::before {
    content: '' !important; 
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: -1;
    background-color: #F6F6F6;
    display: block !important;
    margin-left: 0px !important;
    opacity: 1 !important;
    border-radius: 50px;

    width: 57px;
    height: 57px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.uk-slidenav-next::after,
.uk-slidenav-previous::after{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    content: '';
    z-index: -2;
    border-radius: 50px;
    background: var(--tertiary-color);
    margin-left: 0px !important;
}
/* arrow */

/* border-gradient */

.border-gradient{
    position: relative;
    border-radius: 40px;
    overflow: hidden;
    padding: 40px;
}

.border-gradient > *{
    position: relative;
    z-index: 1;
}

.border-gradient::before, 
.border-gradient::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.border-gradient::before {
    background: #fff;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    margin-left: 1px;
    margin-top: 1px;
    z-index: 1;
    border-radius: 39px;
}

.border-gradient:hover::before {
    background: #fff;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    margin-left: 4px;
    margin-top: 4px;
    z-index: 1;
    border-radius: 38px;
    border-radius: 36px;
}

.border-gradient::after{
    background: #CCCCCC;
}

.border-gradient:hover::after{
    background: var(--tertiary-color);
}
/* border-gradient */

.player-icon{
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.player-icon::before{
    content: "";
    width: 160px;
    height: 160px;
    background-image: url("data:image/svg+xml,%3Csvg width='160' height='160' viewBox='0 0 160 160' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='80' cy='80' r='80' fill='url(%23paint0_linear_4760_15278)'/%3E%3Cg clip-path='url(%23clip0_4760_15278)'%3E%3Cpath d='M80 30C52.4283 30 30 52.4305 30 80C30 107.57 52.4283 130 80 130C107.572 130 130 107.57 130 80C130 52.4305 107.572 30 80 30ZM99.8772 81.7518L70.7105 100.502C70.3688 100.723 69.974 100.833 69.5834 100.833C69.2416 100.833 68.8957 100.748 68.5865 100.579C67.915 100.213 67.5 99.5129 67.5 98.75V61.25C67.5 60.4871 67.915 59.7871 68.5865 59.4209C69.2457 59.0588 70.0717 59.0811 70.7105 59.4982L99.8772 78.2482C100.471 78.6307 100.833 79.292 100.833 80C100.833 80.708 100.471 81.3691 99.8772 81.7518Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_4760_15278' x1='0' y1='0' x2='180.786' y2='28.598' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23ED0579'/%3E%3Cstop offset='1' stop-color='%23F7941D'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_4760_15278'%3E%3Crect width='100' height='100' fill='white' transform='translate(30 30)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat ;
}