.elementor-kit-9{--e-global-color-primary:#060606;--e-global-color-secondary:#B3B3B3;--e-global-color-text:#535353;--e-global-color-accent:#F0F0F0;--e-global-color-6510f25:#3F41EF;--e-global-color-901a5ef:#EA62F7;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"roc-grotesk";--e-global-typography-text-font-size:1rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:130%;--e-global-typography-accent-font-family:"roc-grotesk";--e-global-typography-accent-font-size:1.9rem;--e-global-typography-accent-font-weight:500;--e-global-typography-8964fa4-font-family:"roc-grotesk";--e-global-typography-8964fa4-font-size:clamp(7.5rem, 3.792rem + 4.34vw, 9rem);--e-global-typography-8964fa4-font-weight:500;--e-global-typography-aed3ba1-font-family:"roc-grotesk";--e-global-typography-aed3ba1-font-size:clamp(2.1875rem, 1.6713rem + 2.3596vw, 3.5rem);--e-global-typography-aed3ba1-font-weight:500;--e-global-typography-aed3ba1-line-height:110%;--e-global-typography-0aaef50-font-family:"roc-grotesk";--e-global-typography-0aaef50-font-size:clamp(2.4rem, 2.1231rem + 1.2308vw, 3rem);--e-global-typography-0aaef50-font-weight:500;--e-global-typography-0aaef50-line-height:110%;--e-global-typography-3cb7ba1-font-family:"roc-grotesk";--e-global-typography-3cb7ba1-font-size:clamp(1.5625rem, 1.2921rem + 1.236vw, 2.25rem);--e-global-typography-3cb7ba1-font-weight:400;--e-global-typography-3cb7ba1-letter-spacing:0px;--e-global-typography-6f5dd47-font-family:"roc-grotesk";--e-global-typography-6f5dd47-font-size:1rem;--e-global-typography-6f5dd47-font-weight:500;--e-global-typography-5812f3c-font-family:"roc-grotesk";--e-global-typography-5812f3c-font-size:font-size: clamp(1.3125rem, 0.9438rem + 1.6854vw, 2.25rem);--e-global-typography-5812f3c-font-weight:500;--e-global-typography-5812f3c-letter-spacing:0px;--e-global-typography-439c988-font-family:"roc-grotesk";--e-global-typography-439c988-font-size:clamp(3.125rem, 2.3876rem + 3.3708vw, 5rem);--e-global-typography-439c988-font-weight:500;--e-global-typography-439c988-text-transform:uppercase;--e-global-typography-439c988-line-height:110%;--e-global-typography-ca0129f-font-family:"roc-grotesk";--e-global-typography-ca0129f-font-size:clamp(4.375rem, 1.6713rem + 12.3596vw, 11.25rem);--e-global-typography-ca0129f-font-weight:500;--e-global-typography-ca0129f-text-transform:uppercase;--e-global-typography-ca0129f-line-height:110%;--e-global-typography-2a911c5-font-family:"roc-grotesk";--e-global-typography-2a911c5-font-size:clamp(2rem, 1.066rem + 4.2697vw, 4.375rem);--e-global-typography-2a911c5-font-weight:400;--e-global-typography-2a911c5-line-height:110%;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-kit-9 p{margin-block-end:0px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1450px){.elementor-kit-9{--e-global-typography-8964fa4-font-size:clamp(5.625rem, -0.011rem + 8.7977vw, 7.5rem);}}@media(max-width:1024px){.elementor-kit-9{--e-global-typography-8964fa4-font-size:clamp(2.8125rem, 1.352rem + 6.6766vw, 5.625rem);}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-9{--e-global-typography-8964fa4-font-size:35px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Pridanie gradiantu do heading pomocu class .gradiant */
.gradient{
  background: var(--OWI-GRADIENT, linear-gradient(87deg, #3F41EF 0.28%, #EA62F7 82.41%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
    position: relative;
    z-index: 9999;
}


/* 1. Nastavenie samotného tlačidla (a tagu) vo vnútri widgetu */
.button-gradient-fill .elementor-button {
    position: relative;
    z-index: 9995; /* Vytvorí vrstvu, aby bol text navrchu */
    overflow: hidden; /* Dôležité: Orezáva gradient, aby nešiel mimo rohov */
    
    /* Farba textu v kľude */
    color: #3F41EF; 
    
    transition: color 0.8s ease,;
}

/* 2. GRADIENT VRSTVA (Pseudo-element) */
.button-gradient-fill .elementor-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    
    /* ŠTART: Nulová šírka = neviditeľný */
    width: 0; 
    
    /* Tvoj gradient */
    background: var(--OWI-GRADIENT, linear-gradient(87deg, #3F41EF 0.28%, #EA62F7 82.41%));
    
    /* Posunieme ho pod text */
    z-index: 9991; 
    
    /* Rýchlosť a štýl animácie */
    transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Dat text nad gradiant */
.button-gradient-fill .elementor-button-text{
    z-index: 9994;
}

/* 3. HOVER - Roztiahnutie gradientu */
.button-gradient-fill .elementor-button:hover::before {
    width: 100%; /* Vyplní sa zľava doprava */
}

/* 4. HOVER - Zmena farby textu a borderu */
.button-gradient-fill .elementor-button:hover {
    color: #ffffff !important; /* Text bude biely */

}

/* Poistka pre Elementor text span, aby sa určite prefarbil */
.button-gradient-fill .elementor-button:hover .elementor-button-text {
    color: #ffffff !important;
}


/* 1. Nastavenie kontajnera a textu */
.line-animation {
    position: relative;
    display: inline-block; /* Dôležité: Aby sa čiara ťahala len pod textom, nie na celú šírku stĺpca */
    text-decoration: none;

    transition: color 1.8s  ease; 
}

/* 2. ČIARA (Pseudo-element) */
.line-animation::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px; /* Odstup od textu */
    height: 2px; /* Hrúbka čiary */
    border-radius: 50%;
    
    /* Pôvodná dĺžka čiary (podľa obrázku cca 20px) */
    width: 20px; 
    
    /* Farba čiary (použijeme tvoj gradient) */
    background: var(--OWI-GRADIENT, linear-gradient(87deg, #3F41EF 0.28%, #EA62F7 82.41%));
    
    /* Animácia roztiahnutia */
    transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 9999;
}

/* 3. HOVER - Roztiahnutie čiary */
.line-animation:hover::after {
    width: 100%;
    z-index: 9995;
}

/* 4. HOVER - Zmena textu na gradient */
.line-animation:hover {
    background: var(--OWI-GRADIENT, linear-gradient(87deg, #3F41EF 0.28%, #EA62F7 82.41%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    z-index: 9995!important;
}/* End custom CSS */