/*=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=*/
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');

/*=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=*/

@font-face {
  font-family: "Nunito";
  src: url(../fonts/Nunito-Black.ttf);
  font-weight: 900;
}
@font-face {
  font-family: "Nunito";
  src: url(../fonts/Nunito-Bold.ttf);
  font-weight: 700;
}
@font-face {
  font-family: "Nunito";
  src: url(../fonts/Nunito-ExtraBold.ttf);
  font-weight: 800;
}
@font-face {
  font-family: "Nunito";
  src: url(../fonts/Nunito-ExtraLight.ttf);
  font-weight: 200;
}
@font-face {
  font-family: "Nunito";
  src: url(../fonts/Nunito-Light.ttf);
  font-weight: 300;
}
@font-face {
  font-family: "Nunito";
  src: url(../fonts/Nunito-Medium.ttf);
  font-weight: 400;
}
@font-face {
  font-family: "Nunito";
  src: url(../fonts/Nunito-Regular.ttf);
  font-weight: 500;
}
@font-face {
  font-family: ".Nunito";
  src: url(../fonts/Nunito-SemiBold.ttf);
  font-weight: 600;
}
:root {
  --color-1: #444;
}


body {
  padding: 0px;
  margin: 0px;
  font-family: 'Almarai', sans-serif !important;
  overflow-x: hidden;
  background-color: #f1f1f1;
}
* {
  box-sizing: border-box;
}
ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
a {
  text-decoration: none;
}
.con-first-header {
  background-color: #2c75e4;
  padding: 5px;
}
.btn-customized {
  padding: 0px;
  color: white;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
}
.btn-customized::after {
  margin-right: 10px;
}
.btn-customized:hover {
  color: white;
}
.con-contact-data {
  display: flex;
  align-items: center;
  justify-content: center;
}
.con-contact-data .con-phone-or-email {
  display: flex;
  align-items: center;
  margin-right: 30px;
}
.con-contact-data .con-phone-or-email i {
  font-size: 15px;
  color: white;
  margin-right: 10px;
}
.con-contact-data .con-phone-or-email span {
  font-size: 13px;
  color: white;
  font-weight: 600;
}
.con-log-out {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.con-log-out a {
  color: white;
}
.con-log-out a i {
  font-size: 15px;
  margin-right: 5px;
}
.con-log-out a span {
  font-size: 15px;
}
.logo-page {
  display: flex;
  width: 100%;
}
header {
  position: relative;
}
.row {
  margin: 0px;
}
.logo-page img {
  width: 100%;
  max-height: 80px;
}
.con-second-header {
  padding: 10px 0px;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  background-color: transparent;
  background-image: linear-gradient(180deg, #1c1a1f 0%, rgba(0, 0, 0, 0) 100%);
}
.con-ul-header-links {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.con-ul-header-links li {
  padding: 10px 0px;
  margin: 0px 20px;
  position: relative;
}
.con-ul-header-links li.active::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 50%;
  height: 3px;
  border-radius: 5px;
  background-color: #2c75e4;
}
.con-ul-header-links li:hover::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 50%;
  height: 3px;
  border-radius: 5px;
  background-color: #2c75e4;
}
.con-ul-header-links li.active::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid transparent;
  border-bottom: 7px solid #2c75e4;
}
.con-ul-header-links li:hover:before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid transparent;
  border-bottom: 7px solid #2c75e4;
}
.con-ul-header-links li > a {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.btn-customized img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.con--img-search {
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}
.btn-customized-img::after {
  display: none;
}
.btn-check:focus + .btn,
.btn:focus {
  box-shadow: none;
}
.con-student-img-header {
  margin-right: 10px;
}
.dropdown-menu-customized {
  left: 50% !important;
  transform: translate3d(-50%, 32px, 0px) !important;
  position: relative;
  min-width: 200px;
  overflow: hidden;
  border: none;
  border-radius: 10px;
}
.dropdown-menu-customized a {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.dropdown-menu-customized a i {
  background-color: #dddddd;
  color: #252122;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  font-size: 15px;
  margin-left: 10px;
}
.dropdown-menu-customized-21 p {
  text-align: center;
  padding: 10px;
  margin-bottom: 0px;
  border-bottom: 1px solid #dddddd;
}
.dropdown-menu-customized-21 {
  overflow: visible;
  border-radius: 0px;
}
.dropdown-menu-customized-21::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 25px;
  transform: translate(-50%, 0%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid transparent;
  border-bottom: 7px solid #2c75e4;
  transform: translateY(-100%);
}

.dropdown-menu-customized::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background-color: #2c75e4;
}
.con-search-box-header input {
  flex-grow: 1;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 5px 20px;
}
.con-search-box-header {
  height: 30px;
  background-color: #fff;
  border-radius: 50px;
}
.con-search-box-header i {
  width: 40px;
  height: 40px;
  background-color: #2c75e4;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  border-radius: 50%;
}
.con-search-box-header {
  display: flex;
  align-items: center;
}
.con-img-banner {
  position: relative;
}
.price-of-lec-Expires {
  background-color: #de4c38 !important;
}
.price-of-lec-Watch {
  background-color: #21c87a !important;
}
.but-fawry-102 {
  text-align: center;
}
.con-img-banner::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgb(28 26 31 / 15%);
  z-index: 2;
}
.owl-carousel-custonized-1 .owl-nav {
  display: none;
}
.owl-carousel-custonized-1 .owl-dots {
  display: none;
}
.owl-carousel-custonized-1 {
  margin-bottom: 30px;
}

.btn-customized-link {
  font-size: 15px;
  color: #fff;
}
.btn-customized-link:hover {
  color: #fff;
}
.con-home-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.con-home-title h1 {
  font-size: 30px;
  color: #444;
  padding: 20px 0px;
  position: relative;
  font-weight: 800;
  margin: 0px;
}
.con-home-title h1::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 50%;
  height: 3px;
  border-radius: 5px;
  background-color: #2c75e4;
}
.con-home-title h1::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid transparent;
  border-bottom: 9px solid #2c75e4;
}
.con-img-card-course {
  position: relative;
  border-radius: 15px;
}
.con-img-card-course img {
  width: 100%;
  border-radius: 15px 15px 0px 0px ;
}
.con-type-of-lec {
  background-color: #1DA678;
  padding: 5px 10px;
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius:50px;
  min-width: 80px;
  text-align: center;
}
.con-type-of-lec p {
  font-size: 13px;
  color: white;
  font-weight: 700;
  margin-bottom: 0px;
}
.price-of-lec {
  position: absolute;
  bottom: 0px;
  left: 20px;
  padding: 6px 12px; /* Increased padding by 20% */
  border-radius: 50px;
  background-color: #2c75e4;
  font-size: 12.2px; /* Decreased font size by 20% */
  font-weight: 640; /* Decreased font weight by 20% */
  color: #fff;
  margin-bottom: 0px;
  width: 84px; /* Increased width by 20% */
  height: 84px; /* Increased height by 20% */
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(0px, 50%);
  z-index: 2;
}
.con-teacher-img-post-name{
        display: flex;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 20px;
}
.con-teacher-img-post-name img{
    width:27px !important;
    height:27px;
    border-radius:50%;
    margin-left:15px;
}
.con-teacher-img-post-name p{
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 0px;
    color: #444;
}
.con-meet-teacher-section{
    background-color:#e4f0f6;
    padding:30px 0px;
}
.con-teacher-img-socail-icons-name{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /*width:fit-content;*/
}
.con-teacher-img-socail-icons-name img{
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border:10px solid white;
    margin-bottom: 20px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) inset, 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
}
.title-of-header-of-reviews{
        display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 50px;
}
.title-of-header-of-reviews h1{
        font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #444;
    text-align: center;
}
.main-con-reviews-section{
    padding:25px 0px;
    margin-bottom:40px;
}
.add-review textarea{
    display: block;
    width: 100%;
    color: black;
    background-color: #eee;
    border: none;
    outline: none;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 20px;
    resize: initial;
}
.one-review-creator span{
        font-size: 14px;
    font-weight: 500;
    color: #708389;
}
.main-con-tabs-nav-bar{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:30px;
    margin-top:20px;
}
.main-con-tabs-nav-bar > ul{
    display:flex;
    align-items:center;
    background: #eee;
    width:100%;
    max-width:900px;
    border-radius:50px;
    overflow:auto;
}
.tabs-nav-bar-dropdown > button{
    background:transparent;
    color: #708389;
    border:none;
    outline:none;
    font-weight:700;
}
.tabs-nav-bar-dropdown > button i{
    font-size: 12px;
    margin: 0px 5px;
}
.tabs-nav-bar-dropdown .dropdown-menu li a{
    padding:10px 10px;
}
.main-con-tabs-nav-bar > ul  > li.active .tabs-nav-bar-dropdown > button{
    color:white;
    background-color:#2c75e4;
}
.main-con-tabs-nav-bar > ul > li{
    padding:10px 20px;
    font-size:15px;
    font-weight:700;
    color:#708389;
    border-radius:50px;
    flex-grow: 1;
    text-align: center;
    width:10%;
    white-space:nowrap;
}
.main-con-tabs-nav-bar > ul > li > a{
    color: #708389;
}

.main-con-tabs-nav-bar > ul > li.active > a{
    color: #ffff;
}
.main-con-tabs-nav-bar > ul > li.active{
    color:white;
    background-color:#2c75e4;
}
.main-con-two-reviews{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.one-review{
    padding: 50px;
    background: white;
    border-radius: 20px;
    width: 45%;
    max-width: 550px;
}
.one-review-creator{
    display: flex;
    align-items: center;
    margin-top: 50px;
    position: relative;
}
.one-review-creator img:nth-child(1){
    width:60px;
    height:60px;
    border-radius:50%;
    margin-left:15px;

}
.one-review-creator p{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0px;
    color: #444;
    margin-left:20px;
}
.one-review-creator img:not(:nth-child(1)){
    position: absolute;
    top: -30px;
    left: 120px;
}
.one-review p{
    font-size: 15px;
    color: #444;
    font-weight: 600;
    line-height: 30px;
}
.title-of-header-of-reviews p{
    font-size: 15px;
    font-weight: 500;
    color: #708389;
    margin-bottom: 0px;
    max-width: 500px;
    text-align: center;
    line-height: 30px;
}
.p-about-p{
    height:100%;
    display:flex;
    align-items:center;
}
.title-of-page-main{
    display:flex;
    justify-content:center;
    margin-bottom:20px;
}
.special-title-of-page-main{
    display:flex;
    justify-content:flex-end;
    margin-bottom:20px;
    padding-right:225px;

}
.special-title-of-page-main h1{
    font-size:40px;
    font-weight:900;
    margin-bottom:0px;
    padding:20px 0px;
}
.special-title-of-page-main h1 span{
    color:#2c75e4;
}

.title-of-page-main h1{
    font-size:40px;
    font-weight:900;
    margin-bottom:0px;
    padding:20px 0px;
}
.title-of-page-main h1 span{
    color:#2c75e4;
}
.img-st-header img{
    width:55px;
    height:55px;
    border-radius:50%;
}
.p-about-p p{
    width:100%;
    font-size: 18px;
    color: #444;
    font-weight: 600;
    margin-bottom: 0px;
}
.con-teacher-img-socail-icons-name p{
  font-size: 20px;
  color: #444; /* Corrected the color value */
  font-weight: 700;
  margin-bottom: 10px;
}
.con-teacher-img-socail-icons-name span{
    font-size: 15px;
    font-weight: 500;
    color: #708389;
    margin-bottom: 30px;
}
.icons-socail-meet-teacher {
    width:200px;
    display:flex;
    align-items:center;
    justify-content:space-around;
}
.icons-socail-meet-teacher a{
    font-size:15px;
    width:35px;
    height:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background-color:#1F82BF;
}
.con-section-title h2{
    font-size:42px ;
    font-weight:800;
    margin-bottom:0px;
    color:#444;
}
.con-section-title .devider-line{
    position: relative;
    margin-bottom: 20px;
    height: 17px;
}
.con-section-title .devider-line::before {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' overflow='visible' height='100%' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='square' stroke-miterlimit='10'%3E%3Cpolyline points='0,18 12,6 24,18 '/%3E%3C/svg%3E");
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' overflow='visible' height='100%' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='square' stroke-miterlimit='10'%3E%3Cpolyline points='0,18 12,6 24,18 '/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  content: "";
  width: 100px;
  height: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-mask-size: 22px;
  mask-size: 22px;
  background-color: #F24080;
  background-size: 22px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
.con-section-title{
    margin-bottom:50px;
}
.icons-socail-meet-teacher a i{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    color:white;

}
.con-more-info-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0px;
  /*border-top: 1px solid #e7e9ed;*/
  position: relative;
}
/*.con-more-info-card::after {*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: -1px;*/
/*  right: 0px;*/
/*  width: 20%;*/
/*  background-color: #2c75e4;*/
/*  height: 1px;*/
/*}*/
.con-1-more-info-card {
  display: flex;
  align-items: center;
}
.con-1-more-info-card i {
  font-size: 17px;
    color: #f4f4f4;
    margin-left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.con-1-more-info-card span {
  color: #f4f4f4;
  font-size: 13px;
  font-weight: 500;
}
.lecture-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #FFF8E7;
  margin-bottom: 20px;
  text-align: center;
}
.lecture-card-discription {
  font-size: 15px;
  font-weight: 800;
  color: #f4f4f4;
  margin-bottom: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.con-content-card-course {
  background-color: #F25C05;
  padding: 35px ;
  margin-bottom: 40px;
  position:relative;
  border-radius:0px 0px 15px 15px ;
}
.con-content-card-course::after{
    content:"";
    position:absolute;
    bottom:0px;
    left:20px;
    width:calc(100% - 40px);
    height:15px;
    border-radius:0px 0px 15px 15px ;
    transform:translateY(95%);
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
}
.owl-carousel-custonized-2 {
  margin-bottom: 10px;
}
.owl-carousel-custonized-222 {
  margin-bottom: 10px;
}
.con-link-to-see-more {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0px 30px;
}
.con-link-to-see-more a {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  padding: 7px 40px;
  border-radius: 50px;
  background-color: #2c75e4;
}
.con-about-mr-reda-con {
  /* background: url(../images/1629820029_fLIcpK.jpeg) no-repeat center center fixed; */
  background-size: cover;
  width: 100%;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
  position: relative;
  margin-bottom: 50px;
}
.con-about-mr-reda-con::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(28, 26, 31, 0.9);
}
.con-about-mr-reda-con img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  border: 5px solid white;
}
.about {
  font-size: 18px;
  color: white;
  margin-bottom: 0px;
  font-weight: 700;
  width: 80%;
  text-align: center;
  position: relative;
  z-index: 1;
}
.main-con-footer img {
  width: 250px;
}
footer {
  background-color: #252122;
  color: white;
  padding: 20px;
  margin-top: 50px;
}
.con-logo-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.con-links-footer-title {
  padding: 10px 0px;
  border-bottom: 1px solid #e7e9ed;
  position: relative;
  margin-bottom: 17px;
}
.con-links-footer-title::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: 0px;
  width: 50px;
  height: 1px;
  background-color: #2c75e4;
}
.con-links-footer-title span {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}
.ul-footoer-1 li a {
  font-size: 15px;
  font-weight: 600;
  color: white;
}
.ul-footoer-1 li {
  margin: 10px 0px;
  padding: 0px 20px;
  position: relative;
}
.ul-footoer-1 li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: #2c75e4;
  border-radius: 50px;
}
.ul-footoer-2 li a {
  display: flex;
  align-items: center;
  margin: 10px 0px;
}
.ul-footoer-2 li a i {
  font-size: 15px;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: #2c75e4;
  border-radius: 50%;
  margin-left: 10px;
}
.ul-footoer-2 li a span {
  font-size: 15px;
  color: #fff;
  font-weight: 700;
}
.header-any-page .con-second-header {
  position: relative;
  top: auto;
  left: auto;
  background-color: #f5f5f5;
  background-image: none;
  box-shadow: 0px 0px 10px 0px #c3c3c366;
}
.header-any-page .con-ul-header-links li > a {
  color: #444;
}
.header-any-page .btn-customized-link:hover {
  color: #444;
}
.header-any-page .btn-customized-link {
  color: #444;
}
.con-img-ins-course {
  position: relative;
  overflow: hidden;
}
.con-img-ins-course img {
  width: 100%;
  border-radius: 10px;
}
.con-p-for-type-lecture {
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2c75e4;
  position: absolute;
  top: 50px;
  left: -90px;
  transform: rotate(-45deg);
}
.con-p-for-type-lecture p {
  color: white;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 0px;
}
.con-body-content {
  padding: 30px 0px;
}
.lectue-ins-title {
  font-size: 20px;
  font-weight: 800;
  color: #444;
  margin-bottom: 0px;
  background-color: white;
  padding: 20px;
  text-align: center;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px #d1d1d19e;
}
.lecture-ins-des {
  font-size: 15px;
  font-weight: 600;
  color: #708389;
  margin-bottom: 20px;
}
.con-ins-lecture-data {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px #d1d1d19e;
}
.con-lecture-info-tit-1 {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  /* justify-content: center; */
}
.con-lecture-info-tit-1 h1 {
  font-size: 18px;
  color: #444;
  padding: 0px 15px;
  position: relative;
  font-weight: 800;
}
.con-lecture-info-tit-1 h1::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  right: 0px;
  width: 5px;
  height: 80%;
  background-color: #2c75e4;
  left: 0%;
}
.body-sign-in {
  height: 100vh;
}
.con-lecture-info-tit-2 h1 {
  font-size: 20px;
  color: #444;
  padding: 0px 0px;
  position: relative;
  font-weight: 800;
}
.con-img-sign-in-page {
  width: 100%;
  position: relative;
}
.con-img-sign-in-page::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgb(28 26 31 / 18%);
}
.con-img-sign-in-page > img {
  width: 100%;
  max-height: 250px;
}
.con-hello-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.con-hello-box img {
  width: 200px;
  margin-bottom: 20px;
}
.con-hello-box h1 {
  font-size: 25px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  width: 100%;
}
.con-img-sign-in-page-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.con-img-sign-in-page-1 img {
  width: 100%;
  margin: 20px 0px;
}
.close-pop-up-masseage {
  display: none;
}
.pop-up-masseage {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.pop-up-masseage img {
  width: 100px;
  margin-bottom: 20px;
}
.reference-number {
  font-size: 20px;
  font-weight: 800;
  color: #1c1a1f;
}
.modal-footer-1 {
  justify-content: center;
  border: none;
}
.con-lecture-info-tit-2 h1::after {
  content: "";
  position: absolute;
  bottom: 0px;
  transform: translate(-50%, 0%);
  left: 50%;
  width: 100%;
  height: 3px;
  border-radius: 10px;
  background-color: #2c75e4;
}
.con-p-ins-course-price {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.con-p-ins-course-price i {
  font-size: 15px;
  color: #2c75e4;
  margin-right: 10px;
}
.con-p-ins-course-price .p-ins-course-top-inf-tit {
  font-size: 15px;
  font-weight: 600;
  color: #444;
  margin-right: 10px;
  margin-bottom: 0px;
}
.con-p-ins-course-price .p-ins-course-top-inf-des {
  margin-right: 1%;
  font-size: 13px;
  font-weight: 600;
  color: #708389;
  margin-bottom: 0px;
}
.con-img-ins-course > p {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: #252122;
  color: white;
  padding: 5px 20px;
  border-radius: 50px;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 0px;
}
.ins-course-buy-now-but {
  font-size: 15px;
  border: none;
  outline: none;
  background-color: #2c75e4;
  padding: 5px 20px;
  width: 70%;
  margin: 20px auto 10px;
  font-weight: 800;
  color: #fff;
  border-radius: 50px;
}
.con-but-buy-now {
  display: flex;
  align-items: center;
  justify-content: center;
}

.con-tabs-content {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0px 0px 10px 0px #d1d1d19e;
  margin-top: 30px;
}
.con-log-and-sign-up-content > div {
  display: none;
}
.con-log-and-sign-up-content > div:nth-child(1) {
  display: block;
}
.con-lecture-info-tit-2 {
  display: flex;
  /* justify-content: center; */
  margin-bottom: 20px;
}
.real-des-lecture {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: #708389;
  line-height: 30px;
  margin-bottom: 40px;
}
.main-con-curriculum {
  border: 1px solid #cfcfcf;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
}
.sub-con-curriculum-1 {
  display: flex;
  align-items: center;
  padding: 20px 20px;
  justify-content: space-between;
}
.sub-con-curriculum-1 i {
  font-size: 15px;
  color: #708389;
  transform: rotate(180deg);
}
.con-drop-down-wallet {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #efefef;
  width: 90%;
  margin: auto;
  border-radius: 10px;
}
.con-drop-down-wallet img {
  width: 40px;
}
.con-drop-down-wallet span {
  font-size: 18px;
  font-weight: 800;
  color: #444;
}
.con-plus-minus {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  margin-right: 15px;
  height: 25px;
}
.con-plus-minus .plus-1 {
  width: 25px;
  height: 5px;
  border-radius: 5px;
  background-color: #2c75e4;
}
.con-plus-minus .minus-1 {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-60%, 0%);
  height: 25px;
  width: 5px;
  border-radius: 5px;
  background-color: #2c75e4;
  transition: 0.5s ease-in-out;
}
.show-curriculum .sub-con-curriculum-1 > i {
  transform: rotate(-90deg);
  color: #2c75e4;
}
.main-curriculum-p {
  font-size: 15px;
  font-weight: 800;
  color: #1c1a1f;
  margin-bottom: 0px;
  transition: 0.5s ease-in-out;
}
.show-curriculum .main-curriculum-p {
  color: #2c75e4;
}
.show-curriculum .con-sub-con-curriculum-2 {
  transform: scaleY(1);
  opacity: 1;
  visibility: visible;
  position: relative;
}
.con-sub-con-curriculum-2 {
  transform: scaleY(0);
  opacity: 0;
  visibility: hidden;
  position: absolute;
  transition: 0.5s ease-in-out;
  transform-origin: 0 0 0;
}
.sub-con-curriculum-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px;
  border-top: 1px solid #cfcfcf;
}
.con-icon-and-sub-p,
.con-time-p-icon {
  display: flex;
  align-items: center;
}
.con-icon-and-sub-p i {
  font-size: 15px;
  color: #708389;
  margin-left: 10px;
  /* transform: rotate(180deg); */
}
.con-icon-and-sub-p p,
.con-time-p-icon p {
  font-size: 13px;
  color: #708389;
  margin-bottom: 0px;
  font-weight: 700;
}
.con-icon-and-sub-p,
.con-time-p-icon {
  display: flex;
  align-items: center;
}
.con-icon-and-sub-p p,
.con-time-p-icon p {
  font-size: 13px;
  color: #708389;
  margin-bottom: 0px;
  font-weight: 700;
}
.con-time-p-icon i {
  font-size: 15px;
  color: #708389;
  margin-right: 10px;
}
.main-con-student-comment {
  position: relative;
  display: flex;
  margin-bottom: 30px;
}
.main-con-student-comment::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 25px;
  height: 10px;
  transform: translateX(-35%);
  width: 10px;
  border-radius: 50%;
  background-color: #b4b6ba;
  z-index: 1;
}
.con-main-comment-user-image img {
  width: 50px;
  height: 50px;
  margin-right: 20px;
  border-radius: 50%;
  z-index: 2;
  position: relative;
}
.p-user-name {
  font-size: 17px;
  font-weight: 800;
  color: #444;
  margin-bottom: 0px;
}
.con-comment-data > i {
  font-size: 13px;
  color: #fbb54c;
}
.con-comment-data > span {
  font-size: 13px;
  font-weight: 700;
  color: #708389;
  margin-left: 10px;
}
.p-comment {
  font-size: 15px;
  color: #708389;
  font-weight: 700;
  line-height: 25px;
  margin-top: 15px;
}
.con-comment-user {
  display: flex;
}
.con-main-replay-user-image {
  position: relative;
  height: fit-content;
  margin-right: 20px;
}
.con-comment-user img,
.con-replay-user img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 2;
  position: relative;
}
.con-main-replay-user-image::after {
  content: "";
  position: absolute;
  top: -50%;
  right: 0px;
  z-index: 1;
  width: 95px;
  height: 100%;
  border-left: 3px solid #b4b6ba;
  border-top: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 3px solid #b4b6ba;
  border-radius: 0px 0px 0px 20px;
}
.main-con-student-comment::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 25px;
  height: 95%;
  width: 3px;
  border-radius: 4px;
  background-color: #b4b6ba;
  z-index: 1;
}
.no-after::after {
  display: none;
}
#replay-button-open-close-form {
  display: none;
}
.replay-form label {
  background-color: #2c75e4;
  color: white;
  font-size: 15px;
  font-weight: 800;
  border-radius: 50px;
  padding: 5px 20px;
  margin-bottom: 20px;
}
#replay-button-open-close-form:checked ~ .con-form-replay-1 {
  transform: scaleY(1);
  opacity: 1;
  visibility: visible;
  position: relative;
}
.con-form-replay-1 {
  transform: scaleY(0);
  opacity: 0;
  visibility: hidden;
  position: absolute;
  transition: 0.5s ease-in;
  transform-origin: 0 0 0;
}
.con-form-replay-1 p {
  font-size: 15px;
  font-weight: 800;
  color: #444;
  margin-bottom: 10px;
}
.con-form-replay-1 textarea {
  width: 100%;
  background-color: #ebebeb;
  border: none;
  outline: none;
  border-radius: 10px;
  padding: 10px 20px;
}
#write-comment-button-open-close-form {
  display: none;
}
.form-write-comment label {
  display: flex;
  justify-content: center;
}
#write-comment-button-open-close-form:checked ~ .con-form-write-comment {
  transform: scaleY(1);
  opacity: 1;
  visibility: visible;
  position: relative;
}
.con-form-write-comment img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 50%;
}
.con-form-write-comment {
  transform: scaleY(0);
  opacity: 0;
  visibility: hidden;
  position: absolute;
  transition: 0.5s ease-in-out;
  transform-origin: 0 0 0;
}
.con-form-write-comment {
  display: flex;
  width: 90%;
  margin: auto;
}
.form-write-comment textarea {
  width: 100%;
  background-color: #ebebeb;
  border: none;
  outline: none;
  border-radius: 10px;
  padding: 10px 20px;
}
.form-write-comment label span {
  background-color: #2c75e4;
  color: white;
  width: 90%;
  border-radius: 50px;
  margin: 10px auto;
  font-size: 20px;
  font-weight: 800;
  padding: 5px;
  text-align: center;
}
.con-pay-lecture-box {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  box-shadow: 0px 0px 10px 0px #d1d1d19e;
  flex-direction: column;
}
.con-coupon-Payment {
  display: flex;
  align-items: center;
  background-color: #e7e9ed;
  border-radius: 40px;
  overflow: hidden;
  margin-bottom: 10px;
}
.con-coupon-Payment input {
  flex-grow: 1;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 8px 20px;
  font-size: 15px;
  color: #708389;
  font-weight: 800;
}
.con-coupon-Payment button {
  background-color: #2c75e4;
  border: none;
  outline: none;
  border-radius: 50px;
  padding: 8px 20px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.but-fawry,
.but-visa {
  background-color: #2c75e4;
  border: none;
  outline: none;
  border-radius: 50px;
  padding: 8px 20px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}
.con-sogn-in-form-content {
  width: 80%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 0px 70px;
}
.con-sogn-in-form-content > img {
  width: 200px;
  margin-bottom: 20px;
}
.con-form-log-in {
  background-color: white;
  padding: 20px 20px 50px;
  border-radius: 10px;
  width: 80%;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.con-sogn-in-form-content > h1 {
  font-size: 30px;
  font-weight: 800;
  color: #444;
  margin-bottom: 10px;
  position: relative;
}
.con-input-sign-up {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin-bottom: 15px;
}
.con-input-sign-up label {
  font-size: 15px;
  font-weight: 800;
  color: #444;
  margin-bottom: 5px;
}
.con-input-sign-up input {
  color: #708389;
  background-color: #e7e7e7;
  border: none;
  outline: none;
  border-radius: 50px;
  padding: 10px 20px;
  font-weight: 800;
}
.con-input-sign-up select {
  color: #708389;
  background-color: #e7e7e7;
  border: none;
  outline: none;
  border-radius: 50px;
  padding: 10px 20px;
  font-weight: 800;
  width: 100%;
  appearance: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.con-sogn-in-form-content > h1::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 50%;
  height: 3px;
  border-radius: 5px;
  background-color: #2c75e4;
}
.con-sogn-in-form-content > h1::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translate(-50%, 0%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid transparent;
  border-bottom: 9px solid #2c75e4;
}
.con-form-log-in > h1 {
  font-size: 20px;
  font-weight: 800;
  color: #444;
  margin-bottom: 20px;
}
.con-input-form input {
  border: none;
  background-color: #e4e4e5;
  border-radius: 50px;
  flex-grow: 1;
  outline: none;
  font-size: 15px;
  font-weight: 800;
  padding: 10px 20px;
  width: 90.62%;
}
.con-input-form {
  width: 80%;
}
.con-input-form {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.con-input-form i {
  font-size: 15px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #2c75e4;
  margin-left: 5px;
  color: #fff;
  border-radius: 50%;
}
.con-input-to-border {
  position: relative;
  overflow: hidden;
  height: 100%;
  flex-grow: 1;
}
.ul-last-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ul-last-tabs li {
  padding: 5px 25px;
  position: relative;
  font-size: 18px;
  font-weight: 800;
  color: #444;
  z-index: 2;
}
.ul-last-tabs li.active {
  border-radius: 43px;
  background: #2c75e4;
  color: white;
}
.con-ul-last-tabs-content > div {
  display: none;
}
.con-ul-last-tabs-content > div:nth-child(1) {
  display: block;
}
.con-ul-last-tabs-content {
  padding: 20px;
}
/* .ul-last-tabs li.active::after {
  content: "";
  top: 0px;
  left: 0px;
  width: 100%;
  height: 3px;
  background-color: #2c75e4;
  position: absolute;
} */
.con-input-to-border::after {
  content: "";
  width: 100%;
  height: 3px;
  background-color: #2c75e4;
  position: absolute;
  bottom: 0px;
  left: 0px;
  transform: translateX(-100%);
}
.table-11 {
  width: 100%;
  text-align: center;
}
.table-11 thead {
  /* background-color: #2c75e4; */
  /* color: white; */
      background-color: white;
    color: #000;
    border-bottom: 1px solid #ebebeb;
}
.table-11 thead th {
  padding: 10px;
}
.table-11 tbody tr:nth-child(even) {
  background-color: #e8e9e98c;
  color: #080808;
}
.table-11 tbody tr:nth-child(odd) {
  background-color: #fff;
  color: #646464;
}
.con-my-wallet-img-button {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.con-my-wallet-img-button > img {
  width: 150px;
}
.my-wallet-content {
  font-size: 30px;
  font-weight: 900;
  margin: 30px;
  color: #444;
}
.con-my-wallet-2-but {
  display: flex;
  /* align-items: center; */
  flex-direction: column;
  /* justify-content: space-between; */
  width: 100%;
}
.pay-with-etc {
  margin: 20px 0px;
  font-size: 20px;
  font-weight: 800;
  color: var(--color-1);
}
.con-my-wallet-2-but .con-lecture-info-tit-1 h1 {
  font-size: 20px;
}
.con-my-wallet-2-but ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.con-my-wallet-2-but .con-lecture-info-tit-1 {
  margin-bottom: 30px;
}
.my-wallet-but-1 {
  background-color: white;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  margin-bottom: 20px;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  width: 45%;
  cursor: pointer;
  box-shadow: 0px 0px 10px 0px #dddddd;
}
.my-wallet-but-1.active {
  background-color: #2c75e4;
  color: white;
}
.con-ul-payment-methods > div {
  display: none;
}
.con-ul-payment-methods > div:nth-child(1) {
  display: block;
}
.con-ul-payment-methods {
  position: relative;
  box-shadow: 0px 0px 10px 0px #dddddd;
}
.conpay-visa form > input {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 80px;
  height: 80px;
  background-color: #2c75e4;
  color: white;
  font-size: 18px;
  font-weight: 800;
  border-radius: 50%;
  border: none;
  outline: none;
  white-space: pre-line;
}
.conpay-visa form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.conpay-visa {
  margin-bottom: 40px;
}
.my-wallet-but-1.active p {
  color: white;
}
.my-wallet-but-1 > img {
  width: 200px;
}
.table-11 tbody tr {
  font-size: 13px;
  font-weight: 500;
}
.con-input-visa-data {
  position: relative;
}
.con-ul-payment-methods {
  background-color: white;
  padding: 20px;
  border-radius: 20px;
}
.con-input-visa-data span {
  position: absolute;
  top: 0px;
  right: 20px;
  background-color: white;
  padding: 5px;
  font-size: 12px;
  font-weight: 800;
  color: #2c75e4;
  transform: translateY(-50%);
}
.con-img-and-some-data {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: white;
  padding: 20px;
  border-radius: 20px;
  width: 48%;
  box-shadow: 0px 0px 10px 0px #dddddd;
}

.con-img-and-some-data .img-profile-not-barcode {
  width: 100px;
  border-radius: 50%;
  height: 100px;
  margin-bottom: 20px;
}
.con-img-and-some-data .img-barcode {
  width: 200px;
  /* margin: 10px 0px; */
}
.name-student-profile {
  font-size: 18px;
  font-weight: 800;
  color: #444;
  margin-bottom: 5px;
}
.important-data {
  font-size: 14px;
  font-weight: 700;
  color: #708389;
  margin-bottom: 10px;
}
.con-other-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 48%;
  background-color: white;
  padding: 20px;
  box-shadow: 0px 0px 10px 0px #dddddd;
  border-radius: 20px;
}
.some-not-important-data-tit {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 0px;
  color: #444;
  margin-left: 10px;
}
.some-not-important-data-cont {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 0px;
  color: #708389;
}
.con-important-not-important-data {
  display: flex;
  justify-content: space-between;
  margin: 30px 0px;
}
.con-other-data > a {
  background-color: #2c75e4;
  color: white;
  font-size: 18px;
  font-weight: 800;
  padding: 5px 20px;
  width: 50%;
  border-radius: 50px;
  display: block;
  text-align: center;
  margin-top: 20px;
}
.con-view-somme-info {
  background-color: white;
  padding: 20px;
  border-radius: 50px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px 0px 10px 0px #dddddd;
}
.con-view-somme-info a {
  font-size: 18px;
  background-color: #2c75e4;
  color: white;
  font-weight: 800;
  padding: 5px 20px;
  border-radius: 50px;
}
.p-view-somme-info {
  font-size: 18px;
  font-weight: 800;
  color: #444;
  margin-bottom: 0px;
}
.con-other-data-one {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.con-input-visa-data {
  width: 80%;
  margin-bottom: 30px;
}
.con-input-visa-data input {
  border: 1px solid #b4b6ba;
  border-radius: 50px;
  background-color: transparent;
  width: 100%;
  outline: none;
  padding: 15px 20px;
  font-size: 17px;
  font-weight: 600;
  color: #444;
}
.table-11 tbody tr td {
  padding: 10px;
}
.separoter-100 {
  background-color: #9b9797;
}
#remmber-me-check-box {
  display: none;
}
.conpay-fawry {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.conpay-fawry img {
  width: 100px;
  margin-bottom: 30px;
}
.fawrymassege {
  font-size: 18px;
  font-weight: 800;
  color: #2c75e4;
  margin-bottom: 15px;
}
.fawrymassege-2 {
  font-size: 15px;
  font-weight: 600;
  color: #708389;
  margin-bottom: 0px;
}
.conpay-fawry-2 {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.conpay-fawry p {
  text-align: center;
}
#remmber-me-check-box:checked ~ label i::before {
  display: block;
  background-color: #2c75e4;

  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
#remmber-me-check-box:checked ~ label i {
  border: 1px solid transparent;
}
.con-remmber-me label i {
  width: 20px;
  height: 20px;
  border: 1px solid #818182;
  border-radius: 40px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  overflow: hidden;
}
.con-form-log-in .row {
  width: 100%;
}
.con-input-sign-up {
  width: 100%;
}
.con-remmber-me label i::before {
  display: none;
}
.con-remmber-me label span {
  font-size: 13px;
  font-weight: 700;
  color: #444;
}
.con-remmber-me label {
  display: flex;
  align-items: center;
}
.con-forget-pass-remmber-me {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  /*margin: 0px 0px 20px;*/
  margin:20px 0px ;
}
.con-forget-pass-remmber-me a {
  font-size: 13px;
  font-weight: 700;
  color: #444;
}
#radio-1,
#radio-2 {
  display: none;
}
.select-center-title {
  font-size: 18px;
  font-weight: 800;
  color: #444;
  margin-bottom: 10px;
  text-align: center;
}
#radio-1:checked + label span .dot {
  background-color: #9b9797;
}
#radio-2:checked + label span .dot {
  background-color: #9b9797;
}
.con-radio-select-center {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0px 12px;
  /* margin-bottom: 20px; */
}
.con-radio-select-center label {
  display: flex;
  align-items: center;
}
.con-radio-select-center label span {
  border: 1px solid #b4b6ba;
  padding: 2px;
  border-radius: 50%;
  margin-left: 10px;
}
.con-radio-select-center label span .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: transparent;
}
.con-radio-select-center label p {
  margin-bottom: 0px;
  font-size: 15px;
  font-weight: 700;
}
.con-form-log-in > button {
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #2c75e4;
  border: none;
  outline: none;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  transform: translate(-50%, 50%);
}
.con-form-log-in > input {
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #2c75e4;
  border: none;
  outline: none;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  transform: translate(-50%, 50%);
  white-space: pre-line;
}

.con-social-media-icon-1 {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #de4c38;
  border-radius: 5px;
  margin-bottom: 10px;
  width: 300px;
}
.con-social-media-icon-1 i {
  font-size: 20px;
  color: white;
  margin-left: 20px;
}
.con-social-media-icon-1 span {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  flex-grow: 1;
  text-align: center;
}
.con-social-media-icon-2 {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #38589a;
  border-radius: 5px;
  margin-bottom: 10px;
  width: 300px;
}
.con-social-media-icon-2 i {
  font-size: 20px;
  color: white;
  margin-left: 20px;
}
.con-social-media-icon-2 span {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  flex-grow: 1;
  text-align: center;
}
.con-social-media-icon-3 {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #84c4f3;
  border-radius: 5px;
  margin-bottom: 10px;
  width: 300px;
}
.con-social-media-icon-3 i {
  font-size: 20px;
  color: white;
  margin-left: 20px;
}
.con-social-media-icon-3 span {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  flex-grow: 1;
  text-align: center;
}
.con-form-log-in > p {
  font-size: 15px;
  font-weight: 800;
  color: #444;
  margin-bottom: 10px;
}
.con-three-lines-side-bar {
  width: 35px;
  height: 35px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.con-three-lines-side-bar.active .line-one {
  transform: rotate(45deg) translate(7px, 6px);
}
.con-three-lines-side-bar.active .line-two {
  transform: translate(-100%);
}
.con-three-lines-side-bar.active .line-three {
  transform: rotate(-45deg) translate(6px, -6px);
}
.main-con-three-lines-side-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
}
.line-one,
.line-two,
.line-three {
  width: 100%;
  height: 4px;
  margin-bottom: 5px;
  background-color: white;
  transform-origin: center center;
  border-radius: 50px;
  pointer-events: none;
}
.header-any-page .line-one,
.header-any-page .line-two,
.header-any-page .line-three {
  background-color: #444;
}
.black-over-lay-in-mobile {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #00000073;
  z-index: 50;
  display: none;
}
.con-side-bar-mobile-view {
  padding: 20px 20px 0px;
  overflow-y: auto;
}
.my-student-name {
  font-size: 15px;
  font-weight: 800;
  color: #444;
  margin-bottom: 10px;
}
.my-student-id {
  font-size: 13px;
  font-weight: 700;
  color: #708389;
  margin-bottom: 10px;
}
.side-bar-mobile-ul {
  padding: 20px 0px;
}
.side-bar-mobile-ul li a i {
  width: 40px;
  height: 40px;
  background-color: #dddddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #444;
  border-radius: 50%;
  margin-left: 10px;
}
.side-bar-mobile-ul li a {
  display: flex;
  align-items: center;
}
.side-bar-mobile-ul li a span {
  font-size: 15px;
  font-weight: 800;
  color: #444;
}
.side-bar-mobile-ul li {
  margin-bottom: 20px;
}
.main-con-side-bar-mobile-view.show .con-side-bar-mobile-view {
  right: 0px;
}
.con-my-student-img-id {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.con-my-student-img-id img {
  width: 70px;
  height: 70px;
  margin-bottom: 10px;
  border-radius: 50%;
}
.main-con-side-bar-mobile-view.show .black-over-lay-in-mobile {
  display: block;
}
.con-side-bar-mobile-view {
  position: fixed;
  top: 0px;
  right: -100%;
  width: 300px;
  height: 100%;
  background-color: #f5f5f5;
  z-index: 200;
  transition: 0.5s ease-in-out;
}
.con-wallet-side-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #dddddd;
  border-radius: 10px;
}
.con-wallet-side-bar img {
  width: 50px;
}
.con-wallet-side-bar p {
  font-size: 15px;
  font-weight: 800;
  color: #444;
  margin-bottom: 0px;
}
.line-one {
  transition: 0.3s 0.3s ease-in-out;
}
.line-two {
  transition: 0.3s ease-in-out;
}
.line-three {
  transition: 0.3s 0.3s ease-in-out;
}
.con-input-sign-in-or-up-page {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.con-form-log-in > a {
  font-size: 20px;
  font-weight: 800;
  color: #2c75e4;
  margin-bottom: 10px;
}
.con-input-sign-in-or-up-page a {
  background-color: #2c75e4;
  border-radius: 50px;
  padding: 5px 20px;
  font-size: 15px;
  font-weight: 800;
  color: white;
}
.con-choose-your-img-id {
  width: 80%;
  padding: 50px 0px;
  display: flex;
  align-items: center;
  background-color: #e7e7e7;
  border-radius: 10px;
  flex-direction: column;
  margin-bottom: 20px;
}
.dropdown-menu-customized-21 {
  transform: translate3d(-17%, 67px, 0px) !important;
}
.con-choose-your-img-id span {
  font-size: 20px;
  font-weight: 800;
  color: #708389;
  margin-bottom: 20px;
}
.con-main-exam-table {
  width: 100%;
  overflow-x: auto;
}
.con-choose-your-img-id i {
  font-size: 20px;
  color: #708389;
}
@media only screen and (max-width: 768px) {

    .owl-carousel-custonized-1 .owl-item img {

        height:auto !important;
    }

    .login-re {
        width:100% !important;
    }

  .con--img-search {
    display: none;
  }
  .con-ul-header-links {
    display: none;
  }
  .con-coupon-Payment input {
    width: 150px;
  }
  .con-important-not-important-data {
    flex-direction: column;
  }
  .con-img-and-some-data,
  .con-other-data {
    width: 100%;
    margin-bottom: 20px;
  }
  .con-other-data > a {
    font-size: 15px;
    width: 60%;
  }
  .some-not-important-data-tit,
  .name-student-profile {
    font-size: 15px;
  }
  .some-not-important-data-cont,
  .important-data {
    font-size: 13px;
  }
  .p-view-somme-info {
    font-size: 15px;
    margin-bottom: 10px;
  }
  .con-view-somme-info a {
    font-size: 15px;
  }
  /* .con-view-somme-info {
    flex-direction: column;
    justify-content: flex-start;
  } */
  .dis-none-in-mobile {
    display: none;
  }
  .con-form-log-in {
    width: 100%;
  }
  .con-sogn-in-form-content {
    width: 100%;
  }
  .logo-page img {
    width: 150px;
  }
  .ul-footoer-2 li a span {
    width: 67%;
  }
  .con-input-form {
    width: 100%;
  }
  .main-con-footer img {
    margin-bottom: 20px;
  }
  .con-links-footer-title span {
    font-size: 15px;
  }
  .ul-footoer-1 li a {
    font-size: 13px;
  }
  .ul-footoer-2 li a span {
    font-size: 13px;
  }
  .con-forget-pass-remmber-me {
    width: 100%;
  }
  .con-social-media-icon-1,
  .con-social-media-icon-2,
  .con-social-media-icon-3 {
    width: 300px;
  }
  .con-img-sign-in-page > img {
    min-height: 250px;
  }
  .con-hello-box h1 {
    font-size: 20px;
  }
  .con-about-mr-reda-con img {
    width: 150px;
    height: 150px;
  }
  .about {
    font-size: 15px;
    width: 100%;
  }
  .con-img-ins-course > p {
    font-size: 15px;
  }
  .con-p-for-type-lecture p {
    font-size: 13px;
  }
  .lectue-ins-title {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .sub-con-curriculum-2 {
    padding: 10px;
  }
  .header-in-mobile-view .con-second-header {
    position: relative;
    background-image: none;
    background-color: #cecece;
    width: 100%;
  }
  .con-card-1 {
    margin-bottom: 20px;
    display: block;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
  }
  .ul-last-tabs li {
    padding: 5px 10px;
    font-size: 15px;
  }
  .header-in-mobile-view .con-three-lines-side-bar .line-one,
  .header-in-mobile-view .con-three-lines-side-bar .line-two,
  .header-in-mobile-view .con-three-lines-side-bar .line-three {
    background-color: #444;
  }
  .my-wallet-but-1 {
    flex-direction: column;
  }
  .pay-with-etc {
    text-align: center;
  }
  .my-wallet-but-1 > img {
    width: 120px;
  }
}
@media only screen and (min-width: 769px) {
  .con--img-search {
    display: none;
  }
  .con-ul-header-links {
    display: none;
  }
  .dis-none-in-mobile {
    display: none;
  }
  .con-important-not-important-data {
    flex-direction: column;
  }
  .con-img-and-some-data,
  .con-other-data {
    width: 100%;
    margin-bottom: 20px;
  }
  .con-other-data > a {
    font-size: 15px;
    width: 60%;
  }
  .some-not-important-data-tit,
  .name-student-profile {
    font-size: 15px;
  }
  .some-not-important-data-cont,
  .important-data {
    font-size: 13px;
  }
  .p-view-somme-info {
    font-size: 15px;
    margin-bottom: 10px;
  }
  .con-view-somme-info a {
    font-size: 15px;
  }
  .logo-page img {
    width: 150px;
  }
  .con-input-form {
    width: 100%;
  }
  .con-sogn-in-form-content,
  .con-form-log-in {
    width: 80%;
  }
  .con-forget-pass-remmber-me {
    width: 100%;
  }
  .header-in-mobile-view .con-three-lines-side-bar .line-one,
  .header-in-mobile-view .con-three-lines-side-bar .line-two,
  .header-in-mobile-view .con-three-lines-side-bar .line-three {
    background-color: #444;
  }
  .header-in-mobile-view .con-second-header {
    position: relative;
    background-image: none;
    background-color: #f5f5f5;
    width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .main-con-three-lines-side-bar {
    display: none;
  }
  .con--img-search {
    display: flex;
  }
  .con-ul-header-links {
    display: flex;
  }
  .con-important-not-important-data {
    flex-direction: row;
  }
  .con-img-and-some-data,
  .con-other-data {
    width: 48%;
    margin-bottom: 0px;
  }
  .dis-none-in-mobile {
    display: block;
  }
  .con-other-data > a {
    font-size: 15px;
    width: 60%;
  }
  .some-not-important-data-tit,
  .name-student-profile {
    font-size: 15px;
  }
  .some-not-important-data-cont,
  .important-data {
    font-size: 13px;
  }
  .p-view-somme-info {
    font-size: 15px;
    margin-bottom: 0px;
  }
  .con-view-somme-info a {
    font-size: 15px;
  }
  .con-sogn-in-form-content,
  .con-form-log-in {
    width: 90%;
  }
  .con-forget-pass-remmber-me {
    width: 100%;
  }
  .con-coupon-Payment input {
    width: 100px;
  }
  .header-in-mobile-view .con-three-lines-side-bar .line-one,
  .header-in-mobile-view .con-three-lines-side-bar .line-two,
  .header-in-mobile-view .con-three-lines-side-bar .line-three {
    background-color: #fff;
  }
  .header-in-mobile-view .con-second-header {
    position: absolute;
    background-image: linear-gradient(
      180deg,
      #1c1a1f 0%,
      rgba(0, 0, 0, 0) 100%
    );
    background-color: transparent;
    width: 100%;
  }
}
@media only screen and (min-width: 1200px) {
  .con-input-form {
    width: 80%;
  }
  .con-sogn-in-form-content,
  .con-form-log-in {
    width: 80%;
  }
  .con-forget-pass-remmber-me {
    width: 80%;
  }
  .con-coupon-Payment input {
    width: auto;
  }
}

.invalid-feedback {
    width: 80%;
}

.is-invalid~.invalid-feedback, .is-invalid~.invalid-tooltip, .was-validated :invalid~.invalid-feedback, .was-validated :invalid~.invalid-tooltip {
    position: relative;
    margin-top: 15px;
}

.con-question-question p span {

    font-size:20px !important;
}

@media (max-width:992px) {
    .con-ul-last-tabs-content{
        padding: 0px;
    }

    .con-tabs-content {
        padding: 10px;
    }
}