.faq_container{
    display: block;
    padding: 20px 25px;
    margin: 30px auto;
}

#faq_title{
    margin-bottom: 30px;
    text-align: center;
}

.questions_container{
    text-align: center;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/* On a medium size screen */
@media screen and (max-width: 1400px) {
    .questions_container {
      grid-template-columns: repeat(2, 1fr); /* Un élément par ligne */
    }
  }

/* On a small screen */
@media screen and (max-width: 700px) {
.questions_container {
    grid-template-columns: repeat(1, 1fr); /* Un élément par ligne */
}
}

/* Style of each question in the FAQ, having a transition effect when hovered */
.question_card{
    border: 3px solid #01015e;
    border-radius: 8px;
    padding: 5px 10px;
    margin: 10px 50px;
    overflow: auto;
    height:fit-content;
    margin-bottom: 0px;
    margin-left: 0px;
    transition:
        transform 0.5s ease,
        box-shadow 0.5s ease;
}

.question_card:hover{
    box-shadow: -10px 10px 10px 1px #01015e;
}

.question{
    color:black;
}

.answer{
    color: #01015e;
}

#link{
    text-decoration-line: none;
}

#link:hover{
    color:#01015e;
    text-decoration-line: underline;
}


.btn-page {
    border: 3px solid #01015e;
    background-color: white;
    color: #01015e;
    margin-left: 10px;
}

.btn-page:hover {
    border: 3px solid #01015e;
    background-color: white;
    color: #01015e;
    margin-left: 10px;
    box-shadow: -3px 3px 3px 1px #01015e;
}

.modal-content {
    border: 2px solid #01015e;
}

.modal-header, .modal-footer {
    background-color: #01015e;
    color: white;
}

.modal-title {
    font-weight: bold;
}