@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
		   
          .bg2{
	     background-image: linear-gradient(to bottom,#ffffff, #f7f7f7);
	        }
			
			         .bg3{
	     background-image: linear-gradient(to right,#bdbec1, #ffffff);
	        }
			
			
			@supports (grid-area: auto) {
		
		.more 
		{
			cursor: pointer;
			color: #8f001c;
			font-weight: 600;
			user-select: none;
			-webkit-user-select:none;
			-moz-user-select:none;
			text-decoration:none;
		}

		.more:hover { color: #000000; }

	}

			
			
			.waleed1:hover.waleed2 {
                      display: block;
					  font-weight:bold;
					  }
      .title{
		
	  }
	  .title:hover {
            text-shadow: 1px 1px 2px #ffffff, 0 0 1em #ffffff, 0 0 0.2em #ffffff;	  }

      

	  
      .title1{
		color:white;
	  }
	  .title1:hover {
            text-shadow: 1px 1px 2px #f2f8f9, 0 0 1em #f2f8f9, 0 0 0.2em black;	
             text-decoration:none;
			 color:#f2f8f9;
			}



 .div{
 background-color:#bdbec1;
color:white;
 }

 .div1{
	     transition: all 0.9s ease-out;
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    top: -4px;
 background-color:#191919;
color:#ffa200;

 }
 


div.polaroid {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

.scroll1 {
  height: 120px;
  overflow-y: scroll;
  cursor:all-scroll;
}
/* width */
.scroll1::-webkit-scrollbar {
  width: 3px;
}

/* Track */
.scroll1::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 0px;
}
 
/* Handle */
.scroll1::-webkit-scrollbar-thumb {
  background: #8f001c; 
}

/* Handle on hover */
.scroll1::-webkit-scrollbar-thumb:hover {
  background: #1a1a1a; 
}

.scroll1 {
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor:all-scroll;
}




.scroll2 {
  height: 320px;
  overflow-y: scroll;
  cursor:all-scroll;
}
/* width */
.scroll2::-webkit-scrollbar {
  width: 3px;
}

/* Track */
.scroll2::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 0px;
}
 
/* Handle */
.scroll2::-webkit-scrollbar-thumb {
  background: #deff02; 
}

/* Handle on hover */
.scroll2::-webkit-scrollbar-thumb:hover {
  background: #deff02; 
}

.scroll2 {
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor:all-scroll;
}



.scroll3 {
  height: 120px;
  overflow-y: scroll;
  cursor:all-scroll;
}

.scroll3::-webkit-scrollbar {
    display: none;
	cursor:all-scroll;
}

.scroll3 {
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor:all-scroll;
}

.scroll4 {
  height: 120px;
  overflow-y: scroll;
  cursor:all-scroll;
}

.scroll4::-webkit-scrollbar {
    display: none;
	cursor:all-scroll;
}

.scroll4 {
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor:all-scroll;
}

.scroll5 {
  height: 120px;
  overflow-y: scroll;
  cursor:all-scroll;
}

.scroll5::-webkit-scrollbar {
    display: none;
	cursor:all-scroll;
}

.scroll5 {
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor:all-scroll;
}

		.cardapp{
display: block;
  position: relative;
  background-color: white;
  text-decoration: none;
  overflow: hidden;
  /*border: 1px solid white;*/
  color:black;
  
 }
 .cardapp:hover{
    transition: all 0.9s ease-out;
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    top: -4px;
   /*border: 1px solid #cccccc; */
    background-color: #bdbec1;
	color:white;
	
} 


.cardapp2{
 display: block;
  position: relative;
  background-color: white;
  text-decoration: none;
  overflow: hidden;
  /*border: 1px solid white;*/
  color:black;
  
 }
 .cardapp2:hover{
    transition: all 0.9s ease-out;
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    top: -4px;
   /*border: 1px solid #cccccc; */
    background-color:#6781bf;
	color:white;
}

.cardapp3{
 display: block;
  position: relative;
  background-color: white;
  text-decoration: none;
  overflow: hidden;
  /*border: 1px solid white;*/
  color:black;
  
 }
 .cardapp3:hover{
       transition: all 0.9s ease-out;
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    top: -4px;
   /*border: 1px solid #cccccc; */
    background-color: #6781bf;
	color:white;
}
			
	@media screen and (min-width: 768px){
									.readtran1{
							
width:362px;
height:240px;
margin-top:-10px;
color:#ffffff;
opacity:0.7;
background-color:#111111;
padding:10px 10px;	

	}
	
							.readtran1:hover{
							
width:360px;
height:240px;
margin-top:-20px;
color:#ffffff;
  -ms-transform: scale(1.01); /* IE 9 */
  -webkit-transform: scale(1.01); /* Safari 3-8 */
  transform: scale(1.05);
  transition: 1.2s ease;
background-color:#101010;
padding:10px 10px;	
border-bottom-left-radius:15px;
border-top-left-radius:15px;
border-top-right-radius:15px;
	}
				   .Scrollup {
  cursor: pointer;
  position: absolute;
  width: auto;
    height:auto;
  padding: 14px;
  margin-left:20px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
    border-radius: 10px 10px 10px 10px;
      background-color:#292929;

}
.Scrollup:hover{
  background-color: #292929;
    border-radius: 100%;
	  margin-left:20px;
    height:auto;
	}
									 .card12 {
 display: block;
  position: relative;
  background-color: #4C4C4C;
  text-decoration: none;
  overflow: hidden;
  	color:#000000;
  height:350px;
  
 }
 .card12:hover{
    transition: all 0.9s ease-out;
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    top: -4px;
	color:#ffffff;
    background-color: #000000;
}
		
							 .card13 {
 display: block;
  position: relative;
  background-color: black;
  text-decoration: none;
  overflow: hidden;
  	color:#ffffff;
  height:350px;
  
 }
 .card13:hover{
    transition: all 0.9s ease-out;
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    top: -4px;
	color:#ffffff;
    background-color: #191919;
}
	
 .boxfirst{
 color:white;	
 }
 .boxfirst:hover{
 color:#87CEEB ;	
 }
	
	.hover {
  position: relative;
  margin: 0 auto;
  text-align: center;
  width: 60%;
  transition: transform 300ms ease-in-out;
  transition: 600ms ease-in-out;

}

.text-box h3 {
  margin: 0 auto;
  font-family: 'Raleway', sans-serif;
  font-size: 3rem;
  opacity:0.6;
  color: #87CEEB    ;
    background: #000000;
  display: block;
  padding: 1em;
border-top-right-radius:50%;
border-bottom-left-radius:50%;
}
.text-box:hover h3 {
  margin: 0 auto;
  font-family: 'Raleway', sans-serif;
  font-size: 3rem;
	  color: #87CEEB;
    background: #000000     ;
  display: block;
  padding: 1em;
}

.hover:hover {
  transform: scale(1.1, 1.1);
}
		
		.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 3;
  bottom: 0;
  left: 3;
  right:3;
  font-weight:bold;
  border-radius:15px;
  height: 89.3%;
  width: 92.2%;
  opacity: 0;
  transition: .5s ease;
  background-color: #000000;
}

.overlay:hover {
  opacity: 0.5;
}

.text {
  color: white;
  font-size:28px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
		
				   .scrollico{
			 margin-top:-10px  
		   }
		
		.scrollup{
		margin-top:-20px;
		}
		.ClientsCarousel1{
		margin-right:-70px;
		}
        .ClientsCarousel{
		margin-left:-70px;
		}
		
				.bottomcard{
		margin-bottom:-100px;
		margin-top:220px;
		margin-left:0px;
		}	
		.topcard{
		margin-top:-620px;
		margin-left:510px;
		}	
		.approach{
		margin-left:-250px;
		margin-top:55px;
		}
		.imgab{
			margin-left:50px
		}
		
					   .wweeb.dropdown:hover .dropbtn {
					     background-image: linear-gradient(to left,#ffffff , #ffffff);

					 color:black;
                      } 
						   .wweeb:hover, .dropdown:hover .dropbtn {
					     background-image: linear-gradient(to left,#ffffff , #ffffff);

					 color:black;
                      } 
                .dropdown:hover .dropdown-content {
                   display: block;
                      }
					  
        .headersize{
		font-size:44px
		}
		.dot{
		margin-bottom:-50px;
		}
		.hslide{
		height:670px;
		}
        .pslider1{
            font-size: 28px;
        }
        .pslider2{
            font-size: 28px;
        }
        .pslider3{
            font-size: 28px;
            text-shadow: 2px 2px 20px black;
        }
        .imgslider1{
            width: 350px;
            border-radius: 2px;
        }
        .imgslider2{
            width: 350px;
            border-radius: 2px;
        }    
		
		
		.textbold{
			
		}
		.textbold:hover{
			font-weight:bold;
		}
		    
			.menu-item {
  
			position: relative;
			color: #800026;
			letter-spacing: 2px;
		}

		.menu-item:after {
		  content: "";
		  position: absolute;
		  width: 0%;
		  height: 3px;
			background: #800026;
		  transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		  margin: 24px 0;
		  right: 0;
		  border-radius: 100px;
		}
		.menu-item:hover:after {
		  font-weight:900px;
		  width: 95%;
		  left: 0;
		}
		
		
	}
	
		@media screen and (max-width: 768px){
											.readtran1{
							
width:100%;
margin-bottom:20px;
position:center;
height:240px;
margin-top:-10px;
border: 1px solid #111111;
color:#ffffff;
background-color:#111111;
padding:10px 10px;	
border-bottom-left-radius:15px;
border-top-left-radius:15px;
border-top-right-radius:15px;
	}
	
							.readtran1:hover{
							
width:100%;
height:240px;
position:center;
margin-top:-10px;
border: 1px solid #101010;
color:#ffffff;
  -ms-transform: scale(1.01); /* IE 9 */
  -webkit-transform: scale(1.01); /* Safari 3-8 */
  transform: scale(1.05);
  transition: 1.2s ease;
background-color:#101010;
padding:10px 10px;	
border-bottom-left-radius:15px;
border-top-left-radius:15px;
border-top-right-radius:15px;
	}
					   .Scrollup {
  cursor: pointer;
  position: absolute;
  width: auto;
    height:auto;
  padding: 14px;
  margin-left:180px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
    border-radius: 10px 10px 10px 10px;
      background-color:#292929;

}
.Scrollup:hover{
  background-color: #292929;
    border-radius: 100%;
	  margin-left:20px;
    height:auto;
	}
									 .card13 {
 display: block;
  position: relative;
  background-color: white;
  text-decoration: none;
  overflow: hidden;
  	color:#000000;
  height:375px;
  
 }
 .card13:hover{
    transition: all 0.9s ease-out;
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    top: -4px;
	color:#000000;
    background-color: #ffffff;
}
			
					.text-box h3 {
display:none;}
			
			.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 3;
  bottom: 0;
  left: 3;
  right:3;
  height: 93%;
  width: 91%;
  opacity: 0;
  transition: .5s ease;
  background-color: #000000;
}

.overlay:hover {
  opacity: 0.5;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
			
					   .scrollico{
			 margin-top:-30px  
		   }		
					.bottomcard{
		             margin-bottom:-100px;
		              }
			
					   .wweeb.dropdown:hover .dropbtn {
					     background-image: linear-gradient(to left,#ffffff , #ffffff);

					 color:black;
                      } 
						   .wweeb:hover, .dropdown:hover .dropbtn {
					     background-image: linear-gradient(to left,#ffffff , #ffffff);

					 color:black;
                      } 
                .dropdown:hover .dropdown-content {
                   display: block;
                      }
			
				.menu-itemComm {

			position: relative;
			color: #333;
			letter-spacing: 1px;
		  font-weight: 500;
		}

		.menu-itemComm:after {
		  content: "";
		  position: absolute;
		  width: 0%;
		  height: 3px;
			background: #6781bf;
		  transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		  margin: 24px 0;
		  right: 0;
		  border-radius: 100px;
		}
		.menu-itemComm:hover:after {
		  width: 67%;
		  left: 0;
		}

	.menu-itemcon {

			position: relative;
			color: #333;
			letter-spacing: 1px;
		  font-weight: 500;
		}

		.menu-itemcon:after {
		  content: "";
		  position: absolute;
		  width: 0%;
		  height: 3px;
			background: #6781bf;
		  transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		  margin: 24px 0;
		  right: 0;
		  border-radius: 100px;
		}
		.menu-itemcon:hover:after {
		  width: 29%;
		  left: 0;
		}
		
		.menu-itemabus:after {
		  content: "";
		  position: absolute;
		  width: 0%;
		  height: 3px;
			background: #6781bf;
		  transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		  margin: 24px 0;
		  right: 0;
		  border-radius: 100px;
		}
		.menu-itemabus:hover:after {
		  width: 25%;
		  left: 0;
		}
		
				.menu-itempart:after {
		  content: "";
		  position: absolute;
		  width: 0%;
		  height: 3px;
			background: #6781bf;
		  transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		  margin: 24px 0;
		  right: 0;
		  border-radius: 100px;
		}
		.menu-itempart:hover:after {
		  width: 33%;
		  left: 0;
		}
		
				.menu-itemaud:after {
		  content: "";
		  position: absolute;
		  width: 0%;
		  height: 3px;
			background: #6781bf;
		  transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		  margin: 24px 0;
		  right: 0;
		  border-radius: 100px;
		}
		.menu-itemaud:hover:after {
		  width: 36%;
		  left: 0;
		}
		
					.menu-itemsol:after {
		  content: "";
		  position: absolute;
		  width: 0%;
		  height: 3px;
			background: #6781bf;
		  transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		  margin: 24px 0;
		  right: 0;
		  border-radius: 100px;
		}
		.menu-itemsol:hover:after {
		  width: 38%;
		  left: 0;
		}
		
		
						.menu-itemsec:after {
		  content: "";
		  position: absolute;
		  width: 0%;
		  height: 3px;
			background: #6781bf;
		  transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		  margin: 24px 0;
		  right: 0;
		  border-radius: 100px;
		}
		.menu-itemsec:hover:after {
		  width: 55%;
		  left: 0;
		}
		
							.menu-itemcomm2:after {
		  content: "";
		  position: absolute;
		  width: 0%;
		  height: 3px;
			background: #6781bf;
		  transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		  margin: 24px 0;
		  right: 0;
		  border-radius: 100px;
		}
		.menu-itemcomm2:hover:after {
		  width: 45%;
		  left: 0;
		}
		
		
		}