:root {
  --bg-light-1: #f8f8f8;
  --bg-light-2: #efedf0;
  --bg-light-3: #e6e6e6;
  --bg-light-4: #cecece;
  --bg-grey: #dcdcdc;
  --bg-dark: #0a0a0a;
  --bg-accent: #ffc000;

  --text-lightest: #f8f8f8;
  --text-lighter: #efedf0;
  --text-light: #cecece;
  --text-grey: #b0aeb0;
  --text-dark: #0a0a0a;
  --text-accent: #ffc000;
}

@font-face {
  font-family: RadioGrotesque;
  src: url(../fonts/RadioGrotesk-Regular.otf);
}

@font-face {
  font-family: Manrope;
  src: url(../fonts/Manrope-Regular.ttf);
}

@font-face {
  font-family: ManropeLight;
  src: url(../fonts/Manrope-Light.ttf);
}

@font-face {
  font-family: ManropeMedium;
  src: url(../fonts/Manrope-Medium.ttf);
}

@font-face {
  font-family: ManropeBold;
  src: url(../fonts/Manrope-Bold.ttf);
}

html, body {
  font-family: ManropeLight;
  color: var(--font-gray);
  overscroll-behavior: none;
  width: 100vw;
  max-width: 100vw;
  overflow-x: clip;
}

h1, h2 {
  font-family: RadioGrotesque;
  color: var(--text-dark);
}

h3 {
  color: var(--text-grey);
}

.card-title {
  font-family: RadioGrotesque;
  color: var(--text-dark);
}

.col-md-1point5 { flex: 0 0 auto; width: 12.5% }
.col-md-6point5 { flex: 0 0 auto; width: 54.16666667%; }

.fs-7 { font-size: 0.9rem!important; }
.fs-8 { font-size: 0.8rem!important; }
.fs-9 { font-size: 0.75rem!important; }

.ff-rg { font-family: RadioGrotesque; }
.ff-ml { font-family: ManropeLight; }

p {
  font-size: 0.9rem!important;
}

.opacity-85 {
  opacity: 0.85!important;
}

.bg-opacity-60 {
  --bs-bg-opacity: 0.60;
}

.bg-transparent {
  background: transparent;
}

/** navbar **/
.nav { color: var(--text-dark); }
.navbar-brand {
  font-family: RadioGrotesque;
  font-size: xx-large !important;
}
@media only screen and (max-width: 768px) {
  .navbar-nav {
    background-color: var(--bg-light-3);
    border: solid var(--bg-dark) 1px;
    color: var(--text-dark) !important;
  }
  .navbar-nav a { color: var(--text-dark) !important; }
}
.navbar-light { color: var(--text-dark); }
.nav-link {
  font-family: ManropeLight;
  color: #474747;
}
.nav-link.active {
  font-family: ManropeMedium;
  color: var(--text-dark);
}
.navbar .btn:focus, .navbar .btn:active { box-shadow: none; }

/* popup menu */
.modal-header button { text-align: left; }
.modal-header img { width: 50% !important; }
.modal-body.menu .btn {
  border-radius: 0px;
  border-bottom: solid #181818 1px;
  text-align: left;
  font-family: RadioGrotesque !important;
  font-weight: normal;
  font-size: 20pt !important;
  color: white;
  margin-left: 1rem;
  margin-right: 1rem;
}
.modal-body.menu .btn.active {
  color: var(--text-accent);
}

/** rounded borders **/
.rounded-20 { border-radius: 20px !important; }
.rounded-30 { border-radius: 30px !important; }

.rounded-t-l-20 { border-top-left-radius: 20px !important; }
.rounded-b-r-20 { border-bottom-right-radius: 20px !important; }
.rounded-b-l-75 { border-bottom-left-radius: 75px !important; }
.rounded-t-r-150 { border-top-right-radius: 150px !important; }
.rounded-b-l-150 { border-bottom-left-radius: 150px !important; }

.bg-light-1 { background-color: var(--bg-light-1) !important; }
.bg-light-2 { background-color: var(--bg-light-2) !important; }
.bg-light-3 { background-color: var(--bg-light-3) !important; }
.bg-light-4 { background-color: var(--bg-light-4) !important; }
.bg-grey { background-color: var(--bg-grey) !important; }
.bg-dark { background-color: var(--bg-dark) !important; }
.bg-accent { background-color: var(--bg-accent) !important; }

.bg-gradient-light-2-4 {
  background-image: linear-gradient(to bottom, var(--bg-light-2), var(--bg-light-4)) !important;
}

.bg-gradient-light-1-4 {
  background-image: linear-gradient(to bottom, var(--bg-light-1), var(--bg-light-1), var(--bg-light-4));
}

.bg-gradient-light-2-3 {
  background-image: linear-gradient(to bottom, var(--bg-light-1), var(--bg-light-1), var(--bg-light-3));
}

.bg-grid-shapes {
  background-image: url("../img/bg-grid-shapes.png");
  background-size: contain;
}

.ls-1 { letter-spacing: 1px !important; }
.lh-1 { line-height: 1 !important; }
.lh-2 { line-height: 1.1 !important; }
.lh-3 { line-height: 1.2 !important; }
.lh-3-5 { line-height: 1.25 !important; }

.shadow-inset {
  /* box-shadow: 0 -.5rem 1rem rgba(0,0,0,.15) inset !important; */
  box-shadow: inset 0 -1rem 1rem -0.5rem rgba(0,0,0,.15);
}

.shadow-b-sm { box-shadow: 0 0.25rem .25rem rgba(0,0,0,.075) !important; }
.shadow-b { box-shadow: 0 1rem 1rem rgba(0,0,0,.15) !important; }
.shadow-b-n1 { box-shadow: 0 1rem 1rem rgba(0,0,0,.10) !important; }
.shadow-b-lg { box-shadow: 0 3rem 3rem rgba(0,0,0,.15) !important; }

.shadow-light-b-sm { box-shadow: 0 0.25rem .25rem rgba(255,255,255,.075) !important; }
.shadow-light-b { box-shadow: 0 1rem 1rem rgba(255,255,255,.15) !important; }
.shadow-light-b-n1 { box-shadow: 0 1rem 1rem rgba(255,255,255,.10) !important; }
.shadow-light-b-lg { box-shadow: 0 3rem 3rem rgba(255,255,255,.15) !important; }

.shadow-light-sm { box-shadow: 0 .125rem .25rem rgba(255,255,255,.15) !important; }
.shadow-light { box-shadow: 0 .5rem 1rem rgba(255,255,255,.3) !important; }
.shadow-light-lg { box-shadow: 0 1rem 3rem rgba(255,255,255,.3) !important; }

.shadow-dark-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.15) !important; }
.shadow-dark { box-shadow: 0 .5rem 1rem rgba(0,0,0,.3) !important; }
.shadow-dark-lg { box-shadow: 0 1rem 3rem rgba(0,0,0,.3) !important; }

.text-lightest { color: var(--text-lightest); }
.text-lighter { color: var(--text-lighter); }
.text-light { color: var(--text-light); }
.text-grey { color: var(--text-grey); }

.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }
.z-4 { z-index: 4; }
.z-5 { z-index: 5; }

.mt-n1{ margin-top:-.25rem!important; }
.mt-n2{ margin-top:-.5rem!important; }
.mt-n3{ margin-top:-1rem!important; }
.mt-n4{ margin-top:-1.5rem!important; }
.mt-n5{ margin-top:-3rem!important; }
.mt-n6{ margin-top:-3.5rem!important; }
.mt-n7{ margin-top:-4rem!important; }

.ms-n1{margin-left:-.25rem!important}
.ms-n2{margin-left:-.5rem!important}
.ms-n3{margin-left:-1rem!important}
.ms-n4{margin-left:-1.5rem!important}
.ms-n5{margin-left:-3rem!important}
.ms-n6{margin-left:-3.5rem!important}
.ms-n7{margin-left:-7rem!important}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.02); }

.sticky { position: sticky; position: -webkit-sticky; }

#home-hero { height: 150vw; overflow-x: clip; }
.bg-home-hero {
  overflow-x: clip; 
  width: 100% !important;
  background-image: url("../img/logo-reveal-vertical.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 768px) {
  #home-hero { height: 400px; }
  .bg-home-hero {
    background-image: url("../img/logo-reveal.gif");
  }
}


#about-hero { height: 2000px; }
#about-hero-text { top:calc(50% - 100px); }
#about-overview { 
  mix-blend-mode: exclusion;
  background: linear-gradient(0deg, #00000000 0%, #000000bb 15%, #000000dd 50%, #000000bb 85%, #00000000 100%); 
}
#about-lottie {
  position:fixed;
  /* top:100px; */
  width:110%;
  height:100vh;
  overflow-x:clip;
}
#about-lottie svg { width: 100% !important; height: 100% !important; }
@media only screen and (max-width: 768px) {
  #about-lottie svg { width: 250% !important; left: -125%; }
}
.about-lottie-gradient { position:fixed; width:100%; height:200px; }
#about-lottie-gradient-top {
  top: 0;
  opacity: 1;
  transition: all 1s ease-in-out;
  background: linear-gradient(to top, transparent, transparent, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
}
#about-lottie-gradient-bottom {
  bottom: 0;
  opacity: 1;
  transition: all 1s ease-in-out;
  background: linear-gradient(to bottom, transparent, transparent, #000000, #000000);
}
.about-profile-bar {
  height:100px;
  max-height:100px;

  /* background-image: url('../img/about-profile-bar.png');
  background-position: top right;
  background-size: 600px;background-repeat: no-repeat;
  background-blend-mode: soft-light; */

  /* background-image: linear-gradient(to right, #ffffff, #dedede) !important;
  border-radius: 20px !important;
  box-shadow: 0 .125rem .5rem rgba(0,0,0,.15) !important; */
  
  /* padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  margin-left: 200px; */
}

.about-team-container {
  background: linear-gradient(var(--bg-light-2) 0%,#ebebeb 50%, var(--bg-light-2) 100%) !important;
}

#our-leadership {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
}

.leadership-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 85px;
}

.leadership-header {
  
}
.leadership-header img {
  height: 120px;
}

.name-content {
  margin-top: -120px;
  margin-left: 100px;
}

.leadership-name {
  line-height: 50px;
}

.leadership-position {
}

.leadership-content {
  margin-top: 35px;
  width: 600px;
  border-left: 1px solid #80808050;
  padding-left: 50px;
}

#about-down-white-arrow {
  position: fixed;
  width: 100%;
  text-align: center;
  bottom: 20%;
}
#about-down-white-arrow img {
  transform: scale(0.7);
}
.down-arrow-text {
  color: white;
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 750px) {
  .leadership-header img {
    height: 70px;
  }
  .name-content {
    margin-top: -82px;
    margin-left: 50px;
  }
  .leadership-name {
    line-height: 35px;
    font-size: 25px !important;
  }
  .leadership-position {
    font-size: 16px !important;
  }
  .leadership-content {
    width: 450px;
  }
}

@media (max-width: 450px) {
  .leadership-header img {
    height: 55px;
  }
  .name-content {
    margin-top: -60px;
    margin-left: 40px;
  }
  .leadership-name {
    line-height: 20px;
    font-size: 18px !important;
  }
  .leadership-position {
    font-size: 14px !important;
  }
  .leadership-content {
    width: 350px;
    padding-left: 30px;
  }
}
/* #about-down-white-arrow img {
  animation: myAnim 1.5s ease-in-out infinite;
}

@keyframes myAnim {
  0% {
    animation-timing-function: ease-in;
    transform: translateY(0px);
  }

  10% {
    animation-timing-function: ease-in;
    transform: translateY(-3px);
  }

  20% {
    animation-timing-function: ease-in;
    transform: translateY(-6px);
  }

  30% {
    animation-timing-function: ease-in;
    transform: translateY(-9px);
  }

  40% {
    animation-timing-function: ease-in;
    transform: translateY(-12px);
  }

  50% {
    animation-timing-function: ease-in;
    transform: translateY(-15px);
  }

  60% {
    animation-timing-function: ease-in;
    transform: translateY(-12px);
  }

  70% {
    animation-timing-function: ease-in;
    transform: translateY(-9px);
  }

  80% {
    animation-timing-function: ease-in;
    transform: translateY(-6px);
  }

  90% {
    animation-timing-function: ease-in;
    transform: translateY(-3px);
  }

  100% {
    animation-timing-function: ease-in;
    transform: translateY(0px);
  }
} */

/* @media only screen and (min-width: 768px) {
  #about-feature-2, #about-feature-3 { margin-top: -300px; }
} */

#home-expertise .card-body { z-index: 2; cursor: pointer; }

.home-expertise-title {
  max-width: 550px;
  margin: 0 auto;
}

.home-expertise-content {
  margin-bottom: 4.5rem !important;
}

hr {
  background-color: var(--bg-accent);
  opacity: unset;
  height: 2px;
}
.hr-gray {
  background-color: #a3a3a3;
}
.hr-title {
  height: 3px !important;
  margin-top: 25px;
}

.contact-background { 
  height: 550px;
  background: url('../img/Contact_bg.png') !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-size: 1960px !important;
}
@media (min-width: 1800px) {
  .contact-background {
    height: 600px;
    /* background-position-y: -20px !important; */
  }
  #contact-hero { 
    height: 450px !important; 
  }
}
@media (min-width: 1200px) {
  .contact-features-text {
    padding-top: 15px;
  }
}

#contact { padding-top: 150px; padding-bottom: 80px; }
.contact-title-block {
  padding: 0px;;
}
#contact-hero { height: 350px; }
#contact-message { margin-top: 8px; height: 135px; }
#contact input, #contact textarea, #contact button { border-color: #b08a17!important; }
#contact textarea { height: 200px; }
.contact-text { padding-left: 3rem !important; padding-right: 3rem !important; }
.contact-inputs { padding-left: 3rem !important; padding-right: 3rem !important; }
.contact-inputs-left { padding-right: 0 !important; }
.contact-features-text {
  max-width: 375px;
}
@media (min-width: 768px) {
  .contact-address-text-block {
    padding-left: 0px !important;
  }
  .contacts-middle-card {
    padding-left: 0px !important;
  }
  .contacts-middle-block {
    padding-left: 0px !important;
  }
}
@media only screen and (min-width: 768px) {
  .contact-text { padding-left: 0 !important; padding-right: 3rem !important; }
  .contact-inputs { padding-left: 3rem !important; padding-right: 0 !important; }
  .contact-inputs-left { padding-right: 3rem !important; }
}

@media (max-width: 1700px) {
  .contact-background {
    background-position-x: -130px !important;  
  }
}

@media (max-width: 1500px) {
  .contact-background {
    background-position-x: -270px !important;  
  }
}

@media (max-width: 1300px) {
  .contact-background {
    background-position-x: -300px !important;  
  }
}

@media (max-width: 1100px) {
  .contact-background {
    background-position-x: -400px !important;  
  }
}

@media (max-width: 900px) {
  .contact-background {
    background-position-x: -440px !important;  
  }
}

@media (max-width: 500px) {
  .contact-background {
    background-position-x: -570px !important;  
  }
}

/** common hero **/
#hero-placeholder { transition: 1s; }
@media only screen and (max-width: 768px) {
  /* sm */
  #hero-placeholder {
    width:75vw;
    height:85vw;
    max-width:350px;
    max-height:350px;
    margin-top:0;
    margin-left:20px;
  }
  #individuals-hero-text, #institutions-hero-text { height: 100%; padding-bottom: 1em; }
  #individuals-hero-text p, #institutions-hero-text p { font-size: 0.9rem !important; }
}
@media (min-width:768px){
  /* md+ */
  #hero-placeholder {
    width:100%;
    height:100%;
    max-width:500px;
    max-height:550px;
    margin-top:0;
    margin-left:20px;
  }
  #individuals-hero-arrow, #institutions-hero-arrow { margin-top: 30px; }
}

/** home **/

/** about **/

/** individuals/institutions **/
#individuals-hero, #institutions-hero { height: 450px; }
#individuals-lottie svg, #institutions-lottie svg { opacity: 0; transition: 1s; }
@media only screen and (max-width: 768px) {
  /* sm */
  #individuals-hero, #institutions-hero { height: auto; border-bottom-left-radius: 75px !important; padding-bottom: 1.5rem; }
  #individuals-hero .row, #institutions-hero .row { padding-left: 1.5rem; padding-right: 1.5rem; }
  #individuals-lottie, #institutions-lottie {
    width:85vw;
    height:85vw;
    max-width:350px;
    max-height:350px;
    margin-top:-75px;
    margin-left: auto;
    margin-right: auto;
  }
  #individuals-hero-text, #institutions-hero-text { height: 100%; padding-bottom: 1em;}
}
@media (min-width:768px){
  /* md+ */
  #individuals-hero, #institutions-hero { border-bottom-left-radius: 150px !important; padding-bottom: 3rem; }
  #individuals-hero-image, #institutions-hero-image { height: 100%; }
  #individuals-hero-text, #institutions-hero-text { height: 100%; }
  #individuals-hero-text h1, #institutions-hero-text h1 { max-width:450px; }
  #individuals-hero-text p, #institutions-hero-text p { max-width:435px; }
  #individuals-lottie, #institutions-lottie {
    width: 50vw;
    height:50vw;
    max-width:550px;
    max-height:550px;
    margin-top:-100px;
    float: right;
  }
  #individuals-hero-arrow, #institutions-hero-arrow { margin-top: 50px; }
}
#individuals-features .card::after, #institutions-features .card::after {
  background: radial-gradient(circle at bottom right, #dedede, #efeff0);
  content: '';
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: absolute;
  margin-left: -24px;
  margin-top: -24px;
  opacity: 0.4;
  border-top-left-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
}
#individuals-features h5.card-title,
#institutions-features h5.card-title {
  font-size: 1.5rem;
}

/** services **/
#services-hero { height: 450px; }
@media (min-width: 1200px) {
  .service-paragraph {
    width: 75%
  }
}
@media only screen and (max-width: 768px) {
  /* sm */
  #services-hero { height: auto; border-bottom-left-radius: 75px !important; padding-bottom: 1.5rem; }
  #services-hero .row { padding-left: 1.5rem; padding-right: 1.5rem; }
  #services-lottie {
    width: 85vw;
    height:85vw;
    max-width:350px;
    max-height:350px;
    margin-top:-75px;
    margin-left: auto;
    margin-right: auto;
  }
  #services-hero-text { height: 100%; padding-bottom: 1em;}
  #services-hero .row {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
@media (min-width:768px){
  /* md+ */
  #services-hero { border-bottom-left-radius: 150px !important; padding-bottom: 3rem; }
  #services-hero-image { height: 100%; }
  #services-hero-text { height: 100%; padding-top: 130px; }
  #services-hero-text h1 { max-width:500px; }
  #services-hero-text p { max-width:420px; }
  #services-lottie {
    width: 50vw;
    height:50vw;
    max-width:550px;
    max-height:550px;
    margin-top:-70px;
    float: right;
  }
  #services-hero-arrow { margin-top: 125px}
}

/** footer **/
#footer-gradient::before {
  display: block;
  background-image: linear-gradient(to bottom, transparent, transparent, #000000);
  position: relative;
  margin-top: -100px;
  height: 100px;
  content: '';
}
#footer-menu { position: sticky; z-index: 2; margin-top: -50px; }

#footer-image, #footer-image-anim {
  height:350px;
  background-image:url('../img/footer.png');
  background-position: center 0vh;
  background-size:cover;
}
#footer-image-anim {
  margin-top: -350px;
  background-image:url('../img/footer.gif');
  z-index: 2;
}
@media (min-width:768px){
  #footer-image, #footer-image-anim { background-position: center -5vh; }
}
@media (min-width:1400px){
  #footer-image, #footer-image-anim { background-position: center -10vh; }
}

.footer-brand {
  font-family: RadioGrotesque;
  font-size: xx-large !important;
}

@media only screen and (max-width: 768px) {
  .features .row {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}