@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
:root {
	--transition: all 0.4s ease-in;
	--font-48: 48px;
	--font-20: 20px;
	--font-14: 14px;
	--blue: #0f358e;
	--indigo: #6610f2;
	--purple: #6f42c1;
	--pink: #e83e8c;
	--red: #dc3545;
	--orange: #fd7e14;
	--yellow: #ffc107;
	--white: #fff;
	--gray: #6c757d;
	--gray-dark: #343a40;
	--primary: #007bff;
	--secondary: #6c757d;
	--success: #28a745;
	--info: #3b99e0;
	--warning: #ffc107;
	--danger: #dc3545;
	--light: #f8f9fa;
	--dark: #343a40;
}

body {
	/* font-family: "Poppins", sans-serif; */
}

img {
	width: 100%;
	display: block;
}

.navbar-light .navbar-nav .nav-link {
	color: var(--white);
}

.navbar-light .navbar-nav .nav-link.active {
	border-bottom: 2px solid var(--blue);
}

.navbar-light .navbar-nav .nav-link:hover {
	color: inherit;
}

.navbar-white .navbar-nav .nav-link {
	color: var(--blue);
}

.navbar-white .navbar-nav .nav-link:hover {
	color: var(--blue);
}

.text-blue {
	color: var(--blue);
}

.bg-blue {
	background: var(--blue);
}

.bg-white {
	background: var(--white);
}

.sticky-top {
	position: sticky;
	top: 0;
}

.bg-gray {
	background-color: #f5f5f5;
}

.bg-black {
	background-color: var(--dark);
	transition: var(--transition);
}

.btn-danger {
	background: #f91c3d;
	border: 1px solid #f91c3d;
}

.btn-primary {
	background: var(--blue);
	border: 1px solid var(--blue);
}

.clean-block.clean-hero .text {
	position: absolute;
	top: 20%;
}

.clean-block__img {
	max-width: 600px;
	position: absolute;
	z-index: 2;
	bottom: -20%;
}

.clean-block .text h1 {
	font-size: var(--font-48);
}

.clean-block.clean-hero .text {
	max-width: 70vw;
}

.title {
	font-size: var(--font-48);
}

.sub-title {
	font-size: var(--font-20);
}

.title-box {
	text-align: center;
}

.pt-150 {
	padding-top: 150px;
}

.padding-container {
	padding: 40px 15px;
}

.padding-container--small {
	padding: 20px 15px;
}

.solutions__card {
	text-align: center;
}

.solutions__img {
	max-width: 89px;
	margin: 0 auto;
}

.solutions__title {
	display: block;
	margin-top: 10px;
}

.solutions__text {
	margin-top: 10px;
	font-size: var(--font-14);
}

.login {
	z-index: 2;
}
.login form > * {
	color: var(--dark);
}

.card > * {
	color: var(--dark);
}

.login .card {
	padding: 60px;
}
.login,
.demo-access {
	position: relative;
	z-index: 10;
}
.demo-access .card {
	padding: 20px;
}

.licensing {
	/* margin: 40px 0; */
}
.licensing__fee .dollar {
	font-weight: bold;
	position: relative;
	line-height: 1.2;
	padding-left: 15px;
	font-size: var(--font-48);
}
.licensing__fee .per {
	color: #888;
	position: relative;
}
.licensing__fee .per::before {
	content: "/";
	display: inline-block;
	vertical-align: middle;
	margin: 0 4px;
	font-size: 12px;
	position: relative;
	bottom: 2px;
}

.highlights.bg-blue > * {
	color: var(--white);
}

.highlights__list li {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}
.highlights__list li {
	padding: 10px 0;
	border-bottom: 1px solid #efefef;
}
.highlights__list li p {
	font-size: var(--font-14);
	margin: 0;
}
.highlights__list li .fas {
	font-weight: bold;
}

.pricing__card {
	padding: 30px 16px;
	height: 100%;
}
.card-ultimate > * {
	color: var(--white);
}

.footer-link img {
	max-width: 124px;
}

.footer__links li:not(:last-child) {
	margin-right: 25px;
}

.footer__links a {
	text-decoration: none;
}

.navbar-light .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(225, 225, 225)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-light .navbar-toggler {
	border-color: rgba(225, 225, 225);
}

.navbar-white .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-white .navbar-toggler {
	border-color: rgba(0, 0, 0);
}

@media (max-width: 1200px) {
	:root {
		--font-48: 38px;
		--font-20: 20px;
		--font-14: 14px;
	}
}

@media (max-width: 866px) {
	:root {
		--font-48: 32px;
	}
}

@media (max-width: 500px) {
	:root {
		--font-48: 25px;
	}
	.logo img {
		max-width: 120px;
	}
	.pt-150 {
		padding-top: 85px;
	}
	.clean-block.clean-hero .text {
		padding-top: 0px;
	}
	.clean-block {
		height: 500px !important;
	}
	.clean-block.fit-height {
		height: 100% !important;
	}
	.clean-block.full-height {
		height: 100vh !important;
	}
	.clean-block__img {
		bottom: -25%;
	}
	.clean-block__img img {
		max-width: 80%;
		margin: 0 auto;
	}
	.footer-link img {
		margin: 0 auto;
	}
}

/* NEW CSS - HOW IT WORKS PAGE */

.btn-purple {
	background-color: #43428f;
	border: 0;
	color: #fff;
}

.btn-purple:hover {
	color: #fff;
	opacity: 0.8;
}

/*! FLIP CARD */
@media (max-width: 1200px) {
	.sec-flippers .col {
		padding-top: 20px;
	}
}

.flip-card {
	background-color: transparent;
	height: 320px;
	perspective: 1000px;
}

.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	border-radius: 20px;
}

.flip-card:hover .flip-card-inner {
	transform: rotateY(180deg);
}

.flip-card-content {
	color: white;
	padding: 45px 10px;
	border-radius: 20px;
}

.flip-card-front,
.flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.flip-card-front {
	background-color: #ff464d;
}

.flip-card-front .h3 {
	margin-top: 40px;
	text-transform: uppercase;
	font-size: 25px;
}

.flip-card-back {
	display: flex;
	align-items: center;
	border: 7px solid #ff464d;
	color: #000;
	font-weight: 600;
	background-color: #fff;
	transform: rotateY(180deg);
}
