/* 
 Theme Name:   Hello Elementor Child Theme
 Theme URI:    www-beta.sonect.net
 Description:  This is the child theme
 Author:       Krikor Keshishian
 Author URI:   www-beta.sonect.net
 Template:     hello-elementor
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 /* == Add your own styles below this line ==
--------------------------------------------*/

/*================ GENERAL - ELEMENTS ================*/

/*================ Comparison table  ================*/
/*  Component variables are set in the comparison-table-v2 template  */
.sonect_content_container {
  padding: 20px !important;
}

.sonect_content_wrapper {
  max-width: 100%;
}

.sonect-comparison-table-wrapper {
  position: relative;
}

.sonect-comparison-table .sonect-row {
  position: relative;
  padding: 0 !important;
}

.sonect-comparison-table .sonect-row::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 0;
  height: 1px;
  width: 100%;
  background: #000000;
  background: radial-gradient(circle, rgba(var(--sonect-border-color), 1) 1%, rgba(var(--sonect-border-color), 0) 100%);
}

.sonect-comparison-table .sonect-row .sonect-col p {
  text-align: center;
  color: var(--sonect-normal-col-text-color);
  font-size: 22px;
}

.sonect-comparison-table .sonect-row .sonect-col:nth-child(2) {
  background: var(--sonect-accent-col-color);

  p {
    color: var(--sonect-accent-col-text-color) !important;
  }
}

.sonect-comparison-table .sonect-row:last-child::after {
  height: 0px;
}

.e-n-accordion-item summary,
.e-n-accordion-item div[role="region"] {
  border: 0 !important;
}

/*================ Reviews  ================*/
@-webkit-keyframes sonect_scroll {
  0% {
    transform: translateY(0);
  }

  100% {
    /*     transform: translateY(calc(-100px * 7)); */
    transform: translateY(calc(-270px * 4));
  }
}

@keyframes sonect_scroll {
  0% {
    transform: translateY(0);
  }

  100% {
    /*     transform: translateY(calc(-100px * 7)); */
    /*     transform: translateY(-100%); */
    transform: translateY(calc(-270px * 4));
  }
}

.sonect_reviews_module {
  overflow: hidden !important;
  position: relative !important;
  max-height: 550px !important;
}

.sonect_reviews_module::before,
.sonect_reviews_module::after {
  content: "" !important;
  width: 100%;
  position: absolute !important;
  height: 50px !important;
  background: linear-gradient(to top, #E3DFCB 50%, rgba(255, 255, 255, 0) 100%);
  z-index: 2;
}

.sonect_reviews_module::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.sonect_reviews_module::before {
  left: 0;
  top: calc(100% - 50px) !important;
}

.sonect_reviews_module .sonect_reviews_track {
  -webkit-animation: sonect_scroll 20s linear infinite !important;
  animation: sonect_scroll 20s linear infinite !important;
}

.sonect_reviews_module .sonect_reviews_track.revert {
  animation-direction: reverse !important;
}

.sonect_reviews_module .sonect_reviews_track:hover {
  animation-play-state: paused !important;
}

/*================ Testimonials Carousel (Elementor)  ================*/
.sonect_testimonials_carousel {
  --sonect-odd-item-bg: #1B1A1A;
  --sonect-odd-item-color: #F4F4F4;

  .swiper-slide {
    &:nth-child(odd) {
      background-color: var(--sonect-odd-item-bg) !important;

      & * {
        color: var(--sonect-odd-item-color) !important;
      }
    }

    &::before {
      content: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZmlsbD0iI0ZGMDA2OSIgY2xhc3M9ImUtZm9udC1pY29uLXN2ZyBlLWZhcy1xdW90ZS1yaWdodCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQ2NCAzMkgzMzZjLTI2LjUgMC00OCAyMS41LTQ4IDQ4djEyOGMwIDI2LjUgMjEuNSA0OCA0OCA0OGg4MHY2NGMwIDM1LjMtMjguNyA2NC02NCA2NGgtOGMtMTMuMyAwLTI0IDEwLjctMjQgMjR2NDhjMCAxMy4zIDEwLjcgMjQgMjQgMjRoOGM4OC40IDAgMTYwLTcxLjYgMTYwLTE2MFY4MGMwLTI2LjUtMjEuNS00OC00OC00OHptLTI4OCAwSDQ4QzIxLjUgMzIgMCA1My41IDAgODB2MTI4YzAgMjYuNSAyMS41IDQ4IDQ4IDQ4aDgwdjY0YzAgMzUuMy0yOC43IDY0LTY0IDY0aC04Yy0xMy4zIDAtMjQgMTAuNy0yNCAyNHY0OGMwIDEzLjMgMTAuNyAyNCAyNCAyNGg4Yzg4LjQgMCAxNjAtNzEuNiAxNjAtMTYwVjgwYzAtMjYuNS0yMS41LTQ4LTQ4LTQ4eiI+PC9wYXRoPjwvc3ZnPg==);
      width: 50px;
      display: block;
    }
  }

  .elementor-swiper-button-prev {
    left: -10px !important;
  }

  .elementor-swiper-button-next {
    right: -10px !important;
  }
}

/*================ Main Menu Navigation ================*/
.desktop-main-menu ul.elementor-nav-menu li.menu-item a.elementor-item-active {
  background: var(--e-global-color-accent);
  border-radius: 2em;
  padding: 1em;
  color: #FFFFFF !important;
}

.cpel-switcher__nav .cpel-switcher__list {
  margin-left: -5px !important;
}
.cpel-switcher__nav .cpel-switcher__list li a {
  padding: 5px !important;
}

/*================ FORMS ================*/
#newsletter_subscription,
#kb_contact,
#general_contact_form {
  .elementor-field-group-optIn {
    flex-wrap: nowrap;
    margin-top: 10px;

    .elementor-field-subgroup {
      flex-basis: 40px;
      margin-right: 15px;
    }

    input[type="checkbox"] {

      /* Add if not using autoprefixer */
      -webkit-appearance: none;
      appearance: none;
      /* For iOS < 15 to remove gradient background */
      background-color: #fff;
      /* Not removed via appearance */
      margin: 0;




      font: inherit;
      color: currentColor;
      width: 1.15em;
      height: 1.15em;
      border: 0.15em solid currentColor;
      border-radius: 0.15em;
      transform: translateY(-0.075em);

      display: grid;
      place-content: center;

      &::before {
        content: "";
        width: 0.65em;
        height: 0.65em;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em rebeccapurple;
        transform-origin: bottom left;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
      }

      &:checked::before {
        transform: scale(1);
      }
    }

    label {
      order: 2;
    }
  }

  .elementor-field-type-submit {
    flex-basis: max-content;
    margin-top: 15px;

    button {
      padding: 15px 35px;
    }
  }
}

/*================ Knowledge base ================*/
.sonect-kb-sidebar-content-wrapper {
  position: relative !important;

  .sonect_kb_sidebar_iconlist {
    max-height: 250px;
    overflow-y: auto !important;
  }

  .elementor-icon-list-items {
    padding-bottom: 30px !important;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    pointer-events: none;
    background: white;
    -webkit-mask-image: linear-gradient(180deg, transparent 25%, white 75%);
    mask-image: linear-gradient(180deg, transparent 25%, white 75%);
  }
}

/* Fastbot chat icon */
#chat-widget-push-to-talk {
  box-shadow: none !important;
}


/*================ RESPONSIVE ================*/

/* Components where we have an image in a box */
@media (max-width: 767px) {
  .image-box>div {
    position: relative !important;
  }

  .sonect-comparison-table-wrapper {
    position: relative;
  }

  .sonect-comparison-table {
    overflow-x: auto !important;
    position: relative !important;
  }

  .sonect-comparison-table .sonect-row {
    flex-wrap: nowrap;
    width: max-content;
  }

  .sonect-comparison-table .sonect-row .sonect-col {
    flex-basis: 250px;
    min-width: 250px;
    max-width: 100%;
  }

  .sonect-comparison-table .sonect-row .sonect-col p {
    white-space: nowrap;
  }

  .sonect-comparison-table-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    pointer-events: none;
    background: #1D1D1D;
    -webkit-mask-image: linear-gradient(90deg, transparent 25%, black 75%);
    mask-image: linear-gradient(90deg, transparent 25%, black 75%);
    width: 6em;
  }

  /*================ Footer menus Navigation ================*/
  div[data-elementor-type="footer"] .elementor-social-icons-wrapper {
    max-width: 100%;
  }

  .sonect_footer_menu ul.elementor-nav-menu li.menu-item {
    width: 100%;
    text-align: center;
  }

  .sonect_footer_menu ul.elementor-nav-menu li.menu-item a {
    display: block;
  }
}