:root {

	--sans-serif: "Caladea", serif;

/* Colors */

	--main-color: #26A6FE;
	--secondary-color: #A6003E;
	--accent-color: #fff000;
	--text: #2A2A2A;
	--light-gray: #ECF5FA;
	--off-white: #F0F5EB;
	--green: #008F7A;
	--transparent: #F0F5EBCC;
	--shadow:0px 5px 15px -7px rgba(0,0,0,0.75);
	--shadow-small:0px 2px 6px -3px rgba(0,0,0,0.75);
}

body{font-size:19px;line-height:140%;font-family:var(--sans-serif);color:var(--text);}
a {color:var(--main-color);transition: all 1s;}
* a:hover {color:var(--text);}

/* UTILITIES */
h1, .h1 {font-size:48px;line-height:150%;}
h2, .h2 {font-size:44px;line-height:150%;}
h3, .h3 {font-size:36px;line-height:150%;}
h4, .h4 {font-size:28px;line-height:150%;}
h5, .h5 {font-size:22px;line-height:150%;}
h6, .h6 {font-size:18px;line-height:150%;}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {font-weight:700;font-family:var(--sans-serif);}

.text-green {color:var(--green);}

#header {padding:8px 0px;background:white;transition: all 0.5s;}
#header.scrolled {padding:3px 0px;box-shadow:var(--shadow);}
.branding-wrapper {display: flex;gap: 24px;justify-content: center;align-items: center;}
#mainNavigation .navbar-nav {width:100%;gap:24px;}
.navbar-expand-lg .navbar-nav .nav-link {font-size:14px;}
h1.branding {font-size: 32px;font-weight: 700;margin:0px;}
h1.branding img {width:100%;max-width:200px;}
section {padding:20px 0px 20px;}
section .wireframe {border: 1px solid var(--secondary-color);min-height:200px;}
.rating {font-size:14px;color:var(--bs-yellow);display:flex;gap:8px;align-items:center;justify-content:center;margin-bottom:3px;}
.context-heading {font-size:14px;margin-bottom:12px;}
.main-heading, .sub-heading {font-size:52px;line-height:130%;font-weight:600;margin-bottom:26px;}
 .sub-heading {font-size:42px;}
.company-logo {display:flex;align-items:center;justify-content:center;gap:24px;}
.company-logo img {max-width: 90px;}

.featured-hero {border-radius: 8px;box-shadow: var(--shadow-small);width: 100%;}
.featured-meta {text-align: center;margin: 8px;}
.meta-name {font-weight: bold;}
.meta-position {font-size: 15px;}

.boxed {padding:25px;box-shadow:var(--shadow);border-radius:12px;}

.metric {min-height: 150px;background: var(--light-gray);font-size: 18px;display: flex;justify-content: center;align-items: center;padding: 24px;flex-direction: column;border-radius: 6px;}
.metric .heading {font-weight:bold;font-size:22px;}
//.metric:hover {transform: translateY(-6px);background:white;border:1px solid var(--main-color);}

.nfs {display:flex;align-items:center;gap:24px;}
.nfs .icon {font-size:28px;line-height:100%;font-weight:bold;padding:16px;color:var(--main-color);min-width:70px;height:70px;display:flex;justify-content:center;align-items:center;background: url('img/stopwatch.png') no-repeat center center;background-size:contain;}
.nfs-content, .big-content {font-size:22px;line-height:140%;padding:16px 0px;}
.nfs-content span {font-weight:bold;font-size:26px;}
.nfs .icon span {padding-left: 42%;padding-top: 30%;}

#how-it-works .card {padding:16px;}
#how-it-works .sub-heading {margin-bottom:0px;}
.card ul, .card-pricing ul {list-style:none;margin:0px;padding:0px;}
.card ul li, .card-pricing ul li {padding-left: 28px;margin: 10px 0px;background: url(img/check_mark.svg) no-repeat;background-position-y: 5px;}
.arrow-next {font-size: 54px;position: absolute;right: -40px;top: calc(50% - 27px);z-index: 2;background: white;border-radius: 50%;box-shadow: var(--shadow);color: var(--main-color);}

#pricing{}
#pricing .sub-heading {margin-bottom:16px;}
.card-pricing {box-shadow: var(--shadow);border: 1px solid var(--light-gray); padding:34px;border-radius:30px;background:var(--off-white);}
.pricing-content {font-size: 22px;}
.price {background:#ADFFB8;display:flex;align-items:center;justify-content:center;border-radius:8px;box-shadow:var(--shadow);}
.amount{width: 33.3%;font-size: 34px;font-weight: 700;text-align: center;padding: 36px 12px;}


#profile .panel {border-radius:12px;box-shadow:var(--shadow);padding:25px;}

#faqs {}
.accordion-button {font-weight:700;font-size:22px;line-height:130%;}
.accordion-button:focus {box-shadow: none;
}


#footer {background:black;color:white;}
.footer-top {padding:60px 0px;}
.footer-bottom .container {border-top:1px solid var(--light-gray);}
.copy {font-size:16px;line-height:140%;padding:18px 0px;}


.btn-sw {background-color: var(--accent-color);border-radius: 12px;color: #000;cursor: pointer;font-weight: bold;padding: 10px 15px;text-align: center;transition: 200ms;box-sizing: border-box;border: 0;font-size: 16px;user-select: none;-webkit-user-select: none;touch-action: manipulation;}
.btn-sw:focus, .btn-sw:hover {outline: 0;background: #f4e603;box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);}
.btn-larger {font-size:22px;padding:15px 25px;}

/* POPUP MODAL */
.modal-dialog {max-width: 420px;}
.modal-header {background:var(--accent-color);padding:5px 15px;}
.modal-body p {font-size:14px;line-height:130%;margin-bottom: 8px;}
.soc-med-messengers {display: flex;flex-direction: row;gap: 24px;justify-content: start;align-items: center;}
.tg-btn, .wa-btn {font-family: var(--lora);font-size: 15px;text-shadow: var(--text-shadow-light);background: #25D366;padding: 4px 20px;color: white;border: 2px solid #25D366;border-radius: 20px;padding: 2px 12px;box-shadow: 0px 5px 20px -10px var(--text);text-shadow: 1px 1px 3px rgba(24, 24, 24, 0.7);}
.tg-btn {background: #FFFFFF;border: 2px solid #24A1DE;color: #24A1DE;text-shadow: 1px 1px 3px rgba(210, 210, 210, 0.7);}
.tg-btn:hover {background: #24A1DE;color: #FFFFFF;text-shadow: 1px 1px 3px rgba(24, 24, 24, 0.7);}
.wa-btn:hover {background: #FFFFFF;color: #25D366;border-color: #25D366;text-shadow: 1px 1px 3px rgba(210, 210, 210, 0.7);}


/* FORM */
.form-wrapper{margin-top:10px;}
#main-form .form-field {font-size:15px;margin: 0px 0px 7px 0px;display: flex;flex-direction: column;}
#main-form input, #main-form textarea, .form-select {font-size:15px;background-color: white;border: 1px solid #b8bdc9;border-radius: 4px;color: #2c3345;display: block;min-width: 100%;padding: 3px 8px;}
.field-label {display: block;font-size: 14px;}
.main-btn {font-size: 16px;font-weight: 500;display: block;background: white;border: 1px solid black;color: black;border-radius: 4px;padding: 10px;box-shadow: 0px 5px 20px -10px #2A2A2A;width: 100%;transition: all 0.5s;}
#main-form .form-field.confirm-email {display: none;}

.back-to-top.active {visibility: visible;opacity: 1;}
.back-to-top {position: fixed;visibility: hidden;opacity: 0;right: 15px;bottom: 15px;z-index: 100;background: var(--accent-color);color: var(--text);border:1px solid var(--text);width: 40px;height: 40px;border-radius: 4px;transition: all 0.4s;text-decoration: none;display:flex;justify-content:center;align-items:center;box-shadow:var(--shadow);}

#why-it-works, #how-it-works, #pricing, #faqs {scroll-margin-top:70px;}

/* ################# Global Mobile Styling ################# */

@media (max-width: 768px) {
	#mainNavigation .navbar-nav {gap:6px;}
	#mainNavigation .navbar-nav .nav-link {font-size:18px;font-weight:bold;text-align: center;}
	.navbar.navbar-expand-lg {padding:0px;}
	.navbar-nav {background:var(--light-gray);}
	.navbar-toggler {width:34px;height:34px;border-radius:4px;border:1px solid var(--bs-gray-600);background:var(--text);color:var(--light-gray);font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-small);}
	.navbar-toggler.collapsed {background:var(--light-gray);color:var(--text);}
	#main-fold{padding-top:10px;}
	section {padding:30px 15px;}
	h1, .h1 {font-size:30px;line-height:150%;}
	h2, .h2 {font-size:28px;line-height:150%;}
	h3, .h3 {font-size:26px;line-height:150%;}
	h4, .h4 {font-size:23px;line-height:150%;}
	h5, .h5 {font-size:21px;line-height:150%;}
	h6, .h6 {font-size:16px;line-height:150%;}
	.branding {text-align:center;padding: 16px;}
	.sub-heading {font-size:32px;}
	.company-logo {flex-direction:column;}
	.metric {margin-bottom: 16px;}
	.nfs {gap:0px;flex-direction: column;margin-bottom: 16px;}
	.with-arrow {margin-bottom:34px;}
	.arrow-next{right:calc(50% - 27px);transform:rotate(90deg);
		top:unset;
		bottom:-27px;}
	.price{flex-direction:column;}
	.amount {width:100%;}
	#why-it-works, #how-it-works, #pricing, #faqs {scroll-margin-top:0px;}
}