body{
    background: rgb(3,32,48);
    background: linear-gradient(180deg, #171717 0%, var(--main) 300%);
}

h1,h2,h3,h4,p,a,li{
    color:#006DA4;
}

h2{
    font-size:min(7vw,7vh);
    background: linear-gradient(135deg, var(--main) 0%, rgba(177,201,239,0) 160%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}

h3{
    font-size:min(5vw,5vh);
    letter-spacing:min(1vh,1vw);
    background: linear-gradient(100deg, var(--main) 0%, rgba(177,201,239,0) 140%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}

h4{
    font-size:min(2vw,2vh);
    background: linear-gradient(135deg, var(--white) 0%, rgba(177,201,239,0) 200%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}

#catchy{
    width:100%;
    height:90vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

#solution{
    width:100%;
    height:100vh;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction:column;
}

    #solution p{
        color:var(--white);
        font-size:min(2vw,2vh);
        text-align: center;
        margin-top:2vh;
    }

#products{
    width:100%;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    position: relative;
    z-index:2 !important;
    overflow-y:hidden;
}

    #products h2,#products h3, #products h4, #products p{
        z-index:2 !important;
    }

    #services{
        display:flex;
        justify-content: center;
        width:100%;
        margin:5vh 0;
        flex-wrap: wrap;
        z-index:2;
    }

        .card{
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content: space-around;
            width:300px;
            height:750px;
            border:1px solid var(--white);
            border-radius:.5rem;
            padding:2rem;
            margin:1rem 3rem;
        }

            .card h5{
                font-size:max(2vw,2vh,30px);
                color:var(--white);
            }

            .card b{
                color:var(--white)
            }

            .card p{
                color:var(--white);
                font-size:max(0.8vw,0.8vh,16px)
            }

            .card button{
                background-color:#171717;
                color:var(--white);
                border-radius:.5rem;
                padding:1rem 2rem;
                border:1px solid var(--main);
                cursor:pointer;
                margin-top:1rem;
                transition:all 0.2s ease-in-out;
            }

            .card button:hover{
                background-color:var(--main);
                color:#171717
            }


.teamPicture{
    position: absolute;
    z-index:1;
    opacity: 20%;
    width:100vw;
}

@media (max-width:1580px){
    /* .card h5{
        font-size:max(2.3vw,2.3vh)
    }

    .card p{
        font-size:max(1.5vw,1.5vh)
    } */
}

@media (max-width:768px){
    h2{
        font-size:max(7vw,7vh);
    }
    
    h3{
        font-size:max(5vw,5vh);
    }
    
    h4{
        font-size:max(2vw,2vh);
    }

    .card{height:fit-content;justify-content: space-around;}

    .card h5{
        font-size:max(3vw,3vh,30px) !important;
        color:var(--white);
    }

    .card b{
        font-size:max(2vw,2vh,18px)
    }

    .card p{
        font-size:max(2vw,2vh,10px)
    }

    .teamPicture{
        display:none;
    }

}