@layer hubspot;

@layer reset {
  .hsfc-Form input, .hsfc-Form select, .hsfc-Form textarea, .hsfc-ErrorAlert, .hsfc-PhoneInput__FlagAndCaret {
    all: unset;
  }
}

@layer properties, theme, base;

@layer components {
  .hsfc-PhoneInput {
    position: relative;

    & > .hsfc-TextInput {
      padding-left: 80px;
    }
  }

  .hsfc-PhoneInput__FlagAndCaret {
    --it-control-border-color: transparent;
    cursor: pointer;
    border-radius: var(--it-control-border-radius) 0 0 var(--it-control-border-radius);
    align-items: center;
    width: 70px;
    padding-left: 12px;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    &:after {
      content: "";
      border-right: 1.5px solid var(--it-color-brand-green);
      width: 100%;
      height: calc(100% - 10px);
      margin: auto 0;
      display: block;
    }
  }

  .hsfc-PhoneInput__FlagAndCaret__Caret {
    border-left: 7px solid #0000;
    border-right: 7px solid #0000;
    border-top: 7px solid var(--it-color-brand-green);
    margin-left: 8px;
  }

  .hsfc-CheckboxInput {
    margin-right: .75rem;
  }

  .hsfc-PhoneInput, .hsfc-DropdownInput {
    &:has(.hsfc-DropdownOptions[style*="top:"]) > input {
      border-radius: var(--it-control-border-radius) var(--it-control-border-radius) 0 0;
    }

    & .hsfc-TextInput[aria-invalid="true"] ~ .hsfc-DropdownOptions {
      --dropdown-border-color: var(--it-color-status-error);
    }
  }

  .hsfc-DropdownInput > input[aria-expanded="true"]:focus, .hsfc-DropdownInput > input[aria-expanded="true"]:focus-visible {
    outline: none;
  }

  .hsfc-DropdownOptions {
    --dropdown-border-color: var(--it-control-border-color);
    border: 2px solid var(--dropdown-border-color);
    border-radius: 0 0 var(--it-control-border-radius) var(--it-control-border-radius);
    background: #fff;
    border-top: 0;
    max-height: 300px;
    padding: 24px;
    transform: translateY(-12px);
    box-shadow: 0 4px 5px #00000029;
  }

  .hsfc-DropdownOptions__Search {
    margin-bottom: 20px;
  }

  .hsfc-DropdownOptions__List {
    padding-left: 0;
  }

  .hsfc-DropdownOptions__List__ListItem {
    border-radius: var(--it-radius-medium);
    background: #fff;
    margin: 0;
    padding: 3px 0 3px 30px;
  }

  .dropdown-toggle {
    position: relative;

    &:before {
      content: "";
      position: absolute;
      inset: -10px;
    }

    &:hover, &:focus-visible, &:focus-within {
      & .dropdown-wrapper {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%) scale(1);
      }
    }
  }

  .dropdown-toggle-content {
    position: relative;
  }

  .dropdown-wrapper {
    transform-origin: top;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    background: #fff;
    border-radius: 6px;
    transition: opacity .2s ease-out, visibility .2s ease-out, transform .2s ease-out;
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translate(-50%, -8px) scale(0);
    box-shadow: 0 3px 6px #00000029;
  }

  .dropdown-content {
    flex-direction: column;
    row-gap: 4px;
    padding: 4px;
    list-style: none;
    display: flex;

    & > li {
      margin-bottom: 0;
    }
  }

  .dropdown-item {
    border-radius: 4px;
    padding: 2px 6px;
    display: block;

    &:hover, &:focus {
      background: var(--it-color-brand-orange);
      color: #fff;
    }
  }
}

@layer utilities;

@layer app {
  .hsfc-Row > div {
    margin-bottom: 1.5rem;
  }
}

:root {
  --it-header-height: 130px;
}

@media screen and (width <= 767px) {
  :root {
    --it-header-height: 95px;
  }
}




/* CSS variables */

@layer app {
  :root {
    --column-gap: 2.13%;
    --column-width-multiplier: 8.333;
    --header-height: 100px;
  }

  @media screen and (max-width: 1200px) {
    :root {
      --header-height: 125px;
    }
  }

  /* Mobile layout */
  .row-fluid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  
    .row-fluid .span1,
    .row-fluid .span2,
    .row-fluid .span3,
    .row-fluid .span4,
    .row-fluid .span5,
    .row-fluid .span6,
    .row-fluid .span7,
    .row-fluid .span8,
    .row-fluid .span9,
    .row-fluid .span10,
    .row-fluid .span11,
    .row-fluid .span12{
    min-height: 1px;
    width: 100%;
  }

  .body-container {
    padding-left: 0;
    padding-right: 0;
  }

  .content-wrapper--vertical-spacing,
  .dnd-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  /* Desktop layout */
  @media (min-width: 1100px) {
    .row-fluid {
      flex-wrap: nowrap;
      justify-content: space-between;
    }

    
      .row-fluid .span1 {
        width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span2 {
        width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span3 {
        width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span4 {
        width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span5 {
        width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span6 {
        width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span7 {
        width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span8 {
        width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span9 {
        width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span10 {
        width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span11 {
        width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
      }
    
  }
}

@media screen and (min-width: 768px) {
  .dnd_area-row-0-max-width-section-centering > .row-fluid {
    max-width: calc(720px - calc(var(--it-container-padding-x-mobile) * 2)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .dnd_area-row-1-max-width-section-centering > .row-fluid {
    max-width: calc(720px - calc(var(--it-container-padding-x-mobile) * 2)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media screen and (min-width: 992px) {
  .dnd_area-row-0-max-width-section-centering > .row-fluid {
    max-width: calc(960px - calc(var(--it-container-padding-x-mobile) * 2)) !important;
  }
  .dnd_area-row-1-max-width-section-centering > .row-fluid {
    max-width: calc(960px - calc(var(--it-container-padding-x-mobile) * 2)) !important;
  }
}

@media screen and (min-width: 1200px) {
  .dnd_area-row-0-max-width-section-centering > .row-fluid {
    max-width: calc(1120px - calc(var(--it-container-padding-x-mobile) * 2)) !important;
  }
  .dnd_area-row-1-max-width-section-centering > .row-fluid {
    max-width: calc(1120px - calc(var(--it-container-padding-x-mobile) * 2)) !important;
  }
}

@media screen and (min-width: 1400px) {
  .dnd_area-row-0-max-width-section-centering > .row-fluid {
    max-width: calc(1320px - calc(var(--it-container-padding-x-mobile) * 2)) !important;
  }
  .dnd_area-row-1-max-width-section-centering > .row-fluid {
    max-width: calc(1320px - calc(var(--it-container-padding-x-mobile) * 2)) !important;
  }
}



.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (width >= 1400px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section {
  position: relative;

  & > .row-fluid {
    max-width: calc(1320px - var(--it-gutter));
    margin-left: auto;
    margin-right: auto;
  }

  & .dnd-column {
    padding: 0;
  }
}

@media screen and (width <= 1399px) {
  .dnd-section > .row-fluid {
    max-width: calc(1120px - var(--it-gutter));
  }
}

@media screen and (width <= 1199px) {
  .dnd-section > .row-fluid {
    max-width: calc(960px - var(--it-gutter));
  }
}

@media screen and (width <= 991px) {
  .dnd-section > .row-fluid {
    max-width: calc(720px - var(--it-gutter));
  }

  .dnd-section .dnd-column {
    padding: 0;
  }
}

@media screen and (width <= 767px) {
  .dnd-section[class*="-background-color"], .dnd-section[class*="-background-gradient"], .dnd-section[class*="force-full-width-section"] {
    margin-left: calc(var(--it-container-padding-x-mobile) * -1);
    margin-right: calc(var(--it-container-padding-x-mobile) * -1);
    padding-left: var(--it-container-padding-x-mobile);
    padding-right: var(--it-container-padding-x-mobile);
  }
}

#footer {
  color: #fff;
  background-color: #2b453f;
  padding: 55px 0 40px;
  position: relative;

  & .footer-investerra-icon {
    width: 55px;
    position: absolute;
    bottom: 40px;
    right: 40px;
  }

  & .inner-footer {
    flex-direction: column;
    justify-content: space-between;
    display: flex;
  }

  & .footer-claim {
    margin-top: 50px;

    & p {
      margin: 0;
      font-size: 2.5rem;
      line-height: 1.25;
    }
  }

  & .menu-footer {
    flex-direction: column;
    row-gap: 15px;
    display: flex;

    & .menu-link {
      transition: var(--it-text-transition);
      font-size: 1.0625rem;

      &:hover {
        transform: translateX(var(--it-text-transform-x));
      }
    }
  }

  & .footer-ctas .btn {
    --base-color: var(--it-color-brand-orange);
  }

  & .mobile-divider {
    display: none;
  }

  & .footer-legal-row {
    margin-top: 50px;
    font-size: 12px;
  }

  & .footer-social-links {
    gap: 12px;
    margin-bottom: 1rem;

    & a {
      color: var(--it-color-brand-orange);
      font-size: 2rem;

      &:hover > svg > path {
        &:first-child {
          fill: var(--it-color-brand-orange);
        }

        &:last-child {
          fill: #fff;
        }
      }

      & > svg > path {
        transition: fill .175s ease-out;
      }
    }
  }

  & .footer-legal-text {
    opacity: .5;
  }

  & .footer-legal-menu {
    & .menu-footer {
      flex-direction: row;
      justify-content: flex-end;
      column-gap: 14px;
    }

    & .menu-link {
      color: #fff;
      opacity: .5;
      border-bottom: 1px solid #0000;
      font-size: 12px;
      transition: color .3s ease-in-out, border-color .3s ease-in-out, opacity .3s ease-in-out;

      &:hover {
        color: var(--it-color-brand-orange);
        opacity: 1;
        border-color: currentColor;
        transform: none;
      }
    }
  }
}

@media screen and (width <= 991px) {
  #footer {
    & .footer-logo {
      margin-bottom: 40px;
    }
  }
}

@media screen and (width <= 767px) {
  #footer {
    & .menu-footer {
      justify-content: space-between;
    }

    & .footer-legal {
      text-align: right;
      order: 1;
    }

    & .footer-legal-menu {
      & .menu-footer {
        flex-direction: column;
        row-gap: 10px;
      }
    }

    & .footer-social-links {
      justify-content: flex-end;
    }

    & .mobile-divider {
      background-color: #fff;
      height: 1px;
      margin-top: 36px;
      margin-bottom: 36px;
      display: block;
    }
  }
}

#header {
  height: var(--it-header-height);
  z-index: 10;
  width: 100%;
  padding: 24px 0;
  position: relative;

  & .header__skip {
    float: left;
    height: 0;
    margin: 0;
    padding: 0;
    display: inline-block;
    overflow: hidden;
  }

  & .inner-header {
    width: 100%;
    height: 100%;
    position: relative;
  }

  & .header-container {
    justify-content: space-between;
    align-items: center;
    height: 100%;
    display: flex;
  }

  & .header-logo {
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  & .header-right, & .header-navigation-view {
    flex-direction: column;
    align-items: flex-end;
    display: flex;
  }

  & .header-right__top {
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 20px;
    display: flex;
  }

  & .header-login {
    align-items: center;
    display: flex;

    & .button-wrapper {
      margin-bottom: 0;
      display: flex;
    }
  }
}

@media (width <= 992px) {
  #header {
    display: inline-flex;

    & .header-navigation-view {
      padding: 0 var(--it-container-padding-x-mobile);
      -webkit-overflow-scrolling: touch;
      visibility: hidden;
      z-index: 100;
      background: #fff;
      flex-direction: column-reverse;
      justify-content: flex-end;
      align-items: flex-start;
      transition: visibility .225s ease-out, transform .225s ease-out;
      position: fixed;
      inset: 0;
      overflow: hidden auto;
      transform: translateX(100%);

      &.open {
        visibility: inherit;
        transform: translateX(0);
      }
    }

    & .navigation-wrapper {
      width: 100%;
    }

    & .header-right__top {
      flex-direction: column;
      align-items: flex-start;
    }
  }
}

.icon-card {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  max-width: 576px;
  min-height: 100%;
  margin-bottom: 25px;
  margin-left: auto;
  margin-right: auto;
  padding: 15px;
  display: flex;
}

.icon-card .icon-card-icon {
  margin-bottom: 30px;
  padding: 0;
}

.icon-card .icon-card-icon span {
  font-size: 100px;
}

.icon-card .icon-card-text .button-wrapper {
  margin-top: 40px;
}

@media screen and (width <= 768px) {
  .icon-card .icon-card-text .button-wrapper {
    margin-top: 20px;
  }
}

.icon-card .icon-card-text {
  max-width: 360px;
}

.icon-card .icon-card-text p {
  margin-bottom: 0;
}

.icon-card .icon-card-text h3 {
  margin-bottom: 5px;
}

.icon-card .row {
  justify-content: center;
}