/*
Theme Name: SMItheme-child
Description: SMI block child theme.
Author: SMI Networks
Version: 0.1
Text Domain: smi-theme-child
Template: smi-theme
*/

p > .gb-shape {
	margin-right: 0.5em;
	vertical-align: middle;
}
p.keskita:has(span.gb-shape) {
    margin-left: auto !important;
    margin-right: auto !important;
}

:root {
	--smi--custom--mainpadding--t: calc(var(--smi-main-padding-top) * -1);
	--smi--custom--mainpadding--b: calc(var(--smi-main-padding-bottom) * -1);
	
	--root-t-0: calc(var(--smi-main-padding-top) * -1);
	--root-b-0: calc(var(--smi-main-padding-bottom) * -1);
	--root-lr-0: calc(var(--smi-root-padding-left-right) * -1);
}
/* Remove top, bottom and left-right root-padding */
.root-t-0, body .force.root-t-0 {margin-top: calc(var(--smi-main-padding-top) * -1) !important;}
.root-b-0, body .force.root-b-0 {margin-bottom: calc(var(--smi-main-padding-bottom) * -1) !important;}
.root-lr-0, body .force.root-lr-0 {margin-left: calc(var(--smi-root-padding-left-right) * -1) !important; margin-right: calc(var(--smi-root-padding-left-right) * -1) !important;}


html {
	cursor: default;
	scroll-behavior: smooth;
	scroll-padding-top: 9em;
	box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
strong {
	font-weight: 600;
}
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}
h1, h2 {
  text-wrap: balance;
}

:not(header) :where(.has-link-color) a, :where(main) :where(a):hover {
  text-decoration: underline;
} 
main {
	flex-grow: 1;
	overflow-x: clip;
}
.lisapalvelut .gb-accordion__item-open > .gb-accordion__content {
	padding: 1em 5.5%;
}
.lisapalvelut .gb-shape svg {
	font-size: 2.25em;
}
.teksti-vasemmalle {
	align-self: flex-start !important;
}
/* Footer ikkunan alareunaan */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.smi-shaders .wp-block-cover__background {
	display: inherit !important;
}
/* HERO */
.hero, body .force.hero {
	margin-block-start: calc(var(--smi-main-padding-top) * -1) !important;
	margin-block-end: var(--smi-main-padding-top) !important;
}
/* Hero inside <main> */
.hero-in-main {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	max-width: initial !important;
}
.content-sidebar main {
  position: unset;
}
.content-sidebar:has(.hero-in-main) {
	padding-top: calc(var(--smi-main-padding-top) + var(--hero-min-height)) !important;
}
.content-sidebar:has(.hero-in-main) .main-content .is-layout-constrained {
	margin-block-start: 0;
}

footer {
	margin-block-start: auto;
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
 a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}
/* applies a black/white outline to links only when focused via keyboard */
*:focus {
	outline: none;
}
a:focus-visible, button:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 2px #fff,0 0 0 4px #333333 !important;
}
form *:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 1px #fff,0 0 0 2px #333333 !important;
}
@media (min-width: 768px) {
.piilopainike {
	display: none !important;
}
.kumppanit .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*="flex-basis"] {
	flex-grow: 1;
}
}
@media (max-width: 1349px) {
.has-8-x-large-font-size {
	font-size: var(--wp--preset--font-size--7-x-large) !important;
}
}
@media (max-width: 1199px) {
.wp-block-media-text {
	display: flex;
	flex-direction: column;
}
.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
	position: relative;
	height: 21em;
	overflow: clip;
	order: -1;
}
.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
	position: relative;
	width: 100vw;
}
.wp-block-media-text > .wp-block-media-text__content .wp-block-group {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.kumppanit .is-layout-flex {
	flex-wrap: wrap !important;
}
.kumppanit .wp-block-column {
	flex-basis: 49.5% !important;
}
footer .has-small-font-size {
	font-size: 0.87em !important;
}
}
@media (max-width: 1024px) {
.media1.wp-block-media-text {
	margin-top: 9em !important;
}
}
@media (max-width: 1023px) {
.yritysesittely * {
	text-align: center !important;
	flex-direction: column;
	margin-left: auto !important;
    margin-right: auto !important;
}
.yritysesittely .wp-block-group {
	border-left-width: 0 !important;
	padding-left: 0 !important;
}
.yritysesittely .wp-block-cover {
	padding-top: 9em !important;
	padding-bottom: 9em !important;
}
.ikoni-teksti {
	padding-top: var(--wp--preset--spacing--8-x-large) !important;
	padding-right: 7% !important;
	padding-bottom: var(--wp--preset--spacing--8-x-large) !important;
	padding-left: 7% !important;
	text-align:center;
}
.ikoni-teksti .is-layout-flex {
	flex-direction:column;
}
.ikoni-teksti svg {
	max-width: 7em;
}
}
@media (max-width: 781px) {
.arimo {
	border-left-width: 0 !important;
}
.seravo {
	margin-top: 8em !important;
	margin-bottom: 6em !important;
	padding-top: 6em !important;
	padding-bottom: 8em !important;
}
.seravo .wp-block-group {
	border-left-width: 0 !important;
	padding-left: 0 !important;
	text-align: center !important;
}
.seravo h2 {
	text-align: center !important;
	width: 100%;
}
.teksti-vasemmalle {
	align-self: center !important;
}
.myynti-palsta {
	border-left-width: 0 !important;
	padding-left: 0 !important;
}
.page-id-296 .entry-content {
	text-align: center !important;
}
footer .wp-block-columns * {
	text-align: center !important;
}
}
@media (max-width: 767px) {
p.keskita2:has(span.gb-shape) {
    margin-left: auto !important;
    margin-right: auto !important;
}
.has-8-x-large-font-size {
	font-size: var(--wp--preset--font-size--5-x-large) !important;
}
.has-6-x-large-font-size {
	font-size: var(--wp--preset--font-size--4-x-large) !important;
		font-weight: 400 !important;
}
.has-5-x-large-font-size {
	font-size: var(--wp--preset--font-size--3-x-large) !important;
}
.heroo {
	height: calc(100vh - 86px);
}
	
.wp-block-cover .wp-block-gallery {
	display: none;
}
.wp-element-button, .wp-block-button__link {
	font-size: 0.9em;
}
p:has(span.gb-shape) {
	display: block;
	margin-left: 0 !important
}
p span.gb-text {
  font-size: 0.975em;
	/*vertical-align: text-top;*/
}
	p span.gb-shape {
	display: inline-block;
    margin-top: -3px;
}
}
@media (max-width: 600px) {
.has-6-x-large-font-size {
	font-size: var(--wp--preset--font-size--3-x-large) !important;

}
.has-3-x-large-font-size {
	font-size: var(--wp--preset--font-size--2-x-large) !important;
}
}
@media only screen and (max-width: 400px) {
	/* tavutus */
	body:not(.home) h1 {
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;
		}
	}


/****************************** Header ******************************/
@media (max-width:1079px) {
header .wp-block-buttons {
	display: none !important;
}
}
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 999;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	transition: 0.4s;
}
header.wp-block-template-part:not(.header-0) img.custom-logo {
	transition: 0.4s;
}
header.wp-block-template-part.skrollaus img.custom-logo {
	width: 100%;
}
header.wp-block-template-part:not(.header-0) ul.header-navi > .wp-block-navigation-item {
	transition: 0.4s;
}
header.wp-block-template-part.skrollaus ul.header-navi > .wp-block-navigation-item {
	padding-top: 1.25em;
	padding-bottom: 1.25em;
}
header.wp-block-template-part.alasSkrollaus {
	top: -150px;
}


/*Transparent Header (header-0) */
header.wp-block-template-part.header-0 {
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	position: absolute;
	box-shadow: none;
}
.header-0 > .has-background {
	background: linear-gradient(180deg,rgb(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.94) 55%, rgba(255, 255, 255, 0.67) 100%) !important;;
}
.logged-in.admin-bar .header-0 {
	top: 32px;
}
header.wp-block-template-part.header-0.skrollaus {
	position: fixed;
	top: 0;
	z-index: 9999;
	background: var(--smi-header-0-scroll-bg) !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	transition: 0.4s;
}
header.wp-block-template-part.header-0.alasSkrollaus {
	top: -150px;
}
@media screen and (max-width: 782px) {
	.logged-in.admin-bar .header-0 {
	  top: 48px;
	}
}


/* Logo */
header .smi-logo-width img {
	width: 100%;
	max-width: var(--smi-logo-width);
}
@media (max-width: 1079px) {
	header .smi-logo-width img {
		max-width: var(--smi-logo-width-tablet);
	}
}
@media (max-width: 600px) {
	header .smi-logo-width img {
		max-width: var(--smi-logo-width-phone);
	}
}


/****************************** NAVI ******************************/
ul.header-navi {
	position: initial;
}
ul.header-navi > .wp-block-navigation-item, ul.header-navi > ul > .wp-block-pages-list__item {
	padding-top: 1.75em;
	padding-bottom: 1.75em;
}
header.header-0 ul.header-navi > .wp-block-navigation-item {
	padding-top: 2.2em;
	padding-bottom: 2.2em;
}
header.header-0.skrollaus ul.header-navi > .wp-block-navigation-item, ul.header-navi > ul > .wp-block-pages-list__item {
	padding-top: 1.25em;
	padding-bottom: 1.25em;
}
ul.header-navi > .wp-block-navigation-item a, ul.header-navi > ul > .wp-block-pages-list__item a {
	padding-top: 0.8em;
	padding-bottom: 0.8em;
	padding-left: 1em;
	padding-right: 1em;
	font-family: var(--wp--preset--font-family--be-vietnam-pro);
}
ul.header-navi .wp-block-navigation-item.has-child > a {
	padding-right: 0;
}
ul.header-navi .wp-block-navigation__submenu-icon {
	padding-left: 0.25em;
	padding-right: 1.5em;
	height: 42px;
}
/* Haku */
.haku {
	display: none;
}
.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden, .wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
	overflow: visible;
}
.haku .wp-block-search__inside-wrapper {
	position: relative;
}
.haku .wp-block-search__input {
	border: 1px solid #707070;
	padding: 0.55em;
	position: absolute;
	right: 3.75em;
	min-width: 15em;
}
.haku .wp-block-search__button {
	padding: 0.5em 1em;
}
.haku .wp-block-search__button svg {
	min-height: 30px;
	min-width: 30px;
}
.haku .wp-block-search__input {
	padding: 0.75em;
	right: 1em;
	bottom: -4em;
}
.mobiilihaku {
	width: 100%;
	padding-left: 1em !important;
  padding-right: 1em !important;
  margin-bottom: 1.5em;
}

/* Change the WordPress default responsive navi css media query */
@media (min-width: 1080px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
        width: 100%;
        position: relative;
        z-index: auto;
        background-color: inherit;
    }
	header.wp-block-template-part.alasSkrollaus {
	top: 0 !important;
	}
	.haku {
	display: block;
	}
	.mobiilihaku {
		display: none;
	}
	
	/* Valmistellaan linkki-elementti */
.wp-block-navigation-item__content {
    position: relative;
    text-decoration: none !important; /* Poistetaan mahdollinen oletusalleviivaus */
    display: inline-block;
}

/* Luodaan viiva pseudo-elementillä */
.wp-block-navigation-item__content::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Säädä viivan etäisyyttä tekstistä tästä */
    left: 50%;
    width: 0;
    height: 3px; /* Viivan paksuus */
    background-color: var(--color-2);
    transition: width 0.3s ease, left 0.3s ease;
    transform: translateX(-50%);
}

/* Efekti hiiren ollessa päällä */
.wp-block-navigation-item__content:hover::after {
    width: 33%;
}
}

@media (max-width: 1079px) {
#modal-1 {
	background-image: url('/wp-content/uploads/2026/04/taustakuva-4.webp');
}
	#modal-1-content ul {
	height: 67vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
    width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open {
  animation:overlay-menu__fade-in-animation .1s ease-out;
  animation-fill-mode:forwards;
  padding:1.75em 5vw 1.75em 5vw;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
  flex-direction:row;
	flex-wrap: wrap;
	box-sizing: border-box;
}
ul.header-navi {
	margin-bottom: 2em;
}
ul.header-navi > .wp-block-navigation-item, ul.header-navi > ul > .wp-block-pages-list__item {
	padding-top: 1.5em !important;
	padding-bottom: 1.5em !important;
	padding-left: 0.5em !important;
	padding-right: 0.5em !important;
	justify-content: center;
}
ul.header-navi .wp-block-navigation__submenu-icon {
	padding-left: 1em;
	padding-right: 1em;
  display: inline-block !important;
	margin-left:auto;
	height: 24px;
}
ul.header-navi .wp-block-navigation__submenu-icon svg {
	scale: 2.5;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
  align-items: normal;
  background-color: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 0;
  left: -1px;
  opacity: 0;
  overflow: hidden;
  position: relative;
  top: 100%;
  transition: opacity .1s linear;
  visibility: hidden;
  width: 0;
	padding-top: 0;
	padding-left:0;
	padding-right:0;
}
.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
  height: auto;
  opacity: 1;
  overflow: visible;
  visibility: visible;
  width: auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
  min-width: 100%;
}
ul.header-navi > .wp-block-navigation-item a, ul.header-navi > ul > .wp-block-pages-list__item a {
	font-size: var(--smi-mobile-menu-font-size) !important;
}
ul.header-navi > .wp-block-navigation-item .wp-block-navigation__submenu-container a, ul.header-navi > ul > .wp-block-pages-list__item .wp-block-navigation__submenu-container a {
	font-size: var(--smi-mobile-sub-menu-font-size) !important;
	padding-top: 0.5em !important;
	padding-bottom: 0.5em !important;
	font-weight: 400;
}
ul.header-navi > .wp-block-navigation-item .wp-block-navigation__submenu-container li:first-child, ul.header-navi > ul > .wp-block-pages-list__item .wp-block-navigation__submenu-container li:first-child {
	margin-top: 1em;
}
}

/****************************** Remove the WordPress default responsive navi for 600px ******************************/
@media (min-width: 600px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
}


/* LOMAKKEET
*******************************/
.wpcf7-form {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(256px, 1fr) );
	gap: 1em 3.5%;
	line-height: 1.5;
}
.wpcf7-form > * {
	margin: 0;
}
.wpcf7-form > :not(p) {
	margin-top: 1rem;
	grid-column: 1 / -1;
}
.wpcf7-checkbox, .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875em 3.5%;
	margin-top: 1rem;
}
.wpcf7-list-item {
	margin: 1px;
}
.wpcf7-form p:nth-of-type(4), .wpcf7-form p:last-of-type {
	grid-column: 1 / -1;
}
label {
	font-size: 0.875em;
	color: #000;
}
input,
select,
textarea {
	background-color: #fff;
	border: 1px solid #ccc;
	color: #333;
	font-weight: 400;
	padding: 1em;
	width: 100%;
}
input:focus,
textarea:focus {
	border: 1px solid #999;
	outline: none;
}
input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}
::placeholder {
	color: #333;
	opacity: 1;
}
input[type="button"],
input[type="reset"],
input[type="submit"]
{
	background-color: var(--wp--preset--color--primary);
	border: 0;
	border-radius: 1px;
	color: #fff;
	cursor: pointer;
	font-weight: 400;
	padding: 0.9375rem 1.875em;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	width: auto;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
}
input[type="button"]:focus,
input[type="button"]:hover,
input[type="reset"]:focus,
input[type="reset"]:hover,
input[type="submit"]:focus,
input[type="submit"]:hover
{
	background-color: var(--wp--preset--color--secondary);
	border-width: 0;
	color: #fff;
}
.site-container input:disabled,
.site-container input:disabled:hover,
.site-container input[type="button"]:disabled,
.site-container input[type="button"]:disabled:hover,
.site-container input[type="reset"]:disabled,
.site-container input[type="reset"]:disabled:hover,
.site-container input[type="submit"]:disabled,
.site-container input[type="submit"]:disabled:hover {
	background-color: #eee;
	border-width: 0;
	color: #777;
	cursor: not-allowed;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button {
	display: none;
}


/****************************** Patterns ******************************/
.header-0-image.wp-block-cover {
	margin-top: 0;
}


/****************************** FAQ ******************************/
:root { --faq-accent-border: 4px solid #ae9575; --faq-section-bg: #f5f0ea; --faq-section-gap: 0.5rem; --faq-btn-padding: 1.5em 1.5em; --faq-answer-padding: 0 1.5em 1.5em; }

/* FAQ Toggle - Rakenteelliset tyylit */
.schema-faq {
    font-family: var(--wp--preset--font-family--mulish);
    background: var(--faq-bg, transparent);
    padding: var(--faq-padding, 0);
    border-radius: var(--faq-container-radius, 0);
	color: #111;
}
.schema-faq-section {
    border: var(--faq-border, none);
    border-bottom: var(--faq-divider, none);
    border-left: var(--faq-accent-border, none);
    background: var(--faq-section-bg, transparent);
    border-radius: var(--faq-section-radius, 0);
    box-shadow: var(--faq-section-shadow, none);
    margin-bottom: var(--faq-section-gap, 0);
    backdrop-filter: var(--faq-backdrop-filter, none);
    transition: all 0.3s ease;
    overflow: hidden;
}
.faq-toggle-btn {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; background: transparent; border: none;
    padding: var(--faq-btn-padding, 1em);
    font-size: var(--faq-question-size, 1em);
    font-weight: var(--faq-question-weight, 700);
    cursor: pointer; text-align: left; line-height: 1.4;
	font-family: var(--wp--preset--font-family--mulish);
}
.faq-toggle-btn strong {
color: #111;
  font-family: var(--wp--preset--font-family--mulish);
}
.faq-icon {
    flex-shrink: 0; width: 20px; height: 20px; margin-left: 1rem;
    transition: transform 0.3s ease; color: #111;
}
.faq-toggle-btn[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }
.schema-faq-answer-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.schema-faq-answer-wrapper.is-open { grid-template-rows: 1fr; }
.schema-faq-answer-inner { overflow: hidden; }
.schema-faq-answer { margin: 0; padding: var(--faq-answer-padding, 0 1em 1em); font-size: var(--faq-answer-size, 0.9em); line-height: 1.6; color: var(--faq-answer-color, #111111); }



/****************************** INTERSECTION-OBSERVER ANIMAATIOT ******************************/
.feidaus {
  opacity: 0;
  transition: opacity var(--smi-anim-speed) ease-in;
}
.feidaus.appear {
  opacity: 1;
}
.vasemmalta {
  transform: translateX(-5rem);
}
.oikealta {
  transform: translateX(5rem);
}
.ylhaalta {
  transform: translateY(-5rem);
}
.alhaalta {
  transform: translateY(5rem);
}
.vasemmalta, .oikealta {
  transition: opacity var(--smi-anim-speed) ease-in, transform var(--smi-anim-speed) ease-out;
  opacity: 0;
}
.ylhaalta, .alhaalta {
  transition: opacity var(--smi-anim-speed) ease-in, transform var(--smi-anim-speed) ease-out;
  opacity: 0;
}
.vasemmalta.appear, .oikealta.appear, .ylhaalta.appear, .alhaalta.appear {
  -webkit-transform: translate(0);
  transform: translate(0);
  opacity: 1;
}
.viive100 {transition-delay: 0.1s;}
.viive200 {transition-delay: 0.2s;}
.viive250 {transition-delay: 0.25s;}
.viive300 {transition-delay: 0.3s;}
.viive400 {transition-delay: 0.4s;}
.viive500 {transition-delay: 0.5s;}
.viive600 {transition-delay: 0.6s;}
.viive700 {transition-delay: 0.7s;}
.viive750 {transition-delay: 0.75s;}
.viive800 {transition-delay: 0.8s;}
.viive900 {transition-delay: 0.9s;}
.viive1000 {transition-delay: 1s;}
.viive2000 {transition-delay: 2s;}



/****************************** Painike-efektit ******************************/
        /* Kohdistetaan tyylit tarkalleen WordPressin luokkiin */
        .wp-block-button__link {
            position: relative;
            display: inline-block;
            color: #ffffff !important;
            background: linear-gradient(180deg,var(--wp--preset--color--custom-color-2) 0%, var(--wp--preset--color--custom-color-2) 16%, var(--wp--preset--color--custom-color-1) 100%) !important; /* Tausta on aluksi tyhjä */
            text-decoration: none;
            transition: color 0.4s ease !important;
            overflow: hidden; /* Estää hohdetta menemästä reunojen yli */
            z-index: 1;
        }
        .is-style-outline .wp-block-button__link {
            position: relative;
            display: inline-block;
            color: currentcolor !important;
            background: transparent !important;
        }
        .is-style-outline--2 .wp-block-button__link {
            color: #ffffff !important;
        }
.is-style-outline--5 .wp-block-button__link, .is-style-outline--6 .wp-block-button__link {
	 border-color: #282828 !important;
        }

        /* Luodaan laajeneva tausta pseudo-elementillä */
        .wp-block-button__link::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            right: 50%;
            bottom: 0;
            background: linear-gradient(180deg,var(--color-2) 0%, var(--color-2) 10%, var(--color-1) 100%);
            z-index: -1;
            transition: all 0.4s ease;
            opacity: 0;
        }
        .is-style-outline .wp-block-button__link::before {
            background: linear-gradient(180deg,var(--color-2) 0%, var(--color-2) 10%, var(--color-1) 100%);
        }
        .is-style-outline--6 .wp-block-button__link::before, .is-style-outline--5 .wp-block-button__link::before {
            background: #282828;
        }
        .wp-block-button__link:hover {
            color: #ffffff !important;
        }
 .is-style-outline--6 .wp-block-button__link:hover,  .is-style-outline--5 .wp-block-button__link:hover {
            color: #ffffff !important;
	 border-color: #282828 !important;
        }

        .wp-block-button__link:hover::before {
            left: 0;
            right: 0;
            opacity: 1;
        }