.servicesaccordions__title {
  color: #1F2937;
  font-size: 28px;
  letter-spacing: -1px;
  @media (min-width:768px){ font-size: 32px; letter-spacing: -1px;}
  @media (min-width:1400px){ font-size: 72px;  letter-spacing: -5px;}
}

.servicesaccordions__accordionheader{
   
  position: relative;
  padding: 40px 0;
}

.servicesaccordions__bigtitle{
  position: absolute;
  z-index: 0;
  font-style: italic;
  text-transform: uppercase;
  transition: 0.3s ease all;
  right: 0%;
  top: 60%;
  font-size: 70px;
  line-height: 70px;
  font-weight: 900;
  text-align: right;
  width: 120%;
  letter-spacing: -5px;
  @media (min-width:768px){ font-size: 100px; line-height: 100px; letter-spacing: -5px; }
  @media (min-width:1400px){ font-size: 144px; line-height: 144px;  letter-spacing: -5px;}
  @media (min-width:2000px){ font-size: 200px; line-height: 200px;   letter-spacing: -5px;}
       
}

.servicesaccordions__body{
  padding: 0px;
  position: relative;
  z-index: 1;
}

.servicesaccordions__bdy{
  width: 100%; 
  z-index: 1;
  font-size: 18px;
  line-height: 140%;
  font-weight: 400;
  @media (min-width:768px){ font-size: 22px;}
  @media (min-width:1400px){ font-size: 24px;}
  @media (min-width:2000px){ font-size: 28px;}
}

.servicesaccordions__accordion{
  border: unset;
}

.servicesaccordions__button{
  z-index: 1;
  font-size: 18px;
  background: unset;
  border: unset;
  padding: 0px;
  display: flex;
  flex-direction: column;
  
  &::after{
   content: unset; 
  }
 
}

.servicesaccordions__headercont{
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
    z-index: 1;
}

.servicesaccordions__accordioncircle{
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 24px;
    overflow: hidden;
    position: relative;
}

.servicesaccordions__accordioncircle svg{
  position: relative;
  z-index: 1;
  transform: rotate(0deg);
  transition: 0.1s all ease; 
}

.servicesaccordions__accordioncircle svg path{
  fill: #1F2937; 
}

.servicesaccordions__accordioncircle::before {
  content: '';
  position: absolute;
  inset: 0px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s ease;
  z-index: 0;
} 

.servicesaccordions__accordioncircle::after {
  content: '';
  position: absolute;
  inset: 0px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  top:0px;
  left:0px;    
  border: 2px solid #1F2937;  
} 


.servicesaccordions__item:hover .servicesaccordions__accordioncircle::before {
  transform: scaleX(1);  
}

.servicesaccordions__item .servicesaccordions__accordioncircle::before {
  transform: scaleX(0);
}

.accordion-button:focus{
  box-shadow: unset;
}

.accordion-button:not(.collapsed) {
  background: unset;
  box-shadow: unset;
  border: none;
  padding-bottom: 0px;
}

.servicesaccordions__question{
  font-size: 20px;
  @media (min-width:768px){ font-size: 28px; }
  @media (min-width:2000px){ font-size: 32px; }
}

.servicesaccordions__answer{
   padding: 10px 40px 0px 74px;
}
.servicesaccordions__subitemcont{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 50px;
  padding-bottom: 80px;
  @media (min-width:768px){width: 80%;}
   @media (min-width:1200px){width: 60%;}
}

.servicesaccordions__subitem{
  font-size: 14px;
  line-height: 15px;
  padding: 12px;  
  border-radius: 4px;  
}


.servicesaccordions__item{
  border: unset;
  cursor: pointer;
  position: relative;
  overflow: hidden; 
  
  &::after{
    background: var(--theme-big-title-color);
    content: "";
    height: 1px;
    left: 0px;
    position: absolute;
    bottom: 0px;
    width: 100%;
  }
}

{# -- themes -- #}

.servicesaccordions__themedeepblue {
  --theme-text-color-active: #ffffff;
  --theme-icon-color-active: #1F2937;
  --theme-big-title-color: #EBEDFA;
  --theme-bigtitle-hover-color: #3147B5;
  --theme-subitem-bg-color: #3147B5;
  --theme-subitem-color: #ffffff;
  --theme-bg-gradient: linear-gradient(#1A2660 0%, #10183C 100%);
}

.servicesaccordions__themelilac {
  --theme-text-color-active: #ffffff;
  --theme-icon-color-active: #B273E6;
  --theme-big-title-color: #F3E9FB;
  --theme-bigtitle-hover-color: #C393EC;
  --theme-subitem-bg-color: #7A23C3;
  --theme-subitem-color: #ffffff;
  --theme-bg-gradient: linear-gradient(#B273E6 0%, #943CDC 100%);
}

.servicesaccordions__themeindigo {
  --theme-text-color-active: #1F2937;
  --theme-icon-color-active: #2FC8F5;
  --theme-big-title-color: #E7F9FE;
  --theme-bigtitle-hover-color: #0CBFF3;
  --theme-subitem-bg-color: #B6ECFB;
  --theme-subitem-color: #1F2937;
  --theme-bg-gradient: linear-gradient(#2FC8F5 0%, #55D2F7 100%);
}

.servicesaccordions__themeaqua {
  --theme-text-color-active: #1F2937;
  --theme-icon-color-active: #00FFD1;
  --theme-big-title-color: #E9FCF9;
  --theme-bigtitle-hover-color: #8FF0DF;
  --theme-subitem-bg-color: #E9FCF9;
  --theme-subitem-color: #1F2937;
  --theme-bg-gradient: linear-gradient(#00FFD1 0%, #00FFD1 100%);
}

.servicesaccordions__themeseablue {
  --theme-text-color-active: #ffffff;
  --theme-icon-color-active: #1D37C1;
  --theme-big-title-color: #E9ECFC;
  --theme-bigtitle-hover-color: #213FDE;
  --theme-subitem-bg-color: #213FDE;
  --theme-subitem-color: #ffffff;
  --theme-bg-gradient: linear-gradient(#1D37C1 0%, #172C9B 100%);
}

.servicesaccordions__themecoral {
  --theme-text-color-active: #ffffff;
  --theme-icon-color-active: #F33180;
  --theme-big-title-color: #FEE7F0;
  --theme-bigtitle-hover-color: #F55697;
  --theme-subitem-bg-color: #FBB7D2;
  --theme-subitem-color: #1F2937;
  --theme-bg-gradient: linear-gradient(#F33180 0%, #F10E6A 100%);
}

.servicesaccordions__themegenblue {
  --theme-text-color-active: #1F2937;
  --theme-icon-color-active: #8093FF;
  --theme-big-title-color: #E5E9FF;
  --theme-bigtitle-hover-color: #B3BEFF;
  --theme-subitem-bg-color: #1A3CFF;
  --theme-subitem-color: #ffffff;
  --theme-bg-gradient: linear-gradient(#8093FF 0%, #5F77FF 100%);
}

.servicesaccordions__themeorange {
  --theme-text-color-active: #1F2937;
  --theme-icon-color-active: #FFB132;
  --theme-big-title-color: #FFF5E5;
  --theme-bigtitle-hover-color: #FFCE80;
  --theme-subitem-bg-color: #FFBB4D;
  --theme-subitem-color: #1F2937;
  --theme-bg-gradient: linear-gradient(#FFB132 0%, #FF9E00 100%);
}

.servicesaccordions__themeyellow {
  --theme-text-color-active: #1F2937;
  --theme-icon-color-active: #FFE503;
  --theme-big-title-color: #FFFCE5;
  --theme-bigtitle-hover-color: #FFF7B3;
  --theme-subitem-bg-color: #FFF7B3;
  --theme-subitem-color: #1F2937;
  --theme-bg-gradient: linear-gradient(#FFE503 0%, #FFE71A 100%);
}

.servicesaccordions__theme .servicesaccordions__bigtitle {
  color: var(--theme-big-title-color);
}

.servicesaccordions__theme .servicesaccordions__subitem {
  background: var(--theme-subitem-bg-color);
  color: var(--theme-subitem-color);
}

.servicesaccordions__theme.is-active .servicesaccordions__accordioncircle::before {
  background: var(--theme-text-color-active);
}

.servicesaccordions__theme.is-active .servicesaccordions__accordioncircle::after {
  border: 2px solid var(--theme-text-color-active);
}

.servicesaccordions__theme.is-active .servicesaccordions__accordioncircle svg {
  transform: rotate(45deg);
  transition: 0.1s all ease;
}

.servicesaccordions__theme.is-active .servicesaccordions__accordioncircle svg path {
  fill: var(--theme-text-color-active);
}

.servicesaccordions__theme:hover .servicesaccordions__accordioncircle::before {
  background: var(--theme-text-color-active);
}

.servicesaccordions__theme:hover .servicesaccordions__accordioncircle::after {
  border: 2px solid var(--theme-text-color-active);
}

.servicesaccordions__theme:hover .servicesaccordions__accordioncircle svg path {
  fill: var(--theme-icon-color-active);
}

.servicesaccordions__theme:hover,
.servicesaccordions__theme.is-active {
  background: var(--theme-bg-gradient);
}

.servicesaccordions__theme:hover .servicesaccordions__bigtitle,
.servicesaccordions__theme.is-active .servicesaccordions__bigtitle {
  color: var(--theme-bigtitle-hover-color);
  right: 5%;
  transition: 0.3s ease all;
}

.servicesaccordions__theme:hover .servicesaccordions__title,
.servicesaccordions__theme:hover .servicesaccordions__bdy,
.servicesaccordions__theme.is-active .servicesaccordions__title,
.servicesaccordions__theme.is-active .servicesaccordions__bdy {
  color: var(--theme-text-color-active);
}