/* --------- Global Fonts --------- */
@import url("/static/fonts/fontawesome/css/all.min.css");
@import url("/files/style/colors.css");

@font-face {
	font-family: 'Tajawal-Regular';
	src: url('/static/fonts/tajawal/Tajawal-Regular.eot?#iefix') format('embedded-opentype'),  url('/static/fonts/tajawal/Tajawal-Regular.woff') format('woff'), url('/static/fonts/tajawal/Tajawal-Regular.ttf')  format('truetype'), url('/static/fonts/tajawal/Tajawal-Regular.svg#Tajawal-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'ArabicDeafAlphabetSmartPress';
	src: url('/static/fonts/ArabicDeaf/ArabicDeaf-Alphabet-SmartPress.eot?#iefix') format('embedded-opentype'),  url('/static/fonts/ArabicDeaf/ArabicDeaf-Alphabet-SmartPress.woff') format('woff'), url('/static/fonts/ArabicDeaf/ArabicDeaf-Alphabet-SmartPress.ttf')  format('truetype'), url('/static/fonts/ArabicDeaf/ArabicDeaf-Alphabet-SmartPress.svg#ArabicDeafalphabetSmartPress-ArabicDeafalphabetSmartPress') format('svg');
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: 'ArabicDeafNormalSmartPress';
	src: url('/static/fonts/ArabicDeaf/ArabicDeaf-Normal-SmartPress.eot?#iefix') format('embedded-opentype'), url('/static/fonts/ArabicDeaf/ArabicDeaf-Normal-SmartPress.woff') format('woff'), url('/static/fonts/ArabicDeaf/ArabicDeaf-Normal-SmartPress.ttf')  format('truetype'), url('/static/fonts/ArabicDeaf/ArabicDeaf-Normal-SmartPress.svg#ArabicDeaf_Normal_SmartPress-ArabicDeaf_Normal_SmartPress') format('svg');
	font-weight: normal;
	font-style: normal;
}
:root{
	--main-color:#ec5750;
	--section-bgb:#f6d9e8;
	--section-bgp:#ebeaf8;
}
body, h1, h2, h3, h4, h5, h6, p, a{font-family: Tajawal-Regular !important;letter-spacing: unset;}
.btn-bg{display: flex;justify-content: center;align-items: center;width: 150px;height: 45px;font-size: 18px;border-radius: 50px;box-shadow: 0 0 0 3em var(--main-color) inset;color: #ffffff;transition:all .3s ease;}
.btn-bg:hover {color: #ec5750;box-shadow: 0 0 0 1px #ec5750 inset;background-color: transparent !important;}


body, #wrapper{background-color: #f6f8fc;}
.stretched #wrapper {height: calc(100vh);/*margin: auto; display: flex;justify-content: center;align-items: center; */background-image: url(/files/images/22713441-B6FE-4D8C-B9C0-49A177CF96D7.png?1914);background-repeat: no-repeat;background-position: 0 -260px;}
#header, #content {background-color: transparent;}
#header {margin-bottom: 50px;border-bottom: 0;}
#header, #header-wrap, #logo,
#header.sticky-header:not(.static-sticky), 
#header.sticky-header:not(.static-sticky) #header-wrap {height: 70px;}
#logo{display: flex;justify-content:center;align-items: center;}
#logo img, #header.sticky-header:not(.static-sticky):not(.sticky-style-2):not(.sticky-style-3) #logo img{height: 50px;}
#header.sticky-header{position: fixed;top: 0;left: 0;width: 100%;background-color: #FFF;box-shadow: 0 0 10px rgb(0 0 0 / 10%);z-index: 3;animation: stickySlideDown .85s ease forwards;}
.ltr #primary-menu>ul {float: right;}
.rtl #primary-menu>ul {float: left;}
#primary-menu ul li > a{font-size: 15px;padding: 24px 15px;color: #444 !important;letter-spacing:0px;} 
#primary-menu ul li.sub-menu.active > a{margin-bottom: 5px !important;}
#primary-menu ul li > a:hover{color: #333 !important;}
#primary-menu ul ul:not(.mega-menu-column){border-top: 2px solid #bc715a;}#primary-menu.style-3 > ul > li:hover > a {color: #444 !important;background-color: transparent;}
#primary-menu ul li > a span {display: inline-block;}
#primary-menu ul li > a div {position: relative;}
#primary-menu ul li .mega-menu-content, #primary-menu ul ul:not(.mega-menu-column) {width: 160px;right: -96px;top: 120%;border-radius: 3px;box-shadow: 0 0 5px #eee;border: 0;opacity: 0;/* visibility: hidden;display: unset !important; */webkit-transition: .5s;-o-transition: .5s;transition: .5s;}
#primary-menu ul li.sub-menu:hover ul {top: 100% !important;opacity: 1;visibility: visible;}
#primary-menu ul ul li > a {padding: 5px 15px;}
#primary-menu ul ul li:not(:last-child) {border-bottom: 1px solid #f3f3f3;}
#header.sticky-header:not(.static-sticky) #primary-menu > ul > li > a {padding-top: 24px;padding-bottom: 24px;}
#primary-menu ul li > a div:after {content: '';position: absolute;right: 50%;margin-right: -4px;bottom: -12px;width: 8px;height: 8px;border-radius: 50%;background-color: #7b6fb3;display: none;transition: all .5s ease;}
#primary-menu ul li.active > a div:after, #primary-menu ul li:hover > a div:after{display:block;}

#page-title {background: transparent;border: none;padding: 0;margin-bottom: 30px;}
/*#page-title .container { background-color: #f8f8fd; height: 40px; background-image: linear-gradient(90deg, #ebeaf873 0%, white 100%); border-radius: 3px; width: fit-content; }*/
#page-title h1 {font-size: 22px;display: none;}
#page-title .breadcrumb {position: relative !important;top: 0 !important;left: auto !important;right: 0 !important;background-color: #f6f8fc8c !important;height: 40px;line-height: 40px;padding: 0 10px !important;width: fit-content !important;margin: 0 !important;}
#page-title .breadcrumb li a {color: #6553bb !important;font-size: 15px;}
body[data-page-id="53ae2838-1a19-4e82-8d1d-94bb7291ff86"] #page-title .breadcrumb li:nth-last-of-type(3) a, #page-title .breadcrumb li:nth-last-of-type(2) a {color: #555 !important;pointer-events: none;}

#content{overflow:unset; border-radius: 30px;margin: auto;padding-bottom: 90px;display: flex;justify-content: center;align-items: center;}
.content-wrap:after {content: '';position: absolute;bottom: 0;right: -10px;z-index: 0;width: 95%;height: 95%;border-radius: 30px;transform: rotate( 1deg);background-color: #7650e0;}
#content .content-wrap {padding: 0;}
#content .content-wrap div > .container {padding: 50px;border-radius: 30px;box-shadow: 0px 1px 51px 0px rgb(1 1 1 / 6%);background-image: linear-gradient(90deg, #ebeaf8 0%, white 100%);z-index: 1;}
body[data-page-id="57830c17-cdaa-4a9d-a57a-15811662d838"] #content .content-wrap div > .container, body[data-page-id="1c068e34-cda9-4f61-a049-1a034f1ad5bf"] #content .content-wrap div > .container{padding: 85px 120px 80px;}

#footer {background-color: transparent;margin-top: 45px;position: fixed;bottom: 10px;width: 100%;border-top: unset;}
#footer .footer-widgets-wrap {padding: 0;}
#copyrights {padding: 0 0;background-color: transparent;padding: 5px 0;}
#copyrights .content-txt p {margin-bottom: 0;color: #737373;font-size: 14px;}
#copyrights a {padding: 0 10px;}
#copyrights a{color: #6553bbe6 !important;transition: color .2s ease-in-out;}
#copyrights a:nth-of-type(2):before{display: none;}
#copyrights a:hover{color:#faa61a;}
 .ltr #copyrights a {float: right;}
 .rtl #copyrights a {float: left;}
.ltr #copyrights a.privacy-policy {border-right: 1px solid #e5e5e5;}
.rtl #copyrights a.privacy-policy {border-left: 1px solid #e5e5e5;}
/************************ Sounds-view Page ***********************/
.words-blk .desc{text-align:center;}
.words-blk .desc i {color: #7b6fb3;font-size: 20px;border: 1px solid #dfd3ff;border-radius: 50%;width: 35px;height: 35px;display: inline-flex;justify-content: center;align-items: center;margin-left: 5px;}
.words-blk .desc span {font-weight: bold;font-size: 20px;color: #555;}
.words-blk .words-list {display: flex;flex-wrap: wrap;}
.words-blk .word-box {flex-grow: 1;width: calc(25% - 20px);border: 1px solid #dfd3ff;border-radius: 3px;margin: 0 10px 15px;padding: 0 15px;text-align: center;height: 60px;display: flex;align-items: center;justify-content: center;font-size: 18px;cursor: pointer;transition: all .3s ease;}
.words-blk .word-box.withImage {flex-direction: column;min-height: 80px;height: auto;}
.words-blk .word-box.withImage img {width: 100px;margin: 15px 0;}
.words-blk .word-box.play, .words-blk .word-box:hover{background-color: #dfd3ff;}
.words-blk .word-box.pause {background-color: #d2d2d2;}
.words-blk .word-box.stop {cursor: not-allowed;pointer-events: none;}
.words-blk .word-box .recored-sound {display: none;}
/***********************************************/
.btns-control {position: fixed;top: 50%;right: 0;background-color: #fff;border-radius: 3px;padding: 10px;box-shadow: 1px 1px 10px #00000030;transform: translate(0, -50%);z-index: 10;}
.btns-control .btn-action.clicked {cursor: not-allowed;}
.btns-control div:not(.btn-action) {text-align: center;padding: 10px;border-radius: 3px;font-size: 18px;cursor: pointer;}
.btns-control div span {display: block;}
.btns-control div.play, .btns-control div.playAll {background-color: #afc5fd;margin-bottom: 15px;}
.btns-control div.repeat, .btns-control div.Pause{background-color: #f9d695;margin-bottom: 15px;}
.btns-control div.stop{background-color: #f99c95;}
.btns-control .clicked .Pause, .btns-control .clicked .playAll {background-color: #d2d2d2;pointer-events: none;}
.btns-control div.play[disabled="disabled"] {pointer-events: none;background-color: #eee;}

.content-img {position: absolute;left: 0;bottom: -30px;z-index: 3;}

.game-quizs .num-quizes {display:none;font-size: 16px;font-weight: bold;text-align: right;}
#progress {position: absolute;top: 45px;left: 0;width: 400px;}
.ltr  #progress{right: 30px;}
.rtl  #progress{left:30px;}
#progress .progress{height: 25px;margin-bottom:0px;background-color: #e9ecef;border-radius: 40px;}
#progress .progress-bar{background-color: #744edc;}
#progress p{text-align: left;position: absolute;top: -30px;} 
.ltr #progress p{left: 0;}
.rtl #progress p{right:0;}
.quiz-blk > h3	{display: none;/* position: absolute;top: 35px;right:30px; */}
.quiz-blk > p{display: none;}
.game-quizs.show .num-quizes {display:block;}
.game-quizs .num-quizes span {color: #89bb4b;}
.game-quizs .quiz-blk:not(:nth-child(2)) {display: none;}
.game-quizs .quiz-blk h4{font-size: 30px;}
.game-quizs .quiz-btns{position: absolute;top: 5px;}
.ltr .game-quizs .quiz-btns {right: 0px;}
.rtl .game-quizs .quiz-btns {left: 0px;}
.game-quizs .quiz-blk:not(:nth-of-type(2)) .play{display:none}
.game-quizs .quiz-blk .play-again {margin-left: 10px;}
.game-quizs .quiz-options:not(.withWord) .word {display: none;}
.game-quizs .quiz-options:not(.withImage) img {display: none;}
.game-quizs .quiz-options .option:not([type='matched']) {display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 0 10px;width: 280px;height: 280px;background-color: #fff;padding-top: 40px;border-radius: 30px;position: relative;border: 2px solid #e9e9e9;}
.game-quizs .quiz-blk .option:not([type='matched']) {cursor: pointer;padding: 15px;/* border: 1px solid #ddd; */margin-bottom: 10px;/* box-shadow: 1px 1px 5px #e2e2e2; */}
.game-quizs .quiz-blk .option input {border: 1px solid #ddd;padding: 20px;font-size: 35px;}
.game-quizs .quiz-blk .option.current input {background-color: #8ebd53;color: #fff;}
.game-quizs .quiz-blk .option label {margin: 0 10px;font-size: 25px;margin-bottom: 0;letter-spacing: 0;}
.game-quizs .quiz-blk .option audio {display:none;}

.result {text-align: center;}
.result p{font-size: 22px;font-weight: bold;color: #8fbe55;}
.result span:not(.grade){margin: 0 5px;font-size: 16px;font-weight: bold;padding: 5px 10px;border-radius: 3px;}
.result span.grade{width: 150px;height: 150px;border-radius: 50%;font-size: 45px;display: flex;justify-content: center;align-items: center;margin: 0 auto 30px;background-color: #046aae;color: #fff;box-shadow: 0 0 10px #4690c1;}
.result span.attempts {background-color: #e8e8e8;}
.result span.right {background-color: #dfebd2;}
.result span.wrong {background-color: #ffd5d5;}
/**** Questions With image ****/
.listenText form {display: flex;flex-wrap: wrap;width: 700px;box-shadow: 1px 1px 13px #d0d0d0;padding: 35px;}
.listenText form div:first-child, .listenText form div:nth-child(2) {width: 100%;margin-bottom: 15px;}
.break {flex-basis: 100%;height: 0;}
.listenText form .audio, .listenText form audio{width: calc(100% - 110px);}
.listenText form audio {margin-left: 15px;/* width: calc(100% - 140px); */margin-top: 5px;}
.listenText form label {font-size: 15px;margin-bottom: 5px;}
.listenText form select, .listenText form textarea{border: 2px solid #b1b1b1;}
.listenText form textarea {height: 120px;font-size:18px;}
.listenText form button{width: 100px;font-size: 16px;}
/**** Questions With video ****/
.game-quizs .quiz-options.withVideo {position: relative;}
.game-quizs .quiz-options.withVideo .option {width: calc(100% - 380px);}
.game-quizs .quiz-options .option.wrong {border: 1px solid #fb0c0c !important;}
.game-quizs .quiz-options .option.correct {border: 1px solid #35b500 !important;}
.game-quizs .quiz-options .option.wrong span, .game-quizs .quiz-options .option.correct span {font-size: 18px;font-weight: bold;}
.game-quizs .quiz-options.withVideo .option video {width: 350px;height:200px;position: absolute;right: 0;top: 50%;margin-top: -100px;}
/**** Questions With Word ****/
/* .game-quizs .withWord .choice .word {display: none;} */
.game-quizs .choice .word {text-align: center;}
.game-quizs .quiz-blk .option input {position: absolute;top: 10px;right: 18px;width: 28px;height: 28px;border-color: #ec6670 !important;background-color: #ec5750;}
.game-quizs .option.current {background-color: #eae9fb !important;}
.game-quizs .option.selected {border:1px solid #337ab7;}
/**** Questions With image ****/
.game-quizs .quiz-options {display: flex;justify-content: center;}
.ltr .game-quizs .quiz-options .option:first-child{margin-left:0;}
.rtl .game-quizs .quiz-options .option:first-child{margin-right:0;}
.game-quizs .quiz-options img {width: 150px;margin-bottom: 40px;}
.game-quizs .quiz-options +.game-btn {text-align: center;}
.game-quizs .repeat {background-color: transparent;color: #046aae;}
.feedback-card {display:none;padding: 10px;box-shadow: 1px 2px 10px #ccc;position: absolute;top: 50%;right: 50%;margin-top: 5px;margin-right: -100px;width: 200px;background-color: #fff;}
.feedback-card .icon{display:flex;}
.feedback-card, .game-quizs .feedback-card .icon{justify-content: center;align-items: center;}
.feedback-card .icon {display: flex;justify-content: center;align-items: center;color: #fff;border-radius: 50%;width: 50px;height: 50px;font-size: 25px;}
.ltr .feedback-card .icon{margin-right: 15px;}
.rtl .feedback-card .icon{margin-left: 15px;}
.feedback-card .correct-icon{background-color: #93C70A;} 
.feedback-card .wrong-icon{background-color: #d44848;}
.feedback-card .title {line-height: 5px;font-size: 20px;}
.feedback-card .title p {margin-bottom: 0;}
.big {animation-name: zoomIn;animation-duration: 1.8s;}

/*** openset Module ***/
.openset-quizs .quiz-blk:not(:first-child), .openset-quizs .quiz-blk .audio, .openset-quizs .quiz-blk .correct-choice {display: none;}
.openset-quizs .quiz-msg {font-size: 25px;margin-top: 40px;}
.openset-quizs .words-blk {display: flex;flex-wrap: wrap;margin: 30px 0;}
.openset-quizs .words-blk > div {display: flex;justify-content: center;align-items: center;flex-grow: 1;width: calc(18% - 10px);height: 90px;background-color: #ffffff;margin-left: 10px;margin-bottom: 15px;border: 1px solid #ddd5f6;border-radius: 3px;cursor: pointer;}
.openset-quizs .words-blk > div p {margin-bottom: 0;font-size: 28px;}
.openset-quizs .openset-quiz-btn {display: flex;justify-content: center;margin-top: 30px;}
.openset-quizs .openset-quiz-btn button {margin-left: 15px;}

.openset-quizs .choice {margin-top: 10px;display: flex;justify-content: center;flex-direction: row-reverse;}
.openset-quizs .choice input{display: none;}
.openset-quizs .choice span{display: inline-flex;justify-content: center;align-items: center;width: 100px;height: 65px;padding: 3px;margin-left: 5px;border: 1px solid #ddd5f6;background-color: #fcfcfe;font-size: 30px;}

.btn-primary:active:hover, .btn-primary:focus, .btn-primary:hover {background-color: #ec5750;border-color: #ec5750;}

@keyframes zoomIn {
    0%   {transform: scale(1,1);}
    50%  {transform: scale(1.2,1.2);}
    100% {transform: scale(1,1);}
}

@media (max-width: 991px){
	#header #primary-menu-trigger {font-size: 24px;top: 12px;}
	#header #primary-menu {position: absolute;right: 0;background-color: #fff;width: 100%;}
	#header #primary-menu ul li.sub-menu ul{box-shadow: unset;position: relative;right: 0;width: 100%;}
	.game-quizs .quiz-blk h4 {font-size: 24px;margin-bottom: 15px;}
	.content-img img {width: 300px;}
}
@media (max-width: 767px){
	#page-title .breadcrumb{height: auto;line-height: unset;}
	#content{padding-bottom: 115px;}
	#copyrights .container {display: flex;flex-direction: column;align-items: center;}
	.rtl #copyrights a.privacy-policy {border-left: none;}
	.game-quizs .quiz-options{flex-direction: column;}
	.game-quizs .quiz-options .option:not([type='matched']){margin: 0 0 10px;width: 100%;height: auto;border-radius: 5px;}
	.game-quizs .quiz-blk h4 {font-size: 20px;}
	.game-quizs .quiz-options img {width: 100px;margin-bottom: 0;}
	.game-quizs .quiz-blk .option input{width: 20px;height: 20px;}
	.game-quizs .quiz-blk .option label{font-size: 20px;}
}
@media (max-width: 767px) and (min-width: 480px){
	.words-blk .word-box {width: calc(33.3% - 20px);}
}
@media (max-width: 479px) and (min-width: 320px){
	.words-blk .word-box {width: calc(50% - 20px);}
	#progress{width: 250px;}
	body[data-page-id="57830c17-cdaa-4a9d-a57a-15811662d838"] #content .content-wrap div > .container, 
	body[data-page-id="1c068e34-cda9-4f61-a049-1a034f1ad5bf"] #content .content-wrap div > .container {padding: 85px 60px 80px;}
	.content-img img {width: 250px;}
	.btns-control div:not(.btn-action){padding: 5px;font-size: 14px;}
}