/* --------------------------------
------------- Theme CSS  ----------
----------------------------------- */


[class*=font] body {
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
    letter-spacing: normal;
    word-spacing: normal;
}
.btn{
	border-radius: 0;
}
/* ======= header part ======= */
#main-menu .nav-item .nav-link{
    font-weight: 600;
    color: #151515;
    transition: .25s;
}
#main-menu li a:hover{
	border-bottom: 3px solid #6689ff;
}
#main-menu li a.active{
	border-bottom: 3px solid #6689ff;
}
/* === SERVICE PART === */
#service hr{
	width: 30%;
	transition: 0.6;
	height:1px;
	border-width:0;
	background-color:gray;
}
#service .card:hover hr{
	width: 40%;
	background-color: blue;
	transition: 0.6s;
	height: 1.5px;
}
#service .card{
	height: 300px;
}
/* === COMPANY PART === */
#company{
	background-image:url(../images/parallax-1.jpg);
	height: 400px;
	display: block; 
}
#company .hvr-shutter-out-horizontal:nth-last-child(1):before{
	background: #6689FF;
}
#company .border-white:hover{
	border: 0;
}
.projects .card-img-overlay{
	background-color: #ffffff;
	margin: 18px;
	opacity: 0;
	transition: .4s;
}
.project-item .card:hover .card-img-overlay{
	opacity: 1;
	transition: .4s;
}
/* === LINE PART === */
.vertical-line{
  border-left: 2px solid #D7D7D7;
  height: 300px;
  position: absolute;
  left: 48%;
}
.vertex-line{
  border-bottom: 2px solid #D7D7D7;
  width: 350px;
  position: absolute;
  top: 52%;
}
.differ-line{
	border-left: 1px solid #D7D7D7;
	height: 30px;
}
.header-line{
	border-left: 1px solid #6c757d87;
	height: 25px;
}
/* === CLIENTS CLASSIC HOVER === */
.clients-classic {
    position: relative;
	margin: 0 auto;
    display: block;
    max-width: 270px;
    border: 1px solid #e1e1e1;
    transition: all .3s ease-in-out;
}
.clients-classic::before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid transparent;
    transition: all .3s ease;
    will-change: transform;
}
.clients-classic img {
    will-change: transform;
    transition: all .3s ease;
	width: 100%;
    opacity: .5;
}
.clients-classic:hover {
    border-color: #151515;
}
.clients-classic:hover img {
    opacity: 1;
    transform: scale(0.9);
}
.clients-classic:hover::before {
    transform: scale(0.94, 0.9);
    border-color: #151515;
}
/* === TEAM PART === */
.rectangle{
	border-bottom: 90px solid rgb(17 17 17 / 50%);
	border-right: 17px solid transparent;
	width: 82%;
	position: absolute;
	bottom: 20px;
	transition: .4s;
}
.card-img-overlay:hover>.rectangle{
	width: 89%;
	padding-left: 8%;
}
.team-img img{
	filter: grayscale(100%);
}
.team-img:hover img{
	filter: grayscale(0%);
}
/* === PRICE PART === */
#price hr{
	background-color: rgb(225 225 225 / 20%);
	margin-top: -50px;
	margin-bottom: 30px;
	width: 83%;
	z-index: 10;
}
#price .card h1{
	font-size: 4rem;
}
#price ul li h5{
	color: #1B1929;
	font-size: 0.9rem;
}
#price .card-footer a{
	padding: 15px 0;
}
#price .btn-primary-hover{
	background-color: #6689FF;
	color: #ffffff;
}
#price .btn-primary-hover:hover{
	color: #ffffff;
	background-color: #151515;
    border-color: #151515;
}
/* === FOOTER PART === */
footer li a{
	color: #ffffff;
}
footer li a:hover{
	color: #6689ff;
	transition: 0.5s;
}
footer .icon-hover li a{
	color: #6c757d;
}
#share-menu li a{
	color: #151515;
}
footer .icon-hover li a:hover,#share-menu li a:hover{
	color: #6689ff;
	transition: 0.5s;
}
.form-control{
	border-radius: 0;
	height: 50px;
	background-color: #EFEFEF;
}
/* === MORE DETAILS PART === */
.nav-tabs{
	justify-content: space-between;
    border-bottom: 3px solid #e1e1e1;
}
#more-details-tab .nav-tabs a{
	color: #9b9b9b;
	margin-bottom: -2.35px;
}
#more-details-tab .nav-tabs a.active{
	color: #6689ff;
	border-bottom: 2.6px solid #6689ff!important;
}
.hvr-ripple-out:hover{
	color: #151515;
	background-color: #ffffff;
}
/* === FILTER PART === */
.filter-button-group li.active {
    color: #6689ff!important;
}

@media (max-width:1200px){
	.vertical-line{
	  left: 48%;
	}
	.vertex-line{
	  top: 52%;
	  width: 83%;
	  margin: 0 auto;
	}
	#home h1{
		font-size: 3rem;
	}
}
@media (max-width:991px){
	#main-menu li a:hover{
		background-color: #6689FF;
		color: #ffffff!important;
	}
	#main-menu li a.active{
		background-color: #6689ff;
		color: #ffffff!important;
	}
}
@media (max-width:576px){
	#home h1{
		font-size: 2rem;
	}
}