:root {
    --bs-primary: #0098F3;
    --bs-hover: #007AD4;
    --bs-focus: #007AD4;
}

.card,
.card-body,
.card-header,
.card-footer {
    background-color: transparent;
    box-shadow: none;
    border: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0px;
    margin-bottom: 0px;
}

.bg-primary-300 {
    background-color: #B6E2FF;
}

/*----------------------------
form
-------------------------------*/
.form-control,
.form-select {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.60);
    box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(25px);
    color: var(--Grayscale-300, #000);
    text-align: left;

    /* Body / Regular */
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
    border: none;
    min-height: 50px;
}

.form-control::placeholder {
    color: var(--Grayscale-300, #C8C8C8);
}

.input-group {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.60);
    box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(25px);
    flex-wrap: nowrap;
    border: none;
}

.input-group .form-control,
.input-group .form-select {
    background-color: transparent;
    border-radius: 0px 0px 0px 0px;
    box-shadow: none;
    backdrop-filter: unset;
}

.input-group .input-group-text {
    background-color: transparent;
    border-radius: 0px 0px 0px 0px;
    box-shadow: none;
    border: none;
}

textarea::-webkit-scrollbar {
    width: 5px;
}

textarea::-webkit-scrollbar-thumb {
    background: #0061AB;
    border-radius: 10px;
}

textarea::-webkit-scrollbar-thumb:hover {
    background: #0061AB;
}

@media(max-width:992px) {

    .form-control,
    .form-select {
        font-size: 13px;
    }
}

@media(max-width:768px) {

    .form-control,
    .form-select {
        font-size: 12px;
    }
}

/*-----------------------------
buttons
------------------------------*/
.btn-primary {
    border-radius: 6px;
    background: var(--Primary-500, #0098F3);
    color: #FFF;
    text-align: center;
    font-family: "Arial Rounded MT Bold";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 171.429% */
}

.btn-primary:hover {
    background: var(--Primary-600, #007AD4);
    box-shadow: 0 8px 18px -6px rgba(24, 39, 75, 0.12), 0 12px 42px -4px rgba(24, 39, 75, 0.12);
}

.btn-primary:focus {
    border: 3px solid var(--Primary-300, #75CDFF);
    background: var(--Primary-600, #007AD4);
}

.btn-primary:disabled {
    background: var(--Primary-200, #B6E2FF);
}

.btn-secondary {
    border-radius: 6px;
    background: var(--Secondaire-500, #E45F2B);
    color: #FFF;
    text-align: center;
    font-family: "Arial Rounded MT Bold";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 171.429% */
    border: none !important;
}

.btn-secondary:hover {
    color: #fff !important;
    background: var(--Secondaire-600, #D54721);
    box-shadow: 0 8px 18px -6px rgba(24, 39, 75, 0.12), 0 12px 42px -4px rgba(24, 39, 75, 0.12);
}

.btn-secondary:focus {
    color: #fff !important;
    border: 3px solid var(--Secondaire-300, #F0AC81) !important;
    background: var(--Secondaire-600, #D54721);
}

.btn-secondary:disabled {
    color: #fff !important;
    background: var(--Secondaire-200, #F6CDB2) !important;
}

.fs-sm {
    font-size: 12px;
}

.btn.fs-sm {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

@media(max-width:992px) {

    .btn-primary,
    .btn-secondary {
        font-size: 13px;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

@media(max-width:768px) {

    .btn-primary,
    .btn-secondary {
        font-size: 12px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

@media(max-width:768px) {
    .btns {
        display: block !important;
    }

    .btns .btn {
        width: 100% !important;
        margin-bottom: 10px;
    }
}

/*--------------------------------
filters
----------------------------------*/
.section-title {
    color: var(--Secondaire-500, #E45F2B);

    /* H4 / Bold */
    font-family: "Arial Rounded MT Bold";
    font-size: 23px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 120% */
}

.section-desc {
    color: var(--Grayscale-900, #545454);

    /* Body / Regular */
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
}

.subSection-title {
    color: var(--Secondaire-500, #E45F2B);

    /* Headline / Bold */
    font-family: "Arial Rounded MT Bold";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 150% */
}

.input-group-search {
    border: 1px solid var(--Grayscale-400, #ADADAD);
    background-color: transparent;
    width: fit-content;

}

.input-group-search .form-control {
    min-height: 45px;
}

@media(max-width:992px) {
    .section-title {
        font-size: 20px;
    }

    .section-desc {
        font-size: 13px;
    }

    .subSection-title {
        font-size: 16px;
    }
}

@media(max-width:768px) {
    .section-title {
        font-size: 18px;
    }

    .section-desc {
        font-size: 12px;
    }

    .subSection-title {
        font-size: 15px;
    }
}

@media(max-width:570px) {
    .section-title {
        font-size: 16px;
    }

    .section-desc {
        font-size: 10px;
    }

    .subSection-title {
        font-size: 14px;
    }

    .filters .input-group-search,
    .filters .btn-primary {
        width: 100%;
        margin-right: 0px !important;
    }
}

/*----------------------------
table-1
-----------------------------*/
.table-1 {
    border-collapse: separate;
    border-spacing: 0 20px;
}

.table-1 thead th {
    border: none !important;
    text-transform: none !important;
    color: var(--Primary-800, #00528D) !important;

    /* Headline / Bold */
    font-family: "Arial Rounded MT Bold";
    font-size: 14px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 150% */
    text-align: center;
}

.table-1 tbody tr td {
    background: rgba(255, 255, 255, 0.40);
}

.table-1 tbody tr td:first-child {
    border-radius: 15px 0px 0px 15px;
}

.table-1 tbody tr td:last-child {
    border-radius: 0px 15px 15px 0px;
}

.table-1 tbody tr td,
.table-1 tbody tr td span {
    border: none;
    color: var(--Grayscale-900, #545454);

    /* Body / Regular */
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
    text-align: center;
}

.dataTables_paginate.paging_simple_numbers {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

/* Style pour Webkit (Chrome, Edge, Safari) */
.dataTables_wrapper .row {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.dataTables_length label {
    display: flex;
    align-content: center;
    justify-content: start;
    margin-bottom: 1rem;
    color: var(--Foundation-Dark-Contrast-Normal, #0F1A23);
    text-align: left;

    /* caption regular */
    font-family: "DM Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 166.667% */
}

.dataTables_length label select {
    width: fit-content;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.60);
    box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(25px);
    color: var(--Grayscale-300, #000);
    text-align: left;

    /* Body / Regular */
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
    border: none;
    min-height: 50px;
}

.dataTables_wrapper::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
}

.dataTables_wrapper::-webkit-scrollbar-track {
    background: var(--bs-hover) !important;
    border-radius: 10px;
}

.dataTables_wrapper::-webkit-scrollbar-thumb {
    background: var(--bs-hover) !important;
    border-radius: 10px;
}

.dataTables_wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--bs-focus);
}

/* Ajout d'un espace en bas pour éviter un chevauchement */
.dataTables_scrollBody {
    overflow-x: auto;
    padding-bottom: 10px;
}

@media(max-width:992px) {

    .table-1 thead th,
    .table-1 tbody tr td,
    .table-1 tbody tr span {
        font-size: 13px !important;
    }
}

@media(max-width:570px) {

    .table-1 thead th,
    .table-1 tbody tr td,
    .table-1 tbody tr span {
        font-size: 12px !important;
    }
}

/*-------------------------------
dropdown
--------------------------------*/
.dropdown .dropdown-menu {
    border-radius: 5px;
    border: 1px solid var(--Primary-300, #75CDFF);
    background: rgba(255, 255, 255, 0.40);
    box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(30px);
}

.dropdown .dropdown-menu .dropdown-item {
    color: #FFF;
    text-align: left;
    /* Body / Bold */
    font-family: "Arial Rounded MT Bold";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
}

.dropdown .dropdown-menu .dropdown-item:hover {
    background-color: var(--bs-hover) !important;
}

.dropdown .dropdown-menu .dropdown-item:focus {
    background-color: var(--bs-focus) !important;
}

@media(max-width:992px) {

    .dropdown .dropdown-menu .dropdown-item {
        font-size: 13px;
    }
}

@media(max-width:768px) {

    .dropdown .dropdown-menu .dropdown-item {
        font-size: 12px;
    }
}

/*----------------------------------------
modal-1
----------------------------------------*/
/* Ajout du flou sur le backdrop Bootstrap */
.modal-backdrop {
    backdrop-filter: blur(30px) !important;
    /* Force le flou */
    background-color: rgba(0, 0, 0, 0.05) !important;
    /* Couleur + transparence */
}

.modal-1 .modal-content {
    border-radius: 20px;
    border: 2px solid var(--Primary-500, #0098F3);
    background: rgba(255, 255, 255);
}

.modal-1 h5 {
    text-align: center;
    /* H4 / Bold */
    font-family: "Arial Rounded MT Bold";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 120% */
}

.Question-modal img {
    width: 100.071px;
    height: 100.071px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    object-fit: contain;
}

@media(max-width:992px) {
    .modal-1 h5 {
        font-size: 18px;
    }

    .Question-modal img {
        width: 80.071px;
        height: 80.071px;
    }
}

@media(max-width:768px) {
    .modal-1 h5 {
        font-size: 16px;
    }

    .Question-modal img {
        width: 60.071px;
        height: 60.071px;
    }
}

@media(max-width:768px) {
    .modal-1 h5 {
        font-size: 15px;
    }

}

@media(max-width:570px) {
    .modal-1 .modal-footer {
        display: block !important;
    }

    .modal-1 .modal-footer .btn {
        width: 100% !important;
        margin-bottom: 10px;
    }
}

/*---------------------------
card-1
-----------------------------*/
.card-1 {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.40);
    box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(30px);
}

.cardTop {
    border-radius: 20px;
    background-image: url("../img/bg-floue-primary.png");
    background-size: cover;
    box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(30px);
    height: 100%;
    width: 100%;
    max-width: 250px;
}

.cardTop.secondary {
    background-image: url("../img/bg-floue-secondary.png");
}

.cardTop.primary-400 {
    background-image: url("../img/bg-floue-primary-400.png");
}

.cardTop .card-body {
    display: flex;
    align-items: center;
    justify-content: start;
}

.cardTop .card-body .box {
    width: 55.419px;
    height: 55.419px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    border-radius: 5px;
    background: rgba(0, 152, 243, 0.60);
    box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(30px);
}

.cardTop .card-body .box svg {
    width: 50% !important;
    height: 50% !important;
    object-fit: contain;
}

.cardTop h5 {
    color: var(--Primary-500, #0098F3);

    /* Body / Bold */
    font-family: "Arial Rounded MT Bold";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
    margin-top: 0px;
    margin-bottom: 0px;
}

.cardTop p {
    color: var(--Primary-700, #0061AB);

    /* H3 / Bold */
    font-family: "Arial Rounded MT Bold";
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 0px;
    margin-bottom: 0px;
}

.cardTop.secondary .box {
    background: #E45F2B;
}

.cardTop.secondary h5 {
    color: #E45F2B;
}

.cardTop.secondary p {
    color: #B1351D;
}

.cardTop.primary-400 .box {
    background: #2CB4FF;
}

.cardTop.primary-400 h5 {
    color: #2CB4FF;
}

.cardTop.primary-400 p {
    color: #0098F3;
}

@media(max-width:992px) {
    .cardTop .card-body .box {
        width: 50.419px;
        height: 50.419px;
    }

    .cardTop h5 {
        font-size: 13px;
    }

    .cardTop p {
        font-size: 25px;
    }
}

@media(max-width:768px) {
    .cardTop {
        max-width: none;
    }

    .cardTop h5 {
        font-size: 12px;
    }

    .cardTop p {
        font-size: 20px;
    }
}

/*----------------------
cardChart
-------------------------*/
.cardChart {
    width: 100%;
}

.cardChart h5 {
    color: var(--Primary-600, #007AD4);

    /* Headline / Bold */
    font-family: "Arial Rounded MT Bold";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 150% */
    margin-top: 0px;
    margin-bottom: 0px;
}

.boxNotif {
    height: 40px;
    width: 40px;
    border-radius: 6px;
    background: var(--Primary-500, #0098F3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.boxNotif span {
    background-color: #F44336;
    border-radius: 50%;
    padding: 3px 5px;
    position: absolute;
    top: -5px;
    right: -5px;
    color: #FFF;
    text-align: center;
    font-family: "Arial Rounded MT Bold";
    font-size: 8px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

.boxNotif i {
    font-size: 1.5rem;
    color: #fff;
}

@media(max-width:992px) {
    .cardChart h5 {
        font-size: 16px;
    }
}

@media(max-width:768px) {
    .cardChart h5 {
        font-size: 14px;
    }
}

/*---------------------------
cardList
-------------------------------*/
.cardList {
    border-radius: 20px;
    background-image: url("../img/bg-floue-primary.png");
    background-size: cover;
    box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(30px);
    height: 100%;
    width: 100%;
}

.cardList .card-body {
    display: flex;
    align-items: center;
    justify-content: start;
}

.cardList .card-body .box,
.cardChat .card-header .box {
    width: 41px;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    border-radius: 5px;
    background: var(--Primary-400, #2CB4FF);
    box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(30px);
}

.cardList .card-body .box svg,
.cardList .card-body .box img,
.cardChat .card-header svg,
.cardChat .card-header img {
    width: 50% !important;
    height: 50% !important;
    object-fit: contain;
}

.cardList .card-body h6,
.cardChat .card-header h6 {
    color: var(--Primary-500, #0098F3);
    /* Body / Bold */
    font-family: "Arial Rounded MT Bold";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
    margin-top: 0px;
    margin-bottom: 0px;
}

.cardList .card-body p {
    color: var(--Grayscale-500, #9E9E9E);

    /* Caption / Regular */
    font-family: "Work Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 0px;
    margin-bottom: 0px;
}

@media(max-width:992px) {

    .cardList .card-body .box,
    .cardChat .card-header .box {
        width: 35px;
        height: 35px;
    }

    .cardList .card-body h6,
    .cardChat .card-header h6 {
        font-size: 14px;
    }

    .cardList .card-body p {
        font-size: 10px;
    }
}

/*--------------------------
cardChat
-----------------------------*/
.cardChat {
    width: 100%;
    height: fit-content;
    background: rgba(255, 255, 255, 0.40);
    box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(30px);
}

.cardChat .card-header {
    border-radius: 20px 20px 0 0;
    background-image: url("../img/bg-floue-primary.png");
    background-size: cover;
    box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(30px);
    display: flex;
    align-items: center;
    justify-content: start;
}

.cardChat .card-body {
    height: 333px;
    overflow-y: auto;
}

.cardChat .card-body::-webkit-scrollbar {
    width: 5px;
}

.cardChat .card-body::-webkit-scrollbar-thumb {
    background: #0061AB;
    border-radius: 10px;
}

.cardChat .card-body::-webkit-scrollbar-thumb:hover {
    background: #0061AB;
}

.cardChat .card-body .message {
    border-radius: 20px 20px 0 20px;
    background: rgba(239, 248, 255, 0.40);
    box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(30px);
    width: fit-content;
}

.cardChat .card-body .message.my-message {
    justify-self: flex-end;
}

.cardChat .card-body .message p {
    color: var(--Primary-700, #0061AB);

    /* Subtitle / Regular */
    font-family: "Work Sans";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.cardChat .card-body .message small {
    color: var(--Grayscale-600, #888);

    /* Caption / Bold */
    font-family: "Arial Rounded MT Bold";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.cardChat .card-footer {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: nowrap;
    border-radius: 0 0 20px 20px;
    background: rgba(255, 255, 255, 0.40);
    box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(30px);
}

.cardChat .card-footer .form-control {
    box-shadow: none;
    background-color: transparent;
    min-height: auto !important;
}

/*--------------------------------
.bs-stepper
--------------------------------*/
.bs-stepper-form {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0px 0px !important;
}

.bs-stepper-form .bs-stepper-header {
    width: 95%;
    overflow-x: auto;

}

.bs-stepper-form .bs-stepper-header::-webkit-scrollbar {
    height: 0px;
}

.bs-stepper-form .bs-stepper-header::-webkit-scrollbar-thumb {
    background: #0061AB;
    border-radius: 10px;
}

.bs-stepper-form .bs-stepper-header::-webkit-scrollbar-thumb:hover {
    background: #0061AB;
}

.bs-stepper-form .step {
    display: flex;
    align-items: center;
    justify-content: start;
}

.bs-stepper-form .bs-stepper-circle {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.40);
    box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(30px);
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--Grayscale-300, #C8C8C8);

    /* Headline / Regular */
    font-family: "Work Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 150% */
}

.bs-stepper-form .step.active .bs-stepper-circle {
    border: 3px solid var(--Primary-200, #B6E2FF);
    color: #0098F3;
}

.bs-stepper-form .bs-stepper-title {
    color: var(--Grayscale-300, #C8C8C8);
    text-align: center;

    /* Body / Regular */
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
}

.bs-stepper-form .step.active .bs-stepper-title {
    color: #0098F3;
}

.bs-stepper-form .step:last-child svg {
    display: none !important;
}

.bs-stepper-form .step.active svg path {
    stroke: #75CDFF !important;
    stroke-width: 3px;
}

@media(max-width:992px) {
    .bs-stepper-form .bs-stepper-circle {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .bs-stepper-form .bs-stepper-title {
        font-size: 12px;
    }

    .bs-stepper-form .step svg {
        width: 30px !important;
    }
}

/*--------------------------
jointe
----------------------------*/
.jointe {
    border-radius: 10px;
    border: 2px dashed var(--Primary-300, #75CDFF);
    padding: 1rem 1rem;
}

.jointe img {
    width: 50px;
    height: 50px;
    aspect-ratio: 1/1;
    object-fit: contain;
    margin-bottom: 1rem;
}

.jointe h5 {
    color: var(--Grayscale-950, #363636);
    text-align: center;

    /* H4 / Regular */
    font-family: "Work Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 120% */
    margin-bottom: 1rem;
}

.jointe h4 {
    color: var(--Secondaire-400, #E9804E);
    text-align: center;

    /* H4 / Bold */
    font-family: "Arial Rounded MT Bold";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 120% */
    margin-bottom: 1rem;
}

.jointe small {
    color: var(--Grayscale-900, #545454);
    text-align: center;

    /* Body / Regular */
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
}

@media(max-width:992px) {
    .jointe img {
        width: 40px;
        height: 40px;
        margin-bottom: 0.5rem;
    }

    .jointe h5,
    .jointe h4 {
        font-size: 18px;
        margin-bottom: 0.5rem;
    }

    .jointe small {
        font-size: 13px;
    }
}

@media(max-width:768px) {
    .jointe img {
        width: 40px;
        height: 40px;
    }

    .jointe h5,
    .jointe h4 {
        font-size: 12px;
    }

    .jointe small {
        font-size: 12px;
    }
}

/*-------------------------
card-2
--------------------------*/
.card-2 img {
    max-width: 216px;
    max-height: 216px;
    flex-shrink: 0;
    object-fit: contain;
}

.card-2 h5 {
    color: var(--Primary-600, #007AD4);
    text-align: center;

    /* H4 / Bold */
    font-family: "Arial Rounded MT Bold";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 120% */
}

.card-2 small {
    color: var(--Secondaire-500, #E45F2B);
    text-align: center;

    /* Body / Regular */
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
}

@media(max-width:992px) {
    .card-2 img {
        max-width: 186px;
        max-height: 186px;
    }

    .card-2 h5 {
        font-size: 18px;
    }

    .card-2 small {
        font-size: 13px;
    }
}

@media(max-width:768px) {
    .card-2 img {
        max-width: 156px;
        max-height: 156px;
        margin-bottom: 1rem !important;
    }

    .card-2 h5 {
        font-size: 16px;
        margin-bottom: 1rem !important;
    }

    .card-2 small {
        font-size: 12px;
    }
}

/*------------------------
cardBadge
-------------------------*/
.cardBadge .card-body {
    display: flex;
    align-items: center;
    justify-content: start;
    border-radius: 20px;
    background: rgba(239, 248, 255, 0.40);
    box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: blur(30px);
}

.cardBadge img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-right: 10px;
    margin-top: -40px;
}

.cardBadge p {
    color: var(--Primary-400, #2CB4FF);

    /* Headline / Bold */
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 25px;
}

.cardBadge p strong {
    color: #0098F3;
}

@media(max-width:992px) {
    .cardBadge img {
        width: 80px;
        height: 80px;
        margin-top: -30px;
    }

    .cardBadge p {
        font-size: 13px;
    }
}

@media(max-width:992px) {
    .cardBadge img {
        width: 60px;
        height: 60px;
        margin-top: -20px;
    }

    .cardBadge p {
        font-size: 12px;
    }
}

/*------------------------------
cardText
---------------------------------*/
.cardText {
    height: 100%;
}

.cardText .card-header h4 {
    color: var(--Secondaire-400, #E9804E);
    /* Headline / Bold */
    font-family: "Arial Rounded MT Bold";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 150% */
}

.cardText .card-body img {
    border-radius: 20px;
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
    width: 100%;
    max-height: 185px;
}

.cardText .card-body h5 {
    color: var(--Primary-700, #0061AB);

    /* Body / Bold */
    font-family: "Arial Rounded MT Bold";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
}

.cardText .card-body p {
    color: var(--Grayscale-950, #363636);

    /* Body / Regular */
    font-family: "Work Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.cardText .box {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.40);
    box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(30px);
}

.cardText .form-control {
    border-radius: 10px;
    border: 0.5px solid var(--Primary-400, #2CB4FF);
    background-color: transparent !important;
    backdrop-filter: initial !important;
}

@media(max-width:992px) {

    .cardText .card-body h5,
    .cardText .card-body p {
        font-size: 13px;
    }

    .cardText .card-body h4 {
        font-size: 16px;
    }
}

@media(max-width:768px) {

    .cardText .card-body h5,
    .cardText .card-body p {
        font-size: 12px;
    }

    .cardText .card-body h4 {
        font-size: 14px;
    }
}