.navigation-container {
  width: 101%;
  padding: var(--size-space-40, 40px) var(--360-575-page-margin, 16px);
  background: var(--Color-Surface-General-1, white);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--size-space-32, 32px);
  display: flex;
}

.navigation-text-container {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  display: inline-flex;
}
.navigation-text-container .subtitle{
  color: var(--Color-Content-General-1, #2C2C2C)!important;
  margin-bottom:0px;
}
.navigation-content-container {
  display: flex;
  padding: var(--size-space-0, 0px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--size-space-24, 24px);
  align-self: stretch;
  width: 100%;
}

.navigation-content-container .title {
      font-size:18px;
  }
.navigation-content-container .subtitle {
  margin-bottom: 0px;
  

  
}
.Row1,
.Row2,
.Row3,
.Row4 {
  display: flex;
  padding: var(--size-space-0, 0px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--size-space-24, 24px);
  align-self: stretch;
}

.navigation-content-container .Row1,
.navigation-content-container .Row2,
.navigation-content-container .Row3,
.navigation-content-container .Row4 {
  display: flex;
  width: 100%;
  min-width: 328px;
  padding: var(--size-space-00, 0px) var(--size-space-24, 24px);
  justify-content: center;
  align-items: center;
  gap: var(--size-space-24, 24px);
}

.navigation-content-container .Row1 .card-navigation,
.navigation-content-container .Row2 .card-navigation,
.navigation-content-container .Row3 .card-navigation,
.navigation-content-container .Row4 .card-navigation {
  display: flex;
  width: 100%;
  min-width: 328px;
  padding: var(--size-space-20, 20px) var(--size-space-24, 24px);
  justify-content: center;
  align-items: center;
  gap: var(--size-space-24, 24px);
  background: var(--Color-Surface-General-2, #DCEBE1);
  border-radius: var(--border-radius-l, 16px);
}

.navigation-content-container .Row1 .card-navigation .text,
.navigation-content-container .Row2 .card-navigation .text,
.navigation-content-container .Row3 .card-navigation .text,
.navigation-content-container .Row4 .card-navigation .text {
  display: flex;
  padding: var(--size-space-0, 0px);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--size-space-8, 8px);
  flex: 1 0 0;
}

.navigation-content-container .Row1 .card-navigation .subtitle,
.navigation-content-container .Row2 .card-navigation .subtitle,
.navigation-content-container .Row3 .card-navigation .subtitle,
.navigation-content-container .Row4 .card-navigation .subtitle {
  display: flex;
  padding: var(--size-space-0, 0px);
  flex-direction: column;
  justify-content: center;
  text-align: left;
  gap: var(--size-space-8, 8px);
  flex: 1 0 0;
  margin-bottom: 0px;
  color: var(--Color-Content-General-2, #2C2C2C);
}

.round-button {
  display: flex;
  width: 48px;
  height: 48px;
  padding: var(--size-space-12, 12px);
  justify-content: center;
  align-items: center;
  gap: var(--size-space-0, 0px);
  flex-shrink: 0;
  border-radius: 50px;
  background: var(--Color-Surface-General-1, #FFF);
}

.icon-iconShell {
  justify-content: flex-start;
  align-items: flex-start;
  display: inline-flex;
}

.icon-chevron {
  align-self: stretch;
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: inline-flex;

}

.vector {
  display: flex;
  width: 24px;
  height: 24px;
  align-items: flex-start;
  flex-shrink: 0;

}
@media(min-width:576px) {
   .navigation-content-container .title {
      font-size:18px;
  }
}

@media (min-width:768px) {

 
  .navigation-content-container {
      margin: 0 auto;
      width: 672px;
  }
}


@media (min-width:992px) {

  .subtitle {
color: var(--Color-Content-General-1, #2C2C2C);
  margin-bottom: 0px;
}
  .navigation-container {
      display: flex;
      width: 100%;
      padding: var(--size-space-40, 40px) var(--992-1199-page-margin, 82px);
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: var(--size-space-32, 32px);
  }

  .navigation-content-container {
      display: flex;
      padding: 0;
      margin:auto;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: var(--size-space-24, 24px);
      align-self: stretch;
      width: 100%;
  }

  .navigation-content-container .Row1, .navigation-content-container .Row2, .navigation-content-container .Row3, .navigation-content-container .Row4 {
      display: flex;
      flex-direction: row;
      padding: var(--size-space-0, 0px);
      justify-content: center;
      align-items: center;
      gap: var(--size-space-24, 24px);
      align-self: stretch;
  }

  .navigation-content-container .Row1 .card-navigation, .navigation-content-container .Row2 .card-navigation, .navigation-content-container .Row3 .card-navigation, .navigation-content-container .Row4 .card-navigation {
          display: flex;
          width: 100%;
          max-width: 50%;
          padding: var(--size-space-20, 20px) var(--size-space-24, 24px);
          justify-content: center;
          align-items: center;
          gap: var(--size-space-24, 24px);
}

   .navigation-content-container .Row1 .card-navigation .title, .navigation-content-container .Row2 .card-navigation .title, .navigation-content-container .Row3 .card-navigation .title, .navigation-content-container .Row4 .card-navigation .title  {
      color: var(--Color-Content-General-1, #2C2C2C);
       font-size: var(--size-font-125);
      font-style: var(--font-style-normal);
      font-weight: var(--font-weight-smbold);
      line-height: var(--size-font-line-height-2xl);

  }

  
  .navigation-content-container .Row1 .card-navigation .subtitle, .navigation-content-container .Row2 .card-navigation .subtitle, .navigation-content-container .Row3 .card-navigation .subtitle, .navigation-content-container .Row4 .card-navigation .subtitle  {
      color: var(--Color-Content-General-2, #2C2C2C);
      font-feature-settings: 'liga' off, 'clig' off;
      font-size: var(--size-font-100);
      font-style: var(--font-style-normal);
      font-weight: var(font-weight-regular);
      line-height: var(size-font-line-height-s);
  }
}
@media (min-width: 1200px) {
  .navigation-content-container .Row1 .card-navigation, .navigation-content-container .Row2 .card-navigation, .navigation-content-container .Row3 .card-navigation, .navigation-content-container .Row4 .card-navigation {
      display: flex;
      width: 100%;
      max-width: 488px;
      padding: var(--size-space-20, 20px) var(--size-space-24, 24px);
      justify-content: center;
      align-items: center;
      gap: var(--size-space-24, 24px);
  }
  
  .navigation-content-container .Row1 .card-navigation .title, .navigation-content-container .Row2 .card-navigation .title, .navigation-content-container .Row3 .card-navigation .title, .navigation-content-container .Row4 .card-navigation .title  {
      color: var(--Color-Content-General-1, #2C2C2C);
       font-size: var(--size-font-125);
      font-style: var(--font-style-normal);
      font-weight: var(--font-weight-smbold);
      line-height: var(--size-font-line-height-m);

  }
}
@media (min-width: 1920px) {
  .navigation-content-container .Row1 .card-navigation, .navigation-content-container .Row2 .card-navigation, .navigation-content-container .Row3 .card-navigation, .navigation-content-container .Row4 .card-navigation {
      display: flex;
      width: 100%;
      max-width: 628px;
      padding: var(--size-space-20, 20px) var(--size-space-24, 24px);
      justify-content: center;
      align-items: center;
      gap: var(--size-space-24, 24px);
  }
}