/* @import url('https://fonts.googleapis.com/css?family=Inter:400,600,500'); */

/* Relate CSS */

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
    color: inherit;
}

h2 {
    font-size: 64px;
    margin-top: 36px;
    margin-bottom: 12px;
}

h3 {
    font-size: 48px;
    margin-top: 32px;
    margin-bottom: 12px;
}

h4 {
    font-size: 36px;
    margin-top: 24px;
    margin-bottom: 8px;
}

h5 {
    font-size: 1.5em;
    margin-top: 24px;
    margin-bottom: -15px;
}

h6 {
    font-size: 1.2em;
    margin-top: 18px;
    margin-bottom: -20px;
}

h1 {
    font-size: 96px;
    margin-top: 40px;
    margin-bottom: 24px;
}

span {
    line-height: 160%;
}

header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
}

nav {
    display: flex;
    flex-direction: row;
    column-gap: 24px;
}

footer {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

p {
    line-height: 160%;
}

/* Custom Fonts */

.font-350 {
    font-family:'Twklausanne 350',sans-serif;
  }
  
.font-550 {
    font-family:'Twklausanne 550',sans-serif;
  }

.font-550-policy {
    font-family:'Twklausanne 550',sans-serif;
    line-height: 100%;
  }
  
  @font-face {
    font-family:'Twklausanne 350';
    src:url(./fonts/TWKLausanne-350.woff2)
    format('woff2'),url(./fonts/TWKLausanne-350.woff)
    format('ttf'),url(./fonts/TWKLausanne-350.ttf)
    format('truetype');
    font-weight:400;
    font-style:normal;
    font-display:swap
  }
  
  @font-face {
    font-family:'Twklausanne 550';
    src:url(./fonts/TWKLausanne-550.woff2)
    format('woff2'),url(./fonts/TWKLausanne-550.woff)
    format('ttf'),url(./fonts/TWKLausanne-550.ttf)
    format('truetype');
    font-weight:400;
    font-style:normal;
    font-display:swap
  }

/* Custom CSS */

body {
    font-family: 'Twklausanne 350', sans-serif;
    font-size: 16px;
    background-color: #faf9f6;
    color: #1c1c1c;
    font-weight: 400;
}

h1 {
    font-size: 4.5em;
    margin: 0em;
    line-height: 105%;
    font-weight: 500;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 2rem;
    margin: 0em;
    line-height: 130%;
    letter-spacing: -0.02em;
    font-weight: 400;
}

p {
    font-size: 1.2em;
    line-height: 132%;
    margin: 0px;
    letter-spacing: -2%;
}

u {
    text-decoration: none;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #1c1c1c;
    display: inline;
    font-weight: 700;
}

section {
    padding-top: 7.5em;
    padding-bottom: 7.5em;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

ul {    
    font-size: 1.2em;
    line-height: 132%;
    letter-spacing: -2%; 
    margin-top: -15px;
    margin-bottom: -15px;
}

li {
    margin-bottom: 10px;
}

.header {
    width: 100%;
    padding-right: 2.5em;
    padding-left: 2.5em;
    padding-top: 1em;
    padding-bottom: 1em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    right: 0%;
    left: 0%;
    position: fixed;
    z-index: 99;
    top: 0px;
    background-color: #faf9f6;
}

.header-menu-wp {
    display: flex;
    flex-direction: row;
    column-gap: 2.2em;
    font-weight: 500;
}

.menu-link:hover {
    color: #3d20eb;
}

.header-menu-wp:hover {
    color: #7c7c7c;
}

.hero {
    background-color: #faf9f6;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../images/hero-bg-curves.svg');
    background-position: 50% 60%;
    min-height: 100vh;
}

.wrapper {
    max-width: 87.5em;
    width: 100%;
    padding-right: 5em;
    padding-left: 5em;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.gap-content-wp {
    display: flex;
    flex-direction: column;
    row-gap: 2.5em;
    width: 58%;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    z-index: 2;
}

.gap-content-wp-policy {
    display: flex;
    flex-direction: column;
    row-gap: 2.5em;
    width: 68%;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    z-index: 2;
}

.where-content-wp {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

.where-content-card {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 5em;
    max-width: 33.33%;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 5em;
    padding-right: 2.5em;
    padding-bottom: 2.5em;
    padding-left: 2.5em;
}

.background-purple {
    background-color: #3d20eb;
    color: #faf9f6;
}

.background-grey {
    background-color: #e0dede;
}

.background-light-green {
    background-color: #daf4b9;
    position: relative;
}

.where-cta {
    padding: 1em;
    background-color: #1c1c1c;
    color: #faf9f6;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
    font-size: 1.25em;
    text-transform: uppercase;
    width: 100%;
    line-height: 120%;
}

.principles-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: 1.5rem;
}

.principles-content-wp {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4rem 4rem;
}

.box {
    flex: 0 0 auto;
    width: 50%;
}

.principles-card-wp {
    width: 62%;
    flex: 1;
    display: flex;
    flex-direction: column;
    row-gap: 4rem;
}

.about-us-wp {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6.5rem 7.5rem;
}

.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.cta {
    background-color: #1c1c1c;
    color: #faf9f6;
    background-image: url('../images/cta-background.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 60% 50%;
    position: relative;
}

.email-link {
    padding-top: 0.75rem;
    padding-right: 1.5rem;
    padding-bottom: 0.75rem;
    padding-left: 1.5rem;
    background-color: #faf9f6;
    color: #1c1c1c;
    border-radius: 2.1875rem;
    display: inline-block;
    flex-direction: row;
    font-size: 1em;
    text-align: center;
}

a.email:hover {
    color: #3d20eb;
}


.cta-wp {
    display: flex;
    flex-direction: column;
    row-gap: 10rem;
}

.cta-email-wp {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

.footer {
    padding: 1.2rem;
    background-color: black;
    color: #faf9f6;
    font-size: 0.8em;
    display: flex;
    flex-direction: row;
    column-gap: 24px;
    align-items: baseline;
    justify-content: space-between;
}

.footer-right {
    display: flex;
    flex-direction: row;
    column-gap: 24px;
    text-align: right;
}

.about--hero {
    background-color: #1c1c1c;
    background-position-x: 50%;
}

.font-color-cream {
    color: #faf9f6;
    background-color: #1c1c1c;
}

.background-dark-grey {
    background-color: #e5e5e5;
    color: #1c1c1c;
}

.about-card {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #1c1c1c;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5em 2em;
}

.about-card-content {
    width: 30em;
    font-size: 1.25em;
}

img {
    display: block;
    max-width: 100%;
}

.about-card-arrow {
    margin-left: auto;
}

.review-section {
    padding: 5em;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    row-gap: 1.5rem;
    color: #1c1c1c;
}

review-image {
    flex: 0 0 auto;
    width: 450px;
}

.review-image {
    flex: 1;
    max-width: 32rem;
    background-image: url('../images/review-section.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    min-height: 42rem;
    align-self: stretch;
}

.principle-card-wp-flex {
    display: flex;
    flex-direction: row;
    gap: 4rem 4rem;
    padding-top: 1rem;
}

.anchor {
    position: absolute;
    top: -7em;
}

.email-link:hover {
    background-color: #e0dede;
}

.container {
    max-width: 100vw;
}

.hero--is-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    align-self: center;
}

.arc-section {
    background-repeat: no-repeat;
    background-image: url('../images/arc-outter-cirlce.svg');
    background-position: -3rem 80%;
    position: relative;
}

.arc-image {
    position: absolute;
    top: 4em;
    right: 0em;
    z-index: 1;
    max-width: 40em;
}

.menu {
    width: 1rem;
    height: 1rem;
    padding: 12px;
    background-color: #faf9f6;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.is-reverse {
    align-items: center;
    justify-content: space-between;
}

.section-m {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.h1 {
    font-size: 4.3125em;
    line-height: 105%;
}

h3 {
    font-size: 2.5em;
    line-height: 120%;
    margin: 0rem;
    font-weight: 400;
}

.font-size-120 {
    font-size: 7.5em;
    line-height: 100%;
}

.where-section-wp {
    width: 100%;
    display: flex;
    flex-direction: row;
    max-width: 87.5em;
    margin-left: auto;
    margin-right: auto;
}

.where-cta:hover {
    color: #daf4b9;
}

.moblie-menu {
    width: 100vw;
    position: fixed;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    z-index: 99;
    background-color: #1c1c1c;
    color: #faf9f6;
    font-size: 4rem;
    padding: 2.5rem;
    flex-direction: column;
    letter-spacing: -0.02em;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 100vh;
    line-height: 105%;
    display: none;
    row-gap: 1rem;
}

.close-menu {
    background-image: url('../images/close-menu.svg');
    width: 1rem;
    height: 1rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.moblie-menu-logo-wp {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.5rem;
}

.link-ao7bd {
    flex-direction: row;
}

.moblie-menu-link:hover {
    color: #3d20eb;
}

.min-100vh {
    min-height: 100vh;
}

.hero-image {
    width: 50vw;
    right: 0px;
}

.menu-link {
    font-size: 1em;
}

.is-contact {
    top: -3.5em;
}

.div-mdqqg {
    min-height: 11.25em;
}

.is-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.menu-link {
    transition-property: color;
    transition-duration: 200ms;
    transition-timing-function: ease;
}

.header-menu-wp {
    transition-property: color;
    transition-duration: 250ms;
    transition-timing-function: ease;
}

.where-cta {
    transition-property: color;
    transition-duration: 250ms;
    transition-timing-function: ease;
}

.email-link {
    transition-property: background-color;
    transition-duration: 250ms;
    transition-timing-function: ease;
}

.where-content-wp { 
    background: linear-gradient(90deg, rgba(61,32,235,1) 0%, rgba(61,32,235,1) 50%, rgba(218,244,185,1) 50%, rgba(218,244,185,1) 100%);
}

.container {
    overflow: hidden;
}

.cta {
    background-size: 40rem;
}

.hero {
    background-size: 90%;
}

#hero-heading {
    white-space: nowrap;
}

#show-onhover {
    display: none;
}


/* //////// UPDATES 2025-0414 //////// */

.imprint-small {
    font-size: 0.8em;
    line-height: 120%;
    margin-top: 10px;
    letter-spacing: -2%;
}

.gap-content-wp-imprint {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 68%;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    margin-top: 40px;
}

@media (min-width:768px) and (max-width:1044px) {
    .gap-content-wp-imprint div {
    margin-top: 60px;
    }
}

@media (max-width: 768px) {
    .gap-content-wp-imprint {
    width: 100%;
    margin-top: 40px;
    }
}

@media (max-width: 649px) {
    .gap-content-wp-imprint div {
    margin-top: 60px;
    }
}
    
/* ////////////////////////////////// */





@media screen and (min-width: 1920px) {
  
    .cta {
      background-position: 50% 50%;
  }

  .hero {
      background-position: 50% 82%;
  }
  
}

@media screen and (min-width: 1440px) {

  .hero {
      background-position: 50% 82%;
     }
}

@media (max-width: 1160px) {
    
    #hero-heading {
    font-size: 4rem;
    white-space: normal;
    }
    
    .cta {
    background-size: 90%;
    }

    .hero {
    background-size: 220%;
    }
}

@media screen and (min-width: 1400px) {
        .wrapper {
          font-size: 16px;
          width: 1370px;
        }
    }

@media screen and (min-width: 1600px) {
     .wrapper {
        font-size: 16px;
        width: 1570px;
     }
    }

@media screen and (min-width: 2000px) {
     .wrapper {
       font-size: 32px;
       width: 2500px;
       
  }
  
    .where-section-wp {
      font-size: 32px;
      width: 2500px;
      padding-left: 2.5em;
      padding-right: 2.5em;
  }
  
    .menu-link {
      font-size: 1.8rem;
  }
  
   .arc-image {
      max-width: 100%;
  }
  
  #hand {
      width: 50vw;
  }
  
  #hero-img {
      width: 45vw;
  }
  
  #claroty {
      width: 40vw;
  }
  
  .cta {
    background-size: 50rem;
    background-position: 60% 50%;
    }

    #preference {
    width: 9vw;
    }
  
  .header {
      padding-top: 2rem;
      padding-bottom: 2rem;
  }
}

@media screen and (min-width: 2000px) {
     .wrapper {
       font-size: 24px;
       width: 2500px;
       
  }
  
    .where-section-wp {
      font-size: 24px;
      width: 2500px;
      padding-left: 2.5em;
      padding-right: 2.5em;
  }
  
    .menu-link {
      font-size: 1.8rem;
  }
  
   .arc-image {
      max-width: 100%;
  }
  
  #hand {
      width: 50vw;
  }
  
  #hero-img {
      width: 45vw;
  }
  
  #claroty {
      width: 40vw;
  }
  
  .cta {
    background-size: 50rem;
    background-position: 60% 50%;
}

#preference {
    width: 9vw;
}
  
  .header {
      padding-top: 2rem;
      padding-bottom: 2rem;
  }
  
}

@media (max-width: 768px) {
    .header-menu-wp {
        display: flex;
        flex-direction: column;
        position: absolute;
        right: 2.5rem;
        top: 4rem;
    }

    .menu {
        display: flex;
        flex-direction: row;
    }

    .hero--is-flex {
        flex-direction: column;
        text-align: center;
    }

    .wrapper {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
        flex-direction: column;
    }

    .background-light-green {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .gap-content-wp {
        width: 100%;
    }

    .gap-content-wp-policy {
        width: 100%;
    }
    
    .arc-image {
        width: 40%;
        top: -10rem;
    }

    .where-section-wp {
        flex-direction: column;
    }

    .where-content-card {
        max-width: none;
    }

    .principles-card-wp {
        width: 100%;
    }

    .principle-card-wp-flex {
        flex-direction: column;
    }

    section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .box {
        width: 100%;
    }

    .flex-row {
        flex-direction: column;
    }

    .h1 {
        font-size: 5rem;
    }

    .about-card-content {
        width: auto;
    }
}

@media (max-width:768px) {
    .font-size-120 {
        font-size: 5rem;
    }

    h1 {
        font-size: 5rem;
    }

    .cta-email-wp {
        align-self: flex-start;
    }

    .is-reverse {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: space-between;
        row-gap: 1.5rem;
        text-align: center;
    }

    .review-image {
        width: 100%;
        max-width: 100%;
        min-height: 32rem;
    }

    .about-card {
        flex-direction: column;
    }

    .is-center {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .review-section {
        padding: 2.5rem;
    }

    .div-mdqqg {
        height: auto;
        min-height: 10px;
    }

    .arc-image {
        position: static;
        flex: 1;
        width: auto;
        align-self: flex-end;
    }

    .arc-section {
        display: flex;
        flex-direction: column-reverse;
        row-gap: 2.5rem;
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .hero--is-flex {
        text-align: left;
    }

    .h1 {
        font-size: 4rem;
    }

    h3 {
        font-size: 2rem;
    }

    .about--hero {
        padding-top: 8rem;
        padding-bottom: 5rem;
    }

    .hero {
        padding-top: 8rem;
        padding-bottom: 5rem;
        background-position: 80% 90%;
    }

    .menu {
        background-color: rgba(0, 0, 0, 0);
        background-image: url('../images/menu.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }

    .header {
        padding-top: 1rem;
        padding-right: 1.5rem;
        padding-bottom: 1rem;
        padding-left: 1.5rem;
    }

    .moblie-menu {
        font-size: 3rem;
        padding-top: 1rem;
        padding-right: 1.5rem;
        padding-bottom: 1rem;
        padding-left: 1.5rem;
    }

    .header-menu-wp {
        display: none;
        flex-direction: row;
        position: static;
        top: 0rem;
        right: 0rem;
    }

    .close-menu {
        width: 1.3rem;
        height: 1.3rem;
    }

    .cta {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .is-white {
        background-image: url('../images/menu-bar.svg');
    }

    .where-content-card {
        padding-top: 4rem;
        padding-right: 1.5rem;
        padding-bottom: 4rem;
        padding-left: 1.5rem;
        row-gap: 2.5rem;
        column-gap: 2.5rem;
        min-height: auto;
        align-items: flex-start;
        justify-content: space-between;
    }

    .wrapper {
        row-gap: 0rem;
    }

    h2 {
        letter-spacing: -2px;
    }

    .close-menu:focus {
        color: #3d20eb;
    }

    .moblie-menu-link:focus {
        color: #3d20eb;
    }

    .principle-card-wp-flex {
        margin-top: 1.5rem;
    }

    .spacing {
        margin-top: 4rem;
    }

    .min-100vh {
        min-height: 90vh;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .hero-image {
        width: auto;
        max-width: 500px;
        margin-top: 2.5em;
    }
}

@media (max-width: 1440px) {
    section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}