:root {
  --main-color: #01094F;
  --blue: #5F8DFF
}

html[lang="ar"] {
  direction: rtl
}

html[lang="ar"] body .nice-select {
  padding-right: 18px;
  padding-left: 30px
}

html[lang="ar"] body .nice-select:after {
  right: inherit;
  left: 12px
}

html[lang="ar"] body .banner-area .banner-content ul {
  display: flex
}

html[lang="ar"] body .banner-area .banner-content ul li {
  width: auto;
  padding: 0
}

html[lang="ar"] body .banner-area .banner-content ul li a {
  margin-left: 10px;
  background: var(--blue);
  border: 2px solid var(--blue);
  /* width: 180px;
  line-height: 51px; */
  width: 280px;
  line-height: 55px;
  transition: 1s
}

html[lang="ar"] body .banner-area .banner-content ul li a:hover {
  background-color: var(--main-color);
  border-color: var(--main-color)
}

html[lang="ar"] body .banner-area .banner-content ul li a.main-btn-2 {
  background-color: transparent;
  border: 2px solid white
}

html[lang="ar"] body .banner-area .banner-content ul li a.main-btn-2:hover {
  background-color: var(--main-color);
  border-color: var(--main-color)
}

/*html[lang="ar"] body .banner-area .banner-content ul li:last-child {*/
/*  display: none*/
/*}*/

html[lang="ar"] body .advance-courses-area .courses-active .slick-arrow.prev {
  right: auto;
  left: 15px
}

html[lang="ar"] body .advance-courses-area .courses-active .slick-arrow.next {
  right: auto;
  left: 75px
}

html[lang="ar"] body .banner-area::before {
  display: none
}

html[lang="ar"] body .single-courses .courses-content .courses-info .item {
  direction: rtl;
  display: flex;
  align-items: center
}

html[lang="ar"] body .single-courses .courses-content .courses-info .item img {
  position: relative;
  width: 50px;
  max-width: 50px;
  height: 50px
}

html[lang="ar"] body .single-courses .courses-content .courses-info .item p {
  padding-right: 0px;
  font-weight: 600;
  color: var(--main-color);
  font-size: 14px;
  text-transform: capitalize
}

body .header-navigation {
  background-color: white
}

body .header-navigation .logo img {
  max-height: 67px !important;
  width: auto;
  margin-left: 3rem
}

body .header-navigation .main-menu ul li a {
  color: var(--main-color);
  font-weight: 400
}

body .header-navigation .main-menu ul li:first-child>a {
  padding-left: 10px
}

body .advance-courses-area .courses-active .slick-arrow {
  width: 50px;
  height: 50px;
  line-height: 54px
}

body .section-title .title {
  padding-bottom: 35px
}

body .single-courses .courses-thumb {
  border-radius: 10px 10px 0 0;
  width: 100%
}

body .single-courses .courses-thumb img {
  height: 225px
}

body .single-courses .courses-content {
  border-radius: 0 0 10px 10px;
  width: 100%;
  height: auto
}

body .single-courses .courses-content ul {
  border-top: 1px solid transparent
}

body .single-courses .courses-content ul li {
  color: black;
  font-weight: 300
}

body .single-courses .courses-content ul.d-flex.justify-content-center {
  justify-content: start !important
}

body .single-courses .courses-thumb .corses-thumb-title a.category {
  background: white !important;
  color: var(--main-color) !important;
  height: 33px;
  padding: 0 15px
}

body .counter-area .counter-dot img {
  opacity: 0.25
}

body .play-area .play-thumb .play-btn a {
  line-height: 110px
}

body .offer-area {
  margin-bottom: 0
}

body .play-area .section-title .title {
  width: 70%;
  margin: auto
}

body footer p {
  color: white
}

body footer .footer-title {
  padding-right: 0 !important
}

body footer .footer-title img {
  margin-top: 0 !important;
  width: 150px
}

body footer .footer-title::before {
  display: none
}

body footer .footer-title h4 {
  font-size: 18px
}

body footer .footer-title i {
  display: none
}

body footer .about-content {
  padding-left: 2rem
}

body footer .about-content p {
  font-weight: 400;
  font-size: 14px
}

body footer .footer-area {
  padding-top: 50px
}

body footer .footer-area .footer-item .footer-list-area .footer-list ul li a {
  line-height: 36px;
  font-weight: 400;
  opacity: 1 !important
}

body .community-area .community-content .input-box button {
  background-color: var(--blue);
  transition: 1s
}

body .community-area .community-content .input-box button:hover {
  background-color: var(--main-color)
}

body .offer-area .offer-content {
  width: auto
}

p {
  color: black
}

.border-top {
  border-top: 1px solid #0d286b !important
}

.price span {
  color: black
}

.price span:first-child {
  font-size: 23px;
  font-weight: 500
}

.price span:last-child {
  font-size: 15px;
  text-decoration: line-through;
  opacity: .5
}

.price span.free {
  color: var(--blue);
  text-decoration: inherit;
  opacity: 1
}

.price span.symbols {
  color: black;
  text-decoration: inherit;
  opacity: 1
}

@media (max-width: 767px) {
  .banner-content ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }
  .banner-area .banner-content ul li {
    /* height: auto; */
    height: 70px;
    text-align: center;
  }
}