@media only screen and (max-width: 600px) {

    @font-face {
        font-family: 'Sharp';
        src: url('../font/Sharp.otf');
    }
    
    @font-face {
        font-family: 'Sharp-Bold';
        src: url('../font/Sharp_bold.otf');
    }
    
    
    .text-sharp{
        font-family: 'Sharp';
    }
    
    .text-sharp-bold{
        font-family: 'Sharp-Bold';
    }
    
    :root{
        --main:#2A1B3D;
        --light_main:#EFEAF2;
        --second:#667085;
        --greenish : #eae7dce9;
        --green: #4A7C59;
        --slate:#667085;
        --gold:#C29241;
        --blue:#0079FF;
        --light_blue : #E6F2FF;
    }

    .text-main{
        color: var(--main) !important;
    }
    .text-second{
        color: var(--second) !important;
    }
    .text-green {
        color: var(--green) !important;
    }
    .text-greenish {
        color: var(--greenish) !important;
    }
    .text-blue{
        color: var(--blue) !important;
    }
    .text-justify{
        text-align: justify;
    }
    .text-slate{
        color: var(--slate);
    }

    .bg-main{
        background-color: var(--main) !important;
    }

    .bg-blue{
        background-color: var(--blue);
    }

    .bg-light-blue{
        background-color: var(--light_blue);
    }

    .bg-green{
        background-color: var(--green) !important;
    }

    .bg-gold{
        background-color: var(--gold) !important;
    }

    .bg-light-main{
        background-color: var(--light_main) !important;
    }
    .boder-main{
        border: 2px solid var(--main) !important;
    }
    /* font */
    .fs-1em{
        font-size: 1em;
    }
    .fs-2em{
        font-size: 2em;
    }
    .fs-3em{
        font-size: 3em;
    }
    .fs-4em{
        font-size: 4em;
    }
    .fs-5em{
        font-size: 5em;
    }

    .fs-1rem{
        font-size: 1rem;
    }
    .fs-2rem{
        font-size: 2rem;
    }
    .fs-3rem{
        font-size: 3rem;
    }
    .fs-4rem{
        font-size: 4rem;
    }
    .fs-5rem{
        font-size: 5rem;
    }

    /* component */
    .input{
        background-color: #ffffff00;
        border: 1.5px solid white;
        border-radius: .5rem;
        padding: 1em;
        width: 100%;
    }
    .input::placeholder{
        color: white;
    }
    .input:focus {
        outline: none;
    }

    .input-2{
        background-color: #FFF;
        border: 1.5px solid #CCBFD5;
        border-radius: .5rem;
        padding: 1em;
        width: 100%;
    }
    .input-2::placeholder{
        color: #CCBFD5;
    }
    .input-2:focus {
        outline: none;
    }
    .owl-buttons-product{
        display: flex;
        justify-content: space-between;
        width: 55%;
        position: absolute;
        left: 22%;
        top: 50%;
        z-index: 10;
    }

    .owl-buttons-product > button{
        border: none;
        border-radius: 100%;
        height: 2.5rem;
        width: 2.5rem;
        background-color: white;
        box-shadow: 0px -3px 5px 0px #00000017;
        box-shadow: 0px 12px 13px 0px #0000002B;
        box-shadow: 0px 4px 6px 0px #0000001F;
        box-shadow: 0px -12px 30px 0px #0000001F;
        box-shadow: 0px 54px 55px 0px #00000040;
    }
    .prev-product, .next-prdouct {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: red;
    }

    .gallery,.gallery-2 {
        display: flex;
        width: 100%;
        gap: 1em;
        flex-grow: 1;
    }

    .gallery .item,.gallery-2 .item {
        height: 15em;
        transition: width 0.5s ease; 
        background-size: cover;
        display: flex;
        flex-direction: column;
        align-items: start;
        padding: 1em;
        color: white;
        font-weight: 700;
        background-color: rgba(0, 0, 0, 0.3); /* Adjust the opacity as needed */
        background-blend-mode: overlay; 
        border-radius: 1em;
    }

    .swiper-slide {
        width: 300px; /* Adjust as needed */
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: #fff;
    }
    /* Style for the card title */
    .card-title {
        font-size: 20px;
        margin-bottom: 10px;
    }
    /* Style for the card content */
    .card-content {
        font-size: 16px;
    }
    button:focus {
        outline: 0;
    }

    .owl-carousel-stacked {
        margin-top: 20px;
    }
    .owl-carousel .item {
        height: 30em;
    }

    .owl-carousel-stacked .owl-item.center {
        transform: scaleY(0.95) scaleX(2)  !important;
        /* transform: scaleX(1.6) !important; */
        /* transform: scale(1.2) !important; */
        -webkit-box-shadow: 0px 0px 55px -12px rgba(0, 0, 0, 0.74);
        -moz-box-shadow: 0px 0px 55px -12px rgba(0, 0, 0, 0.74);
        box-shadow: 0px 0px 55px -12px rgba(0, 0, 0, 0.74);
    }

    .owl-carousel-stacked .owl-item {
        transition: all 0.5s;
        transform: scale(0.7) !important;
    }

    .owl-carousel-stacked .left-of-center {
        transform: scale(0.7) translateX(10%) !important;
    }

    .owl-carousel-stacked .right-of-center {
        transform: scale(0.7) translateX(-10%) !important;
    }

    .owl-carousel-stacked .center {
        z-index: 2;
    }


    .owl-carousel-stacked .owl-carousel {
        position: relative;
    }

    .owl-carousel-stacked .owl-prev,
    .owl-carousel-stacked .owl-next {
        position: absolute;
        top: 50%;
        margin-top: -10px;
        cursor: pointer;
        color: #ddd !important;
    }

    .owl-carousel-stacked .owl-prev {
        left: 0;
    }

    .owl-carousel-stacked .owl-next {
        right: 0;
    }

    .owl-carousel-stacked .owl-dots {
        text-align: center;
    }

    .owl-carousel-stacked .owl-dot {
        cursor: pointer;
        background-color: #ddd !important;
        width: 20px;
        height: 20px;
        display: inline-block;
        margin: 10px 2px;
    }

    .owl-carousel-stacked .owl-dot.active {
        background-color: #d2181f !important;
    }

    .owl-carousel-stacked .owl-stage-outer {
        padding: 25px 0;
    }


    .card-article{
        border-radius: 1em;
        border: 1.5px solid white;
        cursor: pointer;
        transition: background-color .3s;
    }

    .card-article:hover{
        background-color: var(--gold);
    }


    .card-article .card-top{
        background-color: white;
        border-top-left-radius: 0.8rem;
        border-top-right-radius: 0.8em;
        overlay:auto;
        padding: 1em;
    }

    .card-article .card-top .list-badge{
        display: flex;
        margin: 1em 0em;
        gap: 1em;
    }

    /* about item product */
    .item-product {
        border-radius: .5em;
    }

    .owl-about .owl-dots{
        position: absolute;
        bottom: .5em;
        left: 1.5em;
    }

    .img-layanan{
        height: 18em;
    }
    .img-layanan-2{
        height: 20em;
    }

    .col-layanan {
        height: 100%;
    }

    .col-layanan-2 {
        height: 20em;
    }

    .card-main-product {
        box-shadow: 12px 2px 16px 0px #2A1B3D33;
        /* box-shadow: -6px -2px 16px 0px #FFFFFFCC; */
        box-shadow: 6px 2px 16px 0px #2A1B3D33;

        border-radius: 10px;
    }

    .card-sec-product {
        background-color: white;
        border-radius: 1em;
        overflow: auto;
    }

    .badge-filter{
        background-color: var(--main);
        font-weight: 700;
        font-size: 1.2rem;
        color: white;
        padding: .7em 1.5em;
        min-width: 7em;
    }

    .badge-filter-active{
        background-color: var(--gold);
        font-weight: 700;
        font-size: 1.2rem;
        color: white;
        padding: .7em 1.5em;
        min-width: 7em;
    }

    .filter-produk{
        background-color: white;
        border-radius: 0.5rem;
        width: 100%;
        padding: 0.5em 1em;
        font-weight: 700;
        font-size: 1.2em;
        transition: all ease-in-out .2s;
    }

    .filter-produk:hover{
        background-color: var(--main);
        border-radius: 0.5rem;
        width: 100%;
        padding: 0.5em 1em;
        font-weight: 700;
        font-size: 1.2em;
        color: white;
    }

    .filter-produk img{
        height: 4em;
        border-radius: 0.5rem;
    }

    .detail-produk{
        background-color: white;
        border-radius: 1em;
        padding: 1em;
    }

    .col-step{
        width: 10rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .gallery,.gallery-2 {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 1em;
        flex-grow: 1;
    }
    
    .gallery .item,.gallery-2 .item {
        height: 15em;
        transition: width 0.5s ease; 
        background-size: cover;
        display: flex;
        flex-direction: column;
        align-items: start;
        padding: 1em;
        color: white;
        font-weight: 700;
        background-color: rgba(0, 0, 0, 0.3); /* Adjust the opacity as needed */
        background-blend-mode: overlay; 
        border-radius: 1em;
    }
    /* galery 1 */
    .gallery .item:nth-child(1) {
        width: 100%;
    }
    .gallery .item:nth-child(1):hover {
        width: 100%;
    }
    .gallery .item:nth-child(2) {
        width: 100%;
    }
    .gallery .item:nth-child(2):hover{
        width: 100%;
    }
    .gallery-2 .item:nth-child(1) {
        width: 100%;
    }
    .gallery-2 .item:nth-child(1):hover {
        width: 100%;
    }
    .gallery-2 .item:nth-child(2) {
        width: 100%;
    }
    .gallery-2 .item:nth-child(2):hover {
        width: 100%;
    }
    
    
    .item .detail {
        background-color: #ffffff00;
        padding: 0.5em; 
        transition: background-color 0.5s ease;
        border: 1.5px solid white;
        padding: 0.5em 1em;
        border-radius: 2em;
        background-color: var(--main);
        width: 100%;
        text-align: center;
    }
    
    .gallery .item:hover .detail {
        color: black;
    }
    
    .gallery-2 .item:hover .detail {
        color: black;
    }

  }