/*
Theme Name : Intrec Business Theme
Author : Logshiv
Description : Creative Business Theme
Version : 1.0
*/

/*CSS index
----------------------------------
1.  Root (change color of Entire Design)
2.  Default Css
3.  Wrapper
4.  Navbar
5.  Banner
6.  What we do
7.  Started
8.  Hire us
9.  Portfolio
10. Services
11. Team
12. About
13. Footer
*/

/*1. Main Color Variable to Manage Entire Theme*/
/*if you write below Color code, color name, rgb, it will be change entire theme color*/
:root {
  --color: #DC3545; /*You can change theme color shade here*/
}
/*2. default css*/
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none !important;
	font-family: calibri;
	text-decoration: none !important;
	scroll-behavior: smooth;
	transition: 0.5s;
	caret-color: var(--color);
}
template { 
	display:none !important; 
	transform: scale(0) !important;
}
a,i{
	text-decoration: none !important;
	outline: none !important;
}
::-moz-selection { /* Code for Firefox */
  color: white;
  background: var(--color);
}
::selection{
  color: white;
  background: var(--color);
}
.m-10{
	margin-top: 10px !important;
}
.m-20{
	margin-top: 20px !important;
}
.m-30{
	margin-top: 30px !important;
}
.m-40{
	margin-top: 40px !important;
}
.m-50{
	margin-top: 50px !important;
}
.text-color{
	color: var(--color) !important;
}
.bg-color{
	background-color: var(--color) !important;
}
.text-gradient{
	color: transparent;
	background: linear-gradient(to right,var(--color),rgba(13,17,65));
	-webkit-background-clip: text;
	background-clip: text;
}
.bg-gradient{
	background: linear-gradient(to right,var(--color),rgba(13,17,65)) !important;
}

/*3. wrapper start*/
.wrapper{
	float: left;
	clear: both;
	width: 100%;
	overflow: hidden;
}
/*4. navbar start*/
.navbar a, .navbar a:hover, .navbar a:focus, .navbar a:active{
	outline: none !important;
	box-shadow: none !important;
}
.nav-link{
	color: white !important;
	font-size: 20px;
	font-family: calibri;
	transition: 0.5s !important;
	text-align: center;
}
.nav-item:hover .nav-link{
	color: var(--color) !important;
	letter-spacing: 8px;
	text-decoration: line-through !important;
}
.offcanvas{
	position: fixed;
	background: black !important;
}
/*navbar end*/
/*5. banner start*/
.banner{
	float: left;
	width: 100%;
	min-height: 100vh;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	z-index: 1;
}
.banner:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(30deg,var(--color),rgb(13,17,65));
	opacity: 0.9;
	z-index: -1;
}
.banner-video{
	position: absolute;
	top: 0;
	left: 0;
	min-height: 100%;
	min-width: 100%;
	z-index: -2;
}
/*banner end*/

/*6. what we do start*/
.whatwedo{
	clear: both;
	float: left;
	width: 100%;
	padding: 70px 0px;
	background: #272D32;
}
.wwd-box{
	width: 100%;
	background: white;
	text-align: center;
	color: ;
	padding: 20px 20px;
	box-shadow: 0 0 0px black;
}
.wwd-box p{
	margin-top: 16px;
	font-size: 25px;
	font-weight: bolder;
}
.wwd-box p + p{
	margin-top: 10px;
	font-size: 18px;
	font-weight: lighter;
}
/*what we do end*/

/*7. started start*/
.started{
	clear: both;
	float: left;
	width: 100%;
	padding: 100px 0px;
	position: relative;
	z-index: 1;
	background: url("../images/started/bg.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
.started:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0.9;
	z-index: -1;
}
/*started end*/

/*8. hireus start*/
.hireus{
	clear: both;
	float: left;
	width: 100%;
	padding: 80px 0px;
}
.hireus-box{
	width: 100%;
}
.hireus-box img{
	margin: 20px;
}
/*hireus end*/

/*9. portfolio start*/
.portfolio{
	clear: both;
	float: left;
	width: 100%;
	padding: 80px 0px;
	background: black;
}
.portfolio-box{
	float: left;
	width: 100%;
	height: 400px;
	background-position: top;
	background-size: 100% auto;
	position: relative;
	overflow: hidden;
	transition: 20s;
	border: 1px solid var(--color);
}
.portfolio-title{
	position: absolute;
	left: 0;
	bottom: -100%;
	width: 100%;
	background: var(--color);
	transition: 0.5s;
	padding: 10px 0px;
	text-align: center;
}
.portfolio-box:hover{
	background-position: bottom;
	background-size: 100% auto;
}
.portfolio-box:hover .portfolio-title{
	bottom: 0%;
}
/*portfolio end*/

/*10. service start*/
.service{
	clear: both;
	float: left;
	width: 100%;
	padding: 80px 0px;
	position: relative;
	overflow: hidden;
}
#particles-js{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.service-box{
	width: 100%;
	padding: 20px 10px;
	border: 0px solid #c6c6c6;
	min-height: 100%;
	box-shadow: inset 0px 0px 10px black;
}
.service-box i{
	width: 80px;
	height: 80px;
	border-radius: 100px;
	background: var(--color) !important;
	text-align: center;
	line-height: 80px;
	font-size: 40px;
	color: white;
}
/*service end*/

/*11. team start*/
.team{
	float: left;
	clear: both;
	width: 100%;
	padding: 50px 0px;
	background: black;
}
.team-img{
	width: 110px !important;
	border-radius: 1000px;
	border: 2px groove var(--color);
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: var(--color);
}

/*team end*/

/*12. about start*/
.about{
	clear: both;
	float: left;
	width: 100%;
	padding-top: 0px;
	padding-bottom: 70px;
	background: white;
}
.about-facility{
	width: 100%;
	background: re;
}
/*about end*/
/*13. footer start*/
.footer{
	clear: both;
	float: left;
	width: 100%;
	padding: 100px 0px;
	background: url("../images/footer/ftr.jpg");
	position: relative;
	background-size: cover;
	background-position: left;
	background-repeat: no-repeat;
	animation: ftr 100s infinite;
	-webkit-animation: ftr 100s infinite;
	z-index: 1;
}
.footer:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(00,00,00,0.9);
	z-index: -1;
}
@keyframes ftr{
	25%{
		background-position: right;
	}
	50%{
		background-position: bottom;
	}
	75%{
		background-position: left;
	}
}
.input-box{
	border: none !important;
	border-bottom: 1px solid var(--color) !important;
	border-radius: 0px !important;
	background: transparent !important;
	padding: 0px 10px;
	outline: none !important;
	font-size: 18px;
	box-shadow: none !important;
	color: var(--color) !important; 
	transition: 0.5s !important;
	margin-top: 20px;
}
.select-box{
	box-shadow: none !important;
	border: none !important;
	border-bottom: 1px solid var(--color) !important;
	border-radius: 0px !important;
	background: transparent !important;
	padding: 0px 10px;
	font-size: 18px;
	outline: none !important;
	box-shadow: none !important;
	color: var(--color) !important; 
	transition: 0.5s !important;
	margin-top: 20px;	
}
.message-box{
	box-shadow: none !important;
	border-radius: 0px !important;
	border: none !important;
	border-bottom: 1px solid var(--color) !important;
	background: transparent !important;
	padding: 0px 10px;
	font-size: 18px;
	outline: none !important;
	box-shadow: none !important;
	color: var(--color) !important; 
	transition: 0.5s !important;
	margin-top: 20px;	
	height: 100px !important;

}
.submit-btn{
	padding: 8px 30px;
	font-weight: lighter;
	font-variant: small-caps;
	background: var(--color);
	border-radius: 100px;
	border: none;
	border: 1px solid transparent;
	color: white;
	font-size: 20px;
	width: 100%;
}
.footer-icon{
	margin-right: 8px;
}
.footer-icon i{
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	border-radius: 100px;
	background: white;
	color: var(--color);
}
/*footer end*/