.colorful-tab-wrapper {
  width:100%;
  margin:30px auto;
  background:#272727;
  padding:20px;
  box-sizing:border-box;
  overflow:hidden;
  position:relative;
  transition:background .3s ease 0s
}
.colorful-tab-wrapper:before {
  position:absolute;
  height:100%;
  width:100%;
  display:flex;
  opacity:0;
  visibility:hidden;
  left:0;
  top:0;
  content:"";
  box-sizing:border-box;
  overflow:hidden;
  transform:scale(2) rotate(10deg);
  font-size:50px;
  transition:all .6s ease 0s;
  padding-top:60px;
  align-items:center;
  justify-content:center;
  color:#fff
}
.colorful-tab-wrapper.active:before {
  content:attr(active-tab);
  transform:scale(1) rotate(0deg);
  font-family:"Montserrat";
  z-index:9;
  opacity:1;
  visibility:visible
}
.colorful-tab-wrapper.active .colorful-tab-content {
  color:white
}
.colorful-tab-background-image {
  background-attachment:fixed !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important
}
.colorful-tab-background-image:after {
  transition:.5s ease 0s;
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  opacity:0;
  top:0;
  background:#000
}
.colorful-tab-background-image.active {
  background-image:none
}
.colorful-tab-background-image.active:after {
  width:100%;
  opacity:.5
}
.colorful-tab-menu {
  display:flex;
  flex-wrap:wrap;
  background:rgba(255,255,255,0.2);
  margin-bottom:20px;
  position:relative;
  z-index:99
}
.colorful-tab-menu li {
  list-style-type:none;
}
.colorful-tab-menu-item {
  flex:1 1 auto;
  align-self:stretch
}
.colorful-tab-menu-item a {
  display:block;
  text-decoration:none;
  font-family:"Montserrat";
  color:#fff;
  text-align:center;
  padding:20px 0;
  font-size:18px;
  transition:background .3s ease 0s, color .3s ease 0s
}
.colorful-tab-menu-item.active a {
  background:rgba(255,255,255,0.1)
}
.colorful-tab-container {
  width:100%;
  display:flex;
  flex-wrap:wrap;
  flex-direction:column
}
.colorful-tab-content {
  height:0;
  overflow:hidden;
  opacity:0;
  color:#fff;
  visibility:hidden;
  position:relative;
  z-index:9;
  font-family:"Questrial";
  font-size:15px;
  line-height:28px;
  width:0;
  letter-spacing:.4px;
  transform:scale(0.9);
  transition:all .3s ease-in;
  filter:blur(2px)
}
.colorful-tab-content.active {
  height:auto;
  overflow:auto;
  transition-delay:.7s;
  width:auto;
  opacity:1;
  filter:blur(0);
  visibility:visible;
  transform:scale(1)
}
.colorful-tab-wrapper.elliptic {
  border-radius:10px;
  padding:0
}
.colorful-tab-wrapper.elliptic:before {
  padding-top:55px
}
.colorful-tab-wrapper.elliptic .colorful-tab-menu {
  margin:0
}
.colorful-tab-wrapper.elliptic .colorful-tab-container {
  padding:20px;
  box-sizing:border-box
}
.colorful-tab-wrapper.flatline {
  padding:10px 20px 20px 20px
}
.colorful-tab-wrapper.flatline:before {
  padding-top:55px
}
.colorful-tab-wrapper.flatline .colorful-tab-menu {
  background:none;
  margin-bottom:15px;
  box-shadow:0 -2px 0 rgba(255,255,255,0.2) inset;
  padding: 0;
}
.colorful-tab-wrapper.flatline .colorful-tab-menu-item a {
  transition:box-shadow .3s ease 0s, opacity .3s ease 0s;
  opacity:.5
}
.colorful-tab-wrapper.flatline .colorful-tab-menu-item.active a {
  background:none;
  opacity:1;
  box-shadow:0 -2px 0 #fff inset
}
@media (max-width: 767px) {
  .colorful-tab-menu {
    flex-direction:column
  }
}

/* Spinner overlay to appear centered on the content */
.colorful-tab-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* Center the spinner */
    width: 100%;  /* Full width, but constrained by max-width on mobile */
    height: 100%;  /* Full height */
    display: none;  /* Initially hidden */
    display: flex;  /* Use flexbox to center the spinner */
    justify-content: center;  /* Center horizontally */
    align-items: center;  /* Center vertically */
    z-index: 9999;  /* Ensure it appears above other content */
}

.tab-spinner {
    border: 8px solid #f3f3f3; /* Light grey border for the spinner */
    border-top: 8px solid #3498db; /* Blue border-top to create the spinning effect */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;  /* Spin animation */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}