html{
	scroll-behavior:smooth;
}
div{
	margin:4px;
}

h4{
	font-size:19px;
	color:black;
}
label{
	font-size:18px;
}

input[type=text],input[type=email],input[type=number],input[type=password]{
    font-size: 15px;
	padding:10px;
}
.text-white{
	color: white !important;

}
@font-face {
font-family:hand_font;
src:url(hand_font.ttf);
}

@font-face {
	font-family:MyFont;
	src:url(OpenBaskerville-0.0.53.otf);
	}
	

@font-face {
font-family:MyFont1;
src: url(Summer.ttf);
}




@font-face {
	font-family:MyFont2;
	src: url(Letter_Cute.ttf);
	
	
	}
@media only screen and (min-width:992px){


body{
	font-family:Arial,helvetica,verdana,sans-serif;
	margin:0px;
}

h1{
	font-size:3em;
}
h3{
	font-size:2em;
}

p{color:black;
	font-size:18px;}
	blockquote{
	color:maroon;
	font-style:italic;
}
a:hover{
	color:black;

}
a:link{
	color:maroon;
}
a:visited{
	color:#0033ff;
}
a:active{
	color:maroon;
	
}

@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:10px;
	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)
}

.intro_first{
	font-family:MyFont1;
	margin-right: 1em;
	background-color: red;
	background-image: linear-gradient(45deg, #f3ec78, #af4261);
	background-size: 100%;
	background-repeat: repeat;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-background-clip: text;
	-moz-text-fill-color:transparent;
}

.first_services, .first_services p{
    color:white;
}
	
.task_bar h1{
	color:white;}




.cross-bar{
	color:white;
	font-size:4.5em;
	display:none;
	position:absolute;
	top:-18px;
	left:20%;
	display:none;
}


.welcome{
	height:auto;
	padding:5px;
	color:white;
	font-size:40px;
	position:absolute;
	top:-1em;
	left:10%;
	width:auto;
	font-family:MyFont1;
}



.welcome .logo img{

	width:50px;
	height:50px;
}



.webdev{
	padding:20px;
	position: relative;
}

#header1{
    background-color: transparent;
}

footer{
   
height:29em;
   
top: 0em;
   
margin-bottom: 2em!important;
}

.newsletter{
	width:30%;
	right:2%;
}

.card_shadow{
    width:4em;
    right:28%;
    transform:rotate(26deg);
}

.footer_body>div{
    width:22%;
}

.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: 20px;
    left:8%;
    top:1em;
    width:30%;
}
.contact_details1{
	width:100%;
	margin: 0;
	position:relative;
	top:5em;
	background-color: white;
	padding-bottom: 8em;
}
.contact_details2{
	display: flex;
	flex-direction: row;
	
	padding-bottom: 3em;   
}                       
                        
                                               
                        
    
.weball_pop_ups{
	position:fixed;
	top:40%;
	left:35%;
	width: 30%;
	height: auto;
	margin: auto;
	background-image:linear-gradient(rgb(255, 255, 255),rgb(255, 255, 255));
	z-index: 1;
	border-radius: 10px;
	padding:8px;
	font-size:22px;
	animation: pop_up 0.5s;
	-webkit-animation: pop_up 0.5s;
}

@keyframes pop_up {
	from {
		top:-20%;
	}
	to{
		top:40%;
	}
	
}
@-webkit-keyframes pop_up {
	from {
		top:-20%;
	}
	to{
		top:40%;
	}
	
}

.card_info{
	width:30%;
	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:30%;
	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));
}
.desktop_hide{
	display: none;
}
	
/*developer login style*/
.linear-border{
    top:0px;
    right:4px;
    padding: 2px;
    z-index: 99;
    position:fixed;
}
.dev_login>a{
    font-size: 20px;
}

.loading{
		
	width:10%;
	left:45%;
	
}
/*End of developer login*/
	
 .d_menu{
	width:auto;
	display:flex;
	flex-direction: row;
	padding: 1px;
	background-color: black;

}
.d-hide{
	display:none;
}
.d_menu_border{
	position: absolute;
	top: 66vh;
	animation:
	fadeout 1s linear;
	z-index: 10;
	right:5%;
	padding: 0px;
	border-radius: 3px;
	box-shadow: 1px 3px 4px rgb(51, 47, 47);
	background-image: linear-gradient(to bottom right, rgb(101, 189, 201),rgb(2, 0, 126),rgb(255, 118, 5));
}

@media only screen and (min-width:1150px){
	.d_menu_border{
		right:3%;
	}
	
}
#d_menu{
	position: fixed;
	top:0;
	right: 26%;
	z-index: 100;
}
.d_menu>a{
	color:white;
	font-size: 17px;
	font-weight: 100;
	/*border: 0.5px solid white;*/
	margin: 3px;
	font-family: sans-serif;
	padding: 1px;
	text-decoration: none;
	border-radius: 3px;
}
.d_menu>a:hover{
	color: rgb(245, 134, 7);
}
.d_menu>span{
color:white;
height:100%;
margin: auto;
font-size: 19px;
}

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

/*  Scrolling bars styles */
::-webkit-scrollbar{
    width: 13px;
	background-image: linear-gradient(white,rgba(76,140,170,0.94));
}

.services{
	width:80%;
	margin:auto;
	padding:10px;
	border:1px dotted black;
	border-radius:16px;
	background-image: linear-gradient(white,rgba(76,140,170,0.94));
	height:auto;
}

.services a{
	padding:5px;
	font-size: 18px;
	font-weight: bold;
}

.header{
    height:3.3em;
	z-index: 10;
}

.get_us{
    left: 10px;
    top: 10px;
    z-index: 99;
}
.get_us a{
 font-size: 15px;
}

.text-small{
    font-size: 13px!important;
}

.services-btn{
	
	margin:auto;
	font-size: 1.6em;
	border-radius:10px;
	color:white;
	font-weight:bold;
	border:0.5px solid #cccccc;
	box-shadow: 1px 1px 4px rgb(51, 50, 50);
	padding-top: 5px;
	padding-bottom: 5px;
}

.package_body li{
	font-size:14px;
	line-height: 19px;
}

.package_body i{
	font-size:16px;
}

.services-btn:hover{
	opacity:0.6;
}
.services-slides{
	padding:10px 0px 10px 0px;
	position:absolute;
	top:2em;
	left:20%;
	display:flex;
	flex-wrap:wrap;
	width:60%;
	border:1px solid #cccccc;
	background-color:rgba(250,255,255,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:50%;
	left:5%;
	color:black;
}
.btn-left>i{
	font-size:5em;
	color:black;
}
.btn-left:hover{
	opacity:0.5;
}.webdev .btn-right{
	position:absolute;
	top:50%;
	right:5%;
	color:black;
	
}

.name{
	width:60%;
	height:auto;
	position: absolute;
	top:26vh;
	left:10px;
	z-index: 1;
}
.btn-right>i{
	font-size:5em;
	color:black;
}
.btn-right:hover{
	opacity:0.5;
}




.userscore{
	color:red;
}
.typingname{
	font-size:3em;
	font-weight:bold;
	padding:0px;
	width:100%;
	margin:auto;
	height:2em;
	display:flex;
	flex-direction:row;

	
}
.lette{
	font-family:MyFont;
	color:linear-gradient(blue,red);
}

.letter{
	color: rgb(255, 255, 255);
	font-size:1em;
}

@keyframes letter{
	from{
	opacity:0;
	
	}
	to{
		opacity:1;
	}
}

@-webkit-keyframes letter{
	from{
		opacity:0;
		
	}
	to{
		opacity:1;
	}
} 


.services1 h3{
	text-align:center;
	font-family:MyFont;
	
}
.webdev .scroll{
position: absolute;
display: none;
right: 13%;
top: 2em;
animation:scroll infinite 0.5s;
-webkit-animation:scroll infinite 0.5s;

}
.scroll img{
	width:4em;
	
}
.scroll img:hover{
	opacity: 0.5;
}
@keyframes scroll{
	from{
	
	top:3em;
	}
	to{
		top:2em;
	}
}

@-webkit-keyframes scroll{
	from{
		top:3em;
		
	}
	to{
		top:2em;
	}
} 
.joy_pic{
opacity: 0.1;
position: absolute;
left:10%;
top:30%;
}
.danger{
	color:red;
	font-style: italic;
}

.logo{
position: absolute;
left:3px;
}

.typingname1 br,.typingname br{
	display: none;
	
}
.typingname1{
	width: 100%;
}

.logo img{
	height:4em;
	width:4em;
	border-radius:3px;
}
.joy_pic img{
	width:50em;
}
.services1{
	display:flex;
	flex-direction: row;
}
.services1>div{
border-radius: 10px;
border:2px dotted black;
	background-color: white;
	width:30%;
	margin: 10px;
	padding: 5px;
}
.Projects{
	border: #cccccc solid 0.5px;
	display:flex;
	flex-wrap: wrap;
	padding: 10px;
	align-items: flex-start;
}


/*Starter package*/
.packages{
	width:100%;
	flex-wrap:wrap;
 }
 age{
	 width:auto;
	 margin:5px auto 5px auto;
	 padding:0px 1px 10px 1px;
 }
 /*End*/

.Projects h4{
	width: 100%;
}
.project_card{
	width: 50%;
	margin: 1px 10px 1px 10px;
	padding: 1%;
	text-align: center;
	color: white;
	border-radius: 10px;
	top:0px;
	position:
	relative;
}
.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;
}

.choose p{
	font-size:18px;
}

.about .triangle{
    top:4.2em;
    left:47%;
    width:3.5em;
    height:3.5em;
    z-index:1;
}

.loading .loader{
   
    font-size:20px;
}
.scrolling{
    display: flex;
    flex-direction: row;
    padding-bottom: 3em;
}

   
.prices .choose{
	width:30%;
	margin-top: 3em;
}
.prices .package_header{
    font-size:22px;
}
	
.package .price{
   
    font-size:18px;
}
 .project_card>.notes_top{
	background-color:white;
	color: #e44800;
	padding: 3px 25px 3px 1px;
	font-size: 20px;
	position:absolute;
	top: 0;
	left: -5px;
	z-index: 1;
	width: 10;
	}
.project_card p{
	padding-top: 20px;
	color: white;
	/* position: absolute; */
	/* top: 20%; */
	-ms-transform: translateY(-50%);
	/* transform: translateY(-50%); */
	margin-bottom: 40px;
}
.Projects .p_img img {
    width: 29em !important;
    height: 19em;
}

.Projects img{
	margin:10px;
	height: auto;
	border-radius: 8px;
}


.Projects  .project_img{
	width:60%;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
 }
 #first_p{
	width:20%;

 }
 #second_p{
	width:20%;
 }
 
.p_img{
   width:46%;
   margin: auto;
}

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

.menu-bar{
	display:none;
}

.menu-drop-down{
	display:none;
}

.logo_pic{
    bottom:3em;
    left:5%;

}

.border_logo img{
    width: 10em;
    height:auto;
    border-radius:3px;
}


.greeting .left{
    width:15%;

}
.greeting .small_text{
    width: 85%;
}


.d_hide{
	display: none !important;
}

.logo_name{
	color: rgb(206, 206, 206) !important;
	font-size: 2.1em;
	opacity:1;
	z-index: 100;
	position: fixed;
	left:40%;
	top: 0px;

}

.float-left{
	float:left;
}

.services_package{
    flex-direction: row;
}

.top_color{
    background-image: linear-gradient(to right, rgb(40, 109, 143), rgba(15, 51, 70),rgba(27, 92, 122));

}
.fading{
	position: absolute;
	top: 9px;
	left:0px;
	width: 40em;
	height: 15em;
	background-image: linear-gradient(to right, transparent 5%, white 95%);
	z-index:10;
	border:2px black;
}

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

z-index: -1;
}

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


.services_package .bg-light{
    font-size: 1.5em;
}

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

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

}

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

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

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

.form-content{
    width:70%;
   
}

.quotation{
   
    top:5%;
}

.visit{
    position: absolute;
    bottom:4%;
  	right: 0%;
  	-ms-transform: translateX(-50%);
  	transform: translateX(-50%);
}

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

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

.google-reviews-container{
    width:70%;
}

.review-ref{

    font-size: 15px;
}

}