.responsive-tab {
  ul.resp-tabs-list, p {
    margin: 0px;
    padding: 0px;
  }
  .tab-list-wrapper{
    width: 100%;
  }
  .resp-tabs-list {
    position: relative;
    display: flex;
    
    gap: 20px;
  }
  .resp-tabs-list li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    width: 100%;
    aspect-ratio: 1/1;
    font-size: 15px;
    padding: 10px 0;
    margin: 0;
    text-align: center;
    list-style: none;
    cursor: pointer;
    color: var(--clr-primary-800);
    background-color: var(--clr-neutral-100);
    border: 1px solid #c1c1c1;
    transition: all 0.3s ease-in-out;
  }
  .resp-tabs-list li:hover{
    background-color: var(--clr-primary-500);
    border: 1px solid var(--clr-primary-500);
  }
  .resp-tabs-list li span{
    font-size: 16px;
    font-weight: 500;
    margin-top: 20px;
    transition: all 0.3s ease-in-out;
  }
   .resp-tabs-list li:hover span, .resp-tab-active span{
    color: var(--clr-neutral-100);
  }
  .resp-tabs-container { 
    margin-top: 10px;
    padding: 0px;
    clear: left;
  }

  h2.resp-accordion {
    cursor: pointer;
    padding: 5px;
    display: none;
  }

  .resp-tab-content {
    display: none;
  }

  .resp-tab-active {
    background-color: var(--clr-primary-500) !important;
    border: 1px solid var(--clr-primary-500) !important;
  }
.resp-tab-active::after{
    content: url('../images/icons/png/corner.png');
    position: absolute;
    bottom: -20px;
    
  }

  .resp-content-active,
  .resp-accordion-active {
    display: block;
  }


  h2.resp-accordion {
    font-size: 13px;
    border: 1px solid #c1c1c1;
    border-top: 0px solid #c1c1c1;
    margin: 0px;
    padding: 10px 15px;
  }

  /* h2.resp-tab-active {
    border-bottom: 0px solid #c1c1c1 !important;
    margin-bottom: 0px !important;
    padding: 10px 15px !important;
  } */

  h2.resp-tab-title:last-child {
    border-bottom: 12px solid #c1c1c1 !important;
    background: blue;
  }

  h2.resp-accordion{
    align-items: center;
    border-style: solid;
    border: 1px solid var(--clr-primary-500) !important;
    border-color: var(--clr-primary-500);
    padding: 15px 30px !important;
    font-size: 16px !important;
    font-weight: 400;
    text-align: center;
    font-family: var(--ff-secondary);
    margin-bottom: 10px !important;
   
  }
  /*-----------Accordion styles-----------*/

  /* h2.resp-tab-active {
    background: #dbdbdb !important;
  } */

  .resp-easy-accordion h2.resp-accordion {
    display: flex;
  }

  .resp-easy-accordion .resp-tab-content {
    border: 1px solid #c1c1c1;
  }

  .resp-easy-accordion .resp-tab-content:last-child {
    border-bottom: 1px solid #c1c1c1 !important;
  }

  .resp-jfit {
    width: 100%;
    margin: 0px;
  }

  .resp-tab-content-active {
    display: block;
  }

  /* h2.resp-accordion:first-child {
    border-top: 1px solid #c1c1c1 !important;
  } */
  /*Here your can change the breakpoint to set the accordion, when screen resolution changed*/
  @media only screen and (max-width: 768px) {
    ul.resp-tabs-list {
      display: none;
    }
  h2.resp-accordion{
    display: flex;
  }
.resp-tab-active::after{
    display: none;
    
  }
    h2.resp-accordion span{
      padding: 20px;
      text-align: left;
    }
    h2.resp-accordion img{
      width: 50px;
    }


    .resp-vtabs .resp-tab-content {
      border: 1px solid #c1c1c1;
    }

    .resp-vtabs .resp-tabs-container {
      border: none;
      float: none;
      width: 100%;
      min-height: initial;
      clear: none;
    }

    .resp-accordion-closed {
      display: none !important;
    }

    .resp-vtabs .resp-tab-content:last-child {
      border-bottom: 1px solid #c1c1c1 !important;
    }
  }
}