.bg{
	     background-image: linear-gradient(to left,#818284, #000000);
	        }
          .bg3{
		 background-image: linear-gradient(to right,#ebfaf8, #ffffff);
		    }			
          .bg1{
	     background-image: linear-gradient(to left,#818284, #000000);
	        }			
          .bg2{
	     background-image: linear-gradient(to top,#bdbec1, #ffffff);
	        }
			
			
			@supports (grid-area: auto) {
		
		.more 
		{
			cursor: pointer;
			color: #6781bf;
			font-weight: 600;
			user-select: none;
			-webkit-user-select:none;
			-moz-user-select:none;
			text-decoration:none;
		}

		.more:hover { color: #818284; }

	}

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

      

	  
      .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:#bdbec1;
color:#6781bf;

 }
 


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;
}

			 .card12 {
 display: block;
  position: relative;
  background-color: white;
  text-decoration: none;
  overflow: hidden;
  
 }
 .card12:hover{
    transition: all 0.9s ease-out;
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    top: -4px;
    background-color: #f2f8f9;
}

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

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

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

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

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

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


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

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

.scroll12 {
  -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;
}


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

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

.scroll6 {
  -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){
		
		
		.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;
        }    
			.menu-item {

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

		.menu-item: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-item:hover:after {
		  width: 95%;
		  left: 0;
		}
		
	}
	
		@media screen and (max-width: 768px){
			
			         	
					.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-item {

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

		.menu-item: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-item:hover:after {
		  width: 50%;
		  left: 0;
		}
		
				.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;
		}
		
		
		}