.work-text {
    color: var(--grey-1);
}

.work-text > div {
    margin-bottom: 20px;
    
}

.work-text > div .text-2 {
    padding-bottom: 20px;
}


#work-with .blue-box {
    position: absolute;
   
    width: 200px;
    border: 10px solid var(--basic-white);
}

#work-with .section-container > div:nth-of-type(1) .blue-box {
    bottom: -60px;
    right: -45px;
}


#work-with .section-container > div:nth-of-type(2) .blue-box  {
    bottom: -60px;
    left: -45px;
}


#work-with .blue-box span {
    font-size: 64px;
}


.work-text i {
    color:var(--primary-blue);
    width: 0;
    overflow: hidden;
	padding-right: 0px;
    transition: width .3s ease-in-out, padding .3s ease-in-out;
}


.work-text > div:hover h4 , .work-text > div:hover .text-2 {
    color: var(--secondary-blue-dark)
}
.work-text > div:hover i {
    width: 34px;
	padding-right: 10px;
}

.work-option {
	cursor: default;
}

@media (max-width: 767px){
    #work-with .blue-box {
        width: 105px;
    }
    #work-with .blue-box span {
        font-size: 28px;
    }
    #work-with .blue-box .text-1 {
        font-size: 12px;
    }

    #work-with .section-container > div:nth-of-type(1) .blue-box {
        bottom: -45px;
        right: 15px;
    }
    #work-with .section-container > div:nth-of-type(2) .blue-box {
        bottom: -45px;
        left: 15px;
    }

    .work-text h4 {
        color: var(--secondary-blue-dark);
    }
    .work-text .text-2 {
        color: var(--grey-text-color)
    }
}


@media (min-width: 992px){
    .work-text {
        padding-top: 80px;
    }
    #work-with .section-container > div:nth-of-type(2){
        margin-top: 140px;
    }
}