* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Alexandria';
}
img.selectedLanguage {
    border-radius: 50%;
    height: 25px;
    width: 25px;
}
a.dropdown-item {
    font-size: 15px;
}
img.imagcategory {
    border-radius: 50%;
    height: 32px;
    margin: 5px;
}
*:focus {
  outline: none !important;
}

body {
  direction: rtl;
  font-size: 1rem;
  color: rgb(27, 27, 27);
  position: relative;
  background-color: #F8F9FA;
  text-transform: capitalize;
  box-sizing: border-box;
  font-family: "Tajawal", sans-serif;
  font-weight: 500;
  position: relative;
}

:root {
  --primaryColor: #0AB095;
  --SecondaryColor: #FFC000;
  --mainColor1: #015686;
  --mainColor2: rgb(0, 0, 0);
  --mainColor3: hwb(0 100% 0%);
  --linear-gradient: linear-gradient(90deg, #0AB095 0%, #339CFF 100%);
  --mainColor4: #003B71;
  --mainColor5: #009C90;
  --light: #E8F2F5;
}

.loading-screen {
  z-index: 111111111;
  display: flex;
}

.liner-gradient {
  background: var(--linear-gradient);
}

.section-top,
.profile-top {
  padding-top: 135px;
}

.main-color1 {
  color: var(--mainColor1) !important;
}

.main-color5 {
  color: var(--mainColor5) !important;
}

.mainBtn2 {
  background-color: var(--mainColor3) !important;
  font-weight: 500;
  color: #003B71;
  font-size: 16px;
  width: 216px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.mainBtn2:hover {
  color: #003B71!important;
}

.bg-primary-color {
  background-color: var(--primaryColor) !important;
}

.primary-color {
  color: var(--primaryColor) !important;
}

.bg-Secondary-color {
  background-color: var(--SecondaryColor);
}

.Secondary-color {
  color: var(--SecondaryColor);
}

.bg-light-div {
  background-color: var(--light) !important;
  color: var(--mainColor4);
  font-weight: 300;
}

.bg-light-div-span {
  font-size: 16px !important;
  font-weight: 400;
}

.bg-main-color5 {
  background-color: var(--mainColor5);
}

.bg-main-color1 {
  background-color: var(--mainColor1);
}

.btn-blue {
  /* background-color: var(--mainColor4) !important; */
  background: var(--linear-gradient);

}

.registertion-option {
  background-image: url("../imgs/home/MaskGroup16.png");
  background-position: center center;
  background-size: 100% 100%;
}

.text-white-light {
  color: white !important;
}

.bg-dark-div {
  background-color: #000B16 !important;
}

.btn-outline-blue {
  border-color: var(--mainColor4) !important;
  color: var(--mainColor4);
}

.btn-outline-white {
  border-color: white !important;
  color: white;
}

.main-color5 {
  color: var(--mainColor5);
}

.fa-bars {
  color: black;
}

.nav-pills .nav-link {
  color: var(--mainColor2);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: #000;
  background-color: transparent;
  color: #1A1A1A !important;
  font-weight: bold;
}

.goTocart {
  background: var(--linear-gradient);
}

.blue-layer {
  background: linear-gradient(to right, rgba(7, 38, 62, 0.4117647059), rgba(0, 116, 148, 0.4431372549));
}

nav.bg-blue {
  /* background-color: var(--mainColor1); */
  background: var(--linear-gradient);
  color: var(--mainColor3);
  font-size: 16px;
}

nav.bg-blue .dropdown-toggle {
  color: var(--mainColor3);
}

nav.bg-blue .dropdown-toggle::after {
  display: none;
}

nav.bg-blue .dropdown-toggle:focus {
  border: none;
}

.form-check-input:checked {
  background-color: var(--mainColor5) !important;
  border-color: var(--mainColor5) !important;
}

.navContainer {
  z-index: 1111111;
}

.carousel-caption {
  top: 25%;
  text-align: start;
  right: 5%;
  width: 44%;
}

.carousel-caption h3 {
  line-height: 55px;
  font-weight: 600;
}

.tag-icon {
  position: relative;
  top: -11px;
  left: 20px;
}

.carousel-caption p {
  font-size: 20px;
  font-weight: 400;
  line-height: 37px;
  color: #FFFFFFCC;
}

.layer {
  height: 91%;
  width: 60%;
}

.mainBtn {
  background: var(--linear-gradient);
  border: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  height: 56px;
  width: 166px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.mainBtn3 {
  background-color: #00A98F1F;
  color: #00A98F;
  border: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  height: 56px;
  width: 164px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.carousel-indicators [data-bs-target] {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  opacity: 1;
  background-color: var(--mainColor3) !important;
  border: 1px solid var(--mainColor3);
}

.carousel-indicators .active {
  background-color: var(--mainColor4) !important;
  box-shadow: inset 0px 0px 0px 3px white;
  border: 2px solid var(--mainColor4);
}

.card-img-div {
  background-image: url("../imgs/home/icon-shape.50c1458d.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.card-body p {
  font-size: 15px;
  color: var(--mainColor2);
}

.card-container {
  position: absolute;
  top: -150px;
  margin-bottom: 130px;
}

.card-container .row div {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

.btn-close {
  background-image: none;
}

.container-img {
  background-image: url("../imgs/home/why-shape-dot.png");
  background-repeat: no-repeat;
  background-position: 52% 0%;
}

ul {
  list-style: none;
}

.slick-dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  list-style: none;
}

.slick-dots li button {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  opacity: 48%;
  background-color: var(--mainColor4) !important;
  border: 1px solid var(--mainColor3);
  color: transparent;
  margin-inline: 2px;
}

.slick-dots .slick-active button {
  opacity: 1;
  background-color: var(--mainColor4) !important;
  box-shadow: inset 0px 0px 0px 2px white;
  border: 1px solid var(--mainColor4);
}

.card-img-bg .fa-heart {
  width: 25px;
  height: 25px;
  color: #E40000;
}

.card-img-bg span {
  font-size: small;
}

.bg-red {
  background-color: #E40000;
}

.slider5 .card-img-top.rounded-top {
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
}

.card-footer:last-child {
  border-bottom-left-radius: 1rem !important;
  border-bottom-right-radius: 1rem !important;
}

.card-footer {
  border-top: 2px solid rgba(128, 128, 128, 0.137);

}

.footer-contact-icons {
  background-color: #00A98F;
  padding: 8px;
  border-radius: 100%;
}

.footer-border-box {
  border: 2px solid rgb(225 225 225 / 7%);
  border-radius: 10px;
}

.footer-contact-box {
  background-color: #0e579c85;
}

.footer-contact-envelop {
  background-color: transparent;
}

.footer-contact-location {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;

  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.footer-contact-phone {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.footer-contact-box p {
  margin: 1px;
}

.man-withcomputer ul li {
  width: 50%;
}

.register-div img {
  max-height: 75vh;
}

footer {
  /* background-image: url("../imgs/home/Component 962 - 109-image.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%; */
  background-color: #001A33;
}

li {
  list-style: none;
}

.register-div .position-absolute {
  background-image: url("../imgs/home/Rectangle 52.png");
}

.footer-desc::before {
  position: absolute;
  content: "";
  width: 40px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.233);
  top: -10px;
}

footer h6 {
  color: #FFFFFF;
  opacity: 75%;
}

/* .register-div {
  background: linear-gradient(to right, rgba(1, 162, 143, 0.5019607843), rgba(2, 91, 142, 0.5803921569));
} */

.slider7 .card-img-slider {
  width: 130px;
  height: 75px;
  overflow: hidden;
}

.counter {
  background-image: url("../imgs/home/Path2.png");
  background-position: right;
  background-repeat: no-repeat;
}

.subscrib {
  background-image: url("../imgs/home/Group 102431.png");
  background-position: center center;
}

.direction-ltr {
  direction: ltr;
}

.social li {
  list-style: none;
}

.login_back_img {
  background: linear-gradient(90deg, #339CFF 0%, #0AB095 100%);
  height: 100vh !important;
  position: relative;
  overflow: hidden;
}

.login-bg {
  left: -10%;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.social li a {
  text-decoration: none;
  width: 28px;
  height: 28px;
  text-align: center;
  line-height: 30px;
  font-size: 17px;
  margin: 0 7px;
  display: block;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background-color: #ffffff33;
  /* border: 1px solid rgba(255, 255, 255, 0.24); */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.socialFooter li a {
  text-decoration: none;
  width: 47px;
  height: 47px;
  text-align: center;
  line-height: 30px;
  font-size: 17px;
  margin: 0 7px;
  display: block;
  border-radius: 50%;
  position: relative;
  color: #fff;
  overflow: hidden;
  border: 1px solid #ffffff;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social li a::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  z-index: 2;
}

.social li a .icon {
  position: relative;
  color: var(--mainColor3);
  transition: 0.5s;
  z-index: 3;
}

.social-inf li a {
  border-radius: 30%;
  font-size: 15px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--mainColor1);
}

.mode-switch {
  display: flex;
  align-items: center;
  background-color: #FFFFFF45;
  border: none;
  border-radius: 250px;
  padding: 6px 12px;
  cursor: pointer;
  margin-right: 8px;
  transition: background-color 0.3s;
}

.mode-switch .icon img {
  width: 20px;
  height: 20px;
}

@media (min-width: 992px) {
    .col-lg-5 {
        text-align: start;
    }
}

.mode-switch .label {
  color: white;
  font-size: 12px;
  font-weight: 500;
  margin-right: 8px;
  line-height: 15px;
  padding: 5px;
}

.mode-switch.active {
  background-color: #2a90a2;
}


.social-inf li a:before {
  background: var(--mainColor1);
}

.social-inf li a .icon {
  color: var(--mainColor1);
}

.social-inf li a:hover .icon {
  color: var(--mainColor3);
}

.slider-circle .card {
  width: 200px;
  height: 200px;
  max-width: 100%;
}

.dropdown-toggle::after {
  display: none;
}

.dropdown-menu {
  text-align: right;
}

.nav-item .form-select {
  font-weight: inherit;
  background-position: left 0.75rem center;
  padding: 16px;
  width: 177px;
  height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #F5F7FA;
}

.nav-item .form-select2 {
  font-weight: inherit;
  background-position: left 0.75rem center;
  padding: 0.876rem 0.96rem 0.876rem 5.25rem;
  background-color: #F5F7FA;
}

.nav-item:hover {
  cursor: pointer;
}

.inf-list {
  text-align: left;
}

.modal.model-index {
  z-index: 111111;
  margin-top: 5%;
}

.dropdown-menu-nav {
  --bs-dropdown-min-width: 65vw;
  right: 0px;
}

.container {
  max-width: 93%;
}

.btn.dropdown-toggle {
  font-weight: 500;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
  border-color: var(--mainColor3);
}

.program-list li.active {
  background-color: var(--light);
  color: var(--mainColor1);
}

footer ul {
  list-style: disc;
  list-style-position: inside;
}

.dropdown-menu a {
  color: rgb(3, 3, 3) !important;
}

input[type=search] {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 12px center;
  background-size: 35px 15px;
  padding-inline: 40px;
  background-position: right 0.75rem center;
}

.breadcrumb-item.active {
  display: contents;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  content: "\f101";
  color: var(--mainColor5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-js .vjs-big-play-button {
  cursor: pointer;
  background-color: var(--mainColor3);
  border-radius: 50%;
  height: 2em;
  width: 2em;
}

.list-group {
  font-size: 20px;
  font-weight: 400;
}

.video-js .vjs-tech {
  border-radius: inherit;
}

.breadcrumb-item+.breadcrumb-item::before {
  float: right;
  padding-inline: var(--bs-breadcrumb-item-padding-x);
  color: white;
}

.breadcrumb-item a {
  color: var(--mainColor1);
  text-decoration: none;
}

.button-like {
  width: 51px;
  height: 41px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vjs-control-bar {
  border-radius: inherit;
}

.button-like {
  font-size: 25px;
  color: #d8cfcf;
}

.button-like-red {
  color: #E40000;
}

.span-sale {
  font-size: 15px;
}

.accordion-button {
  font-size: 15px;
}

.accordion-button:focus {
  box-shadow: none;
}

.btn-facebook,
.btn-google {
  font-size: 13px;
}

.btn-facebook {
  background-color: #2276C9;
}

.btn-facebook:hover {
  background-color: #16508a;
}

.btn-google {
  background-color: #CE0606;
}

.btn-google:hover {
  background-color: #750202;
}

.button-like {
  width: 51px;
  height: 41px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vjs-control-bar {
  border-radius: inherit;
}

.button-like {
  font-size: 25px;
  color: #d8cfcf;
}

.button-like-red {
  color: #E40000;
}

.span-sale {
  font-size: 15px;
}

.accordion-button {
  background-color: #e7f1ff !important;
  font-size: 15px;
}

.accordion-button:focus {
  box-shadow: none;
}

.btn-facebook,
.btn-google {
  font-size: 15px;
}

.btn-facebook {
  background-color: #2276C9;
}

.btn-facebook:hover {
  background-color: #16508a;
}

.btn-google {
  background-color: #CE0606;
}

.btn-google:hover {
  background-color: #750202;
}

.bg-gray {
  background-color: #e8e8eb;
}

.bg-gray.fa-heart {
  width: 25px;
  height: 25px;
}

.accordion-button:not(.collapsed) {
  color: var(--mainColor2);
}

.about-course {
  list-style-type: decimal;
  list-style-position: inside;
}

.about-course li {
  font-weight: 500;
  margin-block: 20px;
}

.about-course li ul {
  list-style: none;
}

.about-course li ul li {
  font-weight: 400;
  margin-block: 3px;
}

.password-container {
  position: relative;
  display: flex;
}

.toggle-password {
  position: absolute;
  left: 15px;
  top: 33%;
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.form-check-inline {
  margin-right: 0rem;
}

.form-check .form-check-input {
  float: right;
  margin-left: 0.5em;
}

/* footer h4 span {
  position: relative;
} */

/* footer h4 span:after {
  content: "";
  position: absolute;
  width: 99%;
  height: 3px;
  bottom: -7px;
  left: 0;
  background-image: url("../imgs/home/Group 763.png");
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
  transform: scaleX(1);
  transform-origin: bottom left;
} */

#carouselExampleDark .img-item {
  height: 740px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8%;
}

.carousel-indicators {
  bottom: 25%;
}

.gray-icon {
  fill: none;
}

.gray-icon:hover {
  fill: rgb(249, 160, 0);
  cursor: pointer;
}

.fa-thumbs-up:hover {
  color: green;
  cursor: pointer;
}

.btn-bg-load-more {
  background-color: var(--light);
  border: 1px solid var(--mainColor5);
  color: var(--mainColor5);
}

.btn-bg-load-type {
  border: 1px solid var(--mainColor1);
  color: var(--mainColor1);
}

.btn-bg-load-type.active {
  background-color: var(--light);
  border: 1px solid var(--mainColor1);
  color: var(--mainColor1);
}

.btn:active {
  border: 0px;
}

.tracks {
  background: linear-gradient(to right, #0AB095E5, #339CFFE5), url("../../imgs/home/building.png");
  height: 350px;
  background-position: center;
  background-size: cover;
}

.tracks-privacy {
  background: linear-gradient(to right, #0AB095E5, #339CFFE5), url("../imgs/home/3274bb2c78f3610773f6dd0e01cc1c05.png");
  height: 350px;
  background-position: center;
  background-size: cover;
}

.tracks-cart {
  background: linear-gradient(to right, #0AB095E5, #339CFFE5), url("../imgs/home/cartbackground.png");
  height: 350px;
  background-position: center;
  background-size: cover;
}

.tracks-terms {
  background: linear-gradient(to right, #0AB095E5, #339CFFE5), url("../imgs/home/9c412eee51b99059562111772c50aba8.png");
  height: 350px;
  background-position: center;
  background-size: cover;
}

.tracks-quastion {
  background: linear-gradient(to right, #0AB095E5, #339CFFE5), url("../imgs/home/f53b01bd892dd01a26b191d215abd6ea.png");
  height: 350px;
  background-position: center;
  background-size: cover;
}

.tracks-subscription {
  background: linear-gradient(to right, #0AB095E5, #339CFFE5), url("../imgs/home/subscription.jpeg");
  height: 350px;
  background-position: center;
  background-size: cover;
}

.tracks-training {
  background: linear-gradient(to right, #1285beeb, #1285beeb), url("../imgs/home/training.png");
  height: 350px;
  background-position: center;
  background-size: cover;
}

.tracks-Fillter {
  background: linear-gradient(to right, #1285beeb, #1285beeb), url("../imgs/home/Fillter.jpg");
  height: 350px;
  background-position: center;
  background-size: cover;
}

.tracks-Strok {
  background: linear-gradient(to right, #1285beeb, #1285beeb), url("../imgs/forum/Fourmjpeg.jpeg");
  height: 350px;
  background-position: center;
  background-size: cover;
}

.tracks-PaymentPage {
  background: linear-gradient(to right, #1285beeb, #1285beeb), url("../imgs/payment/paymentbackground.jpeg");
  height: 350px;
  background-position: center;
  background-size: cover;
}

.tracks .register-div {
  padding-inline: 100px;
}

.hover:hover {
  cursor: pointer;
}

.flex-shrink-0 img {
  max-height: 5rem;
  width: 5rem;
}

.tab-pane .flex-shrink-0 img {
  max-height: 3rem;
  width: 3rem;
}

.category-scroll {
  height: 350px;
  overflow-y: auto;
}

.progress-bar {
  background: var(--linear-gradient) !important;
}

.trainee-bar {
  background: var(--linear-gradient);
}

.tab-pane .form-check-input:checked {
  background-color: #1db874 !important;
  border-color: #1db874 !important;
}

.notifications-list li::before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: #1db874;
  border-radius: 50%;
  margin-top: 10px;
  margin-inline: 10px;
}

.nav-pills.nav-notes .nav-link {
  font-weight: 300;
}

.nav-pills.nav-notes .nav-link.active,
.nav-pills .show>.nav-link {
  color: var(--mainColor5);
  background-color: transparent;
  position: relative;
  font-weight: 700;
}

.nav-pills.nav-notes .nav-link.active::after,
.nav-pills .show>.nav-link::after {
  content: "";
  bottom: 0;
  height: 2px;
  width: 99%;
  display: flex;
  justify-content: center;
  background-color: var(--mainColor5);
  position: absolute;
  left: 0;
  right: 0;
}

.chat {
  max-width: 65%;
}

.msg-chat {
  background-color: #1DB874;
  color: white;
}

.chat-dir:nth-child(odd) {
  direction: rtl !important;
}

.padding-div-inline {
  padding-inline: 100px;
}

.chat-dir:nth-child(odd) .msg-chat {
  background-color: #EEEEEE;
  color: black;
}

.chat-dir:nth-child(even) {
  direction: ltr;
}

.course-accordion .accordion-button::after {
  display: none;
}

.accordion-button::after {
  margin-right: auto;
  margin-left: 0;
  background-color: var(--light) !important;
  padding: 1rem;
  border-radius: 50%;
  background-position: center;
}

.breadcrumb-item+.breadcrumb-item::before {
  color: var(--mainColor1);
}

.img-circle {
  width: 100px;
  height: 100px;
}

.card-img-container {
  background-image: url("../imgs/home/FL365_Free_Certs_Blog_Header-606x303.png");
  color: white;
}

.card-img-container .card-body p {
  color: white;
}

.card-img-container .img-circle {
  background-color: white;
}

.card-bottom-border .card-body {
  border-bottom: 10px solid #009C90;
  border-radius: inherit;
}

.modal {
  background-color: #041a3d5e;
  z-index: 1111111111111;
}

.modal-header .btn-close {
  margin-left: 0px;
}

.fa-xmark {
  width: 64px;
}

.payment .accordion-button {
  background-color: #e7f1ff !important;
}

.payment .accordion-button::after {
  background-color: transparent !important;
  border: 0px;
  transform: rotate(90deg);
  transition: transform 1s;
}

.payment .accordion-button:not(.collapsed)::after {
  background-image: var(--bs-accordion-btn-icon);
  transform: rotate(0deg);
}

.payment .accordion-button:not(.collapsed) {
  color: var(--mainColor2);
}

.payment .accordion-body {
  background-color: #f5f6f6;
}

.img-profile:hover {
  cursor: pointer;
}

.flex-shrink-0.img-profile .translate-middle {
  height: 25px;
  width: 25px;
}

.flex-shrink-0.img-profile .camera {
  max-height: 13px;
  width: 15px;
}

.profile.nav-justified .nav-item,
.profile.nav-justified .nav-justified>.nav-link {
  flex-basis: auto !important;
  width: 100%;
}

.profile.nav-justified .nav-link.active,
.profile.nav-justified .nav-pills .show>.nav-link {
  background-color: #E6F7F4;
  border: none !important;
  color: #0AB095;
}

.profile.nav-justified .nav-link.active .fa-angle-left {
  color: #33A18C;
}

.profile-span span.position-relative::after {
  content: "";
  width: 5px;
  top: 5px;
  right: 3px;
  bottom: 5px;
  background-color: var(--mainColor5);
  position: absolute;
  border-radius: 24%;
}

.bg-light-div-span.active {
  color: var(--light) !important;
  background: var(--linear-gradient);
}

.profile-span span.active::after {
  width: 0px;
}

ul.question li {
  position: relative;
  padding-block: 5px;
}

ul.question li::before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: var(--mainColor4);
  border-radius: 50%;
  position: absolute;
  top: 25%;
  right: -10px;
}

.english::after {
  margin-left: auto;
  margin-right: 0;
}

.arabic::after {
  margin-left: 0;
  margin-right: auto;
}

.dark-mode-style .modal-content {
  background-color: #000B16 !important;
}

.dark-mode-style .card-img-container .card-body {
  background-color: transparent;
}

.dark-mode-style .btn-outline-blue {
  border-color: white !important;
  color: white;
}

.dark-mode-style .offcanvas {
  color: white;
  background-color: #000B16;
}

.dark-mode-style .card-footer {
  background-color: #01172E !important;
}

.dark-mode-style .card-footer .text-black {
  color: white !important;
}

.dark-mode-style .about-course {
  color: white;
}

.dark-mode-style .search-input {
  background-color: #000B16 !important;
}

.form-select {
  color: black;
  background: white;
  border: 1px solid #ccc;
  appearance: none;
  position: relative;
}

.form-select::after {
  content: '\f107';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: rgba(0, 0, 0, 0.678);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.dark-mode-style .search-input {
  border: 1px solid #292929;
}

.dark-mode-style .details-list li {
  background-color: #000B16;
}

.dark-mode-style .design-darkmood {
  background-color: #01172E !important;
  border: 1px solid #4D4D4D !important;
  color: #fff !important;
}

.text-blue-darkmood {
  color: #003B71 !important;
  font-size: 14px;
  font-weight: 600;
}

.fa-arrow-left-long {
  font-size: 16px;
  padding-top: 5px;
}

.dark-mode-style .fa-arrow-left-long,
.dark-mode-style .text-blue-darkmood,
.dark-mode-style .card-link-details {
  color: #339CFF !important;
}

.dark-mode-style .triangle-down {
  border-top: 7px solid white
}

.remember-me {
  /* color: #00000099; */
  font-size: 14px;
}



.dark-mode-style .text-black-darkmood {
  color: black !important;
}

.dark-mode-style .man-withcomputer {
  background-color: #01172E !important;
}

.dark-mode-style .form-section-darkmood {
  background-color: #01172E !important;
  color: white !important;
}

.dark-mode-style .form-select {
  background-color: #222222;
  color: white !important;
}

.dark-mode-style .form-select::after {
  color: white !important;
}

.dark-mode-style .search-wrapper input {
  border: 1px solid #292929 !important;
  background-color: transparent !important;
}

.dark-mode-style .join-search-input-darkmood input {
  background-color: #01172E !important;
}

.dark-mode-style .overlay {
  background: #01172E;
}

.dark-mode-style .text-white-div {
  color: #fff !important;
}

.dark-mode-style .special-darkmood {
  color: #fff !important;
}

.dark-mode-style .text-seconary-div {
  color: #878787;
}

.search-wrapper {
  position: relative;
}

.search-wrapper input::placeholder {
  padding: 15px !important;
}

.search-icon {
  position: absolute;
  top: 5px;
  right: 10px;
  color: #1d202686;
  font-size: 14px;
}

.dark-mode-style .search-icon {
  color: #292929;
}

.dark-mode-style .filter {
  background-color: transparent;
  border: 1px solid #292929 !important;
}

.dark-mode-style .cart-nav svg path {
  stroke: white !important;
}

.dark-mode-style .card-body p {
  font-size: 15px;
  color: white;
}

.dark-mode-style .card {
  background-color: #01172E !important;
  border-radius: 12px !important;
}

.dark-mode-style .card-body span:nth-last-child(1) {
  color: white !important;
}

.dark-mode-style .card-body h6 {
  color: #fff !important;
}

.fa-search {
  position: absolute;
  top: 17px;
  right: 7px;
}

.dark-mode-style .fa-search {
  color: #2222228e;
}

.dark-mode-style a {
  text-decoration: none;
}

.dark-mode-style .dropdown-menu {
  color: white !important;
  background-color: #000B16 !important;
}

.dark-mode-style .dropdown-menu a {
  color: white !important;
}

.dark-mode-style .text-secondary {
  color: white !important;
}

.dark-mode-style .nav-pills .nav-link {
  /* color: white !important; */
}

.dark-mode-style .profile-sec {
  background-color: #298484 !important;
}

.dark-mode-style .bg-light {
  background-color: #000B16 !important;
}

.accordion-item {
  color: var(--bs-accordion-color);
  background-color: var(--bs-accordion-bg);
  border: #fff;
  margin-bottom: 10px;
}

.section-title-darkmood {
  color: black;
}

.dark-mode-style .section-title-darkmood {
  color: black;
}

.dark-mode-style .accordion-item,
.dark-mode-style .accordion-button {
  background-color: #005072 !important;
  color: white;
}

.dark-mode-style .degree-darkmood {
  color: #339CFF !important;
}

.dark-mode-style .arrow-white-bg {
  color: #009C90;
}

.dark-mode-style .arrow-white-text {
  color: #fff;
}

.dark-mode-style .nav-pills .nav-link {
  color: #fff;
}

.dark-mode-style .submenu li a {
  color: #000;
}

.dark-mode-style .has-submenu2 a:hover {
  color: #000;
}

.dark-mode-style .sidebar a {
  color: #fff;
}

.dark-mode-style .course-after-darkmood {
  background-color: #01172E !important;
}

.dark-mode-style .nav-pills .nav-link.active,
.dark-mode-style .nav-pills .show>.nav-link {
  color: #fff !important;
}


.dark-mode-style .my-svg svg path {
  stroke: #339CFF !important;
}

.dark-mode-style .navbar-toggler-darkmood svg path {
  stroke: #fff !important;
}

.arrow-white-bg {
  background-color: #fff;
  color: #009C90;
}

.dark-mode-style .plans-section {
  background-color: #01172E;
  border: none !important;
}

.dark-mode-style .fa-arrow-down-short-wide:before,
.fa-sort-amount-desc:before,
.fa-sort-amount-down-alt:before,
.dark-mode-style .fa-caret-up:before,
.dark-mode-style .icon-fillter {
  color: #fff;
}

.dark-mode-style .filter-section {
  background-color: #01172E;
  border: none !important;
}

.dark-mode-style .accordion-body {
  background-color: #01172E;
}

.dark-mode-style .accordion-button:not(.collapsed) {
  color: #fff !important;
}

/* .dark-mode-style .accordion-button::after {
  background-color: transparent !important;
} */

.dark-mode-style .fa-bars {
  color: white;
}

.required::after {
  content: "*";
  color: red;
}


.intl-tel-input.allow-dropdown {
  width: 100% !important;
}

.intl-tel-input.separate-dial-code .selected-flag {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.arabicVersion .intl-tel-input.separate-dial-code.iti-sdc-4 .selected-flag {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.arabicVersion .intl-tel-input.allow-dropdown .flag-container,
.arabicVersion .intl-tel-input.separate-dial-code .flag-container {
  left: auto !important;
  right: 0 !important;
}

.arabicVersion .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input,
.arabicVersion .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=text],
.arabicVersion .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=tel] {
  padding-left: 10px;
  padding-right: 92px;
  direction: rtl !important;
}

.arabicVersion .intl-tel-input.separate-dial-code .selected-flag {
  border-left: solid 1px rgba(221, 221, 221, 0.637);
  border-right: solid 0px rgba(221, 221, 221, 0.637);
}

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

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

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

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

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

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

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

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

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

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

.filter {
  background-position: left 0.75rem center;
  border: 1px solid #ced4da;
  text-align: start;
}

.header-div {
  background-image: url(../imgs/blogs/HeroSection.png);
  background-position: center center;
  background-repeat: no-repeat;
  height: 350px;
}

.layer-div {
  background: linear-gradient(90deg, hsla(170.24, 89.25%, 36.47%, 0.9) 0%, rgba(51, 156, 255, 0.9) 100%);
}

.hero-section {
  background: linear-gradient(to right, #1ABC9C, #2ECC71);
  height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 80px;
  color: white;
  text-align: center;
  font-family: "Alexandria", sans-serif;
}

.title {
  font-weight: 700;
  font-size: 40px;
  line-height: 48.76px;
  margin-bottom: 36px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 19.5px;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: underline;
}

.breadcrumb-item img {
  width: 20px;
  height: 20px;
}

.arrow {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.6);
}

.breadcrumb>.secondary {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

/* .filter {
  display: flex;
  align-items: center;
  padding: 16px 14px;
  border: 1px solid #e9eaf0ff;
  border-radius: 8px;
  gap: 12px;
} */
.filter img {
  width: 24px;
  height: 24px;
}

.filter-text {
  font-weight: 600;
  font-size: 14px;
  color: #00a98f;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  width: 400px;
  border: 1px solid #e9eaf0;
  border-radius: 8px;
  gap: 8px;
}

.search-bar input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: #a19eaa;
  font-weight: 300;
  font-size: 12px;
}

.search-bar img {
  width: 20px;
  height: 20px;
}

.card:has(.card-img-overlay) {
  height: 371px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: relative;
  cursor: pointer;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: all 0.4s;
}

.card:has(.card-img-overlay):hover {
  transform: scale(1.05);
}

.card:has(.card-img-overlay):hover .overlay {
  background: #01182E;
  opacity: 0.8;
  top: 0;
}

.card:has(.card-img-overlay):hover .display {
  display: flex !important;
}

.display {
  display: none !important;
}

.overlay-layer {
  background: linear-gradient(#01182E00 0%, #01182ECC 80%);
  background-position: center;
  background-size: cover;
}

.bg-img {
  height: 550px;
}

.overlay {
  background: #003566;
  padding: 20px;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  top: 65%;
  transition: all 0.4s;
}

.date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8980392157);
}

.blog-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 12px;
}

.blog-description {
  display: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.card:hover .blog-description {
  display: block;
}

.card:hover .blog-title {
  display: block;
  order: 2;
}

.button-container {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px 20px;
  border-radius: 5px;
  text-align: center;
  color: #003566;
  font-size: 16px;
  text-decoration: underline;
  white-space: nowrap;
}

.preview-text {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card {
  transition: all 0.9s ease;
}

.card:hover {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
}

.bg-1 {
  background-color: #00A98F21;
  height: 220px;

}

.bg-1 .bg-blue {
  background-color: var(--primaryColor);
}

.bg-2 {
  background-color: #0084BD1A;
  height: 220px;
}

.bg-2 .bg-blue {
  background-color: #0084BD;
}

.bg-3 {
  background-color: #FFC0001A;
  height: 220px;
}

.bg-3 .bg-blue {
  background-color: #FFC000;
}

.bg-white-50 {
  background-color: rgba(251, 251, 251, 0.4588235294);
  width: 30px;
  height: 30px;
}

.card-shadow {
  box-shadow: 10px 10px #00A98F;
}

.card-shadow .badge {
  box-shadow: 4px 4px black;
  background-color: #00A98F;
  border-radius: 20px;
}

.bg-opecity {
  background-color: rgba(255, 255, 255, 0.255);
}

.insights-section {
  background-image: url("../imgs/home/who-us.png");
  background-repeat: no-repeat;
  background-position: top right;
  color: white;
  background-color: #003566;
}

.join-us-section {
  background-color: white;
  color: #000;
  padding-top: 7% !important;
  padding-bottom: 7% !important;
}

.insights-section .feature-card {
  background: #0401151A;
  border: 1px solid #00A98F1A;
  border-radius: 16px;
  max-width: 600px;
  backdrop-filter: blur(15px);

}

.feature-card-first {
  width: 40%;
  height: 100%;
}

.insights-section .feature-card-inner {
  background: rgba(4, 1, 21, 0.1);
  border-radius: 16px;
}

.bg-layer-arrow {
  background-image: url("../imgs/home/ARRow.svg");
  background-repeat: no-repeat;
  background-position: right;
}

.bg-layer-arrow2 {
  background-image: url("../imgs/home/Vector 7.svg");
  background-repeat: no-repeat;
  background-position: bottom;
}

.bg-layer-arrow3 {
  background-image: url("../imgs/home/Background illustrations.svg");
  background-repeat: no-repeat;
  background-position: bottom left;
  /* color: #41bcba86; */
}

.prev-button,
.next-button {
  width: 40px;
  height: 40px;
  background-color: #E8F1FF;
  color: #2284CC;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 103%;
  position: absolute;
}

.prev-button:hover,
.next-button:hover {
  background-color: #2284CC;
  color: white !important;
}

.prev-button {
  left: 46%;
  background-color: #E8F1FF;
  color: 2284CC;
}

.next-button {
  right: 46.5%;
  background-color: #2284CC;
  color: white;
}

.sections.insights-section .feature-card {
  background: #FFFFFF40;
  border-radius: 8px;
  width: 215px;
  height: 100px;
  border: 1px solid #FFFFFF1A;
}

.feature-card-p {
  font-size: 10px;
  line-height: 16px;
  color: #F2F2F2;
  text-align: start;
  margin-top: 2%;
}

.rating .rate {
  border-left: 2px solid white;
}

.rating .rate:last-child {
  border-left: 0px solid white;
}

.slider7 .slick-dots li button {
  width: 35px;
  height: 5px;
  border-radius: 11px;
  background-color: #E8F1FF !important;
  border: 0px solid var(--mainColor3);
}

.slider7 .slick-dots li button {
  width: 35px;
  height: 5px;
  border-radius: 11px;
  background-color: #E8F1FF !important;
  border: 0px solid var(--mainColor3);
}

.slider7 .slick-dots li button {
  border-radius: 11px;
  background-color: #E8F1FF !important;
  border: 0px solid var(--mainColor3);
}

/*# sourceMappingURL=style.css.map */



.triangle-down {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid black;
}

.triangle-up {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
  /* Change this to point upwards */
  margin-left: 5px;
  margin-top: 10px;
}



/* الأقسام */
/* .dep {
  display: flex;
  flex-direction: column;
  gap: 10px;
} */

/* Custom vertical line between the columns */
.border-end {
  border-right: 2px solid #ccc;
}

@media (max-width: 767px) {

  /* Remove vertical line for small screens */
  .border-end {
    border-right: none;
    border-bottom: 2px solid #ccc;
  }

  #carouselExampleDark .img-item {
    height: auto !important;
    padding-top: 0;
  }

  .carousel-caption h3 {
    font-size: 20px;
    line-height: 35px;
    font-weight: 500;
  }

  .tag-icon {
    position: absolute;
    top: 57px;
    left: 19px;
  }
}

.list-subs li {
  margin-top: 20px;

}

/* مميزات الانضمام */
ul.plans-caption {
  display: flex;
  flex-wrap: wrap;
}

ul.plans-caption li {
  width: calc(50% - 10px);
  font-size: 1rem;
  margin-bottom: 20px;
}


@media screen and (max-width: 768px) {
  ul.plans-caption li {
    width: 100%;
  }
}

.custom-button {
  margin-right: -50px;
  background: linear-gradient(to right, #0AB095, #339CFF);
  color: white;
  width: 165px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 13px;
}

form .row .col-md-8,
form .row .col-md-4 {
  padding-right: 0;
  padding-left: 0;
}

form .row .col-md-4 {
  margin-left: -1px;
}

.about-us {
  background-color: #003A71;
}

.about-planb {
  width: 20px;
  height: 20px;
  margin: 5px;
}

.aboutus-img {
  /* background: url(../imgs/home/video.png); */
  /* height: Fixed (339px); */
  border-radius: 16px;
  border-radius: 10% !important;
}

.employee {
  background-color: #E8F1FF;
  padding: 10px;
  width: 85%;
  margin: auto;
}

.text-general {
  color: #0AB095;
}

.bg-general {
  background-color: #0AB095;
}

.border-general {
  border: 2px solid #0AB095;
  border-radius: 5px;
}

.about-us p {
  font-size: 14px;
  color: #FFFFFF;
}

.accordion-title a {
  cursor: pointer;
}

.sectionsix-caption {
  line-height: 2;
  color: #E6E6E6 !important;
}

.section-four-first-img {
  display: none;
}

.back-image {
  left: 15%;
  bottom: 30%;
  z-index: 1;
}

.back-img {
  margin-top: -50px !important;
}

.border-img,
.sec6-box {
  margin-top: -30px !important;
}

.image-layer {
  width: 75%;
}

.main-image {
  left: 20%;
  z-index: 3;
}

.middle-image {
  left: 26%;
  bottom: 18%;
  z-index: 2;
}

.FourthSection-trainer {
  padding-top: 10%;
  padding-bottom: 12%;
  background-color: #003B71;
}

.trainer-opinion-border {
  border: 1px solid var(--mainColor5);
  border-radius: 10px;
}

.small-slider {
  background: linear-gradient(to right, #2880CB, #0E8C8A);
  color: #E6E6E6;
}

.trainer-opinion-border span {
  color: #B3B3B3;
}

.trainer-opinion-badge {
  left: -2px;
  top: 7%;
}

.trainer-opinion-badge-caption {
  left: 50px;
  top: 13%;
}

.plans-img {
  margin-top: 0 !important;
  margin: auto !important;
}

.form-about {
  border: 1px solid rgba(128, 128, 128, 0.562);
  border-radius: 10px;
}

.form-img {
  bottom: 0;
  right: 0;
  z-index: 1;
}

.form-upload {
  margin-left: -13px;
  z-index: 2;
}

.trainer-form {
  z-index: 111;
  margin-bottom: 12%;
}

.profile-instructor {
  padding-top: 220px;
  padding-bottom: 30px;
}

.accordion-button-instructor {
  background-color: white !important;
}

.accordion-button::after {
  background-color: white !important;
}

.details-map {
  width: 470px;
  height: 250px;
}

.btn-outline-success {
  border: 1px solid #00A98F !important;
}

@media (max-width:1300px) {
  .details-map {
    width: 350px;
    height: 250px;
  }
}

@media (max-width:992px) {
  .sec6-box {
    margin-top: 20% !important;
  }

  .details-map {
    width: 250px;
    height: 250px;
  }

  .join-us-section {
    padding-bottom: 60% !important;
  }

  .join-us-tariner {
    margin-top: 0% !important;
    margin-bottom: 0% !important;

  }

  .join-us-tariner img {
    width: 30%;
    margin: auto !important;
  }

  .join-us-tariner-catpion {
    margin-bottom: 70px;
  }

  .back-img,
  .border-img,
  .outer-img {
    width: 75%;
  }

  .footer-border-box {
    flex-direction: column !important;
    margin-bottom: 10px;
  }

  footer .footer-icons {
    display: flex;
  }

  .footer-contact-box {
    background-color: transparent;
    justify-content: start !important;
  }

  .footer-contact-box p {
    font-size: 13px;
    text-align: start;
  }

  .footer-download {
    display: flex;

  }


  .prev-button {
    left: 40%;
  }

  .next-button {
    right: 40%;
  }

  .image-layer {
    width: 100%;
    left: 0;
  }

  .main-image,
  .middle-image,
  .back-image {
    bottom: 10%;
  }

  .rating .rate:last-child,
  .rating .rate {
    border: none;
  }

  .section-four-img {
    backdrop-filter: blur(120px);
    text-align: center;
    margin-bottom: 10px !important;
  }

  .section-four-first-img {
    display: block;
    justify-content: center;
    display: flex;
    margin-bottom: 20px;
  }

  .feature-box {
    flex-direction: column !important;
    align-items: center;
  }

  .feature-card-first {
    width: 100%;
  }

  .profile-top {
    padding-top: 80px;
  }

}

@media (max-width:768px) {
  .join-us-tariner img {
    width: 100%;
    left: 0;
    margin: auto;
    right: 0;
    top: 0;
    bottom: 20px;
  }

  .FourthSection-trainer {
    padding-bottom: 0;
  }

  .join-us-tariner-catpion {
    margin-bottom: 20px;
  }

  .trainer-opinion-badge,
  .trainer-opinion-badge-caption {
    display: none !important;
  }

  .plans-img {
    margin-top: 50px !important;
  }
}


.pricing-container {
  display: flex;
  gap: 20px;
}

.pricing-card {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  height: 610px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.pricing-card.recommended {
  border: 1px solid #2C9FEE;
  position: relative;
  border-radius: 8px;
}

.recommended-badge {
  top: -10px;
  background-color: #2C9FEE;
  color: white;
  padding: 4px 10px;
  font-size: 0.8rem;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;

}

.plan-icon {
  font-size: 1.2rem;
  margin: 10px 0 0 0;
}

.plan-name {
  font-size: 32px;
  font-family: Alexandria;
  font-weight: 500;
  margin: 0;
  color: #0D0D0D;
  line-height: 39.01px;
}

.Line {
  margin: 1rem 0;
  border: 0;
  border-top: 1px solid;
  color: #b8b8b8;
}

.plan-price {
  font-size: 1.2rem;
  color: #003566;
  margin: 10px 0 0 0;
}

.Price {
  font-size: 14px;
  color: #999999;
  text-decoration: line-through;
}

.feature-list {
  list-style-type: none;
  padding: 0;
  text-align: right;
  margin: 20px 0;
  color: #666;
}

.feature-list li {
  margin: 17px 0;
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 28.5px;
}

.feature-list li .fa-check-circle {
  color: #2C9FEE;
  margin-left: 8px;
  font-size: 22px;
}

.subscribe-button {
  background: linear-gradient(90deg, #3b5bdb, #3db9e5);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.subscribe-button:hover {
  background: linear-gradient(90deg, #3db9e5, #3b5bdb);
}

.courses-hero {
  background: linear-gradient(to right, #0ab094af, #339cffb6, #00000056), url("../imgs/new/courses/course-hero.png");
  height: 760px;
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
  padding-top: 135px;

}

.courses-hero .register-div {
  padding-top: 7%;
}

.courses-hero .hero-caption {
  bottom: 90px;
  right: 90px;
  color: white;
  width: 630px;
}

.courses-hero .hero-caption h2 {
  font-size: 30px;
  font-weight: bold;
}

.courses-hero .hero-caption p {
  line-height: 190%;
  font-size: 15px;
}

.about-course h4 {
  font-size: 24px;
  color: #000000;
}

.about-courses-caption {
  color: #666666;
  font-size: 14px;
}

.about-course {
  /* padding-left: 4%; */
  padding-right: 4%;
}

.about-course-left h6 {
  font-size: 20px;
  color: #1A1A1A;
}

.about-course-left span {
  font-size: 14px;
  color: #666666;
}

.about-course-left p {
  font-size: 16px;
  font-weight: bold;
  color: #1A1A1A;
}

.course-include {
  /* box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.048); */
  box-shadow: 2px 0px 10px #003a7117;
}

.about-course-left {
  margin-top: -32%;
  z-index: 1;
}

.break {
  display: none;
}

.course-share button {
  border: 1px solid #00A98F;
  border-radius: 12px;
  width: 200px;
  height: 53px;
  background-color: white;
}

.course-share button span {
  font-size: 14px;
  color: #00A98F;
}

.course-share .fa-share-nodes {
  color: #00A98F;
  padding: 7px;
  border: 1px solid #00A98F;
  border-radius: 50%;
  margin-right: 10px;
}

.course-share .fa-heart {
  color: #339CFF;
  padding: 7px;
  border: 1px solid #339CFF;
  border-radius: 50%;
  margin-right: 10px;
}

.about-course-top {
  display: none;
}

.fa-lock {
  color: #B3B3B3;
}

.study .accordion-button:not(.collapsed) {
  background-color: #E8F4F9 !important;
}

.study .accordion-button::after {
  background-color: rgba(51, 156, 255, 1) !important;
  color: white !important;
}

.discussion-btn button {
  width: 302px;
  height: 56px;
  border-radius: 8px;
  background: linear-gradient(to right, #009C90, #339CFF);
  border: none;
  color: white;
  margin-bottom: 20px;
}

.write-comment {
  width: 108px;
  height: 49px;
  border-radius: 8px;
  background-color: white;
  border: 1px solid #009C90;
  color: #009C90;
  font-weight: 600;
  font-size: 13px;
}

.view-more button {
  font-size: 14px;
  width: 164px;
  height: 56px;
  border-radius: 8px;
  background-color: white;
  border: 1px solid #009C90;
  color: #009C90;
}

.send-comment {
  font-size: 14px;
  width: 302px;
  height: 56px;
  border-radius: 8px;
  background: linear-gradient(to right, #009C90, #339CFF);
  border: none;
  color: white;
  display: block;

}

.add-comment {
  margin-top: 50px;
}

.add-comment h6 {
  font-size: 28px;
  font-weight: bold;
  color: #000000;
}

.add-comment form textarea {
  width: 100%;
  height: 151px;
  border: 1px solid #E8F4F9;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 10px;
}

.tests {
  padding-bottom: 20%;
}

.tests h6 {
  font-size: 24px;
  color: #1A1A1A;
}

.tests span {
  color: #00A98F;
  font-size: 12px;
}

.test-rate-box {
  background-color: rgba(0, 169, 143, 0.1);
  border-radius: 15px;
  width: 120px;
  height: 28px;
  text-align: center;
}

.forget-pass-box {
  padding-right: 80px;
}

.otp-box {
  padding-right: 80px;
}

.login-page {
  /* font-family: "Alexandria", sans-serif; */
}

.caption-auth-box {
  height: 105vh;
}

@media(max-width:768px) {
  .login-bg {
    right: 0%;
  }

  .consultation-box .consultation-img {
    width: 50px !important;
    height: 50px !important;
  }

  .consultation-box h6,
  .consultation-box span {
    font-size: 10px !important;
  }

  .table-th-consolation,
  .table-content-consulation {
    font-size: 10px !important;
  }

  .verify,
  .check-btn {
    width: 100% !important;
  }

  .custom-gap {
    gap: 0.5rem;
    /* تقليل المسافة على الشاشات الصغيرة */
  }

  .verify {
    height: 50px !important;
  }

  .forget-pass-box {
    padding-right: 0px;
  }

  .otp-box {
    padding-right: 0px;
  }

  .courses-hero .register-div h2 {
    font-size: 28px !important;
  }

  .about-course {
    padding-right: 0;
  }

  .about-course-top {
    display: block;
  }

  .courses-hero {
    height: 488px;
  }

  .courses-hero .register-div {
    padding-top: 10%;
  }

  .about-course-left {
    margin-top: 0;
    z-index: 0;
    margin-bottom: 20px;
  }

  .about-course-bottom {
    display: none;
  }

  .courses-hero .hero-caption {
    right: 0px;
    bottom: 0px;
    width: 100%;
    padding: 20px;
  }

  .courses-hero .hero-caption h2 {
    font-size: 20px;
  }

  .courses-hero .hero-caption p {
    font-size: 10px;
  }

  .break {
    display: block !important;
  }

  .caption-auth-box {
    height: auto !important;
  }

  .login_back_img,
  .login_caption {
    height: auto !important;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .login_back_img h4 {
    font-size: 22px !important;
  }

  .login-bg {
    display: none;
  }

  .facebook-btn {
    margin-bottom: 20px !important;
  }

  .subscripe-news {
    width: 100% !important;
    height: 48px !important;
    margin-bottom: 10%;
  }
}

.test-table span {
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-weight: bold;
  border-radius: 50%;
  text-align: center;
}

.test-box-one span {
  background-color: #FFA800;
  padding: 3px 12px;

}

.test-box-one .crown {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.test-box-three span {
  background-color: #934928;
  padding: 3px 11px;
}

.test-box-two span {
  background-color: #B4B4B4;
  padding: 3px 12px;

}

.imgRegister {
  overflow: hidden;
  margin-top: -20px;
}

.imgRegisterOtp {
  overflow: hidden;
  margin-top: -60px;
}

.social2 li {
  list-style: none;
}

.social2 li a {
  text-decoration: none;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 30px;
  font-size: 17px;
  margin: 0 7px;
  display: block;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.5215686275);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social2 li a::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  z-index: 2;
}

.social2 li a .icon {
  position: relative;
  color: var(--mainColor3);
  transition: 0.5s;
  z-index: 3;
}

.social2 li a:hover .icon {
  color: #001a33;
  transform: rotateY(360deg);
}

.social2 li a:hover::before {
  top: 0;
}

.social2 li a:before {
  background: var(--mainColor3);
}

.input-group-text img {
  width: 24px;
  height: 16px;
  margin-right: 8px;
}

.input-group select {
  border: none;
  background: transparent;
  font-size: 0.95rem;
}

.accordion-button:not(.collapsed) {
  color: #034A8C;
}

.accordion-body {
  font-size: 14px;
}

.register-label {
  /* color: #1D2026; */
  font-weight: 500;
  font-family: 'Alexandria';
}

.dark-mode-style .register-label {
  color: #fff !important;
}

.dark-mode-style .form-check-label {
  color: #FFFFFF !important;
}

.dark-mode-style .register-label,
.dark-mode-style .remember-me,
.dark-mode-style .text-white-darkmood {
  color: white !important;
}

.dark-mode-style .text-dark-darkmood {
  color: #000 !important;
}

.form-control::placeholder {
  color: #A19EAA;
  font-size: 12px;
  font-weight: 300;
}

.index-hero-sec {
  background: linear-gradient(270deg, #339CFF 0%, #0AAE98 100%);
  height: 700px;
  display: flex;
  padding-top: 14%;
  justify-content: center;
  align-items: center;
}

.gradient-border {
  border: none;
  background: #fff;
  border-radius: 8px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 1px;
  /* سماكة الإطار */
  background: linear-gradient(90deg, #339CFF 0%, #0AB095 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}

.gradient-text {
  background: linear-gradient(90deg, #339CFF 0%, #0AB095 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.payment-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin: 5% 0;
  padding: 50px;
}

.payment-card .text-top {
  font-size: 24px;
  font-weight: 700;
  line-height: 25px;
  color: #00A98F;
  margin: 2% 0;
}

.payment-card p {
  font-size: 32px;
  font-weight: 500;
  line-height: 48px;
}

.payment-card p span {
  color: #00A98F;
}

.payment-icon img {
  width: 135px;
}

.qr-code img {
  width: 290px;
  height: 280px;
}

.payment-options p {
  margin: 0;
}

.payment-options .text-danger {
  color: #e63946;
}

.payment-options .text-success {
  color: #2a9d8f;
}

.payment-options .text-warning {
  color: #e9c46a;
}

.box-card-shadow {
  box-shadow: 0px 4px 8px 0px #0000000F;
}

/* 
.empty-wishlist-bg {
  position: absolute;
  bottom: 0;
  right: 0;
} */
.directionsec {
  display: flex;
  flex-direction: row-reverse;
}

.red-text p {
  font-size: 13px;
  font-weight: 400;
  line-height: 12px;
  text-align: center;
  padding: 20px;
  color: #FA3147;
}

.red-text {
  background: #FA314724;
  border-radius: 8px;
  margin: 15px 0;
}

.blog-details-text p {
  font-size: 12px !important;
  line-height: 26px !important;
}

.mainBtn4 {
  background: var(--linear-gradient);
  border: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 17px;
  height: 56px;
  width: 166px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

/* تحديد العنصر النشط (active) في nav-pills */
.nav-pills .nav-link.active {
  border-bottom: 3px solid #0AAE98;
  border-radius: 0;
  font-weight: 600;
}

.video-thumbnail {
  position: relative;
  display: inline-block;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.video-image {
  width: 100%;
  display: block;
  border-radius: 8px;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #00d2ff, #3a7bd5);
  color: white;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 50%;
  font-size: 2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.play-button:hover {
  transform: translate(-50%, -50%) scale(1.1);
}
.leatherboard-left {
    width: 45%;
}
.student-img-wrap {
    margin: 0 16px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    overflow: hidden;
}
.font-medium {
    font-weight: 500;
}
.color-heading, .booking-history-past-table.table th {
    color: var(--heading-color);
}
.paymentcomplete-card{
  background-color: #fff;
  padding: 32px;
  margin: 20% 0;
}
.merit-list-leatherboard .leatherboard-item, .student-own-leatherboard .leatherboard-item {
    background-color: var(--white-color);
}
.course-watch-leatherboard-area {
    padding: 20px 18px;
    border: 1px solid #e5e8ec;
    border-radius: 6px;
}
.all-leatherboard-wrap .course-watch-leatherboard-area:not(:last-child) {
    margin-bottom: 30px;
}