@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

html {
	font-size: 16px;
}
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body{
	font-family:"Inter", sans-serif;
	overflow-x: hidden;
}

/*Canvas section*/
.container{
	width:90%;
   margin: auto;
}
.main{
	display: flex;
	justify-content: space-between;
	align-items: center;
	
}
.canvas img{
	margin-top:20px;
	margin-bottom: 20px;
	width:80%;
}

.nav ul li{
	display: inline;
	font-weight: bold;
	font-size: 15px;
	letter-spacing: 2px;
	margin-left: 30px;
	padding-top: 40px;
}
/*Welcoming section*/
.container1{
	width: 100%;
	margin: auto;
}
.back{
     background-image:url('images/bgpro2.jpg');
     height: 500px;
	background-position: center;
	background-size: cover;
}
 .back h1{
	color: whitesmoke;
	text-align: center;
	padding-top: 100px;
	font-size: 70px;
}
.back p{
	text-align: center;
	padding-top: 20px;
	color: white;
	letter-spacing: 3px;
	font-size: 20px;
	line-height: 30px;
}
/*Single & three pics*/
.container{
	width: 90%;
	margin: auto;
}
.single h1{
	text-align: center;
	margin-top: 70px;
	letter-spacing: 3px;
	color: black;
}
span{
	color:lightgreen;
}

.single p{
	text-align: center;
	color: gray;
	font-size: 19px;
	letter-spacing: 1px;
	margin-top: 10px;
}

.pic img{
	margin-top: 70px;
}
.computer span{
	color: black;
	margin-right:110px;

}
.computer h3{
	color: black;
	margin-left:5px;
	margin-top: 20px;
	margin-bottom: 10px;
}
.computer p{
	color: gray;
	font-size:15px;
	
	text-align: left;
	line-height: 2em;
  

	
}
.pic{
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}
/*hills background section*/
.hill{
 	background-image:url('images/bgpro5.jpg');
   height: 500px;
   width: 100%;
	background-position: center;
	background-size: cover;
}
.container2{
	width:80%;
	margin: auto;
}
.four{
	display: flex;
	justify-content: space-between;
	padding-top: 90px;
}
.four i{
	font-size: 50px;
	color:white;
	align-items: center;
}
.four i:hover{
color: green;
}
.four h1{
   color: white;
   margin-top: 10px;
   font-size:50px;
}
.four p{
   color: white;
   margin-top: 10px;
   font-size:20px;
   letter-spacing:2px;
}

/*Single 1 section*/

.single1 h1{
	text-align: center;
	margin-top: 60px;
	color: black;
}
.single1 p{
	text-align: center;
	color: gray;
	font-size: 19px;
	margin-top: 10px;
	margin-bottom: 30px;

}

/*makeup section*/
.our_works{
	display: grid;
	grid-template-columns: auto auto auto auto;
	
}
.our_works img{
	width: 100%;
	height: 170px;
	object-fit: cover;
	margin-top:20px;
}
.makeup h3{
    margin-top: 20px;
    margin-bottom: 10px;
    color: black;
}
.makeup span{
   color: gray;
   margin-top: 30px;
   margin-bottom: 20px;
}
/*.makeup img :hover{
	background-color: grey;

}*/

/*Team section*/

.team img{

	width:50%;
	height: 300px;
	border-radius: 10px;

}
.team{
	display: flex;
	margin-top: 40px;
}
.title{
   margin-left: 30px;
   margin-top: 40px;


}
.title span{
	margin-top:50px;
	color: gray;
}
.two{
	display: flex;
	justify-content: space-between;
}
.team_1{
	display: flex;
}
.two_1{
	display: flex;
	justify-content: space-between;
}
.team_1 img{

	width:100%;
	height: 300px;
	border-radius: 10px;
	margin-top: 50px;
	object-fit: cover;

}
.title_1{
   margin-left: 30px;
   margin-top: 94px;

}
.title_1 span{
	margin-top:-50px;
	color: gray;
}
.title ul li {
	color: white;
	font-size: 20px;
	border-radius: 10px;
}
.Socialmedia ul li {
	display:inline-block;
	margin-top: 30px;

}
.Socialmedia ul li a{
   background-color:#e6e6eec2 ;
	border-radius:50px;
   padding:10px 10px 10px 10px;
}
.title_1 ul li {
	color: white;
	font-size: 20px;
	border-radius: 10px;
}
/*Skill section*/
.Skill{
	text-align: center;
	margin-top: 100px;
	font-size: 20px;
}
/*circles section*/
/*.circle{
	display: flex;
	justify-content: space-between;
	margin-top:20px;
	font-size: 25px;
	margin-bottom: 70px;
}*/

/*Chill section*/
.Chill{
 	background-image:url('images/13.jpg');
   height: 200px;
   width: 100%;
	background-position: center;
	background-size: cover;
}
.Chill h1{
	text-align: center;
	font-size: 25px;
	color:aliceblue;
	padding-top: 90px;

}

/*Nine icons section*/
.smallcircles{
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
.nineicon i{
	background-color: #13e598 ;
	border-radius: 50%;
	padding: 18px 18px;
	align-items: center;
	font-size:30px;
	color: white;
	text-align: center;

}
.nineicon i:hover{
	background-color:#363b39 ;
	outline: 6px double #363b39 ;
	

}


.content h3{
	margin-top: 40px;
	color: black;
	
}
.content p{
	margin-top:20px;
	line-height:30px;
	color: gray;

}
.box{
	border: 1px solid white;
	padding: 20px 10px;
	text-align: center;
}

/*Three Section*/


.three{
	display: flex;
	justify-content: space-between;

}
.bg1{
	background-color:whitesmoke;
	border: 1px solid whitesmoke;
	padding: 10px 70px ;
	height:600px;
}
.bg1 p{
   margin-top: 30px; 
   margin-bottom: 10px;
}
.bg1 h2{
   margin-bottom: 40px;
}
.bg1 h1{
	margin-bottom: 50px;
}
.month span{
   color: grey;
   font-size: 20px;
   margin-bottom:70px;
}
.bg2{
	background-color:whitesmoke;
	border: 1px solid whitesmoke;
	padding: 10px 70px;
	height:650px;
}
.bg2 p{
   margin-top: 30px; 
   margin-bottom: 10px;
}
.bg2 h2{
   margin-bottom: 40px;
}
.bg2 h1{
	margin-bottom: 50px;
}
.month span{
   color: grey;
   font-size: 20px;
   margin-bottom: 50px;
}
.bg3{
	background-color:whitesmoke;
	border: 1px solid whitesmoke;
	padding: 10px 70px ;
	height: 700px;

}
.bg3 p{
   margin-top: 30px; 
   margin-bottom: 10px;
}
.bg3 h2{
   margin-bottom: 40px;
}
.bg3 h1{
	margin-bottom: 50px;
}
.month span{
   color: grey;
   font-size: 20px;
   margin-bottom: 50px;
}
.options ul li{
	display: block;
	margin-bottom: 25px;
	

}
.options li{
	margin-left: -2px;

}
.options li i{
   color:#13e598;
   font-size:20px;
}
.options li{
	font-size: 18px;
	margin-top: 10px;
}   
 .options span{
	color: grey;
	font-size: 17px;
}
.bg1 button1{
	background-color:blue;
	border-radius: 10px;
   font-size: 20px;
	color: white;
	border: none;
	padding: 10px 20px 10px 20px;
	
}
.bg2 button2{
	background-color:red;
	border-radius: 10px;
   font-size: 20px;
	color: white;
	border: none;
	padding: 10px 20px 10px 20px;
	
}

.bg3 button3{
	background-color:green;
	border-radius: 10px;
   font-size: 20px;
	color: white;
	border: none;
	padding: 10px 20px 10px 20px;

}

/*background section*/

.sentence{
	background-image:url('images/bgpro2.jpg');
	height: 400px;
	width: 100%;
	margin-top: 80px;
}
.both{	
	display:flex;
	justify-content: space-evenly;
}

.text{
	text-align: center;
}
.text h2{
	color:white;
	margin-top:70px;
}
.text p{
	color:white;
	margin-top:20px;
}
.text h4{
	color:white;
	margin-top:70px;
}

/*Map section*/

.google{
	display: flex;
	justify-content: space-between;
	
}
.map{
	margin-left: 20px;
}
.send h1{
	color: black;
}
.anu input{
	margin-bottom: 5px;
	padding: 10px 5px 10px 5px;
	border: 1px solid grey;
	border-radius: 5px;
	width: 100%;
}
.anu{
	width: 67%;
}
.anu1 {
	margin-bottom: 5px;
	width: 100%;
	padding: 10px 5px 10px 5px;
	border: 1px solid grey;
	border-radius: 5px;

}
.anu2 input{
	margin-bottom: 5px;
   padding: 10px 5px 10px 5px;
	border: 1px solid grey;
	border-radius: 5px;

}

.slip input{
	width: 100%;
}

.anu2 select{
	margin-bottom: 5px;
	padding: 10px 5px 10px 5px;
	border: 1px solid grey;
	border-radius: 5px;
	width: 130%;
}
.send button{
	background-color: green;
	padding: 10px 10px 10px 10px;
	border-radius: 5px;
	border: none;
	color: white;
	margin-top: 40px;
   font-size: 20px;
}
.paper{
	display:flex;
	gap: 5px;
}
.slip{
	display:flex;
	gap:5px;
	
}
.full textarea{
	width: 100%;
	border-radius: 5px;
}

/*fourIcons section*/

.four{
	display: flex;
	justify-content: space-between;
}
 .location{
 	text-align: center;
 	border: 1px solid whitesmoke;
    padding: 10px 10px;
    align-items: center;

 }
.location i{
	font-size: 50px;
	color:#13e598;
	
}
.location h5{
	font-size: 20px;
	margin-top: 40px;

}
.location p{
	color: gray;
	margin-top: 10px;
	
} 


/*listsection*/

.lastcolor{
	background-color: #343A40;
	height: 400px;
	
	margin-top: 80px;
}
.flex{
	display: flex;
	justify-content: space-between;
	padding-top: 50px;
	padding-left: 70px;
}

.item1 p,h1{
	color: white;
	margin-bottom: 20px;
}
.item1 h4,h3{
	color: white;
	
}
.item2{
	margin-right:70px;
}
.item2 ul li{
    display:block;
}
.item2 h4{
	color: white;
	margin-bottom: 20px;
	margin-top: 10px;
	text-align: center;
	margin-right: 45px;
}
.item2 ul li i{
	color: white;
}
.item2 ul li{
	color: white;
	margin-top:10px;
	
}
.item3{
	margin-right:70px;
}
.item3 h4{

	color: white;
	margin-bottom: 20px;
	margin-top: 10px;
	text-align: center;
	margin-right: 45px;

}
.item3 h5{
	color: white;
}
.item3 p{
	color: white;
	margin-top: 5px;
	margin-bottom: 20px;
}
.NUM{
	display: flex;
	justify-content: space-between;
}
.item4{
	margin-right:70px;
}
.item4  span{
   font-size:30px;
   color: white;
}
.item4 p{
	color: grey;
	margin-bottom: 30px;
}
.subscribe h5{
	color: white;
	margin-bottom: 30px;
}
.let {
	display: inline;

}
.let i{
	background-color:black;
	padding: 5px 10px 5px 10px;
	border-radius: 5px;
	font-size:18px;
	color: grey;
	border: 1px solid grey;
}
.let input{
	padding: 10px 10px 8px 10px;
	background-color:black;
	color:grey;
	border: 1px solid grey;
	border-radius: 5px;
	margin-left:-5px;
}
.let button{
	padding: 10px 10px 8px 10px;
	background-color:green;
	color:white;
	border: 1px solid grey;
	border-radius: 5px;
	margin-left: -5px;
	font-size: 15px;
}
.fb {
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
}
.like {
	display:flex;


}
.like i{
	background-color:blue;
	padding: 10px 10px;
	border-radius: 5px;
	color:white;
	font-size:25px;
	margin-right:10px;
}
.in strong{
	color: white;
	display: block;
}
.in{
	color: gray;
}
.like1 {
	display:flex;


}
.like1 i{
	background-color:orange;
	padding: 8px 10px 8px 10px;
	border-radius: 5px;
	color:white;
	font-size:25px;
	margin-right:10px;
}

/*footer*/


.section7{
	display: flex;
	justify-content: space-between;
	padding: 30px 0px;
	
}
.section7-0 p{
	color:#717376;
  padding: 8px 0px;
}
.section7-1{
    text-align: right;
	color:#717376;
}	

.bg6{
	background-color: #2a2e33;
}
.icons1{
	padding: 10px 0px;
	letter-spacing: 8px;
}
.icons2 i{
	gap: 15px;
	margin-bottom: 40px;
}
.section7-0 span{
  border-bottom:1px dashed #717376;
  padding-bottom: 5px;
  color:white;
  font-size: 12px;

}

/***************Responsive**************/
/**Mobile*/


@media only screen and (min-width:300px) and (max-width:470px){


.main{
	flex-direction: column;
}
.nav ul li{
	display: block;
	margin-bottom: 20px;
}

.back{
	width: 100%;
	height:600px;
}

.pic{
/*	display: block;*/
flex-direction: column;
}

.computer img{
	width: 100%;
}
.four{
/*	display: block;*/
flex-direction: column;
	margin-top: 40px;
	text-align: center;
}
.hill{
	height: 900px;
}

.our_works{
	display: block;
}

.two{
	display:block;
	width: 100%;
}
.team{
/*	display: block;*/
flex-direction: column;
}
.team img{
/*	margin-left: 40px;*/
	margin-top: 20px;
	width: 100%;
	object-fit: cover;
}
.two_1{
	display: block;
}
.team_1{
	display: block;
	width: 100%;
/*	margin-left: 40px;*/
}
.team-1 img{
	margin-left: 40px;
	width: 100%;
}
.Chill h1{
	width: 102%;
	padding-top:48px;

}
.Chill{
	margin-top: -5px;
}
.smallcircles{
/*	display: block;*/
    flex-direction: column;
}


.three{
	display: block;
	width: 107%;

}
.bg1{
	margin-bottom: 10px;
	height:450px;
}
.bg2{
	margin-bottom: 10px;
	height:550px;
}
.bg3{
	margin-bottom: 10px;
	height:610px;
}

.google{
	flex-direction:column;
}
iframe{
	width: 100%;
	height: 240px;
}
.lastcolor{
	display: block;
}
/*.flex{
	display: block;
}*/
.NUM{
	display: block;
}
/*.fb{
	display:flex;
}*/
/*.section7{
	display: block;
}*/

.both,.paper,.slip,.flex,.section7,.fb{
	flex-direction: column;	

}
.bigpic{
	position: relative;
}
.text{
	margin-top: -150px;
	z-index: 2;
}
.text h2{
	color: white;
	margin: 0px;

}
.text p{
	color: white;
	margin: 0px;
}
.text h4{
	color: white;
	margin: 0px;

}
.slip .anu2{
	width: 50%;
}
.section7{
	z-index: 1;
	color: red;
}
.lastcolor{
	height: 100%;
}






}


/*************************Tab Responsive*********************/


@media only screen and (min-width:471px) and (max-width:991px){

.main{
	flex-direction: column;
}
.nav ul li{
	display: block;
	margin-bottom: 20px;
}

.back{
	width: 100%;
	height:600px;
}

.pic{
/*	display: block;*/
flex-direction: column;
}

.computer img{
	width: 100%;
}
.four{
/*	display: block;*/
flex-direction: column;
	margin-top: 40px;
	text-align: center;
}
.hill{
	height: 900px;
}

.our_works{
	display: block;
}

.two{
	display:block;
	width: 100%;
}
.team{
/*	display: block;*/
flex-direction: column;
}
.team img{
/*	margin-left: 40px;*/
	margin-top: 20px;
	width: 100%;
	object-fit: cover;
}
.two_1{
	display: block;
}
.team_1{
	display: block;
	width: 100%;
/*	margin-left: 40px;*/
}
.team-1 img{
	margin-left: 40px;
	width: 100%;
}
.Chill h1{
	width: 102%;
	padding-top:48px;

}
.Chill{
	margin-top: -5px;
}
.smallcircles{
/*	display: block;*/
    flex-direction: column;
}


.three{
	display: block;
	width: 107%;

}
.bg1{
	margin-bottom: 10px;
	height:450px;
}
.bg2{
	margin-bottom: 10px;
	height:550px;
}
.bg3{
	margin-bottom: 10px;
	height:610px;
}

.google{
	flex-direction:column;
}
iframe{
	width: 100%;
	height: 240px;
}
.lastcolor{
	display: block;
}
/*.flex{
	display: block;
}*/
.NUM{
	display: block;
}
/*.fb{
	display:flex;
}*/
/*.section7{
	display: block;
}*/

.both,.paper,.slip,.flex,.section7,.fb{
	flex-direction: column;	

}
.bigpic{
	position: relative;
}
.text{
	margin-top: -150px;
	z-index: 2;
}
.text h2{
	color: white;
	margin: 0px;

}
.text p{
	color: white;
	margin: 0px;
}
.text h4{
	color: white;
	margin: 0px;

}
.slip .anu2{
	width: 50%;
}
.section7{
	z-index: 1;
	color: red;
}
.lastcolor{
	height: 100%;
}

}