﻿/*<editor-fold desc="Variables">*/
:root
{
    --sp-120-80-56: min(max(56px, calc(3.5rem + ((1vw - 4px) * 8))), 80px);
    --sp-150-120-80: min(max(80px, calc(5rem + ((1vw - 4px) * 10))), 120px);
}

@media only screen and (min-width: 800px)
{
    :root
    {
        --sp-120-80-56: min(max(80px, calc(5rem + ((1vw - 8px) * 10))), 120px);
        --sp-150-120-80: min(max(120px, calc(7.5rem + ((1vw - 8px) * 7.5))), 150px);
    }
}

/*</editor-fold>*/

/*<editor-fold desc="Base">*/
.h-36
{
    font-size: min(max(28px, calc(1.75rem + ((1vw - 8px) * 2))), 36px) !important;
    margin-bottom: min(max(32px, calc(2rem + ((1vw - 8px) * 4.5))), 50px) !important;
}

@media only screen and (min-width: 800px)
{
}

/*</editor-fold>*/

/*<editor-fold desc="Hero">*/
@media only screen and (min-width: 1024px)
{
    .tk-hero__grid
    {
        grid-template-columns: 51fr 49fr;
    }

    body.page-id-5 .tk-hero__grid img
    {
        transform: scale(1.14) translate(40px, -50px);
        transform-origin: bottom right;
    }
}


@media only screen and (min-width: 1024px)
{
    .res-service-hero .group__right .wp-block-group__inner-container
    {
        margin-left: auto;
    }
}

/*</editor-fold>*/

/*<editor-fold desc="Qualities of a top 1% resume">*/
.tile-test figure
{
    margin-bottom: min(max(12px, calc(0.75rem + ((1vw - 4px) * 2))), 20px);
}

.tile-test h3
{
    margin-bottom: min(max(4px, calc(0.25rem + ((1vw - 4px) * 1.5))), 10px);
}


.benefits-grid > .wp-block-group__inner-container
{
    display: grid;
    gap: min(max(8px, calc(0.5rem + ((1vw - 4px) * 3))), 20px);
}

@media only screen and (min-width: 700px)
{
    .benefits-grid > .wp-block-group__inner-container
    {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media only screen and (min-width: 1024px)
{
    .benefits-grid > .wp-block-group__inner-container
    {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

/*</editor-fold>*/

/*<editor-fold desc="We are an IT company">*/
.text-image-grid > div
{
    display: grid;
    margin-bottom: var(--sp-150-120-80);
    margin-top: var(--sp-150-120-80);
    padding: min(max(50px, calc(3.125rem + ((1vw - 8px) * 21.75))), 137px) 0;
    border-top: 1px solid #3D414D;
    border-bottom: 1px solid #3D414D;
    gap: 44px;
    align-items: center;
}

.text-image-grid > div img.wp-image-3018
{
    margin: auto;
    display: block;
}

.text-image-grid-right img
{
    margin-bottom: min(max(20px, calc(1.25rem + ((1vw - 4px) * 2.5))), 30px);
}

.text-image-grid-right h2
{
    margin-bottom: min(max(20px, calc(1.25rem + ((1vw - 8px) * 2.5))), 30px);
}

.text-image-grid-right p
{
    margin-bottom: min(max(30px, calc(1.875rem + ((1vw - 8px) * 5))), 50px);
}

@media only screen and (min-width: 700px)
{
    .text-image-grid > div
    {
        grid-template-columns: 1fr 1fr;
        gap: min(max(20px, calc(1.25rem + ((1vw - 8px) * 20))), 100px);
    }

    .text-image-grid-right img
    {
        margin-bottom: min(max(30px, calc(1.875rem + ((1vw - 8px) * 3))), 42px);
    }
}

/*</editor-fold>*/

/*<editor-fold desc="Your resume PROs">*/
.resume-pros-grid > div
{
    display: grid;
    gap: min(max(16px, calc(1rem + ((1vw - 4px) * 1.5))), 22px);
    margin-bottom: var(--sp-150-120-80);
}

@media only screen and (min-width: 700px)
{
    .resume-pros-grid > div
    {
        grid-template-columns: 1fr 1fr;
    }
}

.resume-pros-item img
{
    width: 100%;
    object-fit: cover;
    height: auto;
}

.resume-pros-item > div
{
    border-radius: 10px;
    background: #33363F;
    overflow: hidden;
}

.resume-pros-item-inner > div
{
    padding: min(max(16px, calc(1rem + ((1vw - 4px) * 1))), 20px);
}

.resume-pros-item-inner > div h3
{
    margin-bottom: min(max(8px, calc(0.5rem + ((1vw - 4px) * 2))), 16px);
}

.resume-pros-item-inner-title
{
    margin-bottom: min(max(16px, calc(1rem + ((1vw - 4px) * 1))), 20px);
    padding-left: 5px;
    border-left: 3px solid #3483FA;
}


@media only screen and (min-width: 800px)
{
    .resume-pros-grid > div
    {
        gap: min(max(22px, calc(1.375rem + ((1vw - 8px) * 2))), 30px);
    }

    .resume-pros-item-inner > div
    {
        padding: min(max(20px, calc(1.25rem + ((1vw - 8px) * 5))), 40px);
    }
}

/*</editor-fold>*/

/*<editor-fold desc="Pricing">*/
.pricing-grid > div
{
    display: grid;
    gap: min(max(16px, calc(1rem + ((1vw - 4px) * 1))), 20px);
    margin-bottom: var(--sp-150-120-80);
}

.pricing-item .wp-block-buttons > .wp-block-button,
.pricing-item .wp-block-button__link
{
    width: 100%;
}

.pricing-item
{
    padding: min(max(20px, calc(1.25rem + ((1vw - 4px) * 3))), 32px) min(max(16px, calc(1rem + ((1vw - 4px) * 2))), 24px);
    background: #33363F;
    border-radius: 20px;
    --sp-bottom: min(max(16px, calc(1rem + ((1vw - 4px) * 2))), 24px);
    --sp-middle: 20px;
}

.pricing-item > div
{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pricing-item h3
{
    font-weight: 700;
    font-size: min(max(22px, calc(1.375rem + ((1vw - 4px) * 1.5))), 28px);
    line-height: min(max(31px, calc(1.9375rem + ((1vw - 4px) * 0.75))), 34px);
    letter-spacing: 0.02em;
    color: #FDFDFD;
    padding-bottom: var(--sp-bottom);
    margin-bottom: var(--sp-bottom);
    border-bottom: 1px solid #3F424B;
}

.pricing-subheading
{
    font-weight: 700;
    font-size: 16px;
    line-height: 160%;
    color: #FDFDFD;
    margin-top: var(--sp-bottom);
    margin-bottom: var(--sp-middle);
}

.pricing-item ul
{
    padding-bottom: var(--sp-bottom);
}

.pricing-item ul li
{
    margin-bottom: var(--sp-middle);
    padding-left: 34px;
    position: relative;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    color: #A4A6B0;
}

.pricing-item ul li:before
{
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    width: 24px;
    height: 24px;
    background: #3483FA;
    -webkit-mask: url(../image/check.svg);
    mask: url(../image/check.svg);
}

.pricing-slogan
{
    font-weight: 400;
    font-size: min(max(18px, calc(1.125rem + ((1vw - 4px) * 1))), 22px);
    line-height: min(max(29px, calc(1.8125rem + ((1vw - 4px) * 0.5))), 31px);
    letter-spacing: 0.01em;
    color: #A4A6B0;
    padding-top: var(--sp-bottom);
    border-top: 1px solid #3F424B;
    margin-top: auto;
}

.pricing-value
{
    font-weight: 700;
    font-size: min(max(36px, calc(2.25rem + ((1vw - 4px) * 3.5))), 50px);
    line-height: 120%;
    color: #FDFDFD;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.pricing-value sup
{
    font-weight: 500;
    font-size: min(max(28px, calc(1.75rem + ((1vw - 4px) * 2))), 36px);
    line-height: 120%;
    color: #FDFDFD;
}

@media only screen and (min-width: 800px)
{
    .pricing-grid > div
    {
        grid-template-columns: repeat(3, 1fr);
        gap: min(max(20px, calc(1.25rem + ((1vw - 8px) * 2.5))), 30px);
    }

    .pricing-item
    {
        padding: min(max(32px, calc(2rem + ((1vw - 8px) * 2))), 40px) min(max(24px, calc(1.5rem + ((1vw - 8px) * 1.5))), 30px);
        --sp-bottom: min(max(24px, calc(1.5rem + ((1vw - 8px) * 1.5))), 30px);
    }

    .pricing-value
    {
        font-size: min(max(50px, calc(3.125rem + ((1vw - 8px) * 3.75))), 65px);
    }

    .pricing-value sup
    {
        font-size: min(max(36px, calc(2.25rem + ((1vw - 8px) * 2.25))), 45px);
    }
}

/*</editor-fold>*/

/*<editor-fold desc="FAQ">*/
.resume-faq
{
    margin-bottom: var(--sp-150-120-80);
}

.faq-item:not(:last-child)
{
    margin-bottom: 24px;
}

.faq-item > div
{
    border-bottom: 1px solid #3D414D;
    padding-bottom: 24px;
    font-weight: 500;
    font-size: 16px;
    line-height: 160%;
    display: grid;
}

.faq-item-ttl
{
    color: #FDFDFD;
}

.faq-item-txt
{
    color: #A4A6B0;
}

@media only screen and (min-width: 800px)
{
    .faq-item > div
    {
        grid-template-columns: 1fr 1fr;
    }
}

/*</editor-fold>*/

/*<editor-fold desc="Before-after Slider Section">*/
.before-after-slider-section
{
    margin-bottom: var(--sp-150-120-80);
}

.before-after-slider-item > div
{
    position: relative;
}

.before-after-slider-item
{
    background: #33363F;
    border-radius: 20px;
}

.before-after-slider-item > div
{
    width: 100%;
    max-width: 583px;
    margin: auto;
}

.before-after-slider-item > div figure
{
    width: 100%;
}

/*</editor-fold>*/

/*<editor-fold desc="Resume Service Inner Pages">*/
.resume-service-section
{
    padding-top: var(--sp-120-80-56);
    padding-bottom: var(--sp-150-120-80);
}

.resume-service-grid > div
{
    display: grid;
    gap: min(max(24px, calc(1.5rem + ((1vw - 4px) * 5.3333))), 40px);
    align-items: flex-end;
}

.resume-service-txt
{
    font-size: min(max(18px, calc(1.125rem + ((1vw - 4px) * 0.6667))), 20px);
    margin-bottom: min(max(24px, calc(1.5rem + ((1vw - 4px) * 5.3333))), 40px);
    font-weight: 400;
}

.resume-service-form-container
{
    background: #33363F;
    border-radius: 20px;
    padding: var(--pb) var(--pi);
    --pb: min(max(24px, calc(1.5rem + ((1vw - 4px) * 2.6667))), 32px);
    --pi: min(max(16px, calc(1rem + ((1vw - 4px) * 2.6667))), 24px);
}

.inner-page-description
{
    background: transparent;
    border: 2px solid #33363F;
}

.inner-page-description .pricing-slogan
{
    padding-top: 14px;
}

.inner-page-description .pricing-value
{
    margin-bottom: 0;
}

.resume-service-form-container .btn-holder.wp-block-button > p .wpcf7-spinner
{
    margin: 0 12px;
}

.resume-service-form-container .btn-holder.wp-block-button > p span + span
{
    font-size: 14px;
}

.form-files-grid > p
{
    display: grid;
    gap: 20px;
}

.form-files-grid .file-label
{
    padding: 20px;
    border: 2px dashed #A4A6B0;
    border-radius: 8px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
}

.form-files-grid .file-label .wpcf7-not-valid-tip
{
    position: relative;
    text-align: left;
    top: 0;
    left: 0;
    right: auto;
    padding: 7px 0 0;
}

.file-label input
{
    display: none;
}

.file-label-content
{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.file-label-content .upload-title
{
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    display: grid;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    height: 29px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    grid-template-columns: auto 1fr;
    width: 100%;
}

.file-label-content .upload-title:before
{
    content: '';
    width: 24px;
    height: 28px;
    background-color: #A4A6B0;
}

.file-label-content .resume.upload-title:before
{
    -webkit-mask: url(../image/icon-resume.svg);
    mask: url(../image/icon-resume.svg);
}

.file-label-content .photo.upload-title:before
{
    -webkit-mask: url(../image/icon-photo.svg);
    mask: url(../image/icon-photo.svg);
}

.contact-form_grid .upload-text br
{
    display: block;
}

.with-file
{
    color: #fff;
}

.with-file.upload-title:before
{
    background: #fff;
}

.form-note
{
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
    text-align: center;
    color: #A4A6B0;
    padding: min(max(24px, calc(1.5rem + ((1vw - 8px) * 1.5))), 30px) 0 min(max(40px, calc(2.5rem + ((1vw - 8px) * 2.5))), 50px);
}

.back-btn
{
    margin-bottom: 32px;
}

.back-btn a
{
    display: flex;
    height: 25px;
    gap: 8px;
    align-items: flex-end;
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0.03em;
    --text-color: #A4A6B0;
    color: var(--text-color);
    width: max-content;
    transition: none;
}

.back-btn a:hover
{
    --text-color: #fff;
    text-decoration: none;
}

.back-btn a:before
{
    content: '';
    width: 24px;
    height: 24px;
    background: var(--text-color);
    -webkit-mask: url(../image/chevron-left.svg);
    mask: url(../image/chevron-left.svg);
    transition: none;
}

@media only screen and (min-width: 800px)
{
    .resume-service-grid > div
    {
        grid-template-columns: auto 370px;
        gap: min(max(32px, calc(2.5rem + ((1vw - 8px) * -2))), 40px);
    }

    .resume-service-txt
    {
        font-size: min(max(20px, calc(1.25rem + ((1vw - 8px) * 1))), 24px);
        margin-bottom: min(max(40px, calc(2.5rem + ((1vw - 8px) * 5))), 60px);
    }

    .resume-service-form-container .btn-holder.wp-block-button > p span + span
    {
        font-size: 14px;
    }

    .resume-service-form-container .btn-holder.wp-block-button > p
    {
        display: flex;
        align-items: center;
    }

    .resume-service-form-container
    {
        --pb: min(max(32px, calc(2rem + ((1vw - 8px) * 2))), 40px);
        --pi: min(max(24px, calc(1.5rem + ((1vw - 8px) * 4))), 40px);
    }

    .form-files-grid > p
    {
        grid-template-columns: calc(50% - 10px) calc(50% - 10px);
    }

    .form-note
    {
        text-align: left;
    }

}

.coming-soon-container
{
    position: relative;
}

.coming-soon-container::after
{
    content: "Coming Soon";
    font-size: 22px;
    padding: 20px 24px;
    border-radius: 8px;
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    color: #fff;
    background: #33363F;
    border: 2px solid var(--clr-accent);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition-duration: 0.3s;
}

.coming-soon-container:hover::after
{
    opacity: 1;
    top: -50%;
}

/*</editor-fold>*/

.tk-contact__grid h3
{
    font-weight: normal;
    font-size: clamp(20px, calc(0.42rem + 2.78vw), 28px);
    line-height: 1.6;
    color: var(--clr-primary-txt);
    margin-bottom: clamp(30px, calc(0.83rem + 3.47vw), 40px);
}

.tk-contact__grid ul
{
    counter-reset: contact;
}

.tk-contact__grid ul li
{
    position: relative;
    padding-left: 64px;
    margin-bottom: 42px;
    letter-spacing: 0.9px;
    line-height: 1.8;
}

.tk-contact__grid ul li::before
{
    counter-increment: contact;
    content: counter(contact);
    position: absolute;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-content: center;
    border: 2px solid #28477C;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 80px;
}

.tk-contact__grid ul li:not(:last-of-type)::after
{
    content: '';
    width: 0;
    height: 100%;
    position: absolute;
    top: 40px;
    right: 0;
    bottom: 0;
    left: 20px;
    border-left: 1px dashed #28477C;
}

.home-partners-grid
{
    display: grid !important;
    gap: 30px !important;
    --the-gap: min(max(16px, calc(1rem + ((1vw - 4.8px) * 6.3636))), 30px);
}

.home-partners-item
{
    border-radius: 10px;
    border: 1px solid #3D414D;
}

.home-partners-item > div
{
    border-bottom: 1px solid #3D414D;
    width: 100%;
    height: min(max(120px, calc(7.5rem + ((1vw - 8px) * 10))), 160px);
    padding-left: var(--the-gap);
    padding-right: var(--the-gap);
}

.home-partners-item > div img
{
    width: auto;
    max-height: min(max(90px, calc(5.625rem + ((1vw - 8px) * 5.25))), 111px) !important;
}

.home-partners-item > p
{
    padding: 24px var(--the-gap) var(--the-gap);
}

@media screen and (min-width: 768px)
{
    .home-partners-grid
    {
        grid-template-columns: 1fr 1fr;
        --the-gap: min(max(30px, calc(1.875rem + ((1vw - 8px) * 2.5))), 40px);
    }
}

.form-wrapper
{
    padding: min(max(20px, ((100vw - 480px) / 5.1429) + 20px), 160px) 0;
}