/*@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
*/
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/* starting my default style */
:root {
--primary:;
--secondary:;
--font:;
--white: #ffffff;
--light-white: #F8F8F8;
--light-gray: #acacac;
--light-gray-rgba: rgba(172, 172, 172, .5);
--green: #05A19C;
--red: #D33939;
--first-gray: #F1F1F1;
--gray: #575757;
--main-shadow: 2px 2px 15px -5px rgba(0,0,0,0.75);
--shadowHover: 2px 2px 25px -5px rgba(0,0,0,0.95);
--mainTrans: 0.5s ease all;
--mainHover: rgba(0, 173, 238,0.3);
--overlay: rgba(19, 62, 73, 0.7);
--darkoverlay: rgba(19, 62, 73, 0.9);
--gryish-bg: #F5F5F5;
--init-shadow: 0 0px 8px -3px #000;
}
body {
font-family: var(--font);
color: var(--primary);
text-align: right;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
direction: unset !important;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight: bold;
}
p {
margin: 0;
padding: 0;
font-weight: 500;
}
.main-hover:hover {
color: var(--overlay) !important;
}
a:hover {
text-decoration: none;
}
.vertically-centered {
display: flex;
align-items: center;
}
.outline-none:focus {
outline: none !important;
}
ul {
list-style: none;
margin: 0;
}
button {
border: none;
background: transparent;
}
.fixed-margin {
/*margin-top: 123px;*/
}
.fixed-margin-in {
margin-top: 129px;
}
.fixed-margin-out {
margin-top: 112px;
}
button:focus, textarea:focus, input:focus {
outline: none;
}
.banner-block img {
width: 100% !important;
}
@media (min-width: 992px) {
.modal-lg-manual {
max-width: 400px !important;
}
}
.tooltipDashBoard {
position: relative;
display: inline-block;
opacity: 1;
vertical-align: middle;
}
.tooltipDashBoard .tooltiptext {
visibility: hidden;
width: 250px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
/*padding: 5px 0;*/
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.tooltipDashBoard:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.tooltipDashBoard-left {
position: relative;
display: inline-block;
opacity: 1;
vertical-align: middle;
}
.tooltipDashBoard-left .tooltiptext {
visibility: hidden;
width: 250px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
/*padding: 5px 0;*/
position: absolute;
z-index: 1;
bottom: 100%;
right: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.tooltipDashBoard-left:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/* .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
} */
@media (min-width: 1600px) {
.container-xl {
padding: 0 30px;
max-width: 1600px;
margin: auto;
}
}
/* @media (min-width: 1200px){
.container, .container-lg, .container-md, .container-sm, .container-xl {
max-width: 1140px;
}} */
@media(max-width:992.98px) {
.font-s-12 {
font-size: 12px;
}
.fixed-margin {
/* margin-top: 138px;*/
}
.fixed-margin-in {
margin-top: 160px;
}
}
@media (max-width: 768px) {
.fixed-margin-in {
margin-top: 159px;
}
}
.font-size-12 {
font-size: 12px;
}
.font-size-14 {
font-size: 14px;
}
.font-size-20 {
font-size: 20px;
}
.font-size-30 {
font-size: 30px;
}
.font-size-40 {
font-size: 40px;
}
.mt-6 {
margin-top: 6rem;
}
.my-6 {
margin-top: 6rem !important;
margin-bottom: 6rem !important;
}
.title {
font-size: 70px;
color: var(--secondary);
/* margin-top: 120px; */
margin-bottom: 20px;
/* margin-right: 0px; */
}
.title-p {
color: var(--primary);
font-size: 20px;
width: 80%;
text-align: center;
}
.w-90 {
width: 90% !important;
}
.w-80 {
width: 80% !important;
}
.w-70 {
width: 70% !important;
}
@media (max-width: 1199.98px) {
.title {
font-size: 60px;
margin-bottom: 20px;
}
.title-p {
width: 100%;
}
}
@media (max-width: 991.98px) {
.title {
font-size: 40px;
margin-bottom: 20px;
}
.title-p {
color: var(--primary);
font-size: 18px;
width: 100%;
text-align: right;
margin-left: auto;
}
}
@media (max-width: 767.98px) {
.title-p {
color: var(--white);
text-align: center;
}
}
.center span {
color: var(--secondary);
}
.center a {
color: var(--white);
}
.my-btn {
border-radius: 50px;
border: 1px var(--primary) solid;
}
.primary-btn {
background-color: var(--primary);
color: var(--secondary);
}
.scale {
transition: var(--mainTrans);
}
.scale:hover {
transform: scale(1.04);
}
.shadow {
box-shadow: var(--main-shadow);
-webkit-box-shadow: var(--main-shadow);
-moz-box-shadow: var(--main-shadow);
}
.init-shadow {
-webkit-box-shadow: var(--init-shadow);
-moz-box-shadow: var(--init-shadow);
box-shadow: var(--init-shadow);
}
.init-shadow h4 {
text-align: center;
}
.init-shadow a {
text-align: center;
font-size: 21px;
}
.cursor {
cursor: pointer;
}
.border-r-10 {
border-radius: 10px !important;
overflow: hidden;
}
.border-b-10 {
border-radius: 0px 0px 10px 10px !important;
overflow: hidden;
}
.border-t-10 {
border-radius: 10px 10px 0px 0px !important;
overflow: hidden;
}
.border-rounded {
border-radius: 50%;
}
.border-black {
border: .2px var(--primary) solid;
}
.large {
font-size: larger;
}
.img-container-r {
width: 120px;
height: 120px;
}
.img-container-DirectCourse {
width: 120px;
height: 120px;
border-radius: 50%;
text-align: center;
position: absolute;
left: 50%;
top: 1%;
transform: translate(-50%, -50%);
}
.img-container-rating {
margin-top: 80px;
width: 120px !important;
height: 120px !important;
border-radius: 50% !important;
text-align: center;
position: absolute;
left: 50%;
top: 0%;
transform: translate(-50%, -50%);
}
.img-container-rating img {
height: 120px;
width: 120px;
border-radius: 50%;
border: var(--secondary) 4px solid;
}
.img-container-r img {
width: 100%;
height: 100%;
}
.border-b-gray {
border-bottom: var(--light-gray) 2px solid !important;
}
.border-t-yellow {
border-top: var(--secondary) 4px solid !important;
}
.border-x-yellow {
border-right: var(--secondary) 4px solid !important;
border-left: var(--secondary) 4px solid !important;
}
.bg-black {
background-color: var(--primary) !important;
color: var(--secondary);
}
.bg-black-active {
background-color: var(--primary) !important;
color: var(--white) !important;
}
.bg-yellow-active {
background-color: var(--secondary) !important;
color: var(--white) !important;
}
.bg-grayish {
background-color: var(--gryish-bg);
}
.bg-yellow {
background-color: var(--secondary);
color: var(--primary);
}
.d-sm-none {
opacity: 1;
}
.mb-md-2 {
margin-bottom: unset !important;
}
@media (max-width: 991.98px) {
.opacity-sm-none {
opacity: 0;
}
.mb-md-2 {
margin-bottom: 0.5rem !important;
}
}
.text-black {
color: var(--primary) !important;
}
.text-primary {
color: var(--primary) !important;
}
.text-secondary {
color: var(--secondary) !important;
}
.text-gray {
color: var(--gray) !important;
}
.text-white {
color: var(--white) !important;
}
.text-yellow {
color: var(--secondary) !important;
}
.text-yellow-static {
color: #ffac19;
}
.text-green {
color: var(--green) !important;
}
.text-red {
color: var(--red) !important;
}
.text-light-gray {
color: var(--light-gray) !important;
}
.pic-50 {
width: 40px !important;
height: 40px !important;
}
.hover-underline:hover {
text-decoration: underline;
}
/*.bold {*/
/*font-weight: bold;*/
/*color: var(--white);
}*/
.light-bold {
font-weight: 600;
}
.hover-shadow {
transition: var(--mainTrans);
}
.hover-yellow {
transition: var(--mainTrans);
}
.hover-yellow:hover {
background: var(--secondary) !important;
color: var(--white) !important;
}
.hover-yellow:hover .img-bg-color {
background: var(--secondary) !important;
color: var(--white) !important;
}
.hover-shadow:hover {
box-shadow: var(--main-shadow);
-webkit-box-shadow: var(--main-shadow);
-moz-box-shadow: var(--main-shadow);
}
.hover-text-yellow {
transition: var(--mainTrans) !important;
}
.hover-gray {
transition: var(--mainTrans) !important;
}
.hover-green {
transition: var(--mainTrans) !important;
}
.hover-text-yellow:hover {
color: var(--secondary) !important;
}
.hover-green:hover {
color: var(--primary) !important;
}
.mt-140 {
margin-top: 140px !important;
}
.border-gray {
border: var(--light-gray) 1px solid !important;
}
.hover-gray:hover {
color: var(--light-gray) !important;
}
@media(max-width : 992.98px) {
.m-md-0 {
margin: 0;
}
.mx-md-2 {
margin: 0 10px !important;
}
}
.feature-btn {
margin: 90px auto 40px;
display: flex;
justify-content: center;
align-items: center;
}
.feature-btn span {
display: flex;
justify-content: center;
align-items: center;
width: 400px;
font-size: 40px;
font-weight: bold;
border-right: var(--secondary) 4px solid !important;
border-left: var(--secondary) 4px solid !important;
}
/*.trapezoid {
margin: 90px auto 40px;
display: flex;
justify-content: center;
align-items: center;
width: 400px;
font-size: 20px;
font-weight: bold;*/
/*border-top: 50px solid var(--primary);
border-left: 25px solid transparent;
border-right: 25px solid transparent;*/
/* border-right: var(--secondary) 25px solid !important;
border-left: var(--secondary) 25px solid !important;*/
/*}*/
/*.parentView {
display: flex;
border: 1px dotted var(--secondary);
flex-direction: column;
align-items: center;
justify-content: space-between;
background: #fff;
}*/
.trapezoid {
margin: 90px auto 40px;
/*clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);*/
background: var(--primary);
position: relative;
width: 400px;
display: flex;
justify-content: center;
clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 5% 100%);
/* border-right: var(--secondary) 4px solid !important;
border-left: var(--secondary) 4px solid !important;*/
}
.trapezoid::after {
content: "";
width: 15px;
height: 65px;
background: var(--secondary);
position: absolute;
transform: rotate(148deg);
left: 8px;
top: -5px;
z-index: 10;
}
.trapezoid::before {
content: "";
width: 15px;
height: 65px;
background: var(--secondary);
position: absolute;
transform: rotate(-148deg);
right: 8px;
top: -5px;
z-index: 10;
}
.main-btn {
width: 400px;
margin: 50px auto 50px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
border-radius: 10px;
}
@media(max-width:992.98px) {
.feature-btn {
margin: 80px auto 40px;
display: flex;
justify-content: center;
align-items: center;
}
.feature-btn span {
display: flex;
justify-content: center;
align-items: center;
width: 250px;
font-size: 30px;
font-weight: bold;
}
.main-btn {
width: 250px;
font-size: 24px;
padding: 5px 0;
margin: 50px auto 0px;
}
}
@media (max-width: 767.98px) {
.feature-btn {
margin: 45px auto 40px;
}
}
/* starting my nav's style */
.my-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 0;
}
@media(max-width : 992.98px) {
.my-nav {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
.my-nav-container {
padding: 33px 20px;
/* border-bottom: var(--primary) 1px solid; */
transition: var(--mainTrans);
box-shadow: var(--init-shadow);
background-color: var(--white);
/* overflow: hidden; */
/* position: fixed;*/
top: 0;
left: 0;
width: 100%;
z-index: 111;
/* margin-bottom: 200px; */
}
.my-nav-container-new {
/* border-bottom: var(--primary) 1px solid; */
transition: var(--mainTrans);
box-shadow: var(--init-shadow);
background-color: var(--white);
/* overflow: hidden; */
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 111;
/* margin-bottom: 200px; */
}
@media(max-width : 992.98px) {
.my-nav-container {
padding: 14px 0px;
}
}
@media(max-width : 575.98px) {
.my-nav-container {
padding: 18px 0px;
}
}
.fixed-top {
padding-top: 5px;
padding-bottom: 5px;
/* position: fixed; */
}
.nav-btns-group .my-btn {
padding: 5px 20px;
/* margin-left: 10px; */
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
transition: var(--mainTrans);
}
.my-btn:hover {
box-shadow: var(--main-shadow);
-webkit-box-shadow: var(--main-shadow);
-moz-box-shadow: var(--main-shadow);
}
@media(max-width : 992.98px) {
.nav-btns-group .my-btn {
padding: 5px 15px;
margin-top: 20px;
}
.fixed-top {
padding-top: 0px;
padding-bottom: 0px;
/* position: sticky; */
}
}
@media (max-width: 575.98px) {
.nav-btns-group .my-btn {
padding: 2px 12px;
margin-top: 20px;
}
}
.nav-btns-group {
display: flex;
/* justify-content: space-around; */
align-items: center;
}
/* btn dm */
.cont-darkmode {
cursor: pointer;
}
@media screen and (max-width:991px) {
.cont-darkmode {
margin: 20px 10px 0px;
}
}
.checkbox {
opacity: 0;
position: absolute;
}
.label {
width: 50px;
height: 24px;
background-color: #333;
cursor: pointer;
display: flex;
border-radius: 50px;
align-items: center;
justify-content: space-between;
padding: 0px 5px;
position: relative;
transform: scale(1.1);
margin-bottom: 0px;
}
@media screen and (min-width:992px) {
.label {
transform: scale(1.35);
margin: 0px 20px;
}
}
.ball {
width: 20px;
height: 20px;
background-color: white;
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
transition: transform 0.2s linear;
}
/* target the elemenent after the label*/
.checkbox:checked + .label .ball {
transform: translateX(24px);
}
.fa-moon {
color: pink;
}
.fa-sun {
color: yellow;
}
/* end dm btn */
.logo {
width: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.logo img {
width: 100%;
}
/* language drop menu */
.my-nav .dropdown-menu {
border-radius: 15px;
top: 0px;
left: 0px;
}
.my-nav .dropdown-item:focus, .my-nav .dropdown-item:hover {
color: var(--primary);
text-decoration: none;
background-color: var(--secondary);
}
.my-btn.focus, .my-btn:focus {
border: none;
outline: 0;
box-shadow: 0 0 0 0.2rem var(--secondary);
}
.left-sec {
width: 400px;
height: 100%;
/* overflow: hidden; */
}
.main-sec {
/* padding: 10px 30px; */
}
.landing-pic {
display: flex;
justify-content: center;
align-items: center;
}
.landing-bg {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 80vh;
}
.landing-img {
width: 100% !important;
height: 100%;
display: flex;
position: absolute;
z-index: -1;
top: 0;
left: 0px;
}
@media (max-width: 992.98px) {
.landing-bg {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
}
.landing-img {
/* display: none !important; */
z-index: 0;
}
}
.landing-bg .illust {
width: 70% !important;
}
.right-sec {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%; /*80% old*/
}
@media (max-width: 767.98px) {
.right-sec {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
margin: 20px auto;
}
.right-sec span {
font-size: 3vw;
}
}
.landing-carousel .item {
width: 100%;
height: 80%;
/* height: 80vh;*/
/* padding: 0 20px; */
padding-right: 10px;
padding-top: 12px;
}
@media (max-width: 992.98px) {
.landing-carousel .item {
/*
background: var(--primary);
height: 70vh;
display:flex;
*/
display: inline-grid;
/* justify-content: center;*/
align-items: center;
height: 28vh;
padding: 0;
}
.landing-carousel .title-p {
color: var(--white);
text-align: center;
font-size: 22px;
}
.landing-carousel .title {
margin: 10px 0;
text-align: center;
font-size: 40px;
}
.landing-bg .illust {
width: 80% !important;
}
}
.landing-carousel .owl-dots {
position: absolute;
bottom: 20px;
left: 50%;
}
@media (max-width: 767.98px) {
.landing-carousel .owl-dots {
display: none;
}
.landing-carousel .title-p {
color: var(--white);
text-align: center;
font-size: 15px;
}
.landing-carousel .title {
margin: 10px 0;
text-align: center;
font-size: 15px;
}
.landing-bg .illust {
width: 50% !important;
}
}
@media (max-width: 575.98px) {
.landing-bg .illust {
width: 70% !important;
}
}
.landing-carousel .owl-dots .owl-dot span {
width: 15px;
height: 15px;
border-radius: 3px;
background: transparent;
border: var(--primary) 1px solid;
}
.landing-carousel .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
background-color: var(--primary);
}
.landing-carouselSliders .item {
width: 100%;
height: 80%;
/* height: 80vh;*/
/* padding: 0 20px; */
padding-right: 10px;
padding-top: 12px;
}
@media (max-width: 992.98px) {
.landing-carouselSliders .item {
/*
background: var(--primary);
height: 70vh;
display:flex;
*/
display: inline-grid;
/* justify-content: center;*/
align-items: center;
/*height: 25vh !important;*/
height: 50vh !important;
padding: 0;
}
.landing-carouselSliders .title-p {
color: var(--white);
text-align: center;
font-size: 22px;
}
.landing-carouselSliders .title {
margin: 10px 0;
text-align: center;
font-size: 40px;
}
.landing-bg .illust {
width: 80% !important;
}
}
.landing-carouselSliders .owl-dots {
position: absolute;
bottom: 20px;
left: 50%;
}
@media (max-width: 767.98px) {
.landing-carouselSliders .owl-dots {
display: none;
}
.landing-carouselSliders .title-p {
color: var(--white);
text-align: center;
font-size: 15px;
}
.landing-carouselSliders .title {
margin: 10px 0;
text-align: center;
font-size: 15px;
}
.landing-bg .illust {
width: 50% !important;
}
}
/* *, *::after, *::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
display: grid;
place-content: center;
background-color: #fafafa;
background-image: url('/img/bgSearch.jpg');
background-repeat: no-repeat;
background-size: cover;
}*/
.parent-search-box {
position: relative;
margin-top: 22%;
box-shadow: 0px 1px 11px 0px #292929;
border-radius: 10px !important;
}
.parent-search-box label {
display: flex;
align-items: center;
border-radius: 10px;
border: 1px solid #fafafa;
width: 300px;
padding: 5px 10px;
background-color: #FFF;
}
.parent-search-box label i {
font-size: 14px;
color: var(--secondary);
/*color: #4f84ff;*/
}
.parent-search-box label input {
border: none;
outline: none;
padding: 0 10px;
background-color: #FFF;
}
.result {
position: absolute;
top: calc(100% + 3px);
left: 0;
width: inherit;
}
.result ul {
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
width: 300px;
max-height: 300px;
overflow: hidden;
overflow-y: auto;
border-radius: 5px;
}
.result ul::-webkit-scrollbar {
width: 5px;
}
.result ul::-webkit-scrollbar-track {
background: #f1f1f1;
}
.result ul::-webkit-scrollbar-thumb {
background: #888;
}
.result ul::-webkit-scrollbar-thumb:hover {
background: var(--primary);
}
.result ul li {
border-bottom: 1px solid #fafafa;
padding: 10px;
background-color: #fff;
width: 100%;
/* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
display: flex;
border-bottom: 1px solid rgba(99, 99, 99, 0.2);
flex-direction: column;
row-gap: 10px;
}
.result ul li span {
display: inline-block;
background-color: green;
width: 100%;
padding: 6px;
border-radius: 5px;
color: #FFF;
}
h5 a:hover {
color: var(--secondary) !important;
}
a.text-primary:hover {
color: var(--secondary) !important;
}
.input-placeholder {
position: relative;
}
.input-placeholder input {
padding: 8px;
font-size: 18px;
}
.input-placeholder input:valid + .placeholder {
display: none;
}
/*.placeholder {
position: absolute;
pointer-events: none;
top: 0;
bottom: 0;
height: 15px;
font-size: 18px;
left: 10px;
margin: auto;
color: #ccc;
}*/
.placeholder span {
color: red;
}
@media (max-width: 575.98px) {
.parent-search-box label {
display: flex;
align-items: center;
border-radius: 10px;
border: 1px solid #fafafa;
width: 170px!important;
padding: 5px 10px;
background-color: #FFF;
}
.result ul {
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
width: 170px!important;
max-height: 300px;
overflow: hidden;
overflow-y: auto;
border-radius: 5px;
}
}
@media (max-width: 575.98px) {
.landing-bg .illust {
width: 70% !important;
}
}
.landing-carouselSliders .owl-dots .owl-dot span {
width: 15px;
height: 15px;
border-radius: 3px;
background: transparent;
border: var(--primary) 1px solid;
}
.landing-carouselSliders .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
background-color: var(--primary);
}
/* starting our features */
.feature {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
margin-top: 10px;
transition: var(--mainTrans);
border-radius: 70px;
overflow: hidden;
}
.feature:hover {
transform: scale(1.04);
background-color: transparent;
box-shadow: var(--main-shadow);
-webkit-box-shadow: var(--main-shadow);
-moz-box-shadow: var(--main-shadow);
}
.feature img {
border-radius: 60px;
width: 100%;
}
.feature h3 {
position: absolute;
bottom: 80px;
left: 0;
right: 0;
text-align: center;
}
.feature h4 {
position: absolute;
bottom: 25px;
left: 0;
right: 0;
text-align: center;
font-size: 15px;
}
.feature-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: auto;
}
.feature-content img {
width: 100px;
height: 100px;
border-radius: 50%;
border: var(--primary) 4px solid !important;
text-align: center;
position: absolute;
left: 50%;
top: 0%;
transform: translate(-50%, -80%);
object-fit: contain;
}
@media (max-width: 575.98px) {
.feature-content-box {
margin-bottom: 80px !important;
}
}
@media (max-width: 992.98px) {
.feature-content-box {
margin-bottom: 70px !important;
}
}
.feature-content-box {
border-radius: 10px;
background-color: #F8F8F8;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: auto;
}
/* our articals section */
.our-articals {
position: relative;
width: 90%;
margin: auto;
}
.artical {
background-color: var(--primary);
color: var(--white);
padding: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
height: 465px;
transition: var(--mainTrans);
border-radius: 25px;
}
.artical h5 a {
color: var(--white);
transition: var(--mainTrans);
}
.artical h5 a:hover {
color: var(--secondary);
}
.artical:hover {
transform: scale(0.97);
}
@media (max-width : 992.98px) {
.artical {
height: 465px;
}
.our-articals {
width: 100%;
}
}
@media (min-width: 1550px) {
.artical {
height: 475px;
}
}
.artical img {
width: 100%;
border-radius: 25px 25px 0px 0px;
}
.artical-footer {
width: 100%;
margin: auto;
}
.artical-footer .col-6 {
padding-left: 0 !important;
}
.artical-footer span {
font-size: 12px;
}
.artical-author {
display: flex;
justify-content: flex-start;
color: var(--wh)
}
.artical-author:hover {
color: var(--light-gray) !important;
}
.stars {
cursor: pointer;
}
.artical-author img {
width: 30px !important;
}
.articals-read-more h6 {
color: var(--secondary) !important;
transition: var(--mainTrans);
}
.articals-read-more:hover h6 {
color: var(--primary) !important;
}
.rate {
display: flex;
align-items: center;
}
.rate .stars span {
font-size: 8px !important;
}
.articals-carousel {
/* width: 90%; */
margin: auto;
}
.articals-carousel .owl-nav.disabled {
display: block;
}
@media (max-width: 1199.98px) {
.articals-carousel .owl-nav.disabled {
display: none !important;
}
}
/* previous owl btn */
.articals-carousel .owl-nav button.owl-prev {
position: absolute;
top: 40%;
left: -74px;
background: var(--primary);
color: var(--white);
width: 50px;
height: 50px;
border-radius: 50%;
}
.articals-carousel .owl-nav button.owl-prev:hover {
background: var(--secondary);
}
.articals-carousel .owl-nav button.owl-prev span {
font-family: Arial, Helvetica, sans-serif;
font-size: 70px;
position: absolute;
top: 18px;
left: 11px;
bottom: 80px;
/* line-height: 80px; */
display: flex;
justify-content: center;
align-items: center;
}
/* next owl button */
.articals-carousel .owl-nav button.owl-next {
position: absolute;
top: 50%;
right: -74px;
background: var(--primary);
color: var(--white);
width: 50px;
height: 50px;
border-radius: 50%;
}
.articals-carousel .owl-nav button.owl-next:hover {
background: var(--secondary);
}
.articals-carousel .owl-nav button.owl-next span {
font-family: Arial, Helvetica, sans-serif;
font-size: 70px;
position: absolute;
top: 18px;
left: 15px;
bottom: 80px;
/* line-height: 80px; */
display: flex;
justify-content: center;
align-items: center;
}
/* starting rating section */
.platform-rating {
width: 100%;
margin: auto;
}
@media (max-width : 992.98px) {
.platform-rating {
width: 100%;
}
}
.rating-item {
/*padding: 20px;*/
/*border: var(--primary) 1px solid;*/
box-shadow: var(--main-shadow);
-webkit-box-shadow: var(--main-shadow);
-moz-box-shadow: var(--main-shadow);
}
.rating-header {
display: flex;
justify-content: flex-start;
align-items: center;
}
.rating-header {
display: flex;
justify-content: flex-start;
align-items: center;
}
.img-container {
display: flex;
justify-content: center;
align-items: center;
}
.img-container-name {
display: flex;
align-items: center;
color: var(--white);
cursor: pointer !important;
transition: var(--mainTrans);
font-size: 16px;
}
.img-container-name a {
display: flex;
align-items: center;
color: var(--white);
cursor: pointer !important;
transition: var(--mainTrans);
font-size: 16px;
}
.img-container-name:hover {
color: var(--light-gray);
}
.img-container-name img {
width: 60px;
height: 60px;
border-radius: 50%;
}
.img-container-name_Teacher_img {
width: 60px;
height: 60px;
border-radius: 10px 00px 10px 0px;
}
.img-container img {
width: 100%;
}
/* rating owl btns */
.platform-carousel .owl-nav.disabled {
display: block;
}
@media (max-width: 1199.98px) {
.platform-carousel .owl-nav.disabled {
display: none !important;
}
}
/* previous owl btn */
.platform-carousel .owl-nav button.owl-prev {
position: absolute;
top: 40%;
left: -74px;
background: var(--light-white);
color: var(--primary);
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: var(--main-shadow);
-webkit-box-shadow: var(--main-shadow);
-moz-box-shadow: var(--main-shadow);
transition: var(--mainTrans);
}
.platform-carousel .owl-nav button.owl-prev:hover {
background: var(--secondary);
}
.platform-carousel .owl-nav button.owl-prev span {
font-family: Arial, Helvetica, sans-serif;
font-size: 70px;
position: absolute;
top: 18px;
left: 12px;
bottom: 80px;
/* line-height: 80px; */
display: flex;
justify-content: center;
align-items: center;
}
/* next owl button */
.platform-carousel .owl-nav button.owl-next {
position: absolute;
top: 50%;
right: -74px;
background: var(--light-white);
color: var(--primary);
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: var(--main-shadow);
-webkit-box-shadow: var(--main-shadow);
-moz-box-shadow: var(--main-shadow);
transition: var(--mainTrans);
}
.platform-carousel .owl-nav button.owl-next:hover {
background: var(--secondary);
}
.platform-carousel .owl-nav button.owl-next span {
font-family: Arial, Helvetica, sans-serif;
font-size: 70px;
position: absolute;
top: 18px;
left: 16px;
bottom: 80px;
/* line-height: 80px; */
display: flex;
justify-content: center;
align-items: center;
}
/* starting our partner section */
.our-partners {
width: 90%;
margin: auto;
}
.partner {
margin: auto;
width: 200px;
height: 200px;
border: var(--primary) 3px;
box-shadow: var(--main-shadow);
-webkit-box-shadow: var(--main-shadow);
-moz-box-shadow: var(--main-shadow);
border-radius: 50%;
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: solid;
border-left-style: dashed;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.partner img {
width: 100%;
}
@media(max-width: 992.98px) {
.our-partners {
width: 100%;
margin: auto;
}
}
@media (max-width: 576px) {
.partner {
width: 120px;
height: 120px;
}
}
.footer-contact {
cursor: pointer;
}
/* our partners owl btns */
/* rating owl btns */
.our-partners-carousel .owl-nav.disabled {
display: block;
}
@media (max-width: 1199.98px) {
.our-partners-carousel .owl-nav.disabled {
display: none !important;
}
}
/* previous owl btn */
.our-partners-carousel .owl-nav button.owl-prev {
position: absolute;
top: 40%;
left: -74px;
background: var(--light-white);
color: var(--primary);
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: var(--main-shadow);
-webkit-box-shadow: var(--main-shadow);
-moz-box-shadow: var(--main-shadow);
transition: var(--mainTrans);
}
.our-partners-carousel .owl-nav button.owl-prev:hover {
background: var(--secondary);
}
.our-partners-carousel .owl-nav button.owl-prev span {
font-family: Arial, Helvetica, sans-serif;
font-size: 70px;
position: absolute;
top: 18px;
left: 12px;
bottom: 80px;
/* line-height: 80px; */
display: flex;
justify-content: center;
align-items: center;
}
/* next owl button */
.our-partners-carousel .owl-nav button.owl-next {
position: absolute;
top: 50%;
right: -74px;
background: var(--light-white);
color: var(--primary);
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: var(--main-shadow);
-webkit-box-shadow: var(--main-shadow);
-moz-box-shadow: var(--main-shadow);
transition: var(--mainTrans);
}
.our-partners-carousel .owl-nav button.owl-next:hover {
background: var(--secondary);
}
.our-partners-carousel .owl-nav button.owl-next span {
font-family: Arial, Helvetica, sans-serif;
font-size: 70px;
position: absolute;
top: 18px;
left: 16px;
bottom: 80px;
/* line-height: 80px; */
display: flex;
justify-content: center;
align-items: center;
}
/* footer //////////////////////////////////////////////////////////// */
footer.mt-4 {
margin-top: auto !important;
}
.my-footer-container {
width: 100%;
margin-left: auto;
padding: 0px 10px;
}
@media(max-width : 992px) {
.my-footer-container {
width: 100%;
}
}
.footer-logo-section {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
text-align: center;
}
.footer-logo-section img {
width: 150px;
display: flex;
justify-content: center;
margin: auto;
}
.footer-social-section {
display: flex;
justify-content: center;
align-items: center;
}
.footer-social-section a {
color: var(--white);
margin-left: 10px;
}
.vertical-bar-right {
width: 2px;
height: 70%;
background-color: var(--secondary);
position: absolute;
top: 30px;
right: 0;
}
.vertical-bar-left {
width: 2px;
height: 70%;
background-color: var(--secondary);
position: absolute;
top: 30px;
left: 0;
}
@media (max-width: 575.98px) {
.vertical-bar-right {
width: 0px !important;
}
.vertical-bar-left {
width: 0px !important;
}
}
@media (max-width: 767.98px) {
.footer-section {
font-size: 14px;
}
.footer-contact {
font-size: 12px;
}
}
.footer-contact {
cursor: pointer;
}
.my-nav-footer-privacy {
display: flex;
justify-content: center;
align-items: center;
}
.my-nav-footer-privacy p {
font-size: 16px !important;
font-weight: bold !important;
}
@media(max-width : 992.98px) {
.my-nav-footer-privacy {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.my-nav-footer-privacy p {
font-size: 12px !important;
font-weight: bold !important;
}
}
.logo-footer-privacy {
width: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.logo-footer-privacy img {
width: 100%;
}
/* home page 1 */
.nav-noti-sec {
/* width: 30%; */
display: flex;
align-items: center;
}
.nav-right-sec {
display: flex;
align-items: center;
}
@media(max-width : 992px) {
.nav-right-sec {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0 10px;
}
}
/* @media (max-width: 1199.98px) {
.nav-noti-sec{
width: 40%;
}
} */
@media(max-width : 992px) {
.nav-noti-sec {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0 20px;
}
}
.notification-bell {
background: transparent;
border-radius: 50%;
/* width: 70px;
height: 70px; */
display: flex;
justify-content: center;
align-items: center;
margin: 0 10px;
}
.notification-bell.hover-shadow {
box-shadow: none;
}
.notification-bell i {
font-size: 40px;
}
.notification-bell .dropdown-menu {
border-radius: 0;
width: 300px;
/* height: 280px; */
background: var(--primary);
color: var(--secondary);
position: relative;
transform: translate3d(1px, 60px, 0px) !important;
}
.user-pic-container .dropdown-menu {
transform: translate3d(13px, 70px, 0px) !important;
}
.notification-bell .dropdown-menu a {
color: var(--white);
}
.triangle {
position: absolute;
top: -12px;
left: 0;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid var(--primary);
z-index: 99;
}
.user-pic-container {
cursor: pointer;
}
.user-pic-container img {
width: 60px;
height: 60px;
border-radius: 50%;
}
@media (max-width: 767.98px) {
.user-pic-container img {
width: 35px;
height: 35px;
margin-right: auto;
border-radius: 50%;
}
.notification-bell .dropdown-menu {
border-radius: 0;
width: 278px;
background: var(--primary);
color: var(--secondary);
position: relative;
transform: translate3d(-35%, 66px, 0px) !important;
left: 42px !important;
}
.notification-bell .dropdown-menu a {
color: var(--white);
}
.triangle {
left: 25%
}
.notification-bell {
background: transparent;
border-radius: 50%;
width: 0px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 0px !important;
}
.user-pic-container {
margin: 0 !important;
}
.notification-bell i {
font-size: 30px;
}
.user-pic-container {
width: 40px;
height: 40px;
border-radius: 50%;
}
.user-pic-container .dropdown-menu {
border-radius: 0;
width: 222px;
background: var(--primary);
color: var(--secondary);
position: relative;
transform: translate3d(-22%, 60px, 0px) !important;
left: 42px !important;
}
.user-pic-container .triangle {
left: 5%
}
.user-pic-container img {
width: 35px;
height: 35px;
margin-right: auto;
border-radius: 50%;
}
}
.width-exam {
width: 25% !important;
}
@media (max-width: 767.98px) {
.width-exam {
width: 50% !important;
}
}
.notification-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px !important;
border-bottom: 1px var(--light-gray) solid;
}
.notification-item:hover {
background: rgba(0, 173, 238,0.3) !important;
}
.notification-item img {
width: 60px;
height: 60px;
}
.notification-bell .simplebar-scrollbar::before {
background-color: var(--white);
width: 2px;
opacity: .5;
}
@media (max-width: 767.98px) {
.noti-content span {
font-size: 14px;
}
}
.bell-icon {
position: relative;
}
.noti-lamp {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #e41e3f;
position: absolute;
top: 5px;
right: 0;
}
.points {
background-color: var(--primary);
display: flex;
align-items: center;
color: var(--secondary);
/* min-width: 50px; */
/*width: 250px;*/
width: 300px;
font-weight: bold;
font-size: 20px;
border-radius: 10px;
justify-content: space-between;
overflow: hidden;
}
.my-points {
text-align: center;
margin-left: 10px;
/* width: 30%; */
width: inherit !important;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
text-align: center;
color: var(--secondary);
height: 40px;
}
.pionts-amount {
width: 70%;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--secondary);
color: var(--primary);
text-align: center;
border-radius: 10px;
}
.noti-bell-wrapper {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}
/* @media (max-width: 991.98px) {
.noti-bell-wrapper{
width: 25%;
}
} */
@media (max-width: 767.98px) {
/* .noti-bell-wrapper{
width: 40%;
display: flex !important;
align-items: stretch;
} */
.points {
width: 140px;
}
.my-points {
font-size: 12px;
}
.pionts-amount {
font-size: 12px;
}
}
/* newest articals section */
.newest-articals-body {
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
}
.newest-articals-header {
z-index: 99;
position: absolute;
top: -30px;
left: 0;
right: 0;
width: 80%;
margin: auto;
border-radius: 10px !important;
box-shadow: var(--main-shadow);
-webkit-box-shadow: var(--main-shadow);
-moz-box-shadow: var(--main-shadow);
}
.newest-artical {
display: flex;
direction: rtl;
align-items: flex-start;
}
.newest-artical h3 {
font-size: 18px;
}
.newest-artical p {
font-size: 14px;
}
.newest-author-name {
width: 100%;
display: flex;
direction: rtl;
justify-content: flex-end;
align-items: center;
}
.newest-author-name img {
width: 20px;
}
.newest-author-name span {
font-size: 12px;
}
.newest-articals-bar .simplebar-scrollbar::before {
background-color: var(--white);
width: 4px;
opacity: .5;
}
.my-ad-space {
transition: var(--mainTrans);
}
.my-ad-space:hover {
opacity: .9;
cursor: pointer;
}
.my_ad_interactive:hover {
transform: scale(1) !important;
cursor: pointer;
}
/* right articals secton */
.artical-sec {
background-color: var(--white);
box-shadow: var(--main-shadow);
-webkit-box-shadow: var(--main-shadow);
-moz-box-shadow: var(--main-shadow);
border-radius: 10px;
overflow: hidden;
transition: var(--mainTrans);
}
.price-block-main {
background-color: var(--white);
}
.checked {
color: orange;
}
.artical-sec:hover {
transform: scale(1.1);
}
.artical-sec .stars {
display: flex;
justify-content: center;
}
.artical-sec h4 a {
color: var(--primary);
transition: var(--mainTrans);
}
.artical-sec h4 a:hover {
color: var(--secondary);
}
/* home page 2 */
.articals-header {
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
}
.overlay-wrapper {
position: relative;
}
.img-overlay {
background: var(--overlay);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.articals-cover {
height: 250px;
}
.articals-cover img {
height: 100%;
}
@media (max-width: 767.98px) {
.articals-cover img {
height: 150px !important;
}
}
.article-title {
position: absolute;
z-index: 9;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
.articals-header-author {
display: flex;
justify-content: flex-start;
align-items: flex-end;
position: absolute;
bottom: -80px;
right: 50px;
}
.articals-header-author .img-container {
border: 4px solid var(--primary);
border-radius: 50%;
width: 150px;
height: 150px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.articals-header-author .img-container img {
width: 100%;
height: 100%;
}
@media (min-width: 1600px) {
.articals-header-author {
right: 10%;
}
}
@media (min-width: 2100px) {
.articals-header-author {
right: 20%;
}
}
.header-info {
display: flex;
flex-direction: column;
position: relative;
top: 20px;
}
.header-info a {
font-size: 24px;
}
.header-info .stars span {
font-size: 12px;
}
.artical-field, .header-info span {
font-size: 14px !important;
text-align: right;
}
@media (max-width: 767.98px) {
.articals-header-author {
display: flex;
justify-content: flex-start;
align-items: flex-end;
position: absolute;
bottom: -60px;
right: 20px;
}
.articals-header-author .img-container {
border: 4px solid var(--primary);
border-radius: 50%;
width: 100px;
}
.header-info span {
font-size: 18px;
}
.header-info .stars span {
font-size: 14px;
}
.header-info {
top: 60px;
}
}
.home2-main {
margin-top: 75px;
}
.artical-content p {
font-weight: 500;
font-size: 18px;
}
@media (max-width: 1199.98px) {
.our-articals-sec {
width: 95% !important;
}
}
.comments-sec {
/* border: 1px var(--primary) solid; */
border-radius: 10px;
}
.comment-author {
display: flex;
align-items: center;
}
.comment {
border-bottom: 1px var(--gray) solid;
}
.comment-date {
display: flex;
align-items: center;
justify-content: flex-end;
}
@media(max-width :992.98px) {
.comment .w-80 {
width: 100% !important;
}
}
.comments-form {
display: flex;
flex-direction: column;
justify-content: center;
}
.comments-form textarea {
border: none;
border-radius: 10px;
box-shadow: var(--init-shadow);
-webkit-box-shadow: var(--init-shadow);
-moz-box-shadow: var(--init-shadow);
padding: 10px;
}
.comments-form button {
background: var(--primary);
border-radius: 10px;
color: var(--white);
font-weight: bold;
padding: 10px 0;
cursor: pointer;
transition: var(--mainTrans);
}
.comments-form button:hover {
box-shadow: var(--main-shadow);
-webkit-box-shadow: var(--main-shadow);
-moz-box-shadow: var(--main-shadow);
}
/* personel page //////////////////////////////////////////////*/
.personel-img {
width: 150px;
}
.user-info-group span {
font-size: 20px;
}
@media(max-width : 992.98px) {
.user-info-group span {
font-size: 16px;
}
}
/* circle-container */
#circle-container {
margin: 20px;
width: 200px;
height: 200px;
position: relative;
}
.user-info-group {
display: flex;
justify-content: space-between;
/* width: 90%; */
}
.user-info-group input {
width: 60%;
border: none;
background: transparent;
}
#bar-container .progressbar-text {
left: 0 !important;
}
.editig-info {
display: flex;
flex-direction: column;
align-items: center;
}
.border-r-10-dependence {
border: 2px var(--secondary) solid !important;
border-radius: 10px !important;
}
.followers-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.follower .img-container {
width: 40px;
}
.follower {
display: flex;
align-items: center;
}
.btns-group {
display: flex;
justify-content: space-around;
}
.btns-group a {
width: 40%;
}
.my-overlay-wrapper {
background: url('../../imgs/Mask Group 78.png');
/* background-position: center; */
display: block;
background-size: cover;
background-position: center;
position: relative;
background-repeat: no-repeat;
padding: 100px 0;
}
.my-overlay-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--overlay)
}
/* constant page eduaction */
/*.overlay-title {
position: absolute;
bottom: 40px;
right: 30px;
font-size: 40px;
z-index: 88;
}
@media (min-width: 1600px) {
.overlay-title {
text-align: center !important;
right: 0;
left: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
}
@media(max-width: 767.98px) {
.overlay-title {
right: 15px;
bottom: 15px;
font-size: 32px;
}
}*/
.overlay-title {
position: absolute;
/* bottom: 40px;
right: 30px;*/
font-size: 40px;
z-index: 88;
text-align: center !important;
right: 0;
left: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
@media (min-width: 1600px) {
.overlay-title {
text-align: center !important;
right: 0;
left: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
}
@media(max-width: 767.98px) {
.overlay-title {
/* right: 15px;
bottom: 15px;*/
font-size: 18px;
text-align: center !important;
right: 0;
left: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
}
.filter-sec .ui.selection.dropdown > .delete.icon, .ui.selection.dropdown > .dropdown.icon, .ui.selection.dropdown > .search.icon {
color: var(--secondary) !important;
padding: 0 !important;
font-size: 50px !important;
top: 32px !important;
}
.filter-sec .ui.dropdown {
background-color: var(--primary);
}
.filter-sec .ui.selection.dropdown {
padding: 0;
min-width: 0;
min-height: 0;
/* width:200px !important; */
box-shadow: var(--init-shadow);
height: 50px !important;
display: flex;
align-items: center;
justify-content: center;
}
.filter-sec .ui.dropdown .menu > .item {
font-size: 18px !important;
text-align: right;
}
.filter-sec .ui.dropdown > .text {
font-size: 18px !important;
color: var(--white) !important;
}
.filter-sec .ui.default.dropdown:not(.button) > .text, .ui.dropdown:not(.button) > .default.text {
color: var(--white);
font-size: 18px;
margin-right: 20px;
}
@media(max-width :992.98px) {
.filter-sec .ui.selection.dropdown > .delete.icon, .ui.selection.dropdown > .dropdown.icon, .ui.selection.dropdown > .search.icon {
font-size: 30px !important;
top: 25px !important;
}
.filter-sec .ui.selection.dropdown {
height: 40px !important;
}
.filter-sec .ui.dropdown .menu > .item {
font-size: 16px !important;
}
.filter-sec .ui.default.dropdown:not(.button) > .text, .ui.dropdown:not(.button) > .default.text {
color: var(--primary);
font-size: 16px;
}
.filter-sec .ui.dropdown > .text {
font-size: 14px !important;
}
}
.search-input {
position: relative;
display: flex;
}
.search-input input {
transition: var(--mainTrans);
box-shadow: var(--init-shadow);
-webkit-box-shadow: var(--init-shadow);
-moz-box-shadow: var(--init-shadow);
-webkit-appearance: none;
}
.search-input input:focus {
box-shadow: var(--main-shadow);
-webkit-box-shadow: var(--main-shadow);
-moz-box-shadow: var(--main-shadow);
-webkit-appearance: none;
}
.search-input i {
position: absolute;
top: 25px;
left: 20px;
pointer-events: none;
}
.course-body h3 {
font-size: 20px;
}
.course-body h3 a {
transition: var(--mainTrans);
color: var(--white);
}
.course-body h3 a:hover {
color: var(--secondary);
}
@media(max-width : 992.98px) {
.course-body h3 {
font-size: 18px;
}
}
/* my balance page */
.my-balance-header, .transfer-header, .my-balance-body {
display: flex;
justify-content: space-between;
}
.my-balance-amount {
display: flex;
align-items: center;
}
.my-balance-amount span:nth-child(2) {
font-weight: bold;
font-size: 70px;
}
.my-balance-amount span:nth-child(1) {
font-weight: bold;
font-size: 40px;
}
.tranfer-body span {
font-size: 12px;
color: var(--light-gray);
font-weight: bold;
}
.tranfer-body td {
color: var(--light-gray) !important;
font-size: 14px;
font-weight: bold;
}
.discount-coupon {
display: flex;
justify-content: center;
align-items: center;
}
.discount-amount {
font-weight: bold;
font-size: 30px;
}
.discount-label {
display: flex;
justify-content: center;
}
.discount-label input {
border: 2px solid var(--light-gray);
padding: 0 5px;
}
@media (max-width: 575.98px) {
.transfering-details {
padding-left: 0.25rem !important;
padding-right: 0.25rem !important;
}
.tranfer-body th {
font-size: 14px;
}
}
.my-course-footer {
display: flex;
/*
justify-content: space-around;
*/
}
.my-course .img-container-name img {
width: 40px;
height: 40px;
}
.my-course .img-container img {
width: 100%;
/*height: 200px;*/
/*height: 25vh;*/
object-fit: fill;
object-position: center;
max-height: 200px !important;
}
.course .course-body {
background-color: var(--primary) !important;
color: var(--white) !important;
}
.course .course-body h3 {
font-size: 20px;
height: 70px;
overflow: hidden;
}
.course .img-container img {
width: 100%;
/*height: 200px;*/
height: 25vh;
object-fit: cover;
object-position: center;
}
.course-name2 {
font-size: 20px;
color: var(--primary);
transition: var(--mainTrans);
}
.course-name2:hover {
color: var(--secondary);
}
.course-name {
font-size: 20px;
color: var(--white);
transition: var(--mainTrans);
}
.course-name:hover {
color: var(--secondary);
}
.my-course {
animation: myAni 1s;
height: 440px !important;
}
@keyframes myAni {
from {
opacity: 0;
}
; to {
opacity: 1;
}
}
/* orders page */
/* .orders .ui.selection.dropdown>.delete.icon, .ui.selection.dropdown>.dropdown.icon, .ui.selection.dropdown>.search.icon {
color: var(--secondary) !important;
padding: 0 !important;
font-size: 50px !important;
top: 27px !important;
} */
.orders-fitler .border-r-10 {
overflow: visible !important;
}
.occup {
font-size: 12px;
}
.date-border, .border-yellow {
width: 100%;
height: 3px;
background-color: var(--secondary);
}
.date-container span, .order-status span {
font-size: 20px;
}
@media(max-width : 992.98px) {
.order {
width: 100% !important;
padding: 5px !important;
}
.order .w-90 {
width: 100% !important;
}
}
@media (max-width: 767.98px) {
.date-container span, .order-status span {
font-size: 14px;
}
.order h4 {
margin-top: 5px !important;
font-size: 16px;
}
.order-status img {
width: 20px;
}
.img-container-name span {
font-size: 12px;
}
.img-container-name img {
width: 40px;
height: 40px;
}
}
.filter-sec button {
height: 50px;
}
@media(max-width : 992.98px) {
.filter-sec button {
height: 40px;
}
}
.certificate-container {
max-width: 800px;
max-height: 800px;
width: 100%;
height: 100%;
margin: auto;
}
.certificate-container img {
height: 100%;
}
.certificate-sec button {
width: 30%;
display: block;
}
@media(max-width : 992.98px) {
.certificate-sec button {
width: 100%;
display: block;
}
}
@media (max-width: 767.98px) {
.lesson .img-container {
display: none;
}
.lesson .mr-5 {
margin-right: 0 !important;
}
}
.lesson-num span:nth-child(2) {
font-size: 40px;
}
.lesson-num span:nth-child(1) {
font-size: 20px;
}
.lesson-detail img {
width: 50px;
height: 50px;
margin-bottom: 5px;
}
.lesson-detail span {
font-size: 12px;
margin-top: 5px;
}
.lesson-points span:nth-child(1) {
font-size: 30px;
}
.lesson-items .col {
/* padding-left: 10px !important;
padding-right: 10px !important ; */
}
.lessons-scroll {
width: 98%;
}
.lesson-profile .img-container-r {
width: 80px;
height: 80px;
}
.lesson-profile {
width: 90%;
margin: auto;
position: absolute;
top: -90px;
left: 0;
right: 0;
z-index: 99;
background: var(--white);
}
.lesson-profile a {
font-size: 14px;
}
.lesson-followers {
margin-top: 190px !important;
position: relative;
}
@media(max-width : 992.98px) {
.lesson-profile {
width: 100%;
margin: auto;
position: relative;
top: 0;
left: 0;
right: 0;
background: var(--white);
}
.lesson-followers {
margin-top: 20px !important;
}
}
.float-title {
position: absolute;
top: -25px;
width: 100%;
left: 0;
right: 0;
}
.lesson-follower-body .img-container-r {
width: 50px;
height: 50px;
}
.lesson-follower-body:hover span {
color: var(--light-gray) !important;
}
.lesson-followers .simplebar-scrollbar::before {
background-color: var(--white);
width: 2px;
opacity: .5;
}
.course-features ul li {
display: flex;
align-items: center;
position: relative;
margin-right: 10px;
}
.course-features ul li::before {
content: "\2022";
color: var(--secondary);
font-weight: bold;
display: inline-block;
margin-left: -1em;
margin-left: 5px;
margin-right: 20px;
}
.progressbar-text {
font-weight: bold;
}
.convo-header .progressbar-text {
top: 20px !important;
font-size: 20px;
}
.back-btn-md {
display: none;
}
@media(max-width : 992.98px) {
.convo-header .w-25 {
width: 70% !important;
}
.back-btn-md {
display: block;
}
.back-btn-lg {
display: none;
}
}
.question-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
}
.question-sec {
display: flex;
align-items: center;
margin-top: 20px;
}
.question-sec input {
width: 75px;
border: transparent;
background-color: var(--first-gray);
padding: 5px;
text-align: right;
font-weight: bold;
color: var(--primary);
margin: 0 5px;
}
.right-question-sec {
justify-content: flex-end;
}
.left-question-sec {
justify-content: flex-start;
}
.answer-boxes {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.answer-boxes a {
background-color: var(--first-gray);
padding: 5px 20px;
text-align: center;
color: var(--primary);
font-weight: 700;
/* transition: var(--mainTrans); */
margin: 5px 0;
}
.answer-boxes a:hover {
background-color: var(--secondary);
color: var(--white);
}
@media(max-width : 992.98px) {
.answer-boxes {
width: 100% !important;
}
}
.bar-title-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
width: 57%;
}
@media(max-width : 992.98px) {
.bar-title-wrapper h5 {
display: none;
}
}
/* correct or not page */
.correct-or-not-btns {
display: flex;
justify-content: center;
align-items: center;
position: relative;
/* margin-top: 20px; */
}
.correct-circle {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--white);
box-shadow: var(--init-shadow);
-webkit-box-shadow: var(--init-shadow);
-moz-box-shadow: var(--init-shadow);
width: 70px;
height: 70px;
border-radius: 50%;
/* margin: 0 20px; */
position: absolute;
z-index: 99;
}
.correct-circle::after {
content: "";
width: 40px;
height: 40px;
box-shadow: var(--init-shadow);
-webkit-box-shadow: var(--init-shadow);
-moz-box-shadow: var(--init-shadow);
background-color: var(--secondary);
border-radius: 50%;
}
.correct-or-not-btns a {
background-color: var(--primary);
display: flex;
justify-content: center;
align-items: center;
width: 140px;
padding: 5px 10px;
margin-left: 20px;
margin-right: 20px;
box-shadow: var(--init-shadow);
-webkit-box-shadow: var(--init-shadow);
-moz-box-shadow: var(--init-shadow);
border-radius: 20px;
font-weight: bold;
/* transition: var(--mainTrans); */
}
.correct-or-not-btns a:nth-child(1) {
background: var(--white);
color: var(--primary);
}
.correct-or-not-btns a:nth-child(3) {
background: var(--white);
color: var(--primary);
}
.correct-or-not-btns a:hover {
background-color: var(--secondary) !important;
color: var(--white) !important;
}
.control-btns {
display: flex;
justify-content: center;
align-items: center;
}
.control-btns a {
/* background: var(--primary); */
width: 40%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 10px;
padding: 8px 0;
border-radius: 50px;
box-shadow: var(--init-shadow);
-webkit-box-shadow: var(--init-shadow);
-moz-box-shadow: var(--init-shadow);
font-weight: bold;
}
.control-btns a:nth-child(1) {
/* back */
/* border: 1px var(--primary) solid; */
color: var(--primary);
}
.control-btns a:nth-child(1):hover {
color: var(--white);
/* border: 1px var(--secondary) solid; */
}
.control-btns a:nth-child(2) {
/* back */
background: var(--primary);
color: var(--white);
}
.control-btns a:hover {
background-color: var(--secondary) !important;
box-shadow: var(--main-shadow);
-webkit-box-shadow: var(--main-shadow);
-moz-box-shadow: var(--main-shadow);
}
.choose-answer {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-direction: column;
}
.choose-answer a {
width: 75%;
height: 60px;
background-color: var(--first-gray);
color: var(--primary);
display: flex;
justify-content: center;
align-items: center;
transition: var(--mainTrans);
}
.choose-answer a:hover {
background-color: var(--secondary);
color: var(--white);
}
.record-btn {
width: 100px;
height: 100px;
background: var(--green);
border-radius: 50%;
margin: auto;
transition: var(--mainTrans);
}
.record-btn.active {
background-color: var(--secondary);
}
/* comparing */
.compare {
display: flex;
flex-direction: column;
}
.compare a {
display: block;
margin: 10px 0;
color: var(--primary);
font-weight: bold;
border-radius: 10px;
padding: 8px 3px;
position: relative;
}
.compare a:hover {
background: var(--secondary) !important;
color: var(--white);
}
.right-compare a {
background-color: var(--white);
box-shadow: var(--init-shadow);
-webkit-box-shadow: var(--init-shadow);
-moz-box-shadow: var(--init-shadow);
}
.left-compare a {
background-color: var(--first-gray);
box-shadow: var(--init-shadow);
-webkit-box-shadow: var(--init-shadow);
-moz-box-shadow: var(--init-shadow);
pointer-events: none;
}
.itsNum {
position: absolute;
top: 0;
left: 0;
background: var(--green);
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
color: var(--white);
}
@media (max-width: 767.98px) {
.compare a {
font-size: 12px;
}
.record-btn {
width: 80px;
height: 80px;
}
.record-btn img {
width: 30px;
/* height: 100%; */
}
.question-box {
padding: .5rem !important;
}
.control-btns {
padding: 0.5rem 0 !important;
}
}
.video-wrapper {
margin-top: 10px !important;
}
.records {
font-weight: bold;
display: flex;
gap: 20px;
justify-content: center;
align-items: center;
margin: 10px 0;
flex-direction: column;
flex-wrap: wrap;
font-size: 20px;
}
.records audio {
width: 90%;
}
/* courses */
.course-content .course-num {
font-size: 40px;
}
.course-content h5 {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.course-content img {
width: 30px;
}
.inner-content span {
font-size: 12px;
color: var(--light-gray);
font-weight: bold;
}
.course-content .vertical-bar-left {
width: 2px;
height: 90%;
background-color: var(--light-gray);
position: absolute;
/* top: 30px; */
left: 0;
margin: auto;
top: 0;
bottom: 0;
}
/* direct conversition page */
.direct-btns {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.direct-btns button {
width: 30%;
padding: 10px 5px;
font-weight: bold;
cursor: pointer;
font-size: 18px;
}
@media(max-width : 992.98px) {
.direct-btns button {
width: 100%;
padding: 10px 5px;
font-weight: bold;
cursor: pointer;
font-size: 14px;
}
}
.direct-btns-home {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.direct-btns-home button {
width: 35%;
padding: 10px 5px;
font-weight: bold;
cursor: pointer;
font-size: 18px;
}
.teacher {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.teacher img {
width: 150px;
height: 150px;
border-radius: 10px 0px 10px 0px;
}
.teachers .vertical-bar-left, .teachers .vertical-bar-right {
background-color: var(--primary);
}
.teacher-card .img-container-name img {
width: 80px;
height: 80px;
}
.teacher-card {
display: flex;
justify-content: space-between;
align-items: center;
}
.teacher-card-btns a {
font-size: 12px;
border-radius: 50px;
}
.teacher-card-price span:nth-child(1) {
font-size: 25px !important;
}
.my_ad_teacher {
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 767.98px) {
.direct-btns {
margin: 20px 0 !important;
}
.teacher-cards {
margin-top: 10px !important;
}
.teacher-card .img-container-name img {
width: 40px;
height: 40px;
}
.teacher-card h2 {
font-size: 14px;
}
.teacher-card a span {
font-size: 10px;
}
.teacher-card .w-50 {
width: 60% !important;
}
.teacher-card-price span:nth-child(1) {
font-size: 15px !important;
}
.teacher-card-btns {
margin-left: 10px !important;
}
.teacher-card-btns a {
width: 100% !important;
padding: 0.5rem !important;
font-size: 10px;
border-radius: 50px;
}
.teachers .vertical-bar-left, .teachers .vertical-bar-right {
/* background-color: var(--primary) ; */
display: none;
}
}
.footer-dots {
display: flex;
justify-content: center;
align-items: center;
}
.footer-dots a {
border-radius: 10px;
border: var(--primary) 1px solid;
color: var(--primary);
font-size: 20px;
padding: 0 10px;
margin: 0 10px;
font-weight: bold;
}
.footer-dots a:hover {
background-color: var(--secondary) !important;
color: var(--white);
border: var(--secondary) 1px solid;
}
@media (max-width: 767.98px) {
.footer-dots {
margin-top: 10px;
}
}
.teacher-card-course {
display: flex;
justify-content: space-between;
}
.teacher-card-status span:nth-child(1) {
}
@media (max-width: 767.98px) {
.course-status {
font-size: 12px;
width: 70% !important;
}
.teacher-card-status {
width: 100% !important;
}
.teacher-card-courses h4 {
font-size: 14px;
}
.teacher-card-status .stars {
display: flex;
font-size: 12px;
}
}
/* forum page */
.adding-post {
width: 200px;
padding: 10px 0;
text-align: center;
}
.forum-header a {
border-radius: 5px;
width: 200px;
padding: 10px 0;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin: 0 10px;
}
.forum-header a:hover {
color: var(--white);
background-color: var(--secondary) !important;
}
.forum-right-btns {
width: 50% !important;
display: flex;
}
.forum-back {
color: var(--primary);
background-color: var(--first-gray);
}
.course-item {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px var(--light-gray) solid;
background-color: var(--white);
overflow: hidden;
}
.course-item-number {
text-align: center;
width: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.deleteCourse {
border: var(--primary) solid 1px;
border-radius: 5px;
padding: 5px;
color: var(--primary);
font-size: 14px;
}
.deleteCourse:hover {
border: var(--secondary) solid 1px;
background-color: var(--secondary);
color: var(--white);
}
.deleteCourse:hover span {
color: var(--white) !important;
}
.forum-form textarea {
/* height: 300px; */
padding: 10px;
display: block;
}
.forum-form textarea::placeholder {
color: red;
}
@media (max-width: 767.98px) {
.forum-header {
padding: 5px !important;
}
.forum-header a {
font-size: 12px;
width: 40%;
/* padding: 3px 0; */
}
.forum-right-btns {
display: flex;
flex-direction: column;
}
.forum-right-btns a {
width: 100% !important;
margin-bottom: 10px;
}
.course-item .px-4 {
padding: 10px !important;
}
.course-item img {
width: 30px;
}
.course-item h5 {
font-size: 14px;
}
.course-item .w-50 {
width: 75% !important;
}
.course-item .ml-4 {
margin-left: 5px !important;
}
.deleteCourse {
border: var(--primary) solid 1px;
border-radius: 5px;
padding: 2px;
color: var(--primary);
font-size: 12px;
}
.course-item-number {
font-size: 14px;
width: 30px;
}
.reply p {
font-size: 12px;
}
}
.accordion {
color: rgba(19, 62, 73, 0.76);
position: relative;
padding-bottom: 250px !important;
}
.accordion-header {
/* border-bottom: 2px rgba(19, 62, 73, 0.3) solid ; */
padding: 15px 0;
cursor: pointer;
position: relative;
/*z-index: 22;*/
background-color: var(--white);
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.36);
border-top: .2px rgba(19, 62, 73, 0.3) solid;
}
.accordion div:nth-child(2) {
border-top: none;
}
.accordion-header span {
font-size: 16px;
}
.accordion-header::after {
content: '\002B';
/* 25C2 */
/* 25b9 */
position: absolute;
top: 0;
left: 20px;
transform: scale(2);
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
.accordion-active::after {
content: '\002D';
/*25BE*/
}
.accordion-item {
background-color: rgba(248, 242, 242, 0.2);
position: relative;
/*z-index: 1;*/
display: none;
}
.accordion-item a:hover {
background-color: rgba(221, 221, 221, .3);
}
.accordion-item a {
transition: var(--mainTrans);
display: flex;
padding: 10px 20px;
align-items: center;
color: rgba(19, 61, 71, .7);
font-weight: bold;
border-bottom: 2px rgba(248, 242, 242, 1) solid;
font-size: 14px;
position: relative;
}
.accordion-item .active {
background-color: rgba(177, 177, 177, 0.2) !important;
}
.accordion-item a span {
background: #E8E8E8;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
color: #B1B1B1;
/* padding: 10px; */
font-weight: bold;
margin-left: 10px;
}
.accordion-item a.active span {
background: var(--secondary);
color: var(--white);
}
.accordion-item a.active::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f00c";
display: flex;
justify-content: center;
align-items: center;
color: var(--white);
background-color: var(--green);
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
left: 30px;
}
.lecture-btns {
display: flex;
}
.lecture-btns a {
border-radius: 50px;
padding: 10px;
background: var(--first-gray);
color: var(--primary);
font-weight: bold;
margin: 0 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: var(--init-shadow);
-webkit-box-shadow: var(--init-shadow);
-moz-box-shadow: var(--init-shadow);
transition: var(--mainTrans);
}
.lecture-btns a:hover {
background-color: var(--secondary) !important;
color: var(--white);
}
.marks-btn {
border-radius: 50px;
padding: 8px;
background: var(--first-gray);
color: var(--primary);
font-weight: bold;
margin: 0 5px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: var(--init-shadow);
-webkit-box-shadow: var(--init-shadow);
-moz-box-shadow: var(--init-shadow);
font-size: 20px;
}
.marks-btn:hover {
background-color: var(--secondary) !important;
color: var(--white);
}
@media (max-width: 767.98px) {
.lecture-btns a, .marks-btn {
font-size: 14px;
}
}
/* reserve an appointment page */
.reserve-btns {
display: flex;
justify-content: center;
}
.reserve-btns a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 60px;
padding: 10px 15px;
border-radius: 10px;
}
.reserve-btns a svg {
width: 60%;
}
.reserve-btns a span {
font-size: 18px;
}
.reserve-btns a:hover path {
fill: var(--white);
}
.reserve-btns a:hover {
background: var(--secondary) !important;
}
@media (max-width: 767.98px) {
.reserve-btns a {
margin: 0 10px;
}
}
.scheduler-form .k-draghandle.k-state-selected:hover, .k-ghost-splitbar-horizontal, .k-ghost-splitbar-vertical, .k-list > .k-state-highlight, .k-list > .k-state-selected, .k-marquee-color, .k-panel > .k-state-selected, .k-scheduler .k-today.k-state-selected, .k-state-selected, .k-state-selected:link, .k-state-selected:visited {
background-color: var(--secondary);
border-color: var(--secondary);
}
.k-calendar td.k-state-selected .k-link {
background-color: var(--secondary) !important;
border-color: var(--secondary) !important;
box-shadow: unset;
}
.k-calendar .k-calendar-header .k-today, .k-calendar .k-footer .k-nav-today {
color: var(--secondary);
}
/* .k-event, .k-task-complete{
background-color: var(--primary);
border-color:var(--primary);
} */
.scheduler-inputs {
display: flex;
flex-direction: column;
align-items: center;
}
.scheduler-inputs input, .scheduler-inputs textarea {
width: 100%;
border: none;
padding: 10px;
font-weight: bold;
}
.scheduler-inputs textarea {
height: 300px;
}
.notification-popup {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
z-index: 99;
background-color: rgba(0, 0, 0, 0.36);
/* opacity: 1; */
animation: opacityAni .5s ease;
/* opacity: 1; */
}
.notification-popup div:nth-child(1) {
height: 200px;
}
@keyframes opacityAni {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (max-width: 575.98px) {
.notification-popup span {
font-size: 18px;
}
}
.date-picker {
display: block;
width: 100%;
line-height: 1;
-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
border-radius: 5px;
/* margin-bottom: 1.563rem; */
font-size: .9375rem;
padding: 0 .9375rem;
border: 1px solid rgba(0,0,0,0.1);
background-color: #fff;
height: 50px;
font-weight: bold;
position: relative;
font-size: 18px
}
.date-wrapper::after {
content: '\25be';
/* 25b9 */
position: absolute;
top: 0;
left: 50px;
transform: scale(2);
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
@media (max-width: 767.98px) {
.date-wrapper::after {
display: none;
}
.date-wrapper::before {
display: none;
}
.date-picker::after {
display: none;
}
.date-picker::before {
display: none;
}
}
.orders-fitler .ui.selection.dropdown {
/* display: block; */
width: 100%;
line-height: 1;
-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important;
box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important;
border-radius: 5px;
/* margin-bottom: 1.563rem; */
font-size: .9375rem !important;
padding: 0 .9375rem !important;
border: 1px solid rgba(0,0,0,0.1) !important;
background-color: #fff;
height: 50px;
font-weight: bold;
position: relative;
}
.orders-fitler .ui.selection.dropdown > .delete.icon, .ui.selection.dropdown > .dropdown.icon, .ui.selection.dropdown > .search.icon {
/* display: none; */
}
.orders-fitler2 .ui.selection.dropdown::after {
content: '\25be';
/* 25b9 */
position: absolute;
top: 0;
left: 50px;
transform: scale(2);
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
@media (max-width: 992.98px) {
.date-picker {
font-size: 14px
}
.orders-fitler .ui.selection.dropdown::after {
left: 20px;
}
.date-picker {
height: 40px;
}
.date-wrapper::after {
left: 33px;
}
.free-chat-main {
width: 100% !important;
}
}
/* styding plan page */
.navigation-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.navigation-header div:nth-child(1) {
display: flex;
align-items: center;
}
.navigation-header div:nth-child(1) i {
font-size: 30px;
}
.navigation-header div:nth-child(1) a {
color: var(--white);
font-size: 18px;
margin: 0 10px;
}
.navigation-header div:nth-child(1) a:hover {
color: var(--secondary);
}
.navigation-header div:nth-child(2) {
display: flex;
align-items: center;
}
.navigation-header div:nth-child(2) i {
font-size: 18px;
margin-left: 5px;
}
.navigation-header div:nth-child(2) a {
color: var(--primary);
font-size: 14px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 5px 0;
background-color: var(--white);
border-radius: 10px;
width: 150px;
}
.navigation-header div:nth-child(2) a:hover, .navigation-header div:nth-child(2) a:hover i {
background-color: var(--secondary);
color: var(--white) !important;
}
@media(max-width : 992.98px) {
.navigation-header div:nth-child(1) i {
font-size: 20px;
}
.navigation-header div:nth-child(1) a {
color: var(--white);
font-size: 14px;
margin: 0 5px;
}
.navigation-header div:nth-child(2) {
display: flex;
align-items: center;
flex-direction: column;
}
.navigation-header div:nth-child(2) a {
margin-bottom: 5px;
color: var(--primary);
width: 120px;
font-size: 12px;
}
.navigation-header div:nth-child(2) i {
font-size: 14px;
}
}
@media (max-width: 575.98px) {
.navigation-header div:nth-child(1) a {
font-size: 12px;
}
}
.bluish-color {
background-color: #294070;
}
.orangish-color {
background-color: #FF7A14;
}
.sky-color {
background-color: #19D0FF;
}
.hazel-color {
background-color: #9B6A15;
}
.greenish-color {
background-color: #76BEB5;
}
.dark-greenish-color {
background-color: #388B7D;
}
.table-lesson {
width: 140px !important;
position: relative;
overflow: visible;
}
.ce, .ie {
display: inline-flex;
justify-content: center;
align-items: center;
width: 25px;
height: 25px;
position: absolute;
top: -8px;
left: -10px;
border: 3px solid var(--white);
border-radius: 50%;
color: var(--white);
text-transform: uppercase;
font-size: 14px;
}
.ce {
background-color: var(--red);
}
.ie {
background-color: var(--primary);
}
.studying-form {
display: flex;
align-items: center;
justify-content: space-between;
}
.studying-form a {
width: 130px;
padding: 2px 10px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
font-weight: bold;
height: 40px;
}
.studying-form a:hover {
background-color: var(--secondary) !important;
}
@media (max-width: 767.98px) {
.studying-form {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
}
.studying-form div:nth-child(1) {
width: 100%;
}
.studying-form div:nth-child(2) {
/* flex-direction: column;
align-items: flex-end !important; */
justify-content: center;
align-items: center;
margin: auto;
margin-top: 10px;
}
.studying-form a {
width: 50%;
font-size: 16px;
text-align: center;
justify-content: center;
align-items: center;
margin-left: 10px;
height: 40px;
}
}
.lessons-time .lesson-time {
width: 100% !important;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 10px !important;
padding-right: 10px !important;
}
.lesson-time span {
font-size: 10px;
}
/* chat page */
.search-user {
display: flex;
align-items: center;
position: relative;
color: rgba(0, 0, 0, 0.36) !important;
}
.search-user input {
border-radius: 10px;
width: 100%;
height: 40px;
padding: 10px;
border: none;
}
.search-user input:focus {
border: 2px solid var(--secondary);
}
.search-user i {
position: absolute;
top: 35%;
left: 20px;
/* bottom: 0; */
font-size: 20px;
pointer-events: none;
}
.chat-user {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.chat-user:hover {
background-color: rgba(0, 173, 238,0.3) !important;
}
.chat-user .img-container-name img {
width: 50px;
height: 50px;
}
.chat-user .img-container-name span {
font-size: 14px;
}
.user-block-btn {
cursor: pointer;
color: var(--secondary);
}
.user-block-btn:hover i {
cursor: pointer;
color: var(--secondary) !important;
}
.chat-user-date {
color: var(--white);
font-size: 12px;
}
.chat-users .simplebar-scrollbar::before {
background-color: var(--white);
width: 2px;
opacity: .5;
}
.users-sec {
/* position: absolute; */
position: relative;
transition: 0.5s all ease;
}
.chat-page {
position: relative;
/* width: 100%; */
}
@media (max-width : 991.98px) {
.users-sec {
position: absolute;
width: 70%;
z-index: 100;
left: -70%;
/* display: none; */
}
}
.chatOpen {
left: 0%;
}
.btn-accor {
background: var(--secondary);
display: none;
align-items: center;
justify-content: center;
position: absolute;
top: 20px;
/* left: -60px; */
right: -60px;
width: 60px;
height: 60px;
border-radius: 0 15px 15px 0;
cursor: pointer;
color: var(--white);
text-align: center;
z-index: 99;
transition: var(--mainTrans);
}
.btn-accor:hover {
background-color: var(--primary);
}
.btn-accor span {
font-size: 10px;
line-height: 12px;
}
.btn-accor i {
font-size: 40px;
}
.msgs-counter {
display: flex;
justify-content: center;
align-items: center;
background: var(--primary);
width: 20px;
font-size: 10PX;
height: 20px;
border-radius: 50%;
position: absolute;
top: 10PX;
right: 5PX;
transition: var(--mainTrans);
}
.btn-accor:hover .msgs-counter {
background: var(--secondary);
}
@media (max-width:991.98px) {
.btn-accor {
display: flex;
}
}
@media (min-width: 1600px) {
.chat-users {
height: 70.5vh !important;
}
}
.convo-sec {
background-color: #FBFBFB;
}
.msg {
background-color: var(--white);
box-shadow: var(--init-shadow);
-webkit-box-shadow: var(--init-shadow);
-moz-box-shadow: var(--init-shadow);
padding: 10px;
border-radius: 10px;
position: relative;
color: var(--primary);
}
.sent-msg {
display: flex;
align-items: center;
/* justify-content: flex-end; */
width: 70%;
margin-bottom: 30px;
margin-left: auto;
}
.sent-msg .msg {
background-color: #F9F8F8;
}
.msg-time-stamp {
/* position: absolute;
bottom: 10px;
left: 10px; */
display: block;
text-align: left;
font-size: 12px;
font-weight: bold;
color: rgba(0, 0, 0, 0.36);
}
.recived-msg {
display: flex;
align-items: center;
/* justify-content: flex-end; */
width: 70%;
margin-bottom: 30px;
margin-right: auto;
}
.msgs {
width: 97%;
margin-bottom: 6rem;
}
.convo-sec .simplebar-scrollbar::before {
background-color: var(--primary);
width: 4px;
opacity: .5;
}
.send-input {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
z-index: 99;
background: var(--white);
padding: 10px;
}
.send-form {
display: flex;
justify-content: center;
align-items: center;
/* width: 100%; */
}
.send-form .msgs-input {
display: block;
width: 86%;
margin: 0 10px;
height: 50px;
border-radius: 50px;
border: none;
padding: 10px;
box-shadow: var(--main-shadow);
}
.send-form button {
transition: 0.3s ease all;
font-size: 35px;
color: var(--grey);
cursor: pointer;
}
.send-form button:hover {
color: var(--secondary);
}
.msgs-sec {
width: 100%;
}
@media (max-width : 767.98px) {
.send-form button {
font-size: 25px;
}
}
.courses-anchors a {
color: var(--primary);
width: 140px !important;
display: block;
margin: auto;
}
.courses-anchors a:hover {
background-color: var(--primary) !important;
color: var(--white);
}
/* sign up form and sitting up madals ~*/
.my-modal {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0, 0,0.5);
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
animation: myModalAni 0.5s;
}
@keyframes myModalAni {
from {
opacity: 0;
}
; to {
opacity: 1;
}
}
.my-modal-content {
position: relative;
width: 60%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background-color: var(--primary);
border-radius: 10px;
box-shadow: var(--init-shadow);
padding: 20px;
margin: auto;
/* color: var(--white);*/
}
.signForm {
width: 80%;
/*background-color: var(--primary);*/
}
.input-wrapper {
width: 90%;
height: 40px;
position: relative;
direction: rtl;
margin: 20px auto;
}
.input-wrapper span {
padding: 10px 10px 0px 0px;
}
.input-checkbox-wrapper {
width: 90%;
height: 40px;
position: relative;
direction: rtl;
margin: 20px auto;
display: flex;
align-items: center;
}
.input-checkbox-wrapper input {
width: 20px;
height: 20px;
}
.input-checkbox-wrapper label {
margin-bottom: 0;
margin-right: 10px;
font-size: 16px;
}
.input-checkbox-wrapper a {
color: var(--secondary);
font-weight: bold;
}
.input-wrapper button {
border-radius: 50px;
background-color: var(--secondary);
width: 100%;
height: 40px;
cursor: pointer;
color: var(--primary);
font-size: 18px;
font-weight: 700;
transition: var(--mainTrans);
}
.input-wrapper button:hover {
background-color: white;
box-shadow: var(--init-shadow);
}
.input-wrapper input {
width: 100%;
height: 100%;
/*padding-top: 20px;*/
border: none;
border-bottom: 2px var(--light-gray) solid;
border-radius: 10px;
}
.input-wrapper input:focus {
background-color: var(--light-gray);
}
.input-wrapper label {
position: absolute;
width: 100%;
height: 100%;
bottom: 5px;
left: 0;
margin: 0;
pointer-events: none;
}
.input-wrapper .input-name {
position: absolute;
bottom: 0;
right: 0;
transition: var(--mainTrans);
}
.input-wrapper input:focus + label .input-name {
transform: translateY(-110%);
color: white;
}
.input-wrapper select {
width: 100%;
height: 100%;
border: none;
border-top: 2px var(--light-gray) solid;
border-radius: 10px;
}
.input-wrapper select:focus {
border: none;
background-color: var(--light-gray);
}
/* Customize the label (the container) */
.checkbox-wrapper {
display: block;
position: relative;
padding-left: 15px;
/*margin-bottom: 12px;*/
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.checkbox-wrapper input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkbox-wrapper .checkmark {
position: absolute;
top: 0;
right: -20px;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.checkbox-wrapper:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.checkbox-wrapper input:checked ~ .checkmark {
background-color: var(--secondary);
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.checkbox-wrapper input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.checkbox-wrapper .checkmark:after {
left: 9px;
top: 2px;
width: 8px;
height: 15px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.checkbox-label {
padding-right: 10px;
color: white;
}
@media (max-width: 991.98px) {
.my-modal-content {
width: 90%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background-color: var(--primary);
border-radius: 10px;
box-shadow: var(--init-shadow);
padding: 20px;
overflow: auto;
}
.signForm {
width: 100%;
/*background-color: var(--primary);*/
}
.input-checkbox-wrapper {
width: 90%;
height: 40px;
position: relative;
direction: rtl;
margin: 20px auto;
display: flex;
align-items: center;
}
}
@media (max-width: 767.98px) {
.checkbox-label {
font-size: 14px;
}
}
.close-btn {
position: absolute;
right: 40px;
top: 10px;
width: 30px;
height: 30px;
font-size: 30px;
color: var(--secondary);
cursor: pointer;
transition: var(--mainTrans);
}
.close-btn:hover {
color: var(--primary);
}
@media (max-width: 575.98px) {
.close-btn {
right: 10px;
top: 2px;
}
.sign-in-img {
width: 100%;
display: flex !important;
justify-content: center;
align-items: center;
margin: auto;
}
.sign-in-img img {
width: 60% !important;
/* margin: auto; */
}
}
.fb-login {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 40px;
color: var(--white);
background-color: #3b5998;
border-radius: 50px;
margin: 10px auto 0;
text-align: center;
font-weight: bold;
font-size: 18px;
transition: var(--mainTrans);
}
.fb-login:hover {
background-color: var(--primary);
color: var(--white);
}
@media (max-width: 575.98px) {
.fb-login {
font-size: 14px;
width: 90%;
}
}
.or-title {
width: 100%;
text-align: center;
}
.or-title::before {
content: '';
display: inline-block;
vertical-align: middle;
height: 2px;
background-color: rgba(0,0,0,0.15);
width: 15%;
margin-right: 10px;
}
.or-title::after {
content: '';
display: inline-block;
vertical-align: middle;
height: 2px;
background-color: rgba(0,0,0,0.15);
width: 15%;
margin-left: 10px;
}
.forgot-password {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.36);
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
animation: myModalAni 0.5s;
}
@keyframes myModalAni {
from {
opacity: 0;
}
; to {
opacity: 1;
}
}
.forgot-password-content {
position: relative;
width: 60%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background-color: var(--primary);
border-radius: 10px;
box-shadow: var(--init-shadow);
padding: 20px;
}
.input-wrapper-forgot-password {
width: 90%;
height: 40px;
position: relative;
direction: rtl;
margin: 20px auto;
}
.input-wrapper-forgot-password button {
border-radius: 50px;
background-color: var(--secondary);
width: 100%;
height: 40px;
cursor: pointer;
color: var(--primary);
font-size: 18px;
font-weight: 700;
transition: var(--mainTrans);
}
.input-wrapper-forgot-password button:hover {
background-color: var(--white);
box-shadow: var(--init-shadow);
}
.input-wrapper-forgot-password input {
width: 100%;
height: 100%;
padding-top: 20px;
border: none;
border-bottom: 2px var(--light-gray) solid;
border-radius: 5px;
}
.input-wrapper-forgot-password input:focus {
background-color: var(--light-gray);
}
.input-wrapper-forgot-password label {
position: absolute;
width: 100%;
height: 100%;
bottom: 5px;
left: 0;
margin: 0;
pointer-events: none;
padding: 10px 10px 0px 0px;
}
.input-wrapper-forgot-password span {
padding: 10px 10px 0px 0px;
}
.input-wrapper-forgot-password .input-name {
position: absolute;
bottom: 0;
right: 0;
transition: var(--mainTrans);
}
.input-wrapper-forgot-password input:focus + label .input-name {
transform: translateY(-110%);
color: var(--white);
}
.input-wrapper-forgot-password select {
width: 100%;
height: 100%;
border: none;
border-bottom: 2px var(--light-gray) solid;
}
.input-wrapper-forgot-password select:focus {
border: none;
}
@media (max-width: 991.98px) {
.forgot-password-content {
width: 90%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background-color: var(--primary);
border-radius: 10px;
box-shadow: var(--init-shadow);
padding: 20px;
overflow: auto;
}
.signForm {
width: 100%;
/*background-color: var(--primary);*/
}
}
.teacher-page .img-container-name img {
width: 80px !important;
height: 80px !important;
}
.teacher-counter {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
/* width: 50%; */
}
.teacher-counter span:nth-child(1) {
background-color: var(--primary);
color: var(--white);
border-radius: 10px;
padding: 5px 10px;
position: absolute;
top: -20px;
left: 0;
right: 0;
width: 80px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.teacher-counter span:nth-child(2) {
background-color: var(--first-gray);
color: var(--primary);
border-radius: 10px;
box-shadow: var(--init-shadow);
/* margin-left: 30px; */
display: block;
text-align: center;
padding: 10px;
font-size: 40px;
display: block;
width: 130px;
}
.teacher-lessons .img-container-name img {
width: 120px !important;
height: 120px !important;
}
@media (max-width: 767.98px) {
.teacher-lessons .img-container-name {
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
.teacher-lessons .stars {
text-align: center;
}
.teacher-lessons .img-container-name img {
width: 120px !important;
height: 120px !important;
}
.teacher-counter {
margin: 20px 0;
}
.teacher-counter span:nth-child(2) {
font-size: 30px;
}
}
@media (max-width: 575.98px) {
.teacher-lessons .img-container-name img {
width: 110px !important;
height: 110px !important;
}
}
.student-op {
border-bottom: var(--first-gray) solid 3px;
}
.student-op .img-container-name img {
width: 50px !important;
height: 50px !important;
}
.teacher-price-btns a {
/* color: var(--white); */
font-weight: bold;
text-align: center;
display: block;
border-radius: 10px;
width: 100%;
color: var(--white);
}
.teacher-articles-carousal .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
background-color: var(--secondary);
}
.teacher-share-page {
font-size: 12px;
font-weight: bold;
color: var(--primary);
display: flex;
align-items: center;
width: 100%;
}
.my-balance-title span {
width: 120px;
text-align: center;
}
.balance-pricing {
font-size: 40px;
font-weight: bold;
background-color: var(--primary);
color: var(--white);
border-radius: 30px;
padding: 40px 10px;
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
transition: var(--mainTrans);
}
.balance-pricing:hover {
background: var(--secondary);
color: var(--white);
}
.balance-pricing span {
font-size: 22px;
}
@media (max-width: 991.98px) {
.my-balance-cotnent {
width: 100% !important;
}
}
.certificate-form-container {
padding: 50px 0;
}
.certificate-form {
display: flex;
justify-content: center;
width: 90%;
margin: auto;
flex-direction: column;
}
.certificate-form input {
-webkit-box-shadow: var(--init-shadow);
-moz-box-shadow: var(--init-shadow);
-webkit-appearance: none;
box-shadow: var(--init-shadow);
border-radius: 50px;
padding: 10px;
height: 50px;
border: none;
width: 100%;
transition: var(--mainTrans);
border: rgba(0, 0, 0, 0.1) 2px solid;
}
.certificate-form input:focus {
border: rgba(0, 0, 0, 0.05) 2px solid;
box-shadow: var(--main-shadow);
}
.certificate-form label {
font-size: 14px;
color: var(--light-gray);
padding-right: 10px;
margin-top: 10px;
}
.certificate-form button {
border-radius: 50px;
background-color: var(--primary);
color: var(--white);
font-weight: bold;
width: 160px;
font-size: 18px;
padding: 5px 0;
cursor: pointer;
margin: auto;
transition: var(--mainTrans);
}
.certificate-form button:hover {
background-color: var(--secondary);
}
.certificate-diploma h4 {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.certificate-diploma h4::before {
content: '';
width: 10%;
height: 2px;
background-color: var(--light-gray-rgba);
margin-right: 10px;
}
.certificate-diploma h4::after {
content: '';
width: 10%;
height: 2px;
background-color: var(--light-gray-rgba);
margin-left: 10px;
}
.certificate-diploma-items {
display: flex;
flex-direction: column;
position: relative;
width: 90%;
margin: auto;
}
.certificate-diploma-items li {
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 10px;
border-radius: 10px;
border: 1px solid var(--light-gray);
font-weight: bold;
}
.certificate-diploma-items li span {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.certificate-diploma-items::after {
content: '';
height: 95%;
width: 2px;
background-color: var(--primary);
position: absolute;
right: -30px;
margin-top: 25px;
}
.certificate-diploma-items li::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f00c";
display: flex;
justify-content: center;
align-items: center;
width: 35px;
height: 35px;
border-radius: 50%;
border: var(--primary) dashed 2px;
background-color: var(--white);
position: absolute;
right: -47px;
z-index: 22;
color: var(--light-gray);
}
.certificate-diploma-items li {
color: var(--primary);
}
.certificate-diploma-items li.active {
background-color: var(--primary);
color: var(--white) !important;
}
.certificate-diploma-items li.active::before {
color: var(--green) !important;
}
@media (max-width: 1199.98px) {
.course-date {
margin-top: 10px;
}
}
@media (max-width: 767.98px) {
.certificate-diploma-items {
right: 20px;
}
.certificate-diploma-items::after {
right: -23px;
}
.certificate-diploma-items li::before {
right: -42px;
}
.certificate-diploma-items li span {
font-size: 14px !important;
}
}
.test {
padding: 20px;
border: 1px var(--primary) solid;
background-color: var(--primary);
color: var(--white);
border-radius: 10px;
width: 90%;
margin: auto;
position: relative;
}
.test::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f00c";
display: flex;
justify-content: center;
align-items: center;
width: 35px;
height: 35px;
border-radius: 50%;
border: var(--primary) dashed 2px;
background-color: var(--white);
position: absolute;
right: -47px;
z-index: 22;
color: var(--light-gray);
}
@media (max-width: 767.98px) {
.test {
right: 20px;
}
.test::before {
right: -42px;
}
}
.test-cond {
display: flex;
justify-content: space-around;
align-items: center;
margin: 20px 0;
font-weight: bold;
}
.test-cond img {
width: 20px;
height: 20px;
}
.start-test-btn {
display: flex;
width: 70%;
justify-content: center;
align-items: center;
margin: auto;
padding: 10px 0;
font-weight: bold;
font-size: 20px;
background-color: var(--secondary);
color: var(--white);
border-radius: 10px;
}
.start-test-btn:hover {
background-color: var(--secondary);
color: var(--white);
}
.diploma {
padding: 20px;
background-color: var(--light-gray);
border-radius: 10px;
font-size: 20px;
font-weight: bold;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 30px;
color: var(--white);
}
.diploma:hover {
background-color: var(--primary);
color: var(--white);
}
@media (max-width: 767.98px) {
.diploma {
font-size: 14px;
text-align: center;
}
}
.diploma-course {
display: flex;
color: var(--primary);
}
.diploma-course img {
width: 100px;
border-radius: 20px;
}
.diploma-course h5 {
color: var(--primary);
}
.diploma-course p {
color: var(--light-gray);
font-weight: bold;
font-size: 16px !important;
}
.diploma-course:hover h5 {
color: var(--secondary) !important;
}
.signin-diploma {
background-color: var(--primary);
color: var(--secondary);
border-radius: 10px;
display: flex;
justify-content: center;
width: 80%;
margin: auto;
font-weight: bold;
padding: 10px 0;
font-size: 20px;
transition: var(--mainTrans);
}
.signin-diploma:hover {
background: var(--secondary);
color: var(--white);
}
.skill-img-container {
width: 120px;
height: 60px;
border-radius: 20px;
overflow: hidden;
margin-left: 20px;
}
.skill img {
width: 100%;
height: 100%;
/* object-fit: fill; */
}
@media (max-width: 767.98px) {
.skill-img-container {
width: 75px;
}
}
.contact-us-form {
display: flex;
width: 100%;
flex-direction: column;
/* align-items: center; */
}
.contact-us-form input, .contact-us-form textarea {
width: 100%;
margin-bottom: 20px;
padding: 10px;
border-radius: 10px;
border: none;
-webkit-box-shadow: var(--init-shadow);
-moz-box-shadow: var(--init-shadow);
-webkit-appearance: none;
box-shadow: var(--init-shadow);
}
.contact-us-form button {
border-radius: 10px;
width: 50%;
background-color: var(--primary);
color: var(--white);
font-weight: bold;
padding: 10px 0;
margin: auto;
transition: var(--mainTrans);
cursor: pointer;
}
.contact-us-form button:hover {
background-color: var(--secondary);
}
.diploma-btns button {
position: relative;
overflow: visible;
}
.diplomaSrc {
display: flex;
justify-content: center;
margin-bottom: 10px;
font-weight: bold;
color: var(--secondary);
font-size: 20px;
cursor: pointer;
transition: var(--mainTrans);
}
.diplomaSrc:hover {
color: var(--primary);
}
.diploma-wrapper {
position: relative;
overflow: visible;
}
.getting-diploma {
background-color: var(--primary);
color: var(--white) !important;
border-radius: 50px;
width: 65% !important;
margin: auto;
padding: 5px 0;
transition: var(--mainTrans);
text-align: center;
}
.getting-diploma:hover {
background-color: var(--secondary);
}
.free-diploma {
position: relative;
overflow: visible;
}
.diploma-wrapper img, .free-diploma img {
box-shadow: var(--main-shadow);
transition: var(--mainTrans);
}
.diploma-img-wrapper {
width: 65%;
margin: auto;
position: relative;
transition: var(--mainTrans);
/* height: 250px; */
}
@media (min-width: 1200px) {
.diploma-img-wrapper img {
height: 200px;
}
}
.diploma-wrapper:hover .diploma-img-wrapper {
transform: scale(1.02);
}
.free-diploma:hover .diploma-img-wrapper {
transform: scale(1.02);
}
.diploma-prices {
position: absolute;
top: -20px;
left: -20px;
width: 60px;
height: 60px;
border-radius: 10px;
box-shadow: var(--main-shadow);
/* border-radius: 50%; */
display: flex;
justify-content: center;
align-items: center;
background-color: var(--secondary);
color: var(--white);
}
.table-lesson {
margin-bottom: 0.5rem !important;
}
@media ( max-width : 992.98px) {
.table-lesson {
font-size: 12px !important;
width: 110px !important;
}
}
@media (max-width: 1199.98px) {
.diploma-prices {
width: 50px;
height: 50px;
font-size: 20px !important;
}
}
/* defining custom classes */
.error {
color: var(--red) !important;
/*text-align: center !important;*/
margin-bottom: 17px !important;
}
/* adding sub modal styles */
.modal-box {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.36);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
text-align: center;
background-color: var(--white);
border-radius: 10px;
padding: 10px;
width: 50%;
max-height: 80vh;
overflow-y: auto;
}
@media (max-width: 767.98px) {
.modal-content {
width: 80%;
}
.modal-content h4 {
font-size: 18px;
}
.modal-content p {
font-size: 16px;
}
}
.close-modal {
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
width: 30px;
/* margin-left: auto; */
color: var(--secondary);
}
.close-modal:hover {
color: var(--primary);
}
.modal-btns button {
cursor: pointer;
border-radius: 50px;
padding: 5px 20px;
transition: var(--mainTrans);
width: 125px !important;
}
.modal-btns button:nth-child(1) {
background-color: var(--secondary);
color: var(--white);
}
.modal-btns button:nth-child(1):hover {
background-color: var(--green);
}
.modal-btns button:nth-child(2) {
background-color: var(--primary);
color: var(--white);
}
.modal-btns button:nth-child(2):hover {
background-color: var(--green);
}
.rounded-img {
width: 150px;
height: 150px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
/* max-width: 100%;
max-height: 100%;*/
}
.rounded-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* uploading video btn */
.upload-vid {
display: flex;
justify-content: center;
margin: 20px 0;
}
.uplaod-a-vid {
width: 30%;
background-color: var(--secondary);
color: var(--white);
border-radius: 5px;
padding: 5px 20px;
transition: var(--mainTrans);
display: flex;
justify-content: center;
align-items: center;
}
.uploaded-vid-text {
display: flex;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
;
border-radius: 5px;
overflow: auto;
cursor: pointer;
height: 50px;
text-align: center;
}
.uploaded-vid-text:hover .uplaod-a-vid {
background-color: var(--primary);
}
.uplaod-a-vid-content {
width: 70%;
padding: 5px 20px;
border-radius: 5px;
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
}
.uplaoding-vid-container {
width: 50%;
}
@media (max-width: 575.98px) {
.uplaoding-vid-container {
width: 100%;
}
.uplaod-a-vid {
font-size: 14px;
width: 50%;
}
.uplaod-a-vid-content {
padding: 5px 20px;
font-size: 12px;
border-radius: 5px;
width: 50%;
}
}
.write-the-sentence input {
text-align: right;
padding: 10px;
border-radius: 50px;
border: var(--light-gray) solid 2px;
}
.answers-list input {
border-radius: 5px;
border: var(--light-gray) solid 1px;
}
.answers-list span {
margin: 5px;
}
.answers-tags a {
margin: 5px;
background-color: var(--first-gray);
padding: 5px 10px;
font-weight: bold;
cursor: pointer;
transition: var(--mainTrans);
}
.answers-tags a:hover {
background-color: var(--secondary);
color: var(--white) !important;
}
/* teacher hours page */
.teacher-hours-wrapper .input-checkbox-wrapper {
margin: 0 auto !important;
}
.teacher-hours {
border-radius: 5px;
padding: 5px 10px;
border: none;
box-shadow: var(--init-shadow);
}
.teacher-hours:focus {
outline: none;
}
.teacher-hours-wrapper button {
width: 40%;
background: var(--primary);
cursor: pointer;
border-radius: 10px;
color: var(--white);
font-weight: bold !important;
}
.steps-header {
background: var(--primary);
padding: 10px;
color: var(--white);
text-align: center;
}
.circle-wrapper {
margin: 50px;
position: relative;
}
.steps-body {
/* background-color: var(--first-gray); */
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.step-circle {
margin: auto;
width: 100px;
height: 100px;
border-radius: 50%;
border: 7px solid var(--light-gray);
display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: pointer;
}
.step-circle:before {
content: '';
position: absolute;
top: -101px;
left: 0;
right: 0;
display: block;
margin: auto;
width: 2px;
height: 100px;
background-color: var(--light-gray);
z-index: -1;
}
.step-circle.active:before {
background-color: var(--secondary);
}
.step-circle::after {
content: '';
position: absolute;
bottom: -100px;
left: 0;
right: 0;
display: block;
margin: auto;
width: 2px;
height: 100px;
background-color: var(--light-gray);
z-index: -1;
}
.step-circle.active::after {
background-color: var(--secondary);
}
.step-circle::after {
display: none !important;
}
.step-circle span {
font-weight: bold !important;
font-size: 30px;
color: var(--light-gray);
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: var(--white);
border-radius: 50%;
}
.step-circle.active {
border: 7px solid var(--secondary);
}
.step-circle.active span {
color: var(--primary);
}
.teaching-req-wrapper input, .teaching-req-wrapper textarea {
width: 100%;
border-radius: 5px;
padding: 10px;
border: 2px var(--primary) solid;
transition: var(--mainTrans);
margin-top: 1rem;
}
.teaching-req-wrapper input:focus, .teaching-req-wrapper textarea:focus {
border: 2px var(--secondary) solid;
}
.teaching-req-wrapper input[type = checkbox] {
width: 20px;
height: 20px;
margin: 0;
}
.teaching-checks {
margin: 1rem;
}
.step button {
width: 100%;
display: block;
background-color: var(--primary);
padding: 10px 20px;
border-radius: 10px;
color: var(--white);
}
.zandgar__wizard .zandgar__step {
display: none;
}
.zandgar__wizard .zandgar__step.zandgar__step__active {
display: block;
}
.teaching-img-avatar {
width: 150px;
height: 150px;
overflow: hidden;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
object-fit: cover;
}
.teaching-uplaod-label {
color: var(--white);
border-radius: 10px;
background-color: var(--secondary);
padding: 5px 20px;
display: block;
margin-top: 10px;
text-align: center;
transition: var(--mainTrans);
}
.teachingUplaod {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.teachingUplaod:hover .teaching-uplaod-label {
background-color: var(--primary);
}
.teaching-uplaod-inst {
margin-right: 30px;
}
.teaching-uplaod-inst li {
margin-bottom: 10px;
}
.prev-button {
background: var(--light-gray) !important;
transition: var(--mainTrans);
}
.prev-button:hover {
background: #868181 !important;
}
@media (max-width: 991.98px) {
.steps-body.h-100 {
height: 84% !important;
}
}
/* img avatar */
.img-avatar-150 {
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 150px;
overflow: hidden;
border-radius: 50%;
}
.img-avatar-100 {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 50%;
}
.img-avatar-70 {
display: flex;
justify-content: center;
align-items: center;
width: 70px;
height: 70px;
overflow: hidden;
border-radius: 50%;
}
.img-avatar-40 {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 50%;
}
.img-avatar-30 {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.img-avatar-150 img, .img-avatar-100 img, .img-avatar-70 img, .img-avatar-40 img, .img-avatar-30 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.img-avatar-150-img {
width: 150px;
height: 150px;
object-fit: contain;
border-radius: 50%;
}
.avatar-container span {
transition: var(--mainTrans);
}
.avatar-container:hover span {
color: var(--secondary) !important;
}
.article-avatar {
border-radius: 20px;
overflow: hidden;
width: 110px;
height: 110px;
display: flex;
justify-content: center;
align-items: center;
}
.article-avatar img {
width: 100%;
height: 100%;
}
.of-hidden {
overflow: hidden;
}
/* friends page */
.frinds-tab a {
padding: 5px 20px;
border-radius: 10px;
box-shadow: var(--init-shadow);
transition: var(--mainTrans);
}
.frinds-tab .active {
background: var(--primary);
color: var(--white);
margin: 0 5px;
}
.frinds-tab .inactive {
background: var(--light-white);
color: var(--primary);
}
.frinds-tab .active:hover, .frinds-tab .inactive:hover {
background: var(--secondary);
color: var(--white);
}
.freind-card #circle-container {
width: 150px;
height: 150px;
margin: 0;
}
@media (max-width: 1199.98px) {
.circle-container-friend {
width: 70%;
margin: 40px auto 0;
}
}
@media (max-width: 991.98px) {
.circle-container-friend {
width: 60%;
margin: auto;
}
}
.search-friends {
display: flex;
}
.search-friends input {
width: 100%;
border-radius: 5px;
padding: 10px;
border: 2px var(--primary) solid;
transition: var(--mainTrans);
}
.search-friends input:focus {
border: 2px var(--secondary) solid;
}
.search-friends button {
background: var(--primary);
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
color: var(--white);
margin: 0 10px;
}
.bg-red {
background-color: var(--red);
color: var(--white) !important;
}
.emoji-picker {
width: 650px;
}
@media (max-width: 767.98px) {
.emoji-picker {
width: calc(var(--emoji-per-row) * var(--emoji-size) * var(--emoji-size-multiplier) + 1em + 2px);
}
}
.sound-question[src=""] {
display: none !important;
}
.popular-tag {
width: 200px;
height: 50px;
position: absolute;
top: 20px;
right: 30px;
}
a {
font-weight: bold;
}
.nav-item a {
font-weight: bold;
}
.radio-button{
color:white;
}