html, body, .container-fluid {
height:100%;
width:100%;
margin:0;
padding:0;
}
body{
height:100%;
width:100%;
box-sizing: border-box;
}
.fa-facebook-square {
color: #3b5998;
background-image: linear-gradient( to bottom, transparent 20%, white 20%, white 93%, transparent 93% );
background-size: 55%;
background-position: 70% 0;
background-repeat: no-repeat;
}
.btn-new-info{
background-color:#195877;
color:white;
}
.btn-new-info:hover{
background-color:#17445a;
color:white;
}
.boxSearchInputforMobile{
display:none;
}
#btnSearchTeachersPhone{
display: none;
}
#btnCourseForumPhone{
display: none;
}
.card-horizontal {
display: flex;
flex: 1 1 auto;
}
.seconde_nav{
display: none;
}
.ulCourses{
margin: 0;
padding: 10px;
}
.liCoursName,.liCityName{
list-style-type: none;
font-weight: 500;
cursor: pointer;
}
.liCoursName:hover,.liCityName:hover{
background-color: #94dfeba4;
color: black;
}
.logo{
width:80px;
height: 55px;
}
.loader{
position: fixed;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999 !important;
}
.Login{
max-width: 400px;
border-radius: 15px;
margin-top: 100px;
margin: auto;
}
.btnSignIn{
text-align: center;
}
.signup{
border-radius: 15px;
margin-top: 20px;
}
.logcard{
position: absolute;
left:46%;
display: flex;
align-items: center;
justify-content: center;
}
.log{
width: 150px;
border-radius: 3px;
padding: 10px;
color:white;
text-align: center;
}
.error_msg{
color:white;
background-color: #ED1A3B;
padding: 5px;
border-radius: 5px;
}
.success_msg{
color:white;
background-color: #26AD78;
padding: 5px;
border-radius: 5px;
}
.emError{
text-align: center;
}
.mobile-desc{
display: none;
}
/* profile images */
.form-div{
margin-top: 50px;
border: 1px solid white;
padding-top: 15px;
background-color: rgb(255, 255, 255);
width: 350px;
margin: auto;
}
#profileDefault{
display: block;
width: 60%;
margin: 10px auto;
cursor: pointer;
}
.btn-purple{
background-color:#880E4F;
}
.btn-purple:hover{
background-color: rgb(105, 11, 61);
}
.imgcartoon img{
width:80px;
}
.purple{
border: 1px solid #880E4F;
color:#880E4F;
}
.form-control::placeholder{
text-align: right;
}
.allinks{
margin: auto;
}
.titleOnCard{
color: rgba(0, 0, 0, 0.698);
}
.titleOnCard:hover{
color: rgba(0, 0, 0, 0.698);
}
.e-profile{
border: 1px solid gray;
border-radius: 20px;
}
.close-icon{
position: absolute;
margin-left: 10px;
padding: 5px;
}
.close-icon:hover{
border: 1px solid gray;
padding: 5px;
}
.nav-link{
font-size: 20px;
}
.nav-link:hover{
background-color: rgba(187, 187, 187, 0.356);
border-radius: 5px;
}
.nav-item .fa:hover{
color:#17A2B8;
}
.already_member,.new_member{
text-align: center;
}
.city-txt{
margin-left: 295px;
}
#divSiteDescription{
width:98.7%;
margin: auto;
margin-top: 15px;
padding-bottom: 70px;
}
.mainimage{
width: 96%;
position:relative;
margin:auto;
/* height: 92%; */
height: 80%;
/* background: url('../img/main77-min.jpg') fixed; */
background: url('../img/kitchen.jpg') fixed;
background-size: auto 100%;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
-moz-box-shadow: 0 0 15px 2px #000;
-webkit-box-shadow: 0 0 15px 2px #000;
box-shadow: 0 0 15px 2px #000;
display: block;
display: flex;
align-items: center;
justify-content: center;
}
.boxSearchInput{
max-height:180px ;
background-color: rgba(0, 0, 0, 0.70);
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
border-radius: 12px;
width: 780px;
margin: auto;
z-index: 99;
}
.profileUserImage{
box-shadow: 5px 10px 8px #888888;
}
.edit-profile:hover{
text-decoration: none;
}
textarea{
direction: rtl;
}
input[type="file"]{
direction: rtl;
}
.allCategoryCourses{
height: 500px;
overflow:scroll;
overflow-x: hidden;
}
.btnActive{
width: 100%;
}
.chooseCat{
width: 50px;
}
.teacher_form{
display: flex;
justify-content: center;
align-items: center;
}
.btnOnCards{
position: absolute;
width: 97%;
bottom: 0;
}
.ratingOnCards{
position: absolute;
top:0;
left: 17px;
padding-left: 13px;
}
.priceOnCards{
position: absolute;
top:30px;
left: 17px;
padding-left: 13px;
}
.btnOnCards-1,.btnOnCards-2{
width: 130px;
display: inline-block;
}
.findTeacherTitle{
font-family: 'Comic Neue', cursive;
font-size: 3rem;
}
.findTeacherTitleForMobile{
display:none;
}
#about_us{
font-size:1.45rem;
font-weight: 500;
line-height: 1.9;
}
#about_us span{
font-size: 30px;
/* color:#880E4F */
}
.serachIcon{
font-size: 20px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
}
.header {
margin-top: 20px;
padding: 10px 0;
background: #f5f5f5;
padding-bottom: 25px;
}
.list-group {
list-style: disc inside;
}
.list-group-item {
display: list-item;
}
.find-more{
text-align: right;
}
.label-theme{
background: #3AAA64;
font-size: 14px;
padding: .3em .7em .3em;
color: #fff;
border-radius: .25em;
}
.label a{
color: inherit;
}
/* contact us form */
.contact_us {
width: 500px;
margin: auto;
background: #f1f1f1;
margin-top: 100px;
margin-bottom: 100px;
padding: 2%;
border-radius: 2px;
box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
display: block;
margin-top: 2em;
}
.card-img{
width: 100%;
max-height: 200px;
border-radius: 30px;
box-shadow: 5px 10px #d3d1d1;
}
#name_contact::placeholder{
text-align: right;
}
#email_contact::placeholder{
text-align: right;
}
.contact_us input, textarea {
border-radius: 2px;
width: 90%;
display: block;
font-size: 16px;
font-weight: 300;
margin-left: 5%;
margin-top: 10px;
border: 1px solid #eceff1;
padding: 15px;
z-index: 1;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
}
#button-blue {
border: 1px solid #2f5bb7;
color: #fff;
padding: 10px;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8;
background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
margin-top: 12px;
font-weight: 500;
}
#button-blue:hover {
border-color: #c6c6c6;
color: #fff;
cursor: pointer;
-o-transition: all 0.2s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
background-color: #4c8ffc;
background-image: -webkit-linear-gradient(top,#4c8ffc,#4889f0);
background-image: -moz-linear-gradient(top,#4c8ffc,#4889f0);
background-image: -ms-linear-gradient(top,#4c8ffc,#4889f0);
background-image: -o-linear-gradient(top,#4c8ffc,#4889f0);
background-image: linear-gradient(top,#4c8ffc,#4889f0);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
/* end contact us form */
.card-category{
align-items: center;
position: relative;
border-radius: 15px;
}
.card-category:hover {
transform: scale(1.1);
background-color: #e4e2e2;
-webkit-transition: transform 0.2s ease-in-out;
}
.inputSearchOnRegister{
border:1px solid #17A2B8;
margin: auto;
}
.inputSearchOnRegister::placeholder{
text-align: right;
}
#divSelectedCourses,#divSelectedCities{
font-size: 12px;
}
.btnActive:hover{
background-color:#007BFF;
color:white;
}
.zoom{
width: 220px;
height: 220px;
z-index: 9;
}
.support-company-area{
padding-top:70px;
padding-bottom:70px;
}
.card-courses{
padding-top:20px;
width: 80%;
margin: auto;
}
.courses-section{
padding-top: 100px;
}
.text-courses-section{
font-size: 20px;
}
/* social media */
.banner__social-media {
list-style: none;
position: fixed;
bottom: 7px;
left: 10px;
font-size: 20px;
z-index: 1000;
display: flex;
padding: 0;
}
.banner__sm-item {
height: 48px;
width: 48px;
text-align: center;
text-shadow: 1px 1px 2px black;
line-height: 48px;
color: #f0f0f0;
}
.wrap-social{
border-radius: 50%;
}
.text-for-forum{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 25px;
line-height: 1.4;
color: rgb(110, 110, 110);
margin-bottom: 20px;
}
.hello-user{
font-size: 20px;
font-weight: bold;
margin-top: 10px;
color: rgb(110, 110, 110);
}
/* media query modes*/
/* -------------------------*/
/* laptop mode */
@media only screen and (max-width: 1366px) {
.mainimage{
/* width: 98.8%; */
width: 96%;
margin:auto;
/* height: 82%; */
height: 80%;
/* background: url('../img/main77-min.jpg') fixed; */
background: url('../img/kitchen.jpg') fixed;
background-size: auto 100%;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
-moz-box-shadow: 0 0 15px 2px #000;
-webkit-box-shadow: 0 0 15px 2px #000;
box-shadow: 0 0 15px 2px #000;
display: block;
display: flex;
align-items: center;
justify-content: center;
}
.boxSearchInput{
max-height:180px ;
background-color: rgba(0, 0, 0, 0.65);
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
border-radius: 12px;
width: 780px;
margin: auto;
z-index: 99;
}
.findTeacherTitle{
font-size: 2.7rem;
}
}
/* tablet mode ipad pro */
@media only screen and (max-width: 1024px) {
.title{
font-size:25px;
}
.findTeacherTitle{
font-size: 2.2rem;
}
.search{
display: none;
}
.title-home-page{
font-size: 10px;
width: 370;
}
.mainimage{
/* width: 98.7%; */
width: 96%;
margin: auto;
height: 70%;
/* background: url('../img/main77-min.jpg') no-repeat center right ; */
background: url('../img/kitchen.jpg')no-repeat center right ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
}
/*old ipad and mobile mode */
@media only screen and (max-width:990px) {
.first_nav{
display:none;
}
.seconde_nav{
display:block;
}
.mainimage{
/* width: 98.7%; */
width: 96%;
margin: auto;
height: 480px;
/* background: url('../img/main77-min.jpg') no-repeat center right ; */
background: url('../img/kitchen.jpg') no-repeat center right ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
}
/*mobile mode */
@media only screen and (max-width:770px) {
.boxSearchInputforDesktop{
display:none;
}
.boxSearchInputforMobile{
display:block;
}
.first_nav{
display:none;
}
.seconde_nav{
display:block;
}
.text-for-forum{
font-size: 20px;
}
.text-courses-section{
font-size: 15px;
}
.title{
font-size:20px;
}
#about_us span{
font-size:20px;
}
.contact_us {
width: 88%;
}
.noSearchResult{
font-size: 20px;
width: 90%;
}
#about_us{
font-size:1rem;
font-weight: 500;
line-height: 1.9;
}
.Login{
width:95%;
}
.txt_checkbox{
color:rgb(75, 74, 74);
}
.emptyFeild{
display: none;
}
.shortDesc{
text-align: center;
}
.btnOnCards{
width: 99%;
margin: auto;
padding-left: 10px ;
}
.btnOnCards-1,.btnOnCards-2{
width: 48%;
font-size: 15px;
padding:5px;
}
.ratingOnCards {
position:relative;
left: 0;
margin: 0;
}
.priceOnCards {
position:relative;
top: 0;
left: 0;
margin: 0;
}
#btnSearchTeachersPhone{
display: block;
}
#btnSearchTeachers{
display: none;
}
#btnCourseForumPhone{
display: block;
}
#btnCourseForum{
display: none;
}
.logcard {
display: none;
}
.imgcartoon{
display:none
}
.teacher_details_img{
margin: auto;
}
.mainimage{
height:280px;
}
.boxSearchInput{
max-height:380px ;
background-color: rgba(0, 0, 0, 0.77);
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
border-radius: 12px;
width: 90%;
margin: auto;
z-index: 99;
}
.findTeacherTitle{
display:none;
}
.findTeacherTitleForMobile{
display:block;
/* font-family: 'Comic Neue', cursive; */
font-size:1.3rem;
}
.desktop-desc {
display: none;
}
.mobile-desc{
display: block;
}
.banner__social-media {
list-style: none;
position: fixed;
bottom: 7px;
left: 0;
font-size: 20px;
z-index: 1000;
display: flex;
padding: 0;
}
/* ---------------------------------- */
.mainimage {
animation: anim_rotateOnX 4.2s infinite;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes anim_rotateOnX {
0% { transform: rotateX(0deg); }
25% { transform: rotateX(7deg); }
50% { transform: rotateX(0eg); }
75% { transform: rotateX(-7deg); }
100% { transform: rotateX(0deg); }
}
/* .mainimage {
animation: skew-x-shake 1.3s infinite;
}
@keyframes skew-x-shake {
0% { transform: skewX(-15deg); }
5% { transform: skewX(15deg); }
10% { transform: skewX(-15deg); }
15% { transform: skewX(15deg); }
20% { transform: skewX(0deg); }
100% { transform: skewX(0deg); }
} */
/* -------------------------------------- */
.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
/*==================================================
* Effect 1
* ===============================================*/
.effect1{
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}
/*==================================================
* Effect 2
* ===============================================*/
.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
/*==================================================
* Effect 3
* ===============================================*/
.effect3
{
position: relative;
}
.effect3:before
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
/*==================================================
* Effect 4
* ===============================================*/
.effect4
{
position: relative;
}
.effect4:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
right: 10px;
left: auto;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}
/*==================================================
* Effect 5
* ===============================================*/
.effect5
{
position: relative;
}
.effect5:before, .effect5:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 35px 20px #777;
-moz-box-shadow: 0 35px 20px #777;
box-shadow: 0 35px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.effect5:after
{
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
/*==================================================
* Effect 6
* ===============================================*/
.effect6
{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before, .effect6:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.effect6:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
/*==================================================
* Effect 7
* ===============================================*/
.effect7
{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:0;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.effect7:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
/*==================================================
* Effect 8
* ===============================================*/
.effect8
{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before, .effect8:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:10px;
bottom:10px;
left:0;
right:0;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.effect8:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
}