@import url('satoshi.css');
 html {
     scroll-behavior: smooth;
}
 :root {
    --cnvs-body-bg: #fff;
	--cnvs-themecolor: #4595f0; /*change the color of the circle draw mark (dau khoanh tron) */
	--cnvs-themecolor-rgb: 69, 149, 240;
	--cnvs-body-font: 'Satoshi-Medium',sans-serif;
	--cnvs-primary-font: 'Satoshi-Variable', sans-serif;
	--cnvs-secondary-font: 'Inter', serif;
	--cnvs-menu-box-shadow: 0 0.7vw 1.4vw rgba(69, 149, 240, .1);
    
     --mw-blue: #4595f0;
     --cnvs-btn-color: #4595f0;
     --cnvs-body-bg: #fff;
     --mw-primary: #161b27;
     --cnvs-primary-menu-submenu-bg: white !important;
     --cnvs-themecolor-rgb: 69, 149, 240 !important;
}




body.dark,
.dark #wrapper,
.dark #content,
.dark .page-transition-wrap,
.dark #header,
#header.dark,
.dark #header-wrap {
	background-color: #05060d;
	--cnvs-primary-menu-submenu-bg: #161B29; /* Submenu background color */
}

a.menu-link {
	border-radius: 0 !important;
}

.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;
	text-transform: capitalize;
}

.hero-bg {
	position: absolute;
	left: auto;
	top: -100px;
	right: -100px;
	z-index: 0;
	object-fit: cover;
	max-width: 60%;
}

.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: 4rem;
	padding-right: 4rem;
	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-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 ;
		border-radius: 50rem;
		transition: box-shadow .2s ease;
	}


	.menu-item:hover .menu-link {
		box-shadow: #ffff;
		color: #ffff;
	}

	.dark .menu-item:hover .menu-link {
		--cnvs-menu-box-shadow: 0 0.7vw 1vw rgba(var(--cnvs-themecolor-rgb), .1);
	}

	#footer {
		border-top: 0;
	}
}




 td {
     --bs-table-bg: #161b27 !important;
}
 .mw {
    /* Use motivewave class to override colours */
     --cnvs-header-sticky-bg: #161b27 !important;
     --bs-link-color-rgb: white !important;
}
/* Screenshot switcher text colors */
 .owl-stage {
     padding-top: 9px;
     padding-bottom: 8px;
}
 #oc-clients .oc-item img {
     max-width: 200px;
     max-height: 42px;
     object-fit: contain;
     display: block;
     margin: 0 auto;
}
 div.oc-item>a {
     height: auto;
}
 .nav-link.active h3 {
     font-size: 1.65rem;
     font-weight: 500;
     transition: font-size 0.2s;
}
 .nav-link h3 {
     font-size: 1.2rem;
     font-weight: 500;
     transition: font-size 0.2s;
}
 .nav-link:not(.active) .tab-desc {
    /* hide inactive descriptions for nav links */
     display: none;
    /* or visibility: hidden;
     */
     opacity: 0;
}
 .nav-link:hover {
     color: #f3f3f3f5;
}
 .nav-link {
     color: #ddddddc8;
}
 .phone-screenshot {
     transition: opacity 0.3s ease;
}
 .home-screenshot {
     transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
     transform-origin: center;
     filter: brightness(1) drop-shadow(0 0px 6px rgba(0, 0, 0, 0.4));
}
 .home-screenshot:hover {
     transform: scale(1.02);
     filter: brightness(1.17) drop-shadow(0 0px 7px rgba(0, 0, 0, 0.5));
}
 .col-md-8 .home-screenshot {
     width: 130%;
     height: auto;
     margin: 0 auto;
     display: block;
}
 .phone-screenshot:hover {
     transform: scale(1.03);
     z-index: 100;
}
 .section-scroll {
     pointer-events: none;
}
 img.mw-shadow {
     filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0, .4));
}
 img.mw-shadow-strong {
     filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0, .75));
}
 .mw-button-shadow {
     filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}
 .mw-button-shadow-blue {
     filter: drop-shadow(0 4px 6px rgba(69, 149, 240, 0.2));
     background-color: var(--mw-blue);
}
 .mw-button-shadow-blue:hover {
     filter: drop-shadow(0 4px 6px rgba(69, 149, 240, .3));
     background-color: #2f8cf6 !important;
     color: white;
}
/* Green shadow button */
 .mw-button-shadow-green {
     filter: drop-shadow(0 4px 6px rgba(76, 175, 80, 0.2));
     background-color: #4CAF50;
}
 .mw-button-shadow-green:hover {
     filter: drop-shadow(0 4px 6px rgba(76, 175, 80, 0.3));
     background-color: #388E3C !important;
     color: white;
}
/* Blueish shadow button */
 .mw-button-shadow-blueish {
     filter: drop-shadow(0 4px 6px rgba(0, 168, 168, 0.2));
     background-color: #00A8A8;
}
 .mw-button-shadow-blueish:hover {
     filter: drop-shadow(0 4px 6px rgba(0, 168, 168, 0.3));
     background-color: #008080 !important;
     color: white;
}
/* Pink shadow button */
 .mw-button-shadow-pink {
     filter: drop-shadow(0 4px 6px rgba(255, 95, 95, 0.2));
     background-color: #FF5F5F;
}
 .mw-button-shadow-pink:hover {
     filter: drop-shadow(0 4px 6px rgba(255, 95, 95, 0.3));
     background-color: #e04848 !important;
     color: white;
}
/* Purple shadow button */
 .mw-button-shadow-purple {
     filter: drop-shadow(0 4px 6px rgba(106, 76, 147, 0.2));
     background-color: #6A4C93;
}
 .mw-button-shadow-purple:hover {
     filter: drop-shadow(0 4px 6px rgba(106, 76, 147, 0.3));
     background-color: #563d7c !important;
     color: white;
}
 .mw-font-l1 {
     font-size: 13.45px;
}
 .mw-font-l2 {
     font-size: 17px;
}
 .mw-hero-main p {
     margin-bottom: 18px;
}
 .mw-blur-fade {
    /* Add a mask to fade the content on the right */
     -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
     mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
     -webkit-mask-size: 100% 100%;
     mask-size: 100% 100%;
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
}
/* font size for banner at top of page*/
 .mw-banner {
     font-size: 20px;
     background-color: var(--mw-primary);
     color: black;
}
 .mw-spring-sale {
     font-size: 16px;
}
 .mw-dark-bg {
     background-color: #141927;
}
 .mw-dark-bg>td {
     background-color: #141927;
}
/* override default menu uppercase */
 ul.mw-menu>li>a>div {
     text-transform: capitalize !important;
     font-weight: 500;
     font-size: 17px;
}
/* override default menu uppercase - submenu*/
 ul.mw-submenu>li>a>div {
     text-transform: capitalize !important;
     font-weight: 500;
     font-size: 15px;
}
 .mw-video-feature {
     color: white;
}
/* Adding bit of breathing room for screenshots in tab menu*/
 div>div.tab-pane>img {
     padding-left: 32px;
}
/*slightly tigher tab spacing for product screenshots */
 a#canvas-tabs-profile-tab>p {
     margin-bottom: 12px !important;
}
 .mw-button-white {
     background-color: #5d92ee;
     color: white !important;
     border-color: rgba(255, 255, 255, 0.45) !important;
     border-width: 3px !important;
}
 .mw-font {
     font-family: sans-serif !important;
}
 .mw-bg {
     background-color: #111 !important;
}
 .mw-btn-icon {
     padding: 0px;
     display: inline;
}
/* Theme colours */
 body.dark, .dark #wrapper, .dark #content, .dark .page-transition-wrap, .dark #header, #header.dark {
     background-color: rgb(24 37 49);
}
 .mw-shadow-lr {
     background: linear-gradient(to right, #181d2a, #19202d, #1a222f, #1b2531, #1a222f, #19202d, #181d2a);
}
 .mw-black {
     background-color: #05060d;
}
 .mw-white {
     color: white;
}
 .mw-blue {
     background-color: var(--mw-blue);
}
 .mw-navy {
     background-color: rgb(24 37 49);
}
 .mw-dark-navy {
     background-color: #161b27;
}
 .dark #header-wrap {
     background: linear-gradient(to right, #0F1321, #161B29, #0F1321);
}
 .mw-shadow-lr-dark {
     background: linear-gradient(to right, #0F1321, #161B29, #0F1321);
}
 .oc-item>div {
     background: linear-gradient(to left, rgba(58, 107, 182, 0.15), rgba(192, 217, 255, .4) 80%);
     animation: gradientChange 5s ease infinite;
     background-size: 400% 400%;
}
 .mw-gradient-bg-secondary {
     background: linear-gradient(to left, rgba(83, 116, 167, 0.2), rgba(174, 207, 255, .2) 80%);
     animation: gradientChange 8s ease infinite;
     background-size: 400% 400%;
}
 .mw-gradient-bg-dark {
     background: linear-gradient(to left, #1d1d1d, #0f0f0f);
     animation: gradientChange 10s ease infinite;
     background-size: 400% 400%;
}
 @keyframes gradientChange {
     0% {
         background-position: 0% 50%;
    }
     50% {
         background-position: 100% 50%;
    }
     100% {
         background-position: 0% 50%;
    }
}
 .orb-container .stop-45 {
     animation: colorChange 5s infinite ease-in-out;
}
 .orb-container .stop-0, .orb-container .stop-17, .orb-container .stop-75, .orb-container .stop-95 {
     animation: opacityChange 5s infinite ease-in-out;
}
 @keyframes colorChange {
     0%, 100% {
         stop-color: #4a96f5;
    }
     50% {
         stop-color: #70a6f9;
    }
}
 @keyframes opacityChange {
     0%, 100% {
         stop-opacity: 0;
    }
     50% {
         stop-opacity: 1;
    }
}
 .button.button-3d {
     border-radius: 0.25rem;
     box-shadow: 0 4px 6px rgba(6, 43, 138, 0.15);
     transition: none;
}
 .sticky {
     position: fixed;
}
 .me-lg-auto-left {
     margin-left: auto !important;
     margin-right: 0% !important;
}
 a.card {
     text-decoration: underline;
     transition: all .2s;
}
 a.card:hover {
     transform: translateY(-2px);
     z-index: 1;
}
 .card {
     margin-bottom: 12px;
     display: flex;
     flex-direction: column;
     min-width: 0;
     overflow-wrap: break-word;
     position: relative;
     background: linear-gradient(to right, #0F1321, #161B29, #0F1321);
     box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.10);
     transition: transform 0.18s cubic-bezier(.4, 2, .6, 1), box-shadow 0.18s;
}
 .card-body {
     flex: 1 1 auto;
}
 .card-body>i {
     padding-right: 8px;
}
 #register-form-submit:hover {
     background-color: #0056b3;
     color: #ffffff;
     transition: background-color 0.3s ease, color 0.3s ease;
}
 .mw-shadow-tb {
     mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 1) 10%, black 25%, black 50%, black 75%, rgba(0, 0, 0, 1) 90%, transparent 100%);
     mask-composite: multiply;
     background-color: #181d2a;
}
 div.desktop-slider>div>img {
     max-width: 95% !important;
}
 div.phone-slider>div>img {
     max-height: 650px;
     min-height: 650px;
     width: auto;
     object-fit: contain;
}
 .mw-heading-hero {
     font-size: calc(1.125rem + 2.5vw) !important;
     font-weight: 700 !important;
}
 .tinted-w {
     filter: brightness(0) invert(1);
}
/* Image Hover */
 .img-hover-block {
     z-index: 0;
}
 .img-hover-block span {
     position: relative;
     color: var(--cnvs-contrast-1000);
}
 .img-hover-block small {
     position: absolute;
     font-size: 26%;
     font-weight: normal;
     top: 5px;
     right: 5px;
     color: var(--cnvs-themecolor);
}
 .img-hover-block:hover span {
     mix-blend-mode: difference;
     z-index: 2;
}
 body:not(.dark) .img-hover-block:hover span {
     color: var(--cnvs-contrast-0);
}
 .hover-reveal {
     position: fixed;
     width: 220px;
     height: 280px;
     top: 0;
     left: 0;
     pointer-events: none;
     opacity: 0;
     z-index: 1;
}
 .hover-reveal__inner, .hover-reveal__img {
     width: 100%;
     height: 100%;
     position: relative;
}
 .hover-reveal__inner {
     overflow: hidden;
}
 .hover-reveal__img {
     background-size: cover;
     background-position: 50% 50%;
     border-radius: 4px;
}
 .portfolio-desc h3 {
     font-size: 1.5rem;
}
 .grid-filter li a {
     font-family: monospace;
     font-weight: normal !important;
     --cnvs-grid-filter-item-font-size: 1rem;
}
 .grid-filter li:not(.activeFilter):not(:hover) a {
     color: var(--cnvs-contrast-400);
}
 .background-img {
     position: absolute;
     width: 250px;
     top: -70px;
     left: -10px;
     z-index: 1;
}
 .background-img.pos-right {
     top: 10px;
     left: auto;
     right: -20px;
}
 .float-anim {
     animation: float 4s ease-in-out infinite;
}
 @keyframes float {
     0% {
         transform: translateY(0px);
    }
     50% {
         transform: translateY(-20px);
    }
     100% {
         transform: translateY(0px);
    }
}
/* Video On Hover -----------------------------------------------------------------*/
 .videoplay-on-hover .vertical-middle, .videoplay-on-hover .video-overlay {
     opacity: 1;
     -webkit-transition: opacity .2s ease;
     -o-transition: opacity .2s ease;
     transition: opacity .2s ease;
}
 .mw-hero-video video {
     transform: scale(1.09);
     object-fit: cover;
     height: 100%;
     width: 100%;
}
 .mw-hero-video-overlay {
     filter: brightness(1);
     position: absolute;
    /* Ensures it overlays the video */
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
    /* Ensures it doesn't block interactions with the video */
     z-index: 1;
     background: linear-gradient(to right, rgba(27, 37, 49, 1) 0%, 
    /* 100% opacity (#1b2531) */
     rgba(26, 36, 48, 0.8) 20%, 
    /* 80% opacity (#1a2430) */
     rgba(25, 35, 47, 0.6) 35%, 
    /* 60% opacity (#19232f) */
     rgba(25, 34, 46, 0.4) 50%, 
    /* 40% opacity (#19222e) */
     rgba(25, 32, 45, 0.1) 55%, 
    /* 10% opacity (#19202d) */
     rgba(26, 34, 47, 0) 60%, 
    /* Fully transparent (#1a222f) */
     rgba(24, 29, 42, 0) 100% 
    /* Fully transparent (#181d2a) */
     );
}
 .mw-hero-text-gradient {
     text-shadow: 0 0 0.75rem rgb(0, 0, 0, .4);
}
 .videoplay-on-hover h3 {
     filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0, 1));
}
 .videoplay-on-hover:hover .video-overlay {
     opacity: .5;
}
/* Masonry in small screens */
 @media (max-width: 1320px) {
     .smallfont {
         font-size: 0.9rem !important;
    }
     .smallfont2 {
         font-size: 0.7rem !important;
    }
}
 .bi-x-lg:before {
     display: none !important;
}
/* Style the video to act as a background */
 .background-video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
    /* Ensures the video covers the entire area */
     z-index: 1;
    /* Place the video behind the content */
}
 .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
     background-color: var(--mw-blue);
     filter: drop-shadow(0 4px 6px rgba(69, 149, 240, 0.2));
    /* Blue shadow */
}
 .content-overlay {
     position: relative;
     z-index: 1;
     background: linear-gradient(to right, #161b27 73%, rgba(0, 0, 0, 0));
    /* Navy background transitioning to transparent */
     color: white;
    /* Ensure text is readable */
     padding: 2rem;
     overflow: hidden;
    /* Prevent content from overflowing */
}
/* Slideshow container */
 .background-slideshow {
     position: absolute;
     top: 0;
     right: 0;
     width: 6 0%;
     height: 100%;
     overflow: hidden;
     z-index: 1;
    /* Place it behind the content */
     background-color: #171e28;
    /* Fallback background color to prevent white flashes */
}
/* Each slide */
 .background-slideshow .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: center;
     opacity: 0;
    /* Start hidden */
     animation: slideAnimation 25s infinite;
    /* Apply animation */
     transition: opacity 1s ease-in-out;
     
}
/* Individual slide timings */
 .background-slideshow .slide:nth-child(1) {
     animation-delay: 0s;
     transform: translateY(0px);
}
 .background-slideshow .slide:nth-child(2) {
     animation-delay: 5s;
     transform: translateY(0px);
}
 .background-slideshow .slide:nth-child(3) {
     animation-delay: 10s;
}
 .background-slideshow .slide:nth-child(4) {
     animation-delay: 15s;
}
 .background-slideshow .slide:nth-child(5) {
     animation-delay: 20s;
     transform: translateY(0px);
}
 .background-slideshow .slide:nth-child(1)::after {
     animation: slideDescription 25s infinite;
     animation-delay: 0s;
}
 .background-slideshow .slide:nth-child(2)::after {
     animation: slideDescription 25s infinite;
     animation-delay: 5s;
}
 .background-slideshow .slide:nth-child(3)::after {
     animation: slideDescription 25s infinite;
     animation-delay: 10s;
}
 .background-slideshow .slide:nth-child(4)::after {
     animation: slideDescription 25s infinite;
     animation-delay: 15s;
}
 .background-slideshow .slide:nth-child(5)::after {
     animation: slideDescription 25s infinite;
     animation-delay: 20s;
}
/* Keyframes for description visibility */
 @keyframes slideDescription {
     0% {
         opacity: 0;
    }
     20% {
         opacity: 1;
    }
     30% {
         opacity: 1;
    }
     40% {
         opacity: .1;
    }
     100% {
         opacity: 0;
    }
}
/* Keyframes for the slideshow */
 @keyframes slideAnimation {
     0% {
         opacity: 0;
    }
     10% {
         opacity: 1;
    }
     30% {
         opacity: 1;
    }
     40% {
         opacity: 0;
    }
     100% {
         opacity: 0;
    }
}
 .slideshow-button {
     position: absolute;
     bottom: 20px;
     right: 20px;
     z-index: 10;
     background-color: rgba(0, 0, 0, 0.6);
     color: white;
     border: none;
     padding: 10px;
     border-radius: 5px;
     cursor: pointer;
     font-size: 1.5em;
     line-height: 1;
     width: auto;
     height: auto;
     text-align: center;
     transition: background-color 0.3s ease;
}
 .slideshow-button:hover {
     background-color: rgba(0, 0, 0, 0.8);
}
 .slideshow-toggle {
     display: none;
}
 .slideshow-toggle:checked+.slideshow-button::before {
     content: "▶";
}
 .slideshow-button::before {
     content: "⏸";
}
 .slideshow-toggle:checked~.background-slideshow .slide {
     animation-play-state: paused;
}
 .slide::after {
     content: attr(data-description);
     position: absolute;
     bottom: 20px;
     right: 20px;
     background-color: rgba(0, 0, 0, 0.7);
     color: #fff;
     padding: 10px 15px;
     border-radius: 5px;
     font-size: 1rem;
     font-weight: bold;
     text-align: right;
     opacity: 0;
     transition: opacity 1s ease-in-out;
}
 .slide:nth-child(1)::after {
     opacity: 1;
}
 .pips {
     display: flex;
     justify-content: center;
     gap: 10px;
     width: auto;
}
 .pip {
     width: 10px;
     height: 10px;
     background-color: rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     transition: background-color 0.3s ease;
}
 .pip:nth-child(1) {
     animation: pipActive calc(5s * 5) infinite;
}
 .pip:nth-child(2) {
     animation: pipActive calc(5s * 5) infinite 5s;
}
 .pip:nth-child(3) {
     animation: pipActive calc(5s * 5) infinite 10s;
}
 .pip:nth-child(4) {
     animation: pipActive calc(5s * 5) infinite 15s;
}
 .pip:nth-child(5) {
     animation: pipActive calc(5s * 5) infinite 20s;
}
 @keyframes progressFill {
     0% {
         width: 0%;
    }
     100% {
         width: 100%;
    }
}
 @keyframes pipActive {
     0%, 33.33% {
         background-color: rgba(255, 255, 255, 0.3);
    }
     33.34%, 66.66% {
         background-color: rgba(69, 149, 240, 1);
    }
     66.67%, 100% {
         background-color: rgba(255, 255, 255, 0.3);
    }
}
 .grid-container {
     overflow: visible;
     position: relative;
}
 .grid-item:hover {
     transform: scale(1.05);
     z-index: 10;
     position: relative;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
 .grid-item:hover video {
     transform: scale(1.01);
     transition: transform 0.3s ease-in-out;
}
 .grid-container:has(.grid-item:hover) .grid-item:not(:hover) {
     opacity: 0.5;
     transition: opacity 0.3s ease-in-out;
}
 .grid-container .grid-item {
     opacity: 1;
     transition: opacity 0.3s ease-in-out;
}
 .grid-item:hover .video-overlay, .grid-item:hover .vertical-middle {
     transition: all 0.3s ease-in-out;
}
 .grid-item:hover {
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
 .grid-item {
     position: relative;
     overflow: hidden;
     border: 2px solid transparent;
     transition: border-color 0.3s ease-in-out;
}
 .grid-item:hover {
     border-color: rgba(255, 255, 255, 0.2);
}
 .app-footer-features span, .app-footer-features a {
     color: white !important;
}
 .app-footer-features a:hover {
     text-decoration: underline !important;
     color: rgb(69, 149, 240) !important;
}
 .bi-star-fill {
     color: rgb(69, 149, 240) !important;
}
 .hotspot-img {
     position: relative;
     display: inline-block;
}
 .hotspot-img::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: inherit;
     filter: brightness(1.5) blur(10px);
     mix-blend-mode: soft-light;
     z-index: 2;
     opacity: 0.5;
     pointer-events: none;
     transition: opacity 0.3s ease-in-out;
}
 .hotspot-img:hover::before {
     opacity: 0.8;
}
 .container {
     width: 100%;
     max-width: 1220px;
     margin-left: auto;
     margin-right: auto;
     padding-left: 15px;
     padding-right: 15px;
}
 .floating-btn-wrap {
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 1000;
}
 .floating-btn {
     width: 30px;
     height: 30px;
     background-color: #007bff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 .floating-btn:hover {
     transform: scale(1.1);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
 .floating-btn-icon {
     font-size: 24px;
     color: white;
}
 .floating-btn:hover+.chat-bubble {
     display: block;
}
 .whats-new-link {
     display: inline-flex;
     align-items: center;
     background-color: #0F1321;
     filter: drop-shadow(0 0 0.15rem rgb(0, 0, 0, .4));
     color: white;
     padding: 0.5rem 1rem;
     margin-bottom: 8px;
     border-radius: 0.25rem;
     font-size: 0.875rem;
     font-weight: bold;
     text-decoration: none;
     transition: background-color 0.3s ease, color 0.3s ease;
}
 .whats-new-link:hover {
     background-color: white;
     color: #131826;
}
 .whats-new-label {
     background-color: white;
     color: #101321;
     font-weight: bold;
     padding: 0.2rem 0.5rem;
     border-radius: 0.2rem;
     margin-right: 0.5rem;
     font-size: 0.75rem;
}
 .fslider {
     position: relative;
     overflow: hidden;
     margin: 0;
     padding: 0;
     filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}
 .justify-content-between>.fslider::before {
     content: '';
     position: absolute;
     inset: 0;
     pointer-events: none;
     z-index: 1;
     filter: brightness(1.1);
}
 .fslider {
     filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}
 .fslider .slide img {
     position: relative;
     z-index: 0;
     display: block;
     width: 100%;
     height: auto;
     pointer-events: none;
}
 .fslider .slide {
     transition: filter 0.3s ease;
}
 .fslider .slide:hover {
     filter: brightness(1.17);
}
 .app-footer-features>.font-body {
     font-weight: 300;
}
 #page-menu {
     height: 0;
     overflow: hidden;
     -webkit-backface-visibility: hidden;
}
 #page-menu #page-menu-wrap {
     opacity: 0;
     pointer-events: none;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
     -webkit-transform: translate3d(0, -44px, 0);
     -o-transform: translate3d(0, -44px, 0);
     transform: translate3d(0, -44px, 0);
     transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
}
 #page-menu.sticky-page-menu {
     overflow: visible;
}
 #page-menu.sticky-page-menu #page-menu-wrap {
     opacity: 1;
     pointer-events: auto;
     -webkit-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
}
 body:not(.is-expanded-menu) {
     --cnvs-header-height: 60px;
}
 #oc-clients {
     position: relative;
     -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 80%, transparent 100%);
     mask-image: linear-gradient(to right, transparent 0%, black 20%, black 85%, transparent 100%);
     -webkit-mask-size: 100% 100%;
     mask-size: 100% 100%;
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
}
 .toggle-header, .accordion-header {
     margin: 0px;
}
 .breadcrumb {
     padding-bottom: 12px;
}
 .hover-brighten {
     transition: filter 0.3s ease;
}
 .hover-brighten:hover {
     filter: brightness(1.17);
     transition: filter 0.3s ease;
}
 .card {
     color: white;
}
 @media (min-width: 1600px) {
     .pro, .non-pro {
         display: block !important;
    }
}
 #cross {
     background-size: 75% auto;
     background-position: 126% 10%;
     background-repeat: no-repeat;
}
 i[aria-label="Yes"] {
     color: #709fed !important;
}
 .about-card {
     border-radius: 18px;
     /*box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.12);*/
     color: #fff;
     padding: 2.5rem 2rem 2rem 2rem;
     margin-bottom: 2.5rem;
}
 .about-card h2, .about-card h3 {
     color: #fff;
     font-weight: 700;
}
 .about-card p, .about-card li, .about-card .history .box-content {
     color: #b8c6d9;
     font-size: 1.08rem;
}
 .about-card img {
     border-radius: 12px;
     background: transparent;
}
 @media (max-width: 900px) {
     .about-card {
         padding: 1.2rem 0.7rem;
    }
     .about-card .history li {
         flex-direction: column;
         align-items: flex-start;
    }
     .about-card .history .thumb {
         margin-bottom: 0.7rem;
         margin-right: 0;
    }
}
 .contact-details, .social-icons {
     border-radius: 14px;
     padding: 2rem 1.5rem;
     margin-bottom: 1.5rem;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
}
 @media (max-width: 900px) {
     .contact-details, .social-icons {
         padding: 1.2rem 0.7rem;
         margin-bottom: 1.2rem;
    }
}
 @-webkit-keyframes pulsate {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1);
         opacity: 0.8;
    }
     45% {
         -webkit-transform: scale(1.75);
         transform: scale(1.75);
         opacity: 0;
    }
}
 @keyframes pulsate {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1);
         opacity: 0.8;
    }
     45% {
         -webkit-transform: scale(1.75);
         transform: scale(1.75);
         opacity: 0;
    }
}
 ul.history li {
     display: flex;
     align-items: center;
     margin-bottom: 1.5rem;
}
 ul.history .thumb {
     width: 120px;
     min-height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     background: #438de1;
     border-radius: 8px;
     margin-right: 1rem;
     text-align: center;
     margin: 0p;
     ;
}
 ul.history .featured-box {
     flex: 1 1 0;
     min-width: 0;
     background: #181b26;
     border-radius: 8px;
     padding: 1rem;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
}
 .thumb h4 {
     margin: 20px;
}
 .alert-info {
     background-color: #0057b370 !important;
     color: whitesmoke;
     border-color: #0056b3;
}
 .card-title h4 {
     align-items: center;
     text-align: center;
}
 .card-body p {
     align-items: justify;
 }
 
 .card-body {
     margin: 4px;
}
 ul.mega-menu-column>li>a>div {
     text-transform: capitalize !important;
     font-size: 16px;
}
 .is-expanded-menu .sub-menu-container .menu-item>.menu-link {
     text-transform: capitalize !important;
     font-weight: 500;
     font-size: 15px;
}
 .menu-item.mega-menu {
     position: relative;
}
 .mega-menu-content {
     left: -500px;
     right: auto;
}
/* Banner styles */
 .sale-banner img {
     max-height: 150px;

     object-fit: scale-down;
}
 @media (max-width: 768px) {
     .sale-banner img {
         max-height: 120px;
    }
}
 .sale-banner>img {
     animation: slideIn 1s ease-in-out;
}
 @keyframes slideIn {
     from {
         transform: translateY(-100%);
         opacity: 0;
    }
     to {
         transform: translateY(0);
         opacity: 1;
    }
}

.sale-banner-wrapper {
    height: 0;
    overflow: hidden;
    transition: height 1s ease-in-out;
    background: linear-gradient(to bottom, #06070e, #0F1321);
}
.sale-banner-content-wrapper {
    background:#161B27;
   
}

.sale-banner-content-wrapper > .sale-banner {
     opacity: 1;
     transform: translateY(0%);
}
.sale-banner {
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.sale-banner-wrapper.show .sale-banner{
    opacity: 1;
    transform: translateY(0);
}


 @keyframes showBanner {
     to {
         opacity: 1;
        /* Fully visible */
         transform: translateY(0);
        /* Move it into view */
    }
}
/* Overrides Bootstrap's default toast fade to an animate-up effect. */
 @keyframes slideInUp {
     from {
         transform: translateY(50px);
         opacity: 0;
    }
     to {
         transform: translateY(0);
         opacity: 1;
    }
}
 .toast.show {
     animation: slideInUp 0.4s ease-out;
}
 .toast:not(.show) {
     opacity: 0;
}

em.fw-bold {
font-family: Satoshi-Variable;
}


    .sitemap-links a {
        color: #f8f9fa; /* Standard light color for text */
        text-decoration: none;
        transition: color 0.2s ease-in-out;
    }
    .sitemap-links a:hover,
    .sitemap-links a:focus {
        color: #1098f7 !important; /* Blue highlight color on hover/focus */
        text-decoration: none;
    }


    .toggle-button:before {
background-color: rgb(73, 80, 87) !important;
    }


    /* Homepage specific customizations */

/* Keyframes for hotspot pulsate effect */
@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0.8;
    }
    45% {
        -webkit-transform: scale(1.75);
        transform: scale(1.75);
        opacity: 0;
    }
}

@keyframes pulsate {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0.8;
    }
    45% {
        -webkit-transform: scale(1.75);
        transform: scale(1.75);
        opacity: 0;
    }
}

/* Hotspot styles */
.hotspot-img {
    position: relative;
    background-size: cover;
    background-position: center center;
}

.hotspot-img .hot-spot {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 26px;
    height: 26px;
    border-radius: 100%;
    background: linear-gradient(135deg, #007bff, #4595f0);
    color: #FFF;
    text-align: center;
    font-size: 12px;
    line-height: 26px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
    filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.5));
    transition: all .3s ease;
}

.hotspot-img .hot-spot:hover {
    background: linear-gradient(135deg, #0056b3, #4595f0);
    box-shadow: 0 8px 16px rgba(0, 123, 255, 0.4);
}

.hotspot-img .hot-spot .circle:after {
    content: '';
    display: block;
    position: absolute;
    top: 39%;
    left: 39%;
    width: 30px;
    height: 30px;
    margin: -1em auto auto -1em;
    border: 10px solid rgba(0, 123, 255, 0.5);
    border-radius: 50%;
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: pulsate 3s ease-out infinite;
    animation: pulsate 3s ease-out infinite;
}

.hot-spot > a {
    color: #FFF;
}

.hotspot-img .hot-spot .circle i {
    transition: transform .25s ease-out;
    -webkit-transition: -webkit-transform .25s ease-out;
}

.hotspot-img .hot-spot.hotspot-tooltip-open .circle i,
.hotspot-img .hot-spot:not(.hotspot-on-click):hover .circle i {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Tooltip styles */
.hotspot-img .hot-spot .tooltip {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    width: 280px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.96);
    border-radius: 3px;
    font-size: 14px;
    height: fit-content;
    opacity: 1.0;
    z-index: 999;
    box-shadow: 0 30px 102px rgba(0, 0, 0, 0.33), 0 20px 51px rgba(0, 0, 0, 0.18);
}

.hotspot-img .hot-spot .tooltip.ontop {
    top: auto;
    bottom: 35px;
}

.hotspot-img .hot-spot .tooltip .img-row {
    display: block;
    margin-bottom: 10px;
}

.hotspot-img .hot-spot .tooltip h4 {
    margin-bottom: 0;
}

.hotspot-img .hot-spot .tooltip p {
    margin-bottom: 10px;
    font-size: 13px !important;
    line-height: 1.3rem !important;
    color: #666 !important;
}

.hotspot-img .hot-spot .tooltip p:last-child {
    margin-bottom: 0;
}

.hotspot-styles1 {
    top: 46.4px; 
    left: 208.8px; 
    display: block;
}



/* Responsive styles for tooltips */
@media (max-width: 991px) {
    .hotspot-img .hot-spot .tooltip {
        width: 200px;
        top: 35px;
        left: 30px;
    }

    .hotspot-img .hot-spot .tooltip .img-row {
        display: none;
    }
}

/* Responsive adjusments */

/* Logo styling */
.mw-logo {
    min-height: 88px;
}

@media (max-width: 1400px) {
    .menu-item .menu-link {
        padding: .5rem .65rem !important;
    }

    .menu-item .menu-link>div {

        font-size: 1rem;
    }
}

/* Responsive adjustments */
@media (max-width: 990px) {
    .content-wrap {
        padding-top: 0 !important;
    }

    .section {
        padding-top: 48px !important;
    }

    .menu-item .menu-link>img {
        width: 100%;
        height: auto;
    }

    .mw-logo {
        min-height: 64px;
    }

    .mw-logo>img {
        max-height: 64px;
    }

    .mw-logo>img.mw-logo-text {
        display: none;
    }

    .mw-logo>img.mw-logo-icon {
        display: block;
    }

    .mw-logo>img.mw-logo-icon-small {
        display: none;
    }
}

@media (min-width: 768px) {
    .content-wrap {
        padding-top: 24px;
    }

}

/* Hover animation fix */
div>div.tab-pane>img {
    padding-top: 16px;
}

.content-overlay {
    height: 100%;
}

.mw-content {
    padding-top: 48px;
    padding-bottom: 96px;
}

.shadow-sm>.card-body {
    padding: 1px;
}

.saas-tab>.nav-link {
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.3;

}

.nav-link>.tab-desc>p {
    margin-bottom: 18px;
}

.is-expanded-menu .mega-menu-content {
    transform: translateX(-82%);
}

.app-footer-features>i {
    color: var(--mw-blue) !important;
}

/* Fix menu hover for Misc. not being big enough */
.mega-menu>.menu-link {
    padding-top: 36px;
    padding-bottom: 36px;
}

.display_none {
    display: none;
}
.none_relative {
    display: none;
    position: relative;
}
.mw-2 {
    max-width: 200px;
}

.tinted-w {
    --cnvs-square-size: 20px;
  }
  
  .tinted-w .square {
    width: var(--cnvs-square-size);
    height: var(--cnvs-square-size);
    /* optionally object-fit, border-radius, etc. */
  }
  .top-1 {
    top: 1px;
  }
.jcl {
    justify-content: left;
}

.iconlist-container li {
  
    justify-content: left;

}
.mw-bg-darkblue {
    background-color: #161B29 !important;
}
.icon-blue {
    color: #007bff !important;
}


.word-rotator-item {
    display: block;
    height: 54px;
    line-height: 54px;
}

.word-rotator-viewport {
  
        display: inline-block;
        vertical-align: top;
        height: 54px;
        overflow: hidden;
        padding: 0 1.25rem;
        border: 1px solid rgba(13, 110, 253, 0.4);
        border-radius: 50rem;
        background-color: rgba(13, 110, 253, 0.1);
}


.toggle-font-size {
    --cnvs-toggle-font-size: 1.125rem;
}
.light_blue {
    color: #1098f7  !important;
}


.cnvs-style-20 {
    --cnvs-square-size: 20px;
}

.mw-bg-light-blue {
    background-color: #5d92ee !important;
}

.mw-light-blue {
    color: #5d92ee !important;
}

.white-2rem {
    font-size: 2rem; 
    color: #fff;
}

.gray-1 {
    color: #b8c6d9;
}

.mw-dark-1 {
    background-color: #161B27;
}

.mw-style-1 {
    background: #0090e3;
    width: 54px;
    height: 54px;
    border-radius: 50%;
}
.mw-style-2 {
color: #fff; 
font-size: 1.7rem;
}
.mw-font-mb {
    font-size: 2rem; 
    margin-bottom: 0;
}
.mw-blue-semi {
    color:#6dabff; 
    font-weight: 600;
}

.light-gray {
    color: #adb5bd;
}

a.btn.btn-sm.btn-outline-primary {
    color:  var(--cnvs-link-color);
  }
  a.btn.btn-sm.btn-outline-primary:hover {
    background-color: #fff !important;
  }

  .mw-style-3 {
    letter-spacing: 0.1em !important; 
    color: #1098f7 !important;
  }

  .mw-style-4 {
    background: #0090e3; 
    width: 72px; 
    height: 72px; 
    border-radius: 50%;
  }
  .fff2 {
    color: #fff; 
    font-size: 2rem;
  }

  .mw-style-5 {
   background-color: #23283a;
   border-radius: 18px;
  }

.mw-style-6 {
    color: #ffffff;
    text-decoration: underline !important;
}

.mobile-wh {
    width: 200px; 
    height: 60px;
}


/* RESPONSIVE ADDITIONS 2025-6-25 */

/* --- Custom Styles for Mobile Banner --- */

/* Use a media query to apply these styles only on screens smaller than 768px (tablets and phones) */
@media (max-width: 767.98px) {
    #bannerToast {
      display: none  !important; /* Hide the banner toast on mobile */
    }
  } 
  
  @media (max-width: 767.98px) {
     .container {
      padding-left:10px;
      padding-right: 10px;
     }
  
     .mw-calltoaction {
      padding: 0rem !important;
      margin-top: 0rem !important;
      margin-bottom: 0.5rem !important;
      text-align: center;
     }
  
     #free_trial {
      display: none;
     }
  
     .flex-viewport {
      max-height: 480px;
     }
  
     .tab-content {
      padding:0 !important;
     }
  
     .mw-features-section > .container {
        padding: 0rem 0.5rem !important;
     }
  
     .mw-features-section p {
      padding: 0rem 1.5rem !important;
     }

     .mega-menu-content {
        left: 0px; /*reset position for mobile*/
  
  }
}
  /* --- FINAL Mobile Hero Section (V3 - With Fade Transition) --- */
  
  @media (max-width: 767.98px) {
  
  
      /* 1. Target the direct parent of the slider and text blocks */
      #slider .slider-inner {
          display: flex;
          flex-direction: column;
          height: auto;
      }
  
      /* 2. SLIDER BLOCK */
      #slider .slider-inner > .row.position-absolute {
          order: 1;
          position: static !important;
          
          min-height: 250px;
          /* NEW: Add relative positioning to be a container for the overlay */
          position: relative; 
         
      }

      .h-100 {
        flex-grow:.7;
      }
  
      /* 3. NEW TOP GRADIENT (::before) */
      #slider .slider-inner > .row.position-absolute::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 10%; /* Adjust fade distance */
          /* This gradient fades from a solid color down to transparent */
          background: linear-gradient(to bottom, #0c142492 0%, transparent 100%);
          /* IMPORTANT: Change #101828 to the exact color of your top announcement bar */
          z-index: 2;
      }
      
      /* 3. THE FADE EFFECT (Gradient Overlay) */
      /* NEW: Add a pseudo-element that sits on top of the slider container */
      #slider .slider-inner > .row.position-absolute::after {
          content: ''; /* Required for pseudo-elements */
          position: absolute; /* Position it relative to the slider block */
          bottom: 0;
          left: 0;
          width: 100%;
          height: 65%; /* The gradient will cover the bottom 60% of the image */
          /* The magic: a gradient from transparent to the text block's color */
          background: linear-gradient(to bottom, transparent 0%,  #0c142492 10%, #0c1424 3%);
          z-index: 2; /* Ensure it sits above the image but below any other content if needed */
      }
  
      /* 4. Ensure the actual slide images fit correctly under the fade */
      #slider .background-slideshow,
      #slider .background-slideshow .slide {
    
  
      /* 1. THE FIX FOR TILING: This is the most important line. */
      background-repeat: no-repeat;
  
      /* 2. THE FIX FOR FILLING: Use clamp() to ensure the image is always
            big enough to fill the container, preventing empty space. */
      background-size: 140%;
  
      /* 3. THE CORRECTED POSITIONING: To shift an image UP, use a 
            vertical percentage less than 50%. */
            background-position: -60px -60px;
         
      }
      
      /* 5. TEXT CONTENT BLOCK */
      #slider .slider-inner > .content-overlay {
          order: 2;
          position: static !important;
           /* --- THE FROSTED GLASS EFFECT --- */
  
          /* a) Use a semi-transparent background. The last number is opacity. */
          /* Based on your example, we'll use a translucent white */
          background: #0c14242a;
  
          /* b) This is the magic property that blurs the background */
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px); /* For Safari support */
  
          /* c) (Optional) A subtle border enhances the "glass" feel */
          border-top: 1px solid rgba(255, 255, 255, 0.2);
          padding: 0.5rem 1rem !important;
          width: 100% !important;
          height: auto;
          /* NEW: Ensure text appears above the fade gradient's bleed */
          position: relative;
          z-index: 3;
      }
      
      /* 6. Clean up text and hide secondary elements */
      #slider .mw-hero-main {
          padding: 0 !important;
          margin-left: 0 !important;
          margin-right: 0 !important;
          margin-bottom: 0 !important;
      }
  
      #slider h1.display-4 {
          font-size: 2.3rem;
      }
  
      #slider .whats-new-button,
      #slider .tinted-w {
          display: none !important;
      }
  }
  
  @media (max-width: 991.98px) {
  
      .pricing-tabs {
          margin-top:0px;
      }
  
      .mw-calltoaction {  
          padding: 0.5rem !important;
      }
  
    .mw-crossplatform .image-container {
      left: 0 !important; /* Reset the left offset on mobile */
    }
  
    .sale-banner-wrapper {
      height: auto !important; /* Smaller banner on mobile */
    }
  
    #top-bar > .container > .text-center {
      font-size: .82rem   !important; /* Smaller text on mobile */
    }
  
    #top-bar {
      padding: 0.5rem 0 !important; /* Adjust padding for mobile */
    }
  }
  /*
  * CSS for "Ultra Mini" wrapped pills on smaller screens
  *
  * This version shrinks the pills and allows them to wrap,
  * ensuring all are visible on screen at once without scrolling.
  */
  @media (max-width: 767.98px) {
  
      /* 1. Change the nav container to a centered, wrapping layout */
      .saas-tab.nav-pills {
          display: flex;
          flex-wrap: wrap;              /* CRITICAL: Allow pills to wrap to the next line */
          justify-content: center;      /* Center the pills horizontally */
          flex-direction: row !important; /* Keep the row direction */
          padding: 10px 5px;            /* Add some padding around the entire block */
  
          /* Remove all overflow and scrollbar styles from previous attempts */
          overflow: visible;
      }
  
      /* 2. Style the individual links to be very compact */
      .saas-tab .nav-link {
          flex: 0 1 auto;           /* Allow pills to have natural width but not grow */
          white-space: nowrap;      /* Keep link text on one line */
          border-bottom: none;      /* Remove any bottom borders */
          
          /* Drastically reduce size for the "ultra mini" look */
          padding: 6px 12px;
          margin: 4px;
          border-radius: 20px; /* Maintain the pill shape */
      }
      
      /* Remove specific margins on children from previous code */
      .saas-tab .nav-link:first-child,
      .saas-tab .nav-link:last-child {
          margin: 4px;
      }
  
      /* 3. Make the heading text smaller */
      .saas-tab .nav-link h3 {
          font-size: 0.75rem; /* Significantly smaller font */
          margin-bottom: 0;
          line-height: 1;     /* Reduce line height for a tighter fit */
      }
  
      /* 4. Ensure the description remains hidden */
      .saas-tab .nav-link .tab-desc {
          display: none !important;
      }
  
      /* Your site's native .active class will handle the active pill color */
  
      /*fix pill image looking weird on mobile*/
      div>div.tab-pane>img {
      padding-left: 0px;
  }
  
  }
  
  
  @media (max-width: 991.98px) {
      /* Reduce the font size of the main modal title */
      #paymentOptionsModal .modal-title {
          font-size: 1.1rem; /* Adjust as needed */
      }
  
      /* Reduce the padding in the header to tighten the space */
      #paymentOptionsModal .modal-header {
          padding: 0.75rem 1rem; /* Less padding top/bottom */
      }
  }
  
  /*
    This targets screens smaller than 992px, which is the point where 
    Bootstrap's '-lg-' columns stack vertically.
  */
  @media (max-width: 991.98px) {
      /*
        Selects the right-hand column (with the order summary) inside the modal body
        and overrides its top margin.
      */
      #paymentOptionsModal .modal-body .col-lg-5 {
          margin-top: 0rem; /* Drastically reduces the top margin */
      }

      .mw-features > div {
        margin-top: 0px;
    }
  }
  
  @media (max-width: 767px) {
  
      .plan-selector {
          gap:.45rem;
      }
      /* Make the modal take up more of the screen height */
      #paymentOptionsModal .modal-dialog {
          margin: 0.5rem;
          /* Aligns the modal to the top, giving more room to scroll down */
          align-items: flex-start; 
      }
  
      /* Reduce padding on the modal's main body */
      #paymentOptionsModal .modal-body {
          padding: .75rem 0.75rem;
          padding-bottom: 0px;
      }
      
      /* Reduce padding within each payment option significantly */
      #paymentOptionsModal .plan-option {
          padding: 0.45rem .75rem; /* Reduced top/bottom padding */
          
      }
  
      /* Reduce the font size of the plan titles and prices */
      #paymentOptionsModal .plan-details .plan-title {
          font-size: 1.1rem;
          margin-bottom: 2px; /* Reduce space between title and price */
      }
  
      #paymentOptionsModal .plan-details .plan-price {
          font-size: 1.3rem; /* Make the main price a bit smaller */
          line-height: 1.2;
      }
      
      /* Target the smaller text like "/month" or "/one-time" */
      #paymentOptionsModal .plan-price span {
          font-size: 1rem;
      }
  
      /* Reduce space taken by the "Select Your Plan" heading */
      #paymentOptionsModal .modal-body h6 {
          font-size: 1.3rem;
          margin-bottom: 0.5rem; /* Less space below the heading */
      }
      
      /* Shrink the Order Summary box */
      #paymentOptionsModal .order-summary {
          padding: .5rem .75rem;
          margin-top: .75rem; /* Less space above the summary */
      }
  
      .summary-item {
          margin-top: .5rem !important; /* Reduce space between summary items */
          margin-bottom: 0rem;
      }
  
      .secure-checkout-info {
          margin-top:.25rem;
      }
  
      .plan-option {
          margin-top:0px !important;
          margin-bottom: 0px !important;
      }
    }

  .modal-content {
    background-color: #181c2a !important;
  }