@font-face {
  font-family: "Cairo";
  src: url("CairoFont/Cairo Regular 400.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Cairo";
  src: url("CairoFont/Cairo Bold 700.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

.hand{
	cursor: pointer;
}

.text-blue{
	color: #045aa7;
}
		body{
			direction: rtl;
			font-family: 'Cairo' !important;
		}
		.navbar,#minute-for-you,#site-map{
			direction: rtl;
		}
		.map-list, .cat h5{
			text-align: right;
			list-style-type: none;
		}
		.navbar .nav-link{
			color: #045aa7;
		}
		.header-text{
			/*padding: 5px;*/
			text-shadow: 5px 5px 5px #eef;
		}
		.text-shad{
			 text-shadow: 0px 0px 3px #ccc;
		}
		.box-shad{
			 box-shadow: 0px 20px 20px #eee;
		}
		/* Container holding the image and the text
			.banner-cont {
			  position: relative;
			  text-align: center;
			  background: url(images/banner.jpeg) no-repeat;
			  background-size: cover;
			  background-position: center;
			}
			fixed
			.overlay{
				background: rgba(38, 57, 88, 0.39);
			}
		*/

		/*index.html*/
		/* Centered news cards */
		.centered-left {
		  transform:translate(10%, -105%) rotateZ(-0deg);
		  transition: transform 1s ease-in-out;
		  z-index: 1;
		}
		.centered-left:hover {
		  transform:translate(10%, -105%) scale(2);
		  z-index: 4;
		  cursor: pointer;
		}
		.centered {
		  transform: translate(-20%, -30%) rotateZ(-10deg);
		  transition: transform 1s ease-in-out;
		  z-index: 2;
		}
		.centered:hover{
		  transform: translate(-20%, -30%) scale(2);
		  z-index: 4;
		  cursor: pointer;
		}
		.centered-right {
		  transform: translate(-60%, 50%) rotateZ(-20deg);
		  transition: transform 1s ease-in-out;
		  z-index: 3;
		}
		.centered-right:hover {
		  transform: translate(-60%, 50%) scale(2);
		  z-index: 4;
		  cursor: pointer;
		}
		/*vider for you*/
		.mfy-cup {
			position: relative;	
		}
		.mfy-cup img{
			position: absolute;
		    width: 5em;
		    height: 11em;
		    bottom: -30px;
		    right: -40px;
		}
		/*index.html fade anim*/
		.bubble {
		  transform: scale(1);
		  transition: transform 1s ease-in-out;
		}
		.bubble.animate{
		  /*transform: scale(3);*/
		  transform: rotate(90deg);
		}
		.fade{
		  opacity: 1;
		}
		.box-limit{
			max-width: 200px;
			max-height: 200px;
		}
		/*index.html cards, courses.php cards*/
		#q-news .card ,#course-poster .card,.card{
		    font-weight: 400;
		    border: 0;
		}
		.card.card-cascade.wider {
		    background-color: transparent;
		    -webkit-box-shadow: none;
		    box-shadow: none;
		    /*box-shadow: 0px 20px 35px rgba(0,0,0,0.2);*/
		}
		.card.card-cascade.wider .view.view-cascade {
		    z-index: 2;
		}
		.card.card-cascade .view.view-cascade {
		    border-radius: .25rem;
		    -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.08), 0 4px 15px 0 rgba(0,0,0,0.05);
		    box-shadow: 0 5px 11px 0 rgba(0,0,0,0.08), 0 4px 15px 0 rgba(0,0,0,0.05);
		}
		.view {
		    position: relative;
		    overflow: hidden;
		    cursor: default;
		}
		.card.card-cascade.wider .card-body.card-body-cascade {
		    z-index: 1;
		    margin-right: 4%;
		    margin-left: 4%;
		    background: #fff;
		    border-radius: 0 0 .25rem .25rem;
		    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
		    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
		}
		/*courses.php cards*/
		#courses-index .card-img-top,#q-news .card-img-top
		{
			max-width: 10rem;
		}
		#course-poster .card-body {
		    padding-top: 1.5rem;
		    padding-bottom: 1.5rem;
		    border-radius: 0 !important;
		}
		#course-poster .card-cascade .card-body-cascade .card-title{
			color: #385898;
		}
		/*quizzes.php quiz.php*/
		.overlay-back{
	    border-color: #17a2b8;
	    color: #ececec;
	    background-image: linear-gradient(45deg, #17a2b8, transparent);
	    background-position: 75%;
	    background-size: 200%;
	    -webkit-transition: background 300ms ease-in-out;
	    transition: background 300ms ease-in-out;
	}
	.overlay-back:hover{
		background-position: 0%;
		cursor: pointer;
	}


/*scroll in mywebsite*/
    ::-webkit-scrollbar{
      width: 3px;
      height: 3px;
    }
    ::-webkit-scrollbar-track{
      box-shadow: inset 0 0 5px lightblue;
      border-radius: 2px;
    }
    ::-webkit-scrollbar-thumb{
      background: lightblue;
      border-radius: 2px;
    }
    ::-webkit-scrollbar-thumb:hover{
      background: gray;
    }