.elementor-kit-6{--e-global-color-primary:#F9AC00;--e-global-color-secondary:#000000;--e-global-color-text:#FFFFFF;--e-global-color-accent:#1A1A1A;--e-global-color-311e120:#FFFFFFB3;--e-global-color-f7e4216:#FFFFFF99;--e-global-color-b5bbc63:#FFFFFF66;--e-global-color-c26ec0e:#16FB9740;--e-global-color-a52a6c1:#16FB97;--e-global-color-b60b692:#FFFFFF26;--e-global-typography-primary-font-family:"Helvetica";--e-global-typography-primary-font-size:4rem;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:100%;--e-global-typography-primary-letter-spacing:-6%;--e-global-typography-secondary-font-family:"Helvetica";--e-global-typography-secondary-font-size:3rem;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:100%;--e-global-typography-secondary-letter-spacing:-6%;--e-global-typography-text-font-family:"Helvetica";--e-global-typography-text-font-size:1.2rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:140%;--e-global-typography-text-letter-spacing:-4%;--e-global-typography-accent-font-family:"Helvetica";--e-global-typography-accent-font-size:1.2rem;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-line-height:140%;--e-global-typography-accent-letter-spacing:-4%;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}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:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --valko:#ffffff; --oranssi:#f9ac00; --valko-60:#ffffff99; --musta:#000000; --valko-15:#ffffff26; --tumma-harmaa:#0E0E0E; --valko-90:#ffffffe6; --valko-40:#ffffff66; --valko-10:#ffffff1a; --tumma-harmaa2:#1A1A1A; --musta-30:#0000004d; --vihrea-Copy:#16FB97; --valko-70:#ffffffb3; }
/* Start custom CSS *//*nappi oranssi*/
.gradient-kuva-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.gradient-kuva-button a,
.gradient-kuva-button button {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* Normal gradient */
.gradient-kuva-button a,
.gradient-kuva-button button {
  background: linear-gradient(180deg, #f9ac00 0%, #ee9700 100%);
  transition: color 0.5s ease, transform 0.5s ease;
}

/* Hover gradient + image layer */
.gradient-kuva-button a::before,
.gradient-kuva-button button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

background:
  url("https://www2.muvika.com/wp-content/uploads/2026/06/Frame-171-3.png"),
  linear-gradient(180deg, #ffffff 0%, #F1F1F1 100%);

  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Fade hover layer in */
.gradient-kuva-button a:hover::before,
.gradient-kuva-button button:hover::before {
  opacity: 1;
}

/*--------------*/


/*nappi musta*/
.gradient-kuva-button-musta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.gradient-kuva-button-musta a,
.gradient-kuva-button-musta button {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* Normal gradient */
.gradient-kuva-button-musta a,
.gradient-kuva-button-musta button {
  background: linear-gradient(70deg, #0F0F0F 0%, #121212 100%);
  transition: color 0.5s ease, transform 0.5s ease;
}

/* Hover gradient + image layer */
.gradient-kuva-button-musta a::before,
.gradient-kuva-button-musta button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

background:
  url("https://www2.muvika.com/wp-content/uploads/2026/06/Frame-171-4.png"),
  linear-gradient(180deg, #454545 0%, #121212 100%);

  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Fade hover layer in */
.gradient-kuva-button-musta a:hover::before,
.gradient-kuva-button-musta button:hover::before {
  opacity: 1;
}



/*-------------*/


  /*pienien korttien värien vaihto kun hiiri päällä*/
  .kortti {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  
  background: linear-gradient(130deg, #2C2C2C 0%, #000000 100%) !important;
  transition: transform 0.5s ease;
  }
  
  /* Hover gradient + image overlay */
  .kortti::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  
  background:
    url("https://www2.muvika.com/wp-content/uploads/2026/09/Frame-129.png"),
    linear-gradient(180deg, #000000 30%, #f9ac00 150%);
  
  background-size: contain;
  background-position: center, center;
  background-repeat: repeat, repeat;
  
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  }
  
  /* Fade hover state in */
  .kortti:hover::before {
  opacity: 1;
  }
  
  /* Keep all content above the hover layer */
  .kortti > * {
  position: relative;
  z-index: 1;
  }
  
  
  
  /*-------------------*/
  
  
  
  /* Button inside the card */
  .kortti .kortti-nappi {
  background-color: #ffffff0D !important;
  transition:
    background-color 0.5s ease,
    color 0.5s ease;
  }
  
  /* Button color when card is hovered */
  .kortti:hover .kortti-nappi {
  background-color: #f9ac00 !important;
  color: #000000 !important;
  }
  
  
  /*Iso kortti tausta ja nappi*/
  
  .kortti-iso {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  
  background:
    url("https://www2.muvika.com/wp-content/uploads/2026/09/Frame-129.png"),
    linear-gradient(180deg, #000000 30%, #f9ac00 150%) !important;
  
  background-size: contain;
  background-position: center;
  background-repeat: repeat, repeat;
  }
  
  .kortti-iso > * {
  position: relative;
  z-index: 1;
  }
  
  
  /*iso kortti nappi*/
  /* Button inside the card */
  .kortti-iso .kortti-iso-nappi {
   background:
    linear-gradient(180deg, #16FB9700 -60%, #f9ac0040 100%) !important;
  transition:
    background-color 0.5s ease,
    color 0.5s ease;
  }
  
  /* Button color when card is hovered */
  .kortti-iso:hover .kortti-iso-nappi {
  background-color: #f9ac00 !important;
  color: #000000 !important;
  }/* End custom CSS */