/* UnCSSed */
:root {
  /* New colours */
  --fc-ccorange: #bf563b;
  --fc-ccltblue: #e6f1ee;
  --fc-ccgrey: #d1d1d1;
  --fc-ccoffwhite: #FAFAF5;
  --fc-ccwhite: #FFFFFF;
  --fc-gradient-blue: linear-gradient(180deg, var(--fc-ccltblue) 60%, var(--fc-ccoffwhite) 100%); /* blue to offwhite gradient */
  --fc-gradient-offwhite: linear-gradient(180deg, var(--fc-ccoffwhite) 60%, var(--fc-ccwhite) 100%); /* offwhite to white gradient */
  --fc-gradient-offwhite-blue: linear-gradient(180deg, var(--fc-ccoffwhite) 62%, var(--fc-ccltblue) 85%); /* offwhite to white gradient */
}

/* Fonts */
@font-face {
  font-family: 'LoveYaLikeASister';
  src: url(/assets/fonts/LoveYaLikeASister-Regular.woff2) format('woff2'),
       url(/assets/fonts/LoveYaLikeASister-Regular.woff) format('woff');
  font-display: swap;
}

body {
  background-color: var(--fc-ccwhite);
  font-family: "LoveYaLikeASister", sans-serif;
}

.container {
  max-width: 1000px;
}

p {
  font-size: 1.2em;
}

.pspace {
  margin-bottom: 0.3em;
}

.navbar {
  --bs-navbar-toggler-icon-bg: url("/assets/icons/sketchymenu2.svg");
  box-shadow: 0px 6px 30px var(--fc-ccoffwhite);
  border-style: none;
}

.sticky-top-nav {
  position: -webkit-sticky;
  position: sticky;
  top: 34px;
  z-index: 1020;
}

@media screen and (max-width: 767px) {
  .sticky-top-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 64px;
    z-index: 1020;
  }
}

.navbar-custom-nav {
  background: var(--fc-gradient-blue);
}

.navbar-custom-top {
  background: var(--fc-gradient-offwhite-blue);
}

.top-nav p {
  display: inline-block;
  margin-bottom: 0.2em;
}

.phone-icon-fill::before {
  content: url("/assets/icons/telephone-fill.svg");
  display: inline-block;
  margin-right: 8px;
  transform: scale(1.3);
  margin-top: 10px;
}

.phone-icon::before {
  content: url("/assets/icons/telephone.svg");
  display: inline-block;
  margin-right: 8px;
}

.email-icon::before {
  content: url("/assets/icons/envelope1.svg");
  display: inline-block;
  margin-right: 10px;
  transform: scale(1.25);
}

 .rounded-pill {
             border-radius:var(--bs-border-radius-pill) !important;
              text-decoration: none;
         }

.btn {
  padding: 8px 25px;
  font-size: 22px;
}

.btn-orange {
  background-color: var(--fc-ccorange);
  border-color: var(--fc-ccltblue);
  color: var(--fc-ccwhite);
}

.btn-orange:hover {
  background-color: var(--fc-ccltblue);
  border-color: var(--fc-ccorange);
  color: black;
}



#headline {
  background: var(--fc-gradient-offwhite);
}

#intro {
  background-color: var(--fc-ccwhite);
}

#how-it-works {
  background-color: var(--fc-ccwhite);
}

/* Top Label */
.text-block {
  position: absolute;
  top: -11px;
  left: 3px;
  background: var(--fc-gradient-blue);
  color: black;
  padding-left: 0px;
  padding-right: 0px;
  border-bottom-right-radius: 30px 30px;
}

.white-card {
  padding: 0px;
  background-color: var(--fc-ccwhite);
  border-radius: 10px;
  position: relative;
}

.white-card p {
  font-size: 1.2em;
}

ul {
  font-size: 18px;
  padding: 0px;
}

/* Section Padding */

.small-footer-text {
  font-size: 0.75em;
}

.small-text {
  font-size: 0.5em;
}

/* Remove Hamburger border */
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  box-shadow: none;
}

/* Set the size of the toggler */
.navbar-toggler-icon {
  width: 2em;
  height: 2em;
}

/* Reduce size of logo on smaller screens */
/* @media screen and (max-width: 520px) {
  .navbar-brand,
  .img {
    max-width: 270px;
  }
} */

/* Remove email/phone decoration */
.email-decoration-none,
.phone-decoration-none {
  text-decoration: none;
  color: inherit;
}

footer {
  background-color: var(--fc-ccoffwhite);
}

footer .phone-icon::before {
  margin-right: 5px;
  transform: scale(0.8);
}

footer .email-icon::before {
  margin-right: 5px;
  transform: scale(0.9);
}

footer p {
  font-size: 0.9em;
}

footer img {
  width: 0.4rem;
  height: 0.4rem;
}

.footer-bottom {
  border-top: 1px solid var(--fc-ccgrey);
  background-color: var(--fc-ccoffwhite);
}

/* Make dot SVG icons correct size */
.footer-bottom img {
  width: 0.4rem;
  height: 0.4rem;
}