.green-highlight strong {
    display: inline-block;
    font-weight: 500;
    padding-left: .75rem;
    padding-right: .75rem;
    position: relative;
    --tw-text-opacity: 1;
    color: rgba(16,15,15,var(--tw-text-opacity));
    z-index: 10
}

.green-highlight strong:before {
    content: "";
    z-index: -1;
    bottom: 42%;
    height: 95%;
    background-color: var(--mustard);
    border-radius: .75rem;
    position: absolute;
    left: 0;
    width: 100%;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-translate-y: 50%
}

@media(min-width: 768px) {
    .green-highlight strong:before {
        border-radius:1rem
    }
}

@media(min-width: 1536px) {
    .green-highlight strong:before {
        border-radius:1.5rem
    }
}
.pb-7{
    padding-bottom: 5.5rem;
}
.pb-10{
    padding-bottom: 6rem !important;
}

.pb-15{
    padding-bottom: 9rem !important;
}

.duration-1000 {
    transition-duration: 1s
}

.transition {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-timing-function: cubic-bezier(.1, .6, .4, 1);
    
}

.opacity-20 {
    opacity: .2
}

.sec-title{
    font-size: 1.5rem;
}
.sec-sub-title{
    font-size: 1rem;
}

.img-container{
    width: 100%;
    object-fit: contain;
}
.img-container img{
    width: 80%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.-translate-y-6 {
    --tw-translate-y: -1.5rem;
}
.transform {
   
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
}
.transform {
    transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.tracking-tighter {
    letter-spacing: -.05em;
}

.leading-tight {
    line-height: 1.25;
}

.work-right .texts{
    padding-left: 2rem;
}

.li-points{
    padding-left: 2rem;
}

.li-points li{
    list-style: disc;
}

.main-line-head{
    
    width: 0.125rem;
    height: 2rem;
    background-color: var(--mustard);
}

.main-line > div:first-child {
    background-color: var(--custom-blue);
    opacity: 0.2;
}

.main-line > div:nth-child(2) {
    background-color: var(--mustard);
}


.h-full {
    height: 100%
}

.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgba(0, 0, 0, var(--tw-bg-opacity))
}

.bg-opacity-20 {
    --tw-bg-opacity: 0.2
}

.h-1\/2 {
    height: 50%
}

.bg-primary-500 {
    --tw-bg-opacity: 1;
    background-color: rgba(0, 218, 144, var(--tw-bg-opacity))
}


.ring-ponter{

    width: 0.75rem;
    height: 0.75rem;
    top: 0;
    left: 0.95rem;

    background-color: var(--mustard);
    --tw-translate-x: 66.666667%;

   
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity));
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent);
}

.w-0\.5 {
    width: .125rem
}
.h-screen {
    height: 100vh
}
.h-2rem {
    height: 2rem
}
.ml-1\/12 {
    margin-left: 8.33333%
}



.pointer-events-none {
    pointer-events: none
}

.-translate-x-1 {
    --tw-translate-x: -0.25rem
}

.hover\:-translate-x-1:hover {
    --tw-translate-x: -0.25rem
}

.ml-1\/12 {
    margin-left: 8.33333%
}

.text-md {
    font-size: 1.125rem;
}
.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgba(54, 54, 54, var(--tw-text-opacity))
}


.z-10 {
    z-index: 10
}
.z-20 {
    z-index: 20
}


/*
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
*/

@media (min-width: 576px) {
    .work-right .texts{
        padding-left: 4rem;
    }
}

@media (min-width: 640px){
    
    .sm--translate-x-14 {
        --tw-translate-x: -3.5rem
    }
}

@media (min-width: 768px) { 
    .sec-title{
        font-size: 2.5rem;
    }
    .work-right .texts{
        padding-left: 0;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .sec-sub-title{
        font-size: 1.375rem;
    }

    .img-container img{
        width: 50%;
        object-fit: contain;
        margin: 0 auto;
        display: block;
    }
}

/* // Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .sec-title{
        font-size: 2.813rem;
    }
    .ring-ponter {
        left: calc(100% - 0.45rem) !important;
    }
    .work-right .texts {
        padding-left: calc(50% - 10rem);
        align-items: flex-start;
    }

    .main-line-head {
        margin-left: calc(100% + 2px) !important;
    }
    .main-line{
        margin-left: calc(100% + 0.1rem)
    }
}


@media (min-width: 1024px){
    
    .img-container img{
        width: 28rem;
    }
   
    
    .lg\:ml-4\/12 {
        margin-left: 33.33333%
    }
    .lg\:ml-4\/12 {
        margin-left: 33.33333%
    }
}
/* // X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .sec-sub-title{
        font-size: 1.575rem;
    }
    .main-line-head {
        margin-left: calc(100% + 1px) !important;
    }
}


@media (min-width: 1280px) {
    .xl\:ml-6\/12 {
        margin-left: 50%
    }
    .main-line-head {
        margin-left: calc(100% + 2px) !important;
    }
    .main-line{
        margin-left: calc(100% + 0.1rem)
    }
}

/* // XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
    .sec-title{
        font-size: 2.8rem;
    }
    .main-line-head {
        margin-left: calc(100% + 1px) !important;
    }
}

@media (min-width: 1536px) {
    .sec-title{
        font-size: 3.3rem;
    }
}