@charset "utf-8";
/* CSS Document */

*{
	margin: 0;
	padding: 0;
}
.container{
	align-content: center;
	justify-content: center;
	margin-right:5%;
	margin-left:5%;
}
body{
	background-image: url("images/bg.jpg");
	background-color: #0F0C0C;
	background-repeat: no-repeat;
	background-size: 90%;
	min-width:70%;
	background-position: 50% 0%;
}
nav{
	position: fixed!important;
  	width: 100%!important;
	justify-content: center!important;
	top: 0!important;
	left:0!important;
	z-index: 1;

}
button{
		background-color: transparent!important;
	}
	.navbar-toggler-icon{
		border-color: white!important;
	}
	.overlay{
		color: black!important;
	}

.bg-body-tertiary{
	background-color: #0F0C0C!important;
	
}
.nav-link,h1,h2,p,label,h4,h5{
	color:#7BCDEF!important;
	font-weight:450!important;
}
 .nav-link, h4, label, p{
	font-family: "Poppins", sans-serif!important;
  	font-style: normal!important;
	font-weight:300!important;
}
h1,h2,h5, #hireme{
	font-family: "Poppins", sans-serif!important;
  	font-style: normal!important;
	font-weight:400!important;
}
a{
	text-decoration: none;
}
label{
	font-size:0.9em!important;
}
h5{
	font-size:1.5em;
}
.nav-link:hover{

	font-weight:500!important;
	color:#D7EDF3!important;
}
#logo{
	height:28px;
	padding-left:6vw;
}
h1{
	font-size: clamp(2.5rem, 6vw, 6.2rem);
}
h2{
	font-size: clamp(2.5rem, 4vw, 4.2rem);
}
.landingheader{
	margin-bottom:5vw;
}

#hireme{
	background-color:#7D5880;
  	border: none;
	font-size: clamp(1.3rem, 2.3vw, 3.1rem);
	border-radius: 50px;
  	color:#D7EDF3;
  	padding: 0.5% 2.5% 0.5% 2.5%;
	margin-bottom: 0.1vw;
	max-width: 5%;
	height: auto;
	cursor: pointer;
	align-content: center;
	text-align: center;
}

#hireme:hover{
	background-color:#E70040;
	padding: 11px 33px 11px 33px;
	color:white;
	font-weight:600;
}
.bg{

	position:absolute;
    z-index:0;
}
.landingpage{

	height: 600px;
	width:100%;
	padding-top: 1%;
	margin-top: 7%;
	margin-bottom: 45vw;
	background-color: transparent;
	text-align: center;
	box-sizing: border-box;
}

.aboutMe{
	display:flex;
	margin:0% 0% 13% 0%;
}

#aboutme2{
	width: 60%;
	height:5%;
	background-color: transparent;
	text-align: left;
	padding-top:5%;
}
.aside-left{
	width: 60%;
	background-color: transparent;
	text-align: left;
	box-sizing: border-box;
	margin-right: 5%;
}
p{
	font-size: clamp(1.3rem,1.4vw, 1.5rem);
}

.img{
	width: 40%;
	height: 500px;
	background-color: transparent;
	text-align: left;
	box-sizing: border-box;	
	justify-content: flex-start;
	margin-left:5%;
}
#img{
	width:auto;
	height:100%;
}
.paintings{
	justify-content: center;
}
#paintings{
	height:20%;
	width:100%;
	left:0;
}
.works1{
	margin-top:5%;
	margin-bottom: 5%;
	display:flex;
	width:100%;
	overflow-x:scroll;
}
.secondRow2{
	margin-right:2.3%;
}
.works2{
	margin-bottom: 15%;
	display:flex;
	width:100%;
	overflow-x:scroll;
}
.firstRow1{
	margin-right:2.3%;
}
#asset5, #asset6, #asset7, #asset8{
	height:400px;
	border-radius: 15px;
}
.commission{
	font-size:1.4rem;
}

.services{
	margin-bottom: 5%;
	display: flex;
	width:100%;
	overflow-x:scroll;
}
::-webkit-scrollbar {
    display: none;
}
.imgs{
	margin:1%;
	margin-top:5%;
	border-radius: 40px;
	
}
#img1, #img2, #img3{
	
	margin-bottom: 6%;
	height:380px; 
	border-radius: 15px;
}


#request{
	background-color:#757DAF;
  	border: none;
	font-size: 1em;
	border-radius: 50px;
  	color: white!important;
  	padding: 20px 30px 20px 30px;
	max-width: 400px;
	height: auto;
	cursor: pointer;
	align-content: center;
	text-align: center;
}
#request:hover{
	background-color:#E70040;
	padding: 21px 32px 21px 32px;
}

.request{
	margin-bottom: 15%;
}
.blogheader{
	margin-bottom: 5%;
}
.accordion{
	margin-bottom:15%;
	z-index:0!important;
}

.header, .accordion-body, .accordion-header{
	color:#532E2E!important;
}
.header, .accordion-header{
	font-weight:500!important;
}
.accordion-body{
	padding: 4% 10%;
}
.accordion-button{
	z-index:0!important;
}

.accordion-item, button{
background-color:#C5C7DC!important;
color: #C5C7DC!important;
}

.contactHeader{
	text-align: center;
	margin-bottom: 10%;
}

.contact{
	display:flex;
	padding-left:2vw;
}
.socials{
	display:flex;
	width:45%;
}
.socials1{
	padding-top:1vw;
	width:10%;
	margin-right:5%;

}
#ph, #ma, #ig, #be{
	height:50px;
}
.socials2{
	width: 35%;
	padding-top:3%;
	color:#7BCDEF!important;
}
.icons{
	margin-bottom:10%;
	
}

#info1,#info2, #info3, #info4{
	color:#7BCDEF!important;
}
#info1{
margin-bottom:3.9vw;	
}
#info2{
margin-bottom:clamp(3rem, 3.5vw, 3.6rem);	
}
#info6{
margin-bottom:clamp(3rem, 3.6vw, 3.6rem);		
}
#info3:hover{
	cursor:pointer;
	font-weight:500;
	color:#D7EDF3!important;
	
}
#info4:hover{
	cursor:pointer;
	font-weight:500;
	color:#D7EDF3!important;
}
.form{
	width:50%;

}
::placeholder {
  color: #757DAF!important;
}
label{
	font-size: 1.1em!important;
}

#submit{
	background-color:#757DAF;
  	border: none;
	font-size: 0.8em;
	border-radius: 50px;
  	color: white!important;
  	padding: 10px 50px 10px 50px;
	max-width: 500px;
	height: auto;
	cursor: pointer;
	align-content: center;
	text-align: center;
}
#submit:hover{
	background-color:#E70040;
	padding: 11px 52px 12px 51px;
}

.submit{
	margin-bottom: 30%;
	justify-content: center;
	padding-left:37%;
}
h4{
	font-size:1.5em;
}
.text{
	margin-left:1%;
	margin-right:1%;
}

.footer{
	font-size:0.6em;
	opacity: 0.7;
	display:flex;
	margin-bottom:3%;
	text-align: center;
	justify-content: center;
}
.footericons{
	display:flex;
	margin-left:1%;
}
.ficons{
	margin-left:10%;
	margin-right:15%;
	opacity: 0.9;
	justify-content: center;
	padding-bottom:50%;
	
}
#ig2, #be2{
	height:20px;
}
		@media only screen and (max-width:1000px){
			button{
						background-color: transparent!important;
					}

			.landingpage{
				margin-bottom:10%;
			}
			.contact{
				display:block;
			}
			#info1,#info2, #info3, #info4{
			font-size:1em!important;
		}
			.socials2{
				padding-left:1%;
				width:100%;
			}
			.socials{
				width:100%;
				height:auto;
				margin-bottom:15%;
			}
			#info1{
				margin-bottom:4vw;
			}
			
			#info6{
			margin-bottom:3.8vw;	
			}
			

			#ig2, #be2{
			height:15px;
		}
			.form{
				width:100%;
			}

		}
		@media only screen and (max-width:800px){
		
	
			button{
				background-color: transparent!important;
			}

			#hireme{
				padding: 2% 4% 2% 4%;
			}
			.aboutMe{
				display:block;
				margin-bottom: 0%;
			}
			.img{
			height:400px;
			background-color: transparent;
			text-align: left;
			box-sizing: border-box;	
			justify-content: flex-start;
		}
			#aboutme2{
			width: 89%;
			height:50%;
			background-color: transparent;
			text-align: left;
			padding-top:5%;
		}

			#info5{
				padding-top:1.8vw;
			}
			.comission{
				font-size:1em;
			}
		}



		@media only screen and (max-width:600px){
			body{
			background-image: url("images/bg1.jpg");
			background-color: #0F0C0C;
			background-repeat: no-repeat;
			background-size: 90%;
			min-height: 30%;
			background-position: 50% 0%;
			}
			#logo{
				height:20px;
				padding-left:3vw;
			}
			button{
				background-color: transparent!important;
			}

			.aboutMe{
				display:block;
				margin-bottom: 15%;
			}
			#hireme:hover{
				padding: 2.3% 3.9% 2.4% 3.9%;
			}
			#img{
				height: 360px;
			}
			.img{
			height:400px;
			background-color: transparent;
			text-align: left;
			box-sizing: border-box;	
			justify-content: flex-start;
		}
			#aboutme2{
			width: 89%;
			height:50%;
			background-color: transparent;
			text-align: left;
			padding-top:5%;
		}


			.landingpage{
				padding-top: 15%;
				padding-right:5%;
				margin-bottom: 2%;
			}


			p{
			font-size: 1em;
		}
			#asset5, #asset6, #asset7, #asset8{
			height:250px;
		}
		.firstRow1{
			margin-right:5%;
		}
		.secondRow2{
			margin-right:5%;
		}
			.works1, .works2{
				width:100%;
			}
			.works2{
				margin-bottom:30%;
			}
		#img1, #img2, #img3{
			height:200px; 
			border-radius: 15px;
		}
			.comission{
				font-size:1em;
			}
			
			#request{
			background-color:#757DAF;
			border: none;
			font-size: 0.7em;
			border-radius: 50px;
			color: white!important;
			padding: 15px 25px 15px 25px;
			max-width: 300px;
			height: auto;
			cursor: pointer;
			align-content: center;
			text-align: center;
		}
			#request:hover{
			background-color:#E70040;
			padding: 16px 27px 16px 27px;
		}
			.request{
				margin-bottom:30%;
			}
			.blog{
				margin-bottom:30%;
			}
			.form{
			width:95%;
		}
			.submit{
			margin-bottom: 30%;
			justify-content: center;
			padding-left:0%;
			text-align:center;
		}
			.contact{
				display:block;
			}
			#info1,#info2, #info3, #info4{
			font-size:1em!important;
		}
			
			.socials2{
				padding-left:1%;
				width:100%;
			}
			.socials{
				width:100%;
			}
			#ph, #ma, #ig, #be{
				height:43px;
			}
			#info1{
				margin-bottom:9vw;
			}
			#info2{
				margin-bottom:8vw;
			}
			#info3{
				margin-bottom:50vw;
			}
			
			#info5{
				padding-top:3.4vw;
			}
			#ig2, #be2{
			height:15px;
		}
			.submit{
				margin-bottom:30%;
			}
			h4{
			font-size:1.1em;
			}
		
		}