p,
div,
button,
span,
a {
    font-family: 'Poppins Regular';
}

h1,
h2,
h3 {
    font-family: 'Metropolis Semi Bold';
}

h4,
h5,
h6 {
    font-family: 'Metropolis Regular';
}

@font-face {
    font-family: 'TCCEB';
    src: url('../fonts/TCCEB.TTF');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'theboldfont';
    src: url('../fonts/theboldfont.ttf');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Petrona';
    src: url('../fonts/Petrona-VariableFont_wght.ttf');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OpenDyslexic';
    src: url('../fonts/OpenDyslexic-Bold.woff2') format('woff2'),
        url('../fonts/OpenDyslexic-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bio Sans';
    src: url('../fonts/BioSans-Bold.woff2') format('woff2'),
        url('../fonts/BioSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    #ffff70 font-display: swap;
}

@font-face {
    font-family: 'Arial Bold';
    font-style: normal;
    font-weight: normal;
    src: local('../fonts/Arial Bold'), url('../fonts/ARIALBD.woff') format('woff');
}

.lafekey .wro {
    width: 80px;
    height: 80px;
    font-size: 40px;
}

.frumenu {
    position: fixed;
    top: 20px;
    left: 3%;
    z-index: 2;
}

.frumenu.active {
    background: linear-gradient(180deg, #ffda0e 0%, #f39200 100%);
    border-radius: 30px;
}

.frumenu ul {
    padding-inline-start: 0px;
    padding: 30px;
    display: none;
}

.frumenu.active ul {
    display: block;
}

.frumenu li {
    list-style: none;
    text-align: left;
    margin: 20px 0;
}

.frumenu li a,
.frumenu li a:hover {
    text-decoration: none;
    font-family: 'Bio Sans';
    font-size: 36px;
    font-weight: bold;
    line-height: 40px;
    font-style: normal;
    text-align: left;
    color: #985b00;
}

.frac1,
.frac2 {
    display: none;
}

.frumenu.active .frac1 {
    display: block;
    position: absolute;
    top: 50px;
    right: -48px;
    width: 50px;
    z-index: 1;
}

.frumenu.active .frac2 {
    display: block;
    position: absolute;
    bottom: 50px;
    right: -63px;
    width: 70px;
    z-index: -1;
}

.frumenu>a {
    background: linear-gradient(180deg, #ffda0e 30%, #f39200);
    border-radius: 50%;
    display: block;
    /* pointer-events: none; */
}

.frumenu>a i {
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    color: #f39200;
}

.frumenu.active>a {
    background: transparent;
}

.frumenu.active .frm2 {
    display: none;
}

.frm1 {
    position: absolute;
    top: -20px;
}

.frm2 {
    position: absolute;
    bottom: 5px;
    z-index: -1;
}

.frme {
    margin: 0px auto;
    display: none;
}

.hmbtn {
    position: absolute;
    top: -10px;
    z-index: 10;
    right: -10px !important;
}

.papro {
    position: absolute;
    top: -12px;
    left: 172px;
    z-index: 2;
}

.papro-2 {
    top: -6px
}

.papro ul {
    padding-inline-start: 0px;
}

.papro li {
    display: none;
    list-style: none;
}

.mots .papro li.active {
    display: block;
}

.papro-img-1 {
    width: 175px;
}

.papro-img-2 {
    width: 150px;
}

.papro li img {
    width: 100px;
}


.fll {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 43%;
    z-index: 2;
}

.fr1 {
    position: fixed;
    bottom: 25%;
    right: 0;
    width: 18%;
}

.fr2 {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 40%;
    z-index: 1;
}

.pastWord {
    width: fit-content;
}

.in1 {
    margin: 15px 0;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 54%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.in1 a {
    background: #fff;
    border-radius: 35px;
    text-align: center;
    text-decoration: none;
    color: #61a03d;
    font-family: 'OpenDyslexic';
    font-size: 36px;
    font-weight: bold;
    line-height: 42px;
    font-style: normal;
    display: inline-block;
    padding: 15px 25px;
    text-transform: uppercase;
    min-width: 300px;
    width: 40%;
    z-index: 1;
}

.in2 {
    margin: 15px 0;
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 70px;
    left: 0;
    z-index: 1;
    display: none;
}

.in2 a {
    background: #fff;
    border-radius: 35px;
    text-align: center;
    text-decoration: none;
    color: #61a03d;
    font-family: 'OpenDyslexic';
    font-size: 36px;
    font-weight: bold;
    line-height: 42px;
    font-style: normal;
    display: inline-block;
    padding: 15px 25px;
    text-transform: uppercase;
    min-width: 300px;
    width: 40%;
    z-index: 1;
}

.trunk {
    position: fixed;
    top: 0;
    left: 0;
}

.login-bg {
    background: url(../../mots_graphics/HomeBackground_.webp);
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.gradient-overlay {
    background: url(../../mots_graphics/HomeMask.webp);
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.index {
    background: url(../images/back2.jpg);
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.msg .hmbtn {
    display: block;
}

.msg {
    background: url(../images/back2.jpg);
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.metxt2 p {
    font-family: 'Arial Bold';
    font-size: 30px;
    font-weight: bold;
    line-height: 30px;
    font-style: normal;
    text-align: left;
    color: #ffffff;
}

.metxt1 {
    background: #fff;
    border-radius: 15px;
    text-align: center;
    z-index: 1;
}

.metxt1 p {
    color: #ff0000;
    margin-bottom: 30px;
    font-family: 'Arial Bold';
}

.metxt1 .col>div {
    border-bottom: 3px solid #164c23;
}

.oral {
    background: url(../images/back2.jpg);
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: bottom;
}

.orp p {
    font-family: 'Arial Bold';
    font-size: 30px;
    font-weight: bold;
    line-height: 36px;
    font-style: normal;
    text-align: left;
    color: #ffffff;
    margin-bottom: 0px;
}

.oral .hmbtn {
    display: block;
}

.orl1 img {
    float: right;
}

.orl3 img {
    float: right;
}

.nouv {
    background: url(../images/back2.jpg);
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: bottom;
}

.nouv .hmbtn {
    display: block;
}

.noubox img {
    margin: 0 auto;
    display: block;
}

.noubox p {
    font-family: 'Arial Bold';
    font-weight: bold;
    font-style: normal;
    text-align: left;
    color: #ffffff;
    margin-bottom: 0px;
}

.liste {
    background: url(../images/back2.jpg);
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: bottom;
}

.listeul img {
    margin: 0 auto 100px auto;
    display: block;
    width: 200px;
}

.listeul ul {
    padding-inline-start: 0px;
    margin-bottom: 0px;
    text-align: center;
}

.listeul li {
    list-style: none;
    display: inline-block;
    margin: 15px;
}

.listeul li a,
.listeul li a:hover {
    color: #164c23;
    font-family: 'Arial Bold';
    text-decoration: none;
    display: flex;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    line-height: 50px;
}

.listeul li:first-child a {
    width: 100px;
    height: 100px;
    background: #2A5827;
    color: #fff;
}

.listeul li:last-child a {
    width: 100px;
    height: 100px;
    background: #2A5827;
    color: #fff;
}

.li4 a {
    border-radius: 0px !important;
    background: #2A5827 !important;
    color: #fff !important;
}

/* .point{position: absolute;left: 120px;top: 75px;width: 70px !important;display: block;} */
.point {
    position: absolute;
    top: 100%;
    left: 100%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    width: 50px !important;
    display: block;
}

.point-s1 {
    position: absolute;
    /* top: 121px !important;
    right: 45%; */
    /* margin-right: -50%;
    transform: translate(-50%, -50%); */
    width: 50px !important;
    display: block;
    z-index: 2;
}

.tutorialhand-2 {
    right: -30px;
    top: 43px;
}

.tutorialhand-screen-1 {
    position: absolute;
    width: 50px !important;
    bottom: -16px;
    z-index: 2;
}

.tutorialhand-screen-2 {
    position: absolute;
    width: 50px !important;
    bottom: -16px;
    z-index: 2;
}

.tutorialhand-screen-3b {
    position: absolute;
    width: 50px !important;
    bottom: -32px;
    left: 50%;
}

.tutorialhand-screen-4 {
    position: absolute;
    width: 50px !important;
    bottom: -16px;
    left: 50%;
    z-index: 2;
}

.tutorialhand-3 {
    top: 43px;
    right: -30px;
}

.tutorialhand-4 {
    top: 43px;
    right: -30px;
}


/* .pointque {position: absolute;left: 54%;top: 39%;width: 70px !important;display: block;} */
.pointque {
    position: absolute;
    /* top: 60%;
    left: 60%;
    margin-right: -50%;
    transform: translate(-50%, -50%); */
    width: 50px !important;
    top: 25px;
    right: -30px;
}

.pointfinal {
    position: absolute;
    top: 85%;
    left: 72%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    width: 70px !important;
    display: none;
}

.prog {
    height: calc(100vh - 125px);
    background: #6ead00;
    position: absolute;
    right: 4px;
    top: 65px;
    width: 20px;
    z-index: 3;
    border-radius: 15px;
    padding: 0px;
    border: 1px solid;
    border-color: #000000;
}

.prog>div {
    height: 25%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*border-bottom: 2px solid #fff;*/
}

.prog span {
    visibility: hidden;
}

.prog>div:nth-child(1) {
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}

.prog>div:nth-child(4) {
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom: 0px;
}

.prog .filled {
    background: #C6FF00;
}

.prog .filled.active {
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    border-top: 1px solid;
    border-color: #fff;
}




.mots {
    background: url(../images/back2.jpg);
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: bottom;
}

.mots .frumenu {
    display: none;
}

.mots .hmbtn {
    display: block;
}

.mots .fll {
    width: 15%;
}

.mots .fr1 {
    width: 9%;
    bottom: 37%;
    z-index: 2;
}

.mots .fr2 {
    width: 27%;
    z-index: 2;
}

.motwrap {
    /* height: calc(100vh - 7px); */
    /* background-image: url(../../mots_graphics/GameplayBoard2.webp); */
    background-image: url(../../mots_graphics/new/PopupMain.webp);
    /* margin-top: 30px; */
    z-index: 1;
    position: relative;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.popup {
    /* height: calc(100vh - 7px); */
    /* background-image: url(../../mots_graphics/GameplayBoard2.webp); */
    background-image: url(../../liste_graphics/Pop-up.webp);
    /* margin-top: 30px; */
    z-index: 1;
    position: relative;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.animalswrap {
    min-height: 470px;
    /* background-image: url(../../mots_graphics/GameplayBoard2.webp); */
    background-image: url(../../animal_graphics/contentbackground.webp);
    /* margin-top: 30px; */
    z-index: 1;
    position: relative;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.motul .flex-nowrap {
    background-image: url(../../mots_graphics/new/insidePopup.webp);
    /* margin-top: 30px; */
    z-index: 1;
    position: relative;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.motul .flex-nowrap .col-md-2 {
    background: transparent !important;
    /* box-shadow: none !important; */
}

.motul ul,
.mottop ul,
.motbox ul,
.lafebox ul,
.lafepandabox ul {
    margin-bottom: 0px;
    padding-inline-start: 0px;
    text-align: left;
}

.motul li,
.mottop li,
.motbox li,
.lafebox li,
.lafepandabox li {
    list-style: none;
    display: inline-block;
    margin: 0 15px;
    padding: 5px 0px;
}

.motul button,
.motul button:hover,
.motull button:active {


    font-family: 'Arial Bold';
    font-size: 30px;
    /* font-size: 50px; */
    font-weight: bold;
    font-style: normal;
    /* color: #874d19; */
    /* background: url('https://abcdelalecture.fr/public/assets/frontend/images/YellowEmpty.webp'); */
    background: url('../../mots_graphics/new/3_.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;


}

.clm-1 button {
    color: #f10e0e;
}

.clm-2 button {
    color: #ff9600;
}

.clm-3 button {
    color: #0551fe;
}

.clm-4 button {
    color: #00c6ff;
}

.clm-5 button {
    color: #b423ff;
}

.clm-6 button {
    color: #ff1994;
}

.clm-7 button {
    color: #37de6a;
}

.clm-8 button {
    color: #b74f11;
}


.clm-11 button {
    color: #ff5757;
}

.clm-22 button {
    color: #e63dff;
}

.clm-33 button {
    color: #2d69ad;
}

.clm-44 button {
    color: #00e1c4;
}

.clm-55 button {
    color: #8fca1d;
}

.clm-66 button {
    color: #ab0038;
}

.clm-77 button {
    color: #2889df;
}

.motul button {
    transition: all .2s ease-in-out;
    border: 0px solid #75B140;
    margin: 5px auto;
    line-height: 45px;
    width: 100%;
    pointer-events: none;
}


.motul>div:first-child {
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.motul {
    margin: 0 auto;
    display: grid;
}

.motul>div>div {
    margin-left: 28px;
}

.motul>div>div:last-child {
    border-right: 0px;
}

/*.motul > div{margin: 0 auto;}*/
/*.motul > div > div{width: 110px;float:left;padding: 0px;}*/
/*-ms-transform: scale(1.2);-webkit-transform: scale(1.2);transform: scale(1.2);*/

/*.motul{display: none;}*/

.motimg {
    position: relative;
}

.motimg img {
    width: 160px;
}

.motimg a {
    display: block;
}

.motleaf img {
    margin: 0 auto 50px auto;
    display: none;
}

.motleaf ul {
    padding-inline-start: 0px;
    text-align: center;
}

.motleaf li:nth-child(odd) {
    font-family: 'Arial Bold';
    font-size: 50px;
    font-weight: bold;
    line-height: 50px;
    font-style: normal;
    text-align: left;
    color: #000000;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.motleaf li:nth-child(even) {
    font-family: 'Arial Bold';
    font-size: 50px;
    font-weight: bold;
    line-height: 50px;
    font-style: normal;
    text-align: left;
    color: #ffffff;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.motleaf p {
    display: none;
    transition: all .2s ease-in;
    font-family: 'Arial Bold';
    font-size: 24px;
    font-weight: bold;
    line-height: 30px;
    font-style: normal;
    text-align: left;
    color: #000000;
    margin-bottom: 50px;
}

.motleaf div {
    margin-bottom: 15px;
    visibility: visible;
}

.motwro p,
.mottru p {
    margin-bottom: 0px;
}

.motbox ul,
.lafepandabox ul,
.lafebox ul {
    text-align: center;
    display: table;
    margin: 0 auto;
    border-radius: 50px;
    padding: 5px 30px;
}

.motbox,
.lafepandabox,
.lafebox {
    /* background: url('https://abcdelalecture.fr/public/assets/frontend/images/BottomWord.webp') 0% 0% no-repeat padding-box; */
    background: url('../../mots_graphics/new/TopText.webp') 0% 0% no-repeat padding-box;
    /* box-shadow: inset 15px 20px 6px #2E6B2D2E; */
    padding: 2px;
    min-height: 60px;
    background-size: 100% 100%;
}

.motbox ul.danger,
.lafepandabox ul.danger,
.lafebox ul.danger {
    border: 3px solid #FF5B5B;
    width: 100%;
    border-radius: 10px;
}

.motbox ul.success,
.lafepandabox ul.success,
.lafebox ul.success {
    border: 3px solid #68C50E;
    width: 100%;
    border-radius: 10px;
}

.motbox .red,
.lafepandabox .red,
.lafebox .red {
    background: transparent;
    /* height: 50px; */
    width: auto;
    /* color: #FF5B5B; */
    color: #ffffff;
    border-radius: 50%;
    font-family: 'Arial Bold';
    font-size: 40px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    line-height: 38px;
}

.lafepandabox .gre,
.lafebox .gre {
    /* height: 50px; */
    width: auto;
    /* color: #FFEF67; */
    color: #FFFFFF;
    border-radius: 50%;
    font-family: 'Arial Bold';
    font-size: 40px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    line-height: 38px;
}

.motbox .gre {
    /* height: 50px; */
    width: auto;
    color: #FFFFFF;
    border-radius: 50%;
    font-family: 'Arial Bold';
    font-size: 40px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    line-height: 38px;
}

.motsdet {
    background: url(../images/back2.jpg);
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: bottom;
}

.motsdet .hmbtn {
    display: block;
}

.motsdet .fll {
    width: 27%;
}

.motsdet .fr1 {
    width: 9%;
    bottom: 37%;
}

.motsdet .fr2 {
    width: 27%;
}

.mottop {
    margin-bottom: 0px;
    /* background: url('https://abcdelalecture.fr/public/assets/frontend/images/TopWords.webp') 0% 0% no-repeat padding-box; */
    background: url('../../mots_graphics/new/TopText.webp') 0% 0% no-repeat padding-box;
    /* box-shadow: inset 15px 20px 6px #2E6B2D2E; */
    padding: 13px 7px;
    height: 55px;
    background-size: 100% 100%;
    /* width: fit-content; */
    width: 100%;
}

/* .mottop {
    margin-bottom: 0px;
    background: url('https://abcdelalecture.fr/public/assets/frontend/images/TopWords.webp') 0% 0% no-repeat padding-box;
    box-shadow: inset 15px 20px 6px #2E6B2D2E;
    padding: 5px 7px;
    height: 43px;
    background-size: 100% 100%;
    width: fit-content;
} */

.mottop li:nth-child(odd) {
    font-family: 'Arial Bold';
    font-size: 3vw;
    font-weight: bold;
    line-height: 17px;
    font-style: normal;
    text-align: left;
    color: #000000;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.mottop li:nth-child(even) {
    font-family: 'Arial Bold';
    font-size: 3vw;
    font-weight: bold;
    line-height: 17px;
    font-style: normal;
    text-align: left;
    color: #ffffff;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.mottop ul {
    text-align: center !important;
}

.lafeholder {
    /* background: url('../../mots_graphics/MainRect.webp') no-repeat center center; */
    background: url('../../mots_graphics/new/insidePopup.webp') no-repeat center center;
    background-size: cover;
    border-radius: 25px;
    /* min-height: 45.5vh; */
    height: fit-content;
}

.lafeul button,
.lafeul button:hover {
    border: 0;
    padding: 5px 20px;
    font-family: 'Arial Bold';
    font-weight: bold;
    font-style: normal;
    text-align: center;
    color: #ffffff;
    margin-top: 15px;
    margin-bottom: 0px;
    font-size: 36px;
    width: 100%;

    font-family: 'Arial Bold';
    font-size: 30px;
    /* font-size: 50px; */
    font-weight: bold;
    font-style: normal;
    color: #000000;
    /* background: url('https://abcdelalecture.fr/public/assets/frontend/images/YellowEmpty.webp'); */
    background: url('../../mots_graphics/new/5_.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;

}

.lafelarge .lafeh2,
.lafelarge .lafeh2:hover {
    border: 0;
    padding-bottom: 35px;
    padding-top: 5px;
    /* padding-left: 30px;
    padding-right: 30px; */
    font-family: 'Arial Bold';
    font-weight: bold;
    font-style: normal;
    text-align: center;
    color: #ffffff;
    margin-top: 30px;
    margin-bottom: 0px;
    font-size: 65px;
    width: 100%;
    min-width: 220px;
    font-family: 'Arial Bold';
    /* font-size: 50px; */
    font-weight: bold;
    font-style: normal;
    color: #ffffff;
    /* background: url('../../mots_graphics/Large_WordHolder.webp'); */
    background: transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    line-height: 60px;
}

/*.lafeact{background: url(../images/spark.webp);background-position: center;background-size: cover;background-repeat: no-repeat;}*/
/* .lafeact button,
.lafeact button:hover {
    background: #164C23 !important;
} */

.lafeul .wro.lafeact {
    background: url('../../mots_graphics/Word_Right.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #007C09;
}

.lafeul .wro.focused {
    background: url('../../mots_graphics/KeyBoardKeyPressed.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #4E2300;
}

.lafeul .wro.active {
    /* background: #FFC5C5;
    color: #ff0000;
    border: 1px solid #FFC5C5; */
    background: url('../../mots_graphics/Word_Wrong.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #D60808;
}

.lafecont {
    background: #75B140;
    padding: 0px 40px;
    ;
    border-radius: 45px;
    width: fit-content;
    text-align: center;
    margin: 0 auto 15px auto;
}

.lafele div span {
    font-family: 'Arial Bold';
    font-weight: bold;
    font-style: normal;
    text-align: left;
    color: #ffffff;
    font-size: 50px;
}

.lafele p {
    font-family: 'Arial Bold';
    font-weight: bold;
    font-style: normal;
    text-align: center;
    color: #000;
    font-size: 30px;
}

.lafelarge {
    display: none;
    position: relative;
}

.lafelarge p {
    font-family: 'Arial Bold';
    font-weight: bold;
    font-style: normal;
    text-align: center;
    color: #000;
    font-size: 26px;
    margin-bottom: 0px;
}

/* .lafeh2 {
    background: #75B140;
    padding: 0px 15px;
    border-radius: 80px;
    margin: 30px auto;
    width: fit-content;
} */

/* .lafeh2 h2 {
    font-size: 60px;
    font-family: 'Arial Bold';
    font-weight: bold;
    font-style: normal;
    color: #fff;
    margin-bottom: 0px;
    display: inline-block;
    padding: 5px 20px;
} */

.lafelarge a {
    /* background: #164C23;
    padding: 15px 50px; */
    width: fit-content;
    /* border-radius: 60px; */
    display: inline-block;
    margin-top: 50px;
}

.lafelarge a img {
    width: 120px;
}

.lafepanda,
.lafeul {
    display: none;
}

.lafepanda {
    position: relative;
}

/* .trupanda{position: absolute;width: 15%;top: 50%;left: 0%;margin-right: 0%;transform: translate(5%, -50%);display: none;} */
.trupanda {
    position: absolute;
    width: 20%;
    top: 80%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    display: none;
}

.trupanda.active {
    display: block;
}

.sounxt {
    display: none;
}

.lafekey {
    display: none;
}

.lafekey a img {
    width: 80px;
}

.lafekeybtn {
    width: 100%;
    position: relative;
}

.lafekey .wro {
    /* background: url('../../mots_graphics/KeyboardKey.webp'); */
    background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../../mots_graphics/new/7_1.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* color: #764014; */
    color: #000000;
    /* border-color: #764014; */
    border-color: #000000;
    font-family: 'Arial Bold';
    font-size: 30px;
    margin: 5px;
    text-align: center;
    line-height: 0px;
    border-radius: 5px;
    appearance: none;
    border: none !important;
    /* pointer-events: none; */
}

.lafekey .wro:hover,
.lafekey .wro.active {
    /* background: url('../../mots_graphics/KeyBoardKeyPressed.webp'); */
    background: url('../../mots_graphics/new/7_.webp');
    color: #4E2300;
    border-color: #764014;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark-green {
    /* background: url('../../mots_graphics/KeyBoardKeyPressed.webp') !important; */
    background: url('../../mots_graphics/new/7_.webp') !important;
    color: #4E2300 !important;
    color: #000000 !important;
    border-color: #764014 !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.lafekey .wro.active.wroans {
    background: url('../../mots_graphics/Word_Wrong.webp') !important;
    color: #4E2300 !important;
    border-color: #764014 !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.lafekey .tru {
    background: #164C23;
    border: 2px solid #164C23;
    height: 80px;
    width: 80px;
    color: #fff;
    border-radius: 50%;
    font-family: 'Arial Bold';
    font-size: 50px;
    padding: 0px 0px 0px 0px;
    margin: 5px;
    text-align: center;
    line-height: 0px;
}

/* .lafekey a {
    background: #164C23;
    padding: 15px 50px;
    width: fit-content;
    border-radius: 60px;
    display: inline-block;
    margin-top: 50px;
} */

/* .lafebox {
    visibility: hidden;
    border: 5px solid #75b140;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: inset 15px 20px 6px #2E6B2D2E;
    border: 5px solid #75B140;
    border-radius: 38px;
    padding: 5px;
    min-height: 80px;
} */

.lafekeybox>div {
    float: left;
    width: 90px;
    padding: 0px;
}

.lafekeybox {
    width: 1079px;
    margin: 0 auto;
    display: block;
}

@media screen and (min-width: 1550px) {
    .lafekeybox {
        width: 1079px;
    }
}

/* @media screen and (min-width: 1400px) {
    .lafekeybox {
        width: 835px;
    }

    .lafekey .wro {
        width: 65px;
        height: 45px;
        font-size: 30px;
    }
} */
@media screen and (min-width: 1400px) and (max-width: 1550px) {
    .lafekeybox {
        width: 1079px;
    }

    .lafekey .wro {
        width: 80px;
        height: 80px;
        font-size: 40px;
    }
}

.lafekeybox>div:nth-child(10) {
    margin-right: 40px;
    display: block;
}

.lafekeybox>div:nth-child(11) {
    margin-left: 50px;
}

.lafekeybox>div:nth-child(21) {
    margin-left: 95px;
}

.lafekeybox>div:last-child {
    margin-right: 0px;
    margin-left: 0px;
}

.lafeimg img {
    margin-top: 15px;
    width: 92px;
    /* margin: 0 auto; */
    visibility: hidden;
    display: block;
}



/* .lafebox .gre {
    background: #75B140;
    height: 50px;
    width: auto;
    color: #fff;
    border-radius: 50%;
    font-family: 'Arial Bold';
    font-size: 50px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    line-height: 44px;
}

.lafebox .red {
    background: #75B140;
    height: 50px;
    width: auto;
    color: #ff0000;
    border-radius: 50%;
    font-family: 'Arial Bold';
    font-size: 50px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    line-height: 44px;
}

.lafebox ul {
    padding-inline-start: 0px;
    text-align: center;
    display: table;
    margin: 0 auto;
    border-radius: 50px;
    padding: 5px 30px;
}

.lafebox li {
    list-style: none;
    display: inline-block;
    margin: 0 15px;
    padding: 25px 0px;
} */

.lafeimg button {
    border: 0px;
    background: transparent;
    margin: 0 auto;
    display: block;
}


.lie0.active,
.lie1.active,
.lie2.active,
.lie3.active {
    display: block;
}

.stp1,
.stp2,
.stp3,
.stp4,
.stp5,
.stp6,
.stp7 {
    z-index: 3;
    height: 100vh;
    position: relative;
}

.stp1 a,
.stp2 a,
.stp3 a,
.stp4 a,
.stp5 a,
.stp6 a,
.stp7 a {
    color: #000;
}

.stp1 div {
    background: #e2a8a5;
}

.stp2 div {
    background: #937ab1;
}

.stp3 div {
    background: #faa756;
}

.stp4 div {
    background: #59bad1;
}

.stp5 div {
    background: #aac46b;
}

.stp6 div {
    background: #5f95c9;
}

.stp7 div {
    background: #cd665f;
}


.stp1 .point {
    position: absolute;
    right: -38px;
    bottom: -5px;
    width: 70px !important;
    display: block;
}


.logbox {
    height: 100vh;
    position: relative;
    z-index: 1111;
}

.logbox form {
    background: url(../../mots_graphics/LoginBoard.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* background-attachment: fixed; */
    border-radius: 20px;
    position: relative;
}

.logbox form .form-inner {
    padding-top: 8rem;
    padding-left: 4rem;
    padding-right: 4rem;
    padding-bottom: 3rem;
}

.logbox form .form-header {
    background: url(../../mots_graphics/Ribbon.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* background-attachment: fixed; */
    position: absolute;
    position: absolute;
    top: 0px;
    left: 0;
    width: 97%;
    margin-left: 2%;
}

.logbox form .form-header h3 {
    color: #fff;
}

.logbox-tcceb {
    font-family: 'TCCEB';
}

.logbox h3 {
    color: #fff;
    text-align: center;
    font-family: 'TCCEB';
    font-weight: bolder;
    font-size: 2.75rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #0e7700;
    padding-top: 0.65rem;
    padding-bottom: 0.75rem;
}

.form-forget-password h3,
.form-forget-username h3,
.form-reset-password h3 {
    font-size: 1.65rem;
}

.logbox form {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    width: 80%;
}

@media screen and (max-width: 1200px) {
    .logbox form {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .login-bg .container {
        margin-top: 0 !important;
        overflow-y: initial !important;
    }
}

.logbox label {
    display: none;
}

.logbox input::placeholder {
    color: #D79940;
    text-transform: uppercase;
}

.logbox input[type="text"],
.logbox input[type="password"],
.logbox input[type="email"] {
    font-family: 'TCCEB';
    color: #D79940;
    background: transparent;
    padding: 13px 30px;
    background: url(../../mots_graphics/LoginBoardInput.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    border: none;
    border-color: none;
}

/* For Chrome, Safari, and newer versions of Edge */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    padding: 10px 30px;
    background: url(../../mots_graphics/TextBox.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    border: none;
    border-color: none;
}

/* For Firefox */
input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill {
    padding: 10px 30px;
    background: url(../../mots_graphics/TextBox.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    border: none;
    border-color: none;
}


.logbox input:focus {
    box-shadow: unset;
    border-color: none;
    border: none;
}

.logbox button,
.logbox button:hover {
    font-family: 'TCCEB';
    padding: 25px 20px;
    font-family: 'Arial Bold';
    font-weight: bold;
    font-style: normal;
    text-align: center;
    color: #ffffff;
    margin-bottom: 15px;
    border: none;
    font-size: 18px;
    width: 50%;
    border-radius: 45px;
    margin-left: 25%;
    background: url(../../mots_graphics/se-connecter.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;

}

.logbox button:focus {
    box-shadow: unset;
    background-color: #75B140;
    border-color: #75B140;
}

/* 
.signbox {
    height: 100vh;
    position: relative;
    z-index: 1111;
}

.signbox h3 {
    color: #fff;
    text-align: center;
    font-family: 'Arial Bold';
    font-weight: bold;
    color: #000;
    font-size: 40px;
    margin-bottom: 20px;
}

.signbox form {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    width: 80%;
}

.signbox label {
    display: none;
}

.signbox input[type="text"],
.signbox input[type="password"],
.signbox input[type="email"] {
    height: 60px;
    background: #fff;
    border-radius: 30px;
    padding: 10px 30px;
}

.signbox input:focus {
    box-shadow: unset;
}

.signbox button,
.signbox button:hover {
    background: #75B140;
    padding: 10px 20px;
    font-family: 'Arial Bold';
    font-weight: bold;
    font-style: normal;
    text-align: center;
    color: #ffffff;
    margin-top: 15px;
    margin-bottom: 15px;
    border: 1px solid #75B140;
    font-size: 24px;
    width: 50%;
    border-radius: 45px;
    margin-left: 25%;
} */


/*.stp1{position: absolute;bottom:10% ;left:22%;width: fit-content;}
.stp2{position: absolute;bottom:21% ;left:29%;width: fit-content;}
.stp3{position: absolute;bottom:35% ;left:34%;width: fit-content;}
.stp4{position: absolute;bottom:48% ;left:40%;width: fit-content;}
.stp5{position: absolute;bottom:47% ;left:48%;width: fit-content;}
.stp6{position: absolute;bottom:53% ;left:56%;width: fit-content;}
.stp7{position: absolute;bottom:65% ;left:62%;width: fit-content;}*/

/* Custom Css Start */

.no-link {
    text-decoration: none !important;
}

.text-orange,
li span.nav-user-txt {
    font-family: 'Bio Sans';
    font-size: 26px;
    text-align: left;
    color: #ff8416 !important;
}

.text-green {
    font-family: 'Bio Sans';
    font-size: 26px;
    text-align: left;
    color: #d1ff31 !important;
}

.text-black {
    color: #000 !important;
}

.s3Words {
    justify-content: start !important;
    padding-left: 30px;
    padding-right: 30px;
}

/* .selWordStep2{padding: 30px !important;} */

/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {

    .motul button,
    .motul button:hover {
        font-size: 30px;
    }
}

/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {

    .motul button,
    .motul button:hover {
        font-size: 30px;
    }
}

.fcontainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ftext {
    padding: 10px;
    font-size: 12px;
}

.ftext .no-link {
    color: #fff;
    border-color: #090909;
}

.vertical_line {
    width: 2px;
    height: 16px;
    background-color: #fff;
    margin: 0 10px;
}

/* Custom Css End */


.col-md-2 .custom-column {
    background-color: burlywood;
    /* Replace with the actual color code from your image */
    border-radius: 10px;
    /* Adjust the value to match the roundness of your corners */
    box-shadow: inset 0px 10px 8px -10px rgba(0, 0, 0, 0.5);
    /* Adjust the color and spread to match your image */
}

.col-md-motul {
    width: 12%;
    padding: 0px 5px 0px 5px;
    /* background: url('../images/Holder.webp') no-repeat center center; */
}

.container-top {
    display: flex;
    align-items: end;
    padding: 10px;
}

.icon-container {
    text-align: center;
    padding-bottom: 12px;
    width: 70px;
}

.word-container {
    flex: 2;
    display: flex;
    flex-direction: column;
}

.word-box,
.input-box {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 5px;
}

.word-box span {
    background-color: #FFA500;
    /* Adjust the color to match your design */
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 1px 1px 3px #888888;
}

.input-box {
    /* Your input field styles will go here */
}

/* Add styles for the back and speaker icons */
#back-icon img,
#speaker-icon img {
    width: 30px;
    /* Adjust the size as needed */
    height: auto;
}