.accordion {

    background-color: rgb(27, 27, 27);
    color: #12bbf8;
    cursor: pointer;
    height: 55px;
    width: 100%;
    text-align: left;
    border: none;
    border-radius: 10px;
    outline: none;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
    

}


.accordion.active {

    animation: heightopen 400ms ease forwards;
}

.accordion.active .drop_Down_Button_Acc {

    transition: all 400ms ease;
    rotate: 180deg;
}

.accordion.disactive {

    animation: heightclose 400ms ease forwards;
}

/* .active, .accordion:hover {
    background-color: rgb(20, 20, 20);
  } */

  .accordion_Q {

    -webkit-user-select: none; /* Safari */
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 55px;
    padding: 18px;
    padding-right: 10px;
  }

  .drop_Down_Button_Acc {

    height: 30px;
    width: 30px;
    background-image: url(../Images/Webpage/keyboard_arrow_down_30dp_08BFFF_FILL0_wght400_GRAD0_opsz24.svg);
    background-size: cover;
    transition: all 400ms ease;
  }

  .panel {


    height: calc(100% - 55px);
    padding: 20px;
  }

  .hidden {

    display: none;
  }


  @keyframes heightopen {

    from {
    height: clamp(55px, 2.3vw, 110px);
    
    }
    
    to {
    height: clamp(200px, 12vw, 400px);
    
    }
}

@keyframes heightclose {

    from {
    height: clamp(200px, 12vw, 400px);
    
    }
    
    to {
    height: clamp(55px, 2.3vw, 110px);
    
    }
}

@keyframes buttonRotate {

    from {
    rotate: 0deg;
    
    }
    
    to {
    rotate: 180deg;
    
    }
}

  @media (min-width: 2000px) {

  .accordion {

    height: clamp(110px, 2.3vw, 220px);
  }

  .accordion_Q {

    height: clamp(100px, 2.3vw, 110px);
    padding: clamp(18px, 0.9vw, 36px);
    padding-right: clamp(10px, 0.5vw, 20px);
  }

  .accordion_Q span {

    font-size: clamp(1.5rem, 1vw, 3rem);
  }

  .drop_Down_Button_Acc {

    height: clamp(30px, 1.5vw, 60px);
    width: clamp(30px, 1.5vw, 60px);
  }

  .panel {
    height: calc(100% - clamp(110px, 2.3vw, 220px));
    padding: clamp(20px, 1.1vw, 40px);
    font-size: clamp(1.5rem, 1vw, 2rem);
    
  }

  @keyframes heightopen {

    from {
    height: clamp(110px, 2.3vw, 220px);
    
    }
    
    to {
    height: clamp(200px, 12vw, 400px);
    
    }
  }

  @keyframes heightclose {

      from {
      height: clamp(200px, 12vw, 400px);
      
      }
      
      to {
      height: clamp(110px, 2.3vw, 220px);
      
      }
  }

  }