@import url("colors.css");
@import url("../blocks/ifaq.css");

:root {
  --shadow: rgba(37, 38, 39, 0.03) 0px -2px 5px 0px,
    rgba(37, 38, 39, 0.04) 0px 1px 1px -2px,
    rgba(37, 38, 39, 0.04) 0px 2px 2px -2px,
    rgba(37, 38, 39, 0.05) 0px 5px 5px -2px,
    rgba(37, 38, 39, 0.06) 0px 9px 9px -2px,
    rgba(37, 38, 39, 0.07) 0px 16px 16px -2px;

  --ff-primary: Arial, Helvetica, sans-serif;
  --ff-accent: "Questrial", sans-serif;

  --container-width: 73.125em;
  --container-padding: 1rem;
}

body {
  font-family: var(--ff-primary);
  line-height: 1.6;
}

.mainbody {
  padding-block: 1.25rem;
  padding-inline: var(--container-padding);
}

.content-wrapper > * {
  width: 100%;
}

main a:not([class]) {
  color: var(--clr-primary-400);
  font-weight: 500;
  text-decoration: none;
}

main a:not([class]):is(:hover, :focus-visible) {
  opacity: 0.8;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block-start: 1.25rem;
  margin-block-end: 0.625rem;
  color: var(--clr-primary-400);
  font-family: var(--ff-accent);
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

sup {
  font-size: 0.875em;
}

.button {
  display: inline-block;
  padding-block: 0.3125em;
  padding-inline: 0.5em;
  border: 0.0625em solid var(--bg-util-color);
  border-radius: 1rem;
  background-color: var(--bg-util-color);
  color: var(--text-util-color);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: capitalize;
  cursor: pointer;
}

.button:is(:hover, :focus-visible) {
  background-color: var(--bg-util-lighter);
}

.button[data-outline] {
  background-color: transparent;
}

.button[data-small] {
  padding-block: 0;
  padding-inline: 0.625em;
  font-size: 0.875rem;
}

/*================
Banner
=================*/

.banner {
  padding: 0;
}

/*================
Nav Styles
=================*/

.navbar {
  justify-content: center;
  min-height: 7.5rem;
  padding-block-start: 1.25rem;
  padding-block-end: 0.625rem;
  padding-inline: 0;
}

.logo {
  max-width: 12.5rem;
  max-height: unset;
}

.logo img {
  width: 100%;
  height: 100%;
}

.nav-end {
  position: absolute;
  inset: 0;
  margin-inline-start: 0;
}

#nav-button {
  margin-inline-start: 1rem;
}

#primary-navigation {
  display: block;
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: 0;
  right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path 400ms;
  pointer-events: auto;
}

#primary-navigation[data-state="open"] {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.navbar nav ul.mod-menu.nav-desktop {
  --gradient-percentage: 10%;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-left: 28px;
  background-image: linear-gradient(
    45deg,
    transparent var(--gradient-percentage),
    var(--clr-primary-400) calc(var(--gradient-percentage) + 1px)
  );
  font-family: var(--ff-accent);
}

@media (min-width: 74em) {
  .navbar nav ul.mod-menu.nav-desktop {
    --gradient-percentage: 6%;
  }
}

.navbar nav ul.mod-menu.nav-desktop li > :where(a, span) {
  display: inline-block;
  width: 100%;
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  color: var(--clr-white);
  font-size: 0.875rem;
  font-weight: 300;
  text-decoration: none;
}

.navbar
  nav
  ul.mod-menu.nav-desktop
  li
  > :where(a, span):where(:hover, :focus-visible),
.navbar nav ul.mod-menu.nav-desktop li:hover > :where(a, span),
.navbar nav ul.mod-menu.nav-desktop li.active > :where(a, span) {
  font-weight: 400;
}

.navbar nav ul.mod-menu.nav-desktop li.parent {
  position: relative;
}

.navbar nav ul.mod-menu.nav-desktop li.parent::after {
  content: "\f078";
  position: absolute;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin-block: auto;
  margin-inline-start: auto;
  margin-inline-end: 0.5rem;
  color: var(--clr-white);
  font-family: "Font Awesome 6 Pro";
  font-size: 0.5rem;
  pointer-events: none;
}

.navbar nav .nav-desktop ul.mod-menu__sub {
  list-style: none;
  position: absolute;
  z-index: 1;
  top: 100%;
  right: 0;
  min-width: 10rem;
  box-shadow: 0 5px 17px rgb(0 0 0 / 0.075);
  background-color: var(--clr-primary-300);
  opacity: 0;
  transition: opacity 300ms;
  visibility: hidden;
}

.navbar nav .nav-desktop ul.mod-menu__sub ul.mod-menu__sub {
  top: 0;
  left: 100%;
  background-color: var(--clr-primary-200);
}

.navbar
  nav
  .nav-desktop
  li.parent:is(:hover, :focus-visible)
  > ul.mod-menu__sub {
  opacity: 1;
  visibility: visible;
}

.navbar nav ul.mod-menu.nav-mobile {
  --gradient-percentage: 9.5%;
  list-style: none;
  display: grid;
  padding-inline-start: 3.75rem;
  background-image: linear-gradient(
    55deg,
    var(--clr-white) var(--gradient-percentage),
    var(--clr-primary-400) calc(var(--gradient-percentage) + 1px)
  );
  font-family: var(--ff-accent);
}

.navbar nav ul.mod-menu.nav-mobile li > :where(a, span) {
  display: inline-block;
  width: 100%;
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color: var(--clr-neutral-600);
  color: var(--clr-white);
  font-size: 0.875rem;
  font-weight: 300;
  text-decoration: none;
}

.navbar nav ul.mod-menu.nav-mobile .mod-menu__sub {
  list-style: none;
  display: none;
  padding-inline-start: 1rem;
  background-color: var(--clr-primary-300);
}

.navbar nav ul.mod-menu.nav-mobile .mod-menu__sub :where(a, span) {
  background-color: var(--clr-primary-300);
  color: var(--clr-white);
}

.navbar nav ul.mod-menu.nav-mobile .nav-item.parent > :where(a, span) {
  position: relative;
}

.navbar
  nav
  ul.mod-menu.nav-mobile
  .nav-item.parent
  > :where(a, span)
  > .dropdown-toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  margin-block: auto;
  border: none;
  background: none;
  color: var(--clr-white);
}

.navbar
  nav
  ul.mod-menu.nav-mobile
  .nav-item.parent
  > :where(a, span)
  > .dropdown-toggle::after {
  content: "\f054";
  font-family: "Font Awesome 6 Pro";
}

.navbar
  nav
  ul.mod-menu.nav-mobile
  .nav-item.parent[data-open="true"]
  > :where(a, span)
  > .dropdown-toggle::after {
  content: "\f078";
}

.navbar
  nav
  ul.mod-menu.nav-mobile
  .nav-item.parent[data-open="true"]
  > .mod-menu__sub {
  display: grid;
}

.navbar .mod-finder label {
  display: none;
}

.navbar input[type="text"] {
  appearance: none;
  height: 1.5rem;
  padding-block: 0;
  padding-inline: 0.625rem;
  border: 1px solid var(--clr-primary-400);
  border-radius: 0.625rem;
  outline: none;
  background-color: var(--clr-white);
  color: var(--clr-neutral-700);
  font-size: 0.875rem;
  line-height: 1.25;
}

.navbar input[type="text"]::placeholder {
  color: var(--clr-neutral-100);
  opacity: 0.5;
}

@media (min-width: 60em) {
  .nav-end {
    position: relative;
    display: grid;
    justify-items: end;
    row-gap: 0.625rem;
    max-width: 64%;
    margin-inline-start: auto;
  }

  #nav-button {
    display: none;
    visibility: hidden;
  }
}

.navbar-items > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar-contact {
  position: absolute;
  right: calc(100% + 50px);
  width: max-content;
  text-align: center;
}

.navbar-contact a {
  color: var(--clr-black);
  font-weight: 600;
  text-decoration: none;
}

.navbar-contact a:is(:hover, :focus-visible) {
  color: var(--clr-neutral-400);
}

/*================
Footer
=================*/

.footer-wrapper {
  background-color: var(--clr-neutral-800);
  color: var(--clr-neutral-50);
  box-shadow: 0 0 0 100vmax var(--clr-neutral-800);
  clip-path: inset(0 -100vmax);
}

.footer-content {
  display: grid;
  padding-block-start: 1.5rem;
  padding-block-end: 3.5rem;
  font-size: 0.875rem;
  font-weight: 300;
}

@media (min-width: 50em) {
  .footer-content {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

.footer-heading {
  margin-block: 0.625rem;
  color: var(--clr-white);
  font-size: 1rem;
}

.footer-content p {
  margin-block-end: 0.25rem;
}

.footer-content a:not([class]) {
  color: var(--clr-primary-100);
  font-weight: 500;
  text-decoration: none;
  transition: color 300ms ease-in-out;
}

.footer-content a:not([class]):is(:hover, :focus-visible) {
  color: var(--clr-primary-200);
}

.footer-content .button {
  font-size: 0.875rem;
}

.footer-content small {
  font-size: 0.625rem;
}

@media (max-width: 1170px) {
  .footer-content {
    padding-inline: 1rem;
  }
}

/*================
Content Styles
=================*/

@media (min-width: 961px) {
  :is(.leftbody, .rightbody) {
    width: 25%;
  }
}

.mainbody ul {
  padding-inline-start: 1.5rem;
}

.com-content-article h1 {
  margin-block-end: 1.5rem;
  color: var(--clr-primary-400);
  font-size: 1.5rem;
  font-family: var(--ff-accent);
}

.com-content-article h2 {
  margin-block-start: 1.25rem;
  margin-block-end: 0.625rem;
  color: var(--clr-primary-400);
  font-size: 1.5rem;
  font-family: var(--ff-accent);
}

.com-content-article p,
.ifaq-content p {
  margin-block-end: 0.625rem;
}

.intro-heading {
  margin-block-start: 0.625rem;
  margin-block-end: 1.25rem;
  font-size: 1.875rem;
  font-style: italic;
}

a[href$=".pdf"]:not([data-noicon])::after {
  content: "\f15b";
  margin-inline-start: 0.25rem;
  font-family: "Font Awesome 6 Pro";
  font-weight: 100;
}

/*================
JWTS Sliders
=================*/

div.jwts_toggleControlContainer a.jwts_toggleControl {
  padding: 0.25rem;
  margin-block-end: 0.625rem;
  border: none;
  background: none;
  color: var(--clr-black);
  font-size: 1.25rem;
  font-family: var(--ff-accent);
}

div.jwts_toggleControlContainer a.jwts_toggleControl span.jwts_togglePlus,
div.jwts_toggleControlContainer a.jwts_toggleControl span.jwts_toggleMinus {
  display: none;
}

div.jwts_toggleControlContainer a.jwts_toggleOff span.jwts_toggleControlTitle {
  background-position-y: 2px;
}

div.jwts_content {
  padding-block: 0.25rem;
  padding-inline: 1rem;
  margin-inline-start: 1.5rem;
  margin-block-end: 0.625rem;
  border: 1px solid #ccc;
  border-block-start: none;
}

/*================
Spotlight Blocks
=================*/

.spotlight {
  display: grid;
  row-gap: 0.625rem;
}

@media (min-width: 43.75em) {
  .spotlight {
    grid-template-columns: repeat(3, 1fr);
  }
}

.spotlight__item {
  position: relative;
  height: 125px;
  color: var(--clr-white);
  text-decoration: none;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  filter: grayscale(1);
  transition: transform 250ms ease-in-out, filter 250ms ease-in-out;
}

@media (min-width: 43.75em) {
  .spotlight__item {
    height: 200px;
  }
}

.spotlight__item:is(:hover, :focus-visible) {
  z-index: 5;
  transform: scale(1.1);
  filter: grayscale(0);
}

.spotlight__item img {
  object-fit: cover;
  object-position: top;
  width: 100%;
  height: 100%;
}

.spotlight__item-title {
  position: absolute;
  inset: 0;
  margin-block: auto;
  display: grid;
  place-content: center;
  height: 2.5rem;
  background-image: linear-gradient(
    90deg,
    rgba(232, 114, 0, 0),
    rgba(232, 114, 0, 0.85),
    rgba(232, 114, 0, 1),
    rgba(232, 114, 0, 0)
  );
  font-family: var(--ff-accent);
  font-size: 1.5rem;
  font-weight: 600;
}

/*================
Social Bar
=================*/

.social-bar {
  display: grid;
  row-gap: 1rem;
  margin-block-start: 2rem;
  text-align: center;
}

.social-bar > a {
  display: grid;
  place-content: center;
  padding: 0.25rem;
  text-decoration: none;
}

.socials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  font-size: 1.5rem;
}

@media (min-width: 48em) {
  .social-bar {
    grid-template-columns: repeat(3, 1fr);
  }

  .social-bar > a:first-child {
    --gradient-percentage: 88%;
    background-color: transparent;
    background-image: linear-gradient(
      40deg,
      var(--clr-primary-400) var(--gradient-percentage),
      transparent calc(var(--gradient-percentage) + 1px)
    );
  }

  .social-bar > a:last-child {
    --gradient-percentage: 88%;
    background-color: transparent;
    background-image: linear-gradient(
      -40deg,
      var(--clr-primary-400) var(--gradient-percentage),
      transparent calc(var(--gradient-percentage) + 1px)
    );
  }
}

/*================
Category Blog
=================*/

.blog > h1 {
  margin-block-end: 1.5rem;
  font-size: 1.5rem;
}

/*================
Misc Utilities
=================*/

.highlight-span span {
  color: var(--clr-neutral-400);
}

/*================
CTA Modal
=================*/

.jrb-modal[data-state="show"] {
  padding: 1.5rem;
  max-width: min(360px, 90%);
  border: 1px solid var(--clr-primary-400);
  border-radius: 0.625em;
  opacity: 0;
  transform: translateY(50px);
  animation: modalInMobile 500ms forwards;
}

@media (min-width: 50em) {
  .jrb-modal[data-state="show"] {
    transform: translateX(100%);
    animation: modalIn 500ms 500ms forwards;
  }
}

.jrb-modal-content {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
}

.jrb-modal-content .cta-header {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.jrb-modal-content .cta-icons {
  display: flex;
  gap: 2ch;
  font-size: 2rem;
}

.jrb-modal-content .cta-content {
  line-height: 1.3
}

.jrb-modal-content .cta-buttons {
  justify-self: end;
  display: flex;
  gap: 1ch;
}

@keyframes modalInMobile {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* =========================================
   CPC WHY CLEARPATH SECTION
========================================= */

.cpc-why-section {
  clear: both;
  width: 100%;
  padding: 70px 20px;
  background: #f5f7f9;
  box-sizing: border-box;
}

.cpc-why-container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}

.cpc-why-heading {
  max-width: 760px;
  margin: 0 auto 45px;
  text-align: center;
}

.cpc-why-label {
  margin: 0 0 8px;
  color: #ed6b24;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.cpc-why-heading h2 {
  margin: 0 0 15px;
  color: #0f2d52 !important;
  font-size: 40px;
  line-height: 1.2;
}

.cpc-why-heading p {
  margin: 0;
  color: #66717d;
  font-size: 18px;
  line-height: 1.6;
}

.cpc-why-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px;
}

.cpc-why-card {
  padding: 32px 22px;
  background: #ffffff;
  border: 1px solid #dfe5ea;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(15, 45, 82, 0.08);
  text-align: center;
  box-sizing: border-box;
}

.cpc-why-card img {
  display: block;
  width: 68px;
  height: 68px;
  margin: 0 auto 20px;
  object-fit: contain;
}

.cpc-why-card h3 {
  margin: 0 0 12px;
  color: #0f2d52 !important;
  font-size: 21px;
  line-height: 1.3;
}

.cpc-why-card p {
  margin: 0;
  color: #66717d;
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 950px) {
  .cpc-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .cpc-why-section {
    padding: 50px 16px;
  }

  .cpc-why-grid {
    grid-template-columns: 1fr !important;
  }

  .cpc-why-heading h2 {
    font-size: 31px;
  }
}
/* =========================================
   CPC HOMEPAGE HERO
========================================= */

.cpc-hero {
  position: relative;
  width: 100%;
  min-height: 560px;
  overflow: hidden;
  background: #f2f4f6;
}

.cpc-hero-image {
  display: block;
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: center;
}

.cpc-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.cpc-hero-content {
  width: min(92%, 1170px);
  margin: 0 auto;
}

.cpc-hero-content h1 {
  max-width: 570px;
  margin: 0;
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 700;
  line-height: 1.08;
}

.cpc-hero-content h1 span {
  color: #0a1f44;
}

.cpc-hero-content h1 strong {
  display: block;
  color: #e8632c;
  font-weight: 700;
}

.cpc-hero-line {
  width: 65px;
  height: 4px;
  margin: 22px 0;
  background: #e8632c;
}

.cpc-hero-content p {
  max-width: 570px;
  margin: 0 0 28px;
  color: #333333;
  font-size: 18px;
  line-height: 1.6;
}

.cpc-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cpc-hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
}

.cpc-hero-button-primary {
  background: #e8632c;
  border: 2px solid #e8632c;
  color: #ffffff;
}

.cpc-hero-button-primary:hover {
  background: #d95712;
  border-color: #d95712;
  color: #ffffff;
}

.cpc-hero-button-secondary {
  background: #ffffff;
  border: 2px solid #0a1f44;
  color: #0a1f44;
}

.cpc-hero-button-secondary:hover {
  background: #0a1f44;
  color: #ffffff;
}

@media (max-width: 800px) {
  .cpc-hero,
  .cpc-hero-image {
    min-height: 620px;
    height: 620px;
  }

  .cpc-hero-image {
    object-position: 65% center;
  }

  .cpc-hero-overlay {
    background: rgba(255, 255, 255, 0.72);
  }

  .cpc-hero-content {
    width: min(90%, 1170px);
  }

  .cpc-hero-content h1 {
    max-width: 520px;
  }

  .cpc-hero-content p {
    max-width: 520px;
  }
}

@media (max-width: 560px) {
  .cpc-hero,
  .cpc-hero-image {
    min-height: 650px;
    height: 650px;
  }

  .cpc-hero-content h1 {
    font-size: 38px;
  }

  .cpc-hero-content p {
    font-size: 16px;
  }

  .cpc-hero-buttons {
    flex-direction: column;
  }

  .cpc-hero-button {
    width: 100%;
    box-sizing: border-box;
  }
}