/*
Theme Name : Dvarka - Startup Business One Page Template
Author : Logshiv Web Design
Version : 1.0
File-name : style.css
*/

/*CSS index
----------------------------------
0.  Particles effect
1.  Wrapper
2.  Navbar
3.  Banner
4.  About
5.  Achievement
6.  Feedback
7.  Services
8.  Joinus
9.  Portfolio
10. Articles
11. Clients
12. Footer
*/
/*0. particles start*/
#particles-banner,
#particles-achievement,
#particles-portfolio,
#particles-footer{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}
/*particles end*/

/*1. wrapper start*/
.wrapper{
	margin: 0;
	padding: 0;
	width: 100%;
	overflow: hidden;
	height: auto;
}
/*wrapper end*/

/*2. navbar start*/
.navbar-toggler:hover,.navbar-toggler:focus,.navbar-toggler:active{
	color: transparent !important;
}
.custom-canvas{
	background: url("../images/navbar/canvas-bg.jpg");
	background-size: cover;
	background-position: center;
}
.offcanvas-header button.btn{
	font-size: 22px;
}
/*navbar end*/

/*3. banner start*/
.banner{
	float: left;
	clear: both;
	width: 100%;
	padding-top: 150px;
	padding-bottom: 80px;
	position: relative;
	z-index: 1;
}
/*banner end*/

/*4. about start*/
.about{
	float: left;
	clear: both;
	width: 100%;
	padding: 100px 0px;
	background: white;
	position: relative;
	z-index: 1;
}
.counter-section{
	padding: 30px 10px;
	border-radius: 10px;
	box-shadow: 0px 0px 10px #c6c6c6;
}
/*about end*/

/*5. achievement start*/
.achievement{
	float: left;
	clear: both;
	width: 100%;
	padding: 50px 0px;
	background: rgba(0,0,0,0.9) url("../images/achievement/bg.jpg");
	background-blend-mode: multiply;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left;
	background-attachment: fixed;
	position: relative;
	z-index: 1;
}
.achievement-box{
	padding: 20px 10px;
}
.achievement-icon i{
	color: transparent;
	-webkit-text-stroke: 2px white;
	text-stroke: 2px white;
}
/*achievement end*/

/*6. feedback start*/
.feedback{
	float: left;
	clear: both;
	width: 100%;
	padding: 100px 0px;
}
.feedback-user{
	width: 100px !important;
	border: 1px solid var(--color);
	border-radius: 20%;
	box-shadow: 8px 8px 10px #c6c6c6;
}
.owl-dots{
	display: none;
}
/*feedback end*/

/*7. services start*/
.services{
	float: left;
	clear: both;
	width: 100%;
	padding-top: 20px;
	padding-bottom: 50px;
	/*background: #EEF3F7;*/	
}
.services-box{
	background: white;
	padding: 30px 20px;
	border-radius: 10px;
	position: relative;
	z-index: 1;
}
.services-box:before{
	counter-increment: my-count;
  	content: counter(my-count);
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 200px;
	z-index: -1;
	color: var(--color);
	opacity: 0.1;
}
.services-icon i{
	color: transparent;
	-webkit-text-stroke: 2px var(--color);
	text-stroke: 2px var(--color);
}
/*services end*/

/*8. joinus start*/
.joinus{
	float: left;
	clear: both;
	width: 100%;
	padding-top: 20px;
	padding-bottom: 50px;
	background: url(../images/joinus/bg.jpg);
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	z-index: 1;
}
.joinus:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ffffff;
	z-index: -1;
	opacity: 0.9;
}
.joinus .card{
	border: none !important;
	border-radius: 5px;
	overflow: hidden;
	text-align: center;
}
.team-img{
	float: left;
	width: 100%;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.team-photo{
	width: 130px;
	height: 130px;
	border-radius: 1000px;
}
.joinus .card:hover .team-img .team-photo{
	transform: scale(1.1);
}
.team-links{
	word-spacing: 30px;
}
.team-links a{
	color: var(--color);
	font-size: 20px;
}
/*joinus end*/

/*9. portfolio start*/
.portfolio{
	float: left;
	clear: both;
	width: 100%;
	padding: 120px 0px;
	background: url(../images/portfolio/bg.jpg);
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	z-index: 1;
}
.portfolio:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	z-index: -1;
	opacity: 0.9;
}
.portfolio-box{
	width: 100%;
	height: 350px;
	overflow: hidden;
	border-radius: 5px;
	position: relative;
}
.portfolio-box img{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: 10s !important;
}
.portfolio-layer{
	position: absolute;
	top: 98%;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: white;
	font-size: 30px;
	opacity: 0.9;
}
.portfolio-box:hover .portfolio-layer{
	top: 0;
}
/*portfolio end*/

/*10. article start*/
.article{
	float: left;
	clear: both;
	width: 100%;
	padding: 120px 0px;
}
/*article end*/

/*11. clients start*/
.clients{
	float: left;
	clear: both;
	width: 100%;
	padding: 0px 0px;	
}
.clients-box{
	float: left;
	width: 100%;
	padding: 50px 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.clients-box img{
	margin: 20px 30px;
	width: 150px;
}
/*clients end*/

/*12. footer start*/
.footer{
	float: left;
	clear: both;
	width: 100%;
	padding-top: 80px;
	padding-bottom: 30px;
	color: white;
	position: relative;
	z-index: 1;
	background: url("../images/footer/footer.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	overflow: hidden;
}
.footer:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #0c0c0c;
	z-index: -1;
	opacity: 0.9;
}
.footer .input-group .input-group-text{
	position: relative;
}
.footer .input-group .input-group-text input{
	position: absolute;
	bottom: 6px;
	right: 0;
	width: 100%;
	opacity: 0.0;
}
.footer .input-group .input-group-text i{
	position: absolute;
	bottom: 6px;
	right: 0;
	text-align: center;
	width: 100%;
}
.footer .input-group input{
	background: transparent;
	border: none;
	border-radius: 0px;
	border-bottom: 1px solid #515255;
	box-shadow: none;
	color: white;
}
.footer .input-group span{
	background: transparent;
	border: none;
	border-radius: 0px;
	border-bottom: 1px solid #515255;
	color: white;
	font-size: 22px;
}
.footer .input-group input:focus{
	border-bottom: 1px solid white;
}
.footer .input-group input:focus + span{
	border-bottom: 1px solid white;
}
.contact-us-detail{
	font-size: 19px;
	letter-spacing: 2px;
}
.social-media{
	text-align: center;
}
.social-media a{
	margin: 5px 15px;
	font-size: 30px;
	color: white;
}
/*footer end*/