:root {
	/* General */
	--tt-main-color: #e45e20; /* Template main color. #bf4a1a */
	--tt-dark-color: #162026; /* Template dark color. #121212 */
	--tt-light-color: #efedea; /* Template light color. #efedea */

	--tt-bg-color: #162026; /* Template background color. #0a0a0a */
	--tt-text-color: #efedea; /* Template text color. #efedea */
	--tt-text-muted-color: #8f8f8f; /* Template text muted color. #8f8f8f */
	--tt-border-color: rgb(133 133 133 / 50%); /* Template borders color. rgb(133 133 133 / 50%) */

	--tt-linear-text-bg-color: rgb(255 255 255 / 20%); /* For linear text reveal effect (do not change it!). rgb(255 255 255 / 20%) */

	/* Fonts */
	--tt-body-font: 'Poppins', sans-serif; /* Body font. */
	--tt-alter-font: "Big Shoulders Display", sans-serif; /* Secondary/Alter font. */

	/* Page transition */
	--tt-page-trans-overlay-bg-color: #161616; /* Page transition overlay background color. #161616 */

	/* Cursor ball */
	--tt-ball-border-color: #666; /* Ball border color. #666 */
	--tt-ball-magnetic-color: var(--tt-main-color); /* Ball magnetic border color. */
	--tt-ball-bg-color: color-mix(in oklab, var(--tt-main-color) 93%, transparent); /* Ball view background color. */
	--tt-ball-color: #FFF; /* Ball view text color. #FFF */

	/* Links */
	--tt-link-color: #c93b00; /* Link color. #c93b00 */
	--tt-link-hover-color: #f5533a; /* Link hover color. #f5533a */

	/* Main menu */
	--tt-sub-menu-bg-color: #252525; /* Sub menu background color. #252525 */
	--tt-sub-menu-link-color: #bbb9b2; /* Sub menu link color. #bbb9b2 */
	--tt-sub-menu-link-hover-color: #FFF; /* Sub menu link hover color. #FFF */

	/* Force to light color */
	--tt-force-to-light-color: #f3f3f3; /* If the element has a background image/video (page header, fullscreen slider, etc.), make all inner elements light (for better visibility). #f3f3f3 */
}



.ph-caption-title2 {
	margin: 0;
	text-transform: uppercase;
	font-family: var(--tt-alter-font);
	font-size: clamp(48px, 5vw, 82px);
	font-weight: bold;
	font-weight: 600;
	line-height: 0.95;
	color: var(--tt-main-color);
}

/* Page header caption sizes */
#page-header.ph-cap-sm .ph-caption-title2 {
	font-size: clamp(48px, 4vw, 64px);
}
#page-header.ph-cap-lg .ph-caption-title2 {
	font-size: clamp(52px, 6vw, 112px);
}
#page-header.ph-cap-xlg .ph-caption-title2 {
	font-size: clamp(58px, 8vw, 132px);
}
#page-header.ph-cap-xxlg .ph-caption-title2 {
	font-size: clamp(64px, 8vw, 152px);
}
#page-header.ph-cap-xxxlg .ph-caption-title2 {
	font-size: clamp(64px, 10vw, 182px);
	line-height: 0.95;
}
#page-header.ph-cap-xxxxlg .ph-caption-title2 {
	font-size: clamp(64px, 12vw, 230px);
	line-height: 0.9;
}

@media (max-width: 414px) {
	.ph-caption-title2 {
		font-size: 54px;
	}
}


/* About Us  IMAGE START */
.about-us-bg {
	position: relative;
	
	background-image: url("../img/aboutus.gif");
	background-size: contain;
	background-position: left;
	background-repeat: no-repeat;
}

.about-us-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(22, 32, 38, 0.55);
	z-index: 0;
}
.about-us-bg .tt-section-inner {
    position: relative;
    z-index: 1;
}
.about-us-bg .tt-heading-title {
	color: transparent;
	text-shadow: 0 0 12px rgba(0,0,0,0.5);
}

/* About Us IMAGE End */




/* Button outline */
.tt-btn-outline2 {
	box-shadow: inset 0 0 0 2px var(--tt-main-color);
}
.tt-btn-outline2 > *,
.tt-btn-outline2 > *::after {
	color: var(--tt-main-color);
}


/* Service IMAGE START */

.services-bg {
	position: relative;
	/* background-color: #0f1418; */
	overflow: hidden;
}

/* Character image */
.services-bg::after {
	content: "";
	position: absolute;
	right: 7%;
	bottom: 0;
	width: 45%;
	height: 100%;
	background-image: url("../img/services.webp");
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: contain;
	opacity: 0.85;
	filter: grayscale(10%) contrast(1.1);
	pointer-events: none;
}

/* Soft fade into background */
.services-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	/* background: linear-gradient(
		to right,
		rgba(15,20,24,1) 0%,
		rgba(15,20,24,0.95) 55%,
		rgba(15,20,24,0.4) 75%,
		rgba(15,20,24,0) 100%
	); */
	z-index: 0;
}

.services-bg .tt-section-inner {
	position: relative;
	z-index: 1;
}


@media (max-width: 991px) {
	.services-bg::after {
		display: none;
	}
}

/* Service IMAGE END */


/* WhatsApp Button Start */
.tt-whatsapp-float {
	position: fixed;
	right: 30px;
	bottom: 90px; /* sits above scroll-to-top */
	width: 56px;
	height: 56px;
	background: #25D366;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
	box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tt-whatsapp-float img {
	width: 40px;
	height: auto;
}

/* Hover effect */
.tt-whatsapp-float:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(37, 211, 102, 0.55);
}

/* WhatsApp Button End */




/* About Us Image Start */


.tt-section-background.tt-sbg-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55); /* adjust darkness */
	z-index: 1;
	pointer-events: none;
}

/* Ensure image stays behind mask */
.tt-section-background.tt-sbg-image img {
	position: relative;
	z-index: 0;
}

/* About Us Image End */


/* Services Image Start */


.tt-section-background.tt-sbg-image2::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7); /* adjust darkness */
	z-index: 1;
	pointer-events: none;
}

/* Ensure image stays behind mask */
.tt-section-background.tt-sbg-image2 img {
	position: relative;
	z-index: 0;
}

/* Services Image End */

/* Services section Image start */
.tt-sbg-image3 {
	max-height: 40vh;
}


/* Services section Image End */

/* Projects Main Image Start */


.tt-section-background.tt-sbg-image4::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0,); /* adjust darkness */
	z-index: 1;
	pointer-events: none;
}

/* Ensure image stays behind mask */
.tt-section-background.tt-sbg-image4 img {
	position: relative;
	z-index: 0;
}

/* Projects Main Image End */

.pgi-image2 img {
    background-color: white;
	object-fit: contain;
}


    .tt-image.tti-landscape img, .tt-image.tti-portrait img {
		object-fit: contain;
		/* background-color: white; */
	}



.specialColor span {
	color: var(--tt-main-color);
}




/* full width image for our projects */

.full-width-image {
	width: 100%;
}

.full-width-image img {
	width: 100%;
	height: auto;
	display: block;
}