@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
:root{
    --primary: #007773;
    --secondary: #0BDED6;
    --gray-text:#52565C;
    --gray-bg:#F1F2F8;
}
*{font-family: "Cairo", sans-serif;}
.primary-bg,.primary-bg:hover{background-color: var(--primary);}
.primary-color{color: var(--primary);}
.secondary-bg,.secondary-bg:hover, .secondary-bg:active{background-color: var(--secondary) !important;}
.secondary-color{color: var(--secondary);}
.section_title{font-size: 47px;}
.form-check-input:checked {background-color: var(--secondary);border-color: var(--secondary);}
.form-control:focus{box-shadow: 0 0 0 0;border: 1px solid var(--secondary);}

.header_layout{top: 0;left: 0;z-index: 0;}
.navbar .nav_content{z-index: 1;}

.navbar,.hero_sec{background-color: var(--primary);}
.nav-hero a, .navbar a{z-index: 2;position: relative;}
.nav-hero{background-color: #E9ECF4;}
.nav-hero li a span{font-size: 12px;padding: 1px 7px;top: -5px;right: -9px;box-shadow: 0 0 1px #9d9d9d;}
.navbar-brand img{height: 34px;}
/* .navbar-brand img{height: 120px;} */
.navbar .nav-link{font-size: 16px;color: #fff;}
.navbar .nav-link.book-store:hover{cursor: pointer;background-color: #fff;color: #000;}
.navbar .active{color: var(--secondary) !important;}

.hero_sec .row{position: relative;}
/* .hero_sec .img img{margin-top: 4rem;} */
.hero_sec p{font-size: 20px;line-height: 46px;}
.hero_sec .img-line{bottom: -6px;right:0;}
.hero_sec .content{color: #CFD3D6;}
.hero_sec .search i{width: 40px;font-size: 20px;top: 0;}

.statistics .img{width: 60px;}

.popular-courses p{color: #222222;}
.popular-courses .card_category{top: 18px;left: 18px;z-index: 99;background-color: #dbfffe8c;}
.popular-courses article p,
.nominated-courses article p
{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 100%;}
.popular-courses .card__article,
.nominated-courses .card__article{background-color: #fff;}

.categories .data{border-radius: 20px;}
.categories i{color: #999999;}
.categories .link-arrow i{color: var(--secondary);transform: rotate(-50deg);cursor: pointer;padding: 10px 12px;border-radius: 50%;background-color: #DBFFFE;}
.categories .data:hover{border: 1px solid var(--secondary);box-shadow: 0 0 15px #0bded696;}
.categories .data:hover .link-arrow i{background-color: var(--secondary);color: #fff;}

.courses .swiper-button-prev {left: 30%;transform: translateX(-50%);bottom: 3px;}
.courses .swiper-button-next {right: 30%;transform: translateX(-50%);bottom: 3px;}
.courses .card__content{padding: 30px 20px;}
.courses .swiper-button-next .fa-angle-right, .courses .swiper-button-prev i {bottom: 0;position: absolute;}
.courses .pencil {top: 5%;width: 70px;height: 70px;left: 55%;}
.courses .loop {top: 0%;width: 70px;height: 70px;left: 37%;}
.courses .lamp {top: 8%;width: 70px;height: 70px;left: 5%;}
.courses .pc {top: 35%;width: 70px;height: 70px;left: 5%;}
.courses .map {bottom: 6%;width: 85px;height: 85px;left: 9%;}
.courses article p{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 100%;}
.courses .card_category{top: 18px;left: 18px;z-index: 99;background-color: #dbfffe8c;}

.join_us .title{font-size: 35px;}

footer{overflow: hidden;}
footer .logo{margin: 0 0 22px;}
footer .logo img{width: 280px;}
footer .social a{height: 40px;width: 40px;}

/* ============== login / signup ============== */
.welcome{height: 100vh;background-image: url(../img/bg.jfif);background-size: 100% 100%;}
/* .register:is(.login,.sign_step1,.sign_step2,.sign_step3) .welcome{height: 100%;} */
.welcome .logo{z-index: 1;top: 0;right: 0;max-width: 250px;}
.welcome .layout{top: 0;left: 0;height: 100%;width: 100%;background-color: #007773de;z-index: 0;}
.welcome .data{z-index: 1;}
.register .info{border-radius: 20px;}
.register .info .polygon {
  width: 60px;
  aspect-ratio: 1;
  clip-path: polygon(79.39% 90.45%,20.61% 90.45%,2.45% 34.55%,50% 0%,97.55% 34.55%);
  background-color: #F5FFFF;
  color: var(--secondary);
  transition: all .3s ease-in-out;
}
.register .info:hover{background-color: #F5FFFF;border: 1px solid var(--secondary) !important;}
.register .info:hover a{display: block !important;}
.register .info:hover .polygon{background-color: var(--secondary);color: #fff;}
.register :is(p,label){color: #696F79;}
.register input:focus{border: 1px solid var(--secondary);box-shadow: 1px 2px 8px #c5c5c5;}

.register .phone_feild{display: none;}
.register .form .toggle{background-color: #F1EFEF;border-radius: 20px;}
.register .form .toggle button{color: var(--secondary);}
.register .form .toggle :is(button:focus-visible, button:active){color: var(--secondary);background-color: #F1EFEF;border: 0;}
.register .form .toggle .active{color:#fff;background-color: var(--secondary);border-radius: 20px;border: 0;}

.register :is(.verification_number,.timer){padding: 0 112px;}
.register .verification_number input{color: #75797C;border: 0;border-bottom: 1px solid #ABACAC;border-radius: 0;font-size: 34px;}
.register .verification_number input:focus{box-shadow: 0 0 0;}
.register .bootstrap-select .dropdown-toggle .filter-option{text-align: right;}
.register .bootstrap-select>.dropdown-toggle.bs-placeholder{color: #000;background: #fff;border: 1px solid #ddd;padding: 15px 9px;}
.register .dropdown-item{text-align: right;}

.register.sign_step1 .iti{width: 100%;}
.register.sign_step1 .iti__country-list{position: relative;}
.register.sign_step1 .iti__selected-flag{justify-content: end;}
.register.sign_step1 .iti__arrow{margin-right: 10px;}
.register.sign_step1 .iti--allow-dropdown input{padding-left: 70px !important;}
.register.sign_step3 .img_box{background-color: #DFFFFF;width: 100%;padding: 30px;}
.register.sign_step3 .choose_img input{width: 115px;height: 43px;opacity: 0;}
.register.sign_step3 .choose_img div{border: 2px solid var(--secondary);width: 115px;height: 43px;}
.register.sign_step3 .choose_img div:hover{background-color:var(--secondary);color: #fff;}
.register.sign-completed .img-back{width: 203px;height: 203px;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: -1;}

.overSelect {left: 0;right: 0;top: 0;bottom: 0;}
.checkboxes {display: none;border: 1px #dadada solid;}
.checkboxes label {display: block;}
.checkboxes label:hover {background-color: #ececec}

/* ============ policies =================== */
.header {background-color: var(--primary);padding: 100px 0;background-image: url(../images/store_bd.png);}
.header h1{font-size: 70px;}
.header p{font-size: 20px;}

.policies{background-color: #f4f4f4a6;}
.policy-card{box-shadow: 0 1px 8px #ccccccbd;padding: 25px 20px 10px;}
.policy-card .btn{background-color: orange !important;border: 0;}

/* ============== books =============== */
section.books .hero_sec p{font-size: 35px;}
.books_list .card__image img{border-radius: 20px;}
.books_list .cd-img{bottom: 16px;right: 26px;z-index: 99;width: 65px;}
.books_list .btn{border: 1px solid var(--secondary);}
.books_list .btn:hover{background-color: var(--secondary);color: #fff;}
.books_list .desc{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 100%;}
.books_list li{font-size: 20px;}
.books_list .reading{background-color: #CFFFFD;}

/* ============== about =============== */
section.about {overflow-x: hidden;}
section.about .hero_sec .img{height: 400px;}
section.about .hero_sec .content{line-height: 50px;font-size: 18px;width: 80%;}
section.about :is(.achievementSec,.aim,.messages) h2 img{bottom: -19px;right: 0;}
section.about :is(.achievement,.team,.aim, .messages) h2 img,
section.about .aim{background-image: url(../img/aim-bg.svg);background-size: 100%;}

section.about .achievementSec .info{font-size: 14px;}
section.about .achievementSec .info h3{font-size: 20px;}
section.about .achievementSec .info img{width: 35px;}

section.about .que{background-color: #DBFFFE;}
section.about .que ul{border-bottom: 1px solid #cdd8ea;padding-bottom: 18px;margin: 0 30px 18px 70px;}
section.about .queText{direction: ltr;}
section.about .queText p{direction: rtl;}
section.about .collapseQue{color: #1B3764;}
section.about .collapse .card-body {background-color: transparent;border: 0;color: #969AA0;}
section.about li::marker{color: var(--secondary);}

/* ================= courses =============== */
section.coursesPage .hero_sec .info .content{line-height: 2.8;font-size: 18px;}
section.coursesPage .filter :is(.category,.trainers,.rating,.coursesFilter,.prices, .dateFilter){box-shadow: 0 0 5px #d1d1d1;border-radius: 12px !important;}
section.coursesPage .filter .category p{font-size: 18px;color: var(--gray-text);}
section.coursesPage .filter .category span{font-size: 12px;color: #796F6F;}
section.coursesPage .filter .trainers ul{height: 160px;overflow-y: scroll;}
section.coursesPage .filter .trainers ul::-webkit-scrollbar {width: 5px;}
section.coursesPage .filter .trainers ul::-webkit-scrollbar-track {background: hsl(0, 0%, 92%);width: 4px; }
section.coursesPage .filter .trainers ul::-webkit-scrollbar-thumb {background-color: #C4C4C4;border-radius: 20px; border: 3px solid #C4C4C4;}
section.coursesPage .select2-container--default .select2-selection--single{border: 1px solid var(--secondary);}
section.coursesPage .select2-container--default .select2-selection--single {height: 40px;display: flex;align-items: center;}
section.coursesPage article p{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 100%;}
section.coursesPage .course_content h3 img{bottom: -19px;right: 0;}
section.coursesPage .cardShape{background-color: #D8D8D8;cursor: pointer;}
section.coursesPage .cardShape.active{background-color: var(--secondary);}
section.coursesPage #paginationCard .card_category{top: 18px;left: 18px;z-index: 99;background-color: #dbfffe8c;}
section.coursesPage #paginationCard .card_category{top: 18px;left: 18px;z-index: 99;background-color: #dbfffe8c;}
section.coursesPage label{cursor: pointer;}
.course-content-page :is(.lec-title,.content-lec h3)::before{    
  content: '';
  display: block;
  position: absolute;
  width: 130px;
  height: 3px;
  bottom: -20px;
  right: 0;
  background-color: var(--secondary);
  box-shadow: 0 0 3px var(--secondary);
}

.course-content-page :is(.content-lec h3)::before {
  width: 55px;
  bottom: -10px;
}


.trainers .card_category{top: 18px;left: 18px;z-index: 99;background-color: #dbfffe8c;}
.trainers{background-color: var(--gray-bg);}

/* =================== contact =============== */
.contact-us .icons img{background-color: #DBFFFE;}
.contact-us li{position: relative;}
.contact-us .social a{width: 40px;height: 40px;transition: all .3s ease-in-out;}
.contact-us .social a:hover{background-color: #fff;color: var(--primary) !important;}


/* =============== book_details ============== */
.book_details .advantages{background-color: #CFFFFD;}
.book_details .advantages img{width: 40px;height: 40px;}
.book_details .bookImg{max-width: 300px;}

/*********** blogs ************ */
.blogs .reset_btn:hover{background-color: var(--secondary);color: #fff;}
.blogs .card-text{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 100%;}

.blog-details .play-icon{top:50%; left: 50%;transform: translate(-50%, -50%); width: 55px; height: 55px; background-color: #292929c9;}
.blog-details .card{overflow: hidden;}
.blog-details .card img{transition: all .3s ease-in-out;}
.blog-details .card:hover .card-img-top{transform: scale(1.06) rotate(0deg);}
.blog-details .header img{border-radius: 24px;max-height: 400px;}
/* ============== cart =============== */
.cartPage :is(.pay_methods,.payment, .course_content, .course_price){border-radius: 24px;}
.cartPage .select2-container--default .select2-selection--single{height: 40px;padding: 3px 0;border: 1px solid #ddd;}
.cartPage .visaForm label {cursor: pointer;}
.cartPage .visaForm input[type="radio"]:checked + label {border: 2px solid var(--secondary) !important;}
.cartPage .img_box{border: 2px dashed #000;width: 80%;height: 150px;}
.cartPage .choose_img input{width: 115px;height: 43px;opacity: 0;}
.cartPage .course_content p.desc{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 100%;}
.cartPage .pay_methods label{width: 110px;height: 55px;display: flex; justify-content: center;align-items: center;cursor: pointer;}
.course-content-page .nav-tabs{border-bottom: 3px solid #ddd; color: #000;}
.course-content-page .nav-tabs .active span{color: var(--primary) !important;}
.accordion-button:focus{box-shadow: 0 0 0;}
.accordion-button::after, .accordion-button:not(.collapsed)::after{margin: 0 auto 0 0;}
.course-content-page .play-icon{cursor: pointer;top:50%; left: 50%;transform: translate(-50%, -50%); width: 55px; height: 55px; background-color: #292929c9;}
.course-content-page .video_parent{height: 300px;}

/* ================= questions =============== */
:is(.questions,.course-content-page) .users-list .avatar{width: 2.375rem;height: 2.375rem;margin-left: -1.4rem;}
:is(.questions,.course-content-page) .followers_number p{line-height: normal;font-size: 16px;}
:is(.questions,.course-content-page) .hero_sec .title{font-size: 50px;}
:is(.questions,.course-content-page) .hero_sec .info{z-index: 1;}
.questions p{color: #919191;font-size: 20px;}
.questions .que_box{border-right:14px solid #E8E8E8}
.questions .que_box:hover, .que_box.active{border-right:14px solid var(--secondary)}
.questions .que_answer label{color: #222;background-color: #F3F3F3;cursor: pointer;}
.questions input[type="radio"]:checked + label {background-color: var(--secondary);color: #fff ;}

ol.que_answer {list-style: none;}
ol.que_answer > li::before {
  display: inline-block;
  width: 1em;
  font-weight: bold;
  text-align: center;
  direction: ltr;
  margin: 0 8px;
}
ol.que_answer > li:nth-child(1)::before  { content: "أ"; }
ol.que_answer > li:nth-child(2)::before  { content: "ب"; }
ol.que_answer > li:nth-child(3)::before  { content: "جـ"; }
ol.que_answer > li:nth-child(4)::before  { content: "د"; }
ol.que_answer > li:nth-child(5)::before  { content: "هـ"; }
ol.que_answer > li:nth-child(6)::before  { content: "و"; }
ol.que_answer > li:nth-child(7)::before  { content: "ز"; }
ol.que_answer > li:nth-child(8)::before  { content: "حـ"; }
ol.que_answer > li:nth-child(9)::before  { content: "ط"; }
ol.que_answer > li:nth-child(10)::before { content: "ى"; }
ol.que_answer > li:nth-child(11)::before { content: "كـ"; }
ol.que_answer > li:nth-child(12)::before { content: "ل"; }
ol.que_answer > li:nth-child(13)::before { content: "مـ"; }
ol.que_answer > li:nth-child(14)::before { content: "ن"; }
ol.que_answer > li:nth-child(15)::before { content: "س"; }
ol.que_answer > li:nth-child(16)::before { content: "عـ"; }
ol.que_answer > li:nth-child(17)::before { content: "ف"; }
ol.que_answer > li:nth-child(18)::before { content: "صـ"; }
ol.que_answer > li:nth-child(19)::before { content: "ق"; }
ol.que_answer > li:nth-child(20)::before { content: "ر"; }
ol.que_answer > li:nth-child(21)::before { content: "ش"; }
ol.que_answer > li:nth-child(22)::before { content: "ت"; }
ol.que_answer > li:nth-child(23)::before { content: "ث"; }
ol.que_answer > li:nth-child(24)::before { content: "خـ"; }
ol.que_answer > li:nth-child(25)::before { content: "ذ"; }
ol.que_answer > li:nth-child(26)::before { content: "ضـ"; }
ol.que_answer > li:nth-child(27)::before { content: "ظ"; }
ol.que_answer > li:nth-child(28)::before { content: "غـ"; }


/* ======================================= */
.statistics,.categories{background-color: var(--gray-bg);}
:is(.popular-courses,.courses,.coursesPage,.books_list,.nominated-courses) .link-arrow{background-color: #DBFFFE !important;color: var(--secondary);padding: 10px 16px;transform: rotate(50deg);cursor: pointer;}
:is(.popular-courses,.courses,.coursesPage,.books_list,.nominated-courses) .link-arrow:hover{background-color: var(--secondary) !important;color: #fff;}
.courses,section.about .team{background-color: #E9FFFE;}
:is(.statistics,.achievement,section.about .messages) p{color: var(--gray-text);font-size: 18px;}
/* height: 10px !important; */
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {top: 9px}
#navs-justified-about :is(h3,.title)::before {color: var(--secondary);content: "—";margin: 0 10px;}
#navs-justified-rating .comment img{cursor: pointer;}



/* ============ filter by price ============= */
.price-filter {width: 300px;}
.price-filter .slider-labels {margin-top: 10px;}

/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
 .noUi-target,.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.noUi-target {
  position: relative;
  direction: ltr;
}

.noUi-base {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
/* Fix 401 */
}

.noUi-origin {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
}

.noUi-handle {
  position: relative;
  z-index: 1;
}

.noUi-stacking .noUi-handle {
/* This class is applied to the lower origin when
   its values is > 50%. */
  z-index: 10;
}

.noUi-state-tap .noUi-origin {
  -webkit-transition: left 0.3s,top .3s;
  transition: left 0.3s,top .3s;
}

.noUi-state-drag * {
  cursor: inherit !important;
}

/* Painting and performance;
 * Browsers can paint handles in their own layer.
 */
.noUi-base,.noUi-handle {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

/* Slider size and handle placement;
 */
.noUi-horizontal {
  height: 4px;
}

.noUi-horizontal .noUi-handle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  left: -7px;
  top: -7px;
  background-color: var(--secondary);
}

/* price filter Styling;*/
.noUi-background {
  background: #D6D7D9;
}

.noUi-connect {
  background: var(--secondary);
  -webkit-transition: background 450ms;
  transition: background 450ms;
}

.noUi-origin {
  border-radius: 2px;
}

.noUi-target {
  border-radius: 2px;
}

/* Handles and cursors;
 */
.noUi-draggable {
  cursor: w-resize;
}

.noUi-vertical .noUi-draggable {
  cursor: n-resize;
}

.noUi-handle {
  cursor: default;
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important;
}

.noUi-handle:active {
  border: 8px solid #345DBB;
  border: 8px solid rgba(53,93,187,0.38);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  left: -14px;
  top: -14px;
}

/* Disabled state;
 */
[disabled].noUi-connect,[disabled] .noUi-connect {
  background: #B8B8B8;
}

[disabled].noUi-origin,[disabled] .noUi-handle {
  cursor: not-allowed;
}



/* ============== pagination =============== */
#paginationCard .card_pagination{display: none;}
#pagination li{margin: 0 5px;}
#pagination li a{
  border-radius: 50%;
  width: 32px;
  text-align: center;
  font-size: 12px;
  background-color: #DFFFFF;
  border: 0;
  color: var(--secondary);
  font-weight: bold;
}
#pagination li a:focus{box-shadow: 0 0 0;}
#pagination .page-item .active {background-color: var(--secondary);color: #fff;width: 40px;font-size: 18px;}
:is(#nextPageBtn, #prevPageBtn) span{font-size: 20px;color: var(--secondary);}
#pagination li a:is(#nextPageBtn, #prevPageBtn){background-color: transparent;}
#nextPageBtn, #prevPageBtn{font-size: 20px;}

/*================== swipper =============*/
.card__container {padding-bottom: 2rem;} 
.card__content {margin-inline: 2rem;border-radius: 1.25rem;overflow: hidden; padding: 30px 10px; margin: 0;}
.card__article {width: 300px;border-radius: 1.25rem;overflow: hidden;}
.card__image {position: relative;background-color: var(--first-color-light);padding-top: 1.5rem;margin-bottom: -.75rem;overflow: hidden;}
.card__data {background-color: var(--container-color);padding: 1.5rem 2rem;border-radius: 1rem;position: relative;z-index: 10;}
.card__img {width: 180px;margin: 0 auto;position: relative;z-index: 5; }
.card__shadow {
  width: 200px;
  height: 200px;
  background-color: var(--first-color-alt);
  border-radius: 50%;
  position: absolute;
  top: 3.75rem;
  left: 0;
  right: 0;
  margin-inline: auto;
  filter: blur(45px);
}
.card__description {font-weight: 500;margin-bottom: 1.75rem;}
/* Swiper class */
.swiper-button-prev:after,.swiper-button-next:after {content: "";}
.swiper-button-prev,.swiper-button-next {width: initial;height: initial;font-size: 2rem;color: var(--second-color);/* display: none; */}
.swiper-button-prev {left: 50px;}
.swiper-button-next {right: 50px;}
.swiper-pagination-bullet {background-color: #CFD3D6;opacity: 1;}
.swiper-pagination-bullet-active {background-color: var(--secondary);}
.swiper-button-next .fa-angle-right, .swiper-button-prev i{
    font-size: 18px;
    background-color: #fff;
    box-shadow: 0px 1px 2px #979797;
    border-radius: 50%;
    padding: 9px 12px;
}
.swiper-button-next i:hover, .swiper-button-prev i:hover {background-color: var(--secondary);color: #fff;}

img.card__img.img-fluid.w-100{
  height: 210px !important;
}