@charset "UTF-8";

/* =================================================================== 
 * MCAV Tarpaulin Printing Main Website Style Sheet
 * Ver. 1.0.0
 * 02-24-2025
 * ------------------------------------------------------------------

/* ------------------------------------------------------------------- 
 * ## colors
 * ------------------------------------------------------------------- */
:root {
	/* color-1(#EA9010)
	 * color-2(#343D35)
	 * color-3(#FEF5E4)
	 */
	--primary: #e61c26;
	--secondary: #f7d31d;
	--light: #f4f6f8;
	--dark: #040f28;

	--color-1: hsla(35, 87%, 49%, 1);
	--color-2: hsla(127, 8%, 22%, 1);
	--color-3: hsla(39, 93%, 95%, 1);

	/* theme color variations
	 */
	--color-1-lightest: hsla(35, 87%, 96%, 1);
	--color-1-lighter: hsla(35, 87%, 69%, 1);
	--color-1-light: hsla(35, 87%, 59%, 1);
	--color-1-dark: hsla(35, 87%, 39%, 1);
	--color-1-darker: hsla(35, 87%, 29%, 1);
	--color-1-darkest: hsla(35, 87%, 10%, 1);

	--color-2-lightest: hsla(127, 8%, 55%, 1);
	--color-2-lighter: hsla(127, 8%, 42%, 1);
	--color-2-light: hsla(127, 8%, 32%, 1);
	--color-2-dark: hsla(127, 8%, 14%, 1);
	--color-2-darker: hsla(127, 8%, 2%, 1);

	--color-3-light: hsla(39, 93%, 100%, 1);
	--color-3-dark: hsla(39, 93%, 85%, 1);
	--color-3-darker: hsla(39, 93%, 75%, 1);

	/* feedback colors
	 * color-error(#ffd1d2), color-success(#c8e675), 
	 * color-info(#d7ecfb), color-notice(#fff099)
	 */
	--color-error: hsla(359, 100%, 91%, 1);
	--color-success: hsla(76, 69%, 68%, 1);
	--color-info: hsla(205, 82%, 91%, 1);
	--color-notice: hsla(51, 100%, 80%, 1);
	--color-error-content: hsla(359, 50%, 50%, 1);
	--color-success-content: hsla(76, 29%, 28%, 1);
	--color-info-content: hsla(205, 32%, 31%, 1);
	--color-notice-content: hsla(51, 30%, 30%, 1);

	/* shades 
	 * generated using 
	 * Tint & Shade Generator 
	 * (https                     ://maketintsandshades.com/)
	 */
	--color-black: #000000;
	--color-gray-19: #121212;
	--color-gray-18: #242525;
	--color-gray-17: #363737;
	--color-gray-16: #484949;
	--color-gray-15: #5b5c5c;
	--color-gray-14: #6d6e6e;
	--color-gray-13: #7f8080;
	--color-gray-12: #919292;
	--color-gray-11: #a3a5a5;
	--color-gray-10: #b5b7b7;
	--color-gray-9: #bcbebe;
	--color-gray-8: #c4c5c5;
	--color-gray-7: #cbcdcd;
	--color-gray-6: #d3d4d4;
	--color-gray-5: #dadbdb;
	--color-gray-4: #e1e2e2;
	--color-gray-3: #e9e9e9;
	--color-gray-2: #f0f1f1;
	--color-gray-1: #f8f8f8;
	--color-white: #ffffff;

	/* text
	 */
	--color-text: var(--color-gray-18);
	--color-text-dark: #181818;
	--color-text-light: var(--color-gray-14);
	--color-placeholder: var(--color-gray-12);

	/* link
	 */
	--color-link: var(--color-1);
	--color-link-hover: var(--color-2-lighter);
	--color-link-active: var(--color-2-lighter);

	/* buttons
	 */
	--color-btn: var(--color-gray-4);
	--color-btn-text: var(--color-text);
	--color-btn-hover: var(--color-gray-5);
	--color-btn-hover-text: var(--color-text);
	--color-btn-primary: var(--color-1);
	--color-btn-primary-text: var(--color-2-dark);
	--color-btn-primary-hover: var(--color-1-light);
	--color-btn-primary-hover-text: var(--color-2-dark);
	--color-btn-stroke: var(--color-text-dark);
	--color-btn-stroke-text: var(--color-text-dark);
	--color-btn-stroke-hover: var(--color-text-dark);
	--color-btn-stroke-hover-text: var(--color-white);

	/* preloader
	 */
	--color-preloader-bg: var(--primary);
	--color-loader: var(--color-white);
	--color-loader-light: var(--color-2-light);

	/* others
	 */
	--color-body: white;
	--color-border: rgba(0, 0, 0, 0.1);
	--border-radius: 5px;
}

/* ===================================================================
   * # PRELOADER
   * 
   * 
   * -------------------------------------------------------------------
   * - markup:
   *
   * <div id="preloader">
   *     <div id="loader" class="dots-fade">
   *         <div></div>
   *         <div></div>
   *         <div></div>
   *     </div>
   * </div>
   *
   * - loader class:
   * <dots-fade | dots-jump | dots-pulse>
   *
   * ------------------------------------------------------------------- */
#preloader {
	position: fixed;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	background: var(--color-preloader-bg);
	z-index: 1051;
	height: 100vh;
	width: 100%;
	opacity: 1;
	overflow: hidden;
}

.no-js #preloader {
	display: none;
}

#loader {
	position: relative;
	width: 4px;
	height: 4px;
	padding: 0;
	display: inline-block;
}

#loader > div {
	content: "";
	background: var(--color-white);
	width: 4px;
	height: 4px;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
}

#loader > div:nth-of-type(1) {
	left: 15px;
}

#loader > div:nth-of-type(3) {
	left: -15px;
}

/* dots jump */
.dots-jump > div {
	-webkit-animation: dots-jump 1.2s infinite ease;
	animation: dots-jump 1.2s infinite ease;
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.dots-jump > div:nth-of-type(1) {
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

.dots-jump > div:nth-of-type(3) {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

@-webkit-keyframes dots-jump {
	0% {
		top: 0;
	}

	40% {
		top: -6px;
	}

	80% {
		top: 0;
	}
}

@keyframes dots-jump {
	0% {
		top: 0;
	}

	40% {
		top: -6px;
	}

	80% {
		top: 0;
	}
}

/* dots fade */
.dots-fade > div {
	-webkit-animation: dots-fade 1.6s infinite ease;
	animation: dots-fade 1.6s infinite ease;
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

.dots-fade > div:nth-of-type(1) {
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
}

.dots-fade > div:nth-of-type(3) {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

@-webkit-keyframes dots-fade {
	0% {
		opacity: 1;
	}

	40% {
		opacity: 0.2;
	}

	80% {
		opacity: 1;
	}
}

@keyframes dots-fade {
	0% {
		opacity: 1;
	}

	40% {
		opacity: 0.2;
	}

	80% {
		opacity: 1;
	}
}

/* dots pulse */
.dots-pulse > div {
	-webkit-animation: dots-pulse 1.2s infinite ease;
	animation: dots-pulse 1.2s infinite ease;
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.dots-pulse > div:nth-of-type(1) {
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

.dots-pulse > div:nth-of-type(3) {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

@-webkit-keyframes dots-pulse {
	0% {
		transform: scale(1);
	}

	40% {
		transform: scale(1.3);
	}

	80% {
		transform: scale(1);
	}
}

@keyframes dots-pulse {
	0% {
		transform: scale(1);
	}

	40% {
		transform: scale(1.3);
	}

	80% {
		transform: scale(1);
	}
}

/* ------------------------------------------------------------------- 
   * ## page loaded
   * ------------------------------------------------------------------- */
.ss-loaded #preloader {
	opacity: 0;
	visibility: hidden;
	transition: all 0.6s 0.9s ease-in-out;
}

.ss-loaded #preloader #loader {
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
}

.pt-6 {
	padding-top: 90px;
}

.pb-6 {
	padding-bottom: 90px;
}

.py-6 {
	padding-top: 90px;
	padding-bottom: 90px;
}

.btn {
	position: relative;
	font-weight: 600;
	text-transform: uppercase;
	transition: 0.5s;
}

.btn::after {
	position: absolute;
	content: "";
	width: 0;
	height: 5px;
	bottom: -1px;
	left: 50%;
	background: var(--primary);
	transition: 0.5s;
}

.btn.btn-primary::after {
	background: var(--dark);
}

.btn:hover::after,
.btn.active::after {
	width: 50%;
	left: 25%;
}

.btn-primary {
	color: #ffffff;
}

.btn-square {
	width: 36px;
	height: 36px;
}

.btn-sm-square {
	width: 28px;
	height: 28px;
}

.btn-lg-square {
	width: 46px;
	height: 46px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}

.back-to-top {
	position: fixed;
	display: none;
	left: 50%;
	bottom: 0;
	margin-left: -22px;
	border-radius: 0;
	z-index: 99;
}

.bg-dark-radial {
	background-image: -webkit-repeating-radial-gradient(
		center center,
		rgba(0, 0, 0, 0.3),
		rgba(0, 0, 0, 0.3) 1px,
		transparent 1px,
		transparent 100%
	);
	background-image: -moz-repeating-radial-gradient(
		center center,
		rgba(0, 0, 0, 0.3),
		rgba(0, 0, 0, 0.3) 1px,
		transparent 1px,
		transparent 100%
	);
	background-image: -ms-repeating-radial-gradient(
		center center,
		rgba(0, 0, 0, 0.3),
		rgba(0, 0, 0, 0.3) 1px,
		transparent 1px,
		transparent 100%
	);
	background-image: -o-repeating-radial-gradient(
		center center,
		rgba(0, 0, 0, 0.3),
		rgba(0, 0, 0, 0.3) 1px,
		transparent 1px,
		transparent 100%
	);
	background-image: repeating-radial-gradient(
		center center,
		rgba(0, 0, 0, 0.3),
		rgba(0, 0, 0, 0.3) 1px,
		transparent 1px,
		transparent 100%
	);
	background-size: 3px 3px;
}

.bg-light-radial {
	background-image: -webkit-repeating-radial-gradient(
		center center,
		rgba(256, 256, 256, 0.2),
		rgba(256, 256, 256, 0.2) 1px,
		transparent 1px,
		transparent 100%
	);
	background-image: -moz-repeating-radial-gradient(
		center center,
		rgba(256, 256, 256, 0.2),
		rgba(256, 256, 256, 0.2) 1px,
		transparent 1px,
		transparent 100%
	);
	background-image: -ms-repeating-radial-gradient(
		center center,
		rgba(256, 256, 256, 0.2),
		rgba(256, 256, 256, 0.2) 1px,
		transparent 1px,
		transparent 100%
	);
	background-image: -o-repeating-radial-gradient(
		center center,
		rgba(256, 256, 256, 0.2),
		rgba(256, 256, 256, 0.2) 1px,
		transparent 1px,
		transparent 100%
	);
	background-image: repeating-radial-gradient(
		center center,
		rgba(256, 256, 256, 0.2),
		rgba(256, 256, 256, 0.2) 1px,
		transparent 1px,
		transparent 100%
	);
	background-size: 3px 3px;
}

.navbar-dark .navbar-nav .nav-link {
	position: relative;
	padding: 35px 15px;
	font-size: 18px;
	text-transform: uppercase;
	color: var(--light);
	outline: none;
	transition: 0.5s;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
	color: var(--primary);
}

/* Default logo size for larger screens */
.fluid-logo {
	max-width: 200px; /* Adjust this value as needed */
	height: auto; /* Maintain aspect ratio */
}

/* Adjust logo size for tablets */
@media (max-width: 991.98px) {
	.fluid-logo {
		max-width: 150px; /* Smaller size for tablets */
	}
}

/* Adjust logo size for mobile devices */
@media (max-width: 767.98px) {
	.fluid-logo {
		max-width: 120px; /* Even smaller size for mobile */
	}
}

/* Ensure the navbar-brand doesn't take up too much space on mobile */
@media (max-width: 767.98px) {
	.navbar-brand {
		flex: 1; /* Allow the logo to take available space */
		text-align: left; /* Align logo to the left */
	}
}

@media (max-width: 991.98px) {
	.navbar-dark .navbar-nav .nav-link {
		margin-left: 0;
		padding: 10px 0;
	}
}

.carousel-caption {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(4, 15, 40, 0.7);
	z-index: 1;
}

.company-carousel .company-item {
	text-align: center;
	padding: 10px;
}

.company-carousel .company-item img {
	width: 100%;
	max-width: 200px;
	margin: 0 auto;
}

@media (max-width: 576px) {
	.carousel-caption h4 {
		font-size: 18px;
		font-weight: 500 !important;
	}

	.carousel-caption h1 {
		font-size: 30px;
		font-weight: 600 !important;
	}
}

.page-header {
	height: 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(rgba(4, 15, 40, 0.7), rgba(4, 15, 40, 0.7)),
		url(../img/carousel-1.jpg) center center no-repeat;
	background-size: cover;
}

.service-item .service-icon {
	margin-top: -50px;
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100px;
}

.service-item .service-icon i {
	transition: 0.2s;
}

.service-item:hover .service-icon i {
	font-size: 60px;
}

.portfolio-item {
	margin-bottom: 60px;
	height: 400px; /* Consistent height */
	overflow: hidden; /* Prevent overflow */
	position: relative; /* Ensure children are positioned relative to this */
}

.portfolio-title {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 120px;
	padding: 0 30px;
	right: 30px;
	left: 30px;
	bottom: -60px;
	background: #ffffff;
	z-index: 3;
}

.portfolio-btn {
	position: absolute;
	display: inline-block;
	top: 50%;
	left: 50%;
	margin-top: -60px;
	margin-left: -60px;
	font-size: 120px;
	line-height: 0;
	transition: 0.1s;
	transition-delay: 0.3s;
	z-index: 2;
	opacity: 0;
}

.portfolio-item:hover .portfolio-btn {
	opacity: 1;
}

.portfolio-box::before,
.portfolio-box::after {
	position: absolute;
	content: "";
	width: 0;
	height: 100%;
	top: 0;
	transition: 0.5s;
	z-index: 1;
	background: rgba(4, 15, 40, 0.7);
}

.portfolio-box::before {
	left: 0;
}

.portfolio-box::after {
	right: 0;
}

.portfolio-item:hover .portfolio-box::before {
	left: 0;
	width: 50%;
}

.portfolio-item:hover .portfolio-box::after {
	right: 0;
	width: 50%;
}

@media (min-width: 992px) {
	.testimonial,
	.contact-form {
		margin-left: -90px;
	}
}

@media (min-width: 992px) {
	.footer::after {
		position: absolute;
		content: "";
		width: 1px;
		height: 100%;
		top: 0;
		left: 50%;
		background: var(--primary);
	}
}

.footer-shape::before {
	position: absolute;
	content: "";
	width: 80px;
	height: 100%;
	top: 0;
	left: -40px;
	background: var(--primary);
	transform: skew(40deg);
}