/*--------------------------------------------- reset---------------------------------------------------------------*/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 60px;
}

body {
  margin:0;
  padding:0;
  background-color: var(--white);
  overflow-x: hidden;
}

:root {
  --primary-beige: #BB9F81;
  --primary-blue: #2B3B49;
  --secondary-gray: #BEBEBE;
  --secondary-teal: #006976;
  --secondary-slate: #59818E;
  --white: #ffffff;
  --black: #333333;
}

img {
  width:100%;
}

.beige-txt {
  color:var(--primary-beige)!important;
}

.blue-txt {
  color:var(--primary-blue)!important;
}

.gray-txt {
  color:var(--secondary-gray)!important;
}

.teal-txt {
  color:var(--secondary-teal)!important;
}

.slate-txt {
  color:var(--secondary-slate)!important;
}

/*--------------------------------------------- fonts---------------------------------------------------------------*/
@font-face {
font-family: 'Chuck Noon Regular';
font-style: normal;
font-weight: normal;
src: local('../../assets/fonts/Chuck Noon Regular'), url('../../assets/fonts/Chuck Noon.woff') format('woff');
}

/*--------------------------------------------- mobile---------------------------------------------------------------*/
@media (max-width: 480px) {
    .mobhide { display:none; }
    .mobshow { display: static; }
}

@media (min-width: 480px) {
    .mobshow { display: none; }
}

@media (max-width: 1024px) {
    .tabhide { display:none; }
    .tabshow { display: static; }
}

@media (min-width: 1024px) {
    .tabshow { display: none; }
}
/*--------------------------------------------- svg---------------------------------------------------------------*/
.st0 {
  fill:var(--secondary-teal);
}

.ifp-1 {
  fill:#c29a5b;
}

/*--------------------------------------------- text---------------------------------------------------------------*/
html body {
  font-family: "Rubik", serif;
  font-weight:300;
  font-size:16px;
  line-height:1.4em;
  color:var(--black);
  font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Chuck Noon Regular';
  font-style: normal;
  padding:0;
  margin-bottom:0.5em;
  font-weight: normal;
  color:var(--primary-blue);
}

h1 { font-size: 32px; line-height: 36px; }
h2 { font-size: 28px; line-height: 32px; }
h3 { font-size: 24px; line-height: 28px; }
h4 { font-size: 20px; line-height: 24px; }
h5 { font-size: 18px; line-height: 22px; }
h6 { font-size: 16px; line-height: 20px; }

.tac { text-align:center; }


blockquote {
  padding:20px 40px;
  margin:0;
  color:var(--primary-beige);
  font-size:36px;
  line-height:40px;
  position:relative;
  width: fit-content;
  block-size: fit-content;
}

blockquote:before{
  content: "\201C";
  color:var(--primary-blue);
  font-size:4em;
  position: absolute;
  left: -13px;
  top:36px;
}

blockquote:after {
  content: "\201D";
  color:var(--primary-blue);
  font-size:4em;
  position: absolute;
  right: -10px;
  bottom:-36px;
}

cite {
  color:var(--secondary-gray);
}

ol {
  list-style-type: none!important;
  counter-reset: ordered;
  margin-left: 20px;
}

ol li::before {
  background: var(--primary-beige);
  border-radius: 50%;
  color: var(--white);
  content: counter(ordered);
  counter-increment: ordered;
  display: inline-block;
  font-weight: 100;
  margin-left: -50px;
  margin-top: 0;
  padding: 5px 12px;
  position: absolute;
}

.xxsmall { font-size:12px; line-height: 16px; }
.xsmall { font-size: 14px; line-height: 19px; }
.small { font-size: 16px; line-height: 21px; }
.medium { font-size: 18px; line-height: 25px; }
.large { font-size: 24px; line-height: 34px; }
.xlarge { font-size:30px; line-height: 36px; }
.xxlarge { font-size: 36px; line-height: 40px; }
.xxxlarge { font-size:48px; line-height: 48px; }
.massive { font-size: 60px; line-height: 66px; }
.mega { font-size: 72px; line-height: 84px; }

@media (max-width: 480px) {
  .large { font-size: 18px; line-height: 22px; }
  .xlarge { font-size: 18px; line-height: 22px; }
  .xxlarge { font-size: 18px; line-height: 22px; }
  .xxxlarge { font-size: 24px; line-height: 26px; }
  .massive { font-size: 36px; line-height: 38px; }
  .mega { font-size: 40px; line-height: 42px; }
}

.lightweight { font-weight:300; }
.middleweight { font-weight:500; }
.heavyweight { font-weight: 700; }

.sans { font-family: "Rubik", serif; }
.serif { font-family: "Rubik", serif; }

.sub {
      font-size: 0.6875rem;
      font-weight: 800;
      letter-spacing: 0.1818em;
      padding-bottom: 0.25em;
      text-transform: uppercase;
}

.designation { font-size: 0.9rem; }

ul { list-style: outside none disc; padding-left:14px; }
ol { list-style: outside none decimal; padding-left:14px; }
ol li { margin-bottom:7px; }

@media(min-width:900px){
  span.lbr::before{
    content:"\A";
    white-space: pre;
  }
}

/*--------------------------------------------- flexbox---------------------------------------------------------------*/
.flxp { display:flex; }
.flxc { display: flex; align-items: center; justify-content: center; }
.flxsb { display: flex; justify-content: space-between; flex-wrap: wrap; }
.flxw { display:flex; flex-wrap:wrap; }
.jc { justify-content:center; }
.aic { align-items: center; }

.twocol {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
  -moz-column-gap: 40px; /* Firefox */
  column-gap: 40px;
}

@media (max-width: 750px) {
    .twocol {
      -webkit-column-count: 1; /* Chrome, Safari, Opera */
      -moz-column-count: 1; /* Firefox */
      column-count: 1;
    }
  }

.boxed {
  width:100%;
  max-width: 1440px!important;
  margin:0 auto;
  padding: 40px;
}

.wide {
  width:100%;
  max-width: 980px!important;
  min-width: 320px;
  margin:0 auto;
  padding: 40px 0;
}

.narrow {
  width:100%;
  max-width:800px;
  min-width:320px;
  margin:0 auto;
  padding: 20px 0;
}

.tight {
  width:100%;
  max-width:600px;
  min-width:320px;
  margin:0 auto;
  padding: 20px 0;
}

.tiny {
  width:100%;
  max-width:320px;
  min-width:300px;
  margin:0 auto;
  padding: 20px 0;
}

@media (max-width: 1439px) {
  .boxed { padding:40px; }
}

@media (max-width: 979px) {
  .wide { padding:40px; }
}

@media (max-width: 799px) {
  .narrow { padding: 0 40px;}
}

@media (max-width: 750px) {
  .narrow { padding:40px; }
}

@media (max-width: 500px) {
  .boxed, .wide, .narrow { padding:20px; }
}

.collapse { margin:0!important; padding:0!important; }

@media (min-width: 1048px) {
  .grid2 {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap:64px;
  }

  .grid3 {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap:64px;
  }

  .grid4 {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap:36px;
  }

  .asym3 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 64px;
  }

  .asym3rev {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 64px;
  }

  .asym4 {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 64px;
  }

  .asym4rev {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 64px;
  }

  .gridzrev2 {
      display: grid;
      grid-template-columns: [left] 1fr [right] 1fr;
      grid-gap: 48px;
  }

  .gridzrev2 .right {
      grid-column-start: right;
      grid-row: 1 / 2;
  }

  .gridzrev2 .left {
      grid-column-start: left;
      grid-row: 1 / 2;
  }
}

/*--------------------------------------------- spacing---------------------------------------------------------------*/

.mp0 { margin:0; padding:0; }
.mt0 { margin-top:0!important; }
.mt20 { margin-top:20px; }
.mt40 { margin-top:40px; }
.mb0 { margin-bottom: 0!important; }
.mb20 { margin-bottom:20px; }
.mb40 { margin-bottom:40px; }
.mb60 { margin-bottom:60px; }
.pad40 { padding:40px; }
.padtb40 { padding:40px 0 40px 0; }
.padb40 { padding-bottom:40px; }
.padt40 { padding-top:40px; }
.padlr40 { padding:0 40px;}
.padr40 { padding-right:40px;}
.padl40 { padding-left:40px;}
.padtb0 { padding-top:0; padding-bottom:0; }
.padt0 { padding-top:0!important; }
.padb0 { padding-bottom:0!important; }
.nopad { padding:0; }

@media (max-width: 480px) {
  .padlr40 { padding:0;}
}

/*--------------------------------------------- buttons---------------------------------------------------------------*/

button {
  padding:15px 30px;
  color:var(--primary-blue);
  background:var(--primary-beige);
  border:none;
  font-size:16px;
  border-radius:2px;
  transition: all 500ms ease;
  margin-top:20px;
  font-family: "Rubik", serif;
  font-weight:400;
  font-size:16px;
  line-height:1.4em;
}

button:hover, button:focus {
  background:var(--secondary-teal);
  color:var(--white);
  cursor:pointer;
  transform: scale(1.10);
}

button.rev {
  padding:15px 30px;
  color:#333;
  background:#fff;
  border:none;
  font-size:16px;
  border-radius:2px;
  transition: all 500ms ease;
  margin-top:20px;
  font-family: "Rubik", serif;
  font-weight:400;
  font-size:16px;
  line-height:1.4em;
}

button.rev:hover, button.rev:focus {
  background:var(--primary-beige);
  color:#fff;
  cursor:pointer;
  transform: scale(1.10);
}

button.ghost {
  padding:15px 30px;
  color:var(--primary-beige);
  background: transparent;
  border:1px solid #333;
  font-size:16px;
  border-radius:2px;
  transition: all 500ms ease;
  margin-top:20px;
  font-family: "Rubik", serif;
  font-weight:400;
  font-size:16px;
  line-height:1.4em;
}

button.ghost:hover, button.ghost:focus {
  background:#333;
  border: 1px solid #333;
  color: var(--primary-beige);
  cursor:pointer;
  transform: scale(1.10);
}

button.revghost {
  padding:15px 30px;
  color:#fff;
  background: transparent;
  border:1px solid var(--primary-beige);
  font-size:16px;
  border-radius:2px;
  transition: all 500ms ease;
  margin-top:20px;
  font-family: "Rubik", serif;
  font-weight:400;
  font-size:16px;
  line-height:1.4em;
}

button.revghost:hover, button.revghost:focus {
  background:var(--primary-beige);
  border: 1px solid var(--primary-beige);
  color: #333;
  cursor:pointer;
  transform: scale(1.10);
}

/*--------------------------------------------- cards ---------------------------------------------------------------*/

.card {
    background: #fff;
    align-items: stretch;
    padding:40px;
    border-radius:2px;
    margin-bottom:20px;
    transition: all 500ms ease;
    border-radius:10px;
}

.card:hover, .card:focus {
    -moz-box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 20px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 20px 0px;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 20px 0px;
    -moz-transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, -moz-transform;
    -o-transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, -o-transform;
    -webkit-transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, -webkit-transform;
    transition-property: background-color, border-color, box-shadow, color, opacity, text-shadow, transform;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}

.card h2 { font-family: "Rubik", serif; font-weight:400; font-size: 20px; line-height:24px; }

section { padding:40px 20px; }
section .title { text-align:center; margin:0; padding:0; }

@media (max-width: 1200px) {
      section { padding:0 20px; }
}

/*------------------------------ forms ---------------------------------- */
form placeholder { font-size:16px; }

input[type="text"], input[type="email"] {
  padding:20px;
  width:100%;
  border-radius:2px;
  border:none;
  font-family: "Rubik", serif;
  font-weight:400;
  font-size:16px;
  line-height:1.4em;
  margin-bottom:20px;
 }

textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius:2px;
  margin-bottom: 15px;
  box-sizing: border-box;
  color: #333;
  font-size: 13px;
  width:100%;
  height:50%;
  margin-bottom:20px;
}

input.submit {
  background: var(--primary-blue);
  color:var(--primary-beige);
  border: 0 none;
  border-radius:30px;
  cursor: pointer;
  padding: 15px 30px;
  font-family: "Rubik", serif;
  font-weight:400;
  font-size:16px;
  line-height:1.4em;
}

input.submit:hover {
  background: var(--secondary-slate);
  color: var(--white);
  transform: scale(1.10);
  transition: all 500ms ease;
}

input[type=text]::-webkit-input-placeholder { color: #333!important; font-weight:400;font-size:16px }
input[type=text]::-moz-placeholder { color: #333!important; font-weight:400;font-size:16px }
input[type=text]:-ms-input-placeholder { color: #333!important; font-weight:400;font-size:16px }
input[type=text]:-moz-placeholder { color: #333!important; font-weight:400;font-size:16px }
input[type=text]:focus::-webkit-input-placeholder { color:transparent!important; }
input[type=text]:focus:-moz-placeholder { color:transparent!important; } /* FF 4-18 */
input[type=text]:focus::-moz-placeholder { color:transparent!important; } /* FF 19+ */
input[type=text]:focus:-ms-input-placeholder { color:transparent!important; } /* IE 10+ */
input[type=email]::-webkit-input-placeholder { color: #333!important; font-weight:400;font-size:16px }
input[type=email]::-moz-placeholder { color: #333!important; font-weight:400;font-size:16px }
input[type=email]:-ms-input-placeholder { color: #333!important; font-weight:400;font-size:16px }
input[type=email]:-moz-placeholder { color: #333!important; font-weight:400;font-size:16px }
input[type=email]:focus::-webkit-input-placeholder { color:transparent!important; }
input[type=email]:focus:-moz-placeholder { color:transparent!important; } /* FF 4-18 */
input[type=email]:focus::-moz-placeholder { color:transparent!important; } /* FF 19+ */
input[type=email]:focus:-ms-input-placeholder { color:transparent!important; } /* IE 10+ */

@media (max-width: 480px) {
  input[type="text"], input[type="email"], textarea { width:90%; }
}

/*--------------------------------------------- nav---------------------------------------------------------------*/
nav li {
  list-style: none; display:inline-flex;
}

nav li:hover {
  cursor:pointer;
}

nav li a {
  text-decoration: none;
  color:#333;
  display:block;
  padding:0px 20px;
  font-weight:400;
}

nav li:hover > a {
  color:var(--primary-beige);
}

@media (max-width: 1100px) {
    nav { display: none; }
}

#toggle {
  padding: 10px;
	z-index: 10;
	background:transparent;
	border:none;
	display:block;
	z-index:30;
  position:relative;
  top:-30px;
  right:-12px;
}

@media(min-width:1100px){
  #toggle {
    display:none;
  }
}

#toggle svg {
  width:30px;
}

#mobile-menu {
  transition: all 500ms ease;
  display:none;
  height:0;
  position:fixed;
  top:74px;
  bottom:0;
  left:0;
  right:0;
  text-align:center;
  z-index:100;
  background:var(--primary-beige);
  padding:40px 20px 0 20px;
}

#mobile-menu.open {
  display:flex;
  flex-direction:column;
  height:auto;
}

#mobile-menu ul {
  list-style: none;
}

#mobile-menu li {
  text-decoration: none;
  padding-bottom:12px;
}

#mobile-menu a {
  color:var(--black);
  text-transform:uppercase;
  text-decoration:none;
  font-size:24px;
}

#mobile-menu a:hover, #mobile-menu a:focus {
  color:var(--primary-blue)!important;
}

/*--------------------------------------------- header---------------------------------------------------------------*/
header {
  padding:10px 20px 0 20px;
  position:fixed;
  z-index:20;
  top:0;
  left:0;
  width:100%;
  height:74px;
  background:#fff;
  -webkit-box-shadow: 0px 6px 20px 0px rgba(85,85,85,0.33);
  -moz-box-shadow: 0px 6px 20px 0px rgba(85,85,85,0.33);
  box-shadow: 0px 6px 20px 0px rgba(85,85,85,0.33);
}

header svg, header img { width:300px; height:55px; margin-top:0; }

@media (max-width: 960px) {
    header svg, header img { margin:0 auto; width:280px; }
}

/*--------------------------------------------- brokercheck---------------------------------------------------------------*/

#brokercheck {
	width:100%;
	color:var(--white);
	background:transparent;
}

#brokercheck a {
  color:#ccc;
}

#brokercheck a:hover {
  color:var(--white);
}


/*--------------------------------------------- home sections---------------------------------------------------------------*/
#first h1, #first h2, #first h3, #first h4, #first h5, #first h6 {
  color:var(--primary-beige)!important;
}

#contact h1, #contact h2, #contact h3, #contact h4, #contact h5, #contact h6 {
  color:var(--primary-blue)!important;
}


#hero {
  background-color:var(--primary-beige);
  overflow:hidden;
  min-height:50vh;
  position:relative;
  padding:80px 0 0 0;
}

#hero-image {
  position:absolute;
  width:100%;
  height:100%;
  background-repeat: no-repeat!important;
  background-position: center;
  background-size: cover;
  background-image:url('../../assets/image/hero.jpg');
  opacity:0.3;
}

#hero-content {
  padding: 40px 40px 70px 40px;
  text-align:center;
  z-index:2;
  position:relative;
}

#hero .wide {
  min-height:50vh;
}

#hero {
  color:var(--white);
}

#hero h1 {
  color:var(--primary-blue)!important;
  margin-bottom:10px;
  margin-top:60px;
}

#hero p {
  margin-top:0;
}

#ifp {
  padding-top:80px;
}

#mission {
    background-color:#fff;
    overflow:hidden;
}

@media (max-width: 1200px) {
    #mission { padding: 0; }
}

#services {
  background: var(--primary-blue);
  padding:60px;
}

#services h2 {
  color:var(--primary-beige);
  margin:0 0 40px 0;
}

#services h3 {
  color:var(--white);
}

#services .card h3 {
  color:var(--primary-blue);
}

@media (max-width: 1580px) {
   #services { padding: 60px 20px; }
}


#process {
  background:var(--secondary-gray);
}

#about {
  background-color:var(--white);
  padding:60px 40px;
}

#about a, #about a:visited {
  color:var(--primary-beige);
  text-decoration:none;
}

#about a:hover {
  color:var(--secondary-slate);
}

@media (max-width: 480px) {
  #about { padding:40px 0; }
  #about .quarter { padding: 0; }
}

.disclosure {
  font-size:0.85em!important;
  line-height:1.35em!important;
}

.disclosure a, .disclosure a:visited {
  color:var(--primary-blue);
}

.disclosure a:hover, disclosure a:focus {
  color:var(--secondary-slate);
}

#about .profile {
  background-repeat: no-repeat!important;
  background-position: center;
  background-size: cover;
  width:100%;
  margin-bottom:40px;
  border-radius:30px;
}

#about .profile::before {
  content: "";
  display: block;
  padding-top: 100%;
}

#partners {
  background-color:var(--white);
}

#partners .plogo, #partners .plogo svg {
  width: 360px;
}

#partners .half p {
  padding-right:40px;
}

@media (max-width: 1024px) {
  #partners .half p { padding-right:0; }
  #partners .half, #partners button, #contact .submit { margin-bottom:40px; }
}

@media (max-width: 480px) {
  #partners h2 { padding:40px 0 0 0; }
}

#contact {
  background:var(--primary-beige);
}

#contact form {
  margin:auto;
}

#contact h2 {
  margin-bottom:6px;
}

#contact p {
  color:#fff;
  margin:0 0 40px 0;
  font-size:21px;
}

#mission .wrap, #services .wrap, #about .wrap, #partners .wrap, #contact .wrap { margin:auto; }



/*--------------------------------------------- footer---------------------------------------------------------------*/
footer {
  background: var(--primary-blue);
  color: rgba(215, 210, 203, 1.0);
}

footer a, footer a:visited {
  color: rgba(215, 210, 203, 1.0)
}

footer a:hover {
  color:var(--white);
}