/*
Theme Name : Krushnam - IT Business Design HTML Template
Author : Teaching Web
Version : 1.0
File-name : index.css
*/

/*CSS index
----------------------------------
1. Wrapper
2. Navbar
3. Banner
4. Why us
5. Review
6. About us
7. Pricing
8. Our Process
9. Team
10. Portfolio
11. Services
12. Footer (Contact)
*/

*{
	box-sizing: border-box;
	font-family: calibri;
	transition: 0.5s;
	cursor: url('../cursors/cursor.png'),auto;
	outline: none !important;
	text-decoration: none !important;
	scroll-behavior: smooth;
}
body{
	margin: 0;
	padding: 0;
}
a:hover{
	cursor: pointer !important;
	outline: none;
}
*[href=""]:hover{
	cursor: pointer !important;
	outline: none;
}
a:hover *{
	cursor: pointer !important;
	outline: none;
}
*:hover{
	text-decoration: none !important;
}
@font-face{
	font-family: akaju;
	src: url(../webfonts/akaju.otf);
}
.font-akaju{
	font-family: akaju !important;
}
@font-face{
	font-family: quick;
	src: url(../webfonts/quick.otf);
}
.font-quick{
	font-family: quick !important;
}
@font-face{
	font-family: sacra;
	src: url(../webfonts/sacra.ttf);
}
:root{
	--color: #263C6D;
	/*color : var(--color); #263C6D*/
}
.bg-blue{
	background-color : var(--color) !important;
}
.text-blue{
	color : var(--color);
}
/*custom css end*/
/*custom scroll bar start*/
::-webkit-scrollbar{
	width: 8px !important;
}
::-webkit-scrollbar-thumb{
	background: var(--color) !important;
	border-radius: 15px;
}
::-webkit-scrollbar-track{
	background: white !important;
}
.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;
}
/*custom scroll bar end*/
/*wrapper start*/
.wrapper{
	width: 100%;
	float: left;
	clear: both;
	overflow: hidden;
	background: white;
}
/*wrapper end*/
/*navbar start*/
nav{ /*current navbar*/
	opacity: 0.0;				
    width: 100%;
    z-index: 10;
    padding: 10px 0px;
    float: left;
	clear: both;
    transition: 0.5s !important;
    pointer-events: none;
}
.fixed-header { /*after scroll navbar*/
    opacity: 1.0;
	box-shadow: 0 0px 10px #c6c6c6;
	background: white !important; 
    padding: 0px 5px;
    transition: 0.5s !important;
    z-index: 10;
    pointer-events: initial;
}
.offcanvas{
	background: url("../images/menus/sidemenu.png");
	background-position: top;
	background-attachment: fixed;
}
.offcanvas-body{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
a.navbar-menu{
	font-size: 30px;
	color: var(--color);
	margin-top: 20px;
}
.navbar-menu:hover span{
	color: var(--color);
	letter-spacing: 10px;
	text-decoration: line-through !important;
	font-size: 40px;
}
/*navbar end*/

/*banner start*/
.banner{
	float: left;
	clear: both;
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
	position: relative;
}
.banner:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 2;	
}
.banner-video{
	position: absolute;
	top: 0;
	right: 0;
	min-width: 100%;
	min-height: 100vh;
	opacity: 0.7;
}
.banner-section{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100vh;
	background: rgba(255, 255, 255, 0.9);
	z-index: 1;
	display: flex;
	align-items: center;
}
/*banner end*/

/*why us start*/
.whyus{
	float: left;
	clear: both;
	width: 100%;
	padding: 120px 0px;
	background: white;
	text-align: justify;
}
/*why us end*/

/*review start*/
.review{
	float: left;
	clear: both;
	width: 100%;
	padding: 80px 0px;
	background: url("../images/review/bg.jpg");
	background-attachment: fixed;
	background-size: cover;
	position: relative;
	z-index: 1;
	word-wrap: break-word;
}
.review:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg ,var(--color), #35C1F1);
	z-index: -1;
	opacity: 0.9;
}
.review .owl-theme .owl-dots .owl-dot span {
    height: 10px;
    width: 10px;
 	border-radius: 0px;  
    background: white;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    outline: none;
    border: none;
    display: none;
}
.review .owl-theme .owl-dots .owl-dot.active span{
    height: 10px;
    width: 10px;
    background: var(--color);
    border-radius: 0px;
    outline: none;
    border: none;
}
/*review end*/

/*aboutus start*/
.aboutus{
	float: left;
	clear: both;
	width: 100%;
	padding: 100px 0px;
}
.white-code{
	background: url("../../assets/images/aboutus/white-code.png");
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
}
.aboutus-box{
	width: 100%;
	height: auto;
	padding: 5px;
	margin: 0 auto;	
	position: relative;
	word-wrap: break-word;
}
.aboutus-text{
	text-shadow: 0px 0px 2px white;
	font-size: 20px;
	text-align: justify;
	position: relative;
}
.aboutus-text:after{
	content: '';
	position: absolute;
	top: calc(50% - 40px);
	right: 20px;
	height: 80px;
	width: 80px;
	z-index: -1;
	/*transform: translate(-0%,-50%);*/
	border:3px solid gray;
	animation: aboutus-animation 20s infinite;
}
@keyframes aboutus-animation{
	50%{
		transform: rotate(360deg);
		border-radius: 30px;
		border:8px double gray;
	}
}
.aboutus .owl-theme .owl-dots .owl-dot span {
    height: 10px;
    width: 10px;
 	border-radius: 10px !important;  
    background: #c6c6c6;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    outline: none;
    border: none;
}
.aboutus .owl-theme .owl-dots .owl-dot.active span{
    height: 10px;
    width: 10px;
    background: var(--color);
    border-radius: 0px;
    outline: none;
    border: none;
}
.design{
	float: left;
	clear: both;
	width: 100%;
	height: auto;
	padding: 80px 0px;
	text-align: center;
	color: white;
	position: relative;
	z-index: 1;
}
.design:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(28,31,37,0.9);
	z-index: -1;
}
.design-box{
	width: 100%;
	padding: 20px 10px;
}
.design-box:hover{
	width: 100%;
	padding: 10px 10px;
}
.design-icons{
	font-size: 80px;
}
.design-title span{
	color: #009EDC;
	font-size: 50px;
}
.design-description{
	color: #f2f2f2;
	word-spacing: 3px;
}
.design-passion{
	float: left;
	clear: both;
	width: 100%;
	padding: 80px 0px;
	background: white;
}
.design-passion-heading{
	font-size: 10vw;
	text-transform: uppercase;
	font-weight: lighter;
	line-height: 90px;
	margin-top: 30px;
	font-family: quick;
}
.design-passion-heading b{
	font-weight: bold;
}
.design-passion-detail{
	font-size: 20px;
	color: gray;
	text-align: justify;
}
.wwu{
	float: left;
	clear: both;
	width: 100%;
	padding-top: 80px;
	padding-bottom: 10px;
	text-align: justify;
}
/*aboutus end*/

/*pricing start*/
.pricing-section{
	float: left;
	clear: both;
	width: 100%;
	padding: 100px 0px;
}
.pricing-box{
	float: left;
	width: 100%;
	background: white;
	padding: 25px;
	margin: 15px 0px; 
	box-shadow: 0px 0px 5px #c6c6c6;
	text-align: left;
	border-radius: 10px;
	min-height: 100%;
}
.pricing-title{
	font-size: 35px;
	margin: 20px 0px;
	color: var(--color);
	font-family: quick;
	font-weight: bold;
}
.pricing-img{
	clear: both;
	width: 70%;
	margin-top: 10px;
	margin-bottom: 10px;
}
.price{
	color: var(--color);
	margin-top: 20px;
	font-size: 25px;
	font-family: quick;
}
.price span{
	color: var(--color);
	font-size: 35px;
}
.pricing-box p{
	font-family: quick;
	color: gray;
	font-weight: bold;
}
/*pricing end*/

/*our process start*/
.ourprocess{
	float: left;
	clear: both;
	width: 100%;
	padding: 100px 0px;
	background: #25272E;
	position: relative;
	z-index: 1;
}
.ourprocess:before{
	content: '';
	position: absolute;
	top: 50%;
	right: 0%;
	width: 50%;
	height: 50%;
	transform: translate(-0%,-50%);
	background: var(--color);
	z-index: -1;
	overflow: hidden;
}
.ourprocess-box{
	text-align: center;
	width: 100%;
	padding: 20px 10px;
	background: white;
	min-height: 100%;
	border-radius: 20px;
}
.ourprocess-box h3{
	font-family: quick;
}
/*our process end*/

/*team start*/
.team{
	float: left;
	clear: both;
	width: 100%;
	background: white;
	padding: 100px 0px;
}
.team-member{
	padding: 20px;
	border-radius: 10px;
}
.team-name{
	text-align: center;
	font-size: 20px;
	margin: 0;
	padding: 0;
	margin-top: 10px;
	font-weight: bold;
}
.team-subtitle{
	color: gray;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 15px;
}
.team-detail{
	color: gray;
	text-align: center;
}
.team-telent{
	width: 100%;
	text-align: center;
}
.team-telent i{
	font-size: 20px;
	height: 35px; 
	width: 35px;
	text-align: center;
	line-height: 35px;
	border-radius: 35px;
}
/*team end*/

/*portfolio start*/
.portfolio{
	float: left;
	clear: both;
	width: 100%;
	background: white;
	padding-top: 100px;
	padding-bottom: 80px;
	position: relative;
	z-index: 1;
}
.portfolio:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -1;
	background: url("../images/portfolio/bg.jpg");
	background-size: cover;
	background-position: top left;
	background-attachment: fixed;
}
.portfolio:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -1;
	background: linear-gradient(45deg ,var(--color), #35C1F1);
	opacity: 0.9;
}
.portfolio-heading{
	font-weight: bold;
}
.portfolio-box{
	background: rgba(255, 255, 255);
	padding: 20px 10px;
	margin: 20px 0px;
	width: 100%;
	min-height: 80%;
	display: flex;
	justify-content: center;
	align-items: center;
	clip-path: polygon(100% 0, 100% 70%, 85% 100%, 0 100%, 0 0);
	border-radius: 5px;
}
.portfolio-box img{
	width: 150px;
}
.portfolio-box:hover{
	background: rgba(255, 255, 255, 1.0);
	clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);
}
.portfolio-box:hover img{
	width: 150px;
	transform: scale(1.1);
}
/*portfolio end*/

/*freepricing start*/
.freepricing{
	float: left;
	clear: both;
	width: 100%;
	padding: 100px 00px;
}
/*freepricing end*/

/*service start*/
.services-heading{
	float: left;
	clear: both;
	width: 100%;
	padding: 100px 0px; 
}
.services-section{
	background: #2A3448;
	float: left;
	clear: both;
	width: 100%;
	padding: 100px 0px;
}
.services-box{
	width: 100%;
	padding: 20px 20px;
	position: relative;
	z-index: 1;
	min-height: 100%;
}
.services-box:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	z-index: -1;
	border-top: 1px solid #c6c6c6;
	transition: 0.5s;
}
.services-box:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 0%;
	height: 100%;
	border-bottom: 1px solid #c6c6c6;
	z-index: -1;
	transition: 0.5s;
}
.services-box:hover:before{
	width: 50%;
}
.services-box:hover:after{
	width: 50%;
}
/*service end*/

/*commit start*/
.commit{
	float: left;
	clear: both;
	width: 100%;
	padding-top: 20px;
	padding-bottom: 80px;
}
/*commit end*/

/*footer start*/
.footer{
	float: left;
	clear: both;
	width: 100%;
	padding-top: 100px;
	padding-bottom: 50px;
	position: relative;
	z-index: 1;
	background: url("../images/footer/map.png");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
.footer:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color);
	opacity: 0.95;
	z-index: -1;
}
.social-icons a i{
	color: white;
	font-size: 25px;
	width: 50px;
	height: 50px;
	margin: 10px;
	line-height: 50px;
	transition: 0.5s;
}
.social-icons a:hover i{
	color: var(--color);
	background: white;
	border-radius: 10px;
}
/*footer end*/
/*copyrights start*/
.copyrights{
	float: left;
	width: 100%;
	padding: 20px 0px;
}
.copyrights .container *{
	margin: 0;
	padding: 0;
}
/*copyrights end*/