@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

p,
a,
span {
    font-family: "Sen", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
div {
    font-family: "Sen", sans-serif;
}

.main-conrainer {
    width: 100%;
    height: auto;
    margin: 0px auto;
}

.inner-container {
    max-width: 1720px;
    margin: 0px auto;
    /*overflow: hidden;*/
}

#home {
    transition: 5s linear !important;
    background: #d8b6b6;
}

.sticky {
    position: sticky !important;
    top: 0;
    backdrop-filter: blur(10px);
    z-index: 99999;
}

header nav {
    padding: 10px 0px;
    width: 100%;
}

    header nav .logo img {
        width: 270px;
    }

.menu-btn {
    display: none;
}

.fixed-button {
    position: fixed;
    right: -60px;
    top: 50%;
    z-index: 9999;
    transform: rotate(-90deg);
}

    .fixed-button a {
        background: #d8b6b6;
        padding: 24px;
        font-size: 25px;
        color: #1a1a1a;
        text-decoration: none;
        transition: 200ms linear;
    }

        .fixed-button a:hover {
            background: #bf9191;
        }

header nav ul {
    list-style: none;
    margin: 0 !important;
    padding-left: 0;
    gap: 30px;
}

    header nav ul li a {
        text-decoration: none;
        font-weight: 500;
        font-size: 18px;
        text-transform: uppercase;
        color: #442E5E !important;
        transition: 300ms linear;
        padding: 13px 0px;
        position: relative;
    }

        header nav ul li a:before {
            content: '';
            width: 0%;
            height: 2px;
            background: #442E5E;
            position: absolute;
            bottom: 7px;
            left: 0;
            transition: 300ms linear;
        }

        header nav ul li a:hover:before {
            width: 100%;
        }

.subMnenuItems {
    position: relative;
    cursor: pointer !important;
}

    .subMnenuItems:hover a {
        color: #30408d !important;
    }

    .subMnenuItems ul {
        position: absolute;
        display: none;
        transition: 300ms linear;
        cursor: pointer;
        opacity: 0;
        flex-direction: column;
        gap: 10px;
        padding: 7px 0px 7px 5px;
        border-radius: 4px;
        top: 38px;
        left: 10px;
        box-shadow: 0px 0px 4px 0px #ededed;
        /* width: 185px !important;*/
        background: #fff;
        z-index: 11
    }

        .subMnenuItems ul li a {
            display: block;
            width: 100%;
            padding: 3px 4px !important;
            font-size: 15px;
        }

            .subMnenuItems ul li a:before {
                content: '';
                background: transparent;
            }

            .subMnenuItems ul li a:hover {
                color: #ffff !important;
                background: #32428f;
            }

    .subMnenuItems:hover ul {
        display: flex;
        opacity: 1;
    }

    .subMnenuItems:hover i {
        transform: rotate(180deg);
    }

nav ul li a i {
    font-size: 15px;
    transition: 200ms linear;
}

.isActiveLink {
    color: #0223c1 !important;
}

.isActive {
    font-weight: 600;
}

.sm-nav-btn-box {
    display: none;
}

.sm-logo {
    display: none;
}

header nav .nav-btn-box a {
    text-decoration: none;
    border: 2px solid #23AAE2;
    color: #23AAE2;
    font-weight: 500;
    padding: 6px 15px;
}

header nav .nav-btn-box select {
    text-decoration: none;
    border: none;
    color: #442E5E;
    font-weight: 500;
    padding: 6px 15px;
}

    header nav .nav-btn-box select:focus {
        outline: none;
    }


.fixedBox a {
    position: fixed;
    top: 50%;
    transform: translateY(-50%) rotate(270deg);
    right: -18px;
    z-index: 11;
    background: #23AAE2;
    padding: 10px 20px;
    color: #ffffff !important;
    font-weight: 400;
    font-size: 14px;
    gap: 10px;
    display: flex;
    align-items: center;
}
/* main section  style start  */


/* ------------- bennar section start and set bennar images ----------------- */

#notre-famille button {
    background: #000000;
    padding: 5px 27px;
    color: #ffff;
    border: none;
    margin-top: 20px;
    border-radius: 30px;
    width: 100%;
    font-size: 14px;
}

/*.slide__img:nth-child(1) {
    background-image: url(../images/slide-1.jpg)
}

.slide__img:nth-child(2) {
    background-image: url(../images/slide-1.jpg)
}
*/


.iconBoxBanner {
    background: #ef4039;
}

.banner {
    width: 100%;
    background: #ebebeb;
    /* background-image: url(../images/img-bg.png);
    background-size: 100%;
    background-position: center;*/
}

.slide__img img {
    width: 100%;
    height: 100%;
    position: relative;
}

.banner img {
    /*display : none;*/
    width: 100%;
    height: 100%;
}


#paimMaimberShipBtn {
    width: fit-content;
    margin: 54px auto 0px;
    text-align: center;
}

    #paimMaimberShipBtn a {
        padding: 16px 40px;
        background: #ff9900;
        border-radius: 30px;
        text-decoration: none;
        color: #ffff;
        font-size: 20px;
    }

.iconBoxBanner ul {
    width: 100% !important;
    display: flex;
    gap: 40px;
    list-style: none;
    justify-content: center;
    margin-bottom: 0px;
}

    .iconBoxBanner ul li {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        color: #ffff;
        font-size: 17px;
        text-align: center;
    }

        .iconBoxBanner ul li div {
            height: 50px;
            width: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            /* background: #30408d;*/
            border-radius: 50%;
        }

            .iconBoxBanner ul li div img {
                width: 45px;
            }
/* ------------- bennar section end ----------------- */
.bennar-poster {
    position: relative;
}

    .bennar-poster .bennar_btn {
        position: absolute;
        width: 82px;
        height: 82px;
        bottom: -15px;
        left: 50%;
        transform: translatex(-50%);
        border-radius: 50%;
        background: #f4f3f2;
        display: flex;
        justify-content: center;
        align-items: center;
        text-transform: uppercase;
    }

        .bennar-poster .bennar_btn a {
            font-size: 10px !important;
            font-weight: 600;
        }

    .bennar-poster img {
        width: 100%;
        object-fit: cover;
    }

.text-content {
    margin-top: 54px;
    margin-bottom: 30px;
}

    .text-content p {
        font-family: "Poppins", sans-serif;
        line-height: 1.7;
        width: 80%;
        margin: 15px auto;
        font-size: 18px;
    }

    .text-content ul {
        font-family: "Poppins", sans-serif;
        width: 80%;
        margin: 15px auto;
        font-size: 18px;
    }

    .text-content ul {
        line-height: 1.7;
    }

    .text-content h3 {
        font-family: "Poppins", sans-serif;
        width: 80%;
        margin: 20px auto 15px;
        font-size: 28px;
        font-weight: 600;
        color: #354590;
    }


/* -- our services --------  */
#Àpropos h2 {
    text-align: center;
    font-size: 45px;
    color: #26357c;
    border-bottom: 2px solid #26357c;
    width: fit-content;
    padding-bottom: 5px;
    margin: 0px auto 43px;
}

.section-title {
    font-size: 24px;
}

    .section-title h1 {
        text-align: center;
        font-size: 45px;
        color: #26357c;
        border-bottom: 2px solid #26357c;
        width: fit-content;
        padding-bottom: 5px;
        margin: 0px auto 43px;
        text-transform: capitalize !important;
    }

.inner_content_box {
    width: 85% !important;
    margin: 0px auto;
}

.services {
    margin: 70px auto 0px;
    padding: 50px 0px;
    background-color: #F3FCFF;
}

.service-row {
    position: relative;
    background-color: #F3FCFF;
    position: relative;
    z-index: 1;
}


    .service-row .service-col {
        min-height: 325px;
        border-radius: 20px;
    }

    .service-row .service-content h2 {
        font-size: 24px;
        font-weight: 500;
        color: #442E5E;
    }

    .service-row .service-content p {
        margin-top: 20px;
        font-size: 18px;
        font-weight: 400;
        color: #442E5E;
    }




.icons img {
    width: 50px;
}

.service-icons span {
    display: block;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    background-color: #ffff;
    color: #000000;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/*-----------ADMINISTRATION -------------*/

#ADMINISTRATION h1 {
    font-family: "Poppins", sans-serif;
    width: 80%;
    margin: 20px auto 15px;
    font-size: 28px;
    font-weight: 600;
    color: #354590;
}

#ADMINISTRATION .tableBox table {
    border: 1px solid black;
    width: 80%;
}


.tableBox thead th {
    background: #30408d;
    color: #ffff;
}

.tableBox {
    margin: 50px auto 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

    .tableBox table {
        border: 1px solid black;
        width: 600px;
    }

        .tableBox table td, th {
            border: 1px solid black;
            padding: 10px;
        }

        .tableBox table td {
            color: black;
            font-weight: 500;
        }



/* Activites-row ----------section */


.cards-box {
    min-height: 250px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    transition: 300ms linear;
    position: relative;
}

    .cards-box:first-child {
        /* background: #fff;*/
    }

    .cards-box:nth-child(2) {
        /*background: #86b7fe;*/
        position: relative;
        transition: 300ms linear;
        box-shadow: 0px 0px 4px 0px #ebe8e8;
    }

    .cards-box:nth-child(3) {
        /* background: #ffff;*/
        position: relative;
        transition: 300ms linear;
        box-shadow: 0px 0px 4px 0px #ebe8e8;
    }

    .cards-box:first-child:hover {
        transform: scale(1.1) !important;
        z-index: 1;
    }


    .cards-box:hover {
        scale: 1.03;
        z-index: 1;
    }


    .cards-box:last-child {
        /*background: #86b7fe;*/
        transition: 300ms linear;
    }

        .cards-box:last-child:hover {
            transform: scale(1.1) !important;
            z-index: 1;
        }


#activites {
    width: 100%;
    height: auto;
    margin: 50px auto 0px;
}

.Activites-row {
    width: 80%;
    margin: 0px auto;
}

    .Activites-row h2 {
        font-weight: 600;
        font-size: 26px;
        color: #30408d;
    }

.Activites {
    flex: 1;
}

    .Activites .col-first h5 {
        color: #252525;
        font-size: 15px;
        font-weight: 400;
    }

    .Activites .col-first h3 {
        color: #252525;
        font-size: 22px;
        margin-top: 15px;
        font-weight: 600;
    }

    .Activites .col-first p {
        color: #252525;
        font-size: 16px;
        font-weight: 400;
    }

    .Activites .col-secound p {
        color: #252525;
        font-size: 16px;
        margin-top: 1px;
        font-weight: 500;
    }

    .Activites .col-last a {
        color: #ffffff;
        background-color: #30408d;
        border: 1px solid #30408d;
        border-radius: 30px;
        font-size: 15px;
        font-weight: 400;
        text-decoration: none;
        padding: 4px 15px;
        transition: 200ms linear;
    }

        .Activites .col-last a:hover {
            background-color: transparent;
            color: #30408d;
        }

    .Activites .col-last span {
        color: #ED3821;
        font-size: 16px;
    }

.btn-more a {
    display: block;
    margin: 30px 0px 0px;
    width: fit-content;
    text-decoration: none;
    border: 1px solid #30408d;
    padding: 8px 21px;
    font-weight: 500;
    color: #ffffff;
    transition: 200ms linear;
    background: #30408d;
}

    .btn-more a:hover {
        background-color: #442E5E;
        color: #fff;
    }

/* ZoneIntégration style start ---------- */

#ZoneIntégration {
    width: 100%;
    min-height: 300px;
    position: relative;
    margin: 50px auto 0px;
    background-color: #30408d;
}

    #ZoneIntégration::before {
        content: '';
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        background: url(../images/image-2.jpeg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    #ZoneIntégration ul li {
        color: #ffff;
        font-size: 17px;
        font-weight: 300;
        margin-top: 18px;
        line-height: 1.6;
    }

    #ZoneIntégration .content-box p {
        color: #ffff;
        font-size: 18px;
        font-weight: 300;
        margin-top: 18px;
        line-height: 1.6;
    }

    #ZoneIntégration .content-box .btn-box a {
        display: block;
        width: fit-content;
        text-decoration: none;
        padding: 6px 15px;
        border: 0.5px solid #23AAE2;
        transition: 200ms linear;
        color: #ffffff;
    }

        #ZoneIntégration .content-box .btn-box a:first-child {
            background-color: #23AAE2;
        }

        #ZoneIntégration .content-box .btn-box a:last-child:hover {
            background-color: #23AAE2;
        }

#ProposezVotre .rows-1 {
    width: 100%;
    min-height: 300px;
    position: relative;
    margin: 0px auto 0px;
    background-color: #ED3821;
}

    #ProposezVotre .rows-1::before {
        content: '';
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: url(../images/image-1.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    #ProposezVotre .rows-1 h1 {
        width: 250px;
        margin-left: auto;
        line-height: 1.4;
    }

    #ProposezVotre .rows-1 p {
        font-size: 17px;
        font-weight: 200;
        color: #ffffff;
        margin-top: 18px;
        line-height: 1.6;
    }

    #ProposezVotre .rows-1 .box-content1 a {
        display: block;
        width: fit-content;
        text-decoration: none;
        padding: 6px 15px;
        font-size: 14px;
        border: 0.5px solid #23AAE2;
        background-color: #23AAE2;
        color: #ffffff;
        transition: 200ms linear;
    }

        #ProposezVotre .rows-1 .box-content1 a:hover {
            background-color: transparent;
        }

    #ProposezVotre .rows-1 .box-content2 {
        font-size: 15px;
        color: #ffffff;
    }

#ProposezVotre .rows-2 {
    background-color: #F7F7F7;
    /* min-height: 200px; */
    width: 100%;
    margin: 0px auto 0px;
    position: relative;
    z-index: 1;
}

    #ProposezVotre .rows-2::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 50%;
        background-color: #23AAE2;
        z-index: -1;
    }

    #ProposezVotre .rows-2::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 50%;
        height: 50%;
        background-color: #F9AD1B;
        z-index: -1;
    }

    #ProposezVotre .rows-2 .section-title p {
        font-size: 14px;
        font-weight: 400;
    }


    #ProposezVotre .rows-2 .input-box input {
        width: 300px;
        height: 40px;
        font-family: "Sen", sans-serif;
        border: none;
        padding: 0px 10px;
        font-size: 15px;
        transition: 200ms linear;
    }


        #ProposezVotre .rows-2 .input-box input:focus {
            outline: 0.5px solid #442E5E;
        }

    #ProposezVotre .rows-2 .input-box button {
        height: 40px;
        padding: 0px 15px;
        border: 0.5px solid #000000;
        font-family: "Sen", sans-serif;
        font-size: 15px;
        color: #442E5E;
        transition: 200ms linear;
    }

        #ProposezVotre .rows-2 .input-box button:hover {
            background-color: #000000;
            color: #ffffff;
        }

.CareersBoxBtn h3 {
    font-size: 20px;
    color: #ffffff;
}

.CareersBoxBtn .col-fast {
    position: relative;
    left: 50px;
}

    .CareersBoxBtn .col-fast:first-child {
        -top: 20px;
    }

    .CareersBoxBtn .col-fast i {
        margin-left: 70px;
        color: #ffff;
        font-size: 18px;
    }


.Careers {
    position: relative;
    top: 30px;
}


/* footer ---------------------- */
footer {
    width: 100%;
    margin: 50px 0px 0px;
}

    footer .f-logo img {
        width: 354px;
    }


    footer .contact-link a:hover {
        color: #23AAE2 !important;
    }

.address {
    font-size: 20px !important;
}



footer .social-link {
    list-style: none;
}

    footer .social-link li a {
        display: block;
        height: 30px;
        width: 30px;
        border: 1px solid #252525;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        border-radius: 50%;
        color: #252525;
        font-size: 15px;
        transition: 200ms linear;
    }

        footer .social-link li a:hover {
            background-color: #23AAE2;
            border: 1px solid #23AAE2;
            color: #ffffff;
        }

footer .f-links ul {
    list-style: none;
}

footer .f-links h4 {
    font-weight: 700;
    color: #252525;
    font-size: 18px;
    margin-top: 15px;
}

footer .f-links ul li a {
    list-style: none;
    font-size: 16px;
    text-decoration: none;
    color: #252525;
    font-weight: 500;
}

    footer .f-links ul li a:hover {
        color: #23AAE2;
    }

footer .f-inner-row p {
    font-size: 17px;
    color: #252525;
    font-weight: 500;
}

.formAction h2 {
    font-size: 26px;
    font-weight: 600 !important;
}

.formAction label {
    font-size: 15px;
    font-weight: 500;
    padding-bottom: 4px;
    color: #282727;
}

.formAction input {
    padding: 10px 10px;
    border: 1px solid #cacafe;
    font-size: 15px;
    border-radius: 6px;
}

    .formAction input:hover {
        border: 1px solid #000;
    }

#ddlAmount {
    width: 100%;
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid #cacafe;
    padding: 11px 62px !important;
}

.amount-btn {
    flex: 1;
    border: 1px solid #babaf2;
    padding: 7px 0px;
    border-radius: 6px;
    margin-bottom: 12px;
    background: transparent;
    color: #494949;
    font-weight: 600;
    font-size: 19px;
}


#ddlAmoun:hover {
    border: 1px solid #000 !important;
}

select:hover {
    border: 1px solid #000 !important;
}

.country-input-box {
    width: 100%;
    font-size: 16px;
    border-radius: 5px !important;
    border: 1px solid #cacafe !important;
    padding: 12px 10px !important;
}

    .country-input-box:hover {
        border: 1px solid #000;
    }

formAction input:focus {
    outline: 1px solid #0d6efd;
}

.subMitBox {
    width: 100%;
    gap: 20px;
    display: flex;
    justify-content: center;
}


    .subMitBox button:first-child {
        background: transparent;
        border: none;
        font-size: 15px;
        color: #0d6efd;
        font-weight: 600;
    }

    .subMitBox button:last-child {
        background: #32428f;
        border: none;
        font-size: 15px;
        color: #ffffff;
        font-weight: 400;
        padding: 11px 24px;
        border-radius: 2px;
        width: 259px;
        transition: 300ms;
    }

        .subMitBox button:last-child:hover {
            background: black;
        }

/*.paymentBox {
    width: 400px;
}*/

.formAction select {
    padding: 10px 7px;
    border: 1px solid #cacafe;
    border-radius: 5px;
}


.modalBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0000004f;
    display: none;
    transition: 200ms linear;
    /*opacity : 0;*/
}

.box-content {
    background: #f5f5ff;
    padding: 20px 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 0px #595959;
    transform: scale(0.5);
    transition: 300ms linear;
}

.payNow {
    height: 44px;
    padding: 0px 15px;
    border: 0.5px solid #232e63;
    font-family: "Sen", sans-serif;
    font-size: 18px;
    color: #ffffff;
    transition: 200ms linear;
    background: #232e63;
    border-radius: 6px;
}

.error-message {
    font-size: 12px;
    height: 14px;
    color: red;
}

#Carncy {
    position: absolute;
    top: 50%;
    height: 95%;
    left: 2.5px;
    align-content: center;
    padding: 0px 6px;
    background: #cacafe;
    font-weight: 600;
    color: #504d4d;
    transform: translatey(-50%);
    border-radius: 6px 0px 0px 6px;
}

.innerFooterLogo img:first-child {
    width: 110px;
}

.innerFooterLogo img:nth-child(2) {
    width: 110px;
}

.innerFooterLogo img:last-child {
    width: 110px;
}

.donation-form {
    background-color: #f0f0ff
}

    .donation-form #home {
        background-color: transparent !important;
    }

.donation-form-image-box {
    background: #fff;
    border-radius: 16px;
    box-shadow: rgba(14, 14, 93, 0.1) 2px 2px 16px;
}

    .donation-form-image-box img {
        border-radius: 16px;
        height: 400px;
        object-fit: cover;
    }

    .donation-form-image-box h1 {
        font-size: 22px;
        font-weight: 600;
        margin: 25px 0px 14px;
    }

    .donation-form-image-box p {
        font-size: 16px;
    }

.message_sub {
    height: 16px;
    font-size: 14px;
}

#card-element {
    padding: 13px 10px;
    border: 1px solid #cacafe;
    font-size: 16px;
    background-color: #ffff !important;
    border-radius: 6px;
}


    #card-element:hover {
        border: 1px solid #000;
    }

.Subscribe_box input {
    padding: 13px 10px !important;
    border: 1px solid #fff;
}

    .Subscribe_box input:hover {
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

    .Subscribe_box input:focus {
        outline: none;
        border-left: 1px solid #adadad;
        border-top: 1px solid #adadad;
        border-bottom: 1px solid #adadad;
    }

.Subscribe_box button {
    padding: 7px 10px !important;
    background: #237fe2;
    color: #fff;
    border: #252525;
    float: right;
    transition: 200ms linear;
}

    .Subscribe_box button:hover {
        background: #144b86;
    }

.Subscribe_box h3 {
    font-size: 38px !important;
    color: #343434 !important;
}

.success_modal {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    background: #00000066;
    backdrop-filter: blur(2px);
}

    .success_modal .modal_content_box {
        background: #ffffff;
        padding: 25px 20px;
        border-radius: 10px;
        text-align: center;
    }

        .success_modal .modal_content_box img {
            width: 90px;
            margin: 0px auto;
        }

        .success_modal .modal_content_box h2 {
            width: 80%;
            text-align: center;
            line-height: 1.6;
            margin: 10px auto 0px;
        }

        .success_modal .modal_content_box button {
            border: none;
            padding: 10px 23px;
            display: block;
            margin: 24px auto 0px;
            background: #0dcaf0;
            color: #fff;
            border-radius: 5px;
            transition: 200ms linear;
        }

            .success_modal .modal_content_box button:hover {
                background: #059ab8;
            }

.bg-fixed-image {
    position: fixed;
    width: 464px;
    left: 49%;
    top: 3%;
    transform: translateX(-50%);
}

.bg-fixed-image-2 {
    top: 59%;
    left: 11%;
    width: 456px;
}

.bg-fixed-image-3 {
    top: 23%;
    left: unset;
    right: -1% !important;
    transform: translateX(0%);
    width: 451px;
}

.input-faild-box {
    position: relative;
    border-radius: 30px;
}

.radio-btn-box {
    background: #fff;
    display: flex;
    padding: 10px 20px;
    align-items: center;
    column-gap: 34px;
    flex-wrap: wrap;
    border-radius: 30px;
}

.input-faild-box input {
    padding-left: 22px !important;
    border-radius: 30px !important;
}

.form-label-box {
    position: absolute;
    top: 12px;
    left: 22px;
    transition: transform 0.3s, font-size 0.3s;
    font-size: 16px;
    pointer-events: none;
    color: gray;
}

.link-box a {
    font-size: 20px;
    transition: 300ms;
    display: block;
    margin: 35px 0px 1px;
    margin-left: auto !important;
}

.service-col:hover .link-box a {
    color: #ffffff !important;
}

.input-faild-box input:focus {
    outline: none;
    border: 1px solid #767676 !important;
}

.formAction textarea {
    padding: 8px 10px;
    font-size: 15px;
    border-radius: 5px;
    min-height: 100px;
}

.formAction textarea {
    padding: 10px 10px;
    border: 1px solid #cacafe;
    font-size: 15px;
    border-radius: 6px;
}

.footerLink h3 {
    font-weight: 500;
    font-size: 24px;
    color: #4a4a4a;
    border-bottom: 1px solid #a6a6a6;
    width: fit-content;
    padding-bottom: 8px;
}

.footerLink ul {
    list-style: none;
}

    .footerLink ul li a {
        text-decoration: none;
        color: #4a4a4a;
        font-weight: 500;
    }

        .footerLink ul li a:hover {
            color: #237fe2;
        }

.social-links {
    list-style: none
}

    .social-links li {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 29px;
        height: 29px;
        border-radius: 5px;
        border: 1px solid #1b1b1b;
        font-size: 15px;
        color: #000 !important;
        padding-left: 0px;
    }

        .social-links li a {
            color: #1b1b1b !important;
        }

        .social-links li:hover {
            border: 1px solid #237fe2;
        }

            .social-links li:hover a {
                color: #237fe2 !important;
            }



@media screen and (min-width: 1830px) {
    .bennar-poster {
        height: 93vh;
    }

        .bennar-poster .inner-banner-Box {
            height: 100%;
            overflow: hidden
        }
}

@media screen and (max-width: 1400px) {
    header nav .logo img {
        width: 235px;
    }

    header nav ul {
        gap: 18px;
    }

    .formAction label {
        font-size: 15px;
    }

    header nav ul li a {
        font-size: 17px;
    }

    .donation-form-image-box h1 {
        font-size: 20px;
    }

    .donation-form-image-box p {
        font-size: 15px;
    }

    .payNow {
        height: 40px;
        font-size: 15px;
        border-radius: 5px;
    }

    .formAction input {
        padding: 8px 10px;
        font-size: 15px;
        border-radius: 5px;
    }

    #ddlAmount {
        font-size: 15px;
        border-radius: 5px;
        padding: 9px 62px !important;
    }

    .country-input-box {
        width: 100%;
        font-size: 15px;
        border-radius: 5px !important;
        padding: 9px 10px !important;
    }

    #card-element {
        padding: 8px 10px !important;
        border-radius: 5px !important;
    }
}

@media screen and (max-width: 1280px) {
    .bg-fixed-image {
        width: 306px !important;
        top: 5%;
    }

    .bg-fixed-image-3 {
        top: 33% !important;
        right: -5% !important;
        width: 213px !important;
    }

    .bg-fixed-image-2 {
        top: 68% !important;
        left: 5% !important;
        width: 256px !important;
    }

    footer .f-logo img {
        width: 270px;
    }

    .section-title h1 {
        font-size: 28px !important;
    }
}

@media screen and (max-width: 1146px) {
    .inner-container {
        width: 90%;
    }

    header nav .logo img {
        width: 217px;
    }

    header nav ul li a {
        font-size: 16px;
    }

    .Activites-row {
        width: 100%;
    }
}

@media screen and (min-width: 1040px) {
    .list-items {
        right: 0;
    }



    .subMnenuItems {
        overflow: visible;
        height: auto;
    }

        .subMnenuItems .innerMenu {
            padding-left: 10px;
            width: 300px;
        }
}

@media screen and (max-width: 1040px) {

    #home {
        top: 20px;
    }

    .text-content {
        margin-top: 45px;
        margin-bottom: -10px;
    }

    header nav .logo img {
        width: 217px;
    }

    .donation-form-image-box img {
        height: auto;
    }

    .slide .slide__content {
        top: 62% !important;
        left: 34% !important;
    }

    .slide .slide__content--headings h2 {
        font-size: 3rem !important;
    }

    .nav-btn-box {
        display: none;
    }

    .logo {
        flex: 1;
    }

    .menu-btn {
        display: block;
        font-size: 20px;
        color: #4d5b9e;
    }

    .subMnenuItems ul {
        position: relative !important;
        cursor: pointer;
        display: block;
        margin-top: 10px !important;
    }

    .subMnenuItems {
        position: relative;
        height: 26px;
        overflow: hidden;
        transition: 200ms linear;
    }



    .list-items {
        position: fixed;
        top: 0;
        right: -120%;
        width: 391px;
        height: 100vh;
        padding: 50px 50px;
        background-color: #e4e3e3;
        z-index: 11;
        text-align: end;
        transition: 350ms linear;
    }

        .list-items ul {
            flex-direction: column;
            margin-top: 50px !important;
        }

    .subMnenuItems ul {
        top: 0 !important;
        margin-top: 0px !important;
        padding: 7px 10px 5px 5px;
    }

    .sm-logo {
        display: block;
    }

    .close-btn {
        position: absolute;
        top: 20px;
        left: 20px;
        height: 25px;
        width: 25px;
        /* border-radius: 50%; */
        border: 0.5px solid #23aae2;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #23aae2;
        font-size: 15px;
    }

    .list-items .sm-logo img {
        width: 150px;
    }

    .sm-nav-btn-box {
        display: flex;
        justify-content: end;
        gap: 23px;
        margin-top: 60px;
    }
}

@media screen and (max-width: 992px) {
    .slick-dots {
        display: none !important;
    }

    .Subscribe_box h3 {
        font-size: 32px !important;
    }

    .Subscribe_box input {
        padding: 9px 10px !important;
    }
}

@media screen and (min-width: 768px) {
    .input-faild-box input:focus + .form-label-box,
    .input-faild-box input:not(:placeholder-shown) + .form-label-box {
        transform: translateY(-21px);
        font-size: 12px;
        background: #fff;
        padding: 0px 5px;
        border-radius: 3px;
    }
}

@media screen and (max-width: 768px) {

    .input-faild-box {
        background: #ffff;
        display: flex;
        flex-direction: column-reverse;
        padding: 15px;
    }

    .form-label-box {
        position: unset;
    }

    .Devenir-membre {
        width: 100%;
        padding: 40px 20px;
    }

        .Devenir-membre h4 {
            font-size: 18px;
        }

        .Devenir-membre p {
            font-size: 15px;
        }

    .slider, .slide {
        height: auto !important;
    }

    .slider, .slide {
        height: auto !important;
    }


    .tableBox table {
        width: auto;
    }

    .list-items {
        width: 100%;
    }

    .iconBoxBanner ul {
        justify-content: space-between;
        gap: 12px;
    }

        .iconBoxBanner ul li {
            font-size: 14px;
        }

    .bennar-poster .bennar_btn a {
        font-size: 9px !important;
    }

    .inner-row-box {
        background-color: transparent !important;
    }

    .slide .slide__content {
        top: 75% !important;
        left: 44% !important;
    }


    .slide .slide__content--headings h2 {
        font-size: 22px !important;
    }

    /*  .service-row::before {
        background-color: transparent !important;
    }

    .service-row::after {
        background-color: transparent !important;
    }*/

    .service-col:first-child {
        background-color: #F3FCFF;
        min-height: auto;
    }

    .service-col:nth-child(2) {
        background-color: #F9AD1B;
        min-height: auto;
    }

    .service-col:nth-child(3) {
        background-color: #23AAE2;
        min-height: auto;
    }

    .service-col:last-child {
        background-color: #ed3821;
        min-height: auto;
    }


    .Activites-row h2 {
        font-size: 20px;
    }

    .Activites .col-first h5 {
        font-size: 12px;
    }

    .Activites .col-first p {
        font-size: 14px;
    }

    .Activites .col-secound p {
        font-size: 15px;
    }

    .Activites .col-last a {
        font-size: 13px;
    }

    .Activites .col-first h3 {
        font-size: 15px;
        margin-top: 8px;
    }

    .align-items-center {
        justify-content: space-between;
    }

    .social-links {
        justify-content : start !important;
    }


    #ZoneIntégration::before {
        background-color: transparent !important;
        display: none;
    }

    #ProposezVotre .rows-1::before {
        background-color: transparent !important;
        display: none;
    }

    #ProposezVotre .rows-1 h1 {
        margin: 0px 0px auto !important;
    }

    .bg-fixed-image-2 {
        left: 17% !important;
        width: 287px !important;
    }

    .bg-fixed-image-3 {
        width: 250px !important;
        top: 52% !important;
        transform: translate(0, -50%);
    }
}

@media screen and (max-width: 600px) {
    #ADMINISTRATION .tableBox table {
        border: 1px solid black;
        width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .bg-fixed-image {
        width: 202px !important;
    }

    .bg-fixed-image-3 {
        width: 211px !important;
        top: 39% !important;
    }

    #SubscribeForm button {
        width: 100% !important;
    }

    .cards-box:nth-child(2) {
        scale: 1;
    }

    header nav .logo img {
        width: 151px;
    }

    p, a {
        font-size: 16px !important;
    }

    .text-content p {
        font-size: 16px !important;
    }

    .text-content ul {
        font-size: 16px !important;
    }

    .section-title h1 {
        font-size: 22px;
    }

    #paimMaimberShipBtn a {
        padding: 13px 35px;
    }

    .Careers {
        top: 0px;
    }

    .text-content p {
        width: 100%;
    }

    .text-content ul {
        width: 100%;
    }

    .text-content h3 {
        width: 100%;
    }

    #ProposezVotre .rows-2::after, .rows-2::before {
        background-color: transparent;
        display: none;
    }

    .CareersBoxBtn .col-fast {
        left: 0;
        top: 0 !important;
        padding: 20px 20px;
    }

        .CareersBoxBtn .col-fast:first-child {
            background-color: #23AAE2;
        }

        .CareersBoxBtn .col-fast:nth-child(2) {
            background-color: #F9AD1B;
        }
}