.heading{
    font-size:42px;
    font-weight:900;
    color: var(--text-dark);
    margin-bottom: 20px;
}
.hero{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 20px;
    max-width: 1200px;
    margin: auto;
    flex-wrap: wrap;
}
.hero-text p{font-size: 20px;}
.hero-text{max-width: 600px;}
.heroHeading{font-size:4rem;}
.heading span{color:var(--secondary-color);}
.hero-image{
    max-width: 400px;
    position: relative;
}
.userImage{
    z-index:99;
    position:relative;
    width: 100%;
    display: block;
}
@keyframes slideDown {
    from{left:0px;}
    to{left:20px;}
}
@keyframes slideRight {
    from{right:-20px;}
    to{right: 0px;}
}
@keyframes breathe {
    0%, 100%{
        transform: scale(1);
        opacity: 0.9;
    }
    50%{
        transform: scale(1.1);
        opacity: 0.9;
    }   
}