/************** HERO SECTION *****************/
.hero {
	display: flex;
	color: #fff;
	position: relative;
}

.hero-text-box {
	flex: 1;
	background-color: #001b24;
	position: relative;
	display: flex;
	align-items: center;
	line-height: 4.5rem;
	padding: 5rem 3rem;
	font-size: 2rem;
	min-height: 20rem;
}

.hero-text-box h1 {
	width: 80%;
	font-weight: 500;
}

.hero-img {
	flex: 1;
	height: 100%;
}

.hero-img img {
	height: 100%;
	width: 100%;
	display: block;
}

.circle-svg {
	position: absolute;
	z-index: 1;
	top: 3rem;
	left: -3rem;
}

/************** HOME SHOWCASE SECTION *****************/
.home-showcase .container {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 5rem;
}

.home-showcase-img {
	margin-right: 3rem;
	min-height: 30rem;
	flex: 1;
}
.home-showcase-img img {
	width: 100%;
}

.home-showcase-text-box {
	flex: 1;
}

.home-showcase-text-box p {
	font-size: 2rem;
	line-height: 3rem;
	margin-bottom: 1rem;
}

.home-showcase-text-box p span {
	font-weight: bold;
}

/************** SERVICES SECTION *****************/
.services {
	margin: 8rem 0 1rem;
}

.services .container-fluid {
	display: flex;
	gap: 1.6rem;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.services-heading {
	font-size: 4rem;
	margin-bottom: 5rem;
}

.services-img {
	display: flex;
	align-items: center;
	justify-content: center;
}

.services img {
	max-width: 30rem;
	width: 100%;
	min-height: 10rem;
	display: block;
}

/************** CLIENTS FEEDBACK SECTION *****************/
.clients-feedback {
	padding: 8rem 0 10rem;
}

.clients-feedback-heading {
	font-size: 4.5rem;
	margin-bottom: 3rem;
}

.feedback-container {
	display: flex;
	/* align-items: center; */
	justify-content: center;
	flex-wrap: wrap;
}

.feedback {
	/* subtle box shadow */
	/* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); */
	/* padding: 2rem 3rem; */
	min-width: 30rem;
	max-width: 40rem;
	margin-top: 4rem;
	margin-right: 2rem;
	display: flex;
	flex-direction: column;
}

/********************************* FLIP CARD *****************************************/
.card {
	transform-style: preserve-3d;
	perspective: 600px;
	transition: 0.5s;
	flex: 1;
}

.card:hover .card-front {
	transform: rotateY(-180deg);
}
.card:hover .card-back {
	transform: rotateY(0deg);
}

.card-front {
	display: flex;
	flex-direction: column;

	height: 100%;
	width: 100%;
	background-position: 50% 50%;
	background-size: cover;
	padding: 2rem 3rem;
	backface-visibility: hidden;
	transform: rotateY(0deg);
	transition: 0.5s;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.card-back {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	color: #000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	backface-visibility: hidden;
	transform: rotateY(180deg);
	transition: 0.5s;
	text-align: center;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.card-back p {
	font-size: 1.6rem;
	margin-top: 2rem;
	font-weight: 500;
}

.card-back img {
	width: 24rem;
	margin: 0 auto;
}
/******************************************************************/
.quote-img {
	width: 4rem;
	transform: rotate(180deg);
}

.feedback p {
	margin-bottom: 0.6rem;
}

.feedback-desc {
	margin-top: 2rem;
	margin-bottom: 2rem !important;
	font-size: 1.4rem;
	line-height: 1.5;
}

.client-name,
.client-work-place {
	font-weight: 600;
	font-size: 1.5rem;
	position: relative;
}

.feedback-bottom {
	display: flex;
	margin-top: auto;
}
.feedback-bottom .feedback-author {
	margin-right: 1rem;
}
.feedback-bottom .client-position {
	font-style: italic;
	font-size: 1.3rem;
}

/* .feedback .client-name::before {
	content: "";
	width: 10px;
	height: 3px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	background-color: #fdc221;
} */
/************** TESTIMONIALS SECTION *****************/
.testimonials {
	padding: 11.5rem 0;
	background-color: #f8f9fa;
	margin-top: 5rem;
}

.testimonials h2 {
	font-size: 4.5rem;
	font-weight: 700;
	line-height: 7.5rem;
}

.testimonials-slogan {
	font-family: "Playball", sans-serif;
	font-size: 1.6rem;
	line-height: 2rem;
}

.industry-categories {
	display: flex;
	justify-content: space-around;
	margin-top: 5rem;
	flex-wrap: wrap;
	gap: 3rem;
}

.industry-category {
	text-align: center;
	background-color: white;
	border-radius: 10px;
	padding: 3rem 2rem;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	width: 250px;
}

.industry-category:hover {
	transform: translateY(-10px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.industry-icon {
	font-size: 3.5rem;
	color: #fdc221;
	margin-bottom: 1.5rem;
}

.industry-category h3 {
	font-size: 2rem;
	margin-bottom: 1rem;
	font-weight: 600;
}

.industry-category p {
	font-size: 1.4rem;
	color: #666;
	line-height: 1.6;
}

/************** SMALL LAPTOPS *****************/
@media (max-width: 1260px) {
	.hero-text-box {
		font-size: 1.6rem;
		line-height: 3.6rem;
	}
	.hero-text-box h1 {
		width: 90%;
	}
}

@media (max-width: 1150px) {
	.time-img-container {
		display: none;
	}
	.hero-text-box {
		font-size: 1.4rem;
	}
}

/************** TABLETS AND MOBILES VERSION *****************/

@media (max-width: 920px) {
	.hero {
		flex-direction: column;
	}
	.hero-text-box {
		order: 2;
		background-color: white;
		color: #000;
	}

	.hero-img {
		order: 1;
	}

	.home-showcase-text-box p {
		font-size: 1.6rem;
		line-height: 2.4rem;
	}

	.testimonials-imgs img {
		height: 6rem;
	}

	.testimonials {
		padding: 2rem 0;
	}

	.testimonials h2 {
		font-size: 3.2rem;
		font-weight: 600;
		line-height: 6rem;
	}

	.testimonials-slogan {
		font-family: "Playball", sans-serif;
		font-size: 1.6rem;
		line-height: 1.2rem;
	}

	.industry-categories {
		flex-direction: column;
		align-items: center;
		gap: 2rem;
		margin-top: 2rem;
	}
	
	.industry-category {
		width: 80%;
		max-width: 300px;
	}
}

@media (max-width: 780px) {
	.home-showcase .container {
		flex-direction: column;
		/* font-size: 1.3rem; */
	}
	.home-showcase-text-box {
		margin-top: 3rem;
	}
}

@media (max-width: 500px) {
	.hero-text-box {
		padding: 5rem 1.6rem;
	}
	.hero-text-box h1 {
		font-size: 1.5rem;
		line-height: 2.2rem;
		width: 100%;
	}
	.clients-feedback-heading {
		font-size: 2.5rem;
		margin-bottom: 0;
		line-height: 3rem;
	}

	.services-heading {
		font-size: 2.4rem;
	}

	.home-page .container-fluid {
		padding: 0 1.6rem;
	}

	.home-showcase-text-box p {
		font-size: 1rem;
		line-height: 1.6rem;
	}

	.feedback {
		margin-right: 0;
		min-width: auto;
		padding: 1rem 1.5rem;
	}

	.feedback .client-name,
	.feedback .client-work-place {
		font-size: 1.2rem;
	}
	.feedback-desc {
		font-size: 1.2rem;
	}

	.testimonials h2 {
		font-size: 2.4rem;
		line-height: 3.2rem;
	}
	.testimonials-slogan {
		font-size: 1.2rem;
	}
	
	.industry-category {
		padding: 2rem 1.5rem;
	}
	
	.industry-icon {
		font-size: 2.8rem;
	}
	
	.industry-category h3 {
		font-size: 1.8rem;
	}
	
	.industry-category p {
		font-size: 1.2rem;
	}
}