.hero-text-box {
    position: absolute;
    /* top: 53%; */
    /* top: calc(280px - 10vh); */
    top: calc(200px - (200 - 160) * 60vh / (1200 - 600));
    /* left: 28%; */
    left: calc(100px + 1vw);
    /* -webkit-transform: translate(-50%, -50%); */
    /* transform: translate(-50%, -50%); */
    z-index: 1;
}
/* formally .header-home */
.hero-img {
    background-image: url("images/zen-stones-w1400-min.jpg");
    /*background-attachment: fixed;
parralex effect;DOESN'T WORK IN IOS*/
    background-size: cover;
    background-position: top left;
    height: 600px;
}
.hero-p {
    font-size: calc(20px + (35 - 20) * ((100vw - 300px) / (1600 - 300)));
    font-weight: 500;
    /* letter-spacing: 1px; */
    /* text-transform: uppercase; */
    max-width: 610px;
    padding-right: 15px;
}
.hero-subtitle {
    font-size: calc(24px + (46 - 24) * ((100vw - 300px) / (1600 - 300)));
    font-weight: 800;
    /* text-align: center; */
}
.hero-text-box li {
    font-size: calc(16px + (24 - 16) * ((100vw - 300px) / (1600 - 300)));
}
@media (min-width: 1600px) {
    .hero-img {
        height: 800px;
    }
    .hero-text-box {
        left: calc(130px + 2vw);
    }
}

@media (max-width: 900px) {
    .hero-text-box {
        display: flex;
        /* top: 180px; */
        left: calc(20px + 5vw);
        top: calc(220px - 10vh);
        margin: 10px;
        flex-direction: column;
        justify-content: center;
        align-content: center;
    }
    .hero-img {
        height: 500px;
    }
}
@media (max-width: 500px) {
    .hero-img {
        background-image: url("images/zen-stones-mobilew800-min.jpg");
        /* background-image: linear-gradient( */
        /* to left, */
        /* rgba(0, 0, 0, 0.2), */
        /* rgba(37, 47, 60, 0.1) */
        /* ), */
        /* url("images/zen-stones-mobilew800-min.jpg"); */
        /*background-attachment: fixed;
parralex effect;DOESN'T WORK IN IOS*/
        background-size: cover;
        background-position: left top;
        height: 450px;
    }
    .hero-text-box {
        left: 20px;
        top: 90px;
    }
    .hero-subtitle {
        font-size: calc(28px + (46 - 28) * ((100vw - 300px) / (1600 - 300)));
    }
    .navbar-brand {
        font-size: 1rem;
    }
}
@media (max-width: 440px) {
    .hero-text-box {
        max-width: 300px;
    }
    .navbar-brand {
        font-size: 1rem;
    }
    .hero-p {
        margin-bottom: 5px;
    }
}