@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap');
@import url(all.min.css);
@import url(../fonts/bold/style.css);
@import url(../fonts/duotone/style.css);
@import url(../fonts/fill/style.css);
@import url(../fonts/light/style.css);
@import url(../fonts/regular/style.css);
@import url(../fonts/thin/style.css);
@import url(website-font-akhand.css);
* {
  padding: 0px;
  margin: 0px;
  font-family: 'Vazirmatn';
  outline: none !important;
  font-size: 14px;
}

:root{
--white:#fff;
--purple:#7a5df5;
--blue:#211964;
--blue-sec:#282661;
--cian:#4c80b6;
--green:#448a9c ;
--gold:#f8e7b7;
--dark-gold:#f5bd19;

--light-gold:#E9DFBB;
--red:#df7753;
--gray:#595A5C;
--dark-gray:#1d2630;
--light-gray:#F1F3F4;
--middle-gray:#9E9E9E;
--dark-blue: #1f1b35;
--light-blue:#F0F5F9;
--pure-blue:#4d7ccf;
}



ul{
  padding: 0px;
}
a,
a:hover {
  color: inherit;
  text-decoration: none !important;
}

li {
  list-style: none;
}

i, b {
  font-size: inherit;
  color: inherit;
}

.dropdown-menu {
  border: none !important;
}
/* =============colors=========== */
.text-white{
color: var(--white);
}
.text-purple{
 color: var(--purple); 
}

.text-blue{
  color: var(--blue);
}
.text-cian{
  color: var(--cian);
}
.text-green{
  color: var(--green);
}
.text-gold{
  color: var(--gold);
}
.text-red{
  color: var(--red);
}
.text-gray{
  color: var(--gray);
}
.text-middle-gray{
    color: var(--middle-gray);
}
.text-dark-gray{
  color: var(--dark-gray);
}
.text-light-gray{
  color: var(--light-gray);
}



/* =============colors=========== */
.bg-white{
background-color: var(--white);
}
.bg-purple{
 background-color: var(--purple);
}
.bg-blue{
  background-color: var(--blue);
}
.bg-cian{
  background-color: var(--cian);
}
.bg-green{
  background-color: var(--green);
}
.bg-gold{
  background-color: var(--gold);
}
.bg-red{
  background-color: var(--red);
}
.bg-gray{
  background-color: var(--gray);
}
.bg-dark-gray{
  background-color: var(--dark-gray);
}
.bg-light-gray{
  background-color: var(--light-gray);
}
.bg-light-blue{
  background-color: var(--light-blue);
}
.dark .dropdown-menu{
  background-color: var(--dark-blue);
}
/* ==============font size=========== */
.font-size-8 {
  font-size: 8px !important;
}
.font-size-10 {
  font-size: 10px !important;
}

.font-size-11 {
  font-size: 11px !important;
}

.font-size-12 {
  font-size: 12px !important;
}

.font-size-13 {
  font-size: 13px !important;
}

.font-size-14 {
  font-size: 14px !important;
}

.font-size-15 {
  font-size: 15px !important;
}

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

.font-size-17 {
  font-size: 17px !important;
}

.font-size-18 {
  font-size: 18px !important;
}

.font-size-19 {
  font-size: 19px !important;
}

.font-size-20 {
  font-size: 20px !important;
}
.font-size-22 {
  font-size: 22px !important;
}
.font-size-24 {
  font-size: 24px !important;
}
.font-size-25 {
  font-size: 25px !important;
}
.font-size-26 {
  font-size: 26px !important;
}
.font-size-30{
  font-size: 30px !important;
}
.font-size-30{
  font-size: 30px !important;
}
/* ==============status=========== */
.btn-soft-warning {
  color: var(--dark-gold) !important;
  background-color: rgba(248, 231, 183, .5);
  transition: .5;
}
.btn-soft-warning:hover {
    background-color: rgba(248, 231, 183, 1);

}
.btn-soft-success {
  color: var(--green);
  background-color: rgba(68, 138, 156, 0.18);
}
.btn-soft-green {
  color:#82b989;
  background-color: rgba(130, 185, 137, 0.1);

}
.btn-soft-standard {
  color: var(--purple);
  background-color: rgba(122, 93, 245, 0.1);
}


.btn-soft-info {
  color: var(--blue);
  background-color: rgba(33, 25, 100, .1);
}

.btn-soft-primary {
  color: var(--cian);
  background-color: var(--light-blue);
}

.btn-soft-danger {
      background: #feeceb;
    color: var(--red);
}
.bg-primary{
background-color: var(--cian);
}
.btn-link, .btn-hover-soft-warning, .btn-hover-soft-success, .btn-hover-soft-standard, .btn-hover-soft-info{
  background-color: transparent;
}
.btn-hover-soft-warning:hover {
  color: var(--gold);
  background-color: rgba(241, 180, 76, 0.18);
}
.btn-hover-soft-success:hover {
  color: #34c38f;
  background-color: rgba(52, 195, 143, 0.18);
}
.btn-hover-soft-standard:hover {
  color: var(--purple);
  background-color: rgba(32, 34, 131, 0.1);
}
.btn-hover-soft-info:hover {
  color: #50a5f1;
  background-color: rgba(80, 165, 241, .18);
}
.btn-warning {
    color: var(--white) !important;
    background-color: var(--gold)  !important;
    border-color: var(--gold);
}
.btn-standard {
    color: var(--white) !important;
    background-color: var(--purple);
    border-color: var(--purple);
    transition: .5s;
}
.btn-standard:hover {
      background-color: var(--blue);
    border-color: var(--blue);
}

/* ==============modal=========== */

.modal-sm {
  max-width: 350px;
}

.modal-lg {
  max-width: 700px;
}

.modal-xl {
  max-width: 850px;
}

.modal-fullscreen {
  max-width: 100%;
}
.modal-content{
  border: none;
  border-radius: 15px;
  box-shadow: 3px 3px 5px #6b6b6b;
}

/* ==============like=========== */

  .btn-like-services input {
      display: none;
  }

  .btn-like-services{
    display: inline-block;
    cursor: pointer;
  }

  .btn-like-services  label {
      border: none;
      padding: 0px;
      font: inherit;
      background: var(--light-blue);
      width: 38px;
      height: 38px;
      border-radius: 10px;
      color: var(--blue);
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
  }
    .btn-like-services  label .ph-fill{
      display: none;
    }
  .btn-like-services input:checked ~ label .ph-bold{
    display: none;
  }
  .btn-like-services input:checked ~ label .ph-fill{
    display: inline-block;
  }
/* ==============scrollbar=========== */

::-webkit-scrollbar {
  width: 4px;      
  height: 2px;     
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb:window-inactive {
  background-color: rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  -webkit-box-shadow: black;
  -webkit-transition: all 300ms ease-in-out;
}

::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.2);
}


.check-list-icon{
  background: #8c8ce6;
  background: linear-gradient(90deg,rgba(140, 140, 230, 1) 0%, rgba(122, 93, 245, 1) 100%);
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 50%;
  font-size: 5px;
  text-shadow: 2px 2px 2px var(--light-gray);
}


/* The Loader */
/* ==============preloader=========== */

#preloader {
  height: 100%;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999999999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #fefcfe;
}
.loading-div{
  width: 350px;
  height: 350px;
  background-image: url(../images/loading.gif);
  background-size: 100% 100%;
}



@keyframes spinner {
  to {
    transform: rotateZ(360deg)
  }
}
/* ============btn-sys============ */

.btn-outline-sys {
  position: relative;
  padding: 8px;
  min-width: 120px;
  text-align: left;
  display: inline-block;
  font-size: 12px;
  color: var(--blue) !important;
  border-radius: 10px;
  border: 1px solid var(--blue);
  transition: .5s;
  background-color: var(--white);
  background-color: var(--light-blue);

}

.btn-outline-sys:lang(ar) {
  /* padding: 8px 10px 8px 36px; */
  text-align: right;
}

.btn-outline-sys:hover {
background-color: rgb(207, 229, 247)

}


/* 
.btn-outline-sys:hover img {
  filter: brightness(0) saturate(100%) invert(97%) sepia(8%) saturate(6368%) hue-rotate(320deg) brightness(93%) contrast(92%);

} */

.reflection-btn img,  .reflection-btn i{
  transform: scaleX(1);
}

.reflection-btn img:lang(ar), .reflection-btn:lang(ar) i{
  transform: scaleX(-1);
}


.btn-outline-sys-without-icon {
  position: relative;
  padding: 8px 10px;
  text-align: center;
  display: inline-block;
  font-size: 12px;
  color: var(--blue);
  border-radius: 16px;
  border: 1px solid var(--blue);
  transition: .5s;
  background-color: var(--white);
  transition: .5s;
}

.btn-outline-sys-without-icon:hover {
  background-color: var(--blue);
  color: var(--white);
}

.btn-with-color{
  background-color: var(--purple);
  padding: 10px 10px;
  border-radius: 35px;
  color: var(--white) !important;
  transition: .5s;
  font-size: 12px;
}
.btn-with-color img{
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7474%) hue-rotate(315deg) brightness(96%) contrast(96%);

}

.btn-with-color:hover{
  background-color: var(--blue);

  filter: none;
}
.btn-with-color:hover img{
  filter:none

}

/* ===============banner============== */
.banner-sec{
 background: #EBF6FF;
 background: linear-gradient(52deg,rgba(235, 246, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
 /* margin-top: 85px; */
 margin-bottom: 40px;
}
.caption-slider {
    padding: 20px 0px;
    position: relative;
    z-index: 4;
    height: calc(100vh - 85px);
    max-width: 500px;
}
.content-banner{height: calc(100vh - 85px);}
@media (max-width:1199px) {
  /* .content-banner{height: auto;} */

}
.container-all-banner{
 position: relative;
 z-index: 4;
}
.caption-slider-title{font-size: clamp(30px, 3vw, 40px);text-shadow: 5px 5px 5px #131313;}
.text-desc-slider{
  font-size: clamp(15px, 2vw, 20px)
}

.overlay-div-persons {
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: 1;
  width: 100%;
  height: 15%;
  transition: 1s;
background: #ffffff;
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
display: none;
}
.img-banner{
  background-size: cover;

}
.btn-slider{
  background-color: rgba(255, 255, 255, .2);
  border: 1px solid #fff;
  padding: 10px;
  border-radius: 10px;
  color: #fff !important;
  display: inline-block;
  min-width: 100px;
  transition: .5s;
  /* font-size: 16px; */
}
.btn-slider:hover{
  background-color: var(--purple);
  border: 1px solid var(--purple);
}
/* .tab-1{
  background-image: url(../images/banner/student-blur-en.png);
}
.tab-2{
  background-image: url(../images/banner/parent-blur-en.png);
}
.tab-3{
  background-image: url(../images/banner/master-blur-en.png);
}
.tab-4{
  background-image: url(../images/banner/graduated-blur-en.png);
} */

.tab-1:lang(ar){
  background-image: url(../images/banner/student-blur.png);
}
.tab-2:lang(ar){
  background-image: url(../images/banner/parent-blur.png);
}
.tab-3:lang(ar){
  background-image: url(../images/banner/master-blur.png);
}
.tab-4:lang(ar){
  background-image: url(../images/banner/graduated-blur.png);
}

/* --------filter slider--------- */
.container-filter-event{
  background-color: var(--light-blue);
  padding: 9px 10px;
  border-radius: 38px;
  display: inline-block;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
@media (max-width:991px){
  .container-filter-event{

  margin-bottom: 20px;
}
}

/* .tab-event{
  background-color: transparent;
  border: none;
  border-radius: 35px;
  color: var(--blue);
  transition: .5s;
  font-size: 14px;
  padding: 14px 15px;
  cursor: pointer;
  display: inline-block;
  font-weight: bolder;
}
@media (max-width:767px){
  .tab-event{
  font-size: 12px;
  }
  .events-inner-sec{
    background-size: cover;
  }
}
@media (max-width:450px){
  .tab-event{
  padding: 14px 8px;
  }
}
.tab-event img{
  position: relative;
  top: -2px;
}

.tab-event.tab-active{
  background-color: var(--purple);
  color: #fff;
  cursor: pointer;
}
.tab-event.tab-active img{
filter: brightness(0) saturate(100%) invert(99%) sepia(4%) saturate(0%) hue-rotate(312deg) brightness(116%) contrast(100%);
} */
/* =============slider============ */
.tabs-banner{
  display: none;
  padding: 30px 15px 0px 15px;
}
.content-text-slider{
background-color: var(--white);
  position: relative;
  padding: 20px;
  border-radius: 20px;
  margin: 10px;
}

.tags-slider{position: absolute;bottom: 5px;width: 100%;max-height: 75px;overflow: hidden;}
.container-img-slider{
  position: relative;
}
.tag-items{
  margin-bottom: 10px;
}
.container-status{
  border-radius: 10px;
  padding: 5px 7px;
  display: inline-block;
}
.fixed-height-item{
  min-height: 50px;
}
.icon-img-slider{
  width: 27px;
  height: 28px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: var(--blue);
  font-size: 12px;
  position: absolute;
  right: -12px;
  z-index: 2;
  bottom: -10px;
}
.icon-img-slider:lang(ar){
   right: auto;
   left: -12px;
}
.img-slider{
  margin-bottom: 10px;
  width: 64px;
}
/* @media (max-width:1199px) {
.img-slider{
  width: 120px;
}
} */
.btn-register-program{
  border-radius: 10px;
  padding: 10px;
  font-size: 14px;
  min-width: 86px;
}
.sparator-program{
  background-color: var(--middle-gray);
  width: 1px;
  height: 25px;
  margin: 0 12px;
}
.container-fix-width{
  padding: 0px 10px;
}
/* ========login======= */
.continer-all-banner{
  padding-right: 420px;
}

.continer-all-banner:lang(ar){
  padding-left: 420px;
  padding-right: 0px;
}
@media (max-width:1199px) {
  .continer-all-banner{
    padding: 0px !important;
  }
}
.login-banner{background: linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .8)), url(../images/banner/pattern-login.svg);background-repeat: no-repeat;background-position: left bottom;backdrop-filter: blur(7px);-webkit-backdrop-filter: blur(10px);width: 400px;padding: 38px;position: absolute;bottom: 63px;right: 0px;text-align: center;border-radius: 30px;}
.login-banner:lang(ar){
    left: 0px;
      right: auto;
}



.container-filter-login{
  background-color: var(--light-blue);
  padding: 9px 10px;
  border-radius: 38px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
@media (max-width:991px){
  .container-filter-login{

  margin-bottom: 20px;
}
}

.tab-login{
  background-color: transparent;
  border: none;
  border-radius: 35px;
  color: var(--purple);
  transition: .5s;
  font-size: 14px;
  padding: 13px 15px;
  cursor: pointer;
}
@media (max-width:767px){
  .tab-login{
  font-size: 12px;
  }
  .events-inner-sec{
    background-size: cover;
  }
}
.tab-login img{
  position: relative;
  top: -2px;
}

.tab-login.tab-active{
  background-color: var(--cian);
  color: #fff;
  cursor: pointer;
}
.input-login-all{
    width: 100%;
    font-size: 14px;
    padding: 16px 15px;
    border: none;
    border-radius: 50px;
}
.input-login{
  background-color: #fff;
  color: var(--purple);
}
.input-login::placeholder{
  color: var(--middle-gray);
  font-size: 14px;
}
.continer-input{
  padding: 2px;
  background: #EBF6FF;
  /* background: linear-gradient(90deg, rgba(239, 238, 238, 0) 0%, rgba(239, 238, 238, .9) 50%, rgba(239, 238, 238, .4) 100%); */
  border-radius: 50px;
  /* box-shadow: 0px 4px 4px 0px var(--light-gray); */
}
.tab-content-login{
  margin-top: 35px;
}
.title-login{
  margin-bottom: 15px;
  font-size: 18px !important;
}
.login-button{
  color: var(--white);
  background-color: var(--purple);
  transition: .5s;
}
.login-button:hover{
    background-color: var(--blue);

}

.login-nafas{
  border: 1px solid #37998E;
  color: #69A56E;
  padding: 12px;
  background-color: #fff;
}
.line-login{
    height: 1px;
    flex: 1;
  background: #EBF6FF;
}

.line-reg-1 {
background: linear-gradient(90deg,rgba(175, 175, 175, 0) 0%, rgba(175, 175, 175, 1) 100%);

}
.line-reg-2 {
background: linear-gradient(90deg,rgba(175, 175, 175, 1) 0%, rgba(175, 175, 175, 0) 100%);
}
/* ============search============== */
.service-sec{
  padding: 40px 0px;
}


.service-sec .count-down-event{
  min-width: 100px;
  text-align: center;
}
.service-sec .point-clock, .service-sec .time-number{
    font-size:16px;
    padding: 0px 2px;

}



/* ============search============== */

.search-sec{
  padding: 40px 0px;
}
.search-div-sec{
  padding: 20px;
  border-radius: 15px;

}
.tab-search{
  display: none;
}
.tab-more-padding{
  padding: 0px 20px;
}
@media(max-width:768px){
  .tab-more-padding{
  padding: 0px;
}
}
.ksa-bg{
  background-image: url(../images/search/bg-ksa.svg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 90%;
}
.ksa-bg:lang(ar){
   background-position: left center;
}
@media(max-width:576px){
  .ksa-bg{
  background-image: none;
  }
}
.btn-search-sec{
  width: 140px;
  border-radius: 8px;
  min-width: 14px;
  min-height: 43px;
  border: none;
  transition: .5s;
}
.btn-search-sec:hover{
  background-color: var(--blue) !important;

}
.ul-tabs-search{
  padding: 0px;
  margin: 0px;
}

.ul-tabs-search li{
  width: 222px;
  height: 55px;
  display: inline-flex !important;
  background-image: url(../images/search/inactive.svg);
  font-size: 16px;
  color: var(--blue);
  align-items: center;
  justify-content: center;
  justify-content: center;
  margin-right: -60px;
  position: relative;
  background-size: 100% auto;
  font-weight: bold;
  padding-top: 10px;
  cursor: pointer;
}
.ul-tabs-search li:nth-last-of-type(1){
  z-index: 1;
}
.ul-tabs-search li:nth-last-of-type(2){
  z-index: 2;
}
.ul-tabs-search li:nth-last-of-type(3){
  z-index: 3;
}
.ul-tabs-search li:nth-last-of-type(4){
  z-index: 4;
}
@media(max-width:768px){
.ul-tabs-search li{
    width: 181px;
    height: 45px;
    font-size: 13px;
}
}


.ul-tabs-search li:lang(ar){
  margin-left: -60px;
  margin-right: 0px;

}
.ul-tabs-search li:first-child{
  margin-left: 20px;
}
.ul-tabs-search:lang(ar) li:first-child{
    margin-right: 20px;
      margin-left: -60px;
}
.ul-tabs-search li.active-search{
  background-image: url(../images/search/active.svg);
  z-index: 8;
}
.ul-inner-tabs{
  margin-bottom: 20px;
  padding-bottom: 5px;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.ul-inner-tabs li{
  border-bottom: 1px solid #fff;
}

.ul-inner-tabs li a{
  background-color: transparent;
  padding: 5px;
  cursor: pointer;
  font-size: 14px;
  color: var(--gray)  !important;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid transparent;
  transition: .5s;
  white-space: nowrap;
  font-weight: bold;
}
@media(max-width:576px){
  .ul-inner-tabs li a{
  font-size: 12px;
  }
}
.ul-inner-tabs li a.active{border-bottom: 1px solid var(--gray) !important;color: var(--gray) !important;font-weight: bold;}
.ul-inner-tabs li a i{
  font-size: 20px;
}

/* ===result search==== */
.result-search-item {
    padding: 0px;
}

    .result-search-item li a {
        display: block;
        background-color: #fff;
        border-radius: 17px;
        padding: 15px;
        margin: 0 5px 10px 5px;
        border: 1px solid transparent;
        transition: .5s;
    }

        .result-search-item li a .btn-soft-info,  .result-search-item li a .btn-soft-standard,  .result-search-item li a .btn-soft-primary{
            border-radius: 6px !important;
        }

        .result-search-item li a .btn-like-services label{
          width: 25px;
          height: 25px;
          font-size: 12px;
          border-radius: 6px;
        }

    

.icon-search-result {
    padding: 10px;
    background-color: var(--light-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
}

    .icon-search-result img {
        height: 25px;
        transition: .5s;
    }

.result-search-item li a:hover .icon-search-result > img {
    transform: scale(1.4);
}

.title-result-search {
    height: 20px;
    overflow: hidden;
    font-size: 14px !important;
}


.sparator-search {
    height: 5px;
    background: rgba(255, 255, 255, 0);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(233, 240, 247, 1) 100%);
}

/* ==========inner tabs======= */

.ul-nested-tabs li{
  display: block;
  border-bottom: 0px;
  padding: 10px 0px;
}
@media(max-width:576px){
   .ul-nested-tabs{
    margin-bottom: 20px;
   }
  .ul-nested-tabs li{
  padding: 5px 0px;
  display: inline-block;
}
}
.ul-nested-tabs li a{
  display: block;
  background-color: #fff;
  font-size: 14px;
  padding: 18px;
  color: var(--gray) !important;
  border-radius: 10px;
  min-width: 290px;
  position: relative;
  /* margin-bottom: 20px; */
  cursor: pointer;
  transition: .5s;
  font-weight: bold;
}
@media(max-width:768px){
  .ul-nested-tabs li a{
      padding: 14px;
  min-width: auto;
  max-width: 200px;
  }
}
@media(max-width:576px){
    .ul-nested-tabs li a{
        max-width: none;
        display: block;
        margin: 5px;
        background-color: rgba(255, 255, 255, .7);
        font-size: 11px;
  }
}
.ul-nested-tabs li a.active{
    background-color: #e4e3ec;
    color: var(--blue) !important;
}
.ul-nested-tabs li a .check-list-icon{
  position: absolute;
  left: -9px;
  border: 3px solid var(--light-blue);
  box-sizing: content-box;
}
.ul-nested-tabs li:lang(ar) a .check-list-icon{
  left: auto;
  right: -9px;
}
.content-service{
  padding: 15px 30px;
}
@media(max-width:400px){
  .content-service{
  padding: 15px 10px;
}
}
.content-service p{
  max-width: 600px;
  color: #7E7C7C;
}
.start-service-btn{
  display: inline-block;
  background-color: gray;
  color: #fff !important;
  padding: 13px;
  border-radius: 8px;
  min-width: 230px;
  transition: .5s;
  font-size: 12px;
}
@media(max-width:768px){
.start-service-btn {
    padding: 10px;
    min-width: 170px;
}
}

.start-service-btn:hover{
    background-color: var(--purple);
}
.img-service{
  width: 300px;
  border-radius: 20px;
}
/* ================success slider================= */
.success-slider-sec{
    position: relative;
    padding: 40px 0px;
}
@media(max-width:767px){
.success-slider-sec{
  padding: 50px 10px;
}
}
.success-slider{
  position: relative;
}
.success-title-rounded {
  border-radius: 10px;
  margin-bottom: 20px;
}
.content-student-data{
  position: absolute;
  width: calc(100% - 60px);
  left: 30px;
  bottom: 5px;
  z-index: 2;
}
.content-student-inner{
  background-color: rgba(255, 255, 255, .7);
  backdrop-filter: blur(5px);
  padding: 15px;
  border-radius: 15px;
}
.circle-success{
  width: 50px;
  height: 50px;
 background: #6277BA;
background: linear-gradient(90deg,rgba(98, 119, 186, 1) 0%, rgba(11, 172, 197, 1) 100%);
border-radius: 50%;
}
.success-slider{
overflow: hidden;
border-radius: 30px;
}
.img-success-slider{
  width: 100%;
  height: 470px;
  object-fit: cover;
  border-radius: 30px;
}
.overlay-img-success{
 position: absolute;
 bottom: 0px;
 width: 100%;
 height: 170px;
 background: rgba(7, 22, 37, 0);
background: linear-gradient(180deg, rgba(7, 22, 37, 0) 0%, rgba(25, 81, 139, 1) 100%);
}
.btn-share{
  background-color: transparent;
  border: none;

}
.video-play{
  width: 70px;
  height: 70px;
  background-color: rgba(255, 255, 255, .7);
  backdrop-filter: blur(5px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  border-radius: 50%;
  margin-bottom: 20px;
  z-index: 3;
  cursor: pointer;
}
@keyframes shadow-pulse
{
  0% {
    box-shadow: 0 0 0 0px var(--purple);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(179, 148, 40, 0);
  }
}
    
.success-slider:hover .video-play{
animation: shadow-pulse 1s infinite;
}

.pattern-video{
  background-image: url(../images/success/pattern-video.svg);
  background-position: left bottom;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer;
}

/* ================thump================ */
.contianer-success-div{
  padding-right: 470px;
  position: relative;
}
.contianer-success-div:lang(ar){
    padding-left: 470px;
    padding-right: 0px;
  position: relative;
}
.thump-fixed-div{
  width: 450px;
  position: absolute;
  right: 0px;
     top: 0px;

}
.thump-fixed-div:lang(ar){
   right: auto;
   left: 0px;
}

@media(max-width:991px){
  .contianer-success-div{
  padding-right: 220px;
}
.contianer-success-div:lang(ar){
    padding-left: 220px;
    padding-right: 0px;
}
.thump-fixed-div{
  width: 200px;
  position: absolute;
  right: 0px;
}
}

@media (max-width: 767px) {
  .contianer-success-div{
    padding: 0px !important;
  }
  .thump-fixed-div{
    display: none !important;
  }
}
.container-student-thump{padding-top: 10px;cursor: pointer;}
.thump-fixed-div .container-student-thump .win-icon-list {
  transition: .2s;
transform: scale(1.4);
}
.thump-img{
  border-radius: 20px 20px 0px 20px;
  width: 70px;
  object-fit: cover;
  height: 115px;
}
.thump-img:lang(ar){
  border-radius: 20px 20px 20px 0px ;
}
.win-icon-list{
  width: 14px;
  height: 14px;
}

.p-thump-slider{
  height: 38px;
  overflow: hidden;
}
.sparator-thump{
  height: 15px;
  background: rgba(255, 255, 255, 0);
  background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(233, 240, 247, 1) 100%);
}


/* ===========modal========== */

.modal-video{
  background-color: rgba(0, 0, 0, 0.4);
  padding: 30px;
  border-radius: 30px;
}
.btn-close-vid{
  border-radius: 50%;
  width: 24px;
  height: 24px;
  background-color: #fff;
  color: var(--dark-gray);
  font-size: 8px;
  border:none
}
.show-divs-video{
  padding: 10px;
  border: 1px solid #fff;
  border-radius: 10px;
}

/* ================app section=============== */
.app-sec{
  padding: 40px 0px;
}

@media(max-width:767px){
  .app-sec{
  padding: 50px 10px;
}
.img-app{
  max-width: 250px;

}
}
.app-hover-action> div:hover .img-icon-option{
  transition: .5s;
  transform: scale(1.1);

}
.img-store{
  width: 140px;
}
/* ===============news=============== */

.new-sec{
  padding: 40px 0px;
}
.margin-media{
  margin: 0 10px;
}
.media-item{
  padding: 20px 20px 20px 20px;
  background: linear-gradient(90deg, rgba(240, 245, 249, 1) 0%, rgba(235, 246, 255, .5) 100%);
  border-radius: 20px;
  margin-bottom: 20px;
  display: block;
}

.margin-media .btn-like-services > label{
background-color: #fff;
}
.container-img-media{
  position: relative;

}
.container-img-media > img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 20px;
}
.overlay-media{
  background: var(--blue);
  background: linear-gradient(180deg, rgba(43,37,75,0) 43%, rgba(43,37,75,1) 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 0;
  border-radius: 10px;
}
.container-img-media h3{
  position: absolute;
  width: 100%;
  height: 80px;
  font-size: 16px;
  color: #fff;
  z-index: 1;
  overflow: hidden;
  padding: 15px;
  bottom: 0px;
  left: 0px;
}
.view-div{
  position: absolute;
  right: 15px;
  top: 15px;
  background-color: var(--gray);
  border-radius: 5px;
  padding: 5px;
  font-size: 12px;
  color: #fff;
}
.view-div:lang(ar){
  left: 15px;
  right: auto;
}


.btns-media{
  width: 38px;
  height: 38px;
  /* font-size: 11px; */
  border-radius: 12px;
  background-color: transparent;
  border: none;
  background-color: #fff;
  transition: 1s;
}
.btns-media:hover{
  background-color: var(--gold);
}

/* ===================event sec==================== */
.event-sec{
  padding: 50px 0px;
  min-height: 600px;
}
@media(max-width:767px){
  .event-sec{
  padding: 50px 10px;
}
}
.container-calendar{
  padding-left: 430px;
  position: relative;
}
.container-calendar:lang(ar){
    padding-left: 0px;
    padding-right: 430px;
}
@media(max-width:767px){
  .container-calendar{
      padding: 0px !important;
  }

}
.current-event:lang(ar){
  right: 0px;
  left: auto;
}

.current-event{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 400px;
  max-width: 100%;
  padding: 40px 30px;
  background: linear-gradient(360deg, rgba(240, 245, 249, 1) 0%, rgba(255, 255, 255, 0) 100%), url(../images/event/patern-current-event.svg);
  background-position: left bottom;
  background-repeat: no-repeat;
  border-radius: 30px;
  box-shadow: 0px 4px 20px 10px #efefef;
}
@media(max-width:767px){
 .current-event{
  position: relative;
  margin: 0px auto 40px auto;

  }
}

.current-event::after{
  top: 35px;
  content: "";
  width: 8px;
  height: 35px;
  background-color: var(--purple);
  position: absolute;
  left: 0px;
  border-radius: 0px 30px 30px 0px;
}
.event-sec:lang(ar) .current-event:after{
  right: 0px;
  left: auto;
  border-radius: 30px 0px 0px 30px;
}
.title-event{
  height: 70px;
  overflow: hidden;
  margin-top: 40px;
  line-height: 30px;
}
.desc-event{
height: 100px;
overflow: hidden;
text-align: justify;

}
.tabs-event-items{
  height: 85px;
  margin-bottom: 20px;
  overflow: hidden;
}

.icon-img-slider-event{
  width: 26px;
  height: 26px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: var(--blue);
  font-size: 15px;
  position: absolute;
  right: -11px;
  z-index: 2;
  bottom: -10px;
}
.icon-img-slider-event:lang(ar){
   right: auto;
   left: -11px;
}
.img-slider-event{
  width: 94px;
  border-radius: 10px;
  height: 163px;
  object-fit: cover;
}
@media (max-width:1200px) {
.img-slider-event{
  width: 120px;
}
}
.count-down-event{

padding: 5px 4px;

border-radius: 50px;

display: flex;

min-width: 161px;
}

.point-clock{
  font-size: 25px;
  padding:0px 5px;
  color: var(--middle-gray);
}
.time-number{
  color: var(--middle-gray);
  font-size: 25px;
        font-family: 'Akhand Arabic';
        font-weight: bold;

}
.time-label{
  font-size: 10px;
  text-align: center;

  color: var(--middle-gray);

}
/* ========================= */
.conatiner-div-details{
  width: 210px;
  margin: 0 auto;
  display: inline-block;
  /* margin: 16px; */
  padding: 20px;
  background: linear-gradient(180deg, rgba(240, 245, 249, 1) 0%, rgba(240, 245, 249, .3) 100%), url(../images/event/next-patern-item.svg);
  background-repeat: no-repeat;
  background-position: bottom left;
  border-radius: 20px;
}
.conatiner-div-details .btn-like-services > label{
  box-shadow: 4px 4px 13px 3px var(--light-gray);
  background-color: var(--white);
}
.icon-div-details{
  background-color: #fff;
  width: 70px;
  height: 82px;
  width: 70px;
  border-radius: 15px;
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
}
.icon-div-details span{
  font-family: 'Akhand Arabic';

}
.btn-more-event{
  width: 34px;
  height: 34px;
  background-color: #fff;
  border-radius: 50%;
  color: var(--gray);
}
.desc-next-event{
  height: 51px;
  overflow: hidden;
}

/* ===================expand==================== */
.ul-expand{
padding: 0px;
  
}
.list-expand-container{
 transition: all 0.5s ease;
   padding-top: 25px ;
}
@media(max-width:1200px){
  .list-expand-container{
   padding: 25px 20px 5px 20px;
}
}
.expand-sec{padding: 40px 0px;}
.container-expand-div{border-radius: 40px;transition: .4s;position: relative;min-height: 500px;}
.container-expand-div.active-expand .hide-expand-item{
 padding: 50px 40px 40px 0px;
}
.container-expand-div.active-expand .hide-expand-item:lang(ar){
    padding: 50px 0px 40px 40px; 
}
.content-expand{
  padding-left: 200px;
  position: relative;
}
.content-expand:lang(ar){
    padding-right: 200px;
    padding-left: 0px;
}

.model-pic{
  width: 100%;
  height: 503px;
  background-repeat: no-repeat;
  background-position: bottom center;
  position: absolute;
  left: 0px;
  top: -25px;
  border-radius: 0px 0px 50px 50px;
}
.model-pic:lang(ar){
  right: 0px;
  left: auto;
}
.active-expand .model-pic{
width: 200px;
}

.expand-purple{
  background-color: var(--purple);
}
.expand-purple.active-expand{
  background:  url("../images/expand/patern-expand.svg"),var(--purple);
background-position: left bottom; 
background-repeat: no-repeat;
}
.expand-purple .list-expand{
  background-color: var(--purple);

}
.expand-purple .list-expand .check-list-icon{
    border: 6px solid var(--purple);

}
.expand-blue{
  background-color: var(--pure-blue);
}
.expand-blue.active-expand{
  background:  url("../images/expand/patern-expand.svg"),var(--pure-blue);
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: 1s;
}
.expand-blue .list-expand{
  background-color:  var(--pure-blue);

}
.expand-blue .list-expand .check-list-icon{
    border: 6px solid var(--pure-blue);

}
.expand-red{
  background-color: var(--red);
}
.expand-red.active-expand{
background:  url("../images/expand/patern-expand.svg"),var(--red);
background-position: left bottom; 
background-repeat: no-repeat;
}
.expand-red .list-expand{
  background-color: var(--red);

}
.expand-red .list-expand .check-list-icon{
    border: 6px solid var(--red);
}
.expand-gold{
  background-color: var(--dark-gold);
}
.expand-gold.active-expand{
 background:  url("../images/expand/patern-expand.svg"),var(--dark-gold);
 background-position: left bottom; 
background-repeat: no-repeat;
}
.expand-gold .list-expand{
  background-color: var(--dark-gold);
}
.expand-gold .list-expand .check-list-icon{
    border: 6px solid var(--dark-gold);

}


.conatiner-list-expand{
  background: linear-gradient(90deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 100%);
padding: 1px;
  border-radius: 10px;
  margin-bottom: 20px;
  display: block;
}
.list-expand{
  padding: 15px 15px;
  border-radius: 10px;
}
.list-expand .check-list-icon{
  position: absolute;
  left: -13px;
  top: 8px;
  box-sizing: content-box;
  background: #333;
  text-shadow: none;
  /* background: linear-gradient(90deg, var(--gray) 0%, #333 100%); */
}
.list-expand:lang(ar) .check-list-icon{
    right: -13px;
    left:auto;
}
.img-expand{
  margin-top: -75px;
  max-width: 100%;
}
.title-sec-expand{
  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
}

.container-expand-div:not(.active-expand) .hide-expand-item{
  display: none !important;
}
/* .container-expand-div.active-expand .hide-expand-item{
  display: block;
} */
.expand-btn {
    border-radius: 8px;
    border: 1px solid var(--white);
    padding: 10px 5px;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 116px;
    transition: 1s;
    font-size: 12px;
}
.content-expand{
  position: relative;
}
.caption-expand{
  position: absolute;
  bottom: 40px;
  width: 100%;
  text-align: center;
  }
.container-expand-div.active-expand .continer-thump-expand{
  display: none;
}
.caption-expand{
  position: absolute;
  left: 0px;
  width: 100%;
}
.caption-title-expand{
  text-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2);
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}
.circle-expand{
  background-color: rgba(255, 255, 255, .2);
  color:#fff ;
  
  display: flex;
  align-items: center;
  justify-content: center;
    font-size: 14px;
  border-radius: 50%;
  font-weight: bold;
  width: 45px;
  height: 45px;
  margin: 0 auto;

}
.circle-expand::after{
    content: "\f105";
  font-family: "Font Awesome 7 Free";

}
.caption-expand:lang(ar) .circle-expand::after{
    content: "\f104";
}
.list-expand-overflow{
  /* height: 240px; */
  overflow: hidden;
  padding: 0px 7px;
}
/* ================mowhiba-number============== */
.mowhiba-number{
  padding: 40px 0px;
}
@media(max-width:767px){
  .mowhiba-number{
  padding: 50px 10px;
}
}
.circle-icon{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--light-blue);
}
.item-no-mow{
  background: linear-gradient(-90deg, rgba(240, 245, 249, 1) 0%, rgba(255, 255, 255, 0) 100%);
  padding: 10px 15px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px 0px #ededed;
  margin-bottom: 25px;
  width: 280px;
}
@media(max-width:1200px){
  .item-no-mow{
     width: 200px;
  }
}
@media(max-width:765px){
  .item-no-mow{
     width: 169px;
       padding: 10px 9px;

   
  }
}
.map-container{
  padding: 20px;
  background: linear-gradient(0deg, rgba(240, 245, 249, 1) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 15px;
  width: 457px;
  max-width: 100%;
  overflow: hidden;
}

.circle-map-data{
  background-color: #fff;
  box-shadow: 0px 4px 10px 4px #f4f3f3;
  border-radius: 50%;
  width: 42px;
  height: 42px;
}
.data-map-item{
  border-radius: 10px;
  background: linear-gradient(0deg, rgba(232, 239, 246, 1) 0%, rgba(255, 255, 255, 1) 100%);
  padding: 8px 12px;
}
.active-area{
  fill: var(--blue) !important;
}
.area{
  cursor: pointer;
  transition: 1s;
}
/* ===================footer==================== */
footer{padding-top: 50px;background: linear-gradient(360deg, rgb(210 228 242) 0%, rgba(255, 255, 255, 0) 100%);

}
.inner-footer{
  background:var(--blue-sec);
  border-radius: 35px;
  padding: 50px 40px 10px 40px;
  position: relative;

}
.patern-footer{
  background-image: url(../images/footer/patern-footer.svg);
 position: absolute;
 background-repeat: no-repeat;
 background-position: top left;
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
z-index: 0;
opacity: .8;
   border-radius:35px;
}
.content-footer{
  position: relative;
  z-index: 2;
}
.contact-footer-div{
  padding: 50px 20px 30px 20px;
  background: linear-gradient(360deg, rgba(206, 228, 246, 1 ) 0%, rgba(239, 246, 252, 1) 100%);
  width: 385px;
  max-width: 100%;
  border-radius: 30px;
  margin-top: -110px;
}
@media(max-width:991px){
  .contact-footer-div{
  width: 100%;
    padding: 20px;
    border-radius: 30px;
    margin-bottom: 20px;
  }
}
.contact-icon{
  background-color: #fff;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--gray);
  border-radius: 50%;
  box-shadow: 4px 6px 5px #d2d2d2;
}
.container-map{
  border-radius: 20px;
  overflow: hidden;
  margin-top: 30px;
}
.footer-links li a{
  display: block;
  padding-left: 15px;
  position: relative;
  color: #fff;
  margin-bottom: 5px;
  font-size: 14px;
}

.footer-links li a:lang(ar){
   padding-right: 15px;
   padding-left: 0px;
}
.footer-links li a::after{
  position: absolute;
  content: "\f105";
  font-family: "Font Awesome 7 Free";
  left: 0px;
  color: #fff;
  font-size: 8px;
  font-weight: bold;
  top: 7px;
}
footer:lang(ar) .footer-links li a::after{
    content: "\f104";
    left: auto;
    right: 0px;
}
.contact-btn-footer{
  border-radius: 8px;
  background-color: var(--cian);
  border: 1px solid var(--cian);
  padding: 14px 5px;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 154px;
  transition: 1s;
  font-size: 12px;
}


.subscribe-div{
  padding: 5px;
  background-color: #fff;
  border-radius: 8px;
  max-width: 540px;
}
.input-subscribe{
  width: 100%;
  padding: 8px;
  border: none;
  color: var(--purple);
  font-size: 12px;
}
.input-subscribe::placeholder{
  color: var(--middle-gray);
  font-size: 10px;
}

.btn-subscrib-sec {
    width: 74px;
    border-radius: 8px;
    min-width: 14px;
    min-height: 37px;
    border: none;
}
.line-footer{
  background: linear-gradient(180deg, rgba(32, 32, 63, 0 ) 0%, rgba(32, 32, 63, .5) 100%);
  height: 6px;
  margin: 20px 20px;
}


.social-media {
  margin: 0px;
  padding: 0px;
  display: block;
  text-align: center;
}

.social-media li {
  display: inline-block;
}

.social-media li a {
  margin: 1px;
  transition: .5s;
  font-size: 15px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  display: flex;
  background-color: #fff;
  align-items: center;
  justify-content: center;
  color: var(--blue);
}

.social-media li a:hover {
  color: #ffffff !important;
  background-color: #e3aa47;
}
.container-scoial-store{
  padding: 0px 20px;
}
.small-footer{
  padding: 20px;
}

.right-footer {
  width: 100%;
  display: block;
  padding: 0px;
  margin: 0px;
}

.right-footer li {
  display: inline-block;
  color: #fff;
}

.right-footer li a {
  color: var(--blue);
  text-decoration: none !important;
  padding: 2px 5px;
  display: block;
  position: relative;
  font-size: 12px;
}

.right-footer li a::after {
  content: "";
  width: 1px;
  height: 8px;
  position: absolute;
  right: 0px;
  background-color: var(--blue);
  top: 5px;
}

.right-footer li:lang(ar) a::after {
  right: auto;
  left: 0px;

}

.right-footer li:last-child a::after {
  display: none;
}
@media(max-width:768px){
  .title-footer-collapse{
    border-radius: 20px;
    border: 1px solid var(--white);
    padding: 15px;
    position: relative;
    margin-bottom: 20px !important;
    margin-top: 0px !important;
  }
  .title-footer-collapse::after{
    content: "\2b";
    font-family: "Font Awesome 7 Free";
    font-weight: bold;
    right: 10px;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    padding: 5px;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: var(--blue);
    background-color: var(--white);
    top: 10px;
  }
   footer:lang(ar) .title-footer-collapse::after{
    right: auto;
    left: 10px;
   }
   .footer-links{
    display: none;
   }

}

/* ====================breabreadcrumb================ */
.breadcrumb-div{
  background: linear-gradient(
180deg, rgba(240, 245, 249, 1) 0%, rgba(255, 255, 255, 0) 100%);
  padding: 25px 0px;
}

.breadcrumb ul{
  padding: 0px;
  margin: 0px;
}
.breadcrumb ul li{
  display: inline-block;

}
.breadcrumb ul li a{
  color: var(--gray);
  font-weight: bold;
  font-size: 14px;
}
.breadcrumb ul li.active a{
  color: var(--dark-gray) !important;
}
.img-breadcrumb{
  height: 15px;
}
.share-btn{
      border: none;
    padding: 0px;
    font: inherit;
    background: #fff;
    width: 41px;
    height: 41px;
    border-radius: 50%;
    color: var(--gray);
    box-shadow: 4px 4px 13px 3px var(--light-gray);
    z-index: 5;
}
.inner-page{
  padding: 0px 0px 50px 0px;
}