.hero {
    background: linear-gradient(285.22deg, #3F2B56 27.52%, #00ABC8 97.8%);
    padding: clamp(50px, 8vw, 100px) 20px 0;
}

.hero .inner-container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 60px;
}

.hero .inner-container .text {
    max-width: 755px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(15px, 2vw, 20px);
    padding-bottom: clamp(30px, 8vw, 100px);
}

.hero .inner-container .text h1 {
    color: #fff;
}

.hero .inner-container .text p {
    font-size: clamp(16px, 2vw, 24px);
    color: #fff;
}

.hero .inner-container .graphic {
    font-size: 0;
}

.steal-templates {
    background-color: #ECEAEE;
    padding: 0 20px;
}

.steal-templates .inner-container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.steal-templates .inner-container .form-container {
    max-width: 575px;
    width: 100%;
    transform: translateY(clamp(-85px, -5.5vw, -40px));
}

.steal-templates .inner-container .form-container .lead-form-block .actions {
    display: flex;
    gap: 30px;
    text-align: left;
    margin-top: clamp(15px, 3vw, 30px);
}

.steal-templates .inner-container .form-container .lead-form-block .actions .row p {
    font-size: clamp(14px, 1.25vw, 16px);
    margin-bottom: 0;
}

.steal-templates .inner-container .form-container .lead-form-block .actions .row p img {
    vertical-align: middle;
    margin-right: 10px;
    margin-bottom: 3px;
}

.steal-templates .inner-container .graphic {
    transform: translateY(clamp(-140px, -8.5vw, -40px));
}

.steal-templates .inner-container .graphic .outer-graphic {
    max-width: 335px;
    width: 100%;
    background-color: #effafb;
    padding: 35px 70px;
    border-radius: 20px;
}

.customers {
    background: #323E48;
    padding: clamp(30px, 4vw, 50px) 20px clamp(40px, 5vw, 70px);
    text-align: center;
}

.customers h3 {
    font-family: 'HelveticaNeueBold', serif;
    color: #fff;
}

.customers .inner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(30px, 5vw, 70px);
    margin-top: 30px;
}

.customers .inner-container img {
    max-width: 30%;
}

.roles {
    background-color: #ECEAEE;
    padding: clamp(50px, 8vw, 100px) 20px;
}

.roles h3 {
    font-family: 'HelveticaNeueBold', serif;
    text-align: center;
    margin-bottom: clamp(30px, 4.5vw, 60px);
}

.roles .inner-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: clamp(20px, 2.5vw, 40px);
}

.roles .inner-container .single {
    flex: 1;
    background-color: #fff;
    box-shadow: 0px 0px 40px 0px #0000001A;
    border-radius: 24px;
    padding: clamp(20px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
    text-align: center;
}

.roles .inner-container .single h5 {
    font-family: 'HelveticaNeueBold', serif;
    color: #323E48;
    margin-bottom: 0;
}

.roles .inner-container .single p {
    text-align: left;
    margin-bottom: 0;
}

.meet-karley {
    background: linear-gradient(285.22deg, #3F2B56 27.52%, #00ABC8 97.8%);
    padding: clamp(50px, 8.5vw, 115px) 20px;
}

.meet-karley h3 {
    font-family: 'HelveticaNeueBold', serif;
    color: #fff;
    text-align: center;
    margin-bottom: clamp(40px, 5.5vw, 80px);
}

.meet-karley .inner-container {
    max-width: 950px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.meet-karley .inner-container .text {
    max-width: 500px;
    width: 100%;
}

.meet-karley .inner-container .text p {
    color: #fff;
}

.meet-karley .inner-container .text .btn-orange {
    margin-top: clamp(25px, 3vw, 35px);
}

.meet-karley .inner-container .text .btn-orange:hover {
    background-color: #fff;
}

@media (max-width: 991px) {
    .steal-templates .inner-container {
        flex-direction: column-reverse;
        align-items: center;
        gap: 30px;
        align-items: center;
        gap: 30px;
        transform: translateY(clamp(-50px, -6vw, -30px));
    }

    .steal-templates .inner-container .form-container,
    .steal-templates .inner-container .graphic {
        transform: none;
    }

    .roles .inner-container {
        flex-direction: column;
        max-width: 400px;
    }
}

@media (max-width: 600px) {
    .hero .inner-container {
        display: block;
    }

    .hero .inner-container .graphic {
        text-align: center;
    }

    .hero .inner-container .graphic img {
        max-width: 50%;
    }

    .meet-karley .inner-container {
        flex-direction: column-reverse;
        align-items: center;
    }

    .meet-karley .inner-container .graphic {
        text-align: center;
    }

    .meet-karley .inner-container .graphic img {
        max-width: 65%;
    }
}