* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  html {
      scroll-behavior: smooth;
  }

  body,
  html {
      font-size: 20px;
  }

  @media (prefers-reduced-motion: reduce) {
      html {
          scroll-behavior: auto;
      }

      * {
          animation-duration: 0.001ms !important;
          transition-duration: 0.001ms !important;
      }
  }

  :root {
      --primary: #111416;
      --secondary: #233647;
      --accent: #111315;
      --white: #fff;
      --black: #000000;
      --primary-bg: #131517;
      --light-bg: #F3F3F3;
      --line: #828384;
      --body: "Inter", sans-serif;
    --transition-duration-fast: .2s;
        --transition-duration: .4s;
        --transition-duration-slow: .6s;
        --transition-duration-slower: .8s;
        --transition-duration-slowest: 1s;
        --ease-power2-out: cubic-bezier(.215, .61, .355, 1);
        --ease-power3-out: cubic-bezier(.165, .84, .44, 1);
        --ease-power4-out: cubic-bezier(.23, 1, .32, 1);
        --ease-expo-out: cubic-bezier(.19, 1, .22, 1);

  }

  body {
      font-family: "Inter", sans-serif;
      overflow-x: clip;
  }

  a {
      color: inherit;
      text-decoration: none;
  }

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

  p {
      font-family: "Inter", sans-serif;
      font-style: normal;
      font-weight: 200;
      font-size: 1rem;
      line-height: 1.5em;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  span,
  ul li,
  input,
  textarea,
  button {
      font-family: "Inter", sans-serif;
  }

  a {
      font-family: "Inter", sans-serif;
      font-style: normal;
      text-decoration: none;
      cursor: pointer;
  }

  .contain,
  .container {
      width: calc(100% - 2rem);
      max-width: 1230px;
      margin: 0 auto;
  }

  .wide {
      width: calc(100% - 2rem);
      max-width: 1920px;
      margin: 0 auto;
  }

  /***** FORM *****/
  form input,
  form textarea {
      border-radius: 0;
      appearance: none;
      -webkit-appearance: none;
  }

  form input:focus,
  form textarea:focus,
  form button:focus,
  form select:focus {
      outline: none;
  }

  form input:-webkit-autofill,
  form input:-webkit-autofill:hover,
  form input:-webkit-autofill:focus,
  form textarea:-webkit-autofill,
  form textarea:-webkit-autofill:hover,
  form textarea:-webkit-autofill:focus {
      -webkit-text-fill-color: #fff;
      transition: background-color 5000s ease-in-out 0s;
  }

  .global-btn {
      padding: 16px 20px;
      text-transform: uppercase;
      border: 0px;
      border-radius: 5px;
      font-size: 16px;
      font-weight: 500;
      line-height: 130%;
      letter-spacing: 10%;
      cursor: pointer;
  }

  @keyframes fadeUp {
      from {
          opacity: 0;
          transform: translateY(40px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }
.anim-text {
    --ease: var(--ease-expo-out);
    --anim-duration: var(--transition-duration-slowest);
    --anim-delay: 0s;
    --anim-stagger: .1s;
}

.anim-fade {
    --ease: var(--ease-power2-out);
    --anim-duration: var(--transition-duration-slow);
    --anim-delay: .0s;
    opacity: 0;
}

.anim-fade.is-inview {
    opacity: 1;
    transition: opacity var(--anim-duration) var(--anim-delay) var(--ease);
}

.anim-up-scale {
    --ease: var(--ease-expo-out);
    --anim-duration: var(--transition-duration-slower);
    --anim-delay: 0s;
    --anim-scale: .9;
    opacity: 0;
    transform: translate3d(0, 20%, 0) scale(var(--anim-scale));
}

.anim-up-scale.is-inview {
    opacity: 1;
    transition: transform var(--anim-duration) var(--anim-delay) var(--ease), opacity var(--anim-duration) var(--anim-delay) var(--ease);
    transform: translate(0) scale(1);
}

/* .anim-text .anim-text-item {
    margin-bottom: -1.5rem;
    padding-bottom: 1.5rem;
    transform: translateY(110%);
} */

.anim-text.is-inview .anim-text-item {
    transition: transform var(--anim-duration) var(--ease);
    transition-delay: calc(var(--anime-delay, 0s) + (var(--index, 0) * var(--anim-stagger, .1s)));
    transform: translate(0);
}

.anim-up {
    --ease: var(--ease-expo-out);
    --anim-duration: var(--transition-duration-slower);
    --anim-delay: 0s;
    opacity: 0;
    transform: translateY(20%);
}

.anim-up.is-inview {
    opacity: 1;
    transition: transform var(--anim-duration) var(--anim-delay) var(--ease), opacity var(--anim-duration) var(--anim-delay) var(--ease);
    transform: translate(0);
}
.right .anim-fade{
    --anim-delay: .2s;
}
.right .anim-fade.is-inview p{
--anim-delay: .2s;
}
.right .anim-fade.is-inview ul li:first-child {
    --anim-delay: .2s;
}
.right .anim-fade.is-inview ul li:last-child {
    --anim-delay: .3s;
}
.s4 .anim-text.is-inview {
    --anim-delay: .1s;
}
.s4 .right.anim-fade.is-inview{
    --anim-delay: .2s;
}
.s4 .s4-bottom .card1 p.is-inview{
    --anim-delay: .2s;
}
.s4 .s4-bottom .card2 p.is-inview {
    --anim-delay: .3s;
}
.s4 .s4-bottom .card3 p.is-inview {
    --anim-delay: .4s;
}
.s6 .anim-fade.is-inview{--anim-delay: .4s;}
.s6 .anim-up-scale.is-inview{
    --anim-delay: .6s;
}
.s5-bottom .item1.anim-fade.is-inview{
    --anim-delay: .2s;
}
.s5-bottom .item2.anim-fade.is-inview {
    --anim-delay: .4s;
}
.s5-bottom .item3.anim-fade.is-inview {
    --anim-delay: .6s;
}
  /***** HEADER *****/

  header {
      width: 100%;
      position: fixed;
      background: transparent;
      transition: background-color 0.3s ease;
      z-index: 101;
      height: 100px;
      /* Mobile */
  }

  header .container {
      display: -webkit-flexbox;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 0rem 0;
      position: relative;
      gap: 2rem;
      height: 100px;
      max-width: 1280px;
  }

  header .logo {
      display: flex;
      align-items: center;
      position: relative;
      z-index: 10;
      transition: width 0.3s ease;
  }

  header nav .wrapper {
      text-align: right;
  }

  header nav ul {
      height: 100%;
      list-style: none;
      display: -webkit-flexbox;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end;
      gap: 30px;
  }

  header nav ul li a {
      font-weight: 400;
      font-size: .9rem;
      line-height: 150%;
      color: #fff;
      cursor: pointer;
      position: relative;
      transition: color .25s ease;
  }

  header nav ul li a::after {
      content: "";
      position: absolute;
      left: 0px;
      right: 0px;
      bottom: -12px;
      height: 3px;
      background: var(--line);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  }

  header nav ul li a:hover,
  header.scroll:not(.active) nav ul li a:hover {
      color: var(--line);
  }

  header nav ul li a:hover::after {
      transform: scaleX(1);
  }

  header nav ul li a.active {
      color: var(--white);
  }

  header nav ul li a.active::after {
      transform: scaleX(1);
  }

  .nav-scrim {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .4);
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;

  }





  header nav ul li a:hover {
      /* color: var(--accent-color); */

  }



  header .menu_container {
      display: none;
      position: absolute;
      top: 52%;
      transform: translateY(-50%);
      right: 0;
      height: 20px;
  }

  header .menu_container #menu_btn {
      background: none;
      border: none;
      outline: none;
      cursor: pointer;
      color: #fff;
      width: 44px;
      height: 20px;
  }

  header .menu_container #menu_btn i {
      transition-delay: 0.6s;
      transition: all 0.2s ease-out;
      height: 1px;
      width: 44px;
      background-color: #fff;
      position: absolute;
      border-radius: 2px;
      left: 0;
  }

  header .menu_container #menu_btn i:nth-child(1) {
      top: 0;
  }

  header .menu_container #menu_btn i:nth-child(2) {
      top: 10px;
  }

  header .menu_container #menu_btn i:nth-child(3) {
      top: 20px;
  }

  header.scroll:not(.active) {
      background: #fff;
  }

  header.scroll .logo path {
    fill: #231f20;
  }

  header.scroll .logo path:nth-last-child(-n+6) {
    fill: #208752;
  }


  header.scroll:not(.active) .menu_container #menu_btn i {
      background-color: var(--black);
  }

  header.scroll:not(.active) .container {
      padding: 0;
  }

  header.scroll .logo,
  header.active .logo {
      align-items: center;
  }

  header.scroll .logo .logo-trackrecord path,
  header.scroll:not(.active) .logo .logo-trackrecord path {
      fill: var(--primary-bg);
  }

  header.scroll .logo .logo-assets path,
  header.scroll:not(.active) .logo .logo-assets path {
      fill: var(--line);
  }

  svg .logo-trackrecord path,
  svg .logo-assets path {
      transition: fill 0.3s ease;
  }

  header.scroll:not(.active) nav ul li a {
      color: var(--accent);
  }

  /* header.scroll:not(.active) nav ul li a:hover,
  header.scroll:not(.active) nav ul .selNav a {
      color: var(--accent);
  } */

  header.scroll:not(.active) nav .top-nav .login a::before {
      background-color: #1a2436;
  }

  header.scroll .logo {
      /* width: 170px; */
  }

  header.scroll .container {
      padding: 0;
  }

  header.scroll,
  header.active {
      background-color: #fff;
  }

  /****** HEADER ACTIVE ******/
  header.active .logo svg path {
      fill: var(--primary) !important;
  }



  header.active nav ul {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: 1rem;
  }

  header.active nav ul li a {
      display: inline-block;
      text-align: center;
      font-size: .9rem;
      line-height: 150%;
      color: var(--white);
      margin-left: 0;
      opacity: 1;
      visibility: visible;
      transform: translateX(0%);
      position: relative;
      padding: 10px 0;
      transition: opacity 0.3s ease, transform 0.3s ease;
  }

  header.active nav ul li a::after {
      bottom: -5px;
  }

  header.active nav ul li a:hover,
  header.active nav ul .selNav a {
      font-weight: 200;
      color: var(--secondary);
  }

  header.active nav ul .portal a {
      padding-right: 26px;
  }

  header.active nav .top-nav {
      display: none;
  }

  header.active nav .mobile {
      display: block;
  }

  header.active nav .mobile .top-nav {
      display: block;
      margin-bottom: 0;
  }

  header.active nav .mobile .login a {
      margin-left: 0;
      padding-left: 0;
      margin-top: 10px;
  }

  header.active nav .mobile .login a::before {
      display: none;
  }

  header.active #menu_btn i {
      top: 5px;
      background-color: var(--white);

  }

  header #menu_btn i {
      background-color: black;
  }

  header.active #menu_btn i:nth-child(1) {
      transform: rotate(45deg);
      width: 40px;
      top: 5px;
  }

  header.active #menu_btn i:nth-child(3) {
      transform: rotate(-45deg);
      width: 40px;
      top: 5px;
  }

  header.active #menu_btn i:nth-child(2) {
      display: none;
  }

  /* Hero section  */
  .h1 {
      font-size: 82px;
      font-weight: 400;
      line-height: 100%;
      letter-spacing: -3%;
      color: var(--white);
  }

  h1 div,.hero h1 {
      font-size: 82px;
      font-weight: 200;
      line-height: 100%;
      letter-spacing: -3%;
      color: var(--white);
      display: inline-block;
  }

  .hero {
      height: 100vh;
      min-height: 900px;
      width: 100%;
      overflow: hidden;
      display: -webkit-flexbox;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: flex-end;
      position: relative;
  }

  .s1 .container {
      padding-bottom: 4rem;
  }

  .hero-inner {
      align-self: flex-end;
  }

  .hero h1 {
      /* animation: fadeUp 0.8s ease forwards;
      animation-delay: 0s; */
  }

  .hero p {
      margin-top: 50px;
      max-width: 848px;
      color: var(--white);
      animation: fadeUp 0.8s ease forwards;
      animation-delay: .2s;
  }

  p,
  .p-txt,
  .disclaimer h5,
  .disclaimer li {

      font-weight: 400;
      font-size: 28px;
      line-height: 130%;
      letter-spacing: 0%;

  }

  .small-txt,
  .person-info p,
  .disclaimer p {
      font-weight: 300;
      font-size: 18px;
      line-height: 150%;
      letter-spacing: 0%;
  }

  .py {
      padding-top: 150px;
      padding-bottom: 150px;
  }

  .s2 {
      background: var(--light-bg);
  }

  .s2-inner {
      display: flex;
      margin-left: auto;
      margin-right: auto;
      justify-content: space-between;
      gap: 25px;
  }

  .s2 .right {
      max-width: 812px;
  }

  .s2 ul {
      list-style: none;
      margin: 60px 0px 0px;
      padding: 0px;
      width: 100%;
  }

  .s2 li {
      border-top: 1px solid var(--line);
      padding-top: 30px;
      font-weight: 300;
      font-size: 18px;
      line-height: 150%;
      letter-spacing: 0%;
      color: var(--secondary);
  }

  .s2 li:not(:last-child) {
      padding-bottom: 30px;
  }

  .h2,
  h2 {
      font-weight: 300;
      font-size: 54px;
      line-height: 110.00000000000001%;
      letter-spacing: 0%;

  }

  .s2 p {
      color: var(--primary)
  }

  .s2 h2 {
      color: var(--secondary)
  }

  .s3 {
      background: var(--primary-bg);
  }

  .s3 h2 {
      width: 100%;
      text-align: center;
      color: var(--white)
  }

  .s3-grid {
      margin-top: 5.25rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 50px 30px;
  }

  .s3 .img-wrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 390 / 526;
      overflow: hidden;
  }

  .s3 .bioimg,
  .s3 .img-hover {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      background-size: cover;
  }

  .s3 .bioimg {
      z-index: 0;
      position: relative;
  }

  .s3 .img-hover {
      position: absolute;
      inset: 0;
      /* top:0; right:0; bottom:0; left:0 */
      z-index: 1;
      opacity: 0;
      transition: opacity 0.3s ease;
      object-fit: cover;
  }

  .s3 .team-member:hover .img-hover {
      opacity: 1;
  }

  .s3 h3 {
      margin-top: 30px;
      color: var(--white)
  }

  .s3 p {
      color: var(--light-bg);
      font-weight: 300;
      font-size: 18px;
      line-height: 150%;
      letter-spacing: 0%;
      margin-top: 15px;
  }

  .s4 {
      background: var(--black);
  }

  .s4-top {
      display: flex;
      justify-content: space-between;
      gap: 80px;
      min-height: 264px;
      border-bottom: 1px solid var(--white);
  }

  .s4-top .right {
      max-width: 575px;
  }

  .s4-top .left {
      max-width: 498px;
  }

  .s4 p {
      color: var(--white)
  }

  .s4 h2 {
      color: var(--white);
  }

  .s4-bottom {
      margin-top: 5.25rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 50px
  }

  .s4 .card:not(:last-child) {
      border-right: 1px solid var(--line);
  }

  .s5 {
      background: var(--white);
  }

  .s5-top {
      display: grid;
      grid-template-columns: 496px minmax(0, 1fr);
      align-items: flex-end;
      gap: 80px
  }

  .s5-top h2 {
      max-width: 550px;
  }

  .s5-top h2,
  .s5-top p {
      color: var(--primary-bg)
  }
  .s5-top p,.s4 p,.hero p{font-weight: 300;}
.hero-title h1 div{font-weight: 200;}
  .s5-bottom {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 50px;
      margin-top: 5.25rem;
  }

  .s5 .item {
     position: relative;
      padding-left: 30px;
  }
.s5 .progress-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 0%;
    /* animated by GSAP to 100% */
    background-color: var(--line);
    /* change to a fixed color if needed */
    transform-origin: top;
    z-index: 1;
}
  .s5 .num {
      color: var(--primary);
  }

  .s5 h4 {
      margin-top: 80px;
      color: var(--primary);
  }

  .s5-img {
      margin-top: 50px;
      margin-bottom: 50px;
  }
.s5-img,
.s5-img img {
    aspect-ratio: 347/200;
    width: 100%;
    object-fit: cover;
}
  .s5 .item p {
      color: var(--primary-bg)
  }

  .s6 {
      background: var(--light-bg);
  }

  .s6 h2 {
      max-width: 812px;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      color: var(--secondary)
  }

  .s6-btn {
      width: 100%;
      text-align: center;
      margin-top: 80px;
  }

  .s6-btn a {
      background-color: var(--primary);
      color: var(--white);
      transition: color .3s ease, background-color .3s ease;border:1px solid transparent
  }

  .s6-btn a:hover{
background-color: transparent;
    border: 1px solid var(--line);color:var(--accent);
}
  .s7 {
      background-color: var(--primary-bg);
  }

  .contact-section {
      max-width: 812px;
      margin-left: auto;
      margin-right: auto;
  }

  .s7 .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 30px;
      margin-bottom: 30px;
  }

  .s7 .field,
  .s7 .message-field {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: relative;
  }

  .s7 .field input {
      order: 1;
      width: 100%;
      background: none;
      border: none;
      outline: none;
      color: var(--white);
      font-family: var(--body);
      font-size: 20px;
      letter-spacing: 0rem;
      font-weight: 400;
      line-height: 130%;
      min-height: 52px;
      padding: 0px;
      border-bottom: 1px solid var(--line);
  }

  .s7 .field label,
  .s7 .message-field label {
      order: 0;
      position: absolute;
      top: 18px;
      left: 0;
      pointer-events: none;
      transition: transform .18s ease, font-size .18s ease, color .18s ease;
      transform-origin: left top;
      display: block;
      font-size: 20px;
      color: var(--white);
      letter-spacing: 0rem;
      font-weight: 400;
      line-height: 130%;
  }

  .message-field label {
      padding-left: 20px;
      padding-top: 0px;
  }

  .s7 label.is-active {
      transform: translateY(-25px) scale(.86);
  }

  .s7 .message-field label.is-active {
      transform: translateY(-50px) scale(.86);
      padding-left: 0px;
  }

  .s7 .field.focus-within,
  .s7 .field:focus-within {
      border-bottom-color: rgba(255, 255, 255, 0.32);
  }

  .field input.wpcf7-text:focus+br+label {
      top: 0;
      transform: translateY(-50%);
      font-size: 12px;
      color: #333;
  }

  .s7 .question-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 30px;
      margin: 45px 0px;
  }

  .s7 .question-row>span {
      font-size: 14px;
      color: var(--text);
  }

  .s7 .radio-group {
      display: flex;
      align-items: center;
      gap: 30px;
  }

  .s7 .radio-option {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      font-size: 13.5px;
      color: var(--text-dim);
  }

  .s7 .radio-option input[type="radio"] {
      appearance: none;
  }

  .wpcf7-list-item-label::before {
      width: 20px;
      height: 20px;
      border: 1px solid var(--line);
      border-radius: 50%;
      margin: 0;
      position: absolute;
      left: 0px;
      top: 0px;
      cursor: pointer;
      transition: border-color .2s ease;
      box-sizing: border-box;

  }

  .s7 input[type="radio"]:checked+.wpcf7-list-item-label::after {
      content: "";
      position: absolute;
      top: 10px;
      width: 13px;
      height: 13px;
      left: 10px;
      border-radius: 50%;
      background: var(--line);
      transform: translate(-50%, -50%);
  }

  .s7 .wpcf7-not-valid-tip {
      display: block;
      position: absolute;
      bottom: -30px;
      font-size: 14px;
      width: 400px;
  }

  .s7 .message-field .wpcf7-not-valid-tip {
      bottom: -35px;
  }

  .s7 .question-row span {
      position: relative;
      font-size: 18px;
      font-weight: 300;
      line-height: 150%;
  }

  .s7 .wpcf7-form-control {
      display: flex;
      gap: 30px
  }

  .s7 .wpcf7-list-item {
      margin: 0px
  }

  .s7 .wpcf7-list-item-label {
      padding-left: 28px;
  }

  .s7 .question-row span,
  .s7 .radio-option {
      color: var(--white)
  }

  .s7 .message-field textarea::placeholder {
      color: #fff;
      opacity: 0;
  }

  .s7 .message-field textarea {
      width: 100%;
      min-height: 200px;
      resize: none;
      background: #1A1D22;
      border: 0px solid var(--white);
      border-radius: 5px;
      color: var(--white);
      padding: 20px;
      outline: none;
      transition: border-color .2s ease;
  }
        .s7 .field-row.note{
  grid-template-columns: 1fr;margin-bottom: 45px;
        }
  .s7 .field-row.note p{
        position: relative;
            font-size: 18px;
            font-weight: 300;
            line-height: 150%;
            color:var(--white)
  }

  .s7 .submit-row {
      margin-top: 80px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 30px;
  }

  .s7 .btn-submit {
      padding: 15px 20px;
      background-color: var(--primary-bg);
      border: 1px solid var(--line);
      min-height: 52px;
      color: var(--white);
      transition: color .3s ease, background-color .3s ease;
  }

  .s7 .btn-submit:hover {
      color: var(--accent);
      background-color: #fff;
  }

  .s7 .wpcf7 form.invalid .wpcf7-response-output,
  .s7 .wpcf7 form.unaccepted .wpcf7-response-output,
  .s7 .wpcf7 form.payment-required .wpcf7-response-output {
      background: var(--white);
      border: 0px;
      padding: 12px 15px;
      margin: 0px;
      color: var(--secondary)
  }

  .s7 .wpcf7 form.sent .wpcf7-response-output {
      background-color: rgb(70, 180, 80);
      color: var(--white);
      font-size: 18px;
      font-weight: 300;
      line-height: 150%;
      padding: 10px 15px;
      margin: 0px;
  }



/*popup css*/ 
    .contact-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .contact-overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(3px);
        opacity: 0;
        visibility: hidden;
        transition: 0.4s ease;
    }

    .contact-modal.active {
        display: block;
    }

    .contact-modal {
        position: relative;
        width: 708px;
        max-width: 100%;
        background: #fff;
        padding: 140px 80px 100px 80px;
        max-height: 90vh;
        overflow-y: auto;
        display: none;
    }

    .close-contact {
        position: absolute;
        top: 38px;
        right: 38px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 1px solid #111315;
        background: transparent;
        cursor: pointer;
        transition: 0.35s ease;
    }

    .script-text {
        font-size: 65px;
        margin: 10px 0;
        line-height: 1.15;
        font-weight: 400;
        display: inline-block;
        letter-spacing: 1px;
        white-space: pre-wrap;
        fill: none;
        stroke: #fff;
        stroke-width: 2;
        stroke-dasharray: 2000;
        stroke-dashoffset: 2000;
        animation: drawText 6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .contact-desc {
        max-width: 440px;
        font-size: 18px;
        line-height: 150%;
        color: #111315;
        margin-bottom: 60px;
    }

    .radio-title {
        font-size: 16px;
        font-weight: 500;
        line-height: 130%;
        text-transform: uppercase;
        letter-spacing: 1.6px;
        color: #111315;
        margin-bottom: 30px;
    }

    .radio-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 15px;
        font-size: 18px;
        color: #111315;
        cursor: pointer;
    }

    .radio-wrap input {
        width: 18px;
        height: 18px;
        border: 1px solid #828384;
        accent-color: #828384;
    }

    .contact-btn.show {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .contact-btn:hover {
        background: #111315;
        color: #fff;
    }
    .contact-btn {
        color: #111315;
        text-decoration: none;
        text-transform: uppercase;
        margin: 15px 0;
        height: 52px;
        padding: 0 15px;
        border: 1px solid #828384;
        background: transparent;
        font-size: 16px;
        font-weight: 500;
        border-radius: 5px;
        letter-spacing: 1.6px;
        line-height: 130%;
        cursor: pointer;
        display: none;
        transition: 0.3s ease;
    }

   .contact-modal .note {
        font-weight: 300;
        font-size: 15px;
        line-height: 130%;
        letter-spacing: 0%;
        max-width: 443px;
    }

    .close-contact span:first-child {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .close-contact span:last-child {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .close-contact span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 60px;
        height: 1px;
        background: #111315;
        transition: 0.35s ease;
    }

    .close-contact:hover {
        background: #000;
        border-color: #000;
    }

    .close-contact:hover span {
      background: #fff;
      opacity: 0.7;
    }

    @media (max-height: 800px) and (max-width: 767px) {
        .contact-modal {
            padding: 90px 24px 45px !important;
        }
    }

    @media (max-height: 800px) {
        .contact-modal {
            padding: 90px 60px 50px;
        }
        
        .close-contact {
            top: 25px;
            right: 25px;
            width: 65px;
            height: 65px;
        }

        .contact-desc {
            font-size: 16px;
            margin-bottom: 35px;
        }

        .radio-title {
            margin-bottom: 22px;
        }
    }

    @media (max-width: 768px) {
        .contact-modal {
            width: calc(100% - 30px);
            padding: 110px 24px 45px;
            max-height: calc(100dvh - 30px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .radio-title {
          font-size: 12px;
          letter-spacing: 4px;
          line-height: 1.5;
        }

        .close-contact span {
          width: 24px;
        }

        .script-text {
          font-size: 36px;
          padding: 5px;
        }


        header .logo svg{
          width: 95px;
        }
    }

    @media (max-width: 480px) {
    .script-text {
        margin-bottom: 20px;
    }
}

/*popup css*/ 




/*book an appointment*/ 
  .page-id-180 .meetings-iframe-container {
      background: #fff;
          padding-top: 50px;
  }

  .page-id-180 .h1{
    display: block;
    font-size: 60px;
    margin-bottom: 40px;
  }



  @media (max-width: 991px){
    .page-id-180 .h1 {
    font-size: 45px;
    }


    .page-id-180 .disclaimer{
      padding-top: 145px;
    }
  }

  @media (max-width: 767px){
        .page-id-180 .h1 {
        font-size: 34px;
    }
  }
/*book an appointment*/ 




  footer {
      background-color: var(--black);
      padding: 100px 0px 50px
  }

  .footer-logo {
      width: 100%;
      text-align: center;
  }

  .footer-logo img {
      margin-left: auto;
      margin-right: auto;
  }

  .copyright {
      margin-top: 50px;
      display: flex;
      color: var(--white);
      align-items: center;
      gap: 20px;
      width: 100%;
      justify-content: center;
  }

  .footer-link {
      gap: 20px;
      display: flex;
  }

  .social {
      margin-top: 30px;
      display: flex;
      width: 100%;
      align-items: center;
      gap: 24px;
      justify-content: center;
  }

  .footer-link a {
      position: relative;
      padding-left: 20px;
      cursor: pointer;
  }

  .footer-link a::before {
      content: "";
      position: absolute;
      width: 1px;
      height: 100%;
      left: 0px;
      background-color: var(--white);
  }

  .member-bio {
      padding-top: 205px;
      background-color: var(--primary-bg);
      padding-bottom: 150px;
  }

  .member-wrap {
      display: flex;
      gap: 80px;align-items: flex-start;
  }

  .person-image {
    position: sticky;
        top: 120px;      
        width: 100%;
        max-width: 497px;
        align-self: flex-start;
  }

  .person-image .global-btn {
      border: 1px solid var(--line);
      color: var(--white);
      transition: color .3s ease, background-color .3s ease;display: inline-block;
  }

  .person-image .global-btn:hover {
      background-color: var(--white);
      color: var(--accent)
  }

  .person-info {
      max-width: 653px;
  }

  .person-image .img-wrap {
      margin-top: 88px;
  }

  .person-info h4 {
      font-weight: 300;
      font-size: 42px;
      line-height: 110%;
      letter-spacing: 0%;
      color: var(--white);
      margin-top: 80px;
      padding-bottom: 60px;
      border-bottom: 1px solid var(--white);
      margin-bottom: 80px;
  }

  .person-info p {
      color: var(--white);
      margin-bottom: 18px;
  }

  .disclaimer {
      padding-top: 205px;
      background-color: var(--primary-bg);
      padding-bottom: 150px;
  }

  .disclaimer h1 {
      margin-bottom: 80px;
  }

  .disclaimer p,
  .disclaimer h5 {
      color: var(--white);
  }

  .disclaimer h5 {
      color: var(--white);
  }

  .disclaimer li {
      margin-top: 60px;
      color: var(--white);
  }

  .terms-list {
      margin-top: 45px;
      display: flex;
      flex-direction: column;
      width: 100%;
  }

  .disclaimer li h5 {
      margin-bottom: 30px;
  }
  .disclaimer ol li:nth-child(n+10) {
      /* padding-left: 50px; */
      /* extra space for double-digit numbers */
  }
/* .page-id-140  .disclaimer p,.page-id-136 .disclaimer p{
        margin-bottom: 60px;
    }
.page-id-140 .disclaimer h1+p,.page-id-136 .disclaimer h1+p+p+p{
    margin-bottom: 105px;
}
.page-id-140 .d-wrap p:last-of-type,.page-id-136 .d-wrap p:last-of-type{
    margin-bottom: 0px;
} */

.error404,.error-404 {
    background: var(--primary-bg)
}

.error404 #container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0px;
   min-height: 860px;height: calc(100vh - 432px);
    max-width: 100%
}

.error-404 {
    position: relative
}
.error404 header.scroll:not(.active) nav ul li a {
    color: var(--white);
}
.error404 header:not(.active) .logo svg path {
    fill: var(--white) !important
}

/* .error404 header.scroll .logo {
    width: 190px
} */
.error404 .page-content{display: flex;flex-direction: column;gap:80px;align-items: center;}
.error404 .page-content h1 {   
    color: var(--white);
}

.error404 .page-content h5 {
    color: var(--white);
  font-size: 28px;font-weight: 500;line-height: 130%;       
}

.error404 .page-content {
    padding-top: 0px
}

.error404 header {
    background-color: transparent !important;
    position: relative
}

.error404 .global-btn {
    border: 1px solid var(--line);
        color: var(--white);
        transition: color .3s ease, background-color .3s ease;
        display: inline-block;
}

.error404 .global-btn:hover {
background-color: var(--white);
    color: var(--accent);
}

  @media screen and (max-width: 1366px) {
    .error404 #container{min-height: 660px;}
      .hero {
          min-height: 600px;
      }
  }

  @media screen and (max-width: 1280px) {
      .member-wrap {
          gap: 40px;
      }

      .terms-list {
          width: 100%;
          padding-left: 32px;
      }

  }

  @media screen and (max-width: 1100px) {
      .person-info {
          max-width: 600px;
      }
  }

  @media screen and (max-width: 1024px) {
    .s5-bottom{gap:30px}
      .person-info {
          max-width: 550px;
      }

      .s2-inner {
          flex-direction: column;
      }

      .s2 .right {
          max-width: 100%;
      }

      .s3-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 50px 30px;
      }

      .s4-top {
          padding-bottom: 5.25rem;
          min-height: 0px;
      }

      .s4-top .right {
          max-width: 50%;
      }

      .s4-top .left {
          max-width: 50%;
      }

      .s5-top {
          gap: 30px;
          grid-template-columns: repeat(2, 1fr);
      }

      .s5 h4 {
          font-size: 28px;
          min-height: 73px;
      }

      .copyright span {
          display: block;
          width: 100%;
          width: 100%;
          text-align: center;
      }

      .copyright {
          flex-direction: column;
      }

      footer {
          padding-top: 80px;
      }

      .footer-link {
          width: 100%;
          align-items: center;
          justify-content: center;
      }

      .footer-link a:first-child::before {
          content: none
      }

      .footer-link a:first-child {
          padding-left: 0px;
      }

      .py {
          padding-top: 120px;
          padding-bottom: 120px;
      }

      .disclaimer {
          padding-bottom: 120px;
      }
  }

  @media screen and (max-width: 991px) {
    .person-image{position: relative;top:0px}
      header nav .top-nav {
          width: 0;
          height: 0;
          opacity: 0;
          visibility: hidden;
      }

      header .menu_container {
          display: block;
      }

      header .logo {
          width: 150px
      }

      header .container {
          height: 85px;
      }

      header {
          height: 85px;
      }

      header nav .mobile {
          position: fixed;
          top: 0;
          right: 0;
          height: 100vh;
          width: 100%;
          background: var(--primary-bg);

          transform: translateX(100%);
          transition: transform .4s cubic-bezier(.4, 0, .2, 1);
          box-shadow: -8px 0 40px rgba(0, 0, 0, .35);
      }
header.active .logo .logo-trackrecord path,
header.scroll.active .logo .logo-trackrecord path,header.active .logo .logo-assets path,
header.scroll.active .logo .logo-assets path {
    fill: var(--white) !important;
}
      header nav .mobile ul {
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 6px;
          padding: 40px;
      }
          header.active nav ul li a{
            font-size: 2.1rem;font-weight: 200;line-height: 1.1;color:var(--white)
          }
                  header.active nav ul li a{
                    padding: 0px 0px 35px;
                  }
                                  header.active nav ul li a::after {
                                      bottom: 18px;
                                  }
      header nav .mobile.open {
          transform: translateX(0);
      }

      .nav-scrim.show {
          opacity: 1;
          pointer-events: auto;
      }

      header nav .mobile {
          display: block;
      }

      .member-wrap {
          gap: 40px;
          flex-direction: column;
      }

      .person-info {
          max-width: 100%;
      }

      .member-bio {
          padding-bottom: 120px;
      }

  }
@media (max-width: 926px) and (max-height: 550px) and (orientation: landscape) {
    h1 div,
        .hero h1 {
            font-size: 64px;
        }
        header.active nav ul li:not(:last-child) a {
                padding: 0px 0px 15px;
            }
                        header.active nav ul li a {
                            font-size: 24px;
                        }
                        header.active nav ul li a::after {
                            bottom: 8px;
                        }
                                header nav .mobile ul{justify-content: flex-end;}
}
  @media screen and (max-width: 768px) {

      .hero {
          min-height: 600px;
      }

      .py {
          padding-top: 80px;
          padding-bottom: 80px;

      }

      .s3-grid {
          grid-template-columns: 1fr;
          gap: 30px;
          margin-top: 80px;
      }

      .s4-top {
          flex-direction: column;
          padding-bottom: 50px;
      }

      .s4-bottom {
          grid-template-columns: 1fr;
          margin-top: 50px;gap: 25px;
      }

      .s4-top .left,
      .s4-top .right {
          max-width: 100%;
      }

      .s4 .card:not(:last-child) {
          border-right: 0px;
        border-bottom: 1px solid var(--line);
            padding-bottom: 25px;
      }

      .s5-top {
          grid-template-columns: 1fr;
      }

      .s5-bottom {
          margin-top: 50px;
          grid-template-columns: 1fr;
      }

      .s5-img,
      .s5-img img {
          aspect-ratio: 347/200;
          width: 100%;
          object-fit: cover;
      }

      .s5 .item {
          border-left: 0px;
          padding-left: 0px;
          padding-bottom: 30px;
          border-bottom: 1px solid var(--line);
      }

      .s5 .item:last-child {
          border-bottom: 0px;
      }

      .s5 h4 {
          margin-top: 50px;min-height: 0px;
      }

      .s7 .field-row {
          grid-template-columns: 1fr;
          margin-bottom: 0px;
          gap: 25px 30px;
          margin-bottom: 25px;
      }

      .member-bio {
          padding-bottom: 80px;
          padding-top: 150px;
      }

      .h2,
      h2,
      h1 div {
          font-size: 48px;
      }
          .s5-img{margin: 30px 0;}
                  .error404 .page-content {
                      gap: 50px;
                      text-align: center;
                  }
        .error404 #container{min-height: 600px;}

  }

  @media screen and (max-width: 480px) {

      .terms-list {
          margin-top: 20px;
      }

      .h2,
      h2,
      .h1 {
          font-size: 48px;
      }

      .hero {
          min-height: 500px;
      }

      .s1 .container {
          padding-bottom: 50px;
      }

      h1 div {
          font-size: 48px;
      }

      .hero p {
          font-size: 1.15rem;
      }

      .py {
          padding-top: 80px;
          padding-bottom: 80px;
      }

      .disclaimer {
          padding-bottom: 80px;
      }

      .h2 {
          font-size: 3rem;
      }

      .footer-link {
          gap: 15px;
      }

      .footer-link a {
          padding-left: 15px;
      }

      .footer-link a.small-txt {
          font-size: 12px;
      }

      .person-info h4 {
          margin-top: 60px;
          margin-bottom: 60px;
          font-size: 32px;
      }

  }