@font-face {
    font-family: 'ElegantIcons';
    src: url('/wp-content/themes/thegem-elementor/fonts/elegant/ElegantIcons.eot');
    src: url('/wp-content/themes/thegem-elementor/fonts/elegant/ElegantIcons.eot?#iefix') format('embedded-opentype'),
        url('/wp-content/themes/thegem-elementor/fonts/elegant/ElegantIcons.woff') format('woff'),
        url('/wp-content/themes/thegem-elementor/fonts/elegant/ElegantIcons.ttf') format('truetype'),
        url('/wp-content/themes/thegem-elementor/fonts/elegant/ElegantIcons.svg#ElegantIcons') format('svg');
    font-weight: normal;
    font-style: normal;
}

.cybele-button a {
    font-family: var(--e-global-typography-accent-font-family), sans-serif;
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: var(--e-global-typography-accent-font-weight);
    text-transform: var(--e-global-typography-accent-text-transform);
    font-style: var(--e-global-typography-accent-font-style);
    text-decoration: var(--e-global-typography-accent-text-decoration);
    line-height: var(--e-global-typography-accent-line-height);
    display: inline-flex;
    align-items: center;
}

.cybele-button:not(.link-cybele) a {
    padding: var(--global-padding-button);
    overflow: hidden;
}

.cybele-button .arrow-right {
    font-family: 'ElegantIcons';
    font-style: normal;
    font-weight: 500;
    position: relative;
    height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cybele-button .arrow-right:before {
    content: "\24";
}

/* Has icon */
.cybele-button a #first-arrow {
    margin-left: 10px;
    width: 1em;
}

.cybele-button:not(.link-cybele) a #second-arrow {
    width: 0;
}

.cybele-button a #first-arrow:before {
    transition: all 300ms;
    font-size: 0;
    position: relative;
    line-height: normal;
    display: block;
}

.cybele-button:not(.link-cybele) #second-arrow:before {
    position: absolute;
    line-height: normal;
    font-size: 120%;
    top: -1px;
    left: -18px;
    transition: all 300ms;
}

.cybele-button a:hover #first-arrow:before {
    font-size: 120%;
}

.cybele-button:not(.link-cybele) a:hover #second-arrow:before {
    left: 30px;
}


/* Link */
.cybele-button.link-cybele #first-arrow:before {
    font-size: 120%;
}
.cybele-button.link-cybele #first-arrow{
    margin-left: 10px;
}
.cybele-button.link-cybele a:hover #first-arrow:before {
    transform: translateX(-5px);
}

.cybele-button.link-cybele #second-arrow {
    display: none;
}

/**** No icon ****/
.cybele-button:not(.link-cybele) a #only-arrow:before {
    position: absolute;
    line-height: normal;
    font-size: 120%;
    top: -1px;
    transition: all 300ms;
    left: 30px;
}

.cybele-button:not(.link-cybele) a:hover #only-arrow:before {
    left: -13px;
}

.cybele-button:not(.link-cybele) a:has(#only-arrow) .text {
    transition: all 300ms;
    padding: 0 10px;
}

.cybele-button:not(.link-cybele,.no-icon) a:has(#only-arrow):hover .text {
    transform: translateX(-13px);
}

/* No icon - hide every icons*/
.cybele-button.no-icon a i {
    display: none!important;
}
.cybele-button.no-icon .text{
    transform: none;
}

/* Link */

.cybele-button.link-cybele #only-arrow:before {
    position: absolute;
    line-height: normal;
    left: 10px;
    transition: all 300ms;
    font-size: 0;
}

.cybele-button.link-cybele a:hover #only-arrow:before {
    font-size: 120%;
}

/*Primary*/
.cybele-button.blue-cybele.primary a {
    background-color: var(--e-global-color-accent);
    color: white;
    border-radius: 80px;
    border: 1px solid var(--e-global-color-accent);
}

.cybele-button.blue-cybele.primary a:hover {
    background-color: var(--e-global-color-47f275a);
    border: 1px solid var(--e-global-color-47f275a);
}

/*Secondary*/
.cybele-button.blue-cybele.secondary a {
    background-color: transparent;
    color: var(--e-global-color-accent);
    border-radius: 80px;
    border: 1px solid var(--e-global-color-accent);
}

/*White Primary*/
.cybele-button.white-cybele.primary a {
    background-color: #fff;
    color: #000;
    border-radius: 80px;
    border: 1px solid #fff;
}

/*White Secondary*/
.cybele-button.white-cybele.secondary a {
    background-color: transparent;
    color: #fff;
    border-radius: 80px;
    border: 1px solid #fff;
}

/*black Primary*/
.cybele-button.black-cybele.primary a {
    background-color: #000000;
    color: #fff;
    border-radius: 80px;
    border: 1px solid #000000;
}

/*black Secondary*/
.cybele-button.black-cybele.secondary a {
    background-color: transparent;
    color: #000000;
    border-radius: 80px;
    border: 1px solid #000000;
}

/*Lilac Primary*/
.cybele-button.lilac-cybele.primary a {
    background-color: var(--e-global-color-6e664bf);
    color: white;
    border-radius: 80px;
    border: 1px solid var(--e-global-color-6e664bf);
}

/*Lilac Secondary*/
.cybele-button.lilac-cybele.secondary a {
    background-color: transparent;
    color: var(--e-global-color-6e664bf);
    border-radius: 80px;
    border: 1px solid var(--e-global-color-6e664bf);
}

/* Link */
.cybele-button.link-cybele a {
    color: var(--e-global-color-accent);
}

.cybele-button.link-cybele a .text {
    position: relative;
}

.cybele-button.link-cybele a .text::before {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -3px;
    left: 0;
    background-color: var(--e-global-color-accent);
    transition: all 300ms;
}

.cybele-button.link-cybele a:hover .text::before {
    width: 100%;
}

/* Dark Link */
.cybele-button.dark.link-cybele a {
    color: white;
}
.cybele-button.dark.link-cybele a .text::before {
    background-color: white;
}


/* Download */
.cybele-button.download-cybele a {
    background-color: var(--e-global-color-accent);
    color: white;
    border-radius: 80px;
    border: 1px solid var(--e-global-color-accent);
    position: relative;

}

.cybele-button.download-cybele a:hover {
    background-color: var(--e-global-color-47f275a);
    border: 1px solid var(--e-global-color-47f275a);
}

.cybele-button.download-cybele a .tws-download {
    font-size: 120%;
    margin-right: 10px;
    transition: all 300ms;
    width: 1em;
    height: 1em;
}

.cybele-button.download-cybele a #first-down {
    position: absolute;
    top: -30px;
}

.cybele-button.download-cybele a:hover #first-down {
    top: 9px;
}

.cybele-button.download-cybele a #second-down {
    position: relative;
}

.cybele-button.download-cybele a #second-down:before {
    position: absolute;
    transition: all 300ms;
    left: 0;
    top: 0;
}

.cybele-button.download-cybele a:hover #second-down:before {
    top: 45px;
}

/* Download Secondary */
.cybele-button.download-cybele.secondary a {
    background-color: transparent;
    color: var(--e-global-color-accent);
    border: 1px solid var(--e-global-color-accent);
}

.cybele-button.download-cybele.secondary a:hover {
    background-color: transparent;
    border: 1px solid var(--e-global-color-accent);
}