/*####################################### Banner taskrabbit CSS#########################################*/

.hence-forth-gojek-page h1 span {
    color: #00AA13;
    font-weight: 700;
}

.why-gojeck-henceforth-content p {
    line-height: 30px;
}


/*####################################### Why Invest CSS#########################################*/
section.why-invest-gojek {
    position: relative;
    overflow: hidden;
}

.why-invest-gojek-heading h3 span {
    background: linear-gradient(226.69deg, #FFB199 0%, #FF0844 100%);
    font-weight: 700;
}

.why-invest-gojek-box {
    background: #FFFFFF;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    padding: 40px;
}

.why-invest-gojek-icon img {
    max-width: 90px;
    max-height: 90px;
    object-fit: cover;
    margin-bottom: 24px;
}

/*################################### Gojek Services ####################################*/
section.gojek-services-provide {
    background: #FAFAFA;
}

.gojek-services-provide-main-heading h3 span {
    background: linear-gradient(180deg, #04EA6F 0%, #00D563 100%);
}

.gojek-services-provide-spacing button {
    margin-top: 40px;
}

.gojek-services-provide-box {
    background: #FFFFFF;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.16);
    border-radius: 12px;
    margin-bottom: 24px;
    padding: 40px;
}

.gojek-services-provide-icon-counter {
    margin-bottom: 24px;
}

.gojek-services-provide-box h5 {

    color: #212529;
}

.gojek-services-provide-box p {

    color: #334055;
}

.gojek-services-provide-icon-counter img {
    max-width: 80px;
    max-height: 80px;
    object-fit: cover;
}

/* .scroll-class {
    height: 600px;
    overflow-y: scroll;
} */


/*####################################### CLone Solution CSS#########################################*/
.gojek-clone-solutions-card h5 {

    margin: 0;
    margin-bottom: 12px;
}

.gojek-clone-solutions-heading h3 span {
    background: linear-gradient(226.75deg, #00FFD6 0%, #02AAB0 100%, #02C1C8 100%);
}

.gojek-clone-solutions-card {
    background: #FFFFFF;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    padding: 20px;
}

.gojek-clone-solutions-card img {
    width: 100%;
    max-width: 100%;
    max-height: 270px;
    object-fit: cover;
}

/*####################################### Gojek features CSS#########################################*/
section.gojek-features {
    position: relative;
}

section.gojek-features::before {
    background: linear-gradient(153deg, rgba(0, 198, 255, 0.1) 0.81%, rgba(0, 114, 255, 0.1) 100.02%);
    filter: blur(200px);
    content: '';
    border-radius: 12px;
    position: absolute;
    width: 600px;
    height: 600px;
    left: 0px;
    bottom: -50px;
    z-index: -1;
}

section.gojek-features::after {
    position: absolute;
    content: '';
    width: 600px;
    height: 600px;
    right: 0px;
    bottom: -50px;
    background: rgba(255, 0, 61, 0.06);
    filter: blur(200px);
    border-radius: 12px;
    z-index: -1;

}

.gojek-features-heading h3 span {
    background: linear-gradient(226.69deg, #FFB199 0%, #FF0844 100%);
}

.gojek-features-box h5 {
    position: relative;
}

.gojek-features-box h5::before {
    position: absolute;
    content: '';
    bottom: -12px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 85px;
    height: 6px;
    background: #ACDEE7;
}

.gojek-features-custom-box:nth-child(2) .gojek-features-box h5::before {
    background: #FFCDB3;
}

.gojek-features-custom-box:nth-child(3) .gojek-features-box h5::before {
    background: #C7DBDA;
}

.gojek-features-custom-box:nth-child(4) .gojek-features-box h5::before {
    background: #FF9689;
}

.gojek-features-custom-box:nth-child(5) .gojek-features-box h5::before {
    background: #F3B0C2;
}

.gojek-features-custom-box:nth-child(6) .gojek-features-box h5::before {
    background: #CCAACB;
}

.gojek-features-custom-box:nth-child(7) .gojek-features-box h5::before {
    background: #B7CFB7;
}

.gojek-features-custom-box:nth-child(8) .gojek-features-box h5::before {
    background: #FFCDB3;
}

.gojek-features-custom-box:nth-child(9) .gojek-features-box h5::before {
    background: #8FC9CA;
}

.gojek-features-box {
    border-radius: 20px;
    padding: 40px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
}

.gojek-features-box:hover {
    background: #FFFFFF;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease-in-out;
}

/*####################################### Hire Developer CSS#########################################*/
.hire-developer-bg {
    background-color: #0E151A;
    border-radius: 24px;
    overflow: hidden;
}

.gojek-hire-developer-image img {
    width: 100%;
}

.gojek-hire-developer-content {
    padding: 40px;
}


/*####################################### Why Gojek CSS#########################################*/
.why-gojek-henceforth-heading h3 span {
    background: linear-gradient(46.19deg, #FF512F 5.66%, #F09819 94.35%);
}

.why-gojeck-henceforth-stats-box {
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 20px;
}

.why-gojeck-henceforth-stats-box h5 {
    background: linear-gradient(180deg, #04EA6F 0%, #00D563 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/*####################################### Media CSS#########################################*/


@media all and (min-width:1200px) and (max-width:1450px) {}

@media all and (max-width:1199px) {
    .gojek-features-box {
        border-radius: 20px;
        padding: 30px;
    }


}

@media all and (min-width:768px) and (max-width:991px) {

    .gojek-hire-developer-content {
        padding: 20px 12px;
    }

}

@media all and (max-width:767px) {
    .why-gojeck-henceforth-content p {
        line-height: 25px;
    }

    section.gojek-features::after,
    section.gojek-features::before {
        display: none;
    }

    .custom-overflow {
        position: unset !important;
    }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .fixme {
        position: fixed;
        width: 35%;
        top: 20%;

    }
}

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .fixme {
        position: fixed;
        width: 35%;
        top: 30%;

    }

}

/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width:1400px) and (max-width:2024px) {
    .fixme {
        position: fixed;
        width: 30%;
        top: 12%;
    }
}