@import url('../themes/web-theme.css');
h1{
    size: 30px !important;
    color: var(---colorOnSecondary);
}

.span{
    color: var(---colorPrimary);
    size: 14px;
    margin-top: 4rem;
    margin-bottom: .5rem;
}

.column{
    display: flex;
    flex-direction: column;
}


.row{
    display: flex;
    flex-direction: row;
}

.container{
    width: 100vw;
    display: flex;
    flex-direction: column;
    position: relative;
}

.container .hero{
    width: 100%;
    position: relative;
    min-height: 80vh;
}

.hero .content{
    width: 100%;
    max-height: 100vh;
    position: relative;
    margin-top: calc(var(--header-height));
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content .block{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-top: 2rem;
}

.block img{
    width: auto;
    height: 50vw;
    object-fit: cover;
    margin-top: 2rem;
    border-radius: 10px;
    object-position: top;

}

.hero h1{
    color: var(---colorOnSecondary);
    font-size: 30px;
    font-weight: 600;
    max-width: 600px;
}

.hero h5{
    color: var(---colorOnSecondary);
    font-size: 18px;
    margin-top: 1rem;
    font-weight: normal;
    max-width: 400px;
}

.hero p{
    color: var(---textColor);
    font-size: 16px;
    margin-bottom: 2rem ;
    margin-top: 2rem;
    max-width: 600px;
}

.buttons{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

button{
    min-width: 120px;
    padding: 0 2cqmax;
    height: 40px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.div{
    width: 100vw;
    padding: 0 20px;
    margin-top: 4rem;
}

.div .rounded{
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    min-height: 260px;
    width: 100%;
    backdrop-filter: blur(40px);
    margin-top: 2rem;
    gap: 1.6rem;
    position: relative;
    justify-content: space-evenly;
}

h5{
    color: var(---colorOnSecondary);
    font-size: 1.1rem;
}

.rounded .item{
    width: 100%;
    min-height: 280px;
    position: relative;
}

.item .blur_effect{
    width: 100px;
    height: 40px;
    top: 0;
    right: 0;
    opacity: .3;
    border-radius: 40px;
    position: absolute;
}

.item .block{
    width: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
    border: 1px solid hsla(0, 0%, 56%, 0.60);
    border-radius: 10px;
    min-height: 280px;
    backdrop-filter: blur(40px);
    padding: 1.6rem 2rem;
    background-color: hsla(0, 0%, 95%, 0.015);

}


.block a{
    position: relative;
    margin-top: 20px;
    color: var(---colorPrimary);
}

ul{
    margin-top: 1.5rem;
}

.rounded p{
    margin-top: 1.5rem;
}

.container .layout{
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 90vh;
    justify-content: flex-start;
    padding: 2rem 20px;
}

.layout .blocks{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.blocks .block{
    width: 100%;
    position: relative;
    align-items:flex-start;
    margin-top: 2rem;
}

.blocks .block:nth-child(2){
    justify-content: center;
}

.white{
    background-color: white;
}

.black{
    color: black;
}

.block .banner_img{
    width: 100%;
    height: auto;
    object-fit: cover;
    margin: 2rem 0;
}

.block p{
    color: var(---textColor);
    font-size: 16px;
}

.block .block_img{
    width: 100%;
    height: auto;
    object-fit: cover;
    position: relative;

}

.view_group{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    justify-content: space-between;

}

.view_group .view{
    width: 100%;
}

.view img{
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    margin-bottom: 1rem;
}

.div .heading{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    justify-content: space-between;
}

.div h1{
    max-width: 600px;
}
.div p{
    font-size: 16px;
    max-width: 500px;
}

.div .items{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.items .bold{
    font-size: 20px;
    font-weight: bold;
}

.items p{
    max-width: 260px;
    margin: 1rem 0;
}

.div .items .item{
    display: flex;
    min-height: 160px;
    flex-direction: column;
    border-bottom: 2px solid var(---colorOnBackground);
    padding-bottom: 20px;
}


#services .items{
    margin-top: 1rem;
}

#services .item{
    background-color: var(---colorOnBackground);
    padding: 1.5rem;
    height: 220px;
    border-radius: 10px;

}

#services a{
    left: 1.5rem;
    bottom: 1.5rem;
    position: absolute;
}



.div .bg{
    height: 160px;
    border-radius: 10px;
    margin: 20px 0; padding: 10px;
}

.bg h5{
    font-size: 16px; margin-bottom: .6rem;
}

.bg .icon{
    width: 40px; height: 40px;
}

.bg p{
    font-size: 12px;
    max-width: 160px;
}

.bg_mockup{
    position: absolute; width: 120px; height: auto; bottom: 0; object-fit: cover; right: 10px;
}

.bg .button{
    position: absolute;
    bottom: -60px;

}

.div .app{
    background-color: var(---colorOnPrimary);
}


@media screen and (min-width:1024px) {

    #comingsoon{
        padding: 60px 60px 80px 0px;
    }

    .container .hero{
        min-height: 100vh;
    }

    .hero .content{
        width: 100%;
        max-height: 100vh;
        position: relative;
        margin-top: calc(var(--header-height));
        padding: 0 4rem;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .content .block{
        width: 50vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        margin-top: 0;
    
    }

    .block:nth-child(1){
        padding-right: 4rem;
    }

    .hero h1{
        color: var(---colorOnSecondary);
        font-size: 2.4rem;
        font-weight: 600;
        max-width: 600px;
    }

    .div h1{
        color: var(---colorOnSecondary);
        font-size: 40px;
    }    
    
    .hero h5{
        color: var(---colorOnSecondary);
        font-size: 1.6rem;
        margin-top: 2rem;
        font-weight: normal;
        max-width: 400px;
    }
    
    .hero p{
        color: var(---textColor);
        font-size: 16px;
        margin-top: 1.3rem;
        margin-bottom: 2rem ;
        max-width: 600px;
    }

    .block img{
        width: 36vw;
        height: 36vw;
        object-fit: cover;
    
    }

    .hero img{
        margin-left: 10vw;
    }

    .div{
        width: 100vw;
        padding: 0 4rem;
    }

    .div .rounded{
        display: flex;
        flex-direction: row;
        border-radius: 10px;
        min-height: 260px;
        width: 100%;
        margin-top: 2rem;
        justify-content: space-evenly;
    }
    
    .rounded .item{
        min-width: 15%;
        position: relative;
        min-height: 310px;

    }

    .item .block {
        padding: 2rem;
        min-height: 320px;
    }

    .rounded .block:nth-child(2){
        padding-left: 2rem;
        padding-right: 2rem;
    }

    
    .container .layout{
        padding: 2rem 4rem;
        width: 100%;
        display: flex;
    }

    .layout .blocks{
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .blocks .block{
        width: 50%;
        justify-content: center;
        margin-top: 0;
    }

    .block a{
        position: absolute;
        bottom: 20px;
        right: 20px;
        color: var(---colorPrimary);
    }

    .block .banner_img{
        width: 100%;
        height: auto;
        object-fit: cover;
        margin: 2rem 0;
    }

    .block .block_img{
        width: 40vw;
        height: 40vw;
        object-fit: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .view_group{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        position: relative;
        justify-content: space-between;

    }

    .view_group .row{
        flex-direction: row;
        align-items: center;
    }

    .view_group .view{
        width: 46%;
    }

    .view h1{
        font-size: 24px;
    }

    .view p{
        font-size: 14px;
        margin-top: 1rem;
    }

    .item .blur_effect{
        width: 100px;
        height: 40px;
        top: 0;
        right: 0;
        opacity: .3;
        filter: blur(40px);
        border-radius: 40px;
        background-color: aliceblue;
        position: absolute;
    }

    .item a{
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .div .heading {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10rem;
    }

    .div .items{
        height: 200px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
    }

    .div .items .item{
        border: none;
    }

    #services .items{
        gap: 1.5rem;
        margin-top: 1rem;
    }

    .div .bg{
        height: 340px;
        margin: 2rem 0; 
        justify-content: center;
        padding-left: 40px;
        border-radius: 20px; 
    }

    .bg_mockup{
        position: absolute; width: 460px; height: auto; bottom: 0; object-fit: cover; right: 3rem;
    }

    .bg h5{
        font-size: 2rem; margin-bottom: .6rem;
    }

    .bg .icon{
        width: 80px; height: 80px;
    }

    .bg p{
        font-size: 16px;
        max-width: 260px;
    }

    .bg .button{
        position: relative;
        margin: 0;
        top: 0;
    }

    .div .app{
        background-color: #171717;
    }


}

@media screen and (min-width:1200px){

    .hero h1{
        color: var(---colorOnSecondary);
        font-size: 4rem;
    }

    .hero .content{
        padding: 0 6rem;
    }

    .div{
        width: 100vw;
        padding: 0 6rem;
    }

    .container .layout{
        min-height: 100vh;
        padding: 2rem 6rem;
    }

    .block .block_img{
        width: 32vw;
        height: 32vw;
        object-fit: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .view h1{
        font-size: 40px;
    }

    .view p{
        font-size: 20px;
        margin-top: 1rem;
    }
}