.hero-p {
    font-size: 16px;
    line-height: 150%;
    margin-bottom: 30px;
}
.hero-image-block {
    margin-right: 60px;
    max-width: 32rem;
    width: 100%;
}
.hero-image-block img {
    border-radius: 15px;
}
.hero-btn {
    font-family: "Cabin Bold", sans-serif;
    background-color: #5A4FF3;
    border-radius: 30px;
    color: white;
    padding: 16px 24px 16px 34px;
}
.btn-icon {
    margin-top: -5px;
    margin-left: 10px;
}
.hero-flex-box {
    display: flex;
    align-items: center;
    margin-top: 45px;
    padding-bottom: 60px;
}
.home-action-btn {
    border: medium;
    cursor: pointer;
    padding: 0px 45px;
    display: flex;
    position: relative;
    -moz-box-align: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    -moz-box-pack: center;
    justify-content: center;
    white-space: nowrap;
    transition: all 250ms ease-in-out 0s;
    background-color: rgb(242, 97, 76);
    border-radius: 36px;
    color: rgb(255, 255, 255);
    font-family: FaktPro Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 18px;
    height: 64px;
    line-height: 18px;
    margin-bottom: 30px;
}
a.home-action-btn:hover {
  background-color: rgb(229, 80, 58);
    color: white;
}

a.home-login-btn {
   background-color: gray;
}

a.home-login-btn:hover {
    background-color: darkgray;
}

.home-heading-v2 {
    font-family: Montserrat Bold, sans-serif;
}

h2 {
    font-family: Montserrat Bold, sans-serif;
    font-size: 41px;
    line-height: 140%;
    margin-bottom: 40px;
}
.home-heading {
    font-size: 72px;
    line-height: 82px;
    letter-spacing: -2px;

    transition: color 200ms ease-in-out 0s;
    white-space: pre-wrap;
    margin: 0px 0px 20px;
    padding: 0px;
    font-family: Graphik Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    /*
  font-size: 44px;
  letter-spacing: -1.25px;
  line-height: 54px;
    max-width: 80%;
     */
    text-align: center;
}
@media only screen and (max-width: 600px) {
    .home-heading {
        font-size: 60px;
    }
    .recruitment-heading {
        font-size: 40px;
        line-height: 40px;
    }
}
.rectangle-box {
    transform: rotate(20deg);
    position: absolute;
    width: 40px;
    height: 210px;
    right: -5px;
    background-color: yellow;
    top: 0px;
}
.right-box {
    position: relative;
    background-image: url('man.png');
    background-size: cover;
    min-height: 500px;
    background-position: center;
}
.circle-box {
    position: absolute;
    width: 260px;
    height: 260px;
    right: -40px;
    z-index: -1;
    bottom: -40px;
}
.top-row {
    margin-bottom: 7rem;
}
.how-it-works-title {
    font-size: 44px;
    font-family: Graphik Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.profile-box {
    background-color: lightgray;
    width: 200px;
    height: 250px;
    position: absolute;
    bottom: 50px;
    border-radius: 20px;
    box-shadow: 10px 5px 5px black;
}
#user-cv {
    width: 100px;
    transform: rotate(10deg);
    margin-left: 20px;
}
.home-action-btn-bottom-container {
    text-align: center;
}
.home-bottom-action-btn {
   margin: 0 auto;
    max-width: 80%;
}

.recruitment-section {
    border-radius: 30px;
    background: #eee;
}

.carousel-container-bg {
    background: rgba(0, 67, 109, 0.05);
    margin-top: 90px;
    display: none; /*  TODO: style this */
}
.carousel-container {
    align-items: center;
}
.carousel-inner-section {
    width: 100%;
    display: flex;
    align-items: center;
}
.top-companies-text {
    flex-shrink: 0;
    width: 203px;
}
.my-carousel-item {
    flex: 0 0 16.6666667%;
    text-align: center;
}


.three-steps-section {
    padding-top: 60px;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 120px;
}
.three-steps {
    display: flex;
    justify-content: space-between;
    gap: 1.875rem;
}
.home-step img {
    margin-bottom: 30px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 8px;
}
.step-text {
    font-family: "Cabin Bold", sans-serif;
    font-size: 24px;
    display: flex;
}
.number {
    margin-right: 15px;
}


.create-cv-section {
    margin-top: 120px;
    background-color: rgba(0, 67, 109, 0.1);
    padding-top: 60px;
    padding-bottom: 60px;
    overflow: hidden;
}
.feature-container-full {
    background-color: rgba(0, 67, 109, 0.1);
}
.inner-cv-section {
    display: flex;
    align-items: center;
}
.text-section {
    max-width: 410px;
}
.mockup {
    margin-right: -450px;
    width: 1000px;
    margin-left: 45px;
}

.home-container {
    padding-left: 0;
    padding-right: 0;
}
.feature-container {
    display: flex;
    padding-top: 60px;
    padding-bottom: 60px;
    justify-content: space-between;
    align-items: center;
}
.image-column {
    position: relative;
    margin-right: 60px;
}
.image-column.reverse {
    margin-right: 0;
    margin-left: 60px;
}
.applied-button {
    position: absolute;
    width: 40%;
    opacity: 0;
}
@keyframes applied-button-anim-up {
    from {opacity: 0; transform: translateY(100px);}
    to {opacity: 1; transform: translateY(0px);}
}
.applied-button-1 {
    right: 7%;
    top: 11%;
}
.applied-button-2 {
    right: 7%;
    top: 30%;
}
.applied-button-1.in-view, .applied-button-2.in-view {
    animation: applied-button-anim-up 1s ease;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}

.feature-btn {
    background-color: #584FEA;
    color: white;
    padding: 12px;
}
.text-section-paragraph {
    margin-bottom: 45px;
    font-family: "Cabin Bold", sans-serif;
    font-size: 18px;
    line-height: 170%;
}
.feature-title {
    line-height: 130%;
}
@keyframes job-app-tracking-mockup-anim {
    from { opacity: 0; transform: translateX(-200px);}
    to { opacity: 1; transform: translateX(0px);}
}
.job-app-tracking-mockup {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 43.3628%;
    opacity: 0;
}
.job-app-tracking-mockup.in-view {
    animation: job-app-tracking-mockup-anim 1s ease;
    animation-delay: 0.75s;
    animation-fill-mode: forwards;
}

.blog-section-header {
    margin-bottom: 0;
    margin-right: 60px;
}
.blog-heading-section {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
}
.blog-container {
    padding-top: 60px;
    padding-bottom: 60px;
}
.set-item {
    width: 33.3333333%;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 60px;
    padding-top: 15px;
    padding-bottom: 15px;
    border: 1px solid transparent;
}
.set-item.hover {
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 8px;
}
.article-section-image {
    margin-bottom: 30px;
    width: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    height: 245px;
    object-fit: cover;
}
.avatar {
    margin-right: 15px;
    width: 30px;
    height: 30px;
}
h3 {
    font-family: Montserrat Bold, sans-serif;
    font-size: 22px;
    color: var(--bs-body-color);
}
.blog-card h3 {
    /*padding-top: 20px;*/
}
.blog-card {
    max-width: 100%;
    text-decoration: none;
    display: flex;
    flex-flow: column;
}
.author-name {
    color: var(--bs-body-color);
    font-family: "Cabin Bold", sans-serif;
    font-size: 1rem;
}
.blog-flex-container {
    display: flex;
    margin-left: -15px;
    margin-right: -15px;
    flex-wrap: wrap;
}
.arrow-icon {
    width: 18px;
    margin-left: 3px;
    margin-top: -2px;
    transition: all 0.5s ease;
}
.explore-link:hover .arrow-icon {
    transform: translateX(10px);
}
.explore-link {
    margin-top: 5px;
    color: #584FEA;
    text-decoration: none;
}
.explore-link:hover {
    color: #584FEA;
    text-decoration: underline;
}
/*
.text-block {
    width: 40%;
}
 */

@media screen and (max-width: 1119px) {
    .three-steps-section h2 br {
        display: none;
    }
}
/* tablet screen size */
@media screen and (max-width: 991px) {
    .hero-image-block {
        margin-right: 0;
    }
    .hero-image-block img {
        margin: auto;
        display: block;
    }
    .text-block {
        margin-bottom: 30px;
    }
    .hero-flex-box {
        flex-flow: column-reverse;
    }
    .home-step {
        width: 45%;
    }
    .three-steps {
        flex-wrap: wrap;
    }
    .text-section {
        max-width: 50%;
    }
    .image-column {
        margin-left: -90px;
        margin-right: 30px;
    }
    .image-column.reverse {
        margin-left: 30px;
        margin-right: -90px;
    }

    .set-item {
        width: 50%;
    }
}

/* mobile (l) screen size */
@media screen and (max-width: 767px) {
    .hero-flex-box {
        flex-flow: column-reverse;
    }
    .text-block {
        margin-bottom: 40px;
    }
    .hero-image-block {
        margin-right: 0;
    }
    h2 {
        font-size: 32px;
    }
    .set-item {
        width: 50%;
        flex: 1 0 300px;
    }

    .three-steps {
        flex-direction: column;
        align-items: center;
        row-gap: 3rem;
    }
    .home-step {
        width: 366px;
        max-width: 100%;
    }
}

/* mobile (p) screen size */
@media screen and (max-width: 479px) {

    .inner-cv-section {
        flex-flow: column-reverse;
    }
    .mockup {
        margin-right: -120px;
        min-width: 420px;
        margin-bottom: 20px;
        margin-left: 0;
    }
    .text-section {
        max-width: none;
    }
    .feature-container {
        flex-flow: column;
    }
    .feature-container.reverse-flex {
        flex-flow: column-reverse;
    }
    .image-column {
        margin-right: 0;
        margin-left: -30px;
        margin-bottom: 30px;
    }
    .image-column.reverse {
        margin-left: 0;
        margin-right: -30px;
        margin-bottom: 30px;
    }
    .blog-flex-container {
        margin-left: -15px;
        margin-right: -15px;
    }
    .blog-section-header {
        margin-right: 0;
    }
    .blog-heading-section {
        justify-content: space-between;
    }
}