@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tajawal/v9/Iurf6YBj_oCad4k1l5qjHrRpiYlJ.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EFD-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tajawal/v9/Iurf6YBj_oCad4k1l5qjHrFpiQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tajawal/v9/Iura6YBj_oCad4k1nzSBC45I.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EFD-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tajawal/v9/Iura6YBj_oCad4k1nzGBCw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tajawal/v9/Iurf6YBj_oCad4k1l4qkHrRpiYlJ.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EFD-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tajawal/v9/Iurf6YBj_oCad4k1l4qkHrFpiQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* colors */
  --main-color: #8c015d;

  --primary-color: #ae1c95 !important;
  --gradient: linear-gradient(135deg, #b236a6, #aa0888) !important;
  --gradient2: linear-gradient(135deg, #a981d3, #d4634c);
  --gradient3:  linear-gradient(135deg, #f5d9e7, #fff7ed) ;
  /* declearative colors */
  --background-color: #f2f2f2;
  --background-color1: #a981d3;
  --background-color2: #f5ebff;
  --default-color: #c0bebe;
  --heading-color: #ab0072;
  --contrast-color: #8c015d;
  /* --gradyent #9513a0 to #ab0072 */
  --accent-color: #f5d9e7;
  --surface-color: #efefef;
  --nav-hover-color: #ff4081;
  --nav-hover-color2: #bb2f5f;

  --icon-color: #e0adb5;
 
  /* text colors */
  --text-color: #333333;
  --text2-color: #7b7b7b;
  --text-light-color: #930000;
  --text-lighter-color: #aaaaaa;
  --text-fff-color: #fff;

  /* border radius */
  --border-radius: 22px 22px 22px 0;
  --border-radius-30: 20px 35px 35px 20px;

}
 
* :not(.fa, .fas, .fe) {
  font-family: 'Tajawal', sans-serif !important;
  scrollbar-width: none;
}

body {
  font-family: 'Tajawal', sans-serif !important;
  direction: rtl;
  text-align: right;
}

.hero-horizontal {
  background: var(--gradient2) !important;
}
.section-odd {
  background: var(--gradient3) !important;
}

.section-title-horizontal {
  color: var(--contrast-color) !important;
  
}

.animated-icon {
  background: var(--gradient2) !important;

}

.traits-container{
  background: var(--gradient) !important;
}

.hero-animation {
  opacity: 1 !important;
}
header h1{
  color: #d9bbbb !important ;
}

.minetitle {
  background: linear-gradient(to right,
      #7953cd 20%,
      #00affa 30%,
      #0190cd 70%,
      #764ada 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -text-fill-color: transparent;
  background-size: 500% auto;
  animation: textShine 5s ease-in-out infinite alternate;
}

.bg-minetitle{
    background: linear-gradient(270deg, #7953cd, #00affa, #0190cd, #764ada);
    background-size: 800% 800%;

    -webkit-animation: AnimationName 32s ease infinite;
    -moz-animation: AnimationName 32s ease infinite;
    animation: AnimationName 32s ease infinite;
    color: #fff !important;
}

.bg-minetitle h3 , .bg-minetitle a{
    color: #fff !important;
}
.site-footer {
     
   color: white;
    padding:  20px 40px;
    clip-path: ellipse(150% 100% at 50% 0%);
}

/* اذا الشاشة اكبر من 1000 طبق التالي */
@media (min-width: 1000px) {
 .site-footer {
     
   color: white;
    padding:  20px 40px;
    clip-path: ellipse(85% 100% at 50% 0%);
}
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}


@keyframes textShine {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

.section-title h2 {
  font-size: 25px;
  font-weight: 200;
  padding: 10px 0;

}

.select2-dropdown {
  position: relative !important;
}


h5 {
  color: var(--contrast-color) !important;
}



.f-24 {
  font-size: 24px !important;
}

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


.border-warning {
  border-color: var(--contrast-color) !important;
  background-color: var(--background-color2) !important;
}

.divider-header {
  border-right: 3px solid var(--text2-color);
  padding: 10px 25px;
  margin-bottom: 25px;
}

.rounded-circle {
  border-radius: 50% !important;
  height: 64px;
  width: 64px;
}

.p-3 {
  padding: 23px 24px 15px 25px;
}

.divider-header h2 {
  color: var(--text2-color);
}

.card_ {
  background-color: #ebebeb8f;
}

.fs-2 {
  font-size: 26px !important;
}

.btn__primary {
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: var(--text-fff-color);
}

.text-fcolor {
  color: var(--text-fff-color) !important;
}

.counts .stats-item p {
  color: var(--text-color);
}

.why-us .icon-box,
.features .features-item {
  border-radius: var(--border-radius);
}

.why-us .why-box,
.box-radius-1 {
  border-radius: var(--border-radius-30);
}

body.ar-lang {
  direction: rtl;
  text-align: right;
}

body.en-lang {
  direction: ltr;
  text-align: left;
}

body.en-lang .dropdown-menu.dropdown-menu-end.dropdown-menu-arrow.show {
  right: 0;
}

body.ar-lang .dropdown-menu.dropdown-menu-end.dropdown-menu-arrow.show {
  right: -124px !important;
}


.counts .stats-item {
  color: var(--nav-hover-color2);
}

.counts .stats-item span {
  color: var(--nav-hover-color2);
}

.text-primary-shadow {
  text-shadow: 0 5px 10px var(--volgh-primary-03);
}

.text-primary {
  color: rgb(var(--volgh-primary-rgb)) !important;
}

#header {
  border-top: 10px solid var(--main-color);
  border-bottom: 3px solid var(--main-color);
}

.navmenu li:hover>a,
.navmenu .active,
.navmenu .active:focus {
  color: var(--nav-hover-color) !important;
}

.page-title {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.header,
.why-us .icon-box i {
  color: var(--main-color);
  background-color: var(--background-color);
}

.why-us .icon-box {
  background-color: var(--surface-color);
}

.why-us .icon-box p,
section,
.section {
  font-size: 15px;
  color: var(--text-color);
}


/* بداية كرت المقاييس */
.courses .course-item {
  min-width: 100% !important;
}

.courses .course-content .description {
  color: var(--text2-color);
}

.courses .trainer .trainer-rank {
  color: var(--icon-color);

  font-weight: lighter;
}

/* كرت المقاييس */

.nav-tabs .nav-link.active,
/*بيانات المستخدم*/
.custom-btn {
  color: var(--text-fff-color) !important;
  background: #9b13eb;
  background: linear-gradient(90deg, rgb(133 88 189) 0%, rgb(214 65 149) 100%);
  border: 1px solid transparent !important;
}

.nav-tabs .nav-link:hover {
  background: var(--accent-color);
}

.app-sidebar {
  background: rgb(243 243 243) !important;
}

.harmonic-scale-section {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}



.feature-card {
  background: white;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

.cta-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}



.feature-card,
.card,
.cta-section {
  transition: all 0.3s ease-in-out;
}

.box-1 {
  background-color: var(--background-color1) !important;
}

.box-radius-1 {
  border-radius: var(--border-radius-30);
}

.text-white {
  color: #fff !important;
}

nav.flex.items-center.justify-between {
  direction: ltr;

}