/* global */

body {
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Tajawal', sans-serif !important;
  background: #FBFBFD !important;
  position: relative !important;
}

:root{
  --main-color : #0166ff;
}

.toast {
  display: block;
  position: fixed;
  bottom: 40px;
  right: 10px;
  color: #fff !important;
  padding: 10px;
}

.pagination.py-2 {
  display: inline-block;
  width: 45px;
}

.toast-error {
  background: #aa0000 !important;
  color: #fff;
}

.toast-success {
  background: #3eaa00 !important;
  color: #fff;
}

a {
  text-decoration: none !important;
}

/* body .container {
  padding: 0 20px;
} */

/* navbar */

.nav-front {
  position: sticky !important;
  top: 0;
  background-color: #0166FF;
  z-index: 88;
}

.nav-front.scrolled {
  background-color: #0166FF !important;
}

.image_logo {
  width: 75px;
}

img {
  max-width: 100%;
}

.navbar .nav-link {
  font-size: 16px;
  font-weight: 500;
  line-height: 28.8px;
  color: rgba(204, 224, 255, 1);
}

.navbar .active {
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  color: rgba(255, 255, 255, 1) !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.nav-btns {
  display: flex;
  align-items: center;
}

.nav-btns .login-btn {
  padding: 8px 16px 8px 16px;
  border-radius: 2px;
  color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(255, 255, 255, 1);
  background: transparent;
  margin: 0 5px;
}

.nav-btns .create-btn {
  padding: 8px 16px;
  border-radius: 2px;
  background: rgba(1, 71, 178, 1);
  color: rgba(255, 255, 255, 1);
  border: 2px solid rgba(1, 71, 178, 1);
  margin: 0 5px;
}
.nav-btns .create-btn:hover,
.nav-btns .create-btn-outline:hover,
.nav-btns .create-btn-outline:active,
.nav-btns .create-btn-outline:focus-visible{
  background: rgba(1, 71, 178, 1);
  color: rgba(255, 255, 255, 1);
  border: 2px solid rgba(1, 71, 178, 1);
}

.nav-btns .create-btn-outline {
  padding: 8px 16px;
  border-radius: 2px;
  background: transparent;
  color: #ffff;
  border: 2px solid #ffff;
  margin: 0 5px;
}
.fa-cart-shopping,
.fa-heart {
  color: rgba(255, 255, 255, 1);
  font-size: 20px;
  margin: 0 5px;
  cursor: pointer;
}

.nav-link:focus {
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  color: rgba(255, 255, 255, 1) !important;
}

.navbar .active:hover {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 28.8px !important;
  color: rgba(255, 255, 255, 1) !important;
}

.nav-link:hover {
  font-size: 16px;
  font-weight: 500;
  line-height: 28.8px;
  color: #fff !important;
  border-bottom: 1px solid #fff;
}

.parent-notification {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.badge {
  padding-left: 9px;
  padding-right: 9px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 50%;
}

#lblCartCount {
  font-size: 10px;
  background: rgba(197, 0, 48, 1);
  color: #fff;
  padding: 3px 5px;
  vertical-align: top;
  position: absolute;
  top: 5px;
  right: 0;
}

.navbar .left-sec {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.navbar .dropdown .dropdown-toggle {
  line-height: 70px;
  display: inline-block;
  padding-right: 15px;
}

.navbar .dropdown .dropdown-menu {
  position: absolute;
  border: none;
  min-width: 270px;
  box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
  padding: 0;
}


.navbar .dropdown .profile-notification .pro-head {
  color: rgba(26, 26, 26, 1);
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  border-radius: 0.25rem 0.25rem 0 0;
  padding: 15px;
  position: relative;
  background: rgba(250, 250, 250, 1);

}

.navbar .dropdown .profile-notification .pro-head {
  text-align: left;
}


.navbar .dropdown .profile-notification .pro-body {
  padding: 0;
  margin-bottom: 0;
  list-style: none;
  border-bottom: 1px solid rgba(250, 250, 250, 1);

}

.navbar .dropdown .no-border {
  border: none !important;
}

.navbar .dropdown .profile-notification .pro-body li a {
  color: #888;
  font-size: 14px;
  padding: 10px 20px;
}

.navbar .dropdown .profile-notification .pro-body li a {
  text-align: left;
  display: flex;
  align-items: center;
  gap: .5rem;
}


.navbar .topbarImg {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  background-color: rgba(250, 250, 250, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar .dropdown button {
  border: none;
  cursor: pointer;
  background: transparent;
}

.navbar .dropdown button:focus {
  outline: none;
}

.dropdown-toggle::after {
  color: rgba(250, 250, 250, 1) !important;
  vertical-align: top;
  left: -15px;
  bottom: 45%;
  position: absolute;
}

.pro-head .imgBx2 img {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  object-fit: cover;
  display: flex;
  align-items: center;
  margin: 0 10px;
}

.pro-body i {
  color: rgba(26, 26, 26, 1);
}

.pro-body a {
  font-size: 14px;
  font-weight: 700;
  line-height: 25.2px;
  color: rgba(26, 26, 26, 1) !important;
}

.fa-subtitles {
  font-size: 17px;
}

.fa-comment-dots,
.fa-gear {
  font-size: 18px;
}

.navbar .drp-user .pro-head p {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(128, 128, 128, 1);
}

.fa-globe {
  color: white;
  font-size: 18px;
}

.collapse .lang {
  font-size: 16px;
  cursor: pointer;
  color: white
}

.lang .dropdown-menu .sec {
  text-align: center;
  cursor: pointer;
  margin: 5px 0;
  padding: 5px 10px;
  transition: all 0.2s ease;
}

.lang .dropdown-menu .sec:hover {
  color: white;
  background: var(--main-color);
}

.lang .dropdown-menu .sec:hover a {
  color: white !important;
}

.lang p {
  margin: 0;
  text-align: center !important;
}

.lang .dropdown-menu {
  min-width: 50px !important;
  border-radius: 4px !important;
}

.navbar-nav {
  margin-left: initial !important;
  margin-right: auto !important;
  padding-left: 2rem;
  padding-right: 0;
}

.navbar .dropdown-menu[data-bs-popper] {
  right: 0;
  left: initial;
}

#toggleButton-nav {
  display: none;
}

.sidebar .fa-xmark {
  position: absolute;
  right: 10px;
  top: 10px;
}

.close-sidebar {
  display: none !important;
}

.fa-xmark {
  color: var(--main-color);
  padding: 6px 8px;
  background: rgba(244, 245, 248, 1);
  border-radius: 2px;
  font-size: 18px;
  transition: all 0.5s ease;
}

.fa-xmark:hover {
  background: #edeff3;
}

/* footer */
.footer-parent .footer1 {
  background: var(--main-color);
  padding: 30px 0;
}

.footer-parent .footer2 {
  background: rgba(1, 82, 204, 1);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer2 h6 {
  color: rgba(204, 224, 255, 1);
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
}

.footer2 a {
  color: rgba(204, 224, 255, 1);
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  cursor: pointer;
}

.footer2 a:hover {
  color: rgba(204, 224, 255, 1);
}

.social {
  display: flex;
  justify-content: center;
}

.social a,
.social a:hover {
  color: #24427D;
  background-color: #D3D9E5;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 15px 5px 0;
}

.footer1 p {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(255, 255, 255, 1);
  margin-top: 20px;
  text-align: justify;
}

.footer1 h5 {
  font-size: 18px;
  font-weight: 700;
  line-height: 32.4px;
  color: rgba(255, 255, 255, 1);
}

.footer1 h5::after {
  content: "";
  display: block;
  height: 2px;
  width: 64px;
  background: rgba(204, 224, 255, 1);
  margin: 20px 0 30px 0;
}

.footer1 h6 {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(204, 224, 255, 1);
  cursor: pointer;
  margin-bottom: 15px;
}

.footer1 h6 span {
  color: rgba(255, 255, 255, 1);
}

.footer1 .col-lg-4 .ms-5 {
  margin-right: 3rem !important;
  margin-left: 0 !important;
}

.footer1 h6 span {
  margin-right: .25rem !important;
  margin-left: 0 !important;
}

/* login page */

.content.home-sec{
  margin-top: -107px;
}

.login-sec {
  box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
  border: none;
  transition: all 0.5s ease-in-out;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 40px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(235, 235, 235, 1);
  padding: 40px;
  width: 625px;
}

.login-sec h3,
.head-info h3 {
  font-size: 22px;
  font-weight: 700;
  color: rgba(26, 26, 26, 1);

}

.login-sec .form-input {
  position: relative;
  width: 100%;
  margin-bottom: 15px;
}

.login-sec .form-input input {
  box-sizing: border-box;
  padding: 13px 45px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  width: 100%;
  margin: 20px 0 0;
  font-size: revert !important;
}

.login-sec .form-input textarea {
  margin-top: 20px;
}

.login-sec .form-input input:focus,
.login-sec .form-input textarea {
  outline: none;
  box-shadow: 0px 2px 10px rgba(27, 26, 29, 0.1);
}

.login-sec .form-input span {
  padding: 0 10px 0 0;
  position: absolute;
  top: 32px;
  right: 0;
  color: rgba(153, 153, 153, 1);
  font-size: 18px;
}

.login-sec .form-input label {
  position: absolute;
  top: -13px;
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(0, 0, 0, 1);
}

.login-sec .btn-login {
  background: #005c9a;
  color: white;
  width: 100%;
  height: 45px;
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  width: 100%;
  padding: 8px 16px 8px 16px;
  border-radius: 2px;
  background: var(--main-color);
  border: none;
}

.login-sec .form-check .form-check-input {
  float: initial;
  margin-left: -1.5em !important;
  margin-right: initial;
  cursor: pointer;
}


.login-sec .form-check {
  padding-right: 2rem !important;
}


.login-sec .form-check label {
  cursor: pointer;
}

.login-sec .btn-google {
  padding: 14px 16px 14px 16px;
  border-radius: 2px;
  width: 100%;
  background: rgba(242, 247, 255, 1);
  border: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 22.4px;
  color: rgba(26, 26, 26, 1);
  display: block;
}

.login-btns label {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(102, 102, 102, 1);

}

.login-btns span {
  font-size: 14px;
  font-weight: 700;
  line-height: 25.2px;
  color: var(--main-color);

}

.forget-word {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: var(--main-color);
}

.forget-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(102, 102, 102, 1);
}

.login-sec h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 32.4px;
  color: rgba(26, 26, 26, 1);
  padding-bottom: 25px;
}

.content .head-info {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 625px;
  margin: 40px 0 0 0;
  text-align: center;
}

.content .personal-sec {
  box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
  border: none;
  transition: all 0.5s ease-in-out;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 10px 40px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(235, 235, 235, 1);
  padding: 20px 40px !important;
  width: 625px;
}

.select2-container--default  .select2-search__field {
  display: none;
}

.select2-container--default .select2-selection--multiple {
  border: 1px solid #d9d9d9 !important;
}

.birthday-sec label,
.personal-sec label {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(0, 0, 0, 1);
}

.select2-selection--multiple {
  padding: 4px 0;
  height: initial !important;
  font-size: 14px;
}

.select2-results__option--selectable {
  font-size: 14px;
  font-weight: 500;

}

.skip-btn {
  padding: 8px 24px 8px 24px;
  border-radius: 2px;
  border: 1px solid var(--main-color);
  color: var(--main-color);
  font-size: 14px;
  font-weight: 700;
  line-height: 28.8px;
  background: transparent;
}

.save-btn {
  padding: 8px 24px 8px 24px;
  border-radius: 2px;
  border: 1px solid var(--main-color);
  background: var(--main-color);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 28.8px;
}

.personal-btns {
  width: 625px;
}

/* courses */

.user-header {
  background: rgba(242, 247, 255, 1);
}

.imgBx {
  margin: 50px 0;
}

.imgBx h6 {
  font-size: 16px;
  font-weight: 700;
  line-height: 25.2px;
  color: rgba(26, 26, 26, 1);
  margin-bottom: 5px !important;
}

.imgBx p {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(77, 77, 77, 1);

}

.imgBx img {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50px;
  object-fit: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
}

.course-btns .active-class {
  padding: 8px 40px 8px 40px;
  background: rgba(251, 251, 253, 1);
  border: 1px solid rgba(204, 224, 255, 1);
  border-bottom: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  color: rgba(26, 26, 26, 1);

}

.course-btns button {
  padding: 8px 40px 8px 40px;
  background: transparent;
  border: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  color: rgba(26, 26, 26, 1);

}

.imgBx2 img {
  position: relative;
  width: 25px;
  height: 25px;
  border-radius: 50px;
  object-fit: cover;
  display: flex;
  align-items: center;
  margin: 0 10px;
}

.progress-bar {
  animation: progress-anim 0.5s;
  background: var(--main-color) !important;

}

.progress {
  height: 10px !important;
}

@keyframes progress-anim {
  from {
    width: 0;
  }

  to {
    width: 50%;
  }
}

#route1 .card .rate-level {
  margin: 6px 0 0 0 !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(26, 26, 26, 1);
}

#route1 .card .card-text,
#route2 .card .card-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(102, 102, 102, 1);
  margin-bottom: 0;
}


#route1 .card .teacher-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(26, 26, 26, 1);

}

#route1 .card .card-title,
#route2 .card .card-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 32.4px;
  color: rgba(26, 26, 26, 1);

}

#route1 .card .card-img-top,
#route2 .card .card-img-top {
  height: 198px;
  width: 100%;
}

#route1 .card .card-body,
#route2 .card .card-body {
  padding: 0.5rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#route1 .card .dropdown,
#route2 .card .dropdown {
  position: absolute;
  left: 20px;
  top: 15px;
  cursor: pointer;
}

#route1 .card .fa-ellipsis-vertical {
  font-size: 20px;
}

#route1 .dropdown-menu {
  border-radius: 4px;
  right: -150px !important;
}

#route1 .dropdown-menu .sec {
  text-align: center;
  cursor: pointer;
  margin: 0 !important;
  padding: 5px 10px;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 700;
  line-height: 25.2px;
}

#route1 .dropdown-menu .sec:hover {
  color: white;
  background: var(--main-color);
}

.card-heart {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px;
  border-radius: 5px;
}

#route2 .fa-heart {
  padding: 5px;
  background: #9b9bcd;
  border-radius: 5px;
}

#route2 .fa-cart-plus {
  color: white;
  background: var(--main-color);
  padding: 8px 8px 6px 6px;
  font-size: 16px;
  border-radius: 2px;
  cursor: pointer;
}

#route2 .price {
  font-size: 18px;
  font-weight: 700;
  line-height: 32.4px;
  color: var(--main-color);
  margin: 0;
}

#route2 .price-cont span {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(179, 179, 179, 1);
  text-decoration: line-through;
  margin: 0 5px;
}

/* home */

.afedny-sec {
  background-image: url("../images/Intersect.png");
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center !important;
  height: calc(100vh + 42px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.afedny-sec h5 {
  font-size: 48px;
  font-weight: 700;
  line-height: 86.4px;
  color: rgba(255, 255, 255, 1);
}

.afedny-sec p {
  font-size: 20px;
  font-weight: 400;
  line-height: 36px;
  color: rgba(255, 255, 255, 1);

}

.sec1 {
  border-radius: 4px;
  width: 298px !important;
  padding: 0 !important;
  position: relative;
  height: 288px !important;
  overflow: hidden;
}

.sec1 .inner-sec1 {
  position: absolute;
  bottom: 0;
  z-index: 6;
}

.layer-sec1 {
    position: absolute;
    top: 0;
    background: linear-gradient(0deg, rgba(1, 102, 255, 0.1), rgba(1, 102, 255, 0.1)), linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, #000000 100%);
    z-index: 5;
    height: 100%;
    width: 100%;
}

.sec1 img {
  width: 298px;
  height: 288px;
  z-index: 4;
  position: absolute;
  top: 0;
}

.sec1:hover img {
  transform: scale(1.1);
  transition: all 0.5s ease-in-out;
}

.sec1 h6 {
  font-size: 20px;
  font-weight: 700;
  line-height: 36px;
  color: #ffff;
}

.sec1 p {
  font-size: 14px !important;
  line-height: 25.2px !important;
  color: #ffff !important;
}

.afedny-sec img {
  margin-bottom: 10px;
}

.afedny-sec .container {
  width: 75%;
  padding-top: 120px;
}

.navbar-home {
  position: absolute !important;
  top: 0 !important;
  width: 100% !important;
  background: transparent;
}

.title-sec {
  font-size: 24px;
  font-weight: 700;
  line-height: 57.6px;
  color: rgba(26, 26, 26, 1);
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 10px;
}

.title-sec span {
  display: block;
  width: 30px;
  height: 4px;
  background: var(--main-color);
  border-radius: 100px;
  margin-left: 0;
  margin-right: 10px;
}

.courses-sec p,
.why-afedny p,
.article-sec p,
.rate-sec p,
.depart-sec p {
  font-size: 18px;
  font-weight: 500;
  line-height: 32.4px;
  color: #666666;
}

.courses-sec .w-80,
.why-afedny .w-80,
.article-sec .w-80,
.rate-sec .w-80,
.depart-sec .w-80 {
  width: 70%;
}

.courses-sec .sec-btn,
.article-sec .sec-btn {
  padding: 8px 16px 8px 16px;
  border-radius: 2px;
  border: 1px solid var(--main-color);
  color: var(--main-color);
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;

}

.courses-sec .sec-btn span i,
.article-sec .sec-btn span i {
  rotate: 180deg;
}

.courses-sec .card .card-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(102, 102, 102, 1);

}

.courses-sec .card .card-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 32.4px;
  color: rgba(26, 26, 26, 1);

}

.courses-sec .card .card-img-top {
  height: 198px;
  width: 100%;
}

.courses-sec .card .card-body {
  padding: 0.5rem 1rem;
}

.courses-sec .fa-cart-plus {
  color: white;
  background: var(--main-color);
  padding: 8px 8px 6px 6px;
  font-size: 16px;
  border-radius: 2px;
  cursor: pointer;
}

.courses-sec .price {
  font-size: 18px;
  font-weight: 700;
  line-height: 32.4px;
  color: var(--main-color);
  margin: 0;
}

.courses-sec .price-cont span {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(179, 179, 179, 1);
  text-decoration: line-through;
  margin: 0 5px;
}

.why-afedny {
  background: rgba(230, 240, 255, 1);
  padding: 40px 0;
}

.why-afedny .sec {
  background: rgba(255, 255, 255, 1);
  padding: 20px;
  height: 100%;
}

.why-afedny .sec h6 {
  font-size: 18px;
  font-weight: 700;
  line-height: 32.4px;
  color: rgba(26, 26, 26, 1);

}

.why-afedny .sec h6::after {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 100px;
  background: var(--main-color);
  margin: 8px 0;

}

.why-afedny .sec p {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(25, 25, 25, 1);

}

.why-afedny .row {
  margin-top: 80px;
}

.article-sec img {
  margin-right: 15px;
  width: 120px;
  height: 120px;
}

.article-info h5 {
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  color: rgba(26, 26, 26, 1);
  margin: 0;
}

.article-info h6 {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(51, 51, 51, 1);
  margin: 0;

}

.article-info p {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(153, 153, 153, 1);
  margin: 0;

}

.testimonials-sec {
  background-image: url("../images/testimonials.png");
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.testimonials-sec .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.testimonials-sec .num-sec {
  border-left: 2px dashed #ffffff75;
  margin: 20px 0;
}

.testimonials-sec .num-sec h6 {
  font-size: 35px;
  font-weight: 700;
  color: rgba(255, 255, 255, 1);
  margin-bottom: 0;
}

.testimonials-sec .num-sec p {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(255, 255, 255, 1);
  margin-bottom: 0;
}

.testimonials-sec .num-sec {
  border-left: 2px dashed #ffffff75;
}

.testimonials-sec .num-sec.no-bord-ltr {
  border: unset !important;
}

.rate-sec .user-rate {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.04);
  padding: 20px;
  border-radius: 4px;
  height: 100%;
}

.rate-sec .user-rate .imgBx2 img {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  object-fit: cover;
  display: flex;
  align-items: center;
  margin: 0 10px;
}

.rate-sec .user-rate p {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(25, 25, 25, 1);
}

.rate-sec .user-rate .user-name h6 {
  font-size: 14px;
  font-weight: 700;
  line-height: 25.2px;
  color: rgba(25, 25, 25, 1);
  margin-bottom: 2px;
}

.rate-sec .bad-star {
  color: rgba(230, 230, 230, 1) !important;
}

.rate-sec .fa-star {
  color: rgba(255, 198, 42, 1);
  font-size: 14px;
}

.rate-sec .carousel-indicators [data-bs-target] {
  background-color: rgba(204, 224, 255, 1) !important;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.rate-sec .carousel-indicators .active {
  background-color: var(--main-color) !important;
}

.rate-sec .carousel-control-prev,
.rate-sec .carousel-control-next {
  display: none;
}

.depart-sec .partener-div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.mail-menu {
  background: rgba(230, 240, 255, 1);
  padding: 60px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mail-menu p {
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  color: var(--main-color);
}

.mail-menu h6 {
  font-size: 24px;
  font-weight: 700;
  line-height: 43.2px;
  color: rgba(26, 26, 26, 1);
  margin-bottom: 40px;
}

.mail-menu button {
  padding: 8px 26px 8px 26px;
  border-radius: 2px;
  background: var(--main-color);
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  color: rgba(255, 255, 255, 1);
  border: none;
}

.mail-menu input {
  color: rgba(247, 250, 255, 1);
  border: 1px solid rgba(229, 229, 229, 1);
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(179, 179, 179, 1);
  padding: 9px 45px;
  width: 100%;

}

.mail-menu input:focus {
  outline: none;
  box-shadow: 0px 2px 10px rgba(27, 26, 29, 0.1);
}

.home-sec button .me-1 {
  margin-right: 0 !important;
  margin-left: .25rem !important;
}

/* setting */

.parent-setting .personal-sec {
  width: 100%;
  margin-top: 0 !important;
}

.parent-setting .sidebar-setting {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(235, 235, 235, 1);
  border-radius: 2px;
  padding: 20px 0;
  box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
}

.parent-setting .pro-head .imgBx2 img {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  object-fit: cover;
  display: flex;
  align-items: center;
  margin: 0 20px;
}

.parent-setting .pro-head span {
  font-size: 14px;
  font-weight: 700;
  line-height: 25.2px;
  color: rgba(26, 26, 26, 1);
}

.parent-setting .pro-head p {
  font-size: 12px;
  font-weight: 500;
  line-height: 21.6px;
  color: rgba(77, 77, 77, 1);

}

.parent-setting .pro-head {
  margin-bottom: 30px;
}

.parent-setting .pro-body {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  padding: 15px;
  margin: 10px 0;
}

.parent-setting .sidebar-setting {
  margin-bottom: 30px;
}

.parent-setting .sidebar-setting .active {
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  border-right: 4px solid var(--main-color);
  background: rgba(242, 247, 255, 1);
}

.parent-setting .sidebar-setting .active {
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  border-left: 4px solid var(--main-color);
  border-right: none;
  background: rgba(242, 247, 255, 1);
}

.parent-setting .sidebar-setting a {
  width: fit-content;
  color: rgba(26, 26, 26, 1);
}

.parent-setting .active a {
  color: var(--main-color) !important;
}

.parent-setting .change-img {
  margin-bottom: 50px;
}

.parent-setting .change-img .imgBx2 img {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  object-fit: cover;
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.parent-setting .change-img .imgBx2 img {
  margin-right: 20px;
  margin-left: 0;

}

.parent-setting .change-img h6 {
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  color: rgba(26, 26, 26, 1);
}

.parent-setting .change-img p {
  font-size: 14px;
  font-weight: 700;
  line-height: 25.2px;
  color: rgba(128, 128, 128, 1);

}

.parent-setting .change-img .change-btn {
  border: 1px solid var(--main-color);
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  background: transparent;
  color: var(--main-color);
  padding: 6px 20px 6px 20px;
  border-radius: 2px;
  margin-left: 40px;
  cursor: pointer;
}

.parent-setting .change-img .change-btn {
  margin-right: 40px;
  margin-left: 0;
}

.parent-setting .change-img .delete-btn {
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  background: transparent;
  color: var(--main-color);
  border: none;
  padding: 0;
}

.parent-setting .personal-btns {
  width: 100%;
}

.parent-setting .login-sec {
  padding: 20px 40px;
  margin: 0 !important;
}

.parent-setting .form-input input {
  box-sizing: border-box;
  padding: 13px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  width: 100%;
  margin: 20px 0;
  font-size: revert !important;
  margin-bottom: 30px;
}

.parent-setting .delete-acc p {
  font-size: 16px;
  font-weight: 500;
  line-height: 28.8px;
  color: rgba(102, 102, 102, 1);

}

.modal {
  z-index: 999999999999999999999999 !important;
  box-shadow: 0px 2px 10px rgba(27, 26, 29, 0.1) !important;
}

.parent-setting .modal-header .btn-close {
  display: none;
}

.parent-setting .modal .btn-cancel {
  padding: 8px 24px 8px 24px;
  border-radius: 2px;
  border: 1px solid var(--main-color);
  font-size: 14px;
  font-weight: 700;
  line-height: 28.8px;
  color: var(--main-color);

}

.parent-setting .modal .btn-save {
  padding: 8px 24px 8px 24px;
  border-radius: 2px;
  background: var(--main-color);
  font-size: 14px;
  font-weight: 700;
  line-height: 28.8px;
  color: rgba(255, 255, 255, 1);

}

.parent-setting .modal .modal-header {
  background: rgba(248, 249, 250, 1);
  padding: 20px;
}

.parent-setting .modal h1 {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 28.8px !important;
  color: rgba(26, 26, 26, 1) !important;
}

.parent-setting .modal .form-input {
  position: relative;
  width: 100%;
}

.parent-setting .modal input {
  box-sizing: border-box;
  padding: 13px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  width: 100%;
  margin: 20px 0;
  font-size: revert !important;
  margin-bottom: 30px;
}

.parent-setting .modal input:focus {
  outline: none;
  box-shadow: 0px 2px 10px rgba(27, 26, 29, 0.1);
}


/* school-home */

.school-sec {
  background-image: url("../images/Framev.png");
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center !important;
}

.school-sec .container {
  width: 75%;
  padding-top: 150px;
}


.school-sec h5 {
  font-size: 32px;
  font-weight: 700;
  line-height: 57.6px;
  color: rgba(255, 255, 255, 1);
}

.school-sec p {
  font-size: 16px;
  font-weight: 500;
  line-height: 28.8px;
  color: rgba(255, 255, 255, 1);
}

.school-sec .search-sub {
  position: relative;
  width: 50%;
  margin: auto;
}

.school-sec .search-sub input {
  color: rgba(247, 250, 255, 1);
  border: 1px solid rgba(229, 229, 229, 1);
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(179, 179, 179, 1);
  padding: 12px 45px;
  width: 100%;
}

.school-sec .search-sub input:focus {
  outline: none;
}


.school-sec .search-sub button {
  position: absolute;
  right: 20px;
  padding: 5px 20px;
  border-radius: 2px;
  background: var(--main-color);
  border: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 28.8px;
  color: rgba(255, 255, 255, 1);

}


.school-sec .search-sub span {
  position: absolute;
  left: 30px;
  color: rgba(153, 153, 153, 1);

}

.page-filteration .hide-p .card {
  height: 250px;
  overflow-y: auto;
}

.hide-p {
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.04);
}

.hide-p .card {
  border-radius: 0 0 5px 5px;
  padding: 20px;
  border: 1px solid #F2F3F5;
}

.filter-collapse {
  background: #FFFFFF;
  border: 1px solid #F2F3F5;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-radius: 5px 5px 0 0;
  color: black;
}

.filter-collapse p {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  color: rgba(26, 26, 26, 1);

}

.filter-collapse .mob {
  display: none;
}

.filter-collapse .not-mob {
  display: inline-block;
}

.coll-icon[aria-expanded='true'] {
  display: none;
}

.coll-icon[aria-expanded='false'] {
  display: inline-block;

}

.filter-collapse[aria-expanded='true'] .coll-icon {
  display: none;
}

.filter-collapse[aria-expanded='false'] .coll-icon {
  display: inline-block;
}


.coll-icon2[aria-expanded='true'] {
  display: inline-block;

}

.coll-icon2[aria-expanded='false'] {
  display: none;
}

.filter-collapse[aria-expanded='true'] .coll-icon2 {
  display: inline-block;
}

.filter-collapse[aria-expanded='false'] .coll-icon2 {
  display: none;
}

#route2 .form-check {
  min-height: auto;
}

#route2 .form-check label {
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  color: rgba(26, 26, 26, 1);
  cursor: pointer;
}

#route2 .form-check input {
  cursor: pointer;
}

.page-item:first-child .page-link {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.page-item:last-child .page-link {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.page-link:focus {
  box-shadow: none !important;

}

.page-item {
  margin: 0 5px;
}

/* course-details */

.user-header .head-links {
  margin-top: 30px;
}

.user-header .head-links span {
  font-size: 16px;
  font-weight: 500;
  line-height: 28.8px;
  color: rgba(153, 153, 153, 1);

}

.user-header .head-links .active {
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  color: var(--main-color);

}

.user-header .subject-sec .fa-star {
  color: rgba(255, 198, 42, 1);
  font-size: 14px;
}

.user-header .subject-sec h5 {
  font-size: 32px;
  font-weight: 700;
  line-height: 57.6px;
  color: rgba(26, 26, 26, 1);

}

.user-header .subject-sec p {
  font-size: 16px;
  font-weight: 500;
  line-height: 28.8px;
  color: rgba(102, 102, 102, 1);

}

.user-header .subject-sec h6 {
  font-size: 16px;
  font-weight: 500;
  line-height: 28.8px;
  color: rgba(26, 26, 26, 1);
}

.user-header .subject-sec .span1 {
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  color: rgba(26, 26, 26, 1);

}

.user-header .subject-sec .span2 {
  font-size: 16px;
  font-weight: 500;
  line-height: 28.8px;
  color: var(--main-color);

}


.user-header .subject-sec .fa-user {
  margin-right: 5px;
}

.course-details {
  position: relative;
}

.info-card.card {
  width: 350px;
  position: sticky;
  left: 100%;
  top: 115px;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
  border: none;
  max-height: calc(100vh - 145px);
  overflow: auto;
  margin-top: -160px;
}

.info-card.card img {
  width: 100%;
  height: 311px;
  object-fit: cover;
}

.info-card.card .card-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(102, 102, 102, 1);

}

.info-card.card .card-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 32.4px;
  color: rgba(26, 26, 26, 1);

}

.info-card.card .fa-cart-plus {
  color: white;
  padding: 8px 8px 6px 6px;
  font-size: 14px;
  border-radius: 2px;
  cursor: pointer;
}

.info-card.card .price {
  font-size: 18px;
  font-weight: 700;
  line-height: 32.4px;
  color: var(--main-color);
  margin: 0;
}

.info-card.card .price-cont span {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(179, 179, 179, 1);
  text-decoration: line-through;
  margin: 0 5px;
}

.course-details .rate-sec h5 {
  font-size: 24px !important;
}

.course-details .rate-sec p {
  font-size: 16px !important;
  line-height: 28.8px !important;
}

.fa-circle-play {
  color: var(--main-color);
  font-size: 18px;
  cursor: pointer;
  margin-right: 5px;

}

.hide-p .tex-play h6 {
  font-size: 16px;
  font-weight: 500;
  line-height: 28.8px;
  color: rgba(26, 26, 26, 1);

}

.hide-p .tex-play p {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(179, 179, 179, 1);
  margin: 0;
}


.course-details .add-cart {
  background: var(--main-color);
  padding: 8px 16px 8px 16px;
  border-radius: 2px;
  border: 1px solid var(--main-color);
  color: white;
  font-size: 14px;
  font-weight: 700;
  line-height: 28.8px;
  width: 80%;
}

.course-details .add-fav {
  padding: 12px 6px;
  border-radius: 2px;
  border: 1px solid var(--main-color);
  color: var(--main-color);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.course-details .add-fav:hover {
  background: var(--main-color);
}

.course-details .add-fav:hover .fa-heart {
  color: white;
}


.course-details .fa-heart {
  color: var(--main-color);
  transition: all 0.3s ease;

}

.course-details .login-now {
  width: 100%;
  border: 1px solid var(--main-color);
  padding: 8px 16px 8px 16px;
  background: transparent;
  color: var(--main-color);
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
}

.course-details .login-now:hover,
.course-details .login-now:focus-visible,
.course-details .login-now:active {
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
  color: #fff
}

.course-details .certifi h4,
.course-details .coupon h4 {
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  color: rgba(26, 26, 26, 1);
  margin-bottom: 15px;
}

.course-details .certifi p {
  font-size: 16px;
  font-weight: 500;
  line-height: 28.8px;
  color: rgba(26, 26, 26, 1);
  margin-bottom: 10px;

}


.course-details .certifi span {
  color: var(--main-color);
  font-size: 18px;
  margin-right: 5px;
}


.course-details .search-sub {
  position: relative;
}

.course-details .search-sub input {
  color: rgba(247, 250, 255, 1);
  border: 1px solid rgba(229, 229, 229, 1);
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(179, 179, 179, 1);
  padding: 12px;
  width: 100%;
}

.course-details .search-sub input:focus {
  outline: none;
}



.course-details .search-sub button {
  position: absolute;
  right: 20px;
  padding: 5px 20px;
  border-radius: 2px;
  background: var(--main-color);
  border: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 28.8px;
  color: rgba(255, 255, 255, 1);

}


.course-details .user-rate .user-name h6 {
  font-size: 16px;
  font-weight: 600;
  line-height: 28.8px;
  color: rgba(26, 26, 26, 1);

}

.course-details .user-rate .user-name span {
  font-size: 12px;
  font-weight: 500;
  line-height: 21.6px;
  color: rgba(102, 102, 102, 1);
  margin: 0 10px;
}

.course-details .user-rate .user-name p {
  font-size: 14px !important;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(102, 102, 102, 1);

}

.course-details .user-rate {
  background: transparent;
}





.course-details .user-rate h2 {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(26, 26, 26, 1);
  margin-right: 40px;
  margin-bottom: 0;
}

.course-details .user-rate .span11 {
  margin: 0 !important;
  margin-right: 5px !important;
  color: var(--main-color) !important;
  font-size: 14px !important;
}

.course-details .teacher-subj {
  box-shadow: none;
  border: 1px solid rgba(229, 229, 229, 1);
}

.course-details .teacher-subj .imgBx2 img {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  margin: 0;
}


/* cart */

.user-header .head-tit h6 {
  font-size: 24px;
  font-weight: 700;
  line-height: 43.2px;
  color: rgba(26, 26, 26, 1);
}

.card-cart {
  margin-bottom: 20px;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  border: none !important;
  position: relative;
  flex-direction: row !important;
}

.card-cart img {
  width: 342px;
  height: 230px;
}

.card-cart .card-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 32.4px;
  color: rgba(26, 26, 26, 1);
}

.card-cart .card-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(102, 102, 102, 1);
}


.card-cart .price {
  font-size: 18px;
  font-weight: 700;
  line-height: 32.4px;
  color: var(--main-color);
  margin: 0;
}

.card-cart .price-cont span {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(179, 179, 179, 1);
  text-decoration: line-through;
  margin: 0 5px;
}



.card-cart .fa-circle-xmark {
  position: absolute;
  right: 12px;
  top: 12px;
  color: var(--main-color);
  font-size: 20px;
  cursor: pointer;
}

.coupon-cart .search-sub {
  position: relative;
}

.coupon-cart .search-sub {
  position: relative;
}

.coupon-cart .search-sub input {
  color: rgba(247, 250, 255, 1);
  border: 1px solid rgba(229, 229, 229, 1);
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(179, 179, 179, 1);
  padding: 12px 45px;
  width: 100%;
}

.coupon-cart .search-sub input:focus {
  outline: none;
}



.coupon-cart .search-sub button {
  position: absolute;
  right: 20px;
  padding: 5px 20px;
  border-radius: 2px;
  background: var(--main-color);
  border: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 28.8px;
  color: rgba(255, 255, 255, 1);

}


.coupon-cart .search-sub span {
  position: absolute;
  left: 30px;
  color: rgba(153, 153, 153, 1);

}

.coupon-cart {
  border: 1px solid rgba(230, 240, 255, 1);
  background: rgba(242, 247, 255, 1);
  padding: 20px;
}

.coupon-cart h4 {
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  color: rgba(26, 26, 26, 1);
  margin-bottom: 15px;
}

.order-details h6 {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(102, 102, 102, 1);

}

.order-details p {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(26, 26, 26, 1);

}

.order-details .salary h6 {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(26, 26, 26, 1);

}

.order-details .salary p {
  font-size: 24px;
  font-weight: 700;
  line-height: 43.2px;
  color: rgba(26, 26, 26, 1);

}

.order-details button {
  padding: 8px 16px 8px 16px;
  border-radius: 2px;
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  color: rgba(255, 255, 255, 1);
  background: var(--main-color);
  border: none;
}

/* blogs */


.card-blog {
  background: transparent !important;
  box-shadow: none;
  border: none !important;
  cursor: pointer;
}

.card-blog .card-body {
  padding-top: 0;
  padding-bottom: 0;
}

.card-blog img {
  width: 100%;
  height: 198px;
  min-height: 198px;
  max-height: 198px;
  border-radius: 2px;
}

.blog-sec .read-more {
  font-size: 14px;
  font-weight: 700;
  line-height: 25.2px;
  color: var(--main-color);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.blog-sec .read-more .fa-arrow-left {
  rotate: 180deg;
}

.blog-sec .form-input {
  position: relative;
  width: auto !important;
}

.blog-sec .search-icon {
  margin-right: 20px !important;
  color: #28303f9f;
  position: absolute;
  top: 12px;
  right: 0;
  cursor: pointer;
}

.blog-sec .form-input input {
  border-radius: 4px;
  box-sizing: border-box;
  padding: 8px;
  font-size: revert;
  border: 1px solid rgba(242, 242, 242, 1);
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(157, 166, 175, 1);
  background: rgba(247, 247, 247, 1);
}

.blog-sec .form-input input:focus {
  outline: none;
  box-shadow: 0px 2px 10px rgba(27, 26, 29, 0.1);
}

.search-blog h6,
.recent-blog h6 {
  font-size: 18px;
  font-weight: 700;
  line-height: 32.4px;
  color: rgba(26, 26, 26, 1);
  margin-top: 1rem;
}

.recent-blog .blog-date {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(153, 153, 153, 1);
  margin: 0;
}

.recent-blog .card {
  background-color: transparent;
  align-items: center;
  padding: 5px;
}

.recent-blog .card-text {
  margin-bottom: 0;
  line-height: 20px;
}

.recent-blog img {
  width: 155px;
  min-width: 155px;
  max-width: 155px;
  height: 120px;
  min-height: 120px;
  max-height: 120px;
  border-radius: 2px;
}

.recent-blog .card-cart .card-title {
  font-size: 15px;
  line-height: 20px;
  margin-bottom: 0;
}

/* blog-article */

.card-blog .card-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 32.4px;
  color: rgba(26, 26, 26, 1);
  margin-bottom: 5px;
}

.card-blog .card-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(102, 102, 102, 1);
  margin-bottom: 5px;
}

.card-art .card-body {
  padding: 0;
}

.card-art .blog-date {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(153, 153, 153, 1);
  margin: 0;
}

.article-description h6 {
  font-size: 18px;
  font-weight: 700;
  line-height: 32.4px;
  color: rgba(26, 26, 26, 1);

}

.article-description p,
.article-description li {
  font-size: 16px;
  font-weight: 500;
  line-height: 28.8px;
  color: rgba(26, 26, 26, 1);
}

.article-description div {
  margin-bottom: 50px;
}

.head-article {
  background-image: url("../images/bg-article.png");
  padding: 100px 0;
}

.head-article h6,
.head-article span {
  color: white !important;
}

/* about-us */

.about-sec .desc {
  font-size: 18px;
  font-weight: 500;
  line-height: 32.4px;
  color: rgba(102, 102, 102, 1);
}

.about-sec .row-about {
  margin: 80px 0;
}

.about-sec .hide-p {
  box-shadow: none;
}

.about-sec .hide-p .card {
  padding: 10px 20px;
  background: rgba(247, 250, 255, 1);
}

.about-sec .filter-collapse {
  background: rgba(242, 247, 255, 1);
}

/* privacy */

.privacy-polic p,
.privacy-polic li {
  font-size: 18px;
  font-weight: 500;
  line-height: 32.4px;
  color: rgba(102, 102, 102, 1);
}

.privacy-polic .mb-5 {
  margin-bottom: 100px;
}

/* contact-us */

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: none !important;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.04);
}

.contact-card h5 {
  font-size: 18px;
  font-weight: 700;
  line-height: 32.4px;
  color: rgba(26, 26, 26, 1);
  margin-bottom: 15px;
}

.contact-card .fa-envelope,
.contact-card .fa-location-dot,
.contact-card .fa-phone {
  background: rgba(242, 247, 255, 1);
  padding: 15px;
  color: var(--main-color);
  font-size: 25px;
  border-radius: 50%;
  margin-bottom: 15px;
}


.contact-card .copy-sec {
  background: rgba(247, 250, 255, 1);
  padding: 8px 20px;
  border-radius: 4px;
}

.contact-card .copy-sec h6 {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(26, 26, 26, 1);
}

.contact-card .copy-sec .fa-copy {
  color: var(--main-color);
  font-size: 20px;
}

.contact-sec .form-input input,
.contact-sec .form-input textarea {
  box-sizing: border-box;
  padding: 13px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(229, 229, 229, 1);
  border-radius: 5px;
  width: 100%;
  font-size: revert !important;
  margin-bottom: 30px;
}

.contact-sec .form-input input:focus,
.contact-sec .form-input textarea:focus {
  outline: none;
  box-shadow: 0px 2px 10px rgba(27, 26, 29, 0.1);
}

.contact-format {

  margin: 80px;
}

.contact-sec .send-mesg {
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  color: rgba(255, 255, 255, 1);
  background: var(--main-color);
  padding: 10px 16px;
  border-radius: 5px;
  border: none;
  margin-top: 15px;
}

/* teacher */

.teacher-page .imgBx3 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.teacher-page .imgBx3 img {
  width: 196px;
  height: 196px;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid rgba(204, 224, 255, 1);
  margin-bottom: 10px;
}

.teacher-page .user-rate .user-name h5 {
  font-size: 18px;
  font-weight: 700;
  line-height: 32.4px;
  color: rgba(26, 26, 26, 1);
  display: block;
  margin-bottom: 5px;
}

.teacher-page .user-rate .user-name h6 {
  font-size: 16px;
  font-weight: 500;
  line-height: 28.8px;
  color: rgba(26, 26, 26, 1);
}

.teacher-page .user-rate .user-name p {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(102, 102, 102, 1);

}

.teacher-page .user-rate {
  background: transparent;
  box-shadow: none;
}

.teacher-page .text-collap {
  font-size: 16px;
  font-weight: 500;
  line-height: 28.8px;
  color: rgba(51, 51, 51, 1);
}

.teacher-page .teach-rate .imgBx3 img {
  width: auto;
  height: auto;
  border: none;
}

.teacher-page .teach-rate {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.04);
}

.teacher-page .teach-rate p {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 32.4px !important;
  color: rgba(26, 26, 26, 1) !important;
  margin-bottom: 0 !important;
}

.teacher-page .user-header h4 {
  font-size: 48px;
  font-weight: 700;
  line-height: 86.4px;
  color: rgba(26, 26, 26, 1);
}

.teacher-page .user-header p {
  font-size: 18px;
  font-weight: 500;
  line-height: 32.4px;
  color: rgba(51, 51, 51, 1);
}

.teacher-page .user-header button {
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  color: white;
  padding: 8px 40px;
  border-radius: 2px;
  background: var(--main-color);
  border: none;
  margin-top: 20px;
}

.Upload-file {
  background: rgba(247, 250, 255, 1);
  padding: 15px;
  position: relative;
}

.Upload-file h6 {
  font-size: 16px;
  font-weight: 500;
  line-height: 28.8px;
  color: rgba(26, 26, 26, 1);
}

.Upload-file p {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(128, 128, 128, 1);
}

.Upload-file button {
  background: rgba(230, 240, 255, 1);
  padding: 8px 16px;
  border-radius: 2px;
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  color: var(--main-color);
  border: none;
  cursor: pointer !important;
}

.Upload-file .upload-sec {
  position: relative;
}

#fileInput {
  position: absolute;
  right: 0;
  top: 10px;
  width: 175px;
  cursor: pointer;
  opacity: 0;
}

/* dashboard */

.parent-notification {
  cursor: pointer;
}


.notification-icon {
  color: var(--main-color);
  position: none;
  font-size: 20px;
  padding: 10px;
  background: rgba(244, 245, 248, 1);
  border-radius: 2px;
}

.navbar-dashboard {
  z-index: initial;
}

.navbar-dashboard .navbar-collapse {
  flex-grow: 0;

}

.navbar-dashboard .fa-globe {
  color: var(--main-color);
  font-size: 20px;
  cursor: pointer;
  padding: 10px;
  background: rgba(244, 245, 248, 1);
  border-radius: 2px;
}

.navbar-dashboard .lang-text {
  color: var(--main-color);
  cursor: pointer;
}

.navbar-dashboard .navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 4px var(--main-color) !important;
}

.navbar-dashboard .badge {
  padding-left: 9px;
  padding-right: 9px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}

.navbar-dashboard #lblCartCount {
  font-size: 10px;
  background: rgba(197, 0, 48, 1);
  color: #fff;
  padding: 4px;
  vertical-align: top;
  position: absolute;
  top: 15px;
  right: 18px;
}

.navbar-dashboard .navbar-collapse {
  flex-basis: 100%;
  flex-grow: 0 !important;
  align-items: center;
}


.navbar-dashboard .topbarImg {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  background-color: var(--main-color);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 18px;
}


.navbar-dashboard .dropdown-user {
  background-color: transparent !important;
  padding: 0 !important;
  border: none !important;
  width: 80%;
}

.navbar-dashboard .dropdown-user:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}


.navbar-dashboard .dropdown-toggle::after {
  color: var(--main-color) !important;
  vertical-align: top;
  /* right: 0; */
  bottom: 45%;
  position: absolute;
}


.navbar-dashboard .dropdown-items:focus {
  background-color: transparent !important;
}

.navbar-dashboard .dropdown-menu {
  right: -60px;
}

.navbar-dashboard .fa-bars {
  font-size: 22px;
  cursor: pointer;
  color: var(--main-color);
}

.navbar-dashboard .navbar-collapse {
  display: flex;
  justify-content: space-between;
}


.navbar-dashboard {
  border-bottom: 1px solid #80808012;
}

.breadcrumb-item+.breadcrumb-item::before {
  float: right !important;
  padding: 0 0.5rem;
}

.breadcrumb-item.active {
  font-size: 14px;
  font-weight: 700;
  line-height: 22.4px;
  color: var(--main-color) !important;

}

.breadcrumb-item,
.breadcrumb-item a {
  font-size: 14px;
  font-weight: 700;
  line-height: 22.4px;
  color: rgba(179, 179, 179, 1) !important;

}

.navbar-dashboard .dropdown-menu[data-bs-popper] {
  right: initial !important;
  left: 0;
}


.navbar-dashboard .dropdown .dropdown-menu {
  position: absolute;
  border: none;
  min-width: 285px;
  box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
}

.navbar-dashboard .products {
  display: flex;
  align-items: center;
}

.navbar-dashboard .header-right .header-profile2 img {

  width: 45px;
  height: 45px;
  border-radius: 0.5rem;
}

.navbar-dashboard .products img {
  margin-right: 10px;
}

.navbar-dashboard .avatar {
  height: 2.375rem;
  width: 2.375rem;
  display: inline-block;
  position: relative;
  object-fit: cover;
  border-radius: 0.375rem;
  line-height: 1.975rem;
}

.navbar-dashboard .products h6 {
  font-size: 14px;
  margin-bottom: 0;
  white-space: nowrap;
  line-height: 1.5;
  font-weight: 600;
}

.navbar-dashboard .products span {
  font-size: 12px;
}

.navbar-dashboard .ai-icon i {
  color: var(--main-color);
  font-size: 16px;
}

.navbar-dashboard .ai-icon:hover span {
  color: var(--main-color);
}

.navbar-dashboard .dropdown-menu .dropdown-item {
  font-size: 0.9rem;
  color: #888888;
  padding: 0.5rem 1.25rem;
}

.navbar-dashboard .card-footer {
  border-color: #dad8d4 !important;
  background: transparent !important;
}

.navbar-dashboard .dz-scroll {
  overflow-y: scroll;
  overflow-x: hidden;
}

.navbar-dashboard .widget-media .timeline .timeline-panel {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  padding: 0.8rem 0.75rem;
  margin: 0 -5px;
  border-radius: 0.5rem;
  position: relative;
  transition: all 0.5s;
}

.navbar-dashboard li {
  list-style: none;
}

.navbar-dashboard .widget-media .timeline .timeline-panel .media {
  width: 2.188rem;
  height: 2.188rem;
  background: #eee;
  border-radius: 100%;
  overflow: hidden;
  font-size: 0.813rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  align-self: start;
}

.navbar-dashboard .notification_dropdown .dropdown-menu-end .media {
  width: 45px !important;
  height: 45px !important;
  font-size: 18px !important;
}

.widget-media .timeline .timeline-panel .media-body h6,
.widget-media .timeline .timeline-panel .media-body .h6 {
  font-size: 0.813rem;
  line-height: 1rem;
}

.navbar-dashboard .timeline {
  padding: 0;
  margin: 0;
}

.widget-media .timeline .timeline-panel:hover {
  background-color: rgba(0, 0, 0, 0.03);
  cursor: pointer;
}

.navbar-dashboard .notification-sec {
  min-width: 310px !important;
  padding: 0rem 0 1rem !important;
  top: 100%;
}

.navbar-dashboard .date-notify {
  font-size: 12px !important;
  color: gray;
  text-align: initial !important;
}

.navbar-dashboard .dropdown-menu-end .all-notification {
  display: block;
  padding: 15px 30px 0;
  text-align: center;
  border-top: 1px solid rgba(128, 128, 128, 0.216);
  color: var(--main-color);
  font-size: 14px;
}

.navbar-dashboard .lang .dropdown-menu .sec {
  text-align: center;
  cursor: pointer;
  margin: 5px 0;
  padding: 5px 10px;
  transition: all 0.2s ease;
}

.navbar-dashboard .lang .dropdown-menu .sec:hover {
  color: white;
  background: var(--main-color);
}

.lang .dropdown-menu .sec:hover a {
  color: white !important;
}

.navbar-dashboard .lang p {
  margin: 0;
  text-align: center !important;
}

.navbar-dashboard .lang .dropdown-menu {
  min-width: 120px !important;
}

.navbar-dashboard {
  background: transparent !important;
}

.dashboard-logo {
  width: 64px;
}

/* @media screen and (max-width:991px) {
  .navbar-nav {
    display: block !important;
    animation: fadeIn 500ms ease-out backwards;
    height: 100vh;
  }
} */


/* sidebar */

.sidebar {
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #d2d2d2;
  position: sticky;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
  background: rgba(251, 251, 252, 1);
  min-height: 100vh;
}

.content-grid {
  display: grid;
  grid-template-columns: 270px auto;
}

.toggle-grid {
  grid-template-columns: 43px 1fr;
}

.toggle-grid .sidebar-menu-icon {
  margin: 0 !important;
}

.toggle-grid .sidebar-link {
  margin: 15px 0 !important;
  justify-content: center !important;
}

.toggle-grid .coll-icon,
.toggle-grid .coll-icon2 {
  display: none !important;
}

.toggle-grid .sidebar-link h6 {
  display: none;
}

.toggle-grid .sidebar-link {
  width: max-content;
  transition: initial;
}

.toggle-grid .sidebar-link:hover h6 {
  display: block;
  margin: 0 46px !important;
}

.toggle-grid .sidebar-link:hover .coll-icon2 {
  display: block !important;
}

.toggle-grid .collapse-mob {
  display: none;
}

.toggle-grid .sidebar-link:hover {
  margin: 0 !important;
}


.toggle-grid .sidebar-link:hover+.collapse-mob {
  display: block !important;
}

.toggle-grid .sidebar-link:hover+.collapse-mob {
  display: block !important;
}

.toggle-grid .hide-p:hover .collapse-mob {
  display: block !important;
  right: 44px;
  position: absolute;
}

.toggle-grid .hide-p:hover .sidebar-link h6 {
  display: block !important;
  margin: 0 46px !important;

}

.toggle-grid .hide-p:hover .sidebar-link {
  background: rgba(238, 240, 245, 1);
  color: var(--main-color);
  margin-bottom: 0 !important;
}

.toggle-grid .hide-p:hover .coll-icon2 {
  display: block !important;
}

.sidebar-link {
  padding: 10px;
  margin: auto 20px;
  border-radius: 2px;
  color: rgba(77, 77, 77, 1);
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  cursor: pointer;
  transition: all 0.5s ease;
  position: relative;
}

.collapse-links {
  margin: auto 20px;
  border-radius: 2px;
  color: rgba(77, 77, 77, 1);
}

.collapse-links h6 {
  padding: 10px;
  /* margin: 10px 0 !important; */
  cursor: pointer;
}

.toggle-grid .sidebar {
  z-index: 9999999999999;
}

.toggle-grid .hide-p {
  position: relative;
}

.toggle-grid .sidebar .collapse-mob {
  /* position: absolute;
  right: 60px;
  top: 0; */
  width: 200px;
  border: 1px solid #ddd;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
  background: rgba(251, 251, 252, 1);
}

.toggle-grid .sidebar .collapse-mob {
  position: absolute;
  left: 60px;
  top: 0;
  width: 200px;
  border: 1px solid #ddd;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
  background: rgba(251, 251, 252, 1);
}


.collapse-links .active {
  background: rgba(238, 240, 245, 1);
  color: var(--main-color);
  border-left: 4px solid var(--main-color);
}

.sidebar a {
  font-size: 16px;
  font-weight: 700;
  line-height: 25.6px;
  text-align: center;
  color: #4D4D4D;
}

.sidebar-link:hover {
  background: var(--main-color);
  color: white;
}

.sidebar-link:hover .side-links {
  color: white !important;
}

.active-link {
  background: var(--main-color);
  color: white !important;
}

.active-link .side-links {
  color: white !important;
}

.tecnical-support {
  margin-top: 80px;
  background-color: #F2F3F5;
  color: #131515;
}

.tecnical-support:hover {
  color: #898B94;
  background-color: #dfe0e0;
  color: #131515;
}


.sidebar-menu-icon {
  margin-left: 10px;
  font-size: 22px;
}

.sidebar {
  animation: fadeIn 500ms ease-out backwards;

}

.coll-icon[aria-expanded='true'] {
  display: none;
}

.coll-icon[aria-expanded='false'] {
  display: inline-block;

}

[aria-expanded='true'] .coll-icon {
  display: none;
}

[aria-expanded='false'] .coll-icon {
  display: inline-block;
}


.coll-icon2[aria-expanded='true'] {
  display: inline-block;

}

.coll-icon2[aria-expanded='false'] {
  display: none;
}

[aria-expanded='true'] .coll-icon2 {
  display: inline-block;
}

[aria-expanded='false'] .coll-icon2 {
  display: none;
}

.mob-dir {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.parent-student .form-input input {
  border-radius: 4px;
  box-sizing: border-box;
  padding: 8px;
  font-size: revert;
  border: 1px solid rgba(231, 233, 235, 1);
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(157, 166, 175, 1);
}

.parent-student .form-input input:focus {
  outline: none;
  box-shadow: 0px 2px 10px rgba(27, 26, 29, 0.1);
}

.fa-magnifying-glass {
  position: absolute;
  right: 10px;
  top: 14px;
}

.mob-dir .form-input {
  position: relative;
  width: 300px;
}

.project-num .fw-500 {
  font-weight: 700;
}

.table .imgBx img {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  object-fit: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
}

.table tr td {
  background: white;
  padding: .7rem;
  vertical-align: middle;
}

.table> :not(caption)>*>* {
  padding: .8rem !important;
}

.table th,
.table td {
  text-align: center;
}

.table {
  border: 1px solid rgba(231, 233, 235, 1);
  background: rgba(244, 245, 248, 1) !important;
}

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

.table thead tr th {
  font-size: 14px;
  font-weight: 700;
  line-height: 22.4px;
  color: rgba(124, 137, 148, 1);

}

.table tbody tr th,
.table tbody tr td div {
  font-size: 15px;
  font-weight: 500;
  line-height: 25.6px;
  color: rgba(26, 26, 26, 1);

}

.table .dropdown-menu p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}



.page-link {
  color: var(--main-color) !important;
}

.active>.page-link,
.page-link.active {
  background-color: var(--main-color) !important;
  border-color: var(--main-color) !important;
  color: white !important;
}

.page-item {
  margin: 0 5px;
}

.pag-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(157, 166, 175, 1);

}

.table-course .imgBx img {
  border-radius: 4px !important;
}

.table .imgBx {
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select-tab .select2-container--default .select2-selection--multiple {
  background: rgba(230, 240, 255, 1);
  font-size: 14px;
  font-weight: 500;
  line-height: 28.8px;
  border: none !important;
  padding: 6px 0;
}

.select-tab .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  color: var(--main-color);
}

.select-tab .select2-container--default .select2-results__option--disabled {
  font-size: 14px;
  line-height: 28.8px;
}

.select-tab .select2-container--default .select2-selection--multiple .select2-selection__arrow b {
  top: 70%;
}


.all-statics2 .title {
  font-weight: bold;
  font-size: 20px;
  color: rgba(36, 66, 125, 1);
}

.all-statics2 .card {
  padding: 20px;
  border: none;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}

.all-statics2 .card .title {
  margin: 0 !important;
}

.all-statics2 .card .number {
  margin-top: 0 !important;
  margin-bottom: 5px;
}

.news-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}

@media (max-width: 768px) {
  .news-section
  {
    grid-template-columns: 1fr;
  }
}

.news-section p,
.news-section h5,
.news-section h3 {
  margin: 0;
}

.news-section h3 {

  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  color: #1A1A1A;
}

.news-section h5 {

  font-size: 14px;
  font-weight: 700;
  line-height: 25.2px;
  color: #1A1A1A;
}

.news-section .new-courses-list,
.new-students .new-students-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  box-shadow: 0px 4px 12px 0px #0000000A;
  background-color: #FFFFFF;
}

.new-students .student-on-list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  padding: 10px
}

.news-section .course-on-list img,
.new-students .student-on-list img {
  height: 40px;
  width: 40px;
}


.toggle-grid .dashboard-logo {
  width: 40px;
}

.about-page img {
  width: 100%;
  height: 100%;
}

.filt-dir .fa-magnifying-glass {
  left: 10px;
}

/* responsive */
@keyframes fadeIn {
  from {
    transform: translateX(250px);
    opacity: 0;
  }

  to {
    transform: translateX(0px);
    opacity: 1;
  }
}

#toggleButtonForMobile {
  display: none;
}

@media screen and (max-width:991px) {
  .navbar-home {
    background: var(--main-color) !important;
  }

  .navbar .left-sec {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-btns {
    margin: 20px 0;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-around;
  }

  .nav-icons {
    margin: 20px 0;
  }

  .navbar-toggler:focus {
    box-shadow: none !important;
    border: 2px solid white;
  }

  #toggleButtonForMobile {
    display: block;
  }

  .afedny-sec .container {
    width: 100% !important;
  }

  .afedny-sec .sec1 {
    margin-bottom: 25px;
  }


  .courses-sec .w-80,
  .why-afedny .w-80,
  .article-sec .w-80,
  .rate-sec .w-80,
  .depart-sec .w-80 {
    width: 100% !important;
  }

  .courses-sec button,
  .why-afedny button,
  .article-sec button {
    display: none;
  }

  .courses-sec h5,
  .why-afedny h5,
  .article-sec h5,
  .rate-sec h5,
  .depart-sec h5 {
    font-size: 25px !important;
  }

  .courses-sec .card .card-title {
    font-size: 16px !important;
  }

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


  .testimonials-sec .num-sec {
    border-bottom: 2px dashed #ffffff75;
    border-left: none !important;
  }

  .testimonials-sec .num-sec h6
  {
    font-size: 20px;
  }

  .user-rate {
    margin-bottom: 10px;
  }

  .depart-sec .d-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px;
  }

  .mail-menu .w-50 {
    width: 100% !important;
  }

  .login-sec {
    margin: 20px 0 !important;
  }

  .content .personal-sec {
    width: 100%;
  }

  .personal-btns {
    width: 100%;
  }

  .select2-container {
    width: 100% !important;
  }

  .school-sec .container {
    width: 100% !important;
    padding-top: 120px !important;
  }

  .school-sec .search-sub {
    width: 100% !important;
  }

  .card-cart {
    flex-direction: column !important;
  }

  .card-cart img {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: auto;
    min-height: auto;
    max-height: unset;
  }

  .blog-sec .row-blog {
    flex-direction: column-reverse;
  }

  .blog-sec .col-lg-8 {
    margin: 30px 0;
  }

  .contact-format {

    margin: auto;
  }

  .contact-card {
    margin-bottom: 20px;
  }

  .teacher-page .user-header .row {
    flex-direction: column-reverse;
  }

  .teacher-page .user-header img {
    margin-bottom: 20px;
  }

  .teacher-page .user-header {
    padding-bottom: 20px;
  }

  #toggleButton-nav {
    display: block;
  }

  #toggleButton {
    display: none;
  }

  .navbar-dashboard .navbar-toggler {
    display: none;
  }

  .sidebar {
    display: none;
  }

  .content-grid {
    display: grid;
    grid-template-columns: 100%;
  }


  .navbar-dashboard .collapse:not(.show) {
    display: flex !important;
  }

  .navbar-dashboard .notification-sec[data-bs-popper] {
    right: initial;
  }

  .sidebar {
    width: 60%;
    position: fixed;
    z-index: 99999999999999999999999999999;
  }

  .close-sidebar {
    display: block !important;
  }

  .navbar-dashboard .navbar-nav {
    height: 100%;
    display: flex !important;
    align-items: center;
    flex-direction: row !important;
  }

  .mob-dir .filt-dir {
    margin-bottom: 20px;
  }

  .mob-dir {
    flex-direction: column;
    align-items: flex-start;
  }

  .all-statics2 .card {
    margin-bottom: 20px;
  }

  .mob-dir .form-input {
    position: relative;
    width: auto;
  }

  .pagen-parent {
    flex-direction: column;
  }

  .mob-dir .filt-dir {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }


}

@media (min-width: 1400px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 100% !important;
  }
}

.chat-container {
  display: grid;
  grid-template-columns: 300px auto;
  background-clip: padding-box;
  box-shadow: 0 0.25rem 1.125rem rgba(75, 70, 92, .1);
  height: calc(100vh - 400px);
  grid-gap: 1rem;
}

.chat-container p {
  margin-bottom: 0;
}

.chat-side-menu img,
.chat-body .body-header img {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
}

.chat-side-menu {
  border-left: 1px solid #6f6b7d2e;
}

.chat-side-menu .side-header {
  border-bottom: 1px solid #6f6b7d2e;
}

.chat-side-menu .side-header .top-side {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .2rem;
  padding: 10px;
}

.chat-side-menu .head-search input {
  padding-right: 2.3rem;
}

.chat-side-menu .head-search i {
  position: absolute;
  top: 26%;
  right: 1rem;
  color: #6f6b7d2e;
  font-size: 1rem;
}

.chat-body .messages-container::-webkit-scrollbar,
.chat-side-menu .users-list::-webkit-scrollbar {
  width: 8px !important;
}

.chat-body .messages-container::-webkit-scrollbar-thumb,
.chat-side-menu .users-list::-webkit-scrollbar-thumb {
  background-color: #070707ce;
}

.chat-body .messages-container::-webkit-scrollbar-track,
.chat-side-menu .users-list::-webkit-scrollbar-track {
  background-color: #d4d6d6;
}

.chat-side-menu .users-list {
  padding: 0 10px;
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  flex-direction: column;
  height: calc(100vh - 532px);
  overflow-y: auto;
  margin-bottom: 0;
}

.chat-side-menu .users-list .user-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem;
  cursor: pointer;
}

.chat-side-menu .users-list .user-name span,
.chat-side-menu .users-list .user-name>p {
  color: #808080;
}

.chat-body {
  position: relative;
  display: grid;
  grid-template-rows: 59px auto 60px;
  border-right: 1px solid #6f6b7d2e;
}

.chat-body .body-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #6f6b7d2e;
}

.chat-body .body-header .user-container,
.chat-body .body-header .messages-search {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.8rem;
  padding: 0 0.5rem;
  font-size: 19px;
}

.messages-search {
  font-size: 19px;
}

.chat-body .body-header .user-name p {
  line-height: normal;
}

.chat-body .messages-container {
  height: calc(100vh - 520px);
  overflow-y: auto;
}

.chat-body .messages-container .my-message,
.chat-body .messages-container .user-message {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: .5rem;
  padding: 10px;
}

.chat-body .messages-container .user-message {
  justify-content: flex-end;
}

.chat-body .messages-container .messager-img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;

}

.chat-body .messages-container .my-message .ms-content,
.chat-body .messages-container .user-message .ms-content {
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
}

.chat-body .messages-container .my-message span,
.chat-body .messages-container .user-message span {
  margin-top: .4rem;
  width: 100%;
  display: inline-block;
}

.chat-body .messages-container .user-message span {
  text-align: left;
}

.chat-body .messages-container .my-message .ms-content {
  box-shadow: 0 0.125rem 0.25rem rgba(165, 163, 174, .3);
  background-color: #0166FF !important;
  border-top-right-radius: 0;
  color: #fff;
}

.chat-body .messages-container .user-message .ms-content {
  box-shadow: 0 0.125rem 0.25rem rgba(165, 163, 174, .3);
  border-top-left-radius: 0;
  background-color: #E6F0FF;
}

.chat-body .send-container {
  position: relative;
  padding: 0 0.5rem;
}

.chat-body .send-container button {
  position: absolute;
  top: 6px;
  left: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

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

.active-chat {
  color: #fff;
  border-radius: 0.25rem;
  background: linear-gradient(270deg, #3498db 22.16%, #3498db9c 76.47%) !important;
}

.online-icon,
.offline-icon {
  position: absolute;
  bottom: 0;
  font-size: 11px;
}

.online-icon {
  color: greenyellow;
}

.offline-icon {
  color: #a90606;
}

.course-card {
  width: 270px !important;
  min-width: 270px;
  max-width: 270px;
}

.send-container {
  margin-top: 10px;
}

.unread-message {
  color: red;
}

.user-name {
  font-size: 14px;
}

.partener-img {
  width: 150px;
  height: 150px;
}

.support-whats {
  position: fixed;
  cursor: pointer;
  width: 150px !important;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: rgba(0, 200, 0, 1);
  color: white;
  border-radius: 50px;
  text-align: center;
  transition-duration: 0.5s;
  animation: support-whats-btn 3s infinite;
  z-index: 9000;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.support-whats.sm-screen {
  width: 60px !important;
  bottom: 20px;
  right: 20px;
}

.support-whats i {
  font-size: 30px;
}

.support-whats:hover {
  background-color: rgba(0, 150, 0, 1);
  color: white;
}

.support-whats a {
  color: #fff;
}

.logo-img {
  max-width: 40px;
  max-height: 48px;
}

.footer-logo-img {
  max-width: 120px;
  width: 120px;
  max-height: 120px;
  height: 120px;
}

.login-logo
{
  max-width: 200px;
}

.go-cart-btn {
  padding: 8px;
  border-radius: 2px;
  border: 1px solid var(--main-color);
  color: #fff;
  background: var(--main-color);
  font-size: 12px;
  font-weight: 700;
  line-height: 28.8px;
}

.go-cart-btn:hover
{
  color: #fff;
  background-color: #0c4eb2;
}

@keyframes support-whats-btn {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 200, 0, 1);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(0, 200, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 200, 0, 0);
  }
}



@media (max-width: 768px) {
  .course-details .teacher-subj .imgBx2 img {
    width: 110px;
    height: 110px;
  }

  .info-card.card {
    width: auto;
    position: unset;
    right: unset;
    top: unset;
    margin: auto;
  }

  .chat-container {
    grid-template-columns: unset;
  }

  #append_messages {
    /* position: absolute; */
    z-index: 1;
    background: #fff;
    width: 100%;
  }

  .chat-side-menu,
  .chat-body {
    border: unset;
  }
  .course-card {
    margin: auto;
    width: auto !important;
    min-width: 100%;
    max-width: 100%;
  }
  .courses-sec .card .card-img-top,
  #route1 .card .card-img-top,
  #route2 .card .card-img-top {
    height: auto;
    width: 100%;
  }
  .card-blog img {
    height: auto;
    min-height: auto;
    max-height: unset;
    width: 100%;
  }
  .afedny-sec h5 {
    font-size: 24px;
  }
  .afedny-sec p {
    font-size: 14px;
  }
  .why-afedny .row {
    margin-top: 40px;
  }
  .home-sec .afedny-sec {
    padding-bottom: 1rem;
    background-position: 25% 100%;
    background-size: 300% 100%;
    height: auto;
  }

}

.fa-asterisk {
  color: red;
  font-size: 7px;
}

.filter-sections {
  display: flex;
  gap: 4px;
}

.filter-element {
  padding: 24px 24px 20px 24px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  background: #FFFFFF33;
  color: #fff;
  /* opacity: 40%; */
}

.filter-element.active,
.filter-element.active:hover {
  border-top: 8px solid #0166FF;
  background-color: #FFFFFF;
  padding-top: 16px;
  /* opacity: 1; */
}

.filter-element:hover {
  background: #FFFFFF4D;
}

.filter-element:hover i,
.filter-element:hover span {
  color: #FFFFFF;
}

.filter-element span {
  font-weight: 700;
  font-size: 16px;
  line-height: 180%;
  color: #FFFFFF;
}

.filter-element.active span {
  color: #0166FF;
}

.filter-element i {
  background-color: #FFFFFF1F;
  backdrop-filter: blur(8px);
  padding: 8px;
  border-radius: 50%;
  color: #FFFFFF;
  
}

.filter-element.active i {
  background-color: #DFEBFE;
  color: #0166FF;
}

.filter-parameters {
  background-color: #FFFFFF;
  border-radius: 4px 0 4px 4px;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100% !important;
}

.filter-parameters .f-pram{
  padding: 10px 8px;
  border-radius: 2px;
  background-color: #F2F2F2;
  border: 1px solid #EDEDED;
  animation-timing-function: linear;
  animation-duration: 100ms;
  width: 200px;
}

.filter-parameters .btn {
  padding: 10px 8px;
  border-radius: 2px;
  width: 140px;
}

.f-pram select
{
  color: #999999;
  border: unset;
  background-color: unset;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23999999' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-position: left .75rem center;
  padding: 0 0 0 2.25rem;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  font-style: Medium;
  font-size: 14px;
  line-height: 180%;
}

.f-pram select.selected {
  color: #1A1A1A;
  font-weight: 700;
}

.f-pram select:focus,
.f-pram select:focus-visible {
  outline: none;
  box-shadow: none;
  border: unset;
}

.f-pram span {
  font-weight: 700;
  font-size: 16px;
  line-height: 180%;
  color: var(--main-color);
  text-align: start;
  width: 100%;
  display: block;
}

@media (max-width: 768px) {
  .filter-parameters .f-pram {
    width: 100%;
  }
}