/*
 * COMPONENT STYLES
 * Widgets, cards, buttons, forms, lists, CTAs, and reusable elements
 */

/* Masthead Component */
.hero-carousel {
  .masthead {
    .masthead__title {
      font-family: var(--font-family-secondary);
      font-size: var(--fs-h-l, 3rem);
      line-height: var(--lh-h-l, 1.2);

      span {
        font-weight: var(--fw-h-xl, 700);
        font-size: 1.75em;
        line-height: 1.2em;
      }
    }

    .masthead-pagination__title {
      font-weight: 400 !important;

      span {
        font-weight: 700;
      }
    }

    .social-link {
      font-size: var(--fs-label-s, 0.8125rem);
      color: var(--e-global-color-on-primary)
    }
  }
}

/* Page Masthead Component */
.page-masthead {
  background-position: var(--page-masthead-bg-position, center center);
  background-size: cover;
  background-repeat: no-repeat;

  .page-masthead__bg {
    &::after {
      background-color: var(--e-global-color-primary-deep);
      opacity: 0.75;
      mix-blend-mode: darken;
    }
  }

  .bg-image {
    background-position: var(--page-masthead-bg-position, center center);
    background-size: cover;
    background-repeat: no-repeat;
  }

  font-size: 1rem;

  .page-masthead__content {
    z-index: 1;
    position: relative;

    .page-masthead__title,
    .page-masthead__title .heading-title {
      color: var(--e-global-color-on-primary);
      font-size: 4.5rem;
      line-height: 1;
      font-weight: 500;
      font-family: var(--font-family-secondary);
    }

    .page-masthead__subtitle,
    .page-masthead__subtitle .heading-title {
      color: var(--e-global-color-highlight-secondary);
      padding-left: .25rem;
      margin-bottom: .375rem;
      text-transform: uppercase;
      font-size: 1rem;
      font-weight: 600;
      line-height: 1em;
      letter-spacing: 0.05em;
      font-weight: 700;
      font-family: var(--font-family-secondary);
    }

    .page-masthead__back_title,
    .page-masthead__back_title .heading-title {
      color: transparent;
      -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
      font-size: 7.5rem;
      line-height: 1.15;
      font-weight: 500 !important;
      font-family: var(--font-family-primary);

    }
  }
}

.cta-button {
  .premium-button {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family-secondary);
    letter-spacing: 0.05em;
    line-height: 1;
    font-weight: 500;
    min-width: 16em;

    &.premium-btn-lg {
      padding: 1.6em 1em 1.5em;
      font-size: var(--fs-button-m, 1rem);
    }

    .premium-button-style6-bg {
      background-color: var(--color-accent) !important;
    }

    &::after {
      content: "";
      position: absolute;
      top: 0.4em;
      left: 0.4em;
      right: 0.4em;
      bottom: 0.4em;
      width: auto;
      height: auto;
      border: 1px solid var(--color-border);
      transition: border-color 0.2s ease-out;
    }

    &:hover {
      &::after {
        border-color: var(--color-highlight);
      }
    }
  }
}

.elementor-widget-premium-img-layers-addon {
  &.h-full {
    .elementor-widget-container {
      height: 100%;

      .premium-img-layers-wrapper {
        height: 100%;
      }
    }
  }

  .premium-img-layers-list-item {
    &[class*="border"] {
      border-width: 0.5em;
      border-color: var(--e-global-color-bg-primary);
    }

    &[class*="aspect-"] {
      img {
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

.stats-showcase {
  .counter {
    justify-content: center;

    .counter__content {
      .counter__number {
        font-weight: 700 !important;
      }
    }

    .counter__back {
      padding-right: 12rem;
      font-weight: 700;
      font-size: 7em;
      -webkit-text-stroke-color: var(--e-global-color-tertiary-bright);
    }
  }
}

.cta-bar {
  background-color: var(--color-bg);
  color: var(--color-text);
  padding: 4rem 2em !important;
  align-items: center !important;

  .elementor-widget-text-editor {
    color: currentColor;
    text-align: center;

    font-size: var(--fs-body-m, 1rem);

    h3 {
      font-family: var(--font-family-secondary);
      font-size: 2em !important;
      margin-bottom: 0.5em;
    }
  }
}

.icon-card-grid {
  --color-bg: var(--e-global-color-bg-secondary);
  --color-border: var(--e-global-color-surface-secondary);
  --color-text: var(--e-global-color-text-primary);
  --color-accent: var(--e-global-color-highlight-secondary);
  --color-highlight: var(--e-global-color-primary);
  font-size: 1rem;

  .elementor-widget-icon-box {
    .service {
      font-size: var(--fs-body-m, 0.875rem);
      height: 100%;

      .service__content {
        height: 100%;
        color: var(--color-text) !important;
        border-color: var(--color-border) !important;

        &::before {
          background-color: var(--color-accent) !important;
        }
      }

      .service__icon {
        font-size: 1.5em;
        color: var(--color-accent) !important;
        background-color: var(--color-bg) !important;

        i,
        svg {
          width: 1em !important;
          height: 1em !important;
          color: currentColor !important;
          fill: currentColor !important;

          path:not([stroke^="#"]) {
            fill: currentColor !important;
          }

          path[stroke^="#"] {
            stroke: currentColor !important;
          }
        }
      }

      .service__title {
        font-family: var(--font-family-secondary) !important;
        font-size: 1.25em !important;
      }

      .service__text {
        font-family: var(--font-family-text) !important;
        font-size: 0.875em !important;
      }

      .service__button {
        font-family: var(--font-family-secondary) !important;
        font-size: 0.875em !important;
        font-weight: 500 !important;
      }
    }

    .service.-card.-hover:hover {
      --color-accent: var(--e-global-color-on-highlight);

      .service__content {
        background-color: var(--color-highlight) !important;
        color: var(--e-global-color-on-highlight) !important;
      }

      .service__icon {
        color: var(--e-global-color-on-highlight) !important;
      }
    }
  }
}

.icon-box-grid {
  --color-bg: var(--e-global-color-on-highlight);
  --color-border: var(--e-global-color-surface-secondary);
  --color-text: var(--e-global-color-text-primary);
  --color-accent: var(--e-global-color-highlight-secondary);
  --color-highlight: var(--e-global-color-primary);

  &.theme-secondary {
    --color-bg: var(--e-global-color-on-info);
    --color-accent: var(--e-global-color-info);
    --color-highlight: var(--e-global-color-primary);
  }

  &.theme-tertiary {
    --color-bg: var(--e-global-color-on-success);
    --color-accent: var(--e-global-color-success);
    --color-highlight: var(--e-global-color-primary);
  }

  font-size: var(--fs-body-s, 0.875rem);
  gap: 3rem;

}

.icon-box-grid .elementor-widget-premium-addon-icon-box,
.icon-box.elementor-widget-premium-addon-icon-box {
  padding: 0px;

  .premium-icon-box-container-in {
    padding: 2rem;

    .premium-icon-wrapper {
      color: var(--color-accent) !important;
      font-size: 7em;

      i,
      svg {
        color: currentColor !important;
        font-size: 1em !important;
        width: 1em !important;
        height: 1em !important;

        path:not([stroke^="#"]) {
          fill: currentColor !important;
        }

        path[stroke^="#"] {
          stroke: currentColor !important;
        }
      }
    }

    .premium-icon-box-content-wrap {

      .premium-icon-box-text-wrap {
        text-align: center;

        .premium-icon-box-title {
          font-family: var(--font-family-secondary);
          font-size: 1.375em !important;
          color: var(--color-highlight);
          justify-content: center;
        }

        .premium-icon-box-content {
          font-family: var(--font-family-text);
          font-size: 1em !important;
          color: var(--color-text);
          line-height: 1.6;
        }
      }
    }
  }
}

.icon-box-grid .elementor-widget-icon-box,
.icon-box.elementor-widget-icon-box {
  .background-num {
    height: 100%;

    .background-num__wrap {
      padding-top: 3.25em;
    }

    .background-num__num {
      font-family: var(--font-family-primary) !important;
      font-weight: 700;
      font-size: 5em;
      letter-spacing: 0.01em;
      -webkit-text-stroke: 1px var(--color-accent);
    }

    .background-num__front {
      .shadow-light {
        background-color: var(--color-accent);
        color: var(--color-bg) !important;
        width: 6.25em;
        height: 6.25em;

        i,
        svg {
          font-size: 2.25em !important;
          width: 1em !important;
          height: 1em !important;
          color: currentColor !important;

          path:not([stroke^="#"]) {
            fill: currentColor !important;
          }

          path[stroke^="#"] {
            stroke: currentColor !important;
          }
        }
      }
    }

    .elementor-icon-box-title {
      font-family: var(--font-family-secondary);
      font-size: 1.375em !important;
    }

    .elementor-icon-box-description {
      font-family: var(--font-family-text);
      font-size: 1em !important;

    }
  }
}

.tabs-section {
  .premium-tabs {
    --color-accent: var(--e-global-color-highlight-secondary);
    --color-border: var(--e-global-color-secondary);
    --color-bg: var(--e-global-color-bg-primary);

    &.premium-tabs-style-circle {
      --circle-size: 8rem;
      margin-top: calc(var(--circle-size) / 4);

      .premium-tabs-nav {
        position: relative;
        z-index: 10;
        margin-bottom: -2rem;

        .premium-tabs-nav-list {
          background-color: var(--color-bg);

          &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: var(--circle-size);
            width: calc(100% - (var(--circle-size)*2));
            height: 2px;
            background-color: var(--color-border);
          }
        }

        .premium-tabs-nav-list-item {
          color: --var(--color-text);

          .premium-tab-link {
            color: currentColor;
            padding: 1rem 0px;
          }

          &:after {
            content: "";
            position: absolute;
            z-index: -1;
            top: 50%;
            inset-inline-start: 50%;
            width: calc(var(--circle-size) + 1rem);
            height: calc(var(--circle-size) + 1rem);
            border-color: transparent;
            background-color: var(--color-bg);
            border-radius: 50%;
            transform: scale3d(1, 1, 1) translate(-50%, -50%);
            transition: all .3s ease-in-out;
          }

          &.tab-current {
            color: var(--color-accent);

            &:before {
              width: var(--circle-size);
              height: var(--circle-size);
              border-width: 3px;
              border-style: dashed;
              border-color: var(--color-border);
              background-color: var(--color-bg);
            }
          }
        }
      }
    }
  }

  .premium-content-wrap {
    border: solid 1px var(--e-global-color-surface-secondary);
    padding: 8rem 2rem 2rem;
    border-radius: 1rem;

    .premium-tabs-content-section {
      &.content-current {
        animation: fadeInUp 0.5s ease-out forwards;
      }
    }

    .page-section {
      border-radius: 0.5rem;
    }
  }
}

.mobile__footer {
  align-items: center;

  p {
    margin: 0px;
  }
}

/* Tab Content Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}