//=====section hero slider starts=====
.heroSlider{
	background-color: #14151b;
	.swiper-slide{
		position: relative;
		&::before{
			@include overlay;
			background: #000;
			opacity: .7;
		}
		img{
			width: 100%;
			height: 800px;
			@include breakpoint (wider)
			{
				height: 700px;
			}
			@include breakpoint (medium)
			{
				height: 600px;
			}
			@include breakpoint (small)
			{
				height: 500px;
			}
			@include breakpoint (smaller)
			{
				height: 440px;
			}
		}
		.text{
			position: absolute;
			left: 0;
			top: 55%;
			transform: translateY(-50%);
			width: 100%;
			padding: 0 7%;
			@include breakpoint (smaller)
			{
				padding: 0 5%;
			}
			h2{
				font-size: 70px;
				color: #fff;
				font-weight: 700;
				width: 80%;
				margin: 0 auto;
				@include breakpoint (wider)
				{
					width: 100%;
					font-size: 60px;
				}
				@include breakpoint (medium)
				{
					font-size: 50px;
				}
				@include breakpoint (small)
				{
					font-size: 40px;
				}
				@include breakpoint (smaller)
				{
					font-size: 26px;
					font-weight: 700;
				}
				span{
					color: var(--primary);
				}
			}
			h4{
				color: #fff;
				font-weight: 600;
				margin: 20px auto;
				@include breakpoint (smaller)
				{
					font-size: 18px;
					text-overflow: ellipsis;
					overflow: hidden;
					-webkit-box-orient: vertical;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					margin: 16px auto;
				}
			}
			p{
				color: #fff;
				width: 70%;
				font-weight: 300;
				margin: 0 auto 20px;
				@include breakpoint (wider)
				{
					width: 80%;
				}
				@include breakpoint (medium)
				{
					width: 90%;
				}
				@include breakpoint (smaller)
				{
					width: 100%;
					font-size: 15px;
					margin-bottom: 12px;
					text-overflow: ellipsis;
					overflow: hidden;
					-webkit-box-orient: vertical;
					display: -webkit-box;
					-webkit-line-clamp: 2;	
					display: none;
				}
			}
		}
	}
	.swiper-button-next, 
	.swiper-button-prev{
		height: 60px;
		line-height: 60px;
		width: 60px;
		text-align: center;
		border-radius: 50%;
		border: 1px solid #fff;
		@include breakpoint (small)
		{
			height: 40px;
			line-height: 40px;
			width: 40px;
		}
		@include breakpoint (smaller)
		{
			height: 34px;
			line-height: 34px;
			width: 34px;
			top: 80%;
		}
		&::after{
			font-size: 18px;
			color: #fff;
			@include breakpoint (small)
			{
				font-size: 16px;
			}
			@include breakpoint (smaller)
			{
				font-size: 14px;
			}
		}
	}
	
}
.particles-js{
	position: absolute;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	z-index: 0;
	top: 0;
	left: 0;
}
//=====section hero slider ends=====

//=====section feature starts======
.feature{
	//background-image: radial-gradient(at center center, #6c0ab0 -80%, var(--secondary) 100%);
	background-color: #0E1B4E;
}
.feature-row{
	@include row;
	.feature-col{
		@include col(33.33%);
		@include breakpoint (smaller)
		{
			@include col(100%);
		}
		
	}
}
.feat-item{		
	background-color: #0b0c106b;
	padding: 20px;
	width: 100%;
	border-radius: 10px;
	@include transition (.3s);
	@include breakpoint (smaller)
	{
		padding: 1rem;
	}
	.image{
		overflow: hidden;
		border-radius: 4px;
	}
	img{
		height: 220px;
		width: 100%;
		@include transition (.5s);
		@include breakpoint (wider)
		{
			height: 190px;
		}
		@include breakpoint (smaller)
		{
			height: auto;
		}
	}
	h4{
		font-weight: 600;
		margin: 16px 0 0;
		font-size: 20px;
		@include breakpoint (wider)
		{
			font-size: 18px;
		}
	}
	&:hover{
		box-shadow: 0px 0px 15px rgba(0,0,0,0.6);
		.image{
			img{
				transform: scale(1.2);
			}
		}
	}
}
//=====section feature ends======

//=====section about us starts=====
.about{
	position: relative;
	&::before{
		@include overlay;
		background-color: #14151b;
		z-index: -1;
	}
	.desc-col{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.heading{
		color: #fff;
		font-size: 50px;
		font-weight: 700;
		margin: 0;
		@include breakpoint (wider)
		{
			font-size: 40px;
		}
		@include breakpoint (small)
		{
			font-size: 34px;
		}
		@include breakpoint (smaller)
		{
			font-size: 24px;
		}
	}
	.abt-desc{
		h5{
			color: #fff;
			font-weight: 600;
			margin-bottom: 20px;
			@include breakpoint (small)
			{
				margin-bottom: 16px;
			}
			@include breakpoint (smaller)
			{
				margin-bottom: 10px;
			}
			span{
				color: var(--primary);
			}
		}
		p{
			text-align: justify;
			@include breakpoint (smaller)
			{
				text-align: left;
			}
		}
		h4{
			font-size: 26px;
			margin-bottom: 1rem;
			font-weight: 100;
			@include breakpoint (wider)
			{
				font-size: 24px;
			}
			@include breakpoint (smaller)
			{
				font-size: 20px;
			}
		}
	}
	.abt-img{
		position: relative;
		padding-left: 100px;
		@include breakpoint (wider)
		{
			padding-left: 80px;
		}
		@include breakpoint (medium)
		{
			padding-left: 60px;
		}
		@include breakpoint (small)
		{
			padding-left: 0;
			margin-top: 5%;
		}
		img{
			height: 100%;
			@include breakpoint(small)
			{
				height: auto;
			}
		}
	}
	.overlay-btm{
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: #0E1B4E;
		height: 200px;
		width: 50%;
		z-index: -1;
		@include breakpoint (small)
		{
			width: 100%;
			height: 100px;
		}
	}
	.overlay-top{
		position: absolute;
		top: 5%;
		left: 3%;
		background-color: var(--secondary);
		height: 200px;
		width: 200px;
		z-index: -1;
		@include breakpoint (small)
		{
			width: 100px;
			height: 100px;
		}
	}
}
.about-us{
	.intro{
		p{
			text-align: justify;
			@include breakpoint (smaller)
			{
				text-align: left;
			}
		}
	}
	b, strong{
		font-weight: 700;
	}
}
.featured-image{
	img{
		width: 100%;
		height: 500px;
		filter: hue-rotate(0deg) brightness(0.8) grayscale(0%);
		@include breakpoint (smaller)
		{
			height: auto;
		}
	}
}
.abt-ftr-row{
	@include row;
	.abt-ftr-col{
		@include col(25%);
		@include breakpoint (medium)
		{
			@include col(50%);
		}
		@include breakpoint (smaller)
		{
			@include col(100%);
		}
	}
}
.feature-item{
	background-color: #2e3a8c;
	border-radius: 4px;
	overflow: hidden;
	img{
		width: 100%;
		height: 220px;
		@include breakpoint (wider)
		{
			height: 200px;
		}
	}
	.ftr-title{
		padding: 16px;
		font-size: 18px;
		margin: 0;
		@include breakpoint (smaller)
		{
			font-size: 16px;
		}
	}
}
.about-info{
	ul{
		padding-left: 1rem;
	}
	li{
		position: relative;
		list-style-type: none;
		padding-left: 24px;
		margin-bottom: 10px;
		&::before{
			content: '\f560';
			@include fontawesome;
			position: absolute;
			top: 2px;
			left: 0;
			color: var(--primary);
		}
	}
}
.about-block{
	h1, h2:not(.entry-title), h3:not(.entry-title), h4, h5, h6{
		font-size: 20px;
		@include breakpoint (smaller)
		{
			font-size: 18px;
		}
	}
}
.vision-img{
	img{
		width: 100%;
		height: 100%;
	}
}
.team-item{
	text-align: center;
	img{
		width: 100%;
		height: 260px;
		border-radius: 10px;
		@include breakpoint (wider)
		{
			height: 230px;
		}
		@include breakpoint (smaller)
		{
			height: auto;
		}
	}
	h5{
		font-size: 18px!important;
		margin: 10px 0 4px;
	}
	span{
		margin: 0;
		font-weight: 400;
		color: var(--primary);
	}
}
//=====section about us ends=====

//=====section our services starts=====
.services, .portfolio{
	background-color: #14151b;
}
.card1{
	width: 100%;
	background-color: #2e3a8c;
	padding: 40px;
	text-align: center;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 341px;
	position: relative;
	overflow: hidden;
	z-index: 1;
	@include breakpoint (wider)
	{
		padding: 30px;
	}
	@include breakpoint (medium)
	{
		height: 100%;
	}
	@include breakpoint (smaller)
	{
		height: auto;
		padding: 20px;
	}
	img{
		width: 50px;
		@include transition (.5s);
	}
	h4{
		color: #fff;
		font-weight: 600;
		margin: 20px 0;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		-webkit-line-clamp: 3;  
		font-size: 22px;
		@include breakpoint (wider)
		{
			font-size: 20px;
		}
		@include breakpoint (smaller)
		{
			margin: 16px 0;
			font-size: 18px;
		}
	}
	p{
		color: #ccc;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		-webkit-line-clamp: 3;  
	}
	.link{
		color: var(--primary);
		text-transform: uppercase;
		font-weight: 500;
	}
	&::before{
		content: '';
		position: absolute;
		background-color: var(--secondary);
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: -1;
		transform: translateY(-100%);
		@include transition (.6s);
	}
	&:hover::before {
		transform: translate(0);
	}
}
.single-service{
	@include breakpoint(smaller)
	{
		background-color: #2e3a8c;
	}
	.entry-title{
		color: var(--primary);
		font-weight: 800;
	}
	ul{
		margin-bottom: 1rem;
		li{
			margin-bottom: 8px;
		}
	}
	p{
		b, strong{
			font-weight: 600;
		}
	}
	.site-main{
		background-color: #2e3a8c;
	}
}
.service-modal{
	.modal-header{
		border-bottom: 1px dashed #48506f;
	}
	.modal-footer{
		border-top: 1px dashed #48506f;
		.btn-one{
			font-size: 14px;
			padding: 8px 18px;
		}
	}
	.modal-title{
		font-size: 24px;
		font-weight: 600;
		color: var(--primary);
		@include breakpoint (wider)
		{
			font-size: 22px;
		}
		@include breakpoint (smaller)
		{
			font-size: 20px;
		}
	}
	.modal-content{
		background-color: #0e1b4e;
		color: #fff;
		.modal-body{
			p{
				text-align: justify;
				@include breakpoint (smaller)
			{
				text-align: left;
			}
			}
			h1, h2, h3, h4, h5, h6{
				font-size: 20px;
				font-weight: 600;
				color: var(--primary);
				@include breakpoint (smaller)
				{
					font-size: 18px;
				}
				strong, b{
					font-weight: 600;
				}
			}
			ul{
				margin-bottom: 1rem;
				li{
					margin-bottom: 8px;
				}
			}
			img{
				margin-bottom: 24px;
				@include breakpoint (smaller)
				{
					margin-bottom: 16px;
				}
			}
		}
	}
	.btn-close{
		background-color: #fff;
	}
}
.cs-row{
	@include row;
	@include breakpoint (smaller)
	{
		margin: 0 -8px;
	}
	.cs-col{
		@include col(33.33%);
		@include breakpoint (small)
		{
			@include col(50%);
		}
		@include breakpoint (smaller)
		{
			@include col(100%);
			padding: 0 8px;
		}
		.cs-item{
			position: relative;
			background-color: #0e1b4e;
			padding: 24px;
			border-radius: 10px;
			overflow: hidden;
			height: 280px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: default;
			@include breakpoint (smaller)
			{
				display: block;
				height: auto;
				padding: 1rem;
			}
			span{
				font-size: 22px;
				font-weight: 600;
				display: block;
				text-align: center;
				@include transition (.3s);
				@include breakpoint (wider)
				{
					font-size: 20px;
				}
				@include breakpoint (smaller)
				{
					text-align: left;
				}
			}
			.desc{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				padding: 24px;
				opacity: 0;
				@include transition (.3s);
				@include breakpoint (smaller)
				{
					position: relative;
					padding: 0;
					opacity: 1;
					margin-top: 8px;
				}
				p{
					text-overflow: ellipsis;
					overflow: hidden;
					-webkit-box-orient: vertical;
					display: -webkit-box;
					-webkit-line-clamp: 8;
					margin-bottom: 8px;	
					text-align: left;
				}
				a{
					color: var(--primary);
					border-bottom: 1px solid var(--primary);
					padding-bottom: 2px;
				}
			}
			&:hover{
				span{
					opacity: 0;
				}
				.desc{
					opacity: 1;
				}
			}
		}
	}
}
.service-block{
	h1, h2, h3, h4, h5, h6{
		font-size: 24px;
		margin-bottom: 16px;
		font-weight: 600;
		b, strong{
			font-weight: 600;
		}
		@include breakpoint (wider)
		{
			font-size: 22px;
		}
		@include breakpoint (smaller)
		{
			font-size: 20px;
			margin-bottom: 10px;
			
		}
	}
}
.bdr-top{
	border-top: 1px solid #7177a0;
	padding-top: 4%;
	margin-top: 4%;
}
.service-accordion{
	.accordion-item{
		border: none;
		background-color: transparent;
		color: #fff;
		padding: 20px 0;
		&:not(:last-child){
			border-bottom: 1px solid #4b57a7;
		}
		.count{
			margin-right: 20px;
			@include breakpoint (smaller)
			{
				margin-right: 10px;
			}
		}
		.accordion-button{
			background-color: transparent;
			color: #fff;
			padding: 0;
			&::after{
				content: '\f078';
				font-family: "Font Awesome 6 Free";
				font-weight: 900;
				background-image: none;
				color: #aaa;
				font-size: 13px;
				height: 24px;
				line-height: 24px;
				width: 24px;
				text-align: center;
				border: 1px solid #aaa;
				border-radius: 50%;
			}
			&:not(.collapsed)::after{
				transform: rotate(180deg);
				color: var(--primary);
				border-color: var(--primary);
			}
		}
		.count, .accordion-button{
			font-size: 20px;
			font-weight: 500;
			@include breakpoint (smaller)
			{
				font-size: 18px;
			}
		}
		.accordion-body{
			padding: 1rem 0 0;
		}
	}
}
.extra-details h4:not(:first-child){
	margin-top: 4%;
}
//=====section our services ends=====

//=====section portfolio starts=====
.card2{
	img{
		width: 100%;
		height: 310px;
		@include breakpoint (smaller)
		{
			height: 170px;
		}
	}
	h4{
		font-weight: 700;
		color: #fff;
		margin: 16px 0 10px;
		@include breakpoint (smaller)
		{
			font-size: 18px;
		}
	}
	p{
		color: #eee;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		-webkit-line-clamp: 4;  
	}
}
.portfolioSlider{
	.swiper-pagination{
		position: relative;
		bottom: unset;
		.swiper-pagination-bullet{
			height: 14px;
			width: 30px;
			border-radius: 20px;
			border: 1px solid #fff;
			@include transition (.3s);
			@include breakpoint (smaller)
			{
				width: 26px;
			}
		}
		.swiper-pagination-bullet-active{
			background-color: #fff;
			width: 14px;
		}
	}
}
//=====section portfolio ends=====

//=====section at background starts=====
.at-bg{
	background-position: center;
	background-size: cover;
	position: relative;
	z-index: 1;
	&::before{
		@include overlay;
		background-color: #000c14;
		opacity: .95;
		z-index: -1;
	}
}
//=====section at background ends=====

//=====section testimonial starts=====
.card3{
	background-color: var(--secondary);
	padding: 20px;
	border-radius: 10px;
	.rating{
		margin-bottom: 16px;
		i{
			color: #efb70a;
			font-size: 15px;
		}
	}
	.author{
		img{
			height: 50px;
			width: 50px;
			max-width: 50px;
			border-radius: 50%;
		}
		.name{
			margin-left: 16px;
			h6{
				color: #fff;
				font-weight: 600;
				margin-bottom: 4px;
			}
			span{
				color: #ddd;
			}
			a{
				color: var(--primary);
				&:hover{
					color: var(--tertiary);
				}
			}
			span, a{
				font-size: 14px;
				@include breakpoint (smaller)
				{
					font-size: 13px;
				}
			}
		}
	}
	.desc{
		.caption{
			color: #fff;
			font-weight: 600;
			margin: 16px 0 10px;
			font-size: 18px;
		}
		p{
			color: #ccc;
			margin: 0;
			text-align: justify;
			@include breakpoint (smaller)
			{
				text-align: left;
			}
		}
	}
}
.testimonialSlider{
	.swiper-slide{
		height: auto;
	}
}
.test-inner{
	position: relative;
	.swiper-button-next, 
	.swiper-button-prev{
		height: 50px;
		line-height: 50px;
		width: 50px;
		text-align: center;
		border-radius: 50%;
		border: 1px solid #fff;
		@include breakpoint (small)
		{
			height: 40px;
			line-height: 40px;
			width: 40px;
		}
		@include breakpoint (smaller)
		{
			height: 34px;
			line-height: 34px;
			width: 34px;
		}
		&::after{
			font-size: 18px;
			color: #fff;
			@include breakpoint (small)
			{
				font-size: 16px;
			}
			@include breakpoint (smaller)
			{
				font-size: 14px;
			}
		}
	}
	.swiper-button-prev{
		left: 20px;
		@include breakpoint(smaller)
		{
			left: 10px;
		}
	}
	.swiper-button-next{
		right: 20px;
		@include breakpoint(smaller)
		{
			right: 10px;
		}
	}
}
//=====section testimonial ends=====

//=====section why choose us starts=====
.card4{
	padding-left: 65px;
	position: relative;
	cursor: pointer;
	@include breakpoint (smaller)
	{
		padding-left: 55px;
	}
	.icon{
		position: absolute;
		top: 0;
		left: 0;
		img{
			width: 50px;
			@include breakpoint (smaller)
			{
				width: 45px;
			}
		}
	}
	.desc{
		h5{
			font-weight: 600;
			color: #fff;
			@include transition (.3s);
			@include breakpoint (smaller)
			{
				font-size: 18px;
			}
		}
		p{
			color: #ccc;
			@include breakpoint (smaller)
			{
				font-size: 15px;
			}
			
		}
	}
	&:hover{
		.desc{
			h5{
				color: var(--primary);
			}
		}
	}
}
.wcu-img{
	img{
		width: 100%;
		height: 100%;
		filter: hue-rotate(0deg) brightness(0.8) grayscale(0%);
		@include breakpoint (smaller)
		{
			height: auto;
		}
	}
}
.callout{
	margin-top: 3%;
	ul{
		@include row;
		margin: 0 -8px;
		li{
			@include col(20%);
			padding: 0 8px;
			@include breakpoint (medium)
			{
				@include col(25%);
				padding: 0 8px;
			}
			@include breakpoint (small)
			{
				@include col(33.33%);
				padding: 0 8px;
			}
			@include breakpoint (smaller)
			{
				@include col(50%);
				padding: 0 8px;
			}
			.image{
				position: relative;
				overflow: hidden;
				img{
					height: 400px;
					width: 100%;
					@include transition (.5s);
					@include breakpoint (wider)
					{
						height: 350px;
					}
					@include breakpoint (smaller)
					{
						height: 300px;
					}
				}
				h5{
					margin: 0;
					width: 100%;
					line-height: 1.4;
					position: absolute;
					left: 0;
					bottom: 0;
					padding: 30% 20px 20px;
					background: linear-gradient(to top, #000 30%, #ffffff00 100%);
					font-weight: 700;
					@include transition (.3s);
					@include breakpoint (smaller)
					{
						padding: 30% 1rem 1rem;
						font-size: 18px;
					}
				}
			}
			&:hover{
				.image{
					img{
						transform: scale(1.2);
					}
					h5{
						color: var(--primary);
					}
				}
			}
		}
	}
}
//=====section why choose us ends=====

//=====section accelerate starts=====
.acc-item{
	text-align: center;
	.icon{
		img{
			width: 70px;
			@include breakpoint (smaller)
			{
				width: 60px;
			}
		}
	}
	h5{
		font-weight: 700;
		margin: 1rem 0;
		color: var(--primary);
		@include breakpoint (wider)
		{
			font-size: 18px;
		}
		@include breakpoint (smaller)
		{
			margin: 10px 0;
		}
	}
	p{
		margin: 0;
		@include breakpoint (wider)
		{
			font-size: 15px;
		}
	}
}
.acc-col{
	&:not(:last-child){
		border-right: 1px dashed #404659;
		@include breakpoint (smaller)
		{
			border-right: none;
		}
		.acc-item{
			@include breakpoint (smaller)
			{
				border-bottom: 1px dashed #666;
				padding-bottom: 1rem;
			}
		}
	}
}
//=====section accelerate ends=====

//=====section info banner starts=====
.info-banner{
	padding: 5% 0;
	background-position: center;
	background-size: cover;
	position: relative;
	z-index: 1;
	@include breakpoint (smaller)
	{
		padding: 8% 0;
	}
	.overlay{
		@include overlay;
		background-color: #001f3fab;
		z-index: -1;
	}
	h2{
		font-weight: 700;
		font-size: 70px;
		color: #fff;
		width: 60%;
		margin: 0 auto 20px;
		span{
			color: var(--primary);
		}
		@include breakpoint (wider)
		{
			font-size: 60px;
			width: 100%;
		}
		@include breakpoint (medium)
		{
			font-size: 50px;
		}
		@include breakpoint (small)
		{
			font-size: 40px;
		}
		@include breakpoint (smaller)
		{
			font-size: 26px;
		}
	}
}
//=====section info banner ends=====

//=====section contact us starts=====
.contact-aside{
	@include breakpoint (medium)
	{
		margin-top: 5%;
	}
}
.contact-us{
	.accordion{
		.accordion-item{
			background-color: transparent;
			border-color: #23252f;
			color: #fff;
			button{
				background-color: transparent;
				color: #fff;
				font-weight: 500;
				font-size: 18px;
				@include breakpoint (smaller)
				{
					font-size: 16px;
					padding: 1rem;
				}
			}
			.accordion-button:focus, .accordion-button:not(.collapsed){
				box-shadow: none;
			}
			.accordion-button::after {
				content: '\f078';
				font-family: "Font Awesome 6 Free";
				font-weight: 900;
				background-image: none;
				color: #fff;
				font-size: 12px;
				height: 24px;
				line-height: 24px;
				width: 24px;
				text-align: center;
				border: 1px solid #fff;
				border-radius: 50%;
			}
			.accordion-button:not(.collapsed)::after{
				transform: rotate(180deg);
				color: var(--primary);
				border-color: var(--primary);
			}
			.accordion-body{
				padding-top: 0;
				@include breakpoint (smaller)
				{
					padding: 0 1rem 1rem;
				}
				p{
					text-align: justify;
				}
			}
		}
	}
}
//=====section contact us ends=====