:root{
    --card-shadow: 5px 5px 20px 1px #0000000f;
}

.image-section{
	height: 80vh;
}

img.hero-img{
	width: 80%;
	height: auto;
    margin-top: 2.5rem;
}

img.feature-image{
    width: 80%;
    border-radius: 1rem !important;
}

.analytics-card-abs{
	height: 10rem;
	top: 50vh;
	left: 0%;
	margin-left: -3rem;
	border-radius: 1rem;
    box-shadow: var(--card-shadow);
	/* box-shadow: 5px 5px 13px 4px #00000012; */
}

.daily-sales-card-abs{
	/* height: 4rem; */
	width: 14rem;
	top: 20vh;
	right: 0%;
	/* margin-right: -5rem; */
	border-radius: .8rem;
	box-shadow: var(--card-shadow);
}

.new-client-card-abs{
	/* height: 4rem; */
	width: 13rem;
	top: 55vh;
	right: 15%;
	/* margin-right: -5rem; */
	border-radius: .8rem;
	box-shadow: var(--card-shadow);
}

.new-client-appointment-card-abs{
    width: 13rem;
	top: 45vh;
	right: 15%;
	/* margin-right: -5rem; */
	border-radius: .8rem;
	box-shadow: var(--card-shadow);
}

.new-appointment-card-abs{
	/* height: 4rem; */
	width: 13rem;
	top: 40vh;
	left: 0%;
	/* margin-right: -5rem; */
	border-radius: .8rem;
	box-shadow: var(--card-shadow);
}

.offer-discount-card-abs{
	/* height: 4rem; */
	width: 10rem;
	top: 30vh;
	left: 0%;
	/* margin-right: -5rem; */
	border-radius: .8rem;
	box-shadow: var(--card-shadow);
}

.skew-div{
    /* width: 100%;
    height: 100%; */
    transform: skewY(-2deg);
    padding: 8% 0 5% 0;
    background-color: #F5F9FF;
    margin-top: -5rem;
    z-index: -1;
    /* border-top-right-radius: 3rem; */
}

.skew-content{
    transform: skewY(2deg);
}

.sell-image{
    width: 100% !important;
    height: 50vh !important;
    border-radius: 2rem;
}

.order-notification-card-abs{
    /* height: 4rem; */
    width: 13rem;
    top: 20vh;
    right: 5%;
    border-radius: .8rem;
    box-shadow: var(--card-shadow);
}

.notif-card-2{
    margin-top: 10%;
    opacity: 0.9;
}

.notif-card-3{
    margin-top: 20%;
    opacity: 0.7;
}

.checklist-icon{
    color: #36CF5F;
}

.message-notification-card-abs{
    width: 13rem;
    top: 30vh;
    left: 15%;
    border-radius: .8rem;
    box-shadow: var(--card-shadow);
}

.spa-day-card-abs{
    width: 10rem;
    top: 25vh;
    right: 15%;
    border-radius: .8rem;
    box-shadow: var(--card-shadow);
}

.stats-card-abs{
    width: 13rem;
    top: 30vh;
    right: 15%;
    box-shadow: var(--card-shadow);
}

.mail-card-abs{
    width: 13rem;
    top: 10vh;
    right: 5%;
    /* border-radius: .8rem; */
    box-shadow: var(--card-shadow);
}

.card-cta{
    background-color: #D7F1FF;
    border-radius: 2rem;
    margin: 10rem auto 0 auto;
    /* height: 15rem; */
}

.card-cta-footer{
    background-color: #D7F1FF;
    border-radius: 1.6rem;
    margin-top: 5rem;
}

.banner-img{
    margin-top: -2rem;
    height: calc(17rem + 2rem);
}

.feature-row{
    margin: 10rem 0 !important;
}

.feature-1{
    margin:  0 !important;
}

/***** Media Queries *****/
@media (max-width: 428px){
    .feature-row{
        margin: 5rem 0 !important;
    }

    .feature-1{
        margin:  0 !important;
    }

    .image-section{
        height: 60vh;
    }
    
    img.hero-img{
        width: 90%;
    }

    .analytics-card-abs{
        display: none;
    }

    .daily-sales-card-abs{
        width: 10rem;
        border-radius: .5rem;
        top: 18vh;
    }
    .offer-discount-card-abs{
        width: 8rem;
        left: 7vw;
        border-radius: .5rem;
        top: 30vh;
    }
    .new-client-card-abs{
        /* width: 10rem;
        border-radius: .5rem;
        top: 25vh;
        right: 10vw; */
        display: none;
    }

    .skew-content, .feature, .benefits{
        padding: 1.6rem;
    }

    .features-icons{
        text-align: left !important;
    }

    img.feature-image{
        width: 100%;
    }
    .new-appointment-card-abs{
        width: 10rem;
        border-radius: .5rem;
        top: 22vh;
        left: 5vw;
    }
    .new-client-appointment-card-abs{
        width: 10rem;
        border-radius: .5rem;
        top: 28vh;
        right: 10vw;
    }

    .sell-image{
        width: 100% !important;
        height: 40vh !important;
        border-radius: 1rem;
    }
    .order-notification-card-abs{
        width: 13rem;
        border-radius: .5rem;
        top: 25vh;
        right: 10vw;
    }
    .notif-card-2{
        margin-top: 20%;
        opacity: 0.9;
    }
    .notif-card-3{
        display: none;
    }

    .feature-image.fit-girl, .analysis{
        height: 40vh;
        border-radius: 1rem;
    }

    .message-notification-card-abs{
        width: 10rem;
        border-radius: .5rem;
        top: 22vh;
        left: 10vw;
    }
    .spa-day-card-abs{
        width: 10rem;
        border-radius: .5rem;
        top: 28vh;
        right: 10vw;
    }

    .analysis{
        height: 34vh;
    }
    .mail-card-abs{
        display: none;
    }
    .stats-card-abs{
        width: 10rem;
        border-radius: .5rem;
        top: 20vh;
        right: 10vw;
    }

    .card-cta, .card-cta-footer{
        padding: 3rem 2rem 0 2rem;
    }

    .banner-img{
        margin-top: 2rem;
    }

    .reverse{
        flex-direction: column-reverse!important;
    }
}

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

    .analytics-card-abs{
        top: 56vh;
        margin-left: 1rem;
        display: none;
    }

    .daily-sales-card-abs{
        top: 24vh;
        display: none;
    }

    .new-client-card-abs{
        /* display: none; */
        top: 48vh;
    }

    .offer-discount-card-abs{
        left: 7vh;
        top: 40vh;
    }

    .skew-content{
        padding: 2.4rem;
    }

}

@media (min-width: 768px) and (max-width: 1023px){
    .hero .info{
        padding: 2rem 4rem;
    }
    
    .reverse{
        flex-direction: column-reverse!important;
    }
    .card-cta-footer{
        padding: 3rem 2rem 0 2rem;
    }
}
/***** End Media Queries *****/