#hero-card{
  background: var(--ice-background);
  border-radius: 20px;
  overflow: hidden;
}

.navbar{
    border-bottom: 0;
}

#phone-mock{
    margin-bottom: -380px;
    margin-left: 115px; 
    z-index: 3;
    position: relative;
}

#scan-phone-mock{
    margin-left: -115px; 
    position: absolute;
    z-index: 2;
    margin-top: 40px;
}

@media screen and (max-width: 768px){
    #phone-mock{
        margin-left: calc(-1* (50vw - 60%));
        margin-bottom: -200px;
    }
    #scan-phone-mock{
        margin-left: calc( (50vw - 65%));
        margin-top: 10px;
    }
    
}

.praktische-card:nth-child(4){
    background: var(--wtl-b2);
    color: #fff;
}

#praktische-grid{
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
}

@media screen and (max-width: 768px){
    #praktische-grid{
        grid-template-columns: repeat(1, 1fr);
    }
}



#stellingen{
    display: inline-flex;
    overflow: hidden;
    gap: 1rem;
    width: 100vw;
}

#stellingen .stelling-item:first-child{
    margin-left: -100px;
}

#stellingen .stelling-item:last-child{
    margin-right: -100px;
}

#stellingen .stelling-item{
    opacity: 0.5;
}

#stellingen .stelling-item:nth-child(2){
    opacity: 1;
}


.stelling-item h4{
    font-size: 1rem;
}

.stelling-item h6{
    font-size: 0.75rem;
    line-height: 1;
}

#blue-line{
    background: var(--wtl-b1);
    height: 25px;
    width: 100%;
    margin-bottom: 1rem;
}

#drie-stappen-grid{
    grid-template-columns: 1fr 1fr 1fr;
}

#vier-stappen-grid{
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
}

@media screen and (max-width: 1100px){    
    #vier-stappen-grid{
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 768px){
    #drie-stappen-grid, #vier-stappen-grid{
        grid-template-columns: 1fr;
    }
}

#drie-stappen-grid i, #privacy-icon, #vier-stappen-grid i{
    font-size: 4rem;
    color: var(--wtl-b1);
    margin-bottom: 12px;
}

#hero-3d-transform-container{
    position: relative;
    -webkit-perspective: 40cm;
}

#hero-3d-transform-1{
    /* make it looks like it is 3d */
    transform: rotate3d(0, 1, 0, 20deg);
    animation: hover 5s infinite;
    -webkit-transform-style: preserve-3d;
    z-index: 0;
    margin-left: -200px;
    width: 500px;
}

@keyframes hover{
    0%{
        transform: rotate3d(0, 1, 0, 20deg) translateY(0);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
    50%{
        transform: rotate3d(0, 1, 0, 10deg) translateY(-10px);
        box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
    }
    100%{
        transform: rotate3d(0, 1, 0, 20deg) translateY(0);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
}

@media screen and (max-width: 768px){
    #hero-3d-transform-1{
        animation: none;
        transform: rotate3d(0, 1, 0, 0deg);
        margin-left: 0;
        width: 100%;
    }
}

.text-red{
    color: red;
}

.btn-popover{
    padding: 0;
    border: none;
    margin: 0;
    margin-bottom: 2.5px;
}