:root{
	--brown:#AB572D;
	--dark-black:#1E1E1E;
	--black:#262523;
	--white: #fff;
	--grey: #3D3D3D;
	--light-color:#858585;
	--coffee:#5B260F;
	--dark-coffee:#562E1A;
	--peach:#EFA94B;
	--navy:#012A3D;
	--dark-blue:#074054;
	--blue:#13D0E3;
	--border:.2rem solid var(--black);
	--box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
	}


*{
	margin:0;
	padding:0;
	font-family: "Roboto", sans-serif;
	text-transform: capitalize;
	text-decoration: none;
	box-sizing: border-box;
	outline: none;
	border: none;
	transition: all .2s linear;
}

*::selection{
	background: var(--brown);
	color:var(--white);
}

body{
ovaerflow-x:hidden;
background: linear-gradient(var(--dark-black),var(--black)) no-repeat;
}


section{
	padding: 5rem 7%;
	
}

*::-webkit-scrollbar{
	height:.5rem;
	width:1rem;
}

*::-webkit-scrollbar-track{
	background-color: transparent;
}

*::-webkit-scrollbar-thumb{
	background-color: var(--brown);
	border-radius: .5rem;
}

.btn{
	display: inline-block;
	cursor: pointer;
	padding: .3rem 1rem;
	font-size: 1rem;
	color:var(--white);
	text-align: center;
	text-transform: capitalize;
	transition: .2s linear;
	background-color: var(--brown);
}

.btn:hover{
color:var(--brown) !important;
background: var(--white) !important;
}

p{
	color:var(--white);
}

.heading{
	font-size: 3rem;
	font-weight: bold;
	color: var(--black);
	padding-left: 1rem;
	margin-bottom: 1rem;
	text-align: center;
  text-transform: capitalize;
}

.heading span{
color: var(--blue);
}

html{
	

}

header{	
	
	background-color: var(--black);
	padding-bottom: .5rem;
	box-shadow: var(--box-shadow);

}

.logo {
font-size: 2rem;
color:var(--brown);
font-family: 'DaniloCatalina';
}

.menu ul li a{
	font-size: 1rem;
	margin-left: 1rem;
	padding: .5rem 1rem;
	font-weight: 400;
	color: var(--brown);
	
}


.menu ul li a:hover{
	color:var(--white);
	text-decoration: underline;
}

.menu ul li:first-child a{
	color:var(--brown) !important;
}

.menu ul li:first-child a:hover
{
	color:var(--white) !important;
}

.navbar-toggler{
	background-color:var(--brown) !important;
}




/*--home--*/

.home{
	position:relative;
	background: var(--black);
}



.home .flex{
display: flex;
align-items: center;
flex-wrap: wrap;
gap:2rem;
padding-top: 6rem;

}

.home .flex .image{
	flex:1 1 20rem;

}

.home .flex .image img{
	width:70vh;
	height: 90vh;

}
.home .flex .content{
	flex:1 1 20rem;
}



.home .flex .content h3{
	font-size: 3rem;
	margin:.5rem 0;
	color:var(--white);
}

.home .flex .content p{
	color:var(--white);
	font-size: 1rem;
}
/*--home--*/


/*--welcome--*/

.welcome{
	background:url(../images/banner.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	display: grid;
	place-items: center;
	padding-top: 6rem;
}

.welcome .content{
	justify-content: center;
	text-align: center;
	
}

.welcome .content h1{
	color: var(--brown);
	font-size: 2.5rem;
}

.welcome .content p{
	font-size: 1rem;
	color:var(--white) !important;
}
/*--welcome--*/


/*--value--*/

.value .row{
	display:flex;
	align-items:center;
	background:var(--);
	flex-wrap: wrap;
}

.value .row .image{
	flex:1 1 20rem;
}

.value .row .image img{
	width: 100%;
}

.value .row .content{
	flex:1 1 20rem;
	padding: 1rem;
}

.value .row .content h1{
	font-size: 3rem;
	color:var(--white) !important;
	
}

.value .row .content p{
	font-size: 1rem;
	padding:.5rem 0;
    color:var(--white);
}

/*--value--*/



/*--selling--*/

.selling{
	background: var(--dark-black);
}

.selling h1{
	text-align: center;
	font-size: 2rem;
	padding-bottom: 1rem;
	color:var(--brown);
}

.selling .slide{
	background-color:var(--grey);
}

.selling .slide .image{
	height: 100%;
	width:100%;
	position: relative;
	overflow:hidden;
	text-align: center;
}

.selling .slide .content{
	text-align: center;
}

.selling .slide .content .price{
	font-size: 1.3rem;
	color:var(--brown);
	padding: 1rem;
}

.selling .slide .content .price span{
	font-size: 1rem;
	padding-left: .5rem;
	color:var(--light-color);

}

.selling .swiper-button-next,
.swiper-button-prev{
	height: 1rem;
	width:1rem;
	color:var(--brown);
}


.swiper-button-next:after,
.swiper-button-prev:after{
	font-size:2rem;
	font-weight: bold;
}

.selling .button{
	padding-top: 1rem;
	text-align: center;
	justify-content: center;
}
/*--selling--*/



/*--offer start--*/
.offer{
	background:url(../images/bg3.png) no-repeat;
	background-size: cover;
	background-position: center;
	
}

.offer .content{
	justify-content: flex-start;
	width:50%;
}

.offer .content h1{
	color:var(--white);
	font-size: 2.5rem;
}


.offer .content p{
	color:var(--white);
	font-size: 1rem;
}


/*--offer start--*/


/*--footer--*/

.footer{
background-color: var(--black);
}

.footer .box-container{
	display:flex;
	flex-wrap: wrap;
	
}


.footer .box-container .box{
	flex: 1 1 10rem;
	margin:1rem;
}


.footer .box-container .box h3{
	font-size: 2rem;
	color: var(--white);
	font-weight: bold;
	padding: .5rem 0;
}


.footer .box-container .box p{
	font-size: 1rem;
	color: var(--white);
	padding: .5rem 0;
}


.footer .box-container .box p i{
	font-size: 1.2rem;
	color: var(--brown);
	padding: .5rem 0;
}


.footer .box-container .box a{
	font-size: 1rem;
	color: var(--white);
	padding: .5rem 0;
	text-decoration: none;
	display: block;
}

.footer  .box-container .box a:hover{
	text-decoration: underline;
	padding-right: 1rem;
	color:var(--brown);
}

.footer .credit{
	padding:1rem .5rem;
	font-size:1rem;
	color:var(--white);
	border-top: .1rem solid var(--white);
	text-align: center;
}


.footer .credit span{
	
	color:var(--brown);
}


.footer  .box-container .box form{
	margin:.5rem auto;
	max-width: 30rem;
	height:2.5rem;
	display: flex;
	box-shadow: var(--box-shadow);
	overflow: hidden;
	border-radius: .5rem;
}

.footer  .box-container .box form input[type="email"]{
  height:100%;
  width:100%;
  font-size: 1rem;
  color:var(--black);
  text-transform: none;
  padding: 0 1rem;
}


.footer  .box-container .box form input[type="submit"]{
  height:100%;
  width:8rem;
  font-size: 1rem;
  color:var(--white);
  background: var(--brown);
  cursor: pointer;
 
}

.footer  .box-container .box form input[type="submit"]:hover{
background: var(--white);
color: var(--brown);
}


.footer  .box-container .box .icon {
	
	display: flex;
	
}


.footer  .box-container .box .icon a{
	font-size: 1.5rem;
	padding-top: 1rem;
	padding-right: .5rem;
}

.footer  .box-container .box .icon a:first-child{
	color:#3B5998;
}


.footer  .box-container .box .icon a:nth-child(2){
	color:#1DA1F2 !important;
}


.footer  .box-container .box .icon a:nth-child(3){
	color:#C13584;
}


.footer  .box-container .box .icon a:last-child{
	color:#0077B5;
}

/*--footer--*/


/*--about--*/
.about .aboutt p{
	color:var(--white) !important;
	font-size: 1rem;
	padding-top: 5rem;
	padding-bottom: .5rem;
}
.about{
	background: url(../images/a.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	margin-top: 5rem;
}

.about .content{
	justify-content: center;
	text-align: center;
	padding: 1rem;
	margin: 3rem;
}

.about .content h3{
	font-size: 2rem;
	color:var(--white);
}

.about .content p{
	font-size: 1rem;
	color:var(--light-color);
	padding-top: 1rem;

}

/*--about--*/


/*--story start--*/

.story{
	background-color: #20201F;
}
.story .content{
	justify-content: center;
	text-align: center;
	padding: 1rem;
}


.story .content h3{
	font-size: 2rem;
	color:var(--brown);
}


.story .content p{
	font-size: 1rem;
	color:var(--white);
}
/*--story end--*/



/*--image--*/

.image img{
	width:100%;
	
}
/*--image--*/


/*--unique--*/

.unique h3{
font-size: 2rem;
color:var(--brown);
text-align: center;
}

.unique .box-container{
	display:grid;
	grid-template-columns: repeat(auto-fit, 18rem);
	gap:1.5rem;
	align-items: flex-start;
   justify-content: center;
}


.unique .box-container .box{
	 text-align: center;
	padding: 1rem .5rem;
}

.unique .box-container .box p{
	font-size: 1rem;
	color:var(--white);
	padding-top: .5rem;
}

.unique .box-container .box p span{
	font-size: 1.5rem;
	align-items: flex-start;
	color:var(--light-color);
}
/*--unique--*/



/*--product--*/

.products .list{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	list-style: none;
	padding: .5rem 0;
	margin: .5rem 0;
}


.products .list .btn{
	margin:.5rem;
}


.products h3{
	color:var(--brown);
	font-size: 2.5rem;
	text-align: center;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.products .box-container{
	display: flex;
	flex-wrap: wrap;
	gap:1.5rem;

}


.products .box-container .box{
	
	flex:1 1 15rem;
	background-color:var(--grey);
	border-radius: .5rem;
	position: relative;

	
}


.products  .box-container .box .image img{
	height:100%;
	width:100%;
	overflow: hidden;
	border-radius: .5rem;
}


.products  .box-container .box .content{
	text-align: center;
	padding-bottom: .5rem;

}


.products  .box-container .box .content h4{
	color:var(--white);
	padding-top: .5rem;
	font-size: 1.2rem;
}

.products  .box-container .box .content .stars i{
	font-size: 1rem;
	color:var(--brown);
}

.products  .box-container .box .content span{
	color:var(--light-color);
	padding-left: .5rem;
}
.so h2{
	font-size: 2.5rem;
	text-align: center;
	padding-bottom: 1rem;
	color:var(--white);

}

.sp{
	background:linear-gradient(90deg, var(--navy), var(--dark-blue));
}


.sp .row{
	display:flex;
	align-items:center;
	flex-wrap: wrap;
}

.sp .row .image{
	flex:1 1 30rem;
}

.sp .row .image img{
	width: 100%;
	height: 70vh;
	object-fit: cover;
	overflow: hidden;
}

.sp .row .content{
	flex:1 1 30rem;
	padding: 1rem;
}

.sp .row .content h3{
	font-size: 1.5rem;
	color:var(--white);
	
}


.sp .row .content h3 span{
	font-size: 1.5rem;
		
}


.sp .row .content h4{
	font-size: 1.5rem;
	font-weight: 600;
	color:var(--white);
	margin-top: 1rem;
	
}

.sp .row .content h4 span{
	color:var(--blue);
	font-size: 1.3rem;
		
}

.sp .row .content p{
	font-size: 1rem;
	padding:.5rem 0;
	color:var(--white);
}



/*--second--*/

.second{
	background:linear-gradient(90deg, var(--dark-coffee), var(--coffee));
}
.second .row{
	display:flex;
	align-items:center;
	background:var();
	flex-wrap: wrap;
}

.second .row .image{
	flex:1 1 30rem;
}

.second .row .image img{
	width: 100%;
	height: 70vh;
	object-fit: cover;
	overflow: hidden;
}

.second .row .content{
	flex:1 1 30rem;
	padding: 1rem;
}

.second .row .content h3{
	font-size: 1.5rem;
	color:var(--white);
	
}


.second .row .content h3 span{
	font-size: 1.5rem;
		
}


.second .row .content h4{
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--white);
	padding-top: 1rem;
	
}


.second .row .content h4 span{
	font-size: 1.3rem;
	color:var(--peach);
	
	
}

.second .row .content p{
	font-size: 1rem;
	padding:.5rem 0;
	color:var(--white);
}


/*--product--*/

/*--service section--*/

.service .aboutt p{
	color:var(--white) !important;
	font-size: 1rem;
	justify-content: flex-start;
	padding-top: 5rem;
	padding-bottom: .5rem;
}
.service{
	background: url(../images/service.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	margin-top: 5rem;
}

.service .content{
	justify-content: center;
	text-align: center;
	padding: 1rem;
	margin: 3rem;
}

.service .content h3{
	font-size: 2rem;
	color:var(--white);
}

.service .content p{
	font-size: 1rem;
	color:var(--light-color);
	padding-top: 1rem;

}


/*--story--*/
.story .row{
	display:flex;
	align-items:center;
	background:var(--);
	flex-wrap: wrap;
	padding-top: 2rem;
}

.story .row .image{
	flex:1 1 20rem;
}

.story .row .image img{
	width: 100%;
}

.story .row .content{
	flex:1 1 20rem;
	
	padding: 1rem;
}

.story .row .content h1{
	font-size: 3rem;
	justify-content: flex-start;
	color:var(--brown) !important;
	
}


.story .row .content h3{
	font-size: 1.5rem;
	color:var(--white);
}
.story .row .content p{
	font-size: 1rem;
	padding:.5rem 0;
    color:var(--light-color);
}

/*--service section--*/


/*--blogs section--*/

/*--blog--*/
.blog{

}

.blog .content{
	text-align: center;
}


.blog .content h5{
	font-size: 1rem;
	color:var(--white);
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.blog .content h3{
	font-size: 1.5rem;
	color:var(--white);
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.blog img{
	align-items: center;
	text-align: center;
}


.blog .contentt{
	justify-content: flex-start;
	padding-top: 2rem;
}

.blog .contentt p{
	font-size: 1rem;
	color:var(--light-color);
}


.blog .contentt h3{
	font-size: 1.5rem;
	color:var(--white);
}


/*--tale--*/

.tale .row{
	display:flex;
	align-items:center;
	background:var(--);
	flex-wrap: wrap;
	padding-top: 2rem;
}

.tale .row .image{
	flex:1 1 20rem;
}

.tale .row .image img{
	width: 100%;
}

.tale .row .content{
	flex:1 1 20rem;
	
	padding: 1rem;
}

.tale .row .content h1{
	font-size: 3rem;
	justify-content: flex-start;
	color:var(--white) !important;
	
}


.tale .row .content h3{
	font-size: 1.5rem;
	color:var(--white);
}
.tale .row .content p{
	font-size: 1rem;
	padding:.5rem 0;
    color:var(--light-color);
}

.tale .pg{
	padding-top: 2rem;
}

.tale .pg h3{
font-size: 1.5rem;
color:var(--white);
}

.tale .pg p{
font-size: 1rem;
color:var(--light-color);
}


/*--share--*/
.share{

}

.share .content{
	text-align: center;
}

.share .content h5{
	text-align: center;
	color: var(--white);
}


.share .content .icon {

}

 .share .content .icon a{
	font-size: 1.5rem;
	padding-top: 1rem;
	padding-right: .5rem;
}

 .share .icon a:first-child{
	color:#3B5998;
}


 .share .icon a:nth-child(2){
	color:#1DA1F2 !important;
}


.share .icon a:nth-child(3){
	color:#C13584;
}
