body {
    font-family: "Rubik", sans-serif;
}

/* Start Custom Classes */
.section-title::after {
    content: '';
    display: block;
    width: 30%;
    height: 2px;
    margin: auto auto 0.8rem;
    border-bottom: 2px solid #c7c7c7;
}

.text-wa-green {
    color: #075E54;
}

.cursor-pointer {
    cursor: pointer;
}

.custom-numbered-list {
    counter-reset: list-counter;
    list-style: none;
    padding: 0;
}

.custom-numbered-list .list-item {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 0.5rem;
}

.custom-numbered-list .list-item::before {
    content: counter(list-counter);
    counter-increment: list-counter;
    position: absolute;
    left: -14px;
    top: 36%;
    font-weight: bold;
    color: #fff;
    font-size: 1rem;
    background-color: #666;
    padding: 2px 10px;
    border-radius: 50%;
    text-align: center;
}

/* End Custom Classes */

/* Start HomePage */
.home-cover {
    height: calc(100vh - 60px);
    max-width: 100%;
}

.home-cover .cover-img {
    height: 100%;
}

.home-cover .cover-img img {
    width: 100%;
    height: 100%;
}

.home-cover .info {
    height: 100%;
    color: #fff;
    background-color: #000;
    text-align: center;
}

.tutorials {
    min-height: calc(100vh - 56px - 73px);
}

.tutorials .card {
    width: 18rem;
    max-height: 420px;
}

.tutorials .card-title {
    height: 3rem;
}

.tutorials .card-text {
    height: 4rem;
}

.about-me .about-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-me .my-pic {
    display: flex;
    align-content: center;
}

.about-me .my-pic img {
    width: 100%;
    height: 100%;
}

/* End HomePage */

/* Start About Us */
.about .about-wrapper {
    min-height: calc(100vh - 56px - 73px);
}

.about i {
    max-width: 20px;
    max-height: 20px;
}

/* End About Us */

/* Start Contact Us */
.contact .form-wrapper {
    min-height: calc(100vh - 56px - 73px);
}

.contact form {
    min-width: 50vw;
    max-width: 500px;
}

/* End Contact Us */

/* Start Login and Register */
.form-wrapper {
    min-height: calc(100vh - 56px);
}

.login form,
.register form,
form.reset-password {
    min-width: 50vw;
    max-width: 500px;
}

/* End Login Page */