@charset "UTF-8";
 :root {
	--width: 100vw;
	--angle: -7deg;
   /*----------------- Magic Number Alert: the 0.09719 is calculated by this formula: tan(11°) / 2 11° is the current skewY value. ------------------*/
	--magic-number: 0.05255;
	--skew-padding: calc(var(--width) * var(--magic-number));
	--skew-margin: calc(var(--width) * var(--magic-number) * -2);
}
 @media (min-width: 42em) {
	:root {
	   --width: 42rem;
   }
}
 .diagonal-box {
	position: relative;
	padding: var(--skew-padding) 0;
	margin-top: var(--skew-margin);
}
 .diagonal-box:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	transform: skewy(var(--angle));
	transform-origin: 50% 0;
	outline: 1px solid transparent;
	backface-visibility: hidden;
}

.diagonal-box:before, .privacy-policy, .privacy-policy {
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.275);
}

#hero {
	min-height: 0px !important;
}

.hero-light {
	color: rgba(255, 255, 255, 0.95) !important;
}

.more {
	background-color: #FFD97B;
	background-image: linear-gradient(90deg, #5ECCBF, #F4C552);
	background-size: 100%;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-webkit-text-fill-color: transparent; 
	-moz-text-fill-color: transparent;
}

.blue-bg:before, .privacy-policy {
	background: #64D8CA;
}

.red-bg:before {
	background: #FF944A;
}

.yellow-bg:before, .legal-notice {
	background: #FFD97B;
}

.feature-icon {
	background-color: rgba(0, 0, 0, 0.55);
}
.yellow-bg .feature-icon {
	background-color: #475955
}

.gradient-bg:before {
	 background-image: radial-gradient(
		 50% 50% at center,
		 rgba(255, 255, 255, 0.45) 0%,
		 rgba(0, 0, 0, 0.0) 100%
	   );
}

.gradient-bg-right:before {
	 background-image: radial-gradient(
		 60% 60% at 75% 50%,
		 rgba(255, 255, 255, 0.475) 0%,
		 rgba(0, 0, 0, 0.0) 100%
	   );
}

.gradient-bg-left:before {
	 background-image: radial-gradient(
		 60% 60% at 25% 50%,
		 rgba(255, 255, 255, 0.5) 0%,
		 rgba(0, 0, 0, 0.0) 100%
	   );
}

#feature-cards {
	z-index: 20;
}

.cta-card {
	background-image: radial-gradient(
		 275px 275px at -4% -4%,
		 rgba(255, 217, 123, 0.45) 0%,
		 rgba(0, 0, 0, 0.0) 100%
	     ),
		radial-gradient(
			 200px 200px at 75% 50%,
			 rgba(255, 255, 255, 0.475) 0%,
			 rgba(0, 0, 0, 0.0) 100%
		 );
}

@media screen and (max-width: 992px) {
	
	.cta-card {
	background-image: radial-gradient(
	 275px 275px at -4% -4%,
	 rgba(255, 217, 123, 0.45) 0%,
	 rgba(0, 0, 0, 0.0) 100%
	),
	radial-gradient(
		 200px 200px at 50% 75%,
		 rgba(255, 255, 255, 0.475) 0%,
		 rgba(0, 0, 0, 0.0) 100%
	);
	}
}

.blending {
	text-shadow: 0px 0px 3px rgba(0,0,0,0.4);
	mix-blend-mode: soft-light;
}

.pricing {
	background-image: url("/img2/pricing-bg.webp");
	background-repeat: no-repeat;
	background-size: cover;	
}

.pricing-bg-bottom {
	position: absolute;
	width: 130%;
	height: 280px;
	bottom: 0px;
	left: -18%;
	background-image: url("/img2/pricing-bg-bottom.webp");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: bottom;
}

@media (max-width: 991px)
{
	.pricing-bg-bottom {
		position: absolute;
		width: 100%;
		height: 260px;
		bottom: 0px;
		left: 0px;
		background-image: url("/img2/pricing-bg-bottom-short.webp");
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: bottom;
	}
}

.pricing-bg {
	box-shadow: rgba(0, 0, 0, 0.39) 0px 0px 4.5px 0px;
}

.custom-shadow, .feature-card {
	/* box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 3.5px 0px; */
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;
}

.pricing li {
	padding-bottom: 8px !important;
	
	/* background: url("/img2/checkmark.svg") no-repeat left top;
	padding: 3px 0px 3px -10px;
	list-style: none;
	margin: 0; */
}

.pricing ul {
	list-style: url('/img2/checkmark.svg');
}

.pricing-top {
	box-shadow: 0px -0.5px 4px rgba(0,0,0,0.37);
}

.pricing-bottom {
	box-shadow: 0px 0.5px 4px rgba(0,0,0,0.37);
}


/* Pricing Toggle Switch */

.pricing-toggle {
  position: relative;
  top: 50%;
  width: 170px;
  height: 34px;
  margin: 23px auto 10px auto;
  overflow: hidden;
  background: rgba(0,0,0,0.19);
  border-radius: 8px;
  overflow: visible;
}

.pricing-toggle.b2 {
  border-radius: 2px;
}

.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.knobs {
  z-index: 2;
}

.label {
	position: absolute;
	top: 4px;
	pointer-events: none;
	color: rgb(63, 77, 75);
}

.yearly {
	right: 20px;
}

.monthly {
	left: 12px;
}


.knobs:before {
  content: "monthly";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 82px;
  height: 28px;
  color: rgb(225, 231, 222);
  font-size: 16px;
  text-align: center;
  line-height: 1;
  padding-top: 5px;
  background-color: #475955;
  border-radius: 7.5px;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.4);
}

.checkbox:checked + .knobs:before {
  content: "yearly";
  left: 85px;
}

.knobs,
.knobs:before {
  transition: 0.3s ease all;
}

.savings {
	position: absolute;
	top: -8px;
	right: -18px;
	height: 19px;
	width: 70px;
	border-radius: 10px;
	padding-left: 1px;
	
	font-family:"PlusJakartaSans-ExtraBold";
	font-size: 11px;
	text-align: center;
	line-height: 19px;
	color: #F3F3EA;
	text-shadow: 0px 0px 1px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 2.5px rgba(0,0,0,0.4);
}

.pricing-personal .savings {
	background-color: #ED8B45;
}

.pricing-business .savings {
	background-color: #E6B132;
}

.pricing-bottom p {
	font-family:"PlusJakartaSans-Bold";
	/* font-size: 20px; */
	line-height: 120%;
	text-align: center;
	padding-top: 8px;
}

.pricing-bottom.personal p, .pricing-bottom.business p {
	opacity: 0.94;
}

.pricing-personal .pricing-container, .pricing-business .pricing-container {
	padding-bottom: 54px;
}

.pricing-bottom span {
	font-family:"PlusJakartaSans-Medium";
}

.pricing-bottom .sm {
	font-size: 13px;
}

.privacy-policy, .privacy-policy {
	z-index: 100;
}

.footer-name {
	height: 19.7px;
	width: 124px;
	margin-top: 8.5px;
}