/* jssor slider loading skin oval css */

        .jssorl-oval img {
            animation-name: jssorl-oval;
            animation-duration: 1.2s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-oval {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }


        .jssorb051 .i {position:absolute;cursor:pointer;}
        .jssorb051 .i .b {fill:#fff;fill-opacity:0.5;stroke:#000;stroke-width:400;stroke-miterlimit:10;stroke-opacity:0.5;}
        .jssorb051 .i:hover .b {fill-opacity:.7;}
        .jssorb051 .iav .b {fill-opacity: 1;}
        .jssorb051 .i.idn {opacity:.3;}

        .jssora051 {display:block;position:absolute;cursor:pointer;}
        .jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
        .jssora051:hover {opacity:.8;}
        .jssora051.jssora051dn {opacity:.5;}
        .jssora051.jssora051ds {opacity:.3;pointer-events:none;}
		
		
		@media (max-width:767px) {
			#logosize {
			width: 150px;
				height: 58px;
			}
			}

			@media (min-width:768px) {
				#logosize {
			width: 150px;
				height: 58px;
				}
			}

			@media (min-width:992px) {
				#logosize {
					width: 150px;
				height: 58px;
				}
			}

			@media (min-width:1200px) {
				#logosize{
					width: 200px;
				height: 78px;
				}
			}
		
		
		
							/*keyframe animations*/
					.first {
					-webkit-animation: bannermove 260s linear infinite;
						   -moz-animation: bannermove 260s linear infinite;
							-ms-animation: bannermove 260s linear infinite;
							 -o-animation: bannermove 260s linear infinite;
								animation: bannermove 260s linear infinite;
					}

							@keyframes "bannermove" {
					 0% {
						margin-left: 0px;
					 }
					 100% {
						margin-left: -2125px;
					 }

					}

					@-moz-keyframes bannermove {
					 0% {
					   margin-left: 0px;
					 }
					 100% {
					   margin-left: -2125px;
					 }

					}

					@-webkit-keyframes "bannermove" {
					 0% {
					   margin-left: 0px;
					 }
					 100% {
					   margin-left: -2125px;
					 }

					}

					@-ms-keyframes "bannermove" {
					 0% {
					   margin-left: 0px;
					 }
					 100% {
					   margin-left: -2125px;
					 }

					}

					@-o-keyframes "bannermove" {
					 0% {
					   margin-left: 0px;
					 }
					 100% {
					   margin-left: -2125px;
					 }

						}
														.photobanner {
								height: 233px;
								width: 3550px;
								margin-bottom: 80px;
							}

							.photobanner img {
								-webkit-transition: all 0.5s ease;
								-moz-transition: all 0.5s ease;
								-o-transition: all 0.5s ease;
								-ms-transition: all 0.5s ease;
								transition: all 0.5s ease;
							}

							.photobanner img:hover {
								-webkit-transform: scale(1.1);
								-moz-transform: scale(1.1);
								-o-transform: scale(1.1);
								-ms-transform: scale(1.1);
								transform: scale(1.1);
								cursor: pointer;

								-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
								-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
								box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
							}																
									
		
	
	
	
	
	
		a:hover, a:focus {
		color: #2a6496;
		text-decoration: none;
		}
		.square-service-block{
		position:relative;
		overflow:hidden;
		margin:15px auto;
		}
		.square-service-block a {
		background-color: #6fc9e1;
		border-radius: 5px;
		display: block;
		padding: 60px 20px;
		text-align: center;
		width: 100%;
		}
		.square-service-block a:hover{
		background-color: rgb(32, 47, 60);
		border-radius: 5px;
		}

		.ssb-icon {
		color: #fff;
		display: inline-block;
		font-size: 28px;
		margin: 0 0 20px;
		}

		h2.ssb-title {
		color: #fff;
		font-size: 20px;
		font-weight: 200;
		margin:0;
		padding:0;
		text-transform: uppercase;
		}
		
		
		
				h5{
				text-transform:uppercase;
				font-size:18px;
				 font-weight: bold;
				
				}	
					
					.circle {
			 
			  display: inline-block;
			  padding: 16px;
			  text-align: center;
			  
			  width: 330px;
			  height: 330px;
			  border-radius: 50%;
			  border: 2px solid #000;
			}

			.paragraph
			{
						
			}

			.circle::before,
			.circle::after {
			  position: absolute;
			  z-index: -1;
			  display: block;
			  content: '';
			}
			.circle,
			.circle::before,
			.circle::after {
			  -webkit-box-sizing: border-box;
			  -moz-box-sizing: border-box;
			  box-sizing: border-box;
			  -webkit-transition: all .5s;
			  transition: all .5s;
			}

			.circle {
			  position: relative;
			  z-index: 2;
			  background-color: #fff;
			  
			  
			  line-height: 21px;
			  overflow: hidden;
			}

			.circle:hover {
			  color: #fff;
			}
			.circle::after {
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			  border-radius: 50%;
			  -webkit-transform: scale(.5);
			  transform: scale(.5);
			}
			.circle:hover::after {
			  background: #202f3c;
			  color:#fff;
			  border-radius: 50%;
			  -webkit-transform: scale(.9);
			  transform: scale(.9);
			    -webkit-transform:scale(1.25); /* Safari and Chrome */
					-moz-transform:scale(1.25); /* Firefox */
					-ms-transform:scale(1.25); /* IE 9 */
					-o-transform:scale(1.25); /* Opera */
					 transform:scale(1.25);
							}

			.circle1 {
		       
			  border: 4px solid #2bbfe8;
			}

			.circle2 {
			 
			  border: 4px solid #cf2a1f;
			}

			.circle3 {
			  
			  border: 4px solid #f6d30e;
			}
			.circle4 {
			  
			  border: 4px solid #333333;
			}
			
			
			
			input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
						font-size: 0.75em;
						color: #999;
						top: -5px;
						-webkit-transition: all 0.225s ease;
						transition: all 0.225s ease;
					}

					.styled-input {
						float: left;
						width: 293px;
						margin: 1rem 0;
						position: relative;
						border-radius: 4px;
					}

					@media only screen and (max-width: 768px){
						.styled-input {
							width:100%;
						}
					}

					.styled-input label {
						color: #999;
						padding: 1.3rem 30px 1rem 30px;
						position: absolute;
						top: 10px;
						left: 0;
						-webkit-transition: all 0.25s ease;
						transition: all 0.25s ease;
						pointer-events: none;
					}

					.styled-input.wide { 
						width: 650px;
						max-width: 100%;
					}

					input,
					textarea {
						padding: 30px;
						border: 0;
						width: 100%;
						font-size: 1rem;
						background-color: #ffffff;
						color: #000000;
						border-radius: 4px;
					}

					input:focus,
					textarea:focus { outline: 0; }

					input:focus ~ span,
					textarea:focus ~ span {
						width: 100%;
						-webkit-transition: all 0.075s ease;
						transition: all 0.075s ease;
					}

					textarea {
						width: 100%;
						min-height: 15em;
					}

					.input-container {
						width: 650px;
						max-width: 100%;
						margin: 20px auto 25px auto;
					}

					.submit-btn {
						float: right;
						padding: 7px 35px;
						border-radius: 60px;
						display: inline-block;
						background-color: #6fc9e1;
						color: #111e28d1;
						font-size: 18px;
						cursor: pointer;
						box-shadow: 0 2px 5px 0 rgba(0,0,0,0.06),
								  0 2px 10px 0 rgba(0,0,0,0.07);
						-webkit-transition: all 300ms ease;
						transition: all 300ms ease;
					}

					.submit-btn:hover {
						transform: translateY(1px);
						box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10),
								  0 1px 1px 0 rgba(0,0,0,0.09);
					}

					@media (max-width: 768px) {
						.submit-btn {
							width:100%;
							float: none;
							text-align:center;
						}
					}

					input[type=checkbox] + label {
					  color: #ccc;
					  font-style: italic;
					} 

					input[type=checkbox]:checked + label {
					  color: #f00;
					  font-style: normal;
					}
			
			
			
			
		
						#theImage {
							
							background:url("image1.png") no-repeat;
						}
						/************Socail Media*********/
				/*
    Auther: Abdelrhman Said
*/

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");




.wrapper {
  display: inline-flex;
  list-style: none;
}

.wrapper .icon {
  position: relative;
  background: #ffffff;
  border-radius: 50%;
  padding: 15px;
  margin: 10px;
  width: 80px;
  height: 80px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip {
  position: absolute;
  top: 0;
  font-size: 14px;
  background: #ffffff;
  color: #ffffff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #ffffff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
  background: #1877F2;
  color: #ffffff;
}

.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before {
  background: #1DA1F2;
  color: #ffffff;
}

.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
  background: #E4405F;
  color: #ffffff;
}

.wrapper .github:hover,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip::before {
  background: #333333;
  color: #ffffff;
}

.wrapper .youtube:hover,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip::before {
  background: #14a835;
  color: #ffffff;
}

/**************************portfolio******************/
.accordian {
	width: 805px;
   height: 320px;
	overflow: hidden;
	
	/*Time for some styling*/
	margin: 50px auto;
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

/*A small hack to prevent flickering on some browsers*/
.accordian ul {
	width: 1200px;
	/*This will give ample space to the last item to move
	instead of falling down/flickering during hovers.*/
}

.accordian li {
	position: relative;
	display: block;
	width: 160px;
	float: left;
	
	border-left: 1px solid #888;
	
	box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	
	/*Transitions to give animation effect*/
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	/*If you hover on the images now you should be able to 
	see the basic accordian*/
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 640px;}


.accordian li img {
	display: block;
}

/*Image title styles*/
.image_title {
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	left: 0; bottom: 0;	
width: 640px;	

}
.image_title a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 20px;
	font-size: 16px;
}