iframe
{
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    background-color: transparent;
}
.bg-\[\#07EAEF\]
{
    background-color: rgb(99 99 99) !important;
}
header
{
    backdrop-filter: blur(30px);
}
html
{
      scroll-behavior: smooth;
}
.italy
{
    font-style: italic;
}
#how_ifr
{
    width: 100%;
    height: 100vh;
    position: relative;
}
.navlines
{
    width: 0%;
    opacity: 0;
    transition: width 0.35s ease;
}
a:hover > 
.navlines
{
    width: 100%;
    opacity: 1;
}
.none
{
    display: none;
}

.open_kia
{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 64px;
    width: 100vw;
    height: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background: #111;
    z-index: 999999999;
    box-shadow: 0px 5px 10px 2px #00000033;
}
/* base at 320px (or below) */
#how_ifr {
  height: 1690px;
}

/* 320px → 460px: every 10px ↑ reduces height by 15px ⇒ slope = –1.5 */
@media (min-width: 320px) and (max-width: 460px) {
  #how_ifr {
    height: calc(
      1690px
      - ((100vw - 320px) * 1.5)
    );
  }
}

/* 460px → 1024px: every 10px ↑ reduces height by 10px ⇒ slope = –1 */
@media (min-width: 460px) and (max-width: 515px) {
  #how_ifr {
    /* at 460px, this also yields 1480px: 
       1690 - (140*1.5) = 1480 */
    height: calc(
      1480px
      - (100vw - 460px)
    );
  }
}

@media (min-width: 515px) and (max-width: 770px) {
  #how_ifr {
    /* at 460px, this also yields 1480px: 
       1690 - (140*1.5) = 1480 */
    height: calc(      1690px      - (100vw - 425px)    );
  }
}

@media (min-width: 770px) and (max-width: 870px) {
  #how_ifr {
    /* at 460px, this also yields 1480px: 
       1690 - (140*1.5) = 1480 */
    height:calc(      1690px      - (100vw - 525px)    );
  }
}

@media (min-width: 870px) and (max-width: 970px) {
  #how_ifr {
    /* at 460px, this also yields 1480px: 
       1690 - (140*1.5) = 1480 */
    height:calc(      1690px      - (100vw - 625px)    );
  }
}

@media (min-width: 970px) and (max-width: 1024px) {
  #how_ifr {
    /* at 460px, this also yields 1480px: 
       1690 - (140*1.5) = 1480 */
    height:calc(      1690px      - (100vw - 680px)    );
  }
}


/* optional: lock in the final value above 1024px */
@media (min-width: 1024px) {
  #how_ifr {
    /* at 1024px: 1480 - (1024 - 460) = 916px */
    height: 100vh;
  }
}