:root {

/* Colors */
	--black:#222222;
	--dark:#393939;
	--medium:rgba(0,0,0,0.70);
	--light:#D9D9D9;
	--very-light:#F8F8F8;
	--yellow-green:#D3E63E;
	--light-blue:#C0DBFF;
	--blue:#0053B1;
	--dark-blue:#003066;
	--bright-blue:#0235FE;
	--gray:#EBF3FF;
	--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);
	--sans-serif:"Inter Tight", sans-serif;
}

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

/* UTILITIES */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {font-weight:600;font-family:var(--sans-serif);}
.h1 span, .h2 span, .h3 span, .h4 span, .h5 span, .h6 span {color:var(--blue);}
h1, .h1 {font-size:48px;line-height:150%;font-weight:700;}
h2, .h2 {font-size:40px;line-height:150%;}
h3, .h3 {font-size:36px;line-height:150%;}
h4, .h4 {font-size:30px;line-height:150%;}
h5, .h5 {font-size:24px;line-height:150%;}
h6, .h6 {font-size:22px;line-height:150%;}

.bg-gray{background:var(--gray);}
.bg-dark-blue{background:var(--dark-blue);}

/* defaults */

.logo {width:100%; max-width:200px;}
section {padding:40px 0px;}
.stl-card {display:flex;border-radius:8px;border:1px solid var(--light-blue);padding:20px;gap:12px;box-shadow:0px 7px 0px 0px var(--light-blue);text-align:left;margin:24px 0px;background:white;}
.card-content {font-size:20px;line-height:130%;}
#main-fold .card-icon {border-radius:4px;padding:10px;background:var(--light-blue);width:42px;height:42px;display:flex;justify-content:center;align-items:center;}
.small-note {font-size:11px;line-height:120%;}
.sw-gradient {background:#B4CBE5;background:linear-gradient(127deg, rgba(180, 203, 229, 1) 20%, rgba(152, 210, 241, 1) 50%, rgba(180, 203, 229, 1) 80%);}
.sw-gradient-gray {background: #DFECFD;background: radial-gradient(circle, rgba(223, 236, 253, 1) 20%, rgba(240, 246, 254, 1) 50%);} 
.check-list {list-style:none;margin:0px;padding:0px;}
.check-list li {font-size:16px;line-height:150%;background:url('img/checkmark.svg') no-repeat left center;padding-left:25px;margin:8px 0px;background-position-y:5px;}
#main-form .form-field.confirm-email {display: none;}
#why-it-works, #how-it-works, #pricing, #faqs-section, #testimonial {scroll-margin-top: 70px;}
strong {font-weight:600;}
/* Header */
#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;}
h1.branding {font-size: 32px;font-weight: 600;margin: 0px;}
#mainNavigation .navbar-nav {width:100%;gap:24px;}
.navbar-expand-lg .navbar-nav .nav-link {font-size:16px;font-weight:600;}

/* #main-fold */
#main-fold {padding-top:16px;}
#main-fold .content {font-size:26px;line-height:140%;max-width:500px;margin:0px auto;}
#main-fold .entry {font-size:22px;line-height:140%;}
.stars {color:var(--bs-yellow);font-size:14px;display:flex;gap:4px;justify-content:center;}
.rating-text {font-size:14px;}

/* #why-it-works */
.box {padding:60px;}
.reasons {padding:30px;}
.reasons * {transition:all 0.5s;}
.reason {display:flex;gap:16px;}
.numbered {display:flex;justify-content:center;align-items:center;min-width:100px;border-right:solid 2px var(--light);font-weight:bold;font-size:18px;}
.reason-content {padding:10px 20px;}
.reason-content .h5{margin-bottom:0px;}
.icon-reason {display:flex;justify-content:center;align-items:center;width:100px;}
.icon-reason img {width:100%;max-width:80px;filter:invert(0.5);}
.reason:hover .numbered {border-right-color:var(--blue);}
.reason:hover .icon-reason img{filter:none;}
#why-it-works .stl-card {gap: 24px;}
#why-it-works .card-content .entry {font-size:18px;line-height:130%;}
#why-it-works .card-icon {width:80px;padding:18px;}
#why-it-works .card-icon img {width:100%;}

/* #how-it-works */
#how-it-works .content {font-size:26px;line-height:140%;}
#how-it-works .panel {border-radius:12px;border:1px solid var(--light-blue);padding:30px 20px 30px 40px;box-shadow:0px 5px 0px 0px var(--light-blue);background:white;}
.panel-header {font-size: 18px;line-height: 140%;font-weight: 500;}
#how-it-works .inputs {position:relative;}
#how-it-works .input {display: flex;gap: 10px;background: white;padding: 3px;margin: 8px 0px;border-radius: 6px;align-items: center;}
#how-it-works .input-icon {border-radius:6px;padding:10px;background:var(--light-blue);width:32px;height:32px;display:flex;justify-content:center;align-items:center;}
.input-name {font-size:18px;}
.stl-arrow {font-size: 18px;line-height:110%;font-weight: 600;color: white;padding: 10px 15px;width: 90px;background: #6C91F4;background: linear-gradient(56deg, rgba(108, 145, 244, 1) 0%, rgba(6, 57, 254, 1) 100%);border: 1px solid var(--dark-blue);border-radius: 12px;position:absolute;right: -120px;top: calc(50% - 50px);z-index:10;}
.lined {position: absolute;height: 278px;border-radius: 0px 12px 12px 0px;border: 3px solid var(--blue);width: 80px;border-left: 0px;right: -80px;top: calc(50% - 138px);z-index: 9;}

/* #pricing */
#pricing .sub-header {font-size: 15px;font-weight: 600;color: var(--black);padding: 6px 15px 6px 32px;margin-bottom: 16px;display: inline-block;border-radius: 8px;background: url(img/icon-check.svg) no-repeat left center white;background-position-x: 12px;}
.pricing-content {padding-right:8px;}
.pricing-content .h5 {line-height:110%;}
.pricing-content .entry{line-height:110%;}
#pricing .check-list li{background-image:url('img/checkmark-blue.svg');font-size: 16px;line-height: 150%;}
#pricing .panel-wrapper {border-radius:12px;padding: 0px 2px 7px 2px;background: #2e70c7;background: linear-gradient(0deg, var(--blue) 0%, rgba(255, 255, 255, 0) 100%);margin-bottom:24px;margin-right: 20px;}
#pricing .panel {border-radius:12px;padding:30px;background:white;}
#pricing .panel .entry {font-size: 17px;margin-bottom: 24px;font-weight:500;}
.content-box {padding: 20px 16px;font-size: 17px;line-height: 120%;background: #f4f4f4;margin: 20px 0px;}
.content-box span{font-size: 19px;font-weight:500;}

/* #profile */
#profile .sub-header {font-size:16px;font-weight:600;color:var(--blue);background:var(--light-blue);padding:8px 15px;margin-bottom:16px;display:inline-block;border-radius: 6px}
#profile .entry, .profile-content {font-size:19px;line-height:140%;}
.profile-header {font-size:26px;font-weight:600;margin-bottom:16px;}
.col-wrapper {padding:30px;}
.profile-img {background:url('img/steve-wroblewski.jpg') no-repeat center top;background-size:cover;height: 100%;padding:20px;display: flex;align-items: end;}
.profile-meta{background: var(--transparent);width: 100%;padding: 15px;}
.profile-name {font-size:20px;font-weight:600;}
.profile-title {font-size:18px;}

/* #testimonial */
#testimonial .col-wrapper {padding:30px 50px;}
.testimonial-content {font-size:17px;position: relative;}
.testimonial-content::before, .testimonial-content::after{font-family:"Font Awesome 6 Free";content:"\f10d";font-size:42px;color:var(--light-blue);font-weight: 900;position: absolute;left: -40px;}
.testimonial-content::after {content:"\f10e";bottom:0px;left:unset;right:-40px;}
.testimonial-img {background:url('img/steve-wroblewski.jpg') no-repeat center top;background-size:cover;height: 100%;padding:20px;display: flex;align-items: end;}
.testimonial-img.david-allen {background-image:url('img/testimonial-david-allen.jpg');}
.testimonial-meta{background: var(--transparent);width: 100%;padding: 15px;}
.testimonial-name {font-size:20px;font-weight:600;}
.testimonial-title {font-size:18px;}


/* #faqs-section */
.accordion-item {margin: 15px 0px;border-radius:8px;border:none;}
.accordion-header {border-radius: 6px;}
.accordion-button.collapsed{background: var(--gray);border-radius: 10px;}
.accordion-button:not(.collapsed) {background:none;box-shadow:none;border:1px solid var(--light);border-bottom:0px;border-radius: 8px 8px 0px 0px;}
.accordion-button{font-size:20px;font-weight:600;background:none;border:none;}
.accordion-button:focus {box-shadow:none;}
.accordion-body {padding-top: 0px;border: 1px solid var(--light);border-top: 0px;box-shadow: 0px 7px 0px 0px var(--light);border-radius: 0px 0px 8px 8px;}

.company-logo {display: flex;align-items: center;justify-content: center;gap: 24px;}
.company-logo img {max-width: 150px;}

/* #contact-us */
.form-header {font-size: 66px;line-height: 120%;font-weight:600;}
.form-instruction {font-size: 18px;font-weight: 500;}
.messengers-app {display:flex;gap:16px;}
.form-container {padding: 20px 40px 40px 40px;border-radius: 24px;}
.form-wrapper {padding:24px;background:white;}
.form-title {font-weight:600;color:white;}
.form-title .icon {width:26px;height:auto;filter:invert(1);}
.two-col {display:flex;justify-content: space-between;}
.two-col .form-field {width:48%;}
.field-label {font-size:13px;}
.form-control, .form-select {background:var(--gray);}
.btn-wide {width:100%;}

/* Footer */
.footer-top {padding:15px 0px;}
.footer-bottom .container {border-top:1px solid var(--blue);padding:16px;}
.copy {color:white;}
.policy-link a {color:white;text-decoration:none;}
.policy-link a:hover {color:var(--light-blue);}
.footer-menu .navbar-nav {display:flex;flex-direction:row;justify-content:end;}
.footer-menu .nav-link {font-size: 16px;font-weight: 500;color:white;padding:5px 15px;background: #FEFEFE1F;}
.footer-menu .nav-link:hover{color:var(--blue);background: var(--light-blue);}
.footer-menu .navbar-nav li:first-child .nav-link{border-radius:6px 0px 0px 6px;}
.footer-menu .navbar-nav li:last-child .nav-link{border-radius:0px 6px 6px 0px;}

/* Button */
.btn-sw {font-size:22px;background:var(--yellow-green);font-weight:600;padding:10px 20px;border-radius:8px;display:inline-flex;justify-content:center;align-items:center;gap:6px;transition:all 0.5s;}
.btn-sw:hover {background:var(--blue);color:white;}
.btn-sw:hover .icon {filter:invert(1);}
.btn-sw .icon {width:26px;height:auto;transition:all 0.5s;}

.tg-btn, .wa-btn {font-size:18px;font-weight:600;text-shadow: var(--text-shadow-light);background: #25D366;color: white;padding: 6px 18px;box-shadow: 0px 5px 20px -10px var(--text);text-shadow: 1px 1px 3px rgba(24, 24, 24, 0.7);}
.tg-btn {background: #24A1DE;color: white;text-shadow: 1px 1px 3px rgba(24, 24, 24, 0.7);}
.wa-btn:hover, .tg-btn:hover {background: var(--bs-gray);color:white}

.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(--blue);color: white;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);}
.back-to-top.active:hover {color:var(--dark);background:var(--light-blue);}

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

@media (max-width:768px) {
	h1, .h1 {font-size:38px;line-height:130%;}
	h2, .h2 {font-size:36px;line-height:130%;}
	h3, .h3 {font-size:32px;line-height:130%;}
	h4, .h4 {font-size:28px;line-height:130%;}
	h5, .h5 {font-size:22px;line-height:130%;}
	h6, .h6 {font-size:20px;line-height:130%;}
	#why-it-works, #how-it-works, #pricing, #faqs-section, #testimonial {scroll-margin-top: 0px;}
	#mainNavigation .navbar-nav {gap: 8px;padding: 20px;background: var(--light-blue);}
	#mainNavigation .navbar-nav .nav-link {font-weight: 600;border-bottom: 1px solid var(--dark-blue);color: var(--dark-blue);}
	.stl-card{margin:10px 0px}
	.box,.reasons, #how-it-works .panel, .pricing-content,.form-wrapper, .form-content {padding:15px;}
	.reason {flex-direction: column;align-items: center;gap: 0px;border-bottom: 1px solid var(--blue);padding: 12px;text-align: center;}
	.reason:last-child {border:none;}
	.numbered {border:none;}
	.lined {display:none;}
	.stl-arrow {position: relative;top: unset;right: unset;margin: 10px auto;display: flex;align-items: center;justify-content: start;text-align: center;width: 130px;}
	#testimonial .col-wrapper {padding:30px;}
	.testimonial-content::before, .testimonial-content::after{font-size:28px;left: -28px;}
	.testimonial-content::after {left: unset;right: -28px;}
	#pricing .panel-wrapper {margin:12px 0px;}
	img.white-arrow {transform: rotate(90deg);width: 60px;height: 13px;}
	#why-it-works .stl-card {gap: 8px;flex-direction: column;text-align: center;}
	.profile-img, .testimonial-img {min-height: 420px;margin-top: 24px;}
	.company-logo {flex-direction:column;}
	.form-header {font-size:32px;}
	.messengers-app {flex-direction:column;align-items: center;}
	.form-container{padding: 15px;border-radius: 10px;}
	.two-col {flex-direction:column;}
	.two-col .form-field {width: 100%;}
	.footer-top {padding:24px 0px 12px;}
	h1.branding{text-align:center;}
	.footer-bottom .container {flex-wrap: wrap;justify-content: center;padding:15px;}
	.footer-menu .navbar-nav {justify-content: center;flex-wrap: wrap;padding-top: 16px;}
	.footer-menu .navbar-nav li {border-radius:6px;margin:6px;}
	.footer-menu .nav-link {border-radius: 6px !important;margin: 6px;}
	.footer-bottom .row {flex-direction: column-reverse;}
	.copy{font-size:14px;text-align:center;}
	.policy-link {margin-bottom:16px;}
}