/*Tab Element Styling*/

        .tabs__tab:hover {
            background-color: var(--secondary-ultra-light);
          color: var(--accent);

        }
    
       

   .tabs__tab:focus-visible{
     outline: none;
   }

tabs__tab:active{
  border-right: 3px solid var(--accent);
  color: var(--accent);
}

        .tabs__tab--active:hover {
          color:var(--accent);
        }

        

        .tabs__content {
            flex: 1;
            background-color: white;
        }

        .tabs__panel--active {
            display: block;
        }

       

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

        /* Responsive design */
        @media (max-width: 768px) {
            .tabs {
                flex-direction: column;
            }

            .tabs__list {
                flex-direction: row;
                min-width: auto;
                overflow-x: scroll;
                -ms-overflow-style: none;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
                scroll-snap-type: x mandatory;
                border-right: none;
                max-width: 100%;
                margin-bottom: var(--space-s);
                background: transparent !important;
                gap: var(--space-xs);
              
            }

            .tabs__tab {
                white-space: nowrap;
                border-bottom: none;
              padding: calc(var(--space-xs)/2) var(--space-xs);
              border-radius: var(--radius-circle);
              

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

            .tabs__content{
              background-color: transparent !important; 
            }

            .tabs__tab--active{
              background: var(--accent);
              color: white !important;
            }

            .tabs__tab--active::after {
               content: none !important;
            }

            .service-card{
              margin-bottom: var(--space-xs);
            }
            .tabs__panel {
                padding: 0;
            }

            .tabs{
              border: none !important;
              border-radius: 0 !important;
            }

            .service-card__heading-icon{
              display: none !important;
            }
        }  


/* Before the tab script runs (and in the editor canvas), show the first tab as active */
.tabs:not([data-tabs-ready]) .tabs__panel:first-child {
  display: block;
}
.tabs:not([data-tabs-ready]) .tabs__tab:first-child {
  color: var(--accent);
}
.tabs:not([data-tabs-ready]) .tabs__tab:first-child::after {
  content: '';
  height: 100%;
  width: 8px;
  background: var(--accent);
  position: absolute;
  right: 0;
  border-radius: 8px 0 0 8px;
  top: 0;
  bottom: 0;
}


/* Studio's generated ACSS button reset outranks class styles (on the live site it sits in a lower layer), so restate the values it overrides. */
.tabs__tab.tabs__tab {
  font-family: 'Anton', sans-serif;
  text-align: left;
  letter-spacing: normal;
}