@import url(style-app.css);
:root {
    --animate-delay: 0.5s;
}
section {
    padding-top: 6rem;
    padding-bottom: 8rem;
}
a i.bx {
    font-size: 1.3rem;
    margin-left: 1rem;
}
.btn-rounded {
    border-radius: 30px;
    padding-inline: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
}

.none {
    display: none;
}

.modal-title {
    margin-top: 0;
    margin-bottom: 0;
}


/* HEADER */
header{
    padding: 10px 0px;
    background-color: var(--second-dark-color);
}
header a {
    color: var(--light-text-color);
    font-size: .9rem
}
header .icons a {
    margin-left: 1rem;
    font-size: 1.1rem;
}

/* NAV */
nav li.nav-item .nav-link {
    color: var(--dark-text-color) !important;
    margin-right: 10px;
}
nav li.nav-item .nav-link:hover, .nav-item.dropdown button:hover {
    color: var(--main-dark-color) !important;
}
nav .nav-item a.nav-link.nav-btn {
    background-color: var(--second-dark-color);
    color: var(--light-text-color) !important;
    border-radius: 3rem !important;
    padding: .5rem 2rem;
    margin-right: 20px;
}
nav .nav-item a.nav-link.nav-btn:hover {
    background-color: var(--second-color);
}
.nav-item.dropdown {
    display: flex;
    align-items: center;
}
.nav-item.dropdown button {
    border: none;
    background-color: transparent;
    margin-right: 10px;
}


/* INDEX HEADER */
.header {
    background: linear-gradient(180deg, rgba(var(--rgb-main-color), .8) , rgba(var(--rgb-main-color), .8) ),
url("../../img/public/bg1.jpeg") center right no-repeat;
    background-size: cover;
    text-align: center;
    padding-bottom: 10rem;
}

section.header {
    padding-bottom: 8rem;
}

.header-title {
    color: #FFFFFF;
    font-size: 3rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.full-img-zone {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -8rem;
}

.background-dark {
    background-color: var(--second-light-color);
    border-radius: 1rem;
    padding: 1rem 2rem 3rem 2rem;
    align-items: center;
    box-shadow: .1rem .1rem 5rem rgba(0,0,0,.1);
}
.background-dark li {
    font-size: 1.2rem;
}

.background-light {
    background-color: #FFF;
    overflow: hidden;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: .1rem .1rem 5rem rgba(0,0,0,.1);
    margin-bottom:  2rem;
}

/* LOGIN */
.login-page {
    height: 100vh;
}
.login-page,
.login-page.forget,
.login-page.dark {
    background: linear-gradient(180deg, rgba(var(--rgb-second-dark-color), .95) , rgba(var(--rgb-second-dark-color), .95)),
    url("../images/bg1.jpg") center right no-repeat;
    background-size: cover;
}
.login-form {
    background-color: var(--light-text-color);
    padding: 1rem 3rem;
    border-radius: .5rem;
    margin-right: 2rem;
    margin-left: 2rem;
}
.login-form .welcome {
    margin-top: 0px;
    margin-bottom: 0px;
}


.accordion-item {
    border: none;
    margin-bottom: 10px;
}
.accordion-header {
    margin-bottom: 0;
    margin-top: 0;
}
.accordion-button:not(.collapsed) {
    color: #FFF;
    background-color: var(--main-color);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
    font-weight: bold;
}
.accordion-button {
    color: #FFF;
    background-color: var(--second-color);
}
.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
}
.big {
    font-size: 1.5rem;
    font-weight: bold;
}
h1, h2, h3, h4, h5, h6 {
    animation: fadeIn;
    animation-duration: var(--animate-delay)
}
p {
    font-size: 1rem;
    animation: fadeIn;
    animation-duration: var(--animate-delay);
}
.section-title {
    font-size: 2.3rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
 }
label {
    color: var(--dark-text-color) !important;
}
.avantage {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 1.5rem;
    background-color: var(--bg-color);
    margin-bottom: 3rem;
    border-radius: 1rem;
    box-shadow: .1rem .1rem 2rem rgba(0,0,0,.1);
}
.avantage .number {
    position: absolute;
    top: -2rem;
    left: 2rem;
    width: 4rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--main-color);
    color: var(--second-color);
    font-size: 3rem;
    font-weight: bold;
    border-radius: 50%
}
.show-pw {
    position: relative;
}

.show-pw i.fa-eye,
.show-pw i.fa-eye-slash {
    position: absolute;
    right: 4px;
    top: 30%;
    transform: translate(-50%);
    cursor: pointer;
    color: gray;
    z-index: 100
}
/* footer*/
.copyright {
    background-color: var(--light-text-color);
    padding: 1rem 0 .5rem 0;
}
.copyright ul {
    padding: 0;
    margin: 0;
}


/* SELECT 2 */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px !important;
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #ced4da;
}
.select2-container .select2-selection--single {
    height: 35px;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--brand-main-light-color);
}
.select2-container--default .select2-results__option--selected {
    display: none;
}