@charset "UTF-8";
/* ========================================================================= */
/* !RESETS AND DEFAULTS */
/* ========================================================================= */
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, abbr, address, cite, code, del, dfn, img,
ins, kbd, q, samp, var, hr, acronym, dl, dt, dd, ol, ul, li,
pre, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details,
figcaption, figure, footer, header, hgroup, menu, nav,
section, summary, time, mark, audio, video {
  border: 0;
  outline: 0;
  font-style: normal;
  font-size: 100%;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
}

em, strong, b, i, a, span, sub, sup, small {
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}

article, aside, details, figcaption, figure, footer,
header, hgroup, menu, nav, section {
  display: block;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border-top: 1px solid #000;
  color: #000;
}

input, select {
  vertical-align: middle;
}

sub {
  vertical-align: sub;
  font-size: smaller;
  line-height: 0px;
}

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: 0px;
}

input, button, textarea, select, label, img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
}

input[type=text],
input[type=password],
input[type=url],
input[type=number],
input[type=tel],
input[type=email],
input[type=button],
input[type=submit],
button, textarea, select {
  -webkit-appearance: none;
}

textarea {
  resize: none;
  overflow: auto;
}

button, [type=submit], [type=button], [type=reset] {
  cursor: pointer;
  border: 0;
  text-align: center;
  background: transparent;
  color: inherit;
  padding: 0;
  margin: 0;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

table {
  table-layout: fixed;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
}

select::-ms-expand {
  display: none;
}

/* != FONT SMOOTHING */
body, input, button, textarea {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* != ms-clear */
input[type=text]::-ms-clear {
  display: none;
}

/* != BACKGROUND POSITION AND BOX SIZING */
*, *:before, *:after {
  box-sizing: border-box;
  background-position: center;
  background-repeat: no-repeat;
}

/* != .clearfix - CLEAR ELEMENTS */
.clear {
  clear: both;
}

.clearfix {
  display: block;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

/* != .wordwrap - CONTINUE LONG URLS/WORDS ON NEXT LINE */
.wordwrap {
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

svg path {
  d: revert-layer !important;
}

/* ========================================================================= */
/* !FONTS (@fontface generated with FontSpring Syntax formatting */
/* ========================================================================= */
@font-face {
  font-family: "Akrobat";
  src: url("../fonts/Akrobat/akrobat-thin-webfont.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Akrobat";
  src: url("../fonts/Akrobat/akrobat-extralight-webfont.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Akrobat";
  src: url("../fonts/Akrobat/akrobat-light-webfont.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Akrobat";
  src: url("../fonts/Akrobat/akrobat-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Akrobat";
  src: url("../fonts/Akrobat/akrobat-bold-webfont.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Akrobat";
  src: url("../fonts/Akrobat/akrobat-semibold-webfont.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Akrobat";
  src: url("../fonts/Akrobat/akrobat-extrabold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Akrobat";
  src: url("../fonts/Akrobat/akrobat-black-webfont.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* ========================================================================= */
/* !SASS VARIABLES & MIXINS */
/* ========================================================================= */
/*
    // Use Case: $b (second) variable is optional and defaults to 'max-width'

    @include break(1100){
        h1{
            background: red;
        }
    }

    // Output
    @media screen and (max-width: 1100px) {
        h1 { background: red; }
    }

    // Also, if you want to specify the 2nd variable for break type (i.e., min-height)

    @include break(1100, 'min-height'){
        h1 {
            background:red;
        }
    }

    // Output
    @media screen and (min-height: 1100px) {
        h1 { background: red; }
    }
*/
/*
    // inline SVGs
    // usage: background-image: inline-svg('<svg><!-- your svg code --></svg>');
*/
/* ========================================================================= */
/* !STYLES */
/* ========================================================================= */
/* != DEFAULT STYLES ===== */
html, body {
  scroll-behavior: smooth;
  font-family: Akrobat, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  background: #fff;
  color: #000;
}

[id] {
  scroll-margin-top: 100px;
}

h1, .title1 {
  text-wrap: balance;
  color: #000;
  font-size: 3.75rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 20px;
}
h1 strong, .title1 strong {
  font-weight: 400;
  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}
@media screen and (max-width: 1000px) {
  h1, .title1 {
    font-size: 3.5rem;
  }
}
@media screen and (max-width: 600px) {
  h1, .title1 {
    font-size: 3.125rem;
  }
}

h2, .title2 {
  color: #000;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 20px;
}
@media screen and (max-width: 600px) {
  h2, .title2 {
    font-size: 2.5rem;
  }
}

h3, .title3 {
  color: #000;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 10px;
}

h4, .title4 {
  color: #000;
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
}

h5, .title5 {
  color: #000;
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 10px 0;
}

p {
  font-size: 1.125rem;
  margin: 0 0 20px 0;
}
p.intro {
  font-size: 1.5rem;
}

p + h2, ul + h2, ol + h2,
p + .title2,
ul + .title2,
ol + .title2,
p + h3,
ul + h3,
ol + h3,
p + .title3,
ul + .title3,
ol + .title3 {
  margin-top: 40px;
}

p + h4, ul + h4, ol + h4,
p + .title4,
ul + .title4,
ol + .title4 {
  margin-top: 20px;
  margin-bottom: 5px;
}

.meta {
  text-transform: uppercase;
  font-size: 1.125rem;
  color: #626262;
  letter-spacing: 0.01em;
  font-weight: 700;
  display: block;
}

a {
  color: #3C6CCD;
  text-decoration: underline;
}
a:hover {
  color: #000;
}

hr {
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.1);
}

.btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  transition: 0.2s;
  background: #3C6CCD;
  color: #fff;
  padding: 10px 20px;
  border-radius: 50px;
  transition: 0.2s;
  font-weight: 700;
  font-size: 18px;
  position: relative;
  overflow: hidden;
}
.btn span {
  position: relative;
  z-index: 1;
}
.btn:hover {
  color: #fff;
  background: #000;
}

.continue {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  transition: 0.2s;
  color: #3C6CCD;
  transition: 0.2s;
  font-weight: 700;
  font-size: 18px;
}
.continue:hover {
  color: #000;
}

.more {
  color: #3C6CCD;
  text-decoration: none;
  font-size: 0.875rem;
  text-transform: uppercase;
  font-weight: 700;
  transition: 0.2s;
}

.content-main ul:not([class*=gf]) {
  margin: 20px 0 20px 20px;
  font-size: 1.125rem;
}
.content-main ul:not([class*=gf]) > li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 10px;
}
.content-main ul:not([class*=gf]) > li:before {
  content: "— ";
  position: absolute;
  left: 0;
}
.content-main ol {
  counter-reset: li;
  margin: 20px 0 20px 20px;
  font-size: 1.125rem;
}
.content-main ol > li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
}
.content-main ol > li:before {
  content: counter(li) ". ";
  counter-increment: li;
  position: absolute;
  right: calc(100% - 15px);
}

.socials {
  display: flex;
  gap: 16px;
}
.socials .social {
  height: 27px;
}
.socials .social svg {
  fill: #000;
  padding: 4px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  transition: all 0.2s;
  border: 1px solid #ccc;
}
.socials .social:hover svg {
  fill: #fff;
  background-color: #3C6CCD;
  border-color: #3C6CCD;
}

::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

/* != DEFAULT WORDPRESS STYLES = USE AS NEEDED = .wp-caption = .wp-caption-dd = .wpGallery = .shutter = .shutterset ==== */
.aligncenter {
  display: block;
  margin: 25px auto;
}

.alignleft {
  float: left;
  margin: 0 25px 25px 0;
}

.alignright {
  float: right;
  margin: 0 0 25px 25px;
}

.alignnone {
  display: inline-block;
}

/* != ACCESSIBILITY STYLES ===== */
.sr-only, .slick-sr-only {
  /* Styles below are so elements are shown to screen readers only */
  border: none !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 0.01em !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 0.01em !important;
}

*:focus {
  outline: 3px solid rgba(0, 0, 0, 0.5);
  outline-offset: 3px;
}

@supports selector(:focus-visible) {
  *:focus {
    outline: none;
  }
  *:focus-visible {
    outline: 3px solid rgba(0, 0, 0, 0.5);
    outline-offset: 3px;
  }
}
#skipnav {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  height: 30px;
  width: 150px;
  top: 0;
  left: 50%;
  margin-left: -75px;
  position: fixed;
  transform: translateY(-100%);
  transition: transform 0.3s;
  z-index: 9999999999;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
#skipnav:focus {
  transform: translateY(0%);
}

/* != SELECTION STYLES (Leaving these blank will show no indication of text selection) ===== */
/*
    ::selection         {
        background: #aaa;
        color: #fff;
    }
    ::-moz-selection    {
        background: #aaa;
        color: #fff;
    }
    ::-webkit-selection {
        background: #aaa;
        color: #fff;
    }
*/
/* != LAYOUT STYLES ===== */
.wrap {
  max-width: 1180px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

#header {
  position: fixed;
  padding: 15px 0;
  top: 0;
  left: 0;
  width: 100vw;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  z-index: 1000;
  transition: all 0.3s ease; /* Smooth transition for background and shadow */
}
#header .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
}

#logo {
  display: flex;
  justify-content: center;
  gap: 10px;
  text-transform: uppercase;
  flex: 0 0 130px;
  text-decoration: none;
  font-size: 1.5rem;
}
@media screen and (max-width: 500px) {
  #logo {
    flex: 0 0 100px;
  }
}

.social {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.social a {
  display: block;
}
.social a svg {
  fill: #000;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: block;
  padding: 5px;
  transition: 0.2s;
}
.social a:hover svg {
  fill: #fff;
  background: #000;
}

#main-nav > ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
}
#main-nav > ul > li {
  padding: 0px 15px;
  border-radius: 50px;
  border: 1px solid transparent;
}
#main-nav > ul > li > a {
  display: block;
  text-decoration: none;
  color: #000;
  font-weight: 700;
  font-size: 1.125rem;
  transition: 0.2s;
}
#main-nav > ul > li > a.btn {
  color: #fff;
}
#main-nav > ul > li:last-child {
  padding-right: 0;
}
#main-nav > ul > li:hover > a, #main-nav > ul > li:focus > a {
  color: #3C6CCD;
}
#main-nav > ul > li:hover > a.btn, #main-nav > ul > li:focus > a.btn {
  color: #fff;
}
#main-nav > ul > li ul {
  display: block;
  background: #000;
  border-radius: 10px;
  width: 200px;
  padding: 10px 0;
  position: absolute;
  top: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
}
#main-nav > ul > li ul[aria-hidden=true] {
  display: none;
}
#main-nav > ul > li ul li {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 0;
}
#main-nav > ul > li ul li a {
  color: #fff;
  text-decoration: none;
  transition: 0.2s;
  display: block;
  padding: 5px 20px;
}
#main-nav > ul > li ul li a:hover {
  background-color: #333;
}
#main-nav > ul > li.menu-item-has-children {
  position: relative;
}
#main-nav > ul > li.menu-item-has-children > .menu-toggle-button {
  width: 0;
  height: 0;
  border: none;
  padding: 0;
  margin: 0;
  background-color: none;
  position: absolute;
  right: 0;
  top: 50%;
}
@media screen and (min-width: 750px) {
  #main-nav > ul > li.menu-item-has-children:hover ul, #main-nav > ul > li.menu-item-has-children.active ul {
    display: block;
    opacity: 1;
    visibility: visible;
  }
}
@media screen and (max-width: 800px) {
  #main-nav > ul > li > a {
    font-size: 1rem;
  }
  #main-nav > ul > li ul li a {
    font-size: 1rem;
  }
}
@media screen and (max-width: 750px) {
  #main-nav {
    display: none;
  }
}

#menu-toggle {
  display: none;
  vertical-align: middle;
  padding: 0 0 0 5px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  background: none;
}
#menu-toggle span, #menu-toggle span:before, #menu-toggle span:after {
  cursor: pointer;
  border-radius: 5px;
  width: 20px;
  height: 2px;
  background: #000;
  position: absolute;
  display: block;
  content: "";
}
#menu-toggle span:before {
  top: -6px;
}
#menu-toggle span:after {
  bottom: -6px;
}
#menu-toggle,
#menu-toggle span:before,
#menu-toggle span:after {
  transition: all 0.2s ease-in-out;
}
#menu-toggle.active span {
  background-color: transparent;
}
#menu-toggle.active span:before {
  top: 0;
  transform: rotate(45deg);
}
#menu-toggle.active span:after {
  transform: translateY(-8px) rotate(-45deg);
  top: 8px;
}
@media screen and (max-width: 750px) {
  #menu-toggle {
    display: block;
  }
}

#main-nav-mobile {
  display: none;
  position: absolute;
  background: #fff;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  padding: 100px 0 20px 0;
  box-shadow: 0 30px 80px -20px black;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
}
#main-nav-mobile > ul > li > a {
  color: #000;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.125rem;
  display: block;
  padding: 15px 20px;
  line-height: 1.2;
  background: transparent;
  transition: 0.2s;
  text-decoration: none;
}
#main-nav-mobile > ul > li > a.btn {
  padding: 15px 20px;
  display: block;
  border: 1px solid #fff;
  margin: 20px 20px 0 20px;
  border-radius: 50px;
  background: #3C6CCD;
  color: #fff;
}
#main-nav-mobile > ul > li > a.btn:hover {
  background: #000;
  color: #fff;
}
#main-nav-mobile > ul > li:hover {
  background: #eee;
}
#main-nav-mobile > ul > li.menu-item-has-children {
  position: relative;
}
#main-nav-mobile > ul > li.menu-item-has-children > a {
  margin-right: 60px;
}
#main-nav-mobile > ul > li.menu-item-has-children .menu-toggle-button {
  position: absolute;
  right: 10px;
  top: 12px;
  width: 23px;
  height: 23px;
  display: block;
  margin: 0 15px 0 0;
  cursor: pointer;
}
#main-nav-mobile > ul > li.menu-item-has-children .menu-toggle-button:before, #main-nav-mobile > ul > li.menu-item-has-children .menu-toggle-button:after {
  content: "";
  top: 12px;
  position: absolute;
  width: 8px;
  height: 2px;
  background: #000;
  display: block;
  transition: all 0.2s ease-in-out;
}
#main-nav-mobile > ul > li.menu-item-has-children .menu-toggle-button:before {
  left: 5px;
  transform: rotate(45deg);
}
#main-nav-mobile > ul > li.menu-item-has-children .menu-toggle-button:after {
  right: 5px;
  transform: rotate(-45deg);
}
#main-nav-mobile > ul > li.menu-item-has-children .menu-toggle-button.open:before {
  transform: rotate(-45deg);
}
#main-nav-mobile > ul > li.menu-item-has-children .menu-toggle-button.open:after {
  transform: rotate(45deg);
}
#main-nav-mobile > ul > li.menu-item-has-children ul {
  padding: 0 20px 20px 20px;
  display: none;
}
#main-nav-mobile > ul > li.menu-item-has-children ul li a {
  text-decoration: none;
  transition: 0.2s;
  display: block;
}
#main-nav-mobile > ul > li.menu-item-has-children ul li a:hover {
  color: #3C6CCD;
}
#main-nav-mobile.active {
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width: 750px) {
  #main-nav-mobile {
    display: block;
  }
}
@media screen and (max-width: 500px) {
  #main-nav-mobile {
    padding: 80px 0 20px 0;
  }
}

#banner {
  position: relative;
}
#banner .banner-images img {
  position: absolute;
}
#banner .banner-images img.banner-laptop {
  z-index: 0;
  left: 50%;
  margin-top: 100px;
  max-width: 765px;
  width: 50%;
}
#banner .banner-images img.banner-mobile {
  margin-top: 200px;
  z-index: 1;
  width: 20%;
  max-width: 300px;
  left: 50%;
}
#banner .banner-content {
  width: 50%;
  padding: 200px 0 100px 0;
  position: relative;
  z-index: 1;
}
#banner h1 {
  font-size: 4.75rem;
}
#banner .cta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 20px;
}
@media screen and (max-width: 1000px) {
  #banner .banner-images img.banner-laptop {
    margin-top: 200px;
    max-width: 765px;
    width: 50%;
  }
  #banner .banner-images img.banner-mobile {
    margin-top: 300px;
    width: 20%;
    max-width: 300px;
    left: 50%;
  }
  #banner h1 {
    font-size: 4.0625rem;
  }
}
@media screen and (max-width: 768px) {
  #banner .banner-images img {
    position: relative;
  }
  #banner .banner-images img.banner-laptop {
    margin-top: 100px;
    max-width: 765px;
    left: 0;
    width: 95%;
    top: 0 !important;
  }
  #banner .banner-images img.banner-mobile {
    margin-top: 200px;
    width: 35%;
    max-width: 100%;
    left: 0;
    position: absolute;
  }
  #banner .banner-content {
    width: 100%;
    padding: 0;
  }
}
@media screen and (max-width: 400px) {
  #banner .banner-images img.banner-mobile {
    margin-top: 175px;
  }
}

section {
  margin: 80px 0;
}
.banner-interior + section {
  margin-top: 50px;
}
section.bg {
  margin: 0;
  padding: 80px 0;
}
section .section-header {
  margin-bottom: 50px;
}
@media screen and (max-width: 760px) {
  section {
    margin: 50px 0;
  }
  section.bg {
    margin: 0;
    padding: 50px 0;
  }
}

#body-content {
  position: relative;
  z-index: 1;
}

.mod-services .service-listing {
  display: grid;
  gap: 50px 30px;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 50px 0;
}
.mod-services .service-listing p {
  margin: 0;
}
@media screen and (max-width: 768px) {
  .mod-services .service-listing {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 500px) {
  .mod-services .service-listing {
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
    margin-bottom: 30px;
  }
}

.mod-pricing {
  background: #F6F6F7;
}
.banner-interior + .mod-pricing {
  margin-top: 50px;
}

.pricing-plans {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(2, 1fr);
}
.pricing-plans article {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.25);
  padding: 30px;
  display: flex;
  flex-direction: column;
}
.pricing-plans article ul {
  margin: 20px 0;
  flex-grow: 1;
}
.pricing-plans article ul li {
  display: flex;
  justify-content: flex-start;
  padding: 10px 0;
  border-top: 1px solid #E5E5E5;
}
.pricing-plans article ul li:first-child {
  border: none;
}
.pricing-plans article ul li strong {
  display: block;
  flex: 0 0 130px;
}
.pricing-plans article a.price {
  background: #F6F6F7;
  text-decoration: none;
  display: block;
  padding: 20px 20px 15px 20px;
  border-radius: 10px;
  transition: 0.2s;
  position: relative;
  color: #000;
}
.pricing-plans article a.price span {
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 700;
  display: block;
  margin: 0 0 5px 0;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.pricing-plans article a.price strong {
  font-size: 3.125rem;
  line-height: 1;
  font-weight: 400;
  position: relative;
  z-index: 1;
}
.pricing-plans article a.price em {
  font-style: normal;
  position: relative;
  z-index: 1;
}
.pricing-plans article a.price:before {
  content: "";
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg width%3D%2218%22 height%3D%2218%22 viewBox%3D%220 0 18 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M8.02011 14.4675L3.66753 9.85593C3.28633 9.45164 2.66744 9.45211 2.28669 9.85687C1.90459 10.2612 1.90459 10.9167 2.28579 11.3201L8.30443 17.6971C8.68563 18.1014 9.30452 18.101 9.68572 17.6957L15.7134 11.3102C15.9045 11.108 16 10.843 16 10.5786C16 10.3141 15.9049 10.0486 15.7143 9.84695C15.3331 9.44266 14.7142 9.44313 14.3326 9.8479L9.97366 14.4652L9.98272 1.03435C9.98317 0.463331 9.54628 0 9.00662 0C8.46742 0.00141691 8.03007 0.46522 8.02917 1.03671L8.02011 14.4675Z%22 fill%3D%22%233C6CCD%22%2F%3E%3C%2Fsvg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  right: 20px;
  z-index: 2;
  bottom: 20px;
}
.pricing-plans article a.price.popular {
  background: linear-gradient(to right, #263567 0, #1E1E3E 100%);
  color: #fff;
  overflow: hidden;
}
.pricing-plans article a.price.popular:before {
  background-image: url("data:image/svg+xml,%3Csvg width%3D%2218%22 height%3D%2218%22 viewBox%3D%220 0 18 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M8.02011 14.4675L3.66753 9.85593C3.28633 9.45164 2.66744 9.45211 2.28669 9.85687C1.90459 10.2612 1.90459 10.9167 2.28579 11.3201L8.30443 17.6971C8.68563 18.1014 9.30452 18.101 9.68572 17.6957L15.7134 11.3102C15.9045 11.108 16 10.843 16 10.5786C16 10.3141 15.9049 10.0486 15.7143 9.84695C15.3331 9.44266 14.7142 9.44313 14.3326 9.8479L9.97366 14.4652L9.98272 1.03435C9.98317 0.463331 9.54628 0 9.00662 0C8.46742 0.00141691 8.03007 0.46522 8.02917 1.03671L8.02011 14.4675Z%22 fill%3D%22%237DA3ED%22%2F%3E%3C%2Fsvg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  transition: 0.2s;
}
.pricing-plans article a.price.popular:after {
  position: absolute;
  background: #000;
  content: "";
  opacity: 0;
  inset: 0 0 0 0;
  transition: 0.2s;
}
.pricing-plans article a.price.popular:hover {
  background: linear-gradient(to bottom, #000 0, #000 100%);
}
.pricing-plans article a.price.popular:hover:before {
  background-image: url("data:image/svg+xml,%3Csvg width%3D%2218%22 height%3D%2218%22 viewBox%3D%220 0 18 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M8.02011 14.4675L3.66753 9.85593C3.28633 9.45164 2.66744 9.45211 2.28669 9.85687C1.90459 10.2612 1.90459 10.9167 2.28579 11.3201L8.30443 17.6971C8.68563 18.1014 9.30452 18.101 9.68572 17.6957L15.7134 11.3102C15.9045 11.108 16 10.843 16 10.5786C16 10.3141 15.9049 10.0486 15.7143 9.84695C15.3331 9.44266 14.7142 9.44313 14.3326 9.8479L9.97366 14.4652L9.98272 1.03435C9.98317 0.463331 9.54628 0 9.00662 0C8.46742 0.00141691 8.03007 0.46522 8.02917 1.03671L8.02011 14.4675Z%22 fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-position: center center;
  background-repeat: no-repeat;
}
.pricing-plans article a.price.popular:hover:after {
  opacity: 1;
}
.pricing-plans article a.price:hover {
  color: #fff;
  background-color: #000;
}
.pricing-plans article a.price:hover:before {
  background-image: url("data:image/svg+xml,%3Csvg width%3D%2218%22 height%3D%2218%22 viewBox%3D%220 0 18 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M8.02011 14.4675L3.66753 9.85593C3.28633 9.45164 2.66744 9.45211 2.28669 9.85687C1.90459 10.2612 1.90459 10.9167 2.28579 11.3201L8.30443 17.6971C8.68563 18.1014 9.30452 18.101 9.68572 17.6957L15.7134 11.3102C15.9045 11.108 16 10.843 16 10.5786C16 10.3141 15.9049 10.0486 15.7143 9.84695C15.3331 9.44266 14.7142 9.44313 14.3326 9.8479L9.97366 14.4652L9.98272 1.03435C9.98317 0.463331 9.54628 0 9.00662 0C8.46742 0.00141691 8.03007 0.46522 8.02917 1.03671L8.02011 14.4675Z%22 fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-position: center center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 750px) {
  .pricing-plans {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (max-width: 500px) {
  .pricing-plans article {
    padding: 30px 20px 20px 20px;
  }
  .pricing-plans article ul {
    margin: 0 0 20px 0;
  }
  .pricing-plans article a.price span {
    font-size: 0.75rem;
  }
  .pricing-plans article a.price strong {
    font-size: 2.5rem;
  }
  .pricing-plans article a.price:before {
    width: 14px;
    height: 14px;
    background-size: cover;
  }
}

.badge {
  font-size: 0.8125rem;
  text-transform: uppercase;
  padding: 3px 15px;
  border-radius: 20px;
  position: relative;
  top: -5px;
  display: inline-block;
}
.badge.popular {
  color: #CA0064;
  background: rgba(202, 0, 100, 0.1);
}

.mod-portfolio-grid .portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
}
.mod-portfolio-grid .portfolio-grid a {
  color: #000;
  display: block;
  text-decoration: none;
}
.mod-portfolio-grid .portfolio-grid a img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  display: block;
  transition: 0.2s;
  border-radius: 10px;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}
.mod-portfolio-grid .portfolio-grid a h3 {
  transition: 0.2s;
}
.mod-portfolio-grid .portfolio-grid a .portfolio-title {
  /* @include flex(flex-start, flex-start, nowrap, row);
  gap: 20px; */
}
.mod-portfolio-grid .portfolio-grid a .portfolio-title svg {
  margin: 17px 0 0 0;
  fill: #000;
  width: 33px;
  height: 11px;
  position: relative;
  left: 0;
  transition: 0.2s;
  top: -3px;
}
.mod-portfolio-grid .portfolio-grid a:hover img {
  transform: scale(1.02);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}
.mod-portfolio-grid .portfolio-grid a:hover h3 {
  color: #3C6CCD;
}
.mod-portfolio-grid .portfolio-grid a:hover .portfolio-title svg {
  margin: 17px 0 0 0;
  left: 5px;
  fill: #3C6CCD;
}
@media screen and (max-width: 700px) {
  .mod-portfolio-grid .portfolio-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

.mod-cta-strip {
  background: linear-gradient(to right, #263567 0, #1E1E3E 100%);
}
.mod-cta-strip .cta-strip {
  color: #fff;
  text-align: center;
  text-wrap: balance;
}
.mod-cta-strip .cta-strip h2 {
  color: #fff;
}
.mod-cta-strip .cta-strip form {
  margin-bottom: 0;
}
@media screen and (max-width: 500px) {
  .mod-cta-strip .cta-strip form {
    flex-direction: column;
  }
  .mod-cta-strip .cta-strip form input[type=text],
  .mod-cta-strip .cta-strip form input[type=email] {
    width: 100%;
    max-width: 100%;
  }
}

.contact-card {
  text-align: center;
  padding: 50px 0;
}
.contact-card img {
  width: 175px;
  border-radius: 50%;
}
.contact-card h2 {
  margin: 20px 0 40px 0;
}
.contact-card .btn {
  width: 100%;
}
.contact-card .social {
  width: 100%;
  margin-top: 20px;
}

.qr {
  height: 100vh;
  display: flex;
  align-items: center;
}
.qr img {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  display: block;
}

.mod-contact .wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 60px;
}

.contact-form {
  flex: 0 0 calc(50% - 30px);
}
.contact-form div {
  margin: 0 0 20px 0;
}
.contact-form div.hidden {
  margin: 0;
}
@media screen and (max-width: 700px) {
  .contact-form {
    flex: 0 0 100%;
  }
}

.contact-text {
  flex: 0 0 calc(50% - 30px);
  text-wrap: balance;
}
.contact-text h2 {
  font-size: 3.5rem;
}
.contact-text p {
  margin-bottom: 20px;
}
.contact-text ul li {
  margin: 0 0 20px 0;
}
.contact-text ul li strong {
  display: block;
}
@media screen and (max-width: 700px) {
  .contact-text {
    flex: 0 0 100%;
  }
  .contact-text h2 {
    font-size: 3.125rem;
  }
}

.testimonial-grid {
  column-count: 3;
  align-content: flex-start;
  align-items: flex-start;
  column-gap: 20px;
  padding-top: 20px;
  display: block;
}
.testimonial-grid blockquote {
  text-align: left;
  background: #F6F6F7;
  padding: 30px;
  margin-bottom: 20px;
  display: inline-block;
  border-radius: 10px;
}
.testimonial-grid blockquote p {
  margin-bottom: 20px;
}
.testimonial-grid blockquote cite {
  line-height: 1;
  font-weight: 600;
}
.testimonial-grid blockquote cite strong {
  font-weight: 700;
  font-size: 1rem;
  display: block;
  margin-bottom: -3px;
}
.testimonial-grid blockquote cite span {
  font-size: 0.75rem;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  .testimonial-grid {
    column-count: 2;
  }
}
@media screen and (max-width: 500px) {
  .testimonial-grid {
    column-count: 1;
  }
  .testimonial-grid img {
    margin: 0 0 10px 0;
  }
}

.onscreen {
  transition: 0.5s;
  transition-delay: 0.1s;
  position: relative;
}

.offscreen {
  opacity: 0;
  transition: 0.5s;
  transition-delay: 0.1s;
  position: relative;
}

.portfolio-header {
  padding: 200px 0 0 0;
}
.portfolio-header .project-tags {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 60px;
}
.portfolio-header .project-tags .site-link {
  flex: 1;
  text-align: right;
}
.portfolio-header .project-tags ul li {
  font-size: 0.875rem;
}
@media screen and (max-width: 650px) {
  .portfolio-header {
    padding: 150px 0 0 0;
  }
  .portfolio-header .project-tags {
    flex-wrap: wrap;
  }
  .portfolio-header .project-tags .site-link {
    flex: 1;
    text-align: left;
  }
  .portfolio-header .project-tags article {
    flex: 1 0 calc(33.333% - 60px);
    text-align: left;
  }
}
@media screen and (max-width: 450px) {
  .portfolio-header .project-tags {
    gap: 30px;
  }
  .portfolio-header .project-tags article {
    flex: 1 0 100%;
    text-align: left;
  }
}

.banner-interior {
  padding: 160px 0 0 0;
}
.banner-interior .title {
  max-width: 680px;
}
@media screen and (max-width: 650px) {
  .banner-interior {
    padding: 110px 0 0 0;
  }
}

.mod-content-area .wrap {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
  flex-direction: row;
}
.mod-content-area.faq .wrap {
  flex-direction: row-reverse;
  align-items: stretch;
}
.mod-content-area .content-main {
  flex: 0 0 60.5263157895%;
}
.mod-content-area .content-sub {
  flex: 0 0 31.5789473684%;
}
@media screen and (max-width: 700px) {
  .mod-content-area .wrap {
    flex-wrap: wrap;
    gap: 50px;
  }
  .mod-content-area .content-main {
    flex: 0 0 100%;
  }
  .mod-content-area .content-sub {
    flex: 0 0 100%;
  }
  .mod-content-area.faq .content-sub {
    display: none;
  }
}

.faq-section h2 {
  font-size: 2.25rem;
}
.faq-section + .faq-section {
  margin-top: 50px;
}

.banner-centered {
  margin-top: 180px;
}
.banner-centered .banner-centered-content {
  text-align: center;
  margin: 0 auto;
}
.banner-centered .banner-centered-content .btn:not(button) {
  margin-top: 20px;
}

.box {
  position: sticky;
  top: 120px;
  background: #F6F6F7;
  padding: 30px;
  border-radius: 10px;
}

.faq-box li {
  margin: 5px 0;
}
.faq-box li a {
  text-decoration: none;
  font-weight: 700;
}

details {
  margin: 0 0 0;
  padding: 20px 0;
  border-radius: 10px;
  border-top: 1px solid #E5E5E5;
}
details:first-of-type {
  border-top: none;
  padding-top: 0;
}
details summary {
  font-size: 1.375rem;
  font-weight: 700;
  position: relative;
  cursor: pointer;
  list-style: none;
  margin-left: 35px;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 9px;
  background: url("data:image/svg+xml,%3Csvg width%3D%2213%22 height%3D%2213%22 viewBox%3D%220 0 13 13%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M3.29289 0.292893C3.65338 -0.0675907 4.22061 -0.0953203 4.6129 0.209705L4.70711 0.292893L10.1744 5.76014C10.5348 6.12062 10.5626 6.68786 10.2575 7.08015L10.1744 7.17435L4.70711 12.6416C4.31658 13.0321 3.68342 13.0321 3.29289 12.6416C2.93241 12.2811 2.90468 11.7139 3.2097 11.3216L3.29289 11.2274L8.05291 6.46725L3.29289 1.70711C2.93241 1.34662 2.90468 0.779392 3.2097 0.387101L3.29289 0.292893Z%22 fill%3D%22%233C6CCD%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
  width: 13px;
  height: 13px;
  display: inline-block;
  margin-right: 10px;
  transition: 0.2s ease;
}
details .content {
  margin-left: 35px;
  padding: 10px 0;
}
details .content p {
  margin: 0;
}
details.is-open summary::before {
  transform: rotate(90deg);
}

.content-centered {
  max-width: 800px;
  margin: 100px 0;
}

.portfolio-items {
  margin-top: 0;
}
.portfolio-items .items {
  text-align: center;
  margin: 100px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 30px;
}
.portfolio-items .items img {
  border-radius: 10px;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}
.portfolio-items .items.item-3 img {
  max-width: 330px;
}
.portfolio-items .items .mobile-left,
.portfolio-items .items .mobile-right {
  transform: scale(0.9);
  left: 0;
  right: 0;
}
.portfolio-items .items .mobile-center {
  top: 0;
  transition-delay: 0.1s;
}
.portfolio-items .items .mobile-center.offscreen {
  top: 30px;
}
.portfolio-items .items .mobile-left {
  left: 0;
  transition-delay: 0.2s;
}
.portfolio-items .items .mobile-left.offscreen {
  left: -30px;
}
.portfolio-items .items .mobile-right {
  left: 0;
  transition-delay: 0.3s;
}
.portfolio-items .items .mobile-right.offscreen {
  left: 30px;
}
.portfolio-items .btn {
  margin: 0 auto;
  display: block;
  width: fit-content;
}

#footer {
  border-top: 1px solid #E5E5E5;
  position: relative;
  z-index: 1;
  padding: 30px 0;
}
#footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 30px;
}
#footer p {
  margin: 0;
  font-size: 12px;
}
#footer p a {
  color: inherit;
  text-decoration: underline;
}
#footer .socials {
  margin-top: -5px;
}

/* != PLACEHOLDER ATTRIBUTE STYLES = input or textarea - placeholder="whatever" ===== */
::-webkit-input-placeholder {
  color: #626262;
}

::-moz-placeholder {
  color: #626262;
}

/* != FORM STYLES ===== */
label:not(fieldset label),
fieldset legend {
  position: absolute;
  left: -9999px;
}

input[type=text], input[type=password], input[type=url], input[type=number], input[type=tel], input[type=email] {
  width: 100%;
  padding: 12px 15px;
  background-color: #fff;
  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.07);
  border: 1px solid #adadad;
  border-radius: 5px;
}
input[type=text]:focus, input[type=password]:focus, input[type=url]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=email]:focus {
  border-color: #000;
  outline: none;
}

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 15px;
  background-color: #fff;
  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.07);
  border: 1px solid #adadad;
  border-radius: 5px;
}
textarea:focus {
  border-color: #000;
  outline: none;
}

/* .ginput_container_checkbox {
	.gfield_checkbox {
		.gchoice {
			label {
				padding: 0 0 0 2px;
				cursor: pointer;
				position: relative;
				&:before {
					border: 1px solid #00f;
					@include size(15px);
					border-radius: 2px;
					left: -17px;
					top: 1px;
					content: '';
					position: absolute;
					opacity: 1;
				}
				&:after {
					border-left: 3px solid #f00;
					border-bottom: 3px solid #f00;
					@include size(17px, 6px);
					transform: rotate(-45deg);
					top: 5px;
					left: -14px;
					content: '';
					position: absolute;
					opacity: 0;
				}
				&:hover {
					&:after {
						opacity: 0.3;
					}
				}
			}
			input[type=checkbox] {
				visibility: hidden;
				&:checked + label:after {
					opacity: 1;
				}
			}
		}
	}
}
.ginput_container_radio {
	.gfield_radio {
		.gchoice {
			label {
				padding: 0 0 0 2px;
				cursor: pointer;
				position: relative;
				&:before {
					border: 1px solid #00f;
					@include size(15px);
					border-radius: 50%;
					left: -17px;
					top: 1px;
					content: '';
					position: absolute;
					opacity: 1;
				}
				&:after {
					@include size(5px);
					border-radius: 50%;
					left: -12px;
					top: 6px;
					content: '';
					position: absolute;
					opacity: 0;
				}
				&:hover {
					&:after {
						opacity: 0.3;
					}
				}
			}
			input[type=radio] {
				visibility: hidden;
				&:checked + label:before {
					background: #f00;
					border: 1px solid #f00;
				}
				&:checked + label:after {
					background: #fff;
					opacity: 1;
				}
			}
		}
	}
} */
.lead-capture {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 20px;
  margin: 40px 0;
}
.lead-capture input {
  max-width: 250px;
}

input[type=submit], button {
  display: inline-block;
  cursor: pointer;
}
select {
  padding: 10px 35px 10px 15px;
  width: 100%;
  background: #fff url("data:image/svg+xml,%3Csvg width%3D%2213%22 height%3D%228%22 viewBox%3D%220 0 13 8%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M.293.293c.36-.36.928-.388 1.32-.083l.094.083L6.51 5.096 11.313.293c.36-.36.928-.388 1.32-.083l.094.083c.36.36.389.928.084 1.32l-.084.094-5.51 5.51c-.36.36-.927.388-1.32.083l-.094-.083-5.51-5.51c-.39-.39-.39-1.024 0-1.414z%22 fill%3D%22%23f00%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat calc(100% - 10px) 50%;
  border: 1px solid #f00;
}

.gform_validation_errors {
  background-color: #c00;
  color: #fff;
  padding: 20px;
}
.gform_validation_errors h2 {
  color: #fff;
}

.gform_validation_container {
  position: absolute;
  top: -9999px;
  left: -9999px;
  pointer-events: none;
  opacity: 0;
}
/*# sourceMappingURL=style.css.map */