.FAQ-container-wrap{
    z-index: 100;
}

.FAQ-container{
    width:80%;
    height:100%;
    border-radius:32px;
    border-width: 3px;
    border-color: rgba(0,0,0,1);
    border-style: solid;
    margin-bottom: 50px;
    padding: 20px;
    z-index: 1;

    /* background manual */
    position: relative;
    background: linear-gradient(150deg, rgba(122, 103, 159, 1) 0%,rgba(177, 163, 214, 1) 50%,rgba(122, 103, 159, 1) 100%);
    overflow: hidden;

}
.FAQ-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:       
        radial-gradient(circle at center, rgba(0,0,0,0.45), transparent 80%),
        repeating-radial-gradient(circle, rgba(0,0,0,0.35) 0 5px, transparent 2.5px 14px);
    background-size: cover, 14px 14px;
    mask-image: linear-gradient(black, rgba(30, 6, 6, 0.269) 0 );
    mix-blend-mode: multiply;
    pointer-events: none;
}
.FAQ-container h2{
    text-align: center;
    font-size:30px;
     background:
    radial-gradient(circle at center,
      rgba(215, 206, 241, 0.95) 0%,
      rgba(190, 176, 230, 0.95) 55%,
      rgba(110, 90, 160, 0.95) 100%
    );
}

.FAQ-question-box{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
}

.FAQ-question{
    border:solid 2px;
    padding:0;
    margin:0;
    text-align:justify;
    border-radius:10px;
    width:100%;
}

.question{
    width:100%;
    text-align:left;
    padding:15px;
    font-size:18px;
    background-color:#2E6CB59C;
    border:none;
    cursor: pointer;
    outline:none;
    transition:0.4s;
    border-radius: 8px;
}


.active, .question:hover{
    background-color: var(--albastru-regal);
}

.active{
    border-radius: 10px 10px 0px 0px;
}

.FAQ-answers{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.3s ease;
    
    padding-left:15px;
    padding-right:15px;
    /* display:none; */
    overflow:hidden;
    background-color: #2E6CB59C;
    border-radius: 0px 0px 10px 10px;
}

.FAQ-answers p{
    margin:7px 0px 7px 0px;
    font-size:18px;
}


.FAQ-buttons{
    display: flex;
    justify-content: space-between;
    max-width: 600px;
    margin: auto;
    gap: 1vw;
}


.FAQ-butoane-sectiuni{
    height: 70px;
    width: 14vw;
    border-radius:12px;

    background-color: #0E0932;
    color: white;
    font-weight: bold;
    font-size: large;

    box-shadow: 0px 4px 0px #00000047;

    transition: 0.2s; 
    
    border-style:solid;
}

.FAQ-butoane-sectiuni:hover, .FAQ-butoane-sectiuni-active{
    background-color: #F49536;
    color:#6C4218;
    font-weight: bold;

    border-color: #6C4218;
    box-shadow: 0px 4px 0px #6c421850;

    cursor:pointer;
}

.FAQ-tot{
    display:flex;
    align-items: center;
    flex-direction: column;
    width: 60%;
}

.FAQ-title{
    width:  90%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15vh;
    margin-bottom: 5vh;
}
    .FAQ-title img{
        width: 50%;
    }


@media screen and (max-width:1000px){
    .FAQ-tot{
        gap: 0;
    }
    .FAQ-title{
        width: 200%;
    }

    .FAQ-container{
        width: 80vw;
    }

    .FAQ-butoane-sectiuni{
        width: 75px;
        font-size: small;
    }
    
    .question{
        text-align:center;
        color: black;
    }

    .FAQ-answers p{
        font-size: 16px;
        text-align: center;
    }
}