/* -----------------
Style One 
------------------*/
.style-1 .codexup-service-left .item {
    gap: 100px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 35px;
    margin-bottom: 35px;
    border-bottom: 1px dashed #00000067;
}

.style-1 .codexup-service-right {
    position: absolute;
    right: 0;
    top: 30px;
    width: 610px;
    height: 610px;
}

.style-1 .codexup-service-right .thumb {
    position: absolute;
    top: 0;
    right: 0;
    transition: all 1s;
    overflow: hidden;
    opacity: 0;
    width: 100%;
    height: 100%;
}

.style-1 .codexup-service-right .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.style-1 .codexup-service-right .meta {
    position: absolute;
    width: 100%;
    z-index: 3;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 30px 15px;
}

.style-1 .codexup-service-right .meta li {
    background: #fff;
    padding: 5px 10px;
    border-radius: 100px;
    transition: all 0.3s;
}

.style-1 .codexup-service-left .title a {
    background-image: linear-gradient(transparent calc(100% - 2px), currentColor 2px);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 1s;
    padding-bottom: 5px;
}

.style-1 .codexup-service-left .title:hover a {
    background-size: 100% 100%;
}


/* -----------------
Style Two 
------------------*/
.style-2 .codexup-service-item {
    gap: 140px;
    display: grid;
    grid-template-columns: 60px 1fr 0.9fr 60px;
    overflow: hidden;
    padding-bottom: 35px;
    margin-bottom: 35px;
    border-bottom: 1px dashed #00000067;
    overflow: hidden;
    transition: all 0.5s;
    cursor: pointer;
}

.style-2 .codexup-service-item .title {
    transition: all 0.3s;
}

.style-2 .codexup-service-item .thumb {
    height: 132px;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    transition: all 0.5s;
}

.style-2 .codexup-service-item .thumb img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: all 0.5s;
}

.style-2 .codexup-service-item.expanded .thumb {
    height: 600px;
}

.style-2 .codexup-service-item .meta {
    gap: 5px;
    display: flex;
    flex-wrap: wrap;
}

.style-2 .codexup-service-item .meta li {
    transition: all 0.3s;
}

.codexup-service-item .read-btn a {
    writing-mode: sideways-lr;
    text-orientation: mixed;
    padding: 20px 15px;
    text-decoration: none;
    display: block;
    transition: all 0.4s;
    background-color: #000000;
    color: #FFFFFF;
    border-radius: 10px;
}

.codexup-service-item .read-btn a:hover {
    background-color: #C4F112;
    color: #000000;
}

.codexup--service.style-2 .number {
    align-self: flex-start;
}


@media (max-width: 991px) {
    .style-1 .codexup-service-right .thumb {
        display: none;
    }
}


@media (max-width: 767px) {
    .style-2 .codexup-service-item {
        grid-template-columns: 1fr;
    }

    .codexup-service-item .read-btn a {
        writing-mode: inherit;
        text-orientation: inherit;
        display: inline-block;
    }
}