 /* ----------------------------------------------------------------
	Canvas: Landing 2
-----------------------------------------------------------------*/

 :root {
 	--cnvs-themecolor: #ef626a;
 	--cnvs-themecolor-rgb: 239, 98, 106;
 	--cnvs-primary-font: 'Inter', sans-serif;
 	--cnvs-secondary-font: 'DM Serif Display', serif;
 	--cnvs-menu-box-shadow: 0 0.7vw 1.4vw rgba(0, 0, 0, .1);
 }

 body.dark,
 .dark #wrapper,
 .dark #content,
 .dark .page-transition-wrap,
 .dark #header,
 #header.dark,
 .dark #header-wrap {
 	background-color: #05060d;
 }

 .bg-color {
 	background-color: rgba(var(--cnvs-themecolor-rgb), var(--bs-bg-opacity)) !important;
 }

 ::selection {
 	color: #000;
 }

 .box-shadow,
 .h-box-shadow:hover {
 	box-shadow: var(--cnvs-menu-box-shadow);
 }

 .menu-link {
 	font-weight: 400;
 }

 .hero-bg {
 	position: absolute;
 	left: auto;
 	top: -100px;
 	right: -100px;
 	z-index: 0;
 	object-fit: cover;
 	max-width: 60%;
 }

 @media (max-width:768px) {
 	.hero-bg {
 		top: 40px;
 	}
 }

 .h-bg-white:hover {
 	background-color: #FFF !important;
 }

 .circle-draw,
 .circle-draw span {
 	position: relative;
 	color: inherit !important;
 	z-index: 1;
 }

 .circle-draw svg {
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	width: calc(100% + .5em);
 	height: calc(100% + .5em);
 	transform: translate(-50%, -50%);
 	z-index: 0;
 }


 .section-showcase-sticky .list-group-item {
 	position: absolute;
 	top: 0;
 	left: 0;
 	color: #212529;
 	border: 0;
 	width: 100%;
 	height: 100%;
 	padding: 0;
 	margin: 0;
 	background-size: cover;
 	background-position: center center;
 	background-repeat: no-repeat;
 	pointer-events: default;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	opacity: 0;
 	transition: opacity .3s ease;
 }

 .section-showcase-sticky .list-group-item.active {
 	opacity: 1;
 	background-color: #000;
 }

 .section-showcase-sticky .list-group-content>div {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	padding-left: 2rem;
 	padding-right: 2rem;
 	border-bottom: 1px solid rgba(255, 255, 255, .15);
 }

 .toggle.border-bottom {
 	border-color: #DDD !important;
 }

 .promo-bg {
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	min-width: 0;
 	width: 640px;
 	margin-left: -5px;
 	z-index: -1;
 	transform: translate(-50%, -50%);
 }

 .device-md .promo-bg {
 	width: 520px;
 }

 .device-sm .promo-bg {
 	width: 470px;
 }

 .device-xs .promo-bg {
 	width: 420px;
 }
/* 
 #footer #gotoTop {
 	display: block;
 	z-index: 1;
 	position: relative;
 	width: 46px;
 	height: 46px;
 	font-size: 1.5rem;
 	line-height: 44px;
 	right: auto;
 	bottom: auto !important;
 } */

 #footer {
 	border-top: 1px solid var(--cnvs-themecolor);
 }

 /* Responsive Device more than 992px (.device-md >)
-----------------------------------------------------------------*/
 @media (min-width: 992px) {

 	.section-showcase-sticky .list-group-content>div {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 		padding-left: 4rem;
 		padding-right: 4rem;
 		border-bottom: 1px solid rgba(255, 255, 255, .15);
 	}

 	.section-scroll {
 		position: absolute;
 		top: 0;
 		bottom: 0;
 		right: 0;
 		left: 0;
 		display: block;
 	}

 	.section-scroll .section-sticky {
 		position: -webkit-sticky;
 		position: sticky;
 		top: 200px;
 	}

 	.menu-item .menu-link {
 		padding: 0.75rem 1.5rem !important;
 		border-radius: 50rem;
 		transition: box-shadow .2s ease;
 	}


 	.menu-item:hover .menu-link {
 		box-shadow: var(--cnvs-menu-box-shadow);
 		color: #111;
 	}

 	.dark .menu-item:hover .menu-link {
 		--cnvs-menu-box-shadow: 0 0.7vw 1vw rgba(var(--cnvs-themecolor-rgb), .1);
 	}

 	#footer {
 		border-top: 0;
 	}
 }


 /* Default style for the sidebar */
 .sidebar-contact {
 	position: fixed;
 	top: -100%;
 	/* Initially hidden above */
 	right: 0;
 	width: 350px;
 	/* Set width for larger screens */
 	padding: 20px 30px;
 	background: #fff;
 	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
 	box-sizing: border-box;
 	transition: top 0.5s ease, bottom 0.5s ease;
 	z-index: 1000;
 	border-left: 5px solid #ef626a;
 	border-radius: 0 8px 8px 0;
 }

 .sidebar-contact.active {
 	top: 0;
 	/* Slide to the top */
 }

 /* Header */
 .sidebar-header {
 	position: relative;
 }

 .sidebar-header h2 {
 	margin-bottom: 8px;
 	font-size: 22px;
 	font-weight: 600;
 	color: #333;
 }

 .sidebar-header p {
 	margin-bottom: 20px;
 	font-size: 14px;
 	color: #666;
 }

 /* Close Button */
 .close-btn {
 	position: absolute;
 	top: 10px;
 	right: 10px;
 	font-size: 20px;
 	background: transparent;
 	border: none;
 	color: #ef626a;
 	cursor: pointer;
 	transition: color 0.3s ease;
 }

 .close-btn:hover {
 	color: #b34248;
 }

 /* Contact Items */
 .contact-item {
 	display: flex;
 	align-items: flex-start;
 	margin-bottom: 20px;
 }

 .contact-item:last-child {
 	margin-bottom: 0;
 }

 .contact-item .icon {
 	font-size: 24px;
 	color: #ef626a;
 	margin-right: 15px;
 }

 .contact-item h5 {
 	margin-bottom: 4px;
 	font-size: 16px;
 	font-weight: 600;
 	color: #333;
 }

 .contact-item p {
 	margin: 0;
 	font-size: 14px;
 	color: #555;
 }

 /* Default style for the Talk to Us button */
 #talk-to-us-btn {
 	position: relative;
 	top: 0px;
 	/* Default position for larger screens */
 	right: 20px;
 	z-index: 100;
 	padding: 10px 20px;
 	margin: 0;
 	background-color: #fff;
 	color: #ef626a;
 	font-weight: 500;
 	text-decoration: none;
 	border-radius: 25px;
 	transition: all 0.3s ease;
 	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }

 /* Hover effect for the button */
 #talk-to-us-btn:hover {
 	background-color: #ef626a;
 	color: #fff;
 	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
 }

 /* Adjust position for screens smaller than 992px */
 @media (max-width: 992px) {
 	#talk-to-us-btn {
		position: fixed!important;
 		top: auto !important;
 		/* Reset the top position */
 		bottom: 20px;
 		/* Move to the bottom */
 		right: 20px;
 		/* Align to the bottom-right corner */
 	}

 	.sidebar-contact {
 		bottom: -100%;
 		/* Initially hidden below */
 		right: 0;
 		/* Full-width on smaller screens */
 		left: 0;
 		/* Expand to fit the screen width */
 		width: 100%;
 		/* Take up full width */
 		height: fit-content;
 		/* Limit the height to 60% of the screen */
 		padding: 20px;
 	}

 	.sidebar-contact.active {
 		bottom: 0;
 		/* Fully visible */
 		transform: translateY(0);
 		/* Reset any translation */
 	}
 }


 @keyframes scrollLeft {
 	0% {
 		transform: translateX(0);
 	}

 	100% {
 		transform: translateX(calc(-250px * 10))
 	}
 }

 @keyframes scrollRight {
 	0% {
 		transform: translateX(calc(-250px * 11));

 	}

 	100% {
 		transform: translateX(0);
 	}
 }

 .slider {
 	height: 100px;
 	margin: 50px auto auto auto;
 	overflow: hidden;
 	position: relative;
 }

 .slide-track-left {
 	animation: scrollLeft 20s linear infinite;
 	display: flex;
 	width: calc(250px * 20);
 }

 .slide-track-right {
 	animation: scrollRight 20s linear infinite;
 	display: flex;
 	width: calc(250px * 22);
 }

 .slide {
 	height: 100px;
 	width: 250px;
 }

 @media (max-width: 992px) {

 	@keyframes scrollLeftMob {
 		0% {
 			transform: translateX(0);
 		}

 		100% {
 			transform: translateX(calc(-200px * 10))
 		}
 	}

 	@keyframes scrollRightMob {
 		0% {
 			transform: translateX(calc(-200px * 11));

 		}

 		100% {
 			transform: translateX(0);
 		}
 	}

 	.slider {
 		height: 80px !important;
 		margin: 40px auto auto auto !important;
 	}

 	.slide-track-left {
 		animation: scrollLeftMob 20s linear infinite !important;
 		width: calc(200px * 20) !important;
 	}

 	.slide-track-right {
 		animation: scrollRightMob 20s linear infinite !important;
 		width: calc(200px * 22) !important;
 	}

 	.slide {
 		height: 80px !important;
 		width: 200px !important;
 	}
 }

 /* Default Header Styling */
 #header {
 	transition: all 0.3s ease;
 	height: 100px;
 	/* Initial height */
 	/* background-color: rgba(255, 255, 255, 0.9); Transparent background */
 	box-shadow: none;
 }

 /* Shrinked Header Styling */
 #header.shrink {
 	height: 70px;
 	/* Reduced height */
 	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 	/* Optional shadow */
 }

 #logo img {
 	height: auto;
 	max-height: 60px;
 	transition: all 0.3s ease;
 }

 #header.shrink #logo img {
 	max-height: 60px;
 	margin: 0;
 	padding: 0;
 }

 .primary-menu-trigger {
 	transition: all 0.3s ease;
 }

 #header.shrink #talk-to-us-btn {
 	top: 3px;
 	padding: 5px 20px;
 	border-radius: 25px;
 	font-weight: 400;
 	transition: all 0.3s ease;
 	border-radius: 10px;
 	font-size: 0.9rem;
 	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
 }

 @media (min-width: 992px) {

 	.owl-stage-outer {
 		position: relative;
 		overflow: hidden;
 		/* Ensures fading effect stays within the bounds */
 	}

 	.owl-stage-outer::before,
 	.owl-stage-outer::after {
 		content: '';
 		position: absolute;
 		top: 0;
 		bottom: 0;
 		width: 100px;
 		/* Width of the fade effect */
 		z-index: 2;
 		/* Place it above the carousel */
 		pointer-events: none;
 		/* Make sure the fading effect doesn’t block interaction */
 	}

 	.owl-stage-outer::before {
 		left: 0;
 		background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) !important;
 	}

 	.owl-stage-outer::after {
 		right: 0;
 		background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) !important;
 	}
 }

 .owl-nav {
 	display: block !important;
 }

 .owl-dots {
 	display: block !important;
 }


 .owl-carousel .owl-nav button {
 	background-color: rgba(0, 0, 0, 0.6) !important;
 	/* Semi-transparent dark background */
 	border: none;
 	/* Remove default border */
 	color: #fff !important;
 	/* White icon color */
 	width: 40px;
 	/* Adjust width */
 	height: 40px;
 	/* Adjust height */
 	border-radius: 50%;
 	/* Make it circular */
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	transition: background-color 0.3s ease;
 	/* Smooth hover effect */
 }

 .owl-carousel .owl-nav button:hover {
 	background-color: rgba(0, 0, 0, 0.8);
 	/* Darker background on hover */
 }

 .owl-carousel .owl-nav button:focus {
 	outline: none;
 	/* Remove focus outline */
 }

 .owl-carousel .owl-nav button .owl-prev::before,
 .owl-carousel .owl-nav button .owl-next::before {
 	font-size: 16px;
 	/* Adjust icon size */
 }

 #image-title {
 	/* opacity: 1; */
 	transition: opacity 0.1s ease-in-out;
 	/* Smooth fade transition */
 }
 .slider-title-box{
	height: 60px;
 }

 #gotoTop {
    position: fixed; /* Ensures it's fixed in place */
    bottom: 20px; /* Adjust as needed */
    right: 20px; /* Default for desktop */
    z-index: 1000; /* Ensure it stays on top */
}

/* For mobile screens */
@media (max-width: 767px) {
    #gotoTop {
        right: auto; /* Remove right positioning */
        left: 20px; /* Move to the left */
    }
}

/* Center social media icons horizontally */
.social-media-section {
    display: flex;
    justify-content: center; /* Centers the icons horizontally */
    gap: 15px; /* Space between icons */
    margin-bottom: 40px; /* Space between icons and the "Designed & Developed" text */
}

/* Optional: Ensure uniform size for icons */
.social-media-section a {
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Make them circular */
}

/* Center the "Designed & Developed" text */
.widget p {
    text-align: center; /* Center-align the text */
}

.truncate {
    display: inline-block; /* Ensures text fits into a block */
    /* max-width: 150px; Adjust to fit your layout */
    overflow: hidden; /* Hide overflow text */
    white-space: nowrap; /* Prevent wrapping */
    text-overflow: ellipsis; /* Add the ellipsis (...) */
    vertical-align: top; /* Aligns text properly */
}

/* Optional: Responsive adjustment */
@media (max-width: 576px) {
    .truncate {
        max-width: 170px; /* Adjust truncation for smaller screens */
    }
}
