/*css/components/cards/css/index.scss*/
.card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   padding: var(--obj_padding);
   gap: var(--space_between-micro);
   background: var(--theme--card-background);
   border-width: 0.0625rem 0.0625rem 0.25rem 0.0625rem;
   border-style: solid;
   border-color: var(--theme--border);
   border-radius: var(--corner-small);
   transition: border-color 0.3s;
}
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6 {
   transition: color 0.3s;
}
.card:has([button-style=borderless]) {
   gap: var(--space_between-small);
}
.card[card-direction=horizontal] {
   flex-direction: row;
   align-items: center;
   border-width: 0.0625rem 0.0625rem 0.0625rem 0.25rem;
   gap: var(--space_between-small);
}
.card[card-direction=horizontal] .button-cotnainer {
   flex-grow: 0;
   flex-shrink: 0;
   width: auto;
}
.card[card-direction=vertical] .button-container:has(.arrow-button) {
   display: flex;
   justify-content: flex-end;
   width: 100%;
}
.card .text_content {
   gap: var(--space_between-micro);
}
.card a::after {
   display: block;
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   inset: 0;
   -o-object-fit: cover;
      object-fit: cover;
}
.wf-control .card a::after {
   display: none;
}
.card:has(a:hover) {
   border-color: var(--theme--text-link);
}
.card:has(a:hover) h1,
.card:has(a:hover) h2,
.card:has(a:hover) h3,
.card:has(a:hover) h4,
.card:has(a:hover) h5,
.card:has(a:hover) h6 {
   color: var(--theme--text-link);
}
.card[media-type=image] .media_content {
   border-radius: var(--corner-xsmall);
   overflow: clip;
   margin-bottom: var(--space_between-micro);
}
.card[media-type=image-bleed] {
   padding: 0;
   padding-bottom: var(--obj_padding);
   overflow: clip;
}
.card[media-type=image-bleed] .media_content {
   overflow: clip;
   margin-bottom: var(--space_between-micro);
}
.card[media-type=image-bleed] .text_content,
.card[media-type=image-bleed] .button-container {
   padding-inline: var(--obj_padding);
}
.card[medi-type=square-image] {
   flex-wrap: wrap;
   align-items: flex-start;
   -moz-column-gap: var(--space_between);
        column-gap: var(--space_between);
}
.card[medi-type=square-image] .media_content {
   border-radius: var(--corner-xsmall);
   overflow: clip;
   margin-bottom: var(--space_between-micro);
   aspect-ratio: 1;
   position: relative;
   flex-basis: clamp(6.25rem, 9.39vw + 4.05rem, 12.5rem);
   flex-shrink: 0;
}
.card[medi-type=square-image] .media_content img {
   position: absolute;
   width: 100%;
   height: 100%;
   inset: 0;
   -o-object-fit: cover;
      object-fit: cover;
}
.card[medi-type=square-image] .text_content {
   flex-grow: 1;
   flex-basis: clamp(8.75rem, 1.88vw + 8.3125rem, 10rem);
}
.card[medi-type=square-image-small] {
   flex-wrap: wrap;
   align-items: flex-start;
   -moz-column-gap: var(--space_between);
        column-gap: var(--space_between);
}
.card[medi-type=square-image-small] .media_content {
   border-radius: var(--corner-xsmall);
   overflow: clip;
   margin-bottom: var(--space_between-micro);
   aspect-ratio: 1;
   position: relative;
   flex-basis: var(--section_padding-xlarge);
   flex-shrink: 0;
}
.card[medi-type=square-image-small] .media_content img {
   position: absolute;
   width: 100%;
   height: 100%;
   inset: 0;
   -o-object-fit: cover;
      object-fit: cover;
}
.card[medi-type=square-image-small] .text_content {
   flex-grow: 1;
   flex-basis: clamp(8.75rem, 1.88vw + 8.3125rem, 10rem);
}
.card[media-type=icon] .media_content {
   border-radius: var(--corner-xsmall);
   overflow: clip;
   margin-bottom: var(--space_between-micro);
}
.card[media-type=icon] .media_content img {
   width: clamp(4rem, 1.5vw + 3.65rem, 5rem);
   aspect-ratio: 1;
}
.card[media-type=icon] .text_content {
   flex-grow: 1;
   flex-basis: clamp(8.75rem, 1.88vw + 8.3125rem, 10rem);
}
.card[media-type=logo] .media_content {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   max-width: clamp(8.75rem, 1.88vw + 8.3125rem, 10rem);
}
.card[media-type=logo] .media_content:is(:first-child) {
   justify-content: flex-start;
}
.card[media-type=logo] .media_content:is(:first-child):is(:last-child) {
   justify-content: center;
}
.card[media-type=logo] img {
   width: calc(9 * var(--_aspect-ratio) * 1% + 41%);
   height: auto;
}

.io-button .arrow-button svg .background {
   fill: #5a91f9;
   fill-opacity: 0.1;
}
.io-button .arrow-button svg .border {
   stroke: #5a91f9;
   stroke-opacity: 0.1;
}
.io-button .arrow-button svg .arrow {
   stroke: var(--theme--text-link);
   stroke-width: 2;
   stroke-linecap: round;
}

.card[card-type=background-image] {
   --theme--background: #000000;
   --theme--background-secondary: #1e1e1e;
   --theme--background-card: #1e1e1e;
   --theme--primary_text: #ffffff;
   --theme--secondary_text: #e4e4e4;
   --theme--tertiary_text: #cecece;
   --theme--text_on_color: #ffffff;
   --theme--divider: #4a4a4a;
   --theme--border: #4a4a4a;
   --theme--border-subtle: #343434;
   --theme--border-hover: #767676;
   --theme--button-primary: #3277f9;
   --theme--button-hover: #5a91f9;
   --theme--button-accent: var(--theme--accent-600, $blue-600);
   --theme--button-accent-hover: var(--theme--accent-500, $blue-500);
   --theme--button-text: #ffffff;
   --theme--text-link: #3277f9;
   --theme--text-link-alt: #32b1fe;
   --theme--text-link-hover: #5a91f9;
   --theme--text-link-alt-hover: #64c3fd;
   padding: vaR(--obj_padding-jumbo);
   border: 0;
   border-radius: var(--corner-jumbo);
   position: relative;
   overflow: clip;
   min-height: 90svh;
   justify-content: flex-end;
   align-items: flex-start;
}
@media (max-width: 767px) {
   .card[card-type=background-image] {
      min-height: 37.5rem;
   }
}
.card[card-type=background-image] .media_area {
   position: absolute;
   width: 100%;
   height: 100%;
   inset: 0;
   -o-object-fit: cover;
      object-fit: cover;
}
.card[card-type=background-image] .media_area .media_content {
   position: absolute;
   width: 100%;
   height: 100%;
   inset: 0;
   -o-object-fit: cover;
      object-fit: cover;
   border-radius: 0;
}
.card[card-type=background-image] .media_area img {
   position: absolute;
   width: 100%;
   height: 100%;
   inset: 0;
   -o-object-fit: cover;
      object-fit: cover;
   border-radius: 0;
}
.card[card-type=background-image] .text_area {
   position: relative;
   max-width: 27.75rem;
}
.card[card-type=background-image] .text_area h2 {
   color: var(--theme--primary_text, #fff);
   font-family: var(--primary_font, "Poppins", sans-serif);
   font-weight: 700;
   font-size: clamp(2.375rem, 2.63vw + 1.75625rem, 4.125rem);
   line-height: 1.1;
   text-wrap: pretty;
}
.card[card-type=background-image] .text_area .text_content {
   gap: var(--space_between);
}
.card[card-type=background-image] .text_area .button-container {
   --theme--background: #ffffff;
   --theme--background-secondary: #fafafa;
   --theme--background-card: #ffffff;
   --theme--primary_text: #000000;
   --theme--secondary_text: #343434;
   --theme--tertiary_text: #606060;
   --theme--divider: #cecece;
   --theme--border: #cecece;
   --theme--border-subtle: #e4e4e4;
   --theme--border-hover: #a2a2a2;
   --theme--button-primary: #0056f9;
   --theme--button-hover: #0045c7;
   --theme--button-accent: var(--theme--accent-700, $blue-700);
   --theme--button-accent-hover: var(--theme--accent-800, $blue-800);
   --theme--button-text: #ffffff;
   --theme--text-link: #0056f9;
   --theme--text-link-alt: #009fff;
   --theme--text-link-hover: #0045c7;
   --theme--text-link-alt-hover: #007fcc;
}
.card[card-type=background-image] .text_area .button-container .f1-button {
   position: relative;
}
.card[card-type=borderless] {
   padding: 0;
   border: 0;
}
.card[card-type=borderless] .media_area {
   width: 100%;
}
.card[card-type=borderless] .text_area {
   padding: var(--obj_padding-large);
}
.card[card-type=borderless] .text_content {
   gap: var(--space_between-small);
}
.card[card-type=borderless] .text_content h1,
.card[card-type=borderless] .text_content h2,
.card[card-type=borderless] .text_content h3,
.card[card-type=borderless] .text_content h4,
.card[card-type=borderless] .text_content h5,
.card[card-type=borderless] .text_content h6 {
   color: var(--theme--accent);
}