/* */
/************ TABLE OF CONTENTS ***************

1. Fonts
2. Reset
3. Global
4. Main Header / Two / Three
5. Main Slider / Two / Three
6. About One
7. Services One / Two / Three / Four
8. Project One / Two / Three
9. Testimonial One / Two / Three
10. Partners One
11. News One / Two
12. CTA One
13. Main Footer
14. Clients One / Two / Three
15. Counter One
16. News Three
17. InTouch One
18. Page Title	
19. Banner One
20. Work One
21. Pricing One
22. Team One
23. Services Widgets
24. Services Detail
25. Our Projects
26. Projects Detail
27. Projects Widgets
28. Our Blog
29. Blog Widgets
30. Comment Form
31. Comment Box
32. Contact Info
33. Contact Form
34. Map

**********************************************/



/*** 
====================================================================
	Css Files
====================================================================
***/
@import url('01-global.css');
@import url('module-css/footer.css');
@import url('module-css/solutions.css');
@import url('module-css/pricing.css');
@import url('module-css/faq.css');
@import url('module-css/free-trail.css');
@import url('module-css/page-title.css');
@import url('module-css/header.css');
@import url('module-css/about.css');
@import url('module-css/video.css');
@import url('module-css/ai-product.css');
@import url('module-css/login.css');
@import url('module-css/career.css');
@import url('module-css/404.css');
@import url('module-css/activity-ticker.css');

@import url('04-animate.css');
@import url('09-icomoon.css');
@import url('11-preloader.css');
@import url('12-swiper.min.css');
@import url('14-jquery-ui.css');
@import url('15-magnific-popup.css');



/*** 
====================================================================
	
====================================================================
***/


/* Sticy Header */
.want-sticky-header .main-header.fixed-header {
	position: relative !important;
	display: none;
}


/* Box Layout */
.box-layout .page-wrapper {
	max-width: 1390px;
	width: 100%;
	margin: 0 auto;
	padding: 15px;
	overflow: hidden;
	background-color: var(--thm-body-bg);
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.10);
}

.box-layout:before {
	position: fixed;
	content: '';
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	display: block;
	background: url(../images/partners/thm-pattern-2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.box-layout .slider-one_social-icons {
	display: none;
}

.box-layout .main-header-two__inner {
	margin: 0 0px;
}



/* ######################### */
/* ######  Colors ########## */
/* ######################### */

	.ErrorRed { color:#900 !important;}	
	.SuccessGreen { color:#599274 !important; }

	.Red { color:#c23b43 !important; }
	.Yellow { color: #FF0 !important;}
	.LightOrange { color: #FC6 !important;}
	.Orange { color: #ee4f27 !important;}
	.Brown { color:#6e4d3c !important;}
	.Teal { color: #42a9b8;}
	.DarkGreen { color:#030 !important; }
	.Green { color: #063 !important; }
	.White { color:#fff !important;}

	.DarkerBlue { color:#039 !important;}
	.LighterBlue { color:#09C !important;}
	.BabyBlue { color:#069 !important; }
	
	.Black { color:#000 !important;}
	.DarkGray { color:#333 !important;}
	.SM_LightGray { color:#666 !important; }
	.LightGray { color:#7a7a7a !important;}  /*A1AAC9*/
	.VeryLightGray { color:#999 !important;}
	.VeryVeryLightGray { color:#eee !important;}
	.VeryLightGrayBackground { background-color:#eee !important;}	
	.White { color:#FFF !important; text-shadow:none !important;}

	.YellowBg { background-color: #FFC; color:#000; }
	.BlueBg { background-color: #dbeefe; }
	.GrayBg { background-color:#eee; color:#999; }

/* ######################### */
/* ######  Error Messages ## */
/* ######################### */

		.ErrorMessage {  }
		.ErrorMessage a { color:#900 font-size:8pt; font-weight:bold; padding:0; text-decoration:underline;}	
		
		.ErrorMessageFail {
			display: flex;
			align-items: flex-start;
			gap: 12px;
			margin: 12px 0;
			padding: 16px 20px;

			border: 1px solid rgba(217, 22, 22, 0.25);
			border-radius: 12px;

			background: rgba(217, 22, 22, 0.10);
			color: #fca5a5;

			font-size: 14px;
			font-weight: 500;
			line-height: 1.5;

			text-align: center;
		}
		.SuccessMessage {
			display: flex;
			align-items: flex-start;
			gap: 12px;
			margin: 12px 0;
			padding: 16px 20px;

			border: 1px solid rgba(53, 166, 112, 0.25);
			border-radius: 12px;

			background: rgba(53, 166, 112, 0.10);
			color: #a3f0cb;

			font-size: 14px;
			font-weight: 500;
			line-height: 1.5;

			text-align: center;
		}

		.ErrorMessagePromo { border: 1px solid #999; background-color: #eee; color: #000; display: block; padding: 7px 10px; margin:10px 0; font-size: 12px; font-weight:bold; text-align: center; }		

		.ErrorMessageModal {
			background-color: rgba(217, 22, 22, 0.10);
			color: #fca5a5;
			border: 1px solid rgba(217, 22, 22, 0.25);
			padding: 16px 20px;
			margin: 10px 0;
			border-radius: 12px;
			font-size: 14px;
			line-height: 1.5;
		}

		th {
			color: #000;
		}

/* ######################### */
/* ######  Modal ########## */
/* ######################### */

	.Hide { display: none !important; }
	.Show { display: block; }

	.InterstitialBackgroundCSS {
		position: fixed;
		z-index: 999;
		background-color: rgba(0,0,0,0.85);
		width:100%;
		height:100%;
	}

	.InterstitialContentCSS {
		position: relative;
		z-index: 121;
		top: calc(3% + 100px);
		max-width: 560px;
		background-color: #1f192a;
		border: 1px solid rgba(255, 255, 255, 0.10);
		color: #c4bbd3;
		margin: 13px 24px 0px;
		position: relative;
		opacity: 1;
		padding: 13px 24px 0px;
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 15px 14px 0 rgba(0, 0, 0, 0.4);
	}		

/* ######################### */
/* ########  Text ########## */
/* ######################### */

	.Smallest {
		font-size: 0.65rem;        /* ~12px */
		line-height: 0.8rem;
		padding: 1px 0;
	}

	.Smaller {
		font-size: 0.75rem;        /* ~12px */
		line-height: 1.25rem;
		padding: 2px 0;
	}

	.Small {
		font-size: 0.875rem;       /* ~14px */
		line-height: 1.35rem;
		padding: 3px 0;
	}

	.Small span {
		color: white;
	}

	p {
		font-size: 1rem;           /* ~16px */
		line-height: 1.5;
		color: #b0b0b0;            /* light gray */
	}

	.Large {
		font-size: 1.25rem;        /* ~20px */
		line-height: 2rem;
		padding: 0.8rem 0;
		color: #ffffff;

	}

	.Large span {
		font-size: 0.85rem;        /* ~20px */
		color: #bfc4c9;
	}

	.Larger {
		font-size: 1.35rem;        /* ~20px */
		line-height: 2rem;
		padding: 0.8rem 0;
		color: #ffffff;

	}

	.Larger span {
		font-size: 0.95rem;        /* ~20px */
		color: #bfc4c9;
	}	

	H2 {
		font-size: 1.5rem;         /* ~24px */
		line-height: 3rem;
		padding: 1rem 0;
		color: #ffffff;

		display: flex;
		justify-content: space-between;
		align-items: center;   /* keeps them vertically aligned */	
	}

	H2 span {
		color: #6b21ef;
		margin-left: auto;
		font-size: 1rem;
	}

	H1 {
		font-size: 2.75rem;           /* ~32px */
		line-height: 3.5rem;
		padding: 1rem 0;
		color: #ffffff;
	}

	H1 span {
		color: #ee4f27;
	}

	.Shadow { text-shadow: 1px 1px 1px #ccc; }
	.Strong { font-weight:bold !important; }
	.Center { text-align:center; }
	.Italic { font-style:italic !important; }
	.NoUnderline { text-decoration:none !important; }
	.Underline { text-decoration: underline !important; cursor: pointer; }
	.Hyperlink { color:#069 !important; cursor: pointer;}
	.Pointer { cursor: pointer; }

	.NoData {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		flex-direction: column;
		text-align: center;
		border-radius: 16px;
		border: 1px solid rgba(255, 255, 255, 0.16);
		background: rgba(255, 255, 255, 0.05);
		backdrop-filter: blur(10px);
		font-size: 0.8rem;
		color:#999
		padding: 1rem;
		margin: 2rem;
	}

	.AlignRight{
		float: right;
		margin-left: 40px;
		white-space: nowrap;
	}

	/* =========================================================
	Make Google InfoWindow "chrome" disappear so your MarkerCard
	styling is what the user sees.
	========================================================= */

	/* Outer container */
	.gm-style .gm-style-iw-c {
	padding: 0 !important;
	border-radius: 0 !important;         /* let MarkerCard control radius */
	background: transparent !important;  /* kill Google white card */
	box-shadow: none !important;         /* use your site shadows (or add below) */
	}

	/* Inner scrolling container */
	.gm-style .gm-style-iw-d {
	overflow: visible !important;
	background: transparent !important;
	padding: 0 !important;
	}

	/* Hide the default tail (we’ll rely on your card aesthetic) */
	.gm-style .gm-style-iw-t::after {
	background: transparent !important;
	box-shadow: none !important;
	}

	/* Hide default Google close button — custom close is inside the card */
	.gm-style .gm-ui-hover-effect {
	display: none !important;
	}

	/* =========================================================
	InfoBubble wrapper tweaks for MarkerCard-in-InfoWindow use
	(minimal changes; MarkerCard CSS should do the heavy lifting)
	========================================================= */

	.InfoBubbleCard {
	/* keep popups consistent size with your cards */
	width: 320px;            /* adjust to match your card width */
	max-width: 340px;
	}

	/* Optional: add the same shadow your cards use (if your cards already
	have a shadow, remove this to avoid double-shadow) */
	.MarkerCard--info {
	box-shadow: 0 18px 45px rgba(0,0,0,.45);
	}

	/* Make sure links look identical inside the popup */
	.MarkerCard--info .MarkerCard_Title,
	.MarkerCard--info .MarkerLink {
	-webkit-font-smoothing: antialiased;
	}

	/* If Google adds weird default link styles in InfoWindow contexts */
	.gm-style a.MarkerLink,
	.gm-style a.MarkerCard_Title,
	.gm-style a.ds-h6,
	.gm-style a.ds-btn {
	text-decoration: none;
	}
	.gm-style a.MarkerLink:hover,
	.gm-style a.MarkerCard_Title:hover,
	.gm-style a.ds-h6:hover {
	text-decoration: underline;
	}
	.gm-style .ds-card-marker-public {
	border-radius: var(--ds-radius-xl);
	}



	/* ============================
	Marker UI System
	============================ */
	:root{
		--m-radius: 16px;
		--m-shadow: 0 15px 14px 0 rgba(0, 0, 0, 0.4);
		--m-shadow-soft: inset -1px -1px rgba(255,255,255,0.2),
		                 inset 1px 1px rgba(255,255,255,0.3),
		                 0 4px 16px -8px rgba(0, 0, 0, 0.23);

		--m-accent: #ee4f27;       /* ds-primary */
		--m-link: #077ac7;
		--m-link-dark: #93c5fd;

		--m-light-bg: #ffffff;
		--m-light-text: #111827;
		--m-light-muted: #cccfd4;
		--m-light-border: rgba(0,0,0,.10);

		--m-dark-bg: rgba(14, 9, 24, .92);
		--m-dark-bg-solid: #0e0918;
		--m-dark-text: #ffffff;
		--m-dark-muted: #c4bbd3;
		--m-dark-border: rgba(255,255,255,.10);

		--m-chip-bg: rgba(255,138,0,.14);
		--m-chip-border: rgba(255,138,0,.26);
		--m-chip-text: #7a3d00;

		--m-chip-dark-bg: rgba(255,138,0,.18);
		--m-chip-dark-border: rgba(255,138,0,.30);
		--m-chip-dark-text: rgba(255,223,195,.95);
	}

	/* Card base */
	#MarkerDisplayHTML {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	}

	#MarkerDisplayHTML .MarkerCard {
	flex: 1 1 320px;       /* grow/shrink, min width 320 */
	}

	#MarkerDisplayHTML .ds-card-marker-public {
	flex: 1 1 320px;
	max-width: 400px;
	}


	.MarkerCard{
		border: 1px solid transparent;
		border-radius: var(--m-radius);
		max-width: 350px;
		overflow: hidden;
		box-shadow: var(--m-shadow-soft);
		font-family: inherit;
		margin: 1rem;
		display: flex;
		flex-direction: column;
	}

	.MarkerCard_light{
		background: var(--m-light-bg);
		color: var(--m-light-text);
		border-color: var(--m-light-border);
	}

	.MarkerCard_dark{
		background: var(--m-dark-bg);
		color: var(--m-dark-text);
		border-color: var(--m-dark-border);
		backdrop-filter: blur(10px);
		max-width: 350px;
	}

	.MarkerCard_Header{
		padding: 0.5rem;
		text-align: center;
		border-bottom: 1px solid var(--m-dark-border);
	}

	.MarkerCard_Title{
		display: inline-block;
		font-size: 1.35rem;
		font-weight: 900;
		letter-spacing: -0.02em;
		text-decoration: none;
		color: orange;
	}

	.MarkerCard_Title:hover{

	}

	.MarkerCard_Strong {
		color: white;
		font-weight: bold;
	}

	.MarkerCard_Strong span {
		color: #eee;
		font-size: 0.75rem;
	}

	.Marker_Location {
		color: #fff;
		font-weight: bold;
		font-size: 0.80rem;
	}

	.MarkerCard_Directions {
		padding-left: 2rem;
		font-weight: bold;
	}

	.MarkerCard_Body{
		padding: 0.75rem;
		text-align: left;
		min-height: 100px;
		flex: 1;
	}    

	.MarkerCard_Desc{
		margin: 0;
		color: var(--m-light-muted);
	}

	
	.mPinDot{
		width: 10px;
		height: 10px;
		border-radius: 999px;
		background: var(--m-accent);
		box-shadow: 0 0 0 4px rgba(255,138,0,.18);
		margin:0 0.5rem;
	}

	.MarkerBubble{
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 2px 13px;
		margin: 0.5rem 0;
		border-radius: 999px;
		font-size: 0.75rem;
		font-weight: bold;
		letter-spacing: 0.10em;
		border: 1px solid white;
		background: var(--m-chip-bg);
		color: white;
	}

	.MarkerCard_dark .MarkerBubble{
		border-color: var(--m-chip-dark-border);
		background: var(--m-chip-dark-bg);
		color: var(--m-chip-dark-text);
	}      

	.MarkerCard_Footer{
		padding: 0.5rem;
		font-size: 0.75rem;
		border-top: 1px solid rgba(0,0,0,.06);
		display: flex;
		align-items: center;
		gap: 10px;
		margin-top: auto;
	}

	.MarkerCard_Footer > :first-child {
		flex: 2;
		min-width: 0;
	}

	.MarkerCard_Footer > .MarkerCard__by {
		flex: 1;
		min-width: 0;
		text-align: right;
	}

	.MarkerCard_dark .MarkerCard_Footer{
		border-top: 1px solid rgba(255,255,255,.08);
	}   

	/* Links */
	.MarkerLink{
		color: var(--m-link-dark);
		text-decoration: none;
		font-size: 0.75rem;
		font-weight: bold;
	}

	.MarkerLink:hover{
		text-decoration: underline;
		text-underline-offset: 3px;
		text-align: left;
	}

	/* 
	============= Full page additions =========================
	*/
	.MarkerPage{
		display: flex;
		justify-content: center;
		padding: 1rem;
	}

	/* Buttons */
	.mBtn{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 13px 21px;
		margin:13px 21px;
		border-radius: 8px;
		text-decoration: none;
		font-weight: 900;
		letter-spacing: .01em;
		border: 2px solid transparent;
		user-select: none;
	}

	.mBtn--orange {
		background: linear-gradient(
			180deg,
			var(--m-accent),
			#ff9a1f
		);
		color: #432d12;

		border-color: rgba(255, 180, 90, 0.45);

		box-shadow:
			0 8px 18px rgba(255, 138, 0, 0.35),
			inset 0 1px 0 rgba(255,255,255,0.35);
	}

	.mBtn--orange:hover {
		transform: translateY(-1px);
		box-shadow:
			0 12px 26px rgba(255, 138, 0, 0.45),
			inset 0 1px 0 rgba(255,255,255,0.45);
	}


	.mBtn--ghost {
		background: rgba(255,255,255,0.06);
		border-color: rgba(255,255,255,0.18);
		color: var(--m-dark-text);

		box-shadow: inset 0 0 0 rgba(0,0,0,0);
	}

	.mBtn--ghost:hover {
		background: rgba(255,255,255,0.12);
		border-color: #6a6a6a;
		box-shadow: 0 6px 16px rgba(0,0,0,0.25);
	}


	.mBtn--green {
		background: var(--thm-primary);
		color: #062a1f;

		border-color: rgba(var(--thm-primary-rgb), 0.6);

		box-shadow:
			0 6px 14px rgba(var(--thm-primary-rgb), 0.35),
			inset 0 1px 0 rgba(255,255,255,0.35);
	}

	.mBtn--green:hover {
		background: var(--thm-extra);
		transform: translateY(-1px);
		box-shadow:
			0 10px 22px rgba(var(--thm-primary-rgb), 0.45),
			inset 0 1px 0 rgba(255,255,255,0.45);
	}

	.mBtn--lavendar {
		background: var(--thm-gradient-color1);
		color: #1f1b3a;

		border-color: rgba(143, 121, 255, 0.5);

		box-shadow:
			0 6px 16px rgba(143, 121, 255, 0.35),
			inset 0 1px 0 rgba(255,255,255,0.35);
	}

	.mBtn--lavendar:hover {
		background: #9a86ff;
		transform: translateY(-1px);
		box-shadow:
			0 10px 26px rgba(143, 121, 255, 0.45),
			inset 0 1px 0 rgba(255,255,255,0.45);
	}


/* ------------------------------------------------------------
   Google Maps InfoWindow chrome cleanup (optional but helpful)
   ------------------------------------------------------------ */
/* Remove default padding + background so your card looks native */
.gm-style .gm-style-iw-d{
  padding: 0 !important;
  border-radius: var(--iw-radius) !important;
  box-shadow: none !important; /* your card already has shadow */
}

.gm-style .gm-style-iw-d button {}

/* Default Google close button hidden — custom close is inside the card */

/* If you want to hide the little white “tail” completely: */
/*
.gm-style .gm-style-iw-t::after{
  display: none !important;
}
*/



/* ######################### */
/* ###  Buttons ### */
/* ######################### */

	/* for surrounding DIV  */
	.CenterButton {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Stack buttons on small screens */
	@media (max-width: 1250px) {
		.CenterButton {
			flex-direction: column;
		}

		.CenterButton .thm-btn {
			width: 100%;
			max-width: 320px; /* optional, keeps them from getting huge */
			text-align: center;
		}
	}	

	/* Base button skeleton */
	.thm-btn {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		vertical-align: middle;
		appearance: none;
		outline: none !important;
		font-size: 16px;
		font-weight: 500;
		text-transform: capitalize;
		padding: 12px 24px;
		margin: 13px 21px;
		border-radius: 8px;
		font-family: var(--thm-font-two);
		cursor: pointer;
		transition: all 200ms ease;
		overflow: hidden;
		z-index: 1;
		border: 1px solid transparent;
		white-space: nowrap;
	}

	.thm-btn i {
		margin-left: 6px;
		font-size: 15px;
	}

	.thm-btn-orange {
		color: var(--thm-white);
		background-color: var(--thm-base);
		border-color: var(--thm-base);
	}

	.thm-btn-orange:hover {
		color: var(--thm-white);
		background-color: #e04722;
		border-color: #e04722;
		transform: translateY(-1px);
		box-shadow: 0 8px 20px rgba(238, 79, 39, 0.35);
	}

	.thm-btn-lavender {
		color: #ffffff;
		background-color: #6b21ef;
		border-color: #6b21ef;
	}

	.thm-btn-lavender:hover {
		color: #ffffff;
		background-color: #7c35f5;
		border-color: #7c35f5;
		transform: translateY(-1px);
		box-shadow: 0 8px 20px rgba(107, 33, 239, 0.35);
	}

	.thm-btn-gray {
		color: var(--thm-white);
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.20);
		border-radius: 8px;
		padding: 12px 24px;
		font-weight: 500;
		transition: all 200ms ease;
	}

	.thm-btn-gray:hover {
		color: #ffffff;
		background: rgba(255, 255, 255, 0.10);
		border-color: rgba(255, 255, 255, 0.30);
	}


	.thm-btn-outline {
		color: var(--thm-white);
		background: transparent;
		border: 1px solid rgba(255, 255, 255, 0.20);
	}

	.thm-btn-outline:hover {
		color: white;
		border-color: rgba(255, 255, 255, 0.30);
		background: rgba(255, 255, 255, 0.08);
	}

	.thm-btn-outline.disabled,
	.thm-btn-outline:disabled {
		opacity: 0.4;
		cursor: not-allowed;
		pointer-events: none;
	}

	.FriendButton.loading {
	background: #ccc;
	cursor: wait;
	}

	.FriendButton.saved {
	background: #4caf50;
	color: #fff;
	}

	.FriendButton.error {
	background: #e53935;
	color: #fff;
	}

/* ######################### */
/* ###  Widgets ### */
/* ######################### */
 
        :root {
            --thm-font: 'Sora', system-ui, -apple-system, "Segoe UI", sans-serif;
            --thm-bg: #0e0918;
            --thm-surface: #1f192a;
            --thm-border: rgba(255, 255, 255, 0.10);
            --thm-text: #ffffff;
            --thm-muted: #c4bbd3;
            --thm-primary: #35a670;
            --thm-primary-soft: rgba(53, 166, 112, 0.15);
            --thm-accent: #6b21ef;
        }

        /* Map theme into Bootstrap's CSS variables */
        :root {
            --bs-body-bg: var(--thm-bg);
            --bs-body-color: var(--thm-text);
            --bs-primary: var(--thm-primary);
            --bs-border-color: var(--thm-border);
            --bs-border-radius: 0.5rem;
            --bs-font-sans-serif: var(--thm-font);
            --bs-link-color: var(--thm-primary);
            --bs-link-hover-color: var(--thm-accent);
        }

        .card.surface {
            background-color: var(--thm-surface);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 12px;
            box-shadow: inset -1px -1px rgba(255,255,255,0.2),
                        inset 1px 1px rgba(255,255,255,0.3),
                        0 4px 16px -8px rgba(0, 0, 0, 0.23);
            transition: all 200ms ease;
        }

		.card.surface:hover {
			border-color: rgba(255, 255, 255, 0.15);
            background-color: rgba(31, 25, 42, 0.9);
		}

        .section-title {
            color: var(--thm-text);
            margin-bottom: 1rem;
        }

        .section-subtitle {
            color: var(--thm-muted);
            margin-bottom: 1.5rem;
        }



        /* Form controls */
        .form-control,
        .form-select {
            background-color: #0e0918;
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 8px;
            color: #fff;
            transition: border-color 200ms ease, box-shadow 200ms ease;
        }

        .form-control:focus,
        .form-select:focus {
            background-color: #0e0918;
            border-color: var(--thm-base);
			color: #fff;
            box-shadow: 0 0 0 3px rgba(238, 79, 39, 0.15);
        }

        .form-control::placeholder {
            color: #7a7a7a;
        }

        /* Accordion */
        .accordion-button {
            background-color: transparent;
            color: var(--thm-white);
            border: none;
            font-weight: 500;
        }

        .accordion-button:not(.collapsed) {
            background-color: rgba(255, 255, 255, 0.03);
            color: var(--thm-white);
            box-shadow: none;
        }

        .accordion-button::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        }

        .accordion-button:not(.collapsed)::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        }

        .accordion-body {
            background-color: transparent;
            color: var(--thm-muted);
			border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        .accordion-item {
            background-color: transparent;
            border-color: rgba(255, 255, 255, 0.06);
        }

        /* Carousel */
        .carousel-item img {
            object-fit: cover;
            height: 260px;
            border-radius: 0.5rem;
        }

        .carousel-caption {
            background: rgba(0, 0, 0, 0.45);
            border-radius: 0.5rem;
        }

        /* === TABS THEME OVERRIDES === */
        /* ===== UPDATED TABS STYLING ===== */

        .nav-tabs {
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
			padding-top: 1rem;
        }

        .nav-tabs .nav-link {
            color: #7a7a7a;
            border: none;
            background: none;
            border-radius: 0;
            padding: 12px 20px;
            margin-right: 0;
            position: relative;
            font-size: 14px;
            font-weight: 500;
            border-bottom: 2px solid transparent;
            transition: all 200ms ease;
        }

        .nav-tabs .nav-link:hover {
            color: #c4bbd3;
        }

        /* Active tab underline */
        .nav-tabs .nav-link.active {
            color: var(--thm-white);
            font-weight: 500;
            border-bottom-color: var(--thm-base);
            background: none;
        }

        .nav-tabs .nav-link.active::after {
            display: none;
        }


        .tab-pane {
            padding: 1.5rem 0;
            border-radius: 0;
            margin-top: 0;
        }

	/* ######################### */
	/* ###  Select Scrollbars
	/* ######################### */
		select {
			scrollbar-width: thin;              /* Firefox */
			scrollbar-color: #333 #666;       /* Firefox (thumb, track) */
		}

		/* Chrome, Edge & Safari */
		select::-webkit-scrollbar {
			width: 8px;
		}

		select::-webkit-scrollbar-track {
			background: #333;
			border-radius: 10px;
		}

		select::-webkit-scrollbar-thumb {
			background: #666;
			border-radius: 10px;
			border: 2px solid #333; /* gives a “pill” look */
		}

		select::-webkit-scrollbar-thumb:hover {
			background: #999;
		}


	/* ######################### */
	/* ###  Badges
	/* ######################### */		

		.BadgeBody {
			padding:5px; 
			margin:8px; 
			border:1px dashed #ccc; 
			border-radius:8px;
			width:100px; 
			text-align:center;
			}

			
		.BadgeNumber {
		position:relative;
		}
		.BadgeNumber[data-badge]:after {
		content:attr(data-badge);
		position:absolute;
		top:-10px;
		right:-10px;
		font-size:10px;
		background:green;
		color:white;
		width:18px;
		height:18px;
		text-align:center;
		line-height:18px;
		border-radius:8px;
		box-shadow:0 0 1px #333;
		}		

	/* ######################### */
	/* ###  Markers
	/* ######################### */		
/* Wrapper assumes a dark page background */
.promo-article {
    padding: 0 1rem;
    max-width: bold;
    line-height: 1.5;
    color: #f5f5f5;
}

/* Title + Date row */
.promo-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.promo-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
}

/* Date styling */
.promo-date {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
	padding-right: 5px;
}

/* Date Picker */
/* Overall datepicker panel */
.frnd-datepicker.ui-datepicker {
  width: 350px;
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: #1f192a;
  box-shadow: 0 15px 14px 0 rgba(0, 0, 0, 0.4);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Header */
.frnd-datepicker .ui-datepicker-header {
  border: 0;
  background: transparent;
  padding: 8px 6px 12px;
}

/* Month/year text */
.frnd-datepicker .ui-datepicker-title {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* Prev/Next buttons */
.frnd-datepicker .ui-datepicker-prev,
.frnd-datepicker .ui-datepicker-next {
  border: 1 solid #fff;
  border-radius: 12px;
  top: 8px;
  width: 34px;
  height: 34px;
  cursor: pointer;
}

.frnd-datepicker .ui-datepicker-prev:hover,
.frnd-datepicker .ui-datepicker-next:hover {
  background: rgba(41, 30, 45, 0.08);
}

/* Make the arrow icons visible (jQuery UI uses background images sometimes) */
.frnd-datepicker .ui-icon {
  filter: invert(1);
  opacity: 0.85;
}

/* Day-of-week header row */
.frnd-datepicker thead th {
  padding: 10px 0 8px;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
}

/* Date cells */
.frnd-datepicker td {
  text-align: center;
}

.frnd-datepicker td a,
.frnd-datepicker td span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  width: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: #0e0918;            /* day cell background */
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-weight: 700;
}

/* Hover */
.frnd-datepicker td a:hover {
  background: rgba(255,255,255,0.08);
}

/* Today */
.frnd-datepicker .ui-datepicker-today a {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}

/* Selected day */
.frnd-datepicker .ui-datepicker-current-day a {
  background: var(--thm-base);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(238, 79, 39, 0.35);
}

/* Disabled dates */
.frnd-datepicker .ui-state-disabled span {
  color: rgba(255,255,255,0.25);
}

/* Optional: style the month/year dropdowns if you enabled changeMonth/changeYear */
.frnd-datepicker select.ui-datepicker-month,
.frnd-datepicker select.ui-datepicker-year {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 4px 8px;
  font-weight: 700;
}


/* Body text */
.promo-body {
    margin: 0.5rem 0 1rem;
}

hr {
	border: none;
	border-top: 1px solid #fff;
	margin: 1.5rem 0;
}

.promo-section {
    margin-bottom: 6px;
}

.label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-right: 6px;
}

.content {
    color: rgba(255, 255, 255, 0.85);
	text-align: left;
}

/* Footer links */
.promo-footer {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
}

.promo-link {
    color: #7a7a7a;
    font-size: 0.75rem;
    text-decoration: none;
    font-weight: bold;
	padding: 0 0.5rem;
}

.promo-link:hover {
    text-decoration: underline;
    opacity: 0.9;
}


/* Messaging Styles (https://bootsnipp.com/snippets/1ea0N)*/
img{ max-width:100%;}
.inbox_people {
  background: #f8f8f8 none repeat scroll 0 0;
  float: left;
  overflow: hidden;
  width: 40%; border-right:1px solid #c4c4c4;
}
.inbox_msg {
  border: 1px solid #c4c4c4;
  clear: both;
  overflow: hidden;
}
.top_spac{ margin: 20px 0 0;}


.recent_heading {float: left; width:40%;}
.srch_bar {
  display: inline-block;
  text-align: right;
  width: 60%;
}
.headind_srch{ padding:10px 29px 10px 20px; overflow:hidden; border-bottom:1px solid #c4c4c4;}

.recent_heading h4 {
  color: #05728f;
  font-size: 21px;
  margin: auto;
}
.srch_bar input{ border:1px solid #cdcdcd; border-width:0 0 1px 0; width:80%; padding:2px 0 4px 6px; background:none;}
.srch_bar .input-group-addon button {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  padding: 0;
  color: #707070;
  font-size: 18px;
}
.srch_bar .input-group-addon { margin: 0 0 0 -27px;}

/* Chat thread layout */
.chat-thread-wrapper { display:flex; flex-direction:column; }
.chat-thread-scroll { max-height:calc(100vh - 300px); overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:4px 2px; }
.chat-bubble-row { display:flex; max-width:100%; }
.chat-bubble-row.is-mine { justify-content:flex-end; }
.chat-bubble-row.is-theirs { justify-content:flex-start; }
.chat-bubble { max-width:80%; padding:10px 14px; border-radius:16px; word-wrap:break-word; }
.chat-bubble-row.is-theirs .chat-bubble { background-color: var(--ds-bg-elevated, #302845); border-bottom-left-radius:4px; }
.chat-bubble-row.is-mine .chat-bubble { background-color: rgba(53,166,112,0.2); border-bottom-right-radius:4px; }
.chat-bubble .chat-bubble-sender { font-size:0.8rem; font-weight:600; margin-bottom:2px; }
.chat-bubble-row.is-theirs .chat-bubble-sender { color: var(--ds-secondary, #ff9b26); }
.chat-bubble-row.is-mine .chat-bubble-sender { color: var(--thm-primary, #35a670); }
.chat-bubble .chat-bubble-body { font-size:0.9rem; color: var(--thm-text, #fff); }
.chat-bubble .chat-bubble-time { font-size:0.7rem; color: var(--ds-text-muted, #7a7a7a); margin-top:4px; }
.chat-bubble-row.is-mine .chat-bubble-time { text-align:right; }

.chat_ib h5{ font-size:15px; color:#464646; margin:0 0 8px 0;}
.chat_ib h5 span{ font-size:13px; float:right;}
.chat_ib .ArchiveThreadLink { font-size:14px; color:#999; margin-left:10px; }
.chat_ib .ArchiveThreadLink:hover { color:#e74c3c; }
.chat_ib p{ font-size:14px; color:#989898; margin:auto}
.chat_img {
  float: left;
  width: 7%;
}
.chat_ib {
  float: left;
  padding: 0 0 0 15px;
  width: 88%;
}

.chat_people{ overflow:hidden; clear:both;}
.chat_list {
  border-bottom: 1px solid #c4c4c4;
  margin: 0;
  padding: 18px 16px 10px;
}
.inbox_chat { overflow-y: visible; }

.active_chat{ background:#ebebeb;}

.incoming_msg_img {
  display: inline-block;
  width: 6%;
}
.received_msg {
  display: inline-block;
  padding: 0 0 0 10px;
  vertical-align: top;
  width: 92%;
 }
 .received_withd_msg p {
  background: #ebebeb none repeat scroll 0 0;
  border-radius: 3px;
  color: #646464;
  font-size: 14px;
  margin: 0;
  padding: 5px 10px 5px 12px;
  width: 100%;
}
.time_date {
  color: #747474;
  display: block;
  font-size: 12px;
  margin: 8px 0 0;
}
.received_withd_msg { width: 57%;}
.mesgs {
  float: left;
  padding: 30px 15px 0 25px;
  width: 60%;
}

 .sent_msg p {
  background: #05728f none repeat scroll 0 0;
  border-radius: 3px;
  font-size: 14px;
  margin: 0; color:#fff;
  padding: 5px 10px 5px 12px;
  width:100%;
}
.outgoing_msg{ overflow:hidden; margin:26px 0 26px;}
.sent_msg {
  float: right;
  width: 46%;
}
.input_msg_write input {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  color: #4c4c4c;
  font-size: 15px;
  min-height: 48px;
  width: 100%;
}

.type_msg {border-top: 1px solid #c4c4c4;position: relative;}
.msg_send_btn {
  background: #05728f none repeat scroll 0 0;
  border: medium none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  height: 33px;
  position: absolute;
  right: 0;
  top: 11px;
  width: 33px;
}
.messaging { padding: 0 0 50px 0;}
.msg_history {
  height: 516px;
  overflow-y: auto;
}

/*
  Pagination
*/

.pagination {
    position: relative;
    display: block;
    text-align: center;
}

.pagination .pg-pagination li {
    display: inline-block;
    margin-right: 16px;
}

.pagination .pg-pagination .active {
    background-color: var(--thm-base);
    border-radius: 8px;
}

.pagination .pg-pagination li:last-child {
    margin-right: 0;
}

.pagination .pg-pagination li a {
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    display: inline-block;
    color: #c4bbd3;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    font-weight: 500;
    font-size: 16px;
    transition: all 200ms ease;
}

.pagination .pg-pagination li a:hover {
    background-color: var(--thm-gradient-color2);
    color: var(--thm-white);
    border: 1px solid var(--thm-gradient-color2);
}

/* -----------------------------
   Responsive behavior:
   On smaller screens, stack date below title
   ----------------------------- */
@media (max-width: 600px) {
    .promo-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .promo-date {
        white-space: normal;
        margin-top: 2px;
        font-size: 0.85rem;
    }
}