/* Global tab
=====================  */

.gep-tab-component .nav-tabs { position: relative; justify-content: center; border: 0; border-bottom: 5px solid transparent!important; border-image: linear-gradient(74deg, var(--g-blue) 0%, var(--g-purple) 130%); border-image-slice: 1; }
  
.gep-tab-component .nav-tabs > li { position: relative; z-index: 10; margin-bottom: -5px; width: 20%; height: inherit;}
.gep-tab-component.v2 .nav-tabs > li { position: relative; z-index: 10; margin-bottom: -5px;}
.gep-tab-component .nav-tabs > li > a { margin: 0 0.125rem; padding: 0.7rem 18px 0.6rem; display: block; font-size: 15px; line-height: 1.25; letter-spacing: 0; font-weight: 700; color: var(--g-dark); border: none; text-decoration: none; transition: color 0.5s ease; font-family: var(--g-title-font); height: 100%; text-align: center; align-content: center;}
  
.gep-tab-component .nav-tabs > li > a.active,
.gep-tab-component .nav-tabs > li > a.active:hover { color: white; }
.gep-tab-component .nav-tabs .nav-item.show .nav-link, 
.gep-tab-component .nav-tabs .nav-link.active{ background: transparent!important;}
  
.gep-tab-component .nav-tabs > .active-highlight { display: block; position: absolute; background: transparent linear-gradient(74deg, var(--g-blue) 0%, var(--g-purple) 130%) 0% 0% no-repeat padding-box; background: transparent linear-gradient(74deg, var(--g-blue) 0%, var(--g-purple) 130%) 0% 0% no-repeat padding-box; border-radius: 12px 12px 0px 0px; }

.gep-tab-component .card h3{ font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 500;}
.gep-tab-component .accordion-body{ background: transparent;}

/* tab - v2 */
.gep-tab-component.v2 .nav-tabs { border-bottom: 5px solid var(--g-grey)!important; border-image: none; flex-flow: nowrap;
  text-align: center;}
.gep-tab-component.v2 .nav-tabs > li > a{ font-size: clamp(1rem, 2.5vw, 1.25); line-height:  normal; font-weight: 700; padding: 1rem 2rem;}
.gep-tab-component.v2 .nav-tabs > li > a.active, .gep-tab-component.v2 .nav-tabs > li > a.active:hover{ color: var(--g-blue); background: transparent ;}
.gep-tab-component.v2 .nav-tabs > .active-highlight { display: block; position: absolute; bottom: 0; background: transparent!important; border-bottom: 5px solid var(--g-blue)!important; }



/* ACCORDION CSS */

.gep-tab-component .accordion-button{ background: var(--g-blue-light); border-radius: unset!important; box-shadow: none!important; border-bottom: 2px solid transparent; border-image: linear-gradient(74deg, var(--g-blue) 0%, var(--g-purple) 130%)!important; border-image-slice: 1!important; background-clip: padding-box;}
.gep-tab-component .accordion-button:not(.collapsed){ background: var(--gradient-primary); color: white;}
.gep-tab-component .accordion-button:not(.collapsed)::after{ filter: brightness(100);}
.gep-tab-component .accordion-header{ outline: 0; border: 0!important; border-width: 2px; border-style: solid!important; border-color: transparent!important; border-image: linear-gradient(74deg, var(--g-blue) 0%, var(--g-purple) 130%)!important; border-image-slice: 1!important; background-clip: padding-box;}
.gep-tab-component .accordion-item{ border: 1px!important; background: transparent;}
.gep-tab-component .tab-content.accordion{ border: 0;}


/* Locations */

.location-tabs .gep-tab-component p{
  font-size: 14px; line-height: 1.25;
}
.location-tabs .gep-tab-component h5.card-title{ font-size: 20px; line-height: 1.25;}


/* // Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { 
    .tab-content>.tab-pane {
      display: block;
      opacity: 1;
    }
    .gep-tab-component .accordion-item { background: var(--g-grey-v2-60); border-style: solid!important; border-color: transparent!important; border-image: linear-gradient(74deg, var(--g-blue) 0%, var(--g-purple) 130%)!important; border-image-slice: 1!important; background-clip: padding-box; border-width: 1px!important;}
    .gep-tab-component .accordion-body{ background: var(--g-grey-v2-60);}
  }

 /*  Apply styles starting from medium devices and up to extra large devices */
  @media (min-width: 768px) and (max-width: 1399.98px) { 
    .gep-tab-component.v2 .nav-tabs > li > a{ 
      text-align: center;
      align-content: center;
      height: 100%;
      min-width: unset;
      font-size: 1rem;
      padding: 1rem;
      margin: 0 0.5rem;
    }
  }
  @media (min-width: 1400px){
    .gep-tab-component .nav-tabs > li > a{ font-size: 18px;}
  }