html{
	scroll-behavior:smooth;
}
body{
	background-color:white;
}
@media only screen and (min-width:600px) and (max-width:992px){


	body{
		font-family:Arial,helvetica,verdana,sans-serif;
		margin:0px;
	}
	
	h1{
		font-size:2.5em;
	}
	h3{
		font-size:1.5em;
	}
	
	p{color:black;
		font-size:16px;}
		blockquote{
		color:maroon;
		font-style:italic;
	}

input[type=text],input[type=email],input[type=number],input[type=password]{
    font-size: 15px;
	padding:13px;
}

textarea{
    
    font-size: 15px;
}

	a:hover{
		color:black;
	
	}
	a:link{
		color:maroon;
	}
	a:visited{
		color:#0033ff;
	}
	a:active{
		color:maroon;
		
	}
	#all-content{
		
		position:relative;
		margin:0;
		height:auto;
	}
	.all-content{
		
		position:relative;
		margin:0;
		height:auto;
		opacity:0.5;
		left:20%;
		width:120%;
		animation:allcontent 1s;
		-webkit-animation:allcontent 1s;
	}
	
	@keyframes allcontent{
		from{
			left:0;
		}
		to{
			left:20%;
		}
	}
	
	@-webkit-keyframes allcontent{
		from{
			left:0;
		}
		to{
			left:20%;
		}
	}
	
	
	.task_bar1{
		left:20%;
		animation:allcontent 1s;
		-webkit-animation:allcontent 1s;
	}
	
	
	.task_bar{
		background-color:blue;
		margin:0;
		width:100%;
		padding:7px;
		position:fixed;
		top:-0.2em;
		text-align:center;
		z-index:1;
		height:5em;
		left:0;
		background-image:linear-gradient(to bottom right,hsl(239, 97%, 46%) ,red)}
		
	.task_bar h1{
		color:white;}
	
	
	 .menu-bar{
		width:8%;
		height:auto;
		border-radius:5px;
		background-color:none;
		position:fixed;
		top:1.5em;
		left:1%;
		z-index:100;
	}
		
	.bar{
		margin:5px;
		height:4px ;
		background-color: white;
	}
	
	
	.menu-drop-down hr{
		margin:0px 0px 0px -40px;
		border: 0.5px solid white;
		opacity: 0.4;
	}
	.menu-drop-down{
		display:none;
		padding:8px;
		position:fixed;
		top:-2px;
	    left: -2px;
		width:40%;
		height:100%;
		z-index:1;
		animation:menu-slide 1s;
		-webkit-animation:menu-slide 1s;
		background-image: linear-gradient(white,grey);
		box-shadow:10px 0px 10px #cccccc;
	}
	
.menu-drop-down .search{
	display:flex;
	flex-direction:row;
	width:18em;
	margin-top: 2em;
	margin-left: auto;
	margin-right: auto;
	
}
.search input{
	width:10em;
}

.search select{
	width:6em;
}

.search i{
	background-color:rgb(19, 167, 167);
	color: white;
	padding:3px;
}

.search i{
	width:8em;
}
	.menu-content  div a{
		color:black;
		padding:3px;
		background-color: inherit;
		text-decoration:none;
		font-weight:bold;
		font-size:19px;
	}
	.manu_link{
		padding-top: 17px;
		margin-left: 27px;
	} 
	.menu-content>div{
		width:7em;
	}
	.menu-content div a:hover{
		opacity:0.5;
	}
	
	@keyframes menu-slide{
		from{
			left:-15em;
			opacity:0;
		}
		to{
			left:0em;
			opacity:1;
		}
	}
	
	@-webkit-keyframes menu-slide{
		from{
			left:-15em;
			opacity:0;
		}
		to{
			left:0em;
			opacity:1;
		}
	} 
	.decoration{
	
		padding: 20px;
		border-radius: 20%;
		background-color: white;
	}
	
	.cross-bar{
		color:white;
		font-size:4.5em;
		display:none;
		position:absolute;
		top:-18px;
		left:20%;
		display:none;
	}
	.menu-cancel{
		position:absolute;
		top:0em;
		right:0em;
		color:red;
		font-size:2.5em;
		font-weight:bold;
		display:none;
		
	}
	
	
	.welcome{
		height:auto;
		padding:5px;
		color:white;
		font-size:35px;
		position:absolute;
		top:-15px;
		left:10%;
		width:auto;
		font-family:MyFont1;
	}
	
.intro_first{
	margin-right: 12px;
	background-color: red;
	background-image: linear-gradient(45deg, white, #af4261);
	background-size: 100%;
	background-repeat: repeat;
}
	
	.welcome .logo img{
	
		width:50px;
		height:50px;
	}
	
	
.name{
	width:100%;
	height:auto;
	position: absolute;
	top:40px;
	left:6%;
	z-index: 1;
}
	
	.webdev{
		padding:12px;
	}
	.loading{
		
		width:15%;
		left:40%;
		
	}
	
.loading .loader{
   
    font-size:18px;
}
.header{
    height:4em;
	z-index: 10;
}
	
.container-back{
	width: 100%;
 }
.services_section {
	top:0em;
	}
	.contact_details{
		width:100%;
		position:relative;
		margin: 0;
		top: 0em;
		background-color: white;
		background-image: linear-gradient(white,white);
	}
	
.found{
    font-size: 18px;
    left:8%;
    top:1em;
    width:30%;
}
	
.footer_body>div{
    width:22%;
}
.first_services, .first_services p{
    color:black;
}
	.contact_details .contact_details1{
		width:100%;
		position:relative;
		top:4em;
		margin: 0;
		background-color: white;
		padding-bottom: 3em;
		
		
	}
	.contact_details .contact_details1 .contact_details2{
		display: flex;
		flex-wrap:wrap;
		padding-bottom: 3em;   
	}                       
							
												   
		
	
	.weball_pop_ups{
		position:fixed;
		top:40%;
		left:20%;
		width: 60%;
		height: auto;
		margin: auto;
		background-image:linear-gradient(rgb(255, 255, 255),rgb(255, 255, 255));
		z-index: 1;
		border-radius: 15px;
		font-size:19px;
		animation: pop_up 0.5s;
		-webkit-animation: pop_up 0.6s;
		border:1px solid rgb(43, 42, 42);
		border-radius:8px;
	}
	
	@keyframes pop_up {
		from {
			top:-20%;
		}
		to{
			top:40%;
		}
		
	}
	@-webkit-keyframes pop_up {
		from {
			top:-20%;
		}
		to{
			top:40%;
		}
		
	}
	
	.card_info{
		width:46%;
		padding:5px;
		border:1px solid grey;
		border-radius: 8px;
		margin: 3px 10px 3px 10px;
		background-image:linear-gradient(white,rgba(76,140,170,0.94));
	}
	.contact_details2 .sendmessage{
		width:90%;
		padding:5px;
		border:1px solid grey;
		border-radius: 8px;
		margin-top:5px;
		margin-left: auto;
		margin-right: auto;
		background-image:linear-gradient(white,rgba(76,140,170,0.94));
	}
	.tablet_hide{
		display: none;
	}
	
	.contact_details2 em{
		text-decoration: underline;
		font-weight: bold;
		font-size:larger;
		margin: 3px 0px 3px 0px;
	}
	
	.contact_details2 i{
		font-size: 1em;
	}
	.contact_details2 li{
		border:0.5px solid grey;
		background-color: honeydew;
		border-radius: 3px;
		width:10em;
		margin: auto;
		margin-top:5px;
	}
	.contact_details2 li:hover{
		opacity:0.5;
	}
	
	
	
.newsletter{
	width:50%;
	right:2%;
}

footer{
   
    height:31em;
    top:11em;
}

#header1{
    background-color: transparent;
}

.card_shadow{
    width:4em;
    left:45.9%;
    transform:rotate(26deg);
}
	
	
	.services{
		width:99%;
		margin:auto;
		padding:10px;
		border:1px dotted black;
		border-radius:16px;
		background-image: linear-gradient(white,rgba(76,140,170,0.94));
		height:40em;
		overflow:scroll;
	}
	
	
	/*Hide scrolling bars for Chrome, safari and opera*/
	.services::-webkit-scrollbar{display:none;}
	/*hide scrolling for IE, Edge and Firefox */
	.services{
		-ms-overflow-style:none;
		scrollbar-width:none;
	}
	
/*  Scrolling bars styles */
::-webkit-scrollbar{
    width: 10px;
	background-color: #afe7f1;
}


.logo_pic{
    top:3em;
    right:1%;

}
.border_logo img{
    width: 4em;
    height:auto;
    border-radius:3px;
}
	
/*developer login style*/
.linear-border{
    top:0px;
    right:4px;
    padding: 2px;
	z-index: 100;
	position:fixed;
 
}

.text-small{
    font-size: 13px!important;
}
.dev_login>a{
    font-size: 20px;
}
/*End of developer login*/
	
	
	.services-btn{
	margin:auto;
	font-size:1.5em;
	border-radius:8px;
	color:white;
	font-weight:bold;
	border:0.5px solid #cccccc;
	box-shadow: 1px 1px 4px rgb(51, 50, 50);
		
	}
	
.get_us{
    left: 5px;
    top: 0em;
	z-index: 100;

}
.get_us a{
 font-size: 16px;
}
.services a{
	padding:5px;
	font-size: 18px;
	font-weight: bold;
}
	.services-btn:hover{
		opacity:0.6;
	}
	.services-slides{
		width:95%;
		border:0.5px solid #cccccc;
		display:flex;
	flex-wrap:wrap;
	border:1px solid #cccccc;
	background-color:rgba(250,255,255,1);
	margin:auto;
	padding:1px 2px 1px 2px;
	position:fixed;
	position:sticky;
	position:-webkit-sticky;
	top:-4px;
	left:-1px;

	z-index: 1;
	
		
	}
	
.services-slides>div{
	width:30%;
}
	.offset{
		font-size:1em;
		font-weight:bold;
		margin:4px;
		opacity:0.7;
		color:rgba(106,117,46,0.83);
	}
	.offset:hover{
		font-size:1.5em;
		color:rgba(0,0,255,1);
	}
	.webdev .btn-left{
		position:absolute;
		top:30%;
		left:2%;
		color:black;
		opacity:0.8;
	}
	.btn-left>i{
		font-size:3em;
		color:black;
	}
	.btn-left:hover{
		opacity:0.5;
	}.webdev .btn-right{
		position:absolute;
		top:30%;
		right:2%;
		color:black;
		opacity:0.8;
	}
	.btn-right>i{
		font-size:3em;
		color:black;
	}
	.btn-right:hover{
		opacity:0.5;
	}


	
	.userscore{
		color:red;
	}
	.typingname{
		font-size:2em;
		font-weight:bold;
		padding:0px;
		width:80%;
		margin:auto;
		height:2em;
		display:flex;
		flex-direction:row;
	
		
	}
	.lette{
		font-family:MyFont;
		color:linear-gradient(blue,red);
	}
	
	.letter{
		font-size:1em;
		color: rgb(224, 123, 6);
	}
	

	.review-ref{

		font-size: 14px;
	}
	
	.services1 h3{
		text-align:center;
		font-family:MyFont;
		
	}
	.webdev .scroll{
	position: absolute;
	right: 8%;
	top: 2em;
	animation:scroll infinite 0.5s;
	-webkit-animation:scroll infinite 0.5s;
	
	}
	.scroll img{
		width:3em;
		
	}
	.scroll img:hover{
		opacity: 0.5;
	}
	@keyframes scroll{
		from{
		
		top:3em;
		}
		to{
			top:2em;
		}
	}
	
	@-webkit-keyframes scroll{
		from{
			top:3em;
			
		}
		to{
			top:2em;
		}
	} 
	
	.danger{
		color:red;
		font-style: italic;
	}
	
	.logo{
	position: absolute;
	right:1%;
	margin: auto;
	}
	
	.logo img{
		height:4em;
		width:4em;
		border-radius:3px;
	}
	.services1{
		display:flex;
		flex-wrap: wrap;
	}
	.services1>div{
	border-radius: 10px;
	border:2px dotted black;
		background-color: white;
		width:46%;
		margin: 5px;
		padding: 5px;
	}
	#ecommerce{
		width:100%;
	}
	.Projects  img{
		 border:black solid 0.5px;
		margin:10px;
		height: 15em;
		border-radius: 8px;
	}
	
	
/*Starter package*/
.packages{
	width:100%;
	flex-wrap:wrap;
 }
 .package{
	 width:45%;
	 margin:5px 5px 5px 10px;
 }
 	
.package .price{
   
    font-size:18px;
}
 /*End*/
.project_card p{
	color: white;
}
	
.Projects{
	border: #cccccc solid 0.5px;
	display:flex;
	flex-wrap: wrap;
	padding: 5px;
}

.project_card>.notes_top{ 
	background-color:white;
	color: #e44800;
	padding: 3px 25px 3px 1px;
	font-size: 20px;
	position:absolute;
	top: 13px;
	transform:rotate(-56deg);
	left: -25px;
	z-index: 0.99;
	width:7em;
	}

.project_card .notes{ 
	background-color:white;
	color: #e44800;
	padding: 3px;
	font-size: 14px;
	font-family: hand_font;
	border-radius:3px;
	position:absolute;
	bottom:2px;
	left: 5px;
	z-index: 0.99;
	}

.project_card{
	width: 80%;
	margin: 1px auto 1px auto;
	padding: 10px 4px 3px 70px;
	text-align: center;
	color: white;
	border-radius: 10px;
	top:0px;
	position:relative;
	margin-top: 15px;
}
	
	
.Projects  .project_img{
	width:70%;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
 }
	 #first_p{
		width:20%;
	
	 }
	 
 #second_p{
	width:20%;
 } 
	.p_img{
	   width:100%;
	   margin: auto;
	}
	.Projects div{
	
		padding-bottom: 1em;
	}
	.Projects div img:hover{
	
		transform: scale(1.05);
	}
	.services1 li{
		text-align:left;
		font-size:20px;
		font-weight:bold;
		color:rgba(106,117,46,0.83);
	}
	
	.services12{
		width:90%;
		margin:auto;
		padding: 10px;
		margin-top: 5em;
	
	}
	.box{
		border:1px solid rgba(207, 164, 164, 0.8)
	}
	.dtp_icon{
		font-size: 30px;
		color:rgba(182, 143, 85, 0.83)
	}
	.dtp_icon img{
		width: 60px;
		height: auto;
	}
	
	.menu-icon img{
		width:50%;
		margin:5px;
		}
		
.prices .package_header{
    font-size:17px;
}
		
.choose p{
	font-size:16px;
}

.about .triangle{
    top: 2.4em;
    z-index:1;
    left:46%;
     width:3.2em;
       height: 3.4em;
 
}

   
.prices .choose{
	width:30%;
}

.scrolling{	
    display: flex;
    flex-direction: row;
}
	.menu-icon i{
		
		font-size: 2em;
		}
		.menu-icon img:hover{
			transform: scale(1.05);
		}
	
		.important-info{
			font-size:15px;
			color:rgb(192, 70, 70);
		}
	
	
	table{
		margin-left: auto;
		margin-right: auto;
	}
	
	
	.text-danger{
		color:red;
	}
	
	.menu-content{
		display: flex;
		flex-direction: row;
	}

	.Projects .p_img img{
		width: 37em !important;
		height: 24em;
	
	}

	
.greeting .left{
    width:15%;

}
.greeting .small_text{
    width:40%;

}
.d_hide{
	display: none !important;
}

.p-service {
    font-size: 15px;   
}

.logo_name{
	color: rgb(206, 206, 206) !important;
	font-size: 1.5em;

}

.services_package{
    flex-direction: row;
}

.top_color{
    background-image: linear-gradient(to right, transparent, #1b5c7af0,rgba(12, 69, 95, 0.94));

}

.container-back{
    position: absolute;
    top:3.2em;
    left:0px;

z-index: -1;
}
.services_package .bg-light{
    font-size: 1.3em;
}

.about-steps{
    display:flex;
    flex-direction: row;

}


.about-steps>div{
	
	width:30%;
	
	}

.graphic-design div{
    width:20%;
}

.quotation{
   
    width:90%;
    left:5%;
    border-radius: 10px;
   
}

.close-quotation{
    font-size:35px;
}

.form-content{
    width:90%;
   
}

.quotation{
  
    top:5%;
}

.quote_list input, .quote_list label {
    font-size: 20px;
}

.h-2{
    font-size: 25px;
}
}