@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

html {
	scroll-behavior: smooth;
}

body {
	background: hsl(var(--b2)/1);
}

 /* -------------------------------------------------------------------------- */
 /*                              Create line clamp                             */
 /* -------------------------------------------------------------------------- */

.line-clamp-1 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
}

.line-clamp-2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
}

.line-clamp-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
}

/* -------------------------------------------------------------------------- */
/*                       Card Border Style                                     */
/* -------------------------------------------------------------------------- */
.card::before {
	position: absolute;
	content: '';
	height: 0%;
	width: 0%;
	border: 1px solid hsl(var(--p) / 1);
	bottom: 0;
	right: 0;
	border-top: none;
	border-left: none;
	opacity: 0;
	transition: all 0.5s ease-in-out;
	border-image: linear-gradient(130deg, hsl(var(--p) / 1), transparent, transparent, hsl(var(--p) / 1)) 1;
}

.card::after {
	position: absolute;
	content: '';
	height: 0%;
	width: 0%;
	border: 1px solid hsl(var(--p) / 1);
	top: 0;
	left: 0;
	border-right: none;
	border-bottom: none;
	opacity: 0;
	transition: all 0.5s ease-in-out;
	border-image: linear-gradient(130deg, hsl(var(--p) / 1), transparent, transparent, hsl(var(--p) / 1)) 1;
}

.card:hover::before {
	height: 100%;
	width: 100%;
	opacity: 1;
}
.card:hover::after {
	height: 100%;
	width: 100%;
	opacity: 1;
}

/* -------------------------------------------------------------------------- */
/*                                Fil box style                               */
/* -------------------------------------------------------------------------- */

.flip-box {
	perspective: 1000px;
}

.flip-box-inner {
	transition: transform 0.8s;
	transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
	transform: rotateY(180deg);
}

.flip-box-front,
.flip-box-back {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.flip-box-back {
	transform: rotateY(180deg);
}

/* -------------------------------------------------------------------------- */
/*                              Custom Container                             */
/* -------------------------------------------------------------------------- */

.largeContainer {
	max-width: 1472px;
	width: 100%;
	margin: 0 auto;
}

@media (max-width: 1340px) {
	.largeContainer {
		max-width: 1180px;
		margin: 0 auto;
	}
	.responsive_status {
		display: block;
	}
	.desktop_sidebar {
		display: none;
	}
}

@media (min-width: 1341px) {
	.responsive_status {
		display: none;
	}
	.desktop_sidebar {
		display: block;
	}
}

@media (min-width: 1536px) {
	.largeContainer {
		max-width: 1472px;
	}
}

/* -------------------------------------------------------------------------- */
/*                              Style for slider                              */
/* -------------------------------------------------------------------------- */
.project-slider .slick-dots {
	margin-top: 70px !important;
	bottom: auto !important;
}

.project-slider .slick-list .slick-track {
	padding-bottom: 10px;
}

.slick-dots li button:before {
	color: hsl(var(--p) / 1) !important;
	font-size: 8px !important;
}


.testimonial-slider .slick-dots {
	margin-top: 70px !important;
	bottom: auto !important;
}


.slick-track {
	display: flex !important;
	align-items: center;
	gap: 24px;
}

#service-slider .slick-dots {
	margin-top: 30px !important;
	bottom: auto !important;
}

#service-slider .slick-list .slick-track {
	padding-bottom: 10px;
}

#service-slider li button:before {
	color: hsl(var(--bc) / 1) !important;
	font-size: 8px !important;
}

#feedback-slider .slick-dots {
	margin-top: 10px !important;
	bottom: auto !important;
}

#feedback-slider .slick-list .slick-track {
	padding-bottom: 10px;
}

#feedback-slider li button:before {
	color: #131313 !important;
	font-size: 8px !important;
}




/* -------------------------------------------------------------------------- */
/*                            Style for tabs                           */
/* -------------------------------------------------------------------------- */

.tab-hidden {
  display: none;
}

.active div h6 {
	color: #F78F42;
}

.active div div {
	border: 1px solid #F78F42;
	width: 40px;
}