.help-tip {
	position: relative;
	/*top: 18px;
            right: 18px;*/
	text-align: center;
	background-color: white;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	font-size: 12px;
	line-height: 20px;
	cursor: default;
}

	.help-tip:before {
		content: '?';
		font-weight: bold;
		color: black;
	}

	.help-tip:hover .help-contents {
		display: block;
		transform-origin: 100% 0%;
		-webkit-animation: fadeIn 0.3s ease-in-out;
		animation: fadeIn 0.3s ease-in-out;
	}

	.help-tip .help-contents { /* The tooltip */
		display: none;
		text-align: left;
		background-color: white;
		padding: 15px;
		width: 240px;
		position: absolute;
		border-radius: 3px;
		box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
		right: -47px;
		top: 24px;
		color: black;
		font-size: 13px;
		line-height: 1.4;
		z-index: 5;
	}

		.help-tip .help-contents:before { /* The pointer of the tooltip */
			position: absolute;
			content: '';
			width: 0;
			height: 0;
			border: 6px solid transparent;
			border-bottom-color: white;
			right: 50px;
			top: -12px;
		}

		.help-tip .help-contents:after { /* Prevents the tooltip from being hidden */
			width: 100%;
			height: 40px;
			content: '';
			position: absolute;
			top: -40px;
			left: 0;
		}

/* CSS animation */

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}

	100% {
		opacity: 100%;
		transform: scale(1);
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 100%;
	}
}

.toggle {
	box-sizing: border-box;
	font-size: 0;
	display: flex;
	flex-flow: row nowrap;
	flex: 0 0 30%;
	justify-content: center;
	align-items: center;
}

	.toggle input {
		width: 0;
		height: 0;
		position: absolute;
		left: -9999px;
	}

		.toggle input + label {
			margin: 0;
			padding: 10px 25px;
			box-sizing: border-box;
			position: relative;
			display: inline-block;
			border: solid 1px #DDD;
			background-color: white;
			color: #272E47;
			font-size: 14px;
			line-height: 140%;
			font-weight: 300;
			text-align: center;
			box-shadow: 0 0 0 rgba(255, 255, 255, 0);
			transition: border-color 0.15s ease-out, color 0.25s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
		}

			.toggle input + label:first-of-type {
				border-radius: 20px 0 0 20px;
				border-right: none;
			}

			.toggle input + label:last-of-type {
				border-radius: 0 20px 20px 0;
				border-left: none;
			}

		.toggle input:hover + label {
			border-color: #272E47;
		}

		.toggle input:checked + label {
			background-color: #272E47;
			color: white;
			border-color: #272E47;
			z-index: 1;
		}

@media (max-width: 800px) {
	.toggle input + label {
		padding: 0.25rem 0.25rem;
		flex: 0 0 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

@media (max-width: 900px) {
	.loginName {
		display: none !important;
	}

	.hidemobile {
		display: none !important;
	}
}

.sticky .account-btn {
	color: black;
}

.round {
	overflow: hidden;
	position: relative;
	border-radius: 60%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type=number] {
	-moz-appearance: textfield;
}

.image-container {
	position: relative;
}

.ud-features{
	padding: 0;
	padding-top: 15vh;
}

.ud-hero{
	min-height: 100vh;
	padding-top: 20vh;
	position: relative;
	overflow: hidden;
	background: #080514;
}
.ud-hero .container{
	z-index: 9;
}
.ud-hero .ud-hero-title{
	font-size: 48px;
}
.ud-hero .ud-hero-desc{
	max-width: 600px;
	margin-left: 0px;
	opacity: 1;
	padding: 10px;
	background-color: rgba(0, 0, 0, .6);
	border-radius: 8px;
}
.ud-main-btn{
	font-weight: 800;
	padding: 10px 25px;
	font-size: 14px;
}

.data-drive-sub-hero-section{
	background-color: #272E47;
	padding: 50px 0px;
}
.data-drive-sub-hero-section h3{
	font-size: 34px;
	text-align: center;
	line-height: 52px;
	font-weight: 900;
	color: white
}
@media all and (max-width: 780px){
	.data-drive-sub-hero-section h3{
		font-size: 28px;
		line-height: 36px;
		text-align: center;
	}
}
.feature-custom-cards{
	padding: 15vh 0px;
}

.data-drive-section-title{
	margin-bottom: 5vh;
	text-align: center;
}

.data-drive-section-title h2{
	font-size: 60px;
	font-weight: 800;
	max-width: 800px;
	margin: 0px auto 30px;
	color: #272E47;
}
.data-drive-section-title p{
	font-size: 14px;
}

.data-drive-feature-card{
	text-align: center;
	padding: 50px 20px;
}

.data-drive-feature-card .icon{
	margin-bottom: 30px;
}

.data-drive-feature-card h3{
	font-size: 18px;
	margin-bottom: 10px;
}
.data-drive-feature-card p{
	font-size: 14px;
}

.data-drive-counter-section{
	background-color: #F3F4FE;
	padding: 15vh 0px;
	margin: 12vh 0px 5vh;
}

.data-drive-counter-section .data-drive-counter{
	text-align: center;
}
.data-drive-counter-section .data-drive-counter h2{
	font-size: 110px;
	font-weight: 900;
}
.data-drive-pricint-table{
	padding: 5vh 0px 0vh;
}

.data-drive-pricint-table ul{
	list-style-type: disc;
	padding: 8px 16px;
}

.data-drive-pricint-table .pricing-table{
	margin-top: 50px;
}
.data-drive-pricint-table .pricing-table table{
	width: 100%;
}
.data-drive-pricint-table .pricing-cards{
	display: none;
}
.data-drive-pricint-table .pricing-table table tr{
	border-bottom: 1px solid #E6E9F5;
}
.data-drive-pricint-table .pricing-table table th, .data-drive-pricint-table .pricing-table table td{
	border-right: 1px solid #E6E9F5;
	padding: 10px 10px;
}
.data-drive-pricint-table .pricing-table table th{
	min-width: 250px;
}
.data-drive-pricint-table .pricing-table table td{
	text-align: center;
}
.data-drive-pricint-table .pricing-table table td:nth-child(3){
	background-color: #F3F4FE;
	/*transform: translateY(-6px);*/
}
.data-drive-pricint-table .pricing-table table th p, .data-drive-pricint-table .pricing-table table td p{
	font-size: 14px;
	color: #272E47;
}
.data-drive-pricint-table .pricing-table table th .small{
	font-size: 12px;
	color: #858BA0;
	margin-top: 10px;
}
.data-drive-pricint-table .pricing-table table td .price h4{
	font-size: 40px;
	line-height: 40px;
}
	.data-drive-pricint-table .pricing-table table td .price .table-button {
		background-color: rgb(237 191 74);
		color: #353535;
		font-size: 14px;
		padding: 10px 30px;
		display: block;
		border-radius: 4px;
		max-width: 90%;
		margin: 0px auto;
	}
.data-drive-pricint-table .pricing-table table .infos{
	margin-left: 10px;
	position: relative;
}
.data-drive-pricint-table .pricing-table table .infos:hover .data-drive-tooltip{
	display: block;
}
.data-drive-pricint-table .pricing-table table .infos:hover .icon{
	opacity: 1;
}
.data-drive-pricint-table .pricing-table table .infos .icon{
	width: 20px;
	opacity: .7;
	transition: all .3s ease-out;
}
.data-drive-pricint-table .pricing-table table .infos .icon img{
	height: 30px;
	cursor: pointer;
}
.data-drive-pricint-table .pricing-table table .infos .data-drive-tooltip{
	display: none;
	position: absolute;
	left: -20px;
	top: 35px;
	background-color: #fff;
	padding: 20px;
	border: 1px solid #E6E9F5;
	border-radius: 4px;
	min-width: 250px;
	box-shadow: 0px 3px 18px rgba(87, 96, 128, 0.2);
	z-index: 6;
}
.data-drive-pricint-table .pricing-table table .infos .data-drive-tooltip img{
	margin-bottom: 10px;
}
.data-drive-pricint-table .pricing-table table .infos .data-drive-tooltip p{
	font-size: 12px;
	line-height: 18px;
}


.data-driven-wrapper{
	margin-bottom: 50px;
}

.data-driven-wrapper .data-driven-content-wrapper{
	display: flex;
	background-color: #fff;
	padding: 100px 50px;
	width: 90%;
	position: relative;
	border-radius: 10px;
}
.data-driven-wrapper .data-driven-content-wrapper.data-driven-content-wrapper-image-right{
	margin-right: auto;
	padding-right: 25%;
	padding-left: 15%;
}

.data-driven-wrapper .data-driven-content-wrapper.data-driven-content-wrapper-image-right .data-driven-content-wrapper-image{
	position: absolute;
	right: -11%;
	top: 7%;
}
.data-driven-wrapper .data-driven-content-wrapper.data-driven-content-wrapper-image-left{
	margin-left: auto;
	padding-left: 25%;
	padding-right: 15%;
}

.data-driven-wrapper .data-driven-content-wrapper.data-driven-content-wrapper-image-left .data-driven-content-wrapper-image{
	position: absolute;
	left: -11%;
	top: 7%;
}
.data-driven-wrapper .data-driven-content-wrapper .data-driven-content-wrapper-image img{
	height: 350px;
	width: 350px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid rgba(39, 46, 71, 0.5);
	background-color: #fff;
}

.data-driven-wrapper .data-driven-content-wrapper .data-driven-content-wrapper-text .tag{
	font-size: 14px;
	margin-bottom: 10px;
}
.data-driven-wrapper .data-driven-content-wrapper .data-driven-content-wrapper-text h2{
	margin-bottom: 20px;
	font-size: 50px;
}

.data-driven-parallax {
	background-color: #fff;
	padding: 100px 50px;
	margin-bottom: 50px;
	border-radius: 10px;
	background-image: url(./assets/images/parallax1.jpg);
	background-image: -webkit-image-set( url('./assets/images/parallax.webp') type('image/webp') 1x, url('./assets/images/parallax1.jpg') type('image/jpeg') 1x );
	background-image: image-set( url('./assets/images/parallax.webp') type('image/webp') 1x, url('./assets/images/parallax1.jpg') type('image/jpeg') 1x );
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	overflow: hidden;
}
.data-driven-parallax::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, .3);
}
.data-driven-parallax h2{
	font-size: 50px;
	position: relative;
	z-index: 4;
	color: white;
}
.data-driven-parallax a{
	position: relative;
	z-index: 4;
}
.divider{
	height: 150px;
}

.data-driven-faq-card{
	background-color: #fff;
	padding: 30px;
	margin-bottom: 30px;
	border-radius: 10px;
}
.data-driven-faq-card .number{
	background-color: #272E47;
	height: 30px;
	width: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	color: white;
	margin-bottom: 20px;
}
.data-driven-faq-card h5{
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 10px;
}
.data-driven-faq-card p{
	font-size: 14px;
}

.testimonial{
	background-color: #FAFAFA;
	padding: 10px;
	margin: 0px 10px;
	border-radius: 10px;
}
.splide__slide{
	transition: all .3s ease-out;
}
.splide__slide:not(.is-active){
	opacity: .5;
}

.testimonial img{
	width: 90%;
	border-radius: 20px;
}

.testimonial p{
	font-size: 14px;
	margin-bottom: 20px;
}
.testimonial .ud-testimonial-meta h4{
	font-size: 18px;
}
.testimonial .ud-testimonial-meta p{
	font-weight: 300;
}



#contact{
	padding: 10vh 0px;
	background-color: #F3F4FE;
}
#contact h5{
	font-size: 28px;
	margin-bottom: 10px;
}
#contact p{
	font-size: 14px;
}

.contact-form .ud-form-group{
	margin-bottom: 20px;
}
.contact-form .ud-form-group label{
	display: block;
	margin-bottom: 10px;
}
.contact-form .ud-form-group input{
	display: block;
	width: 100%;
	background-color: transparent;
	border: 0px;
	border: 1px solid #8D8D8D;
	padding-left: 15px;
	height: 40px;
	border-radius: 4px;
	font-size: 14px;
}
.contact-form .ud-form-group input:focus{
	border: 1px solid #000000;
}
.contact-form .ud-form-group textarea{
	display: block;
	width: 100%;
	background-color: transparent;
	border: 0px;
	border: 1px solid #8D8D8D;
	padding-left: 15px;
	padding-top: 10px;
	height: 120px;
	border-radius: 4px;
	font-size: 14px;
}
.contact-form .ud-form-group textarea:focus{
	border: 1px solid #000000;
}
.contact-form .ud-form-group input[type=checkbox]{
	height: 15px;
}
.contact-form .ud-form-group button{
	background-color: #272E47;
	font-weight: 500;
}

#contact .icon{
	margin-bottom: 15px;
	display: flex;
	align-items: center;
}
#contact .icon p{
	margin-left: 10px;
}
#contact .socials{
	display: flex;
	align-items: center;
}
#contact .socials .social{
	margin-right: 20px;
	cursor: pointer;
}
@media all and (max-width: 780px){
	html{
		overflow-x: hidden;
	}
	.ud-hero .ud-hero-title{
		font-size: 35px;
		margin-bottom: 180px;
		text-align: center !important;
	}
	.ud-hero .ud-hero-desc{
		text-align: center !important;
		opacity: 1;
		background-color: rgba(0, 0, 0, .6);
		padding: 10px;
		border-radius: 8px;
	}
	.ud-hero-buttons{
		justify-content: center !important;
	}
	.data-drive-section-title h2{
		font-size: 36px;
	}
	.data-drive-counter-section .data-drive-counter{
		margin-bottom: 30px;
	}
	.data-drive-counter-section .data-drive-counter h2{
		font-size: 80px;
	}
	.data-drive-pricint-table{
		padding: 5vh 0px 5vh;
	}
	.data-drive-pricint-table .pricing-table{
		display: none;
	}
	.data-driven-wrapper .data-driven-content-wrapper{
		padding: 30px;
		width: 100%;
		position: relative;
		display: block;
	}
	.data-driven-wrapper .data-driven-content-wrapper.data-driven-content-wrapper-image-right{
		margin-right: auto;
		padding-right: 5%;
		padding-left: 5%;
	}
	
	.data-driven-wrapper .data-driven-content-wrapper.data-driven-content-wrapper-image-right .data-driven-content-wrapper-image{
		position: static;
	}
	.data-driven-wrapper .data-driven-content-wrapper.data-driven-content-wrapper-image-left{
		margin-left: auto;
		padding-left: 5%;
		padding-right: 5%;
	}
	
	.data-driven-wrapper .data-driven-content-wrapper.data-driven-content-wrapper-image-left .data-driven-content-wrapper-image{
		position: static;
	}
	.data-driven-wrapper .data-driven-content-wrapper .data-driven-content-wrapper-image img{
		height: 250px;
		width: 100%;
		margin-bottom: 20px;
	}
	
	.data-driven-wrapper .data-driven-content-wrapper .data-driven-content-wrapper-text h2{
		margin-bottom: 20px;
		font-size: 30px;
	}
	.data-driven-parallax{
		padding: 30px;
		text-align: center !important;
	}
	.data-driven-parallax h2{
		font-size: 26px;
		margin-bottom: 30px;
	}
	.data-driven-parallax .col-md-4{
		text-align: center !important;
	}
	.testimonial img{
		width: 100%;
		margin-bottom: 20px;
	}
	.contact-form{
		margin-top: 50px;
	}

	#about .who-we-are img{
		margin-top: 50px;
	}
	#about .why-us{
		flex-direction: column-reverse;
	}
	#about .who-we-are h2{
		margin-bottom: 20px;
	}
	#about .why-us h2{
		margin-bottom: 20px;
	}
	#about .why-us img{
		margin-top: 50px;
	}

	#about .px-5{
		padding: 0 !important;
	}





	.pricing-cards {
    padding: 5vh 0px 15vh;
    display: flex !important;
    flex-wrap: wrap;
    gap: 20px;
	}

	.pricing-cards .card {
			border: 1px solid #E6E9F5;
			border-radius: 8px;
			padding: 20px;
			background-color: #fff;
			width: 100%;
			box-shadow: 0px 3px 18px rgba(87, 96, 128, 0.2);
	}

	.pricing-cards .card h4 {
			font-size: 24px;
			text-align: center;
	}

	.pricing-cards .card p {
			font-size: 14px;
			color: #272E47;
			margin-bottom: 10px;
			text-align: center;
	}

	.pricing-cards .card .compare {
		text-align: center;
		color: #000;
	}

	.pricing-cards .card .compare.lt {
		text-decoration: line-through;
		opacity: .5;
		font-weight: 400;
	}

	.pricing-cards .card .small {
			font-size: 12px;
			color: #858BA0;
			margin-top: 10px;
	}

	.pricing-cards .card .price h4 {
			font-size: 32px;
			line-height: 40px;
	}

		.pricing-cards .card .card-button {
			background-color: rgb(237 191 74);
			color: #353535;
			font-size: 14px;
			padding: 10px 30px;
			display: block;
			border-radius: 4px;
			text-align: center;
			margin: 0px auto;
			margin-bottom: 20px;
		}

	.pricing-cards .card .check-icon {
			text-align: center;
			margin-top: 10px;
	}

	.pricing-cards .card .check-icon img {
			height: 30px;
	}

}

footer ol{
	margin-top: 20px;
}
footer ol a{
	font-size: 16px;
	color: #0A142F;
	margin-bottom: 10px;
}
footer h5{
	font-size: 18px;
	color: #0A142F;
	margin-bottom: 20px;
	font-weight: 500;
}
footer ul a{
	font-size: 14px;
	color: #0A142F;
	margin-bottom: 20px;
	opacity: .65;
}
footer .newsletter-form form{
	display: flex;
	align-items: center;
}
footer .newsletter-form form input{
	height: 45px;
	border: 1px solid #D6D6D6;
	border-radius: 6px 0px 0px 6px;
	padding-left: 15px;
	font-size: 14px;
}
footer .newsletter-form form button{
	background-color: #272E47;
	border: 0px;
	height: 45px;
	width: 50px;
	border-radius: 0px 6px 6px 0px;
}

.sub-footer{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sub-footer .socials{
	display: flex;
	align-items: center;
	gap: 10px;
}

@media all and (max-width: 780px){
	.sub-footer{
		display: block;
	}
	.sub-footer .socials{
		margin-bottom: 20px;
		justify-content: center;
	}
	.sub-footer p{
		text-align: center;
	}
}


.justify-space-between{
	justify-content: space-between;
}


.footnote .card{
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0px 3px 14px rgba(0, 0, 0, .05);
}
.footnote .card a{
	margin-top: 20px;
	max-width: 280px;
}

.dark-header a{
	color: black !important;
}
.dark-header .navbar-toggler .toggler-icon{
	background-color: #000;
}
.navbar-right-actions{
	display: flex;
	align-items: center;
	gap: 12px;
}
.navbar-right-actions li{
	list-style-type: none;
}
.navbar-right-actions li a{
	font-size: 16px;
	color: white;
}
.ud-header.sticky .navbar-right-actions li a{
	color: #212b36;
}
.page-1{
	margin-top: 15vh;
	margin-bottom: 5vh;
}

.page-1 h1{
	margin-bottom: 20px;
	font-size: 64px;
}
@media all and (max-width: 780px){
	.page-1 h1{
		font-size: 40px;
	}
}
.page-1 p{
	font-size: 14px;
	margin-bottom: 10px;
}
.page-1 .row{
	margin-top: 20px;
	margin-bottom: 20px;
}
.page-1 .col-md-6 img{
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.page-1 .divider{
	 height: 20px;
}


.page-2-title{
	background-image: url(./assets/images/parallax1.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
	height: 40vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
@media all and (max-width: 780px){
	.page-2-title{
		background-image: url(./assets/images/parallax1.jpg);
		background-size: cover;
		background-attachment: fixed;
		background-position: center center;
		height: 30vh;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
}
.page-2-title::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, .3);
}

.page-2-title h1{
	color: white;
	position: relative;
	z-index: 4;
	font-size: 68px;
}

@media all and (max-width: 780px){
	.page-2-title h1{
		text-align: center;
		font-size: 40px;
	}
}

.page-2{
	margin-top: 5vh;
	margin-bottom: 5vh;
}

.page-2 h1{
	margin-bottom: 20px;
	font-size: 64px;
}
.page-2 p{
	font-size: 14px;
	margin-bottom: 10px;
}
.page-2 .row{
	margin-top: 20px;
	margin-bottom: 20px;
}
.page-2 .col-md-6 img{
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

@media all and (max-width: 780px){
	.page-1 .col-md-6{
		margin-bottom: 20px;
	}
	.page-2 .col-md-6{
		margin-bottom: 20px;
	}
	.reverse-row{
		flex-direction: column-reverse;
	}
}
.page-2 .divider{
	 height: 20px;
}


/* 18/12/2024 */

.data-drive-steps-section{
	background-image: url(./assets/images/steps/Background.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	margin: 50px 0px;
}

.data-drive-steps-section h2{
	text-align: center;
	margin-bottom: 28px;
	color: #15346B;
}

.data-drive-steps-section .data-driven-step-card{
	text-align: center;
	padding: 20px;
}
.data-drive-steps-section .data-driven-step-card:not(.middle){
	margin-top: 50px;
}
.data-drive-steps-section .data-driven-step-card img{
	height: 220px;
	margin-bottom: 16px;
}
.data-drive-steps-section .data-driven-step-card h4{
	font-size: 18px;
	font-weight: 900;
	margin-bottom: 12px;
	color: #15346B;
}
.data-drive-steps-section .data-driven-step-card p{
	max-width: 300px;
	margin: 0px auto;
	color: #15346B;
}
@media all and (max-width: 780px){
	.data-drive-steps-section{
		background-size: cover;
		margin: 20px 0px;
	}
	.data-drive-steps-section .data-driven-step-card{
		text-align: center;
		padding: 8px;
	}
	.data-drive-steps-section .data-driven-step-card p{
		max-width: 100%;
	}
}

.data-drive-help-section{
	padding: 50px 0px;
}
.data-drive-help-section .title{
	text-align: center;
	margin-bottom: 40px;
}
.data-drive-help-section .title h2{
	font-size: 60px;
	font-weight: 800;
	max-width: 800px;
	margin: 0px auto 30px;
	color: #272E47;
}
.data-drive-help-section .title p{
	font-size: 16px;
}
.data-drive-help-section .help-card:not(.middle){
	margin-top: 32px;
}
.data-drive-help-section .help-card.middle img{
	height: 240px;
}
.data-drive-help-section .help-card img{
	height: 220px;
	width: 100%;
	object-fit: cover;
	border-radius: 12px;
	margin-bottom: 20px;
}
.data-drive-help-section .help-card h4{
	text-align: center;
	font-size: 18px;
	font-weight: 900;
	margin-bottom: 12px;
	color: #15346B;
}
.data-drive-help-section .help-card p{
	text-align: center;
	max-width: 300px;
	margin: 0px auto;
	color: #15346B;
}

@media all and (max-width: 780px){
	.data-drive-help-section .help-card{
		margin-top: 32px;
	}
}

.data-driven-promo-box{
	background-image: url(./assets/images/parallax_2.svg);
	background-color: #272E47;
	padding: 16vh 0px;
	text-align: center;
	background-size: 50%;
	background-repeat: no-repeat;
	background-position: center right;
}

.data-driven-promo-box h3{
	color: white;
	font-size: 40px;
}

@media all and (max-width: 780px){
	
	.data-driven-promo-box{
		padding: 16vh 0px;
		background-size: cover;
		background-position: center center;
	}

	.data-driven-promo-box h3{
		color: white;
		font-size: 24px;
	}

}
.data-driven-why-us h2{
	margin-bottom: 60px;
}


.data-driven-register-aside{
	max-width: 320px;
	padding: 24px;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
	border-right: 1px solid #E4E7ED;
}

.data-driven-register-aside .steps{
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media all and (max-width: 780px){
	.data-driven-register-aside {
	  position: relative;
	  max-width: 100%;
	  padding: 12px;
	  text-align: center;
	}
  
	.data-driven-register-aside .logo img {
	  width: 60%;
	}
  
	.data-driven-register-aside .steps {
	  display: flex;
	  flex-direction: row;
	  gap: 24px;
	  justify-content: center;
	  position: relative;
	}
  
	.data-driven-register-aside .steps .step {
	  flex: 0 0 auto;
	  scroll-snap-align: start;
	  position: relative;
		gap: 0px !important;
	}
  
	.data-driven-register-aside .steps .step p {
	  display: none;
	}
  
	.data-driven-register-aside .steps .step:not(:last-child)::after {
	  content: '';
	  position: absolute;
	  top: 50%;
	  left: 100%;
	  width: 24px;
	  height: 1px;
	  background-color: #BEBEC4;
	  transform: translateY(-50%);
	}
  
	.data-driven-register-aside .steps .step.active .icon {
	  color: white;
	  border-color: #1E075F;
	  background-color: #1E075F;
	}
  
	.data-driven-register-aside .steps .step.passed .icon {
	  border-color: #F2F2F7;
	  background-color: #F2F2F7;
	}
  
	.data-driven-register-aside .steps .step .icon {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 32px;
	  width: 32px;
	  border: 1px solid #BEBEC4;
	  font-size: 14px;
	  border-radius: 50%;
	  position: relative;
	  z-index: 1;
	}
}

.data-driven-register-aside .steps .step{
	display: flex;
	gap: 16px;
}
.data-driven-register-aside .steps .step.active .icon{
	color: white;
	border-color: #1E075F;
	background-color: #1E075F;
}
.data-driven-register-aside .steps .step.passed .icon{
	border-color: #F2F2F7;
	background-color: #F2F2F7;
}

.data-driven-register-aside .steps .step .icon{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	width: 32px;
	border: 1px solid #BEBEC4;
	font-size: 14px;
	border-radius: 50%;
}

.data-driven-register-aside .steps .step div:nth-child(2){
	width: calc(100% - 32px - 16px);
}

.data-driven-register-aside .steps .step .username{
	color: #1E075F;
	margin-left: 12px;
}

.data-driven-register-main{
	width: calc(100% - 320px);
	margin-left: auto;
	padding: 60px;
}
@media all and (max-width: 780px){
	.data-driven-register-main{
		width: 100%;
		margin-left: auto;
		padding: 20px;
	}
}

.data-driven-register-main .register-title{
	font-size: 24px;
	margin-bottom: 20px;
}

.data-driven-register-main .register-text{
	font-size: 16px;
	max-width: 640px;
	color: #807F93;
}

.data-driven-register-main .step-container{
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.data-driven-register-main .step-container form{
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.data-driven-register-main .step-container form .form-element, .attrEntry{
	max-width: 640px;
	display: flex;
	/* align-items: center; */
}
@media all and (max-width: 780px){
	.data-driven-register-main .step-container form .form-element{
		flex-direction: column;
		gap: 12px;
	}
}

.data-driven-register-main .step-container form .form-element label{
	display: block;
	width: 220px;
	color: #000;
}
.data-driven-register-main .step-container form .form-element .content{
	display: block;
	width: 220px;
	color: #000;
	padding-right: 12px;
}
@media all and (max-width: 780px){
	.data-driven-register-main .step-container form .form-element label{
		width: 100%;
	}
	.data-driven-register-main .step-container form .form-element .content{
		width: 100%;
	}
}


.data-driven-register-main .step-container form .form-element .paswword-element{
	width: calc(100% - 220px);
}

@media all and (max-width: 780px){
	.data-driven-register-main .step-container form .form-element .paswword-element{
		width: 100%;
	}
}
.data-driven-register-main .step-container form .form-element .paswword-element input{
	width: 100%;
}

.data-driven-register-main .step-container form .form-element .paswword-element .password-validator{
	width: 100%;
	height: 6px;
	background-color: #ccc;
	margin: 14px 0px 10px;
	border-radius: 6px;
}

.data-driven-register-main .step-container form .form-element .paswword-element .password-validator .strength-indicator{
	height: 6px;
	border-radius: 6px;
	transition: all .3s ease-out;
}

.data-driven-register-main .step-container form .form-element .paswword-element p{
	font-size: 12px;
}

.data-driven-register-main .step-container form .form-element input, .data-driven-register-main .step-container form .form-element select, .attrEntry input{
	height: 45px;
	border: 1px solid #D6D6D6;
	border-radius: 6px;
	padding-left: 15px;
	font-size: 14px;
	box-sizing: border-box;
	width: calc(100% - 220px);
}
.data-driven-register-main .step-container form .form-element .textarea{
	width: calc(100% - 220px);
}
.data-driven-register-main .step-container form .form-element textarea{
	height: 185px;
	border: 1px solid #D6D6D6;
	border-radius: 6px;
	padding: 15px;
	font-size: 14px;
	box-sizing: border-box;
	width: 100%;
}
.data-driven-register-main .step-container form .form-element .autocomplete{
	width: calc(100% - 220px);
	position: relative;
}
@media all and (max-width: 780px){
	.data-driven-register-main .step-container form .form-element{
		max-width: 100% !important;
	}
	.data-driven-register-main .step-container form .content{
		max-width: 100% !important;
	}
	.data-driven-register-main .step-container form .form-element input{
		width: 100% !important;
	}
	.data-driven-register-main .step-container form .form-element .textarea{
		width: 100% !important;
	}
	.data-driven-register-main .step-container form .form-element .autocomplete{
		width: 100% !important;
	}
}
.data-driven-register-main .step-container form .form-element .autocomplete input{
	box-sizing: border-box;
	width: 100%;
}
.data-driven-register-main .step-container form .form-element .autocomplete .result{
	position: absolute;
	left: 0;
	top: 52px;
	right: 0;
	min-height: 40px;
	background-color: #fff;
	box-shadow: 0px 3px 8px rgba(0, 0, 0, .1);
	border-radius: 4px;
}
.data-driven-register-main .step-container form .form-element .autocomplete .result .item{
	display: flex;
	gap: 12px;
	align-items: center;
	padding:  8px 20px;
	border-bottom: 1px solid #e7e7e7;
	transition: all .3s ease-out;
	font-size: 12px;
	cursor: pointer;
}
.data-driven-register-main .step-container form .form-element .autocomplete .result .item p{
	font-size: 12px;
}
.data-driven-register-main .step-container form .form-element .autocomplete .result .item:hover{
	background-color: #e7e7e7;
}
.data-driven-register-main .step-container form .form-element .autocomplete .result .item.selected{
	background-color: #e7e7e7;
}
.data-driven-register-main .step-container form .form-element .autocomplete .result .item:last-child{
	border-bottom: 0px;
}

.next-step-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	background-color: rgb(237, 191, 74);
	border: none;
	color: #353535;
	font-size: 14px;
	font-weight: 500;
	border-radius: 4px;
	padding: 0px 12px;
	cursor: pointer;
	transition: background-color 0.2s ease;
	white-space: nowrap;
	width: auto;
}
  .next-step-btn.disabled {
	background-color: rgba(237, 191, 74, 0.3);
	color: gray;
	cursor: auto;
  }
  .next-step-btn:not(:disabled):hover {
	background-color: rgb(255, 195, 43);
  }
  .next-step-btn i {
	font-size: 18px;
	font-weight: bold;
	transition: transform 0.3s ease, opacity 0.3s ease;
	opacity: 0.8;
	transform: translateX(0);
  }
  .next-step-btn:not(:disabled):hover i {
	opacity: 1;
	transform: translateX(5px);
  }

.data-driven-register-main .step-container form .login-link{
	font-size: 14px;
	margin-top: 12px;
}

.data-driven-register-main .step-container form p{
	font-size: 14px;
}

.loader-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 1); /* Semi-transparent white background */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

/* Loader styling */
.loader {
	border: 6px solid #f3f3f3; /* Light grey */
	border-top: 6px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 1s linear infinite;
}

/* Spin animation */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.toast-notification .notification{
	max-width: 400px;
	background-color: #ccc;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px;
	border-radius: 12px;
	position: fixed;
	top: 30px;
	right: 40px;
	box-shadow: 0px 3px 12px rgba(0, 0, 0, .4);
}
.toast-notification .notification.warning{
	background-color: #ef9144;
}
.toast-notification .notification.error{
	background-color: #EF4444;
}
.toast-notification .notification img{
	height: 26px;
	filter: invert(1);
}
.toast-notification .notification p{
	font-size: 14px;
	color: white;
}
.toast-notification .notification h4{
	font-size: 18px;
	color: white;
}
.toast-notification .notification .close{
	cursor: pointer;
	margin-left: 12px;
}

.sso-login{
	display: flex;
	align-items: center;
}

.sso-login img {
	height: 24px;
	margin-right: 12px;
}

.divider-register{
	display: flex;
	align-items: center;
	gap: 12px;
}
.divider-register span{
	height: 1px;
	background-color: #ccc;
	width: 120px;
}
.divider-register p{
	font-size: 14px;
}

.text-red{
	color: red;
}
.text-green{
	color: green;
}


.data-driven-register-main .step-4{
	margin-top: 0;
}
.data-driven-register-main .step-4 .animation{
	height: 160px;
}
.data-driven-register-main .step-4 .account-summary ul{
	list-style-type: disc;
	padding-left: 24px;
}

.data-driven-register-main .step-4 .account-summary .toggle-switch{
	display: flex;
	align-items: center;
	gap: 20px;
	padding-top: 4px;
}
.data-driven-register-main .step-4 .account-summary .toggle-switch div{
	display: flex;
	align-items: center;
}
.data-driven-register-main .step-4 .account-summary .toggle-switch div input[type=checkbox]{
	height: 0;
	width: 0;
	visibility: hidden;
}
.data-driven-register-main .step-4 .account-summary .toggle-switch div label {
	cursor: pointer;
	text-indent: -9999px;
	width: 60px;
	height: 32px;
	background: grey;
	display: block;
	border-radius: 100px;
	position: relative;
}
.data-driven-register-main .step-4 .account-summary .toggle-switch div label:after {
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 12px;
	transition: 0.3s;
}
.data-driven-register-main .step-4 .account-summary .toggle-switch div input:checked + label {
	background: rgb(237 191 74);
}
.data-driven-register-main .step-4 .account-summary .toggle-switch div input:checked + label:after {
	left: calc(100% - 5px);
	transform: translateX(-100%);
}
.data-driven-register-main .step-4 .account-summary .toggle-switch div label:active:after {
	width: 30px;
}


.data-driven-register-main .step-4 .account-summary .to-payment{
	margin-top: 20px;
	margin-bottom: 12px;
}
.data-driven-register-main .step-4 .account-summary button{
	background-color: rgb(237 191 74);
	color: #353535;
	font-size: 14px;
	padding: 10px 30px;
	display: block;
	border-radius: 4px;
	max-width: 90%;
}
.data-driven-register-main .step-4 .account-summary .to-payment small{
	color: #353535;
	font-size: 12px;
}


.data-driven-register-main .step-4 .account-summary .switch-plan-box{
	padding: 20px;
	margin-top: 20px;
	border: 2px solid rgb(237 191 74);
	border-radius: 12px;
	margin-bottom: 32px;
	background-color: #fafafa;
}

.data-driven-register-main .step-2 .criteria-box {
	padding: 20px;
	border: 1px solid rgb(209 209 209);
	border-radius: 12px;
	margin-bottom: 32px;
	background-color: #fcfcfc;
}

@media all and (max-width: 640px){
	.data-driven-register-main .step-4 .account-summary .switch-plan-box{
		padding: 20px 12px;
	}
}

#attributeList ul li .attrEntry .verificationControlContent .buttons{
	margin-top: 20px;
}
#attributeList ul li .attrEntry .verificationControlContent .buttons button{
	background-color: rgb(237 191 74);
	color: #353535;
	font-size: 14px;
	padding: 10px 30px;
	border-radius: 4px;
	max-width: 320px;
	width: 100% !important;
	margin: 0 !important;
}

[x-cloak] {
	display: none !important;
}


.data-driven-clients-logo .row{
	align-items: center;
	justify-content: center;
}
.data-driven-clients-logo img{
	width: 100%;
	height: 100px;
	object-fit: contain;
}

#logoutLink span{
	display: inline-block;
}
#logoutLink i{
	display: inline-block;	
}

@media all and (max-width: 640px){
	#logoutLink span{
		display: none;
	}
	#logoutLink i{
		display: inline-block;	
	}
}

.wow {
	visibility: hidden;
}

.mega-menu {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	transition: opacity 0.3s ease;
	z-index: 1000;
	padding: 20px 0 10px 0;
	border-radius: 12px;
	margin-top: 0;
	opacity: 0;
	display: none;
}

@media all and (min-width: 768px) {
	.category-items:hover .mega-menu {
		opacity: 1;
		display: block;
	}
}

.mega-menu-column {
	padding: 0 15px;
}
.mega-menu-column a {
	padding: 8px 15px;
	color: var(--heading-color);
	transition: all 0.2s ease;
	font-size: 14px;
	border-radius: 4px;
	margin-bottom: 2px;
}
.mega-menu-column a:hover {
	color: #13C296;
	background: rgba(48, 86, 211, 0.04);
	transform: translateX(5px);
}

/* Stilizare pentru secțiunea de prețuri finală */
.pricing-cards {
	display: flex !important;
	justify-content: center;
	padding: 0;
	margin: 0 auto;
	flex-wrap: nowrap;
	gap: 20px;
	overflow: visible;
}

.col-md-4 {
	padding: 0 10px;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}

.pricing-card {
	border: 1px solid #E6E9F5;
	border-radius: 12px;
	overflow: visible;
	background-color: #fff;
	box-shadow: 0px 3px 18px rgba(87, 96, 128, 0.08);
	height: 100%;
	position: relative;
	transition: all 0.3s ease;
	width: 100%;
}

	.pricing-card:hover {
		transform: translateY(-8px);
		box-shadow: 0px 8px 24px rgba(87, 96, 128, 0.15);
	}

	.pricing-card.featured {
		border: 2px solid rgb(237, 191, 74);
		transform: scale(1.02);
		z-index: 2;
	}

		.pricing-card.featured:hover {
			transform: translateY(-8px) scale(1.02);
		}

/* Stilizare pentru numele planurilor */
.plan-name {
	padding: 20px;
	text-align: center;
	background: #f8f9fa;
	border-bottom: 1px solid #E6E9F5;
	transition: all 0.3s ease;
	border-radius: 12px 12px 0 0;
}

	.plan-name h3 {
		margin: 0;
		font-size: 1.4rem;
		font-weight: 700;
		color: #272E47;
	}

	.plan-name.featured {
		background: rgba(237, 191, 74, 0.15);
	}

.pricing-card .card-body {
	padding: 25px;
	display: flex;
	flex-direction: column;
	overflow: visible;
}

.card-description {
	min-height: 70px;
	color: #666;
	margin-bottom: 20px;
	font-size: 0.95rem;
}

.price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	margin: 25px 0;
}

	.price h4 {
		font-size: 2.5rem;
		font-weight: 700;
		margin: 0;
		color: #272E47;
	}

	.price span {
		margin-left: 8px;
		color: #666;
	}

.btn-price {
	display: block;
	text-align: center;
	padding: 12px 25px;
	border-radius: 6px;
	background-color: #E6E9F5;
	color: #272E47;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	margin-top: auto;
}

	.btn-price:hover {
		opacity: 0.9;
	}

	.btn-price.featured {
		background-color: rgb(237, 191, 74);
		color: #353535;
	}

.feature-list {
	list-style: none;
	padding: 0;
	margin: 20px 0 0 0;
	flex-grow: 1;
	overflow: visible;
}

	.feature-list li {
		padding: 8px 0;
		display: flex;
		align-items: flex-start;
		line-height: 1.4;
		margin-bottom: 5px;
		position: relative;
		overflow: visible;
	}

		.feature-list li i {
			margin-right: 10px;
			color: #272E47;
			min-width: 16px;
			text-align: center;
			margin-top: 3px;
		}

			.feature-list li i.fa-plus {
				color: rgb(237, 191, 74);
			}

			.feature-list li i.fa-user {
				color: #3f6ad8;
			}

.popular-tag {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgb(237, 191, 74);
	color: #353535;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 0.8rem;
	font-weight: 600;
	z-index: 3;
}

/* Noul switch de facturare */
.billing-switch-container {
	margin: 30px auto;
	text-align: center;
}

	.billing-switch-container p {
		margin-bottom: 15px;
		font-size: 1rem;
		color: #555;
	}

.billing-switch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f8f9fa;
	padding: 10px 20px;
	border-radius: 50px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.billing-option {
	font-size: 1rem;
	font-weight: 500;
	color: #555;
	padding: 0 15px;
	display: flex;
	align-items: center;
}

#monthlyLabel.active,
#yearlyLabel.active {
	color: #272E47;
	font-weight: 700;
}

.discount-badge {
	background-color: rgb(237, 191, 74);
	color: #353535;
	font-size: 0.7rem;
	padding: 2px 6px;
	border-radius: 20px;
	margin-left: 8px;
	font-weight: 700;
}

/* Switch toggle */
.switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 26px;
	margin: 0 10px;
}

	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .4s;
}

	.slider:before {
		position: absolute;
		content: "";
		height: 20px;
		width: 20px;
		left: 3px;
		bottom: 3px;
		background-color: white;
		transition: .4s;
	}

input:checked + .slider {
	background-color: #272E47;
}

input:focus + .slider {
	box-shadow: 0 0 1px #272E47;
}

input:checked + .slider:before {
	transform: translateX(24px);
}

.slider.round {
	border-radius: 34px;
}

	.slider.round:before {
		border-radius: 50%;
	}

/* Media queries pentru responsive design */
@media (max-width: 1199px) {
	.pricing-cards {
		gap: 15px;
	}

	.feature-list li {
		font-size: 0.85rem;
	}

	.plan-name h3 {
		font-size: 1.3rem;
	}

	/* Hide the "Recomandat" badge on smaller screens to prevent overlap */
	.popular-tag {
		display: none;
	}
}

@media (max-width: 991px) {
	.pricing-cards {
		flex-wrap: wrap;
	}

	.col-md-4 {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 20px;
	}

	.pricing-card {
		max-width: 450px;
		margin: 0 auto 20px;
	}

	.card-description {
		min-height: auto;
	}

	.pricing-card.featured {
		transform: none;
	}

		.pricing-card.featured:hover {
			transform: translateY(-8px);
		}
}

@media (max-width: 767px) {
	.pricing-cards {
		display: flex !important;
		flex-direction: column;
		gap: 20px;
	}

	.pricing-card {
		width: 100%;
	}

	.billing-switch {
		flex-wrap: wrap;
		padding: 10px;
	}

	.price h4 {
		font-size: 2rem;
}
}

.categories-container {
	padding: 40px 0px;
}
.categories-column-content {
	display: block;
	text-decoration: none;
	transition: all 0.3s ease;
	padding: 6px 10px 6px 10px;
	margin: 8px 0;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.categories-column-content:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	transform: translateY(-3px);
	cursor: pointer;
}
.categories-column-content .category-name {
	color: #353535;
}
.categories-column-content:hover .category-name {
	color: rgb(255, 195, 43);
}
.categories-column-content .category-description {
	color: var(--body-color);
	font-size: 14px;
}


.chip-soft {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: white;
	margin:2px;
	color: #334155;
	padding: 8px 14px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	border: 1px solid rgb(237, 191, 74);
	transition: all 0.2s ease;
}

	.chip-soft:hover {
		background: #e2e8f0;
		color: #1e293b;
		border-color: rgb(237, 191, 74);
	}

	.chip-soft .close-btn {
		background: rgba(148, 163, 184, 0.2);
		border: none;
		width: 18px;
		height: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #64748b;
		cursor: pointer;
		border-radius: 50%;
		transition: all 0.2s ease;
	}

		.chip-soft .close-btn:hover {
			background: rgba(148, 163, 184, 0.3);
			color: #475569;
		}

/* Processing animation styles for streamlined onboarding flow */
.processing-container {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	text-align: center;
}

.processing-content {
	max-width: 400px;
	margin: 0 auto;
}

.processing-content h3 {
	margin-bottom: 1rem;
	color: #333;
	font-size: 1.5rem;
}

.processing-content p {
	margin-bottom: 2rem;
	color: #666;
	font-size: 1rem;
}

.progress-bar {
	width: 100%;
	height: 8px;
	background-color: #e5e7eb;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 1rem;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #3b82f6, #1d4ed8);
	border-radius: 4px;
	transition: width 0.1s ease-out;
	animation: shimmer 2s infinite linear;
}

.progress-text {
	font-size: 0.875rem;
	color: #666;
	margin: 0;
}

@keyframes shimmer {
	0% {
		background-position: -200px 0;
	}
	100% {
		background-position: 200px 0;
	}
}

/* Trial info styles for streamlined onboarding completion */
.trial-info {
	text-align: center;
	margin-top: 2rem;
}

.trial-info h6 {
	color: #333;
	font-weight: 600;
	margin-bottom: 1.5rem;
}

.trial-info .btn-lg {
	padding: 0.75rem 2rem;
	font-size: 1.1rem;
	font-weight: 600;
	border-radius: 8px;
	min-width: 200px;
}

.trial-info .text-muted {
	font-size: 0.875rem;
	line-height: 1.4;
}

/* Tooltip styles for pricing features */
.feature-with-tooltip {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 100%;
}

/* Style 1: Info icon tooltip (appears to the right) */
.tooltip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-left: 6px;
	background-color: rgba(237, 191, 74, 0.2);
	border-radius: 50%;
	cursor: help;
	font-size: 10px;
	font-weight: bold;
	color: #272E47;
	flex-shrink: 0;
}

.tooltip-icon:hover {
	background-color: rgba(237, 191, 74, 0.4);
}

.tooltip-content-right {
	display: none;
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	background-color: #fff;
	border: 1px solid #E6E9F5;
	border-radius: 8px;
	padding: 15px;
	width: 350px;
	box-shadow: 0px 4px 20px rgba(87, 96, 128, 0.25);
	z-index: 10000;
	font-size: 13px;
	line-height: 1.6;
	color: #272E47;
}

.tooltip-content-right::before {
	content: '';
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 8px solid transparent;
	border-right-color: #E6E9F5;
}

.tooltip-content-right::after {
	content: '';
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 7px solid transparent;
	border-right-color: #fff;
	margin-right: -1px;
}

.tooltip-icon:hover + .tooltip-content-right {
	display: block;
}

/* Style 2: Underline tooltip (appears below) */
.feature-with-underline-tooltip {
	position: relative;
	display: inline;
	border-bottom: 1px dotted #272E47;
	cursor: help;
}

.tooltip-content-below {
	display: none;
	position: absolute;
	left: 0;
	top: calc(100% + 8px);
	background-color: #fff;
	border: 1px solid #E6E9F5;
	border-radius: 8px;
	padding: 15px;
	width: 300px;
	box-shadow: 0px 4px 20px rgba(87, 96, 128, 0.25);
	z-index: 10000;
	font-size: 13px;
	line-height: 1.6;
	color: #272E47;
}

/* Mobile tooltip backdrop */
.tooltip-backdrop {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 99998;
}

.feature-with-underline-tooltip:hover .tooltip-backdrop {
	display: none;
}

.tooltip-content-below::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 20px;
	border: 8px solid transparent;
	border-bottom-color: #E6E9F5;
}

.tooltip-content-below::after {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 21px;
	border: 7px solid transparent;
	border-bottom-color: #fff;
	margin-bottom: -1px;
}

.feature-with-underline-tooltip:hover .tooltip-content-below {
	display: block;
}

/* Close button for tooltips - hidden on desktop */
.tooltip-close {
	display: none;
}

/* Style 3: Inline expand tooltip (expands below the feature item) */
.tooltip-content-expand {
	display: none;
	background-color: #f8f9fa;
	border-left: 3px solid rgb(237, 191, 74);
	padding: 12px;
	margin-top: 8px;
	margin-left: 26px;
	border-radius: 4px;
	font-size: 12px;
	line-height: 1.6;
	color: #555;
}

.feature-list li:hover .tooltip-content-expand {
	display: block;
}

/* Responsive adjustments */
@media (max-width: 991px) {
	.tooltip-content-right {
		left: 50%;
		top: auto;
		bottom: calc(100% + 10px);
		transform: translateX(-50%);
		width: 250px;
	}

	.tooltip-content-right::before {
		right: auto;
		left: 50%;
		top: 100%;
		transform: translateX(-50%);
		border-right-color: transparent;
		border-top-color: #E6E9F5;
	}

	.tooltip-content-right::after {
		right: auto;
		left: 50%;
		top: 100%;
		transform: translateX(-50%);
		border-right-color: transparent;
		border-top-color: #fff;
		margin-top: -1px;
		margin-right: 0;
	}

	.tooltip-content-below {
		width: 280px;
		position: fixed;
		z-index: 99999;
	}

	/* Reset positioning for mobile tooltips */
	/* Keep pricing cards positioned to contain the popular-tag badge */
	.pricing-card,
	.pricing-card.featured {
		position: relative !important;
		transform: none !important;
	}

	.pricing-card .card-body,
	.feature-list,
	.feature-list li {
		position: static !important;
		transform: none !important;
	}

	/* Disable card hover effects on mobile to prevent transform issues */
	.pricing-card:hover {
		transform: none !important;
	}

	.pricing-card.featured:hover {
		transform: none !important;
	}

	/* Disable hover tooltips on mobile */
	.feature-with-underline-tooltip:hover .tooltip-content-below {
		display: none;
	}

	/* Position tooltip at top of viewport on mobile for full visibility - click based */
	.feature-with-underline-tooltip.tooltip-active .tooltip-content-below {
		display: block;
		position: fixed !important;
		left: 5% !important;
		right: 5% !important;
		top: 80px !important;
		width: auto !important;
		transform: none !important;
		max-height: calc(100vh - 160px);
		overflow-y: auto;
		margin: 0;
	}

	/* Hide arrow on mobile as position is fixed */
	.tooltip-content-below::before,
	.tooltip-content-below::after {
		display: none !important;
	}

	/* Show and style close button on mobile - subtle design */
	.tooltip-close {
		display: block !important;
		position: absolute;
		top: 8px;
		right: 8px;
		width: 24px;
		height: 24px;
		background-color: rgba(0, 0, 0, 0.15);
		color: #666;
		border-radius: 50%;
		border: none;
		font-size: 18px;
		line-height: 24px;
		text-align: center;
		cursor: pointer;
		z-index: 100000;
		font-weight: normal;
		transition: all 0.2s ease;
	}

	.tooltip-close:hover {
		background-color: rgba(237, 191, 74, 0.3);
		color: #272E47;
	}

	.tooltip-close:active {
		transform: scale(0.9);
		background-color: rgba(237, 191, 74, 0.5);
	}
}