@media (min-width: 64rem) {

  
    h1 {
      font-size: 3.051rem;
    }
  
      h2 {
      font-size: 2.44rem;
    }
  
      h3 {
      font-size: 1.75rem;
    }
  
      h4 {
      font-size: 1.5625rem;
    }
  }
  
  /* variables */
  :root {
    /* colors */
    --th8-color-primary-hsl: 250, 84%, 54%;
    --th8-color-bg-hsl: 0, 0%, 100%;
    --th8-color-contrast-high-hsl: 230, 7%, 23%;
    --th8-color-contrast-higher-hsl: 230, 13%, 9%;
    --th8-color-contrast-medium-hsl: 225, 4%, 47%;
    --th8-color-accent-hsl: 342, 89%, 48%;
    --th8-color-contrast-lower-hsl: 240, 4%, 85%;
  
    /* spacing */
    --th8-space-sm: 0.75rem;
    --th8-space-md: 1.25rem;
    --th8-space-xs: 0.5rem;
  
    /* typography */
    --th8-text-lg: 1.25rem;
    --th8-text-sm: 0.833rem;
  }
  
 
  
  /* component */
  .tabs__control {
    text-decoration: none;
    color: hsl(var(--th8-color-contrast-medium-hsl));
  }
  .tabs__control:focus {
    outline: 2px solid hsla(var(--th8-color-primary-hsl), 0.2);
    outline-offset: 2px;
  }
  .tabs__control:hover {
    color: hsl(var(--th8-color-contrast-high-hsl));
  }
  
  .tabs__control[aria-selected=true] {
    color: hsl(var(--th8-color-contrast-high-hsl));
    text-decoration: underline;
  }
  
  /* utility classes */
  .th8-text-lg {
    font-size: var(--th8-text-lg);
  }
  
  .th8-text-component :where(h1, h2, h3, h4) {
    line-height: var(--th8-heading-line-height, 1.2);
    margin-top: calc(var(--th8-space-md) * var(--th8-space-multiplier, 1));
    margin-bottom: calc(var(--th8-space-sm) * var(--th8-space-multiplier, 1));
  }
  
  .th8-text-component :where(p, blockquote, ul li, ol li) {
    line-height: var(--th8-body-line-height, 1.4);
  }
  
  .th8-text-component :where(ul, ol, p, blockquote, .th8-text-component__block) {
    margin-bottom: calc(var(--th8-space-sm) * var(--th8-space-multiplier, 1));
  }
  
  .th8-text-component :where(ul, ol) {
    padding-left: 1.25em;
  }
  
  .th8-text-component ul :where(ul, ol), .th8-text-component ol :where(ul, ol) {
    padding-left: 1em;
    margin-bottom: 0;
  }
  

  
  .th8-text-component ol {
    list-style-type: decimal;
  }
  
  .th8-text-component img {
    /* display: block; */
    margin: 0 auto;
  }
  
  .th8-text-component figcaption {
    margin-top: calc(var(--th8-space-xs) * var(--th8-space-multiplier, 1));
    font-size: var(--th8-text-sm);
    text-align: center;}
  
  .th8-text-component em {
    font-style: italic;
  }
  
  .th8-text-component strong {
    font-weight: bold;
  }
  
  .th8-text-component s {
    text-decoration: line-through;
  }
  
  .th8-text-component u {
    text-decoration: underline;
  }
  
  .th8-text-component mark {
    background-color: hsla(var(--th8-color-accent-hsl), 0.2);
    color: inherit;
  }
  
  .th8-text-component blockquote {
    padding-left: 1em;
    border-left: 4px solid hsl(var(--th8-color-contrast-lower-hsl));
    font-style: italic;
  }
  
  .th8-text-component hr {
    margin: calc(var(--th8-space-md) * var(--th8-space-multiplier, 1)) auto;
    background: hsl(var(--th8-color-contrast-lower-hsl));
    height: 1px;
  }
  
  .th8-text-component > *:first-child {
    margin-top: 0;
  }
  
  .th8-text-component > *:last-child {
    margin-bottom: 0;
  }
  
  .th8-text-component.th8-line-height-xs {
    --th8-heading-line-height: 1;
    --th8-body-line-height: 1.1;
  }
  
  .th8-text-component.th8-line-height-sm {
    --th8-heading-line-height: 1.1;
    --th8-body-line-height: 1.2;
  }
  
  .th8-text-component.th8-line-height-md {
    --th8-heading-line-height: 1.15;
    --th8-body-line-height: 1.4;
  }
  
  .th8-text-component.th8-line-height-lg {
    --th8-heading-line-height: 1.22;
    --th8-body-line-height: 1.58;
  }
  
  .th8-text-component.th8-line-height-xl {
    --th8-heading-line-height: 1.3;
    --th8-body-line-height: 1.72;
  }
  
  .th8-padding-top-md {
    /* padding-top: 10px; */
  }
  
  .th8-gap-sm {
    gap: var(--th8-space-sm);
  }
  
  .th8-flex-wrap {
    flex-wrap: wrap;
  }
  
  .th8-flex {
    display: flex;
  }
  
  .th8-hide {
    display: none !important;
  }


  
  h1, h2, h3, h4 {
    line-height: 1.2;
    color: hsl(230, 13%, 9%);
    font-weight: 700;
  }
  
  h1 {
    font-size: 2.0736rem;
  }
  
  h2 {
    font-size: 1.728rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  h4 {
    font-size: 1.2rem;
  }
  
  ol, ul, menu {
    list-style: none;
  }
  
  button, input, textarea, select {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    appearance: none;
  }
  
  textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
  }

  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  img, video, svg {
    /* display: block; */
    max-width: 100%;
  }
  
  @media (min-width: 64rem) {
    body {
      font-size: 1.25rem;
    }
  
    h1 {
      font-size: 3.051rem;
    }
  
    h2 {
      font-size: 2.44rem;
    }
  
    h3 {
      font-size: 1.75rem;
    }
  
    h4 {
      font-size: 1.5625rem;
    }
  }
  
  /* variables */
  :root {
    /* colors */
    --tx9-color-primary-hsl: 250, 84%, 54%;
    --tx9-color-contrast-low-hsl: 240, 4%, 65%;
    --tx9-color-contrast-high-hsl: 230, 7%, 23%;
    --tx9-color-contrast-higher-hsl: 230, 13%, 9%;
    --tx9-color-bg-hsl: 0, 0%, 100%;
  

  
    /* typography */
    --tx9-text-xs: 0.694rem;
    --tx9-text-sm: 0.833rem;
  }
  
  @media(min-width: 64rem){
    :root {
      /* spacing */
      --tx9-space-xs: 0.45rem;
      --tx9-space-sm: 2.125rem;
      --tx9-space-md: 2rem;
      --tx9-space-xl: 5.125rem;
  
      /* typography */
      --tx9-text-xs: 0.8rem;
      --tx9-text-sm: 1rem;
    }
  }
  
  /* component */
  
  .tab-features__controls-list {
    position: relative;
    display: flex;
    overflow: auto;
    counter-reset: tab-features-list;
    justify-content: center;
    align-items: flex-end;
}


.tab-features__control-wrapper {
    counter-increment: tab-features-list;
    max-width: none; /* Reset max-width */
}

.tab-features__control {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tx9-space-xs) var(--tx9-space-sm); /* Adjust padding here */
    color: #3B3F44;
    text-decoration: none;
    font-weight: 400;
    transition: background 0.2s;
    background-color: #FFFFFF;
}

.tab-features__control::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
}

.tab-features__control:hover {
  background-color: #e7e7e7;
  color: #3B3F44  !important;
}

@media (min-width: 676px) and (max-width: 1024px) {
  .tab-features__controls-list {
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: flex-start; /* Align items to the start vertically */
      
  }

  .tab-features__control {
    padding: 7px;
    font-size: 1.22rem;
  }

  .tab-features__control-wrapper {
      flex-basis: 50%;
  }


}


@media (max-width: 680px) {
    .tab-features__controls-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start; /* Align items to the start vertically */
    }

    .tab-features__control-wrapper {
        flex-basis: 50%;
    }

    /* Target the first item */
    .tab-features__control-wrapper:nth-child(1) {
        flex-basis: 100%; /* Span full width */
        text-align: center; /* Center the content */
    }

    .tab-features__control {
      padding: 4px;
      font-size: 1.12rem;
    }
}

.tab-features__controls-list.js-tabs__controls {
  box-shadow: 0px 10px 10px rgba(255, 255, 255, 0.5); /* Adjust the values as needed */
}



/* 
  ////// */

  .tab-features__control {
    /* Add transition for smooth color change */
    transition: background-color 0.3s ease, color 0.3s ease, border-radius 0.3s ease;

}

@media (max-width: 680px) {
.rad-left-tabs, 
.rad-right-tabs {
  border-radius: 0 !important;
}
}

#title-com {
    font-size: 2rem !important;
  }

  @media (max-width: 507px) {
    #title-com {
      font-size: 1.5rem !important;
    }
    .tabnav-bubble {
      font-size: 0.8rem !important;
    }
    }

    .ak1-shadow-xs {
      border-radius: 10px;
    }

  .tab-features__control[aria-selected=true]{
    background-color: #8E56DC;
    color: white;
    /* border-radius: 30px 30px 0px 0px; */
  }

  .tab-features__control[aria-selected=true]:hover {
    background-color: #8E56DC;
    color: #F4F7FD !important;
    /* other styles */
  }
 
  .tab-features__panels {
    position: relative;
  }
  
  .tab-features__panel {
    opacity: 0;
    padding-top: var(--tx9-space-md);
  }
  
  .tabs--no-interaction .tab-features__panel {
    animation-duration: 0s;
    animation-delay: 0s;
  }
  
  .tab-features__img {
    /* display: block; */
    width: 100%;
  }
  
  .tab-features__caption {
    font-size: var(--tx9-text-sm);
    --tx9-color-o: 1;
    color: hsla(var(--tx9-color-contrast-low-hsl), var(--tx9-color-o, 1));
    margin-top: var(--tx9-space-xs);
  }
  
  .tab-features__panel--display {
    opacity: 0;
    -webkit-animation: tab-features-panel-entry-anim 0.5s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    animation: tab-features-panel-entry-anim 0.5s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
  }
  
  .tab-features__panel--hide {
    position: absolute;
    visibility: hidden;
    top: 0;
    width: 100%;
    transition: position 0s 0.5s, visibility 0s 0.5s;
    -webkit-animation: tab-features-panel-exit-anim 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: tab-features-panel-exit-anim 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  
  @-webkit-keyframes tab-features-panel-entry-anim {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-20px);
              transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  
  @keyframes tab-features-panel-entry-anim {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-20px);
              transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  
  @-webkit-keyframes tab-features-panel-exit-anim {
    0% {
      opacity: 1;
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
    }
    100% {
      opacity: 0;
      -webkit-transform: translateY(20px);
              transform: translateY(20px);
    }
  }
  
  @keyframes tab-features-panel-exit-anim {
    0% {
      opacity: 1;
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
    }
    100% {
      opacity: 0;
      -webkit-transform: translateY(20px);
              transform: translateY(20px);
    }
  }

  .tabs-sec-con {
    padding-left: 60px;
    padding-right: 60px;
  }



  /* ////////////////content////////////// */

  .hero {
    position: relative;
    z-index: 1;
    padding: 4.5rem 0;
    background-color: #F4F7FD;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  
  .hero__label {
    font-size: 0.9375rem;
    color: hsla(230, 13%, 9%, 0.4);
  }
  
  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
  }
  
  .hero--center {
    text-align: center;
  }
  
  .hero--center .hero__cta {
    justify-content: center;
  }
  
  .hero--right {
    text-align: right;
  }
  
  .hero--right .hero__cta {
    justify-content: end;
  }
  
  .hero--overlay-layer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: hsla(0, 0%, 100%, 0.65);
    z-index: 1;
  }
  
  .hero--overlay-layer > * {
    position: relative;
    z-index: 2;
  }
  
  .hero--full-screen {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  @media (min-width: 64rem) {
    .hero {
      padding: 7rem 0;
    }
  }
  
  /* -------------------------------- 
  
  Utilities 
  
  -------------------------------- */
  
  .cd-margin-bottom-2xs {
    margin-bottom: 0.75rem;
  }
  
  .cd-margin-bottom-xs {
    margin-bottom: 1rem;
  }
  
  .cd-margin-bottom-sm {
    margin-bottom: 1.5rem;
  }
  
  .cd-container {
    width: calc(100% - 3rem);
    margin-left: auto;
    margin-right: auto;
  }
  
  .cd-max-width-xs {
    max-width: 32rem;
  }
  
  .cd-max-width-adaptive-sm,
  .cd-max-width-adaptive-md,
  .cd-max-width-adaptive-lg {
    max-width: 32rem;
  }
  
  @media (min-width: 48rem) {
    .cd-max-width-adaptive-sm,
    .cd-max-width-adaptive-md,
    .cd-max-width-adaptive-lg {
      max-width: 48rem;
    }
  }
  
  @media (min-width: 64rem) {
    .cd-max-width-adaptive-md,
    .cd-max-width-adaptive-lg {
      max-width: 64rem;
    }
  }
  
  @media (min-width: 85.5rem) {
    .cd-max-width-adaptive-lg {
      max-width: 80rem;
    }
  }
  
  .cd-flex {
    display: flex;
  }
  
  .cd-justify-end {
    justify-content: end;
  }
  
  .cd-link {
    color: #170B28;
    text-decoration: none;
    background-image: linear-gradient(to right, #8E56DC 50%, hsla(250, 84%, 54%, 0.2) 50%);
    background-size: 200% 1px;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    transition: background-position 0.2s;
    margin-left: 5px;
  }
  
  .cd-link:hover {
    background-position: 0% 100%;
  }
  
  .cd-link--contrast-higher {
    color: hsl(230, 13%, 9%);
    background-image: linear-gradient(to right, hsl(230, 13%, 9%) 50%, hsla(230, 13%, 9%, 0.1) 50%);
  }
  
  .cd-line-height-lg {
    line-height: 1.58;
  }

  .complice-pad-sec {
    padding-top: 100px;
  }

/* /////////////vid sec */


/* ///////////////////you might also like /////////// */
/* -------------------------------- 

File#: _1_emoji-feedback
Title: Emoji Feedback
Descr: A feedback collection system based on emoticons
Usage: codyhouse.co/license

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

/* reset */

  
  
  
  /* -------------------------------- 
  
  Buttons 
  
  -------------------------------- */
  
  .cd-btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375em;
    font-size: 1em;
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    transition: 0.2s;
    will-change: transform;
  }
  
  .cd-btn:focus-visible {
    outline: none;
  }
  
  .cd-btn:active {
    transform: translateY(2px);
  }
  
  .cd-btn--primary {
    background: hsl(250, 84%, 54%);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15), 
                0 1px 3px hsla(250, 84%, 38%, 0.25), 
                0 2px 6px hsla(250, 84%, 38%, 0.1), 
                0 6px 10px -2px hsla(250, 84%, 38%, 0.25);
    color: hsl(0, 0%, 100%);
  }
  
  .cd-btn--primary:hover {
    background: hsl(250, 84%, 60%);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15), 
                0 1px 2px hsla(250, 84%, 38%, 0.25), 
                0 1px 4px hsla(250, 84%, 38%, 0.1), 
                0 3px 6px -2px hsla(250, 84%, 38%, 0.25);
  }
  
  .cd-btn--primary:focus-visible {
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15), 
                0 1px 2px hsla(250, 84%, 38%, 0.25), 
                0 1px 4px hsla(250, 84%, 38%, 0.1), 
                0 3px 6px -2px hsla(250, 84%, 38%, 0.25), 
                0 0 0 2px hsl(0, 0%, 100%), 
                0 0 0 4px hsl(250, 84%, 54%);
  }
  
  /* -------------------------------- 
  
  Forms 
  
  -------------------------------- */
  
  .cd-form-control {
    background: #F4F4F9;
    box-shadow: inset 0 0 0 1px hsl(240, 4%, 85%);
    padding: 0.5rem 0.75rem;
    border-radius: 0.375em;
    font-size: 1em;
    line-height: 1.2;
    transition: 0.2s;
  }
  
  .cd-form-control::placeholder {
    opacity: 1;  
    color: hsl(240, 4%, 65%);
  }
  
  .cd-form-control:focus, .cd-form-control:focus-within {
    background: hsl(0, 0%, 100%);
    outline: none;
    box-shadow: inset 0 0 0 1px hsla(240, 4%, 85%, 0), 
                0 0 0 2px #7b3bd6, 
                0 0.3px 0.4px hsla(230, 13%, 9%, 0.025),
                0 0.9px 1.5px hsla(230, 13%, 9%, 0.05), 
                0 3.5px 6px hsla(230, 13%, 9%, 0.1);
  }
  
  .cd-form-label {
    display: inline-block;
    font-size: 0.9375rem;
    margin-bottom: 0.75rem;
  }
  
  /* -------------------------------- 
  
  Component 
  
  -------------------------------- */
  
  :root {
    --emoji-rate-size: 40px;
  }
  
  .emoji-rate {}
  
  .emoji-rate__list {
    display: inline-flex;
    gap: 1rem;
  }
  
  .emoji-rate__list > * {
    position: relative;
  }
  
  .emoji-rate__custom-input {
    position: relative;
    display: block;
    font-size: var(--emoji-rate-size);
    width: 1em;
    height: 1em;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  .emoji-rate__icon {
    display: block;
    width: inherit;
    height: inherit;
    transition: color 0.3s;
  }
  
  .emoji-rate__icon * {
    transition: fill, stroke;
    transition-duration: 0.3s;
  }
  
  .emoji-rate__hand-icon {
    display: block;
    font-size: var(--emoji-rate-size);
    width: 1em;
    height: 1em;
    position: absolute;
    left: 0;
    bottom: 0;
    pointer-events: none;
    transition: transform 0.3s;
  }
  
  #emoji-rate-partially-hand {
    opacity: 0;
  }
  
  .emoji-rate__native-input + .emoji-rate__custom-input--no .emoji-rate__icon #emoji-rate-no-eyes {
    transform: translateY(0) translateX(0);
  }
  
  .emoji-rate__native-input + .emoji-rate__custom-input--no .emoji-rate__icon #emoji-rate-no-mouth {
    transform: translateY(0) translateX(0);
  }
  
  .emoji-rate__native-input + .emoji-rate__custom-input--yes .emoji-rate__icon #emoji-rate-yes-eyes {
    transform: translateY(0) scale(1);
  }
  
  .emoji-rate__native-input + .emoji-rate__custom-input--yes .emoji-rate__icon #emoji-rate-yes-mouth {
    transform-origin: 50% 70%;
    transform: translateY(0) scale(1);
  }
  
  .emoji-rate__native-input + .emoji-rate__custom-input--partially .emoji-rate__icon #emoji-rate-partially-eyes {
    transform-origin: 20px 19.5px;
    transform: translateY(0) scaleY(1);
  }
  
  .emoji-rate__native-input + .emoji-rate__custom-input--partially .emoji-rate__icon #emoji-rate-partially-mouth {
    transform-origin: 20px 28px;
    transform: translateY(0) scaleX(1);
  }
  
  .emoji-rate__native-input ~ .emoji-rate__hand-icon #emoji-rate-partially-hand {
    transform-origin: 7px 35px;
    opacity: 0;
    transform: translateX(0);
  }
  
  .emoji-rate__native-input:checked + .emoji-rate__custom-input,
  .emoji-rate__native-input:checked ~ .emoji-rate__hand-icon {
    transform: scale(1.1);
  }
  
  .emoji-rate__native-input:checked + .emoji-rate__custom-input--no .emoji-rate__icon {
    color: hsl(230, 13%, 9%);
  }
  
  .emoji-rate__native-input:checked + .emoji-rate__custom-input--no .emoji-rate__icon #emoji-rate-no-bg {
    fill: hsl(342, 89%, 56%);
  }
  
  .emoji-rate__native-input:checked + .emoji-rate__custom-input--no .emoji-rate__icon #emoji-rate-no-eyes {
    animation: emoji-rate-no-eyes-anim 1.6s;
  }
  
  .emoji-rate__native-input:checked + .emoji-rate__custom-input--no .emoji-rate__icon #emoji-rate-no-mouth {
    animation: emoji-rate-no-mouth-anim 1.6s;
  }
  
  .emoji-rate__native-input:checked + .emoji-rate__custom-input--yes .emoji-rate__icon {
    color: hsl(230, 13%, 9%);
  }
  
  .emoji-rate__native-input:checked + .emoji-rate__custom-input--yes .emoji-rate__icon #emoji-rate-yes-bg {
    fill: hsl(35, 79%, 66%);
  }
  
  .emoji-rate__native-input:checked + .emoji-rate__custom-input--yes .emoji-rate__icon #emoji-rate-yes-eyes {
    animation: emoji-rate-yes-eyes-anim 1.6s;
  }
  
  .emoji-rate__native-input:checked + .emoji-rate__custom-input--yes .emoji-rate__icon #emoji-rate-yes-mouth {
    transform-origin: 50% 70%;
    animation: emoji-rate-yes-mouth-anim 1.6s;
  }
  
  .emoji-rate__native-input:checked + .emoji-rate__custom-input--yes .emoji-rate__icon #emoji-rate-yes-tongue {
    fill: hsl(342, 89%, 48%);
  }
  
  .emoji-rate__native-input:checked + .emoji-rate__custom-input--partially .emoji-rate__icon {
    color: hsl(230, 13%, 9%);
  }
  
  .emoji-rate__native-input:checked + .emoji-rate__custom-input--partially .emoji-rate__icon #emoji-rate-partially-bg {
    fill: hsl(35, 79%, 66%);
  }
  
  .emoji-rate__native-input:checked + .emoji-rate__custom-input--partially .emoji-rate__icon #emoji-rate-partially-eyes {
    animation: emoji-rate-partially-eyes-anim 1.6s;
  }
  
  .emoji-rate__native-input:checked + .emoji-rate__custom-input--partially .emoji-rate__icon #emoji-rate-partially-mouth {
    animation: emoji-rate-partially-mouth-anim 1.6s;
  }
  
  .emoji-rate__native-input:checked ~ .emoji-rate__hand-icon #emoji-rate-partially-hand {
    animation: emoji-rate-partially-hand-anim 1.6s;
  }
  
  .emoji-rate__native-input:focus + .emoji-rate__custom-input {
    box-shadow: 0 0 0 3px hsla(35, 79%, 66%, 0.3);
  }
  
  .emoji-rate__native-input:focus + .emoji-rate__custom-input--no {
    box-shadow: 0 0 0 3px hsla(342, 89%, 48%, 0.25);
  }
  
  .emoji-rate__native-input:focus:not(:focus-visible) + .emoji-rate__custom-input {
    box-shadow: none !important;
  }
  
  /* comment */
  .emoji-rate--with-comment {
    background-color: hsl(240, 4%, 95%);
    border-radius: 0.75em;
  }
  

  
  .emoji-rate__comment {
    overflow: hidden;
    padding: 0 1.5rem 1.5rem;
    background-color: #FFFFFF;
  }
  
  @keyframes emoji-rate-no-eyes-anim {
    0%, 100% {
      transform: translateY(0) translateX(0);
    }
    30%, 40% {
      transform: translateY(4px) translateX(0);
    }
    50% {
      transform: translateY(4px) translateX(-4px);
    }
    60% {
      transform: translateY(4px) translateX(4px);
    }
    70% {
      transform: translateY(4px) translateX(0px);
    }
  }
  
  @keyframes emoji-rate-no-mouth-anim {
    0%, 100% {
      transform: translateY(0) translateX(0);
    }
    30%, 40% {
      transform: translateY(2.5px) translateX(0);
    }
    50% {
      transform: translateY(2.5px) translateX(-2.5px);
    }
    60% {
      transform: translateY(2.5px) translateX(2.5px);
    }
    70% {
      transform: translateY(2.5px) translateX(0px);
    }
  }
  
  @keyframes emoji-rate-yes-mouth-anim {
    0%, 100% {
      transform: translateY(0) scale(1);
    }
    30%, 40% {
      transform: translateY(-2.5px) scale(1.2);
    }
    55% {
      transform: translateY(0) scale(1.2);
    }
    70% {
      transform: translateY(-2.5px) scale(1.2);
    }
  }
  
  @keyframes emoji-rate-yes-eyes-anim {
    0%, 100% {
      transform: translateY(0);
    }
    30%, 40% {
      transform: translateY(-2.5px);
    }
    55% {
      transform: translateY(0);
    }
    70% {
      transform: translateY(-2.5px);
    }
  }
  
  @keyframes emoji-rate-partially-eyes-anim {
    0%, 100% {
      transform: translateY(0) scaleY(1);
    }
    30%, 40%, 60%, 70% {
      transform: translateY(-2px) scaleY(1);
    }
    50% {
      transform: translateY(-2px) scaleY(0.1);
    }
  }
  
  @keyframes emoji-rate-partially-mouth-anim {
    0%, 100% {
      transform: translateY(0) scaleX(1);
    }
    30%, 70% {
      transform: translateY(-4px) scaleX(0.6);
    }
  }
  
  @keyframes emoji-rate-partially-hand-anim {
    0%, 100% {
      opacity: 0;
      transform: translateX(0);
    }
    30%, 70% {
      opacity: 1;
      transform: translateX(3px);
    }
  }
  
  /* -------------------------------- 
  
  Utilities 
  
  -------------------------------- */
  
  .cd-sr-only {
    position: absolute;
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    border: 0;
    white-space: nowrap;
  }
  
  .cd-margin-top-2xs {
    margin-top: 0.75rem;
  }
  
  .cd-margin-bottom-xs {
    margin-bottom: 1rem;
  }
  
  .cd-margin-bottom-sm {
    margin-bottom: 1.5rem;
    margin-top: 50px;
  }
  
  .cd-width-100\% {
    width: 100%;
  }
  
  .cd-hide {
    display: none !important;
  }
  
  .cd-text-center {
    text-align: center;
    background-color: #FFFFFF;
  }
  
  .cd-text-right {
    text-align: right;
  }

  .share-your-feedback {
    margin-bottom: 50px;
  }

                   /* sticky header */
  .sticky {
    position: fixed;
    top: 65px;
    width: 100%;
    background-color: white; /* Optional: Add a background color */
    z-index: 1000; /* Adjust the z-index as needed */
  }

  /* submit button onclick  */
  .feedback-container {
    opacity: 1; /* By default, set to fully visible */
    transition: opacity 0.5s ease;
}

.thank-you-message {
    opacity: 0; /* By default, set to fully transparent */
    transition: opacity 0.5s ease;
}

.thank-you-message.cd-show {
    opacity: 1; /* When the cd-show class is added, make it fully visible */
}

.thank-you-feedback-con {
    text-align: center;
    padding-bottom: 80px;
  
}

.h3-thank-feed {
    margin-top: 0;
}

.you-might-like-con {
    padding-top: 0;
}

.h1-complice-pad-sec {
  padding-top: 20px;
}

.h1-com-adjsut {
    margin-bottom: -20px !important;
    font-size: 2.5rem !important;
}

#page {
  background-color: #EDE4F9;
}

.bg-tabs {
  background-color: #EDE4F9;
}

@media (min-width: 400px) and (max-width: 770px) {
  .h1-com-adjsut {
    font-size: 2.6rem !important;
  }
}

@media (max-width: 400px) {
  .h1-com-adjsut {
    font-size: 2.2rem !important;
  }
}


.h1-com-adjsut {
  color: #3B3F44 !important;
  font-family: 'Roboto', sans-serif;
}



.back-con-2-com {
    background-color: #FEFEFF;
}

.colora-text-d {
    color: #170B28 !important;
}

#dark-apost-link {
    color: #170B28 !important;
}

.rad-left-tabs {
    border-radius: 20px 0px 0px 0px;
}

.rad-right-tabs {
    border-radius: 0px 20px 0px 0px;
}

/*                                      tab content all */
/* -------------------------------- 

File#: _2_article-v4
Title: Article v4
Descr: Article template
Usage: codyhouse.co/license

-------------------------------- */
/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1rem;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.0736rem;
}

h2 {
  font-size: 1.728rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.2rem;
}

ol, ul, menu {
  list-style: none;
}

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

a {
  color: hsl(250, 84%, 54%);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  /* display: block; */
  max-width: 100%;
}

@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}

/* variables */
:root {
  /* colors */
  --ak1-color-primary-hsl: 250, 84%, 54%;
  --ak1-color-bg-hsl: 0, 0%, 100%;
  --ak1-color-contrast-high-hsl: 230, 7%, 23%;
  --ak1-color-contrast-higher-hsl: 230, 13%, 9%;
  --ak1-color-contrast-lower-hsl: 240, 4%, 85%;
  --ak1-color-contrast-low-hsl: 240, 4%, 65%;
  --ak1-color-bg-dark-hsl: 240, 4%, 95%;
  --ak1-color-accent-hsl: 342, 89%, 48%;

  /* spacing */
  --ak1-space-xs: 0.5rem;
  --ak1-space-md: 1.25rem;
  --ak1-space-lg: 2rem;
  --ak1-space-xl: 3.25rem;
  --ak1-space-sm: 0.75rem;

  /* typography */
  --ak1-text-3xl: 2.488rem;
  --ak1-text-xs: 0.694rem;
  --ak1-text-sm: 0.833rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --ak1-space-xs: 0.75rem;
    --ak1-space-md: 2rem;
    --ak1-space-lg: 3.125rem;
    --ak1-space-xl: 3.125rem;
    --ak1-space-sm: 1.125rem;

    /* typography */
    --ak1-text-3xl: 2.815rem;
    --ak1-text-xs: 0.8rem;
    --ak1-text-sm: 1rem;
  }
}

/* component */
.t-article-v4__divider {
  display: flex;
  align-items: center;
}
.t-article-v4__divider span {
  display: block;
  margin: 0 var(--ak1-space-xs);
  height: 10px;
  width: 10px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  background-color: hsl(var(--ak1-color-contrast-lower-hsl));
}
.t-article-v4__divider::before, .t-article-v4__divider::after {
  content: "";
  display: block;
  height: 1px;
  width: auto;
  flex-grow: 1;
  background-color: hsl(var(--ak1-color-contrast-lower-hsl));
}

/* utility classes */
.ak1-shadow-xs {
  box-shadow:0 0.1px 0.3px rgba(0, 0, 0, 0.06),0 1px 2px rgba(0, 0, 0, 0.12);
}

:where(.ak1-media-wrapper-16\:9) {
  position: relative;
  height: 0;
}

.ak1-media-wrapper-16\:9 {
  padding-bottom: 56.25%;
}

.ak1-media-wrapper-16\:9 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ak1-media-wrapper-16\:9 > *:not(iframe) {
  object-fit: cover;
}

@media (min-width: 90rem) {
  .ak1-text-component__block--outset {
    width: calc(100% + 12rem);  
  }

  .ak1-text-component__block--outset img {
    display: block;width: 100%;
  }

  .ak1-text-component__block--outset:not(.ak1-text-component__block--right) {
    margin-left: -6rem;
  }

  .ak1-text-component__block--right.ak1-text-component__block--outset {
    margin-right: -6rem;
  }
}

.ak1-gap-xs {
  gap: var(--ak1-space-xs);
}

.ak1-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.ak1-grid > * {
  min-width: 0;
  grid-column-end: span 12;
}

@media (min-width: 48rem) {
  .ak1-text-component__block--left, .ak1-text-component__block--right {
    width: 45%;
  }

  .ak1-text-component__block--left img, .ak1-text-component__block--right img {
    display: block;
    width: 100%;
  }

  .ak1-text-component__block--left {
   float: left;
   margin-right: calc(var(--ak1-space-sm) * var(--ak1-space-multiplier, 1));
  }

  .ak1-text-component__block--right {
   float: right;
    margin-left: calc(var(--ak1-space-sm) * var(--ak1-space-multiplier, 1));
  }
}

@media (min-width: 90rem) {
  .ak1-text-component__block--left, .ak1-text-component__block--right {
    width: 50%;
  }
}

.ak1-text-gap-md {
  --ak1-space-multiplier: 1.25;
}

.ak1-line-height-lg {
  line-height: 1.58;
}

.ak1-text-component :where(h1, h2, h3, h4) {
  line-height: var(--ak1-heading-line-height, 1.2);

  margin-bottom: calc(var(--ak1-space-sm) * var(--ak1-space-multiplier, 1));
}

.ak1-text-component :where(p, blockquote, ul li, ol li) {
  line-height: var(--ak1-body-line-height, 1.4);
}

.ak1-text-component :where(ul, ol, p, blockquote, .ak1-text-component__block) {
  margin-bottom: calc(var(--ak1-space-sm) * var(--ak1-space-multiplier, 1));
}

.ak1-text-component :where(ul, ol) {
  padding-left: 1.25em;
}

.ak1-text-component ul :where(ul, ol), .ak1-text-component ol :where(ul, ol) {
  padding-left: 1em;
  margin-bottom: 0;
}

.ak1-text-component ul {
  list-style-type: disc;
}

.ak1-text-component ol {
  list-style-type: decimal;
}

.ak1-text-component img {
  display: block;
  margin: 0 auto;
}

.ak1-text-component figcaption {
  margin-top: calc(var(--ak1-space-xs) * var(--ak1-space-multiplier, 1));
  font-size: var(--ak1-text-sm);
  text-align: center;}

.ak1-text-component em {
  font-style: italic;
}

.ak1-text-component strong {
  font-weight: bold;
}

.ak1-text-component s {
  text-decoration: line-through;
}

.ak1-text-component u {
  text-decoration: underline;
}

.ak1-text-component mark {
  background-color: #E4D8F4;
  color: inherit;
}

.ak1-text-component blockquote {
  padding-left: 1em;
  border-left: 4px solid hsl(var(--ak1-color-contrast-lower-hsl));
  font-style: italic;
}

.ak1-text-component hr {
  margin: calc(var(--ak1-space-md) * var(--ak1-space-multiplier, 1)) auto;
  background: hsl(var(--ak1-color-contrast-lower-hsl));
  height: 1px;
}

.ak1-text-component > *:first-child {
  margin-top: 0;
}

.ak1-text-component > *:last-child {
  margin-bottom: 0;
}

.ak1-text-component.ak1-line-height-xs {
  --ak1-heading-line-height: 1;
  --ak1-body-line-height: 1.1;
}

.ak1-text-component.ak1-line-height-sm {
  --ak1-heading-line-height: 1.1;
  --ak1-body-line-height: 1.2;
}

.ak1-text-component.ak1-line-height-md {
  --ak1-heading-line-height: 1.15;
  --ak1-body-line-height: 1.4;
}

.ak1-text-component.ak1-line-height-lg {
  --ak1-heading-line-height: 1.22;
  --ak1-body-line-height: 1.58;
}

.ak1-text-component.ak1-line-height-xl {
  --ak1-heading-line-height: 1.3;
  --ak1-body-line-height: 1.72;
}

.ak1-margin-y-lg {
  margin-top: var(--ak1-space-lg);
  margin-bottom: var(--ak1-space-lg);
}

.ak1-text-3xl {
  font-size: var(--ak1-text-3xl);
}

.ak1-color-contrast-low {
  --ak1-color-o: 1;
  color: #7B3BD6;
}

.ak1-letter-spacing-lg {
  letter-spacing: 0.1em;
}

.ak1-text-uppercase {
  text-transform: uppercase;
}

.ak1-text-xs {
  font-size: var(--ak1-text-xs);
}

.ak1-margin-x-auto {
  margin-left: auto;
  margin-right: auto;
}

.ak1-max-width-xs {
  max-width: 38rem;
}

.ak1-text-gap-2xl {
  --ak1-space-multiplier: 2;
}

.ak1-text-center {
  text-align: center;
}

.ak1-padding-md {
  padding: var(--ak1-space-md);
}

.ak1-bg {
  --ak1-bg-o: 1;
  background-color: #FEFEFF;
}

.ak1-max-width-adaptive-md {
  max-width: 32rem;
}

@media(min-width: 48rem) {
  .ak1-max-width-adaptive-md {
    max-width: 48rem;
  }
}

@media(min-width: 64rem) {
  .ak1-max-width-adaptive-md {
    max-width: 64rem;
  }
}

.ak1-container {
  width: calc(100% - 2*var(--ak1-space-md));
  margin-left: auto;
  margin-right: auto;
}

.ak1-padding-y-lg {


}

.compliance-watch-link {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  align-content: space-between;
  margin-top: 20px;
}

.vid-content-back {
  background-color: #FEFEFF !important;
}

.ak1-bg-dark {
  --ak1-bg-o: 1;
  background-color: #fefeff;
}

.ak1-z-index-1 {
  z-index: 1;
}

.ak1-position-relative {
  position: relative;
}

.ak1-col-6 {
  grid-column-end: span 6;
}

@media(min-width: 64rem){
  .ak1-padding-y-xl\@md {
    padding-top: var(--ak1-space-xl);
  }

  .ak1-padding-x-lg\@md {
    padding-left: var(--ak1-space-lg);
    padding-right: var(--ak1-space-lg);
  }
}

.best-4-container {
  align-items: 0 !important;
}

.icon-text-container-4-best {
  display: flex;
  align-items: center; /* Align items vertically */
}

.icon-text-container-4-best svg {
  width: 30px; /* Set a fixed width for the icon */
  min-width: 30px; /* Ensure the icon maintains its width */
  margin-right: 5px;
  margin-bottom: 17px;
}


.best-4-container .best-4-h6 .best-4-title {
  display: inline-block;
  vertical-align: middle;

}

.compliance-link-to-vid {
  margin-right: 11px;
}

.pad-in-addition {
  margin-top: 50px;
}

.body-p-Compliance p {
  color: #525252; /* Replace #specificColor with your desired color code */
}

.best-4-title {
  font-size: 1.1rem !important;
}






/* YouTube Popup Styles */
.video-popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 2147483646 !important;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}

.video-popup-container {
  position: relative;
  width: 90%;
  max-width: 900px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.3s ease-in-out;
  z-index: 2147483646 !important;
}

/* Fix for white line/divider */
.video-popup-container hr,
.video-popup-container .divider {
  display: none !important;
}

/* Ensure no gaps between elements */
.video-popup-container > * {
  margin: 0;
  padding: 0;
}

/* Updated X Button Styling */
.video-popup-close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 20px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 2147483647 !important;
  font-family: 'Arial', sans-serif;
}

.video-popup-close:hover {
  background-color: rgba(0, 0, 0, 0.7);
  transform: rotate(90deg);
}

.video-popup-close:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* White X icon for better visibility */
.video-popup-close::before,
.video-popup-close::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: white;
  border-radius: 1px;
}

.video-popup-close::before {
  transform: rotate(45deg);
}

.video-popup-close::after {
  transform: rotate(-45deg);
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  border-top: none;
  margin-top: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Prevent body scrolling when popup is open */
body.popup-open {
  overflow: hidden;
}

/* Screen reader only class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media (max-width: 767px) {
  .video-popup-close {
      top: 100px !important ; /* Move button down on mobile */
  }
}