@layer utilities {
    /* Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }
}
@font-face {
    font-family: DMSans Regular;
    src: url(../fonts/DM_Sans/DMSans-Regular.ttf);
}
html {
    --image-gradient: linear-gradient(
        to bottom left,
        rgba(68, 67, 84, 0.7),
        rgba(68, 67, 84, 0.8)
    );
    overflow-x: hidden !important;
}
body {
    font-family: "DMSans Regular" !important;
}
.py-20 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.hero-about {
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-layanan {
    background-repeat: no-repeat;
    background-size: cover;
    /* height: 450px; */
}
.hero-landing{
    background-repeat: no-repeat;
    background-size: 51.188rem 32.563rem;
    background-position: top right;
    background-image: url('../images/home/group_working_office.png');
}
.hero-landing-mobile{
    display: hidden;
}
.hero-blog {
    background-repeat: no-repeat;
    background-size: cover;
    /* height: 450px; */
}

.circle-left {
    background: radial-gradient(
        circle,
        rgba(232, 244, 242, 0.3) 0%,
        rgba(232, 244, 242, 1) 100%
    );
    filter: blur(35px);
    border-radius: 50%;
    width: 250px;
    height: 250px;
    left: -80%;
    top: -15%;
    transform: translateX(80%);
    position: absolute;
    z-index: -10;
}

.circle-right {
    background: radial-gradient(
        circle,
        rgba(232, 244, 242, 0.3) 0%,
        rgba(232, 244, 242, 1) 100%
    );
    filter: blur(35px);
    border-radius: 50%;
    width: 250px;
    height: 250px;
    left: 180%;
    top: -15%;
    transform: translateX(-180%);
    position: absolute;
    z-index: -10;
}

@media (min-width: 1280px) {
    .circle-left {
        left: -60%;
        top: 45%;
        transform: translate(60%, -45%);
        width: 350px;
        height: 350px;
    }
    .circle-right {
        left: 150%;
        top: 45%;
        transform: translate(-150%, -45%);
        width: 350px;
        height: 350px;
    }
}
.gradient-webDev {
    background: linear-gradient(
        180deg,
        rgba(3, 169, 244, 1) 0%,
        rgba(3, 169, 244, 1) 100%
    );
}

@media (min-width: 1024px) {
    .gradient-webDev {
        background: linear-gradient(
            180deg,
            rgba(63, 81, 181, 1) 0%,
            #ffffff 100%
        );
    }
}
.card-step {
    box-shadow: 10px 10px 21px 0px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 10px 10px 21px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 10px 10px 21px 0px rgba(0, 0, 0, 0.25);
}
.cards {
    display: grid;
    grid-auto-columns: 95%;
    grid-column-gap: 20px;
    grid-auto-flow: column;
    padding: 25px 0px;
    list-style: none;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    max-width: 95%;
}

.cards::-webkit-scrollbar {
    height: 12px;
}

@media only screen and (max-width: 500px) {
    .g-recaptcha {
        transform: scale(100%);
        transform-origin: 0 0;
    }
}

@media (min-width: 500px) {
    .cards {
        grid-auto-columns: calc(50% - 10px);
        grid-column-gap: 20px;
    }
}

@media (min-width: 700px) {
    .cards {
        grid-auto-columns: calc(calc(90% / 2) - 20px);
        grid-column-gap: 30px;
    }
}

@media (min-width: 1100px) {
    .cards {
        grid-auto-columns: calc(40% - 100px);
        /* grid-auto-columns: calc(25% - 30px); */
        grid-column-gap: 40px;
    }
}
@media only screen and (max-width: 1100px) {
    .hero-landing-mobile{
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-image: url('../images/home/hero-landing-mobile.png');
    }
    .text-custom{
        color: #ffffff;
    }
}
@media only screen and (max-width: 1024px) {
    #navbar-default{
        color:#fff;
    }
}
#lowonganContent ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    list-style-type: none;
}

#lowonganContent ol li {
    border-width: 0.14em;
    border-color: rgb(96 165 250);
    padding: 0.5em 1em;
    border-radius: 0.75rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

#lowonganContent ol li:hover {
    background-color: rgb(59 130 246);
    color: white;
    border-color: rgb(59 130 246);
}