.inCon {
    background: linear-gradient(to bottom, transparent 0%, black 15%);
}

.index-conteiner {
    display: grid;
    grid-template-columns: repeat(5, 20%);
    grid-template-rows: repeat(20, 5%);
    min-height: 200vh;
    z-index: 0;
    background: linear-gradient(to bottom, transparent 0%, black 15%);
}

.index-title {
    display: flex;
    align-items: end;
    margin-left: 45px;
    color: white;
    grid-area: 1 / 1 / 2 / 5;
    font-weight: 700;
    font-size: 35px;
    margin-top: 5px;
}
@media screen and (min-width: 800px) {
    .index-conteiner {
        max-width: 900px;
        margin: 0 auto;
    }
}

.index-text {
    color: white;
    font-size: 30px;
    grid-area: 2 / 1 / 4 / 5;
    margin-left: 45px;
    font-weight: 300;
    margin-top: 5px;
}

.fat-text {
    font-weight: 700;
}

.index-logIn {
    grid-area: 3 / 1 / 4 / 2;
    margin-left: 45px;
    margin-top: 20px;
    display:flex;
    justify-content: center;
    align-items: center;
    width: 140%;
    background-color: white;
    height: 60%;
    color: black;
    text-decoration: none;
    font-weight: 700;
    border-radius: 7px;
    font-size: 20px;
    z-index: 1;
}

.index-getStarted {
    font-size: 20px;
    margin-left: 15px;
    margin-top: 20px;
    grid-area: 3 / 3 / 4 / 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 110%;
    background-color: transparent;
    height: 60%;
    color: white;
    text-decoration: none;
    font-weight: 700;
    border-radius: 7px;
    border: 2px solid white;
    backdrop-filter: blur(20px);
}

.index-image {
    grid-area: 1 / 1 / 4 / 6;
    width: 100%; 
    height: 100%;
    z-index: -1;
}

.index-about-title {
    display: flex;
    align-items: end;
    margin-left: 45px;
    color: white;
    grid-area: 3 / 1 / 5 / 5;
    font-weight: 700;
    font-size: 35px;
    margin-top: 5px;
}

.index-small-text {
    color: white;
    font-size: 20px;
    grid-area: 5 / 1 / 10 / 5;
    margin-left: 45px;
    font-weight: 300;
    margin-top: 5px;
}

.arnold-image {
    width: 300px;
    margin-top: 10px;
}

.index-whyUs-title {
    display: flex;
    margin-left: 45px;
    color: white;
    grid-area: 13 / 1 / 14 / 5;
    font-weight: 700;
    font-size: 35px;
    margin-top: 5px;
}

.index-small-text2 {
    color: white;
    font-size: 20px;
    grid-area: 14 / 1 / 17 / 5;
    margin-left: 45px;
    font-weight: 300;
    margin-top: 5px;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

.bottom-nav-background {
  height: 4rem;
  background-color: rgba(17, 24, 39, 0.8);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(75, 85, 99, 0.4);
  padding: 0 0.5rem;
}

.bottom-nav-container {
  display: flex;
  height: 100%;
  max-width: 28rem;
  margin: 0 auto;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0.5rem;
  background: transparent;
  border: none;
  color: rgb(156, 163, 175);
  transition: all 200ms ease;
  cursor: pointer;
  text-decoration: none;
  
}

.nav-item:hover {
  color: rgb(209, 213, 219);
}

.nav-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(156, 163, 175);
}

.nav-icon i {
  font-size: 1.25rem;
}

.active-indicator {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background-color: rgb(168, 85, 247);
  border-radius: 50%;
}

.nav-label {
    font-size: 0.75rem;
    margin-top: 4px;
    font-weight: 500;
    color: rgb(156, 163, 175);
}