/* GLOBAL STYLES
-------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

/* Padding below the footer and lighter body text */

body {
  color: rgb(var(--bs-tertiary-color-rgb));
}

.container {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

h1, h2, h3 ,h4 ,h5 ,h6 {
	font-family: "Baloo 2", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600 !important;
	font-style: normal;
}

.btn {
	font-family: "Baloo 2", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
}

.btn-outline-green {
	color: #ffffff;
	border: 2px solid #6BF1BF;
}
.btn-outline-green:hover,
.btn-outline-green:focus,
.btn-outline-green.active {
	color: #000000;
	border: 2px solid #6BF1BF;
	background: #6BF1BF;
}

.btn-outline-dark-green {
	color: #000000;
	border: 2px solid #136F63;
}
.btn-outline-dark-green:hover,
.btn-outline-dark-green:focus,
.btn-outline-dark-green.active {
	color: #000000;
	border: 2px solid #6BF1BF;
	background: #6BF1BF;
}

.btn-outline-white {
	color: #ffffff;
	border: 2px solid #ffffff;
}
.btn-outline-white:hover,
.btn-outline-white:focus {
	color: #000000;
	border: 2px solid #6BF1BF;
	background: #6BF1BF;
}

.btn-white {
	background-color: #ffffff;
	border: 2px solid #ffffff;
}
.btn-white:hover,
.btn-white:focus {
	color: #000000;
	border: 2px solid #6BF1BF;
	background: #6BF1BF;
}

.btn-black {
	color: #ffffff;
	background-color: #000000;
	border: 2px solid #000000;
}
.btn-black:hover,
.btn-black:focus {
	color: #ffffff;
	border: 2px solid #111111;
	background: #111111;
}


.border-green {
	border-color: #6bf1bf;
}

.bg-green {
	background-color: #6bf1bf;
	color: #004F3E;
}

.border-orange {
	border-color: #FFB84C;
}

.bg-orange {
	background-color: #FFB84C;
	color: #663C00;
}

.border-blue {
	border-color: #39B0DA;
}

.bg-blue {
	background-color: #39B0DA;
	color: #00324D;
}

.border-pink {
	border-color: #FF6F91;
}

.bg-pink {
	background-color: #FF6F91;
	color: #6B0023;
}

.bg-purple  { background-color: #A76DFF; color: #25005A; }   /* works well with blue/pink */
.bg-yellow  { background-color: #FFE873; color: #665C00; }   /* softer complement to orange */
.bg-red     { background-color: #FF5E5E; color: #5A0000; }   /* attention / warning color */
.bg-teal    { background-color: #3ED1C3; color: #00433C; }   /* bridge between green & blue */
.bg-gray    { background-color: #ADB5BD; color: #212529; }   /* neutral balance tone */
.bg-navy    { background-color: #1E4C75; color: #FFFFFF; }   /* darker contrast for highlights */

.border-purple  { border-color: #A76DFF; }   /* works well with blue/pink */
.border-yellow  { border-color: #FFE873; }   /* softer complement to orange */
.border-red     { border-color: #FF5E5E; }   /* attention / warning color */
.border-teal    { border-color: #3ED1C3; }   /* bridge between green & blue */
.border-gray    { border-color: #ADB5BD; }   /* neutral balance tone */
.border-navy    { border-color: #1E4C75; }   /* darker contrast for highlights */



.bg-green-gradient {
	background-image: linear-gradient(90deg, #6bf1bf 0%, #136f63 100%);
}
.bg-green-dark-gradient {
	background-image: linear-gradient(90deg, #45CA99 0%, #136f63 100%);
}

.bg-dark-green {
	background-color: #136F63;
}

.text-dark-green {
	color: #136F63;
}

.text-muted-light {
	color: #bfc5d0 !important;   /* soft, readable gray on dark bg */
}

.accordion-button {
	font-weight: 500;
}
.accordion-button:focus {
	outline: none;
	box-shadow: none;
	background-color: #ffffff;
}
.accordion-button:not(.collapsed) {
	color: inherit;
}

.clickable-icon{
    pointer-events: auto !important; // required
}


/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

.navbar {
	height: 90px;
}

/* CUSTOMIZE THE HEADER
-------------------------------------------------- */

.bg-shape {
	background-image: url(../img/shape-2-1.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
}

.scan-phone-wrap {
	position: relative;
	display: inline-block;
}

.scan-phone-img {
	display: block;
	max-width: 100%;
	height: auto; 
}

/* phone screen region */
.scan-screen {
	position: absolute;
	top: 16%;        /* adjust to align with top of phone screen */
	left: 0;        /* adjust horizontally */
	width: 100%;      /* match phone screen width */
	height: 100%;     /* match phone screen height */
	overflow: hidden;
	border-radius: 20px;
	pointer-events: none;
	transform: rotate(0deg);
	transform-origin: center;
}

/* scan light image animation */
.scan-light {
	position: absolute;
	left: 0;
	top: 0%;        /* start above screen */
	width: 120%;
	opacity: 0.9;
	animation: scanBounce 2s ease-in-out infinite alternate;
}

/* moves the image down and back up */
@keyframes scanBounce {
	from { transform: translateY(-100%); }
	to   { transform: translateY(250%); }
}





/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */
.number-circle {
	height: 60px;
	width: 60px;
	text-align: center;
	color: #ffffff;
	font-family: "Baloo 2", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600 !important;
	font-style: normal;
	top: -1.5rem;
	left: -1.5rem;
}

.checklist li {
	position: relative;
	padding-left: 2rem;     /* indentation for text */
	line-height: 1.25;
}

.checklist li i {
	position: absolute;
	left: 0;
	top: 0rem;            /* adjust vertical alignment */
}

/* Highlight selected card */
.pricing-card.selected {
	transition: all 0.25s ease-in-out;
}

/* Hover effect */
.pricing-card:hover {
	transform: translateY(-5px);
	transition: all 0.25s ease-in-out;
}

/* Active button */
.select-btn.active {
	background-color: #6bf1bf;
	color: #000;
	border-color: #6bf1bf;
}

/* Badge styling */
.pill-badge {
	transition: all 0.25s ease-in-out;
}

.clickable-option {
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}
/*.clickable-option:hover {
	background-color: #6bf1bf !important;
	color: #000;
}*/
.clickable-option input[type="radio"] {
	pointer-events: none; /* prevents double click blocking */
}

.icon-bg {
	height: 60px;
	width: 60px;
}

.number-bg {
	height: 40px;
	width: 40px;
}

/* Featurettes
------------------------- */

.table-highlight th,
.table-highlight td {
	background-color: #E5FFEE;
}

.table-lg th,
.table-lg th {
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

/* SCROLLING BRANDS
-------------------------------------------------- */

.scroll-container {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}

.scroll-container::before,
.scroll-container::after {
	content: "";
	position: absolute;
	top: 0;
	width: 100px; /* fade width */
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

.scroll-container::before {
	left: 0;
	background: linear-gradient(to right, black 0%, transparent 100%);
}

.scroll-container::after {
	right: 0;
	background: linear-gradient(to left, black 0%, transparent 100%);
}

.scroll-content {
	display: inline-flex;
	align-items: center;
	animation: scroll-left 50s linear infinite;
}

.scroll-content img {
	max-width: 120px; /* adjust as needed */
	height: auto;
	opacity: 0.7;
	margin: 0 1.25rem;
	flex-shrink: 0;
}


/* CREDIT SCANNER
-------------------------------------------------- */

.scan-card {
	display: none;
}

.scan-card.active {
	display: block;
	animation: floatInUp 0.5s ease-out;
}

@keyframes floatInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}



/* Keyframes for endless scroll */
@keyframes scroll-left {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

@media (min-width: 768px) {
	.number-bg {
		height: 60px;
		width: 60px;
	}
}

@media (min-width: 1199px) {
	.custom-display {
		font-size: 5rem;
		line-height: 5rem;
	}	
}