@media screen and (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1260px !important;
    }

}

/* align items */
.align-center {
    align-items: center;
}

/* end of align items */

/* Box Shadow */
.box-shadow-1 {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* End of Box Shadows */

/* background */

.bg-images {
    background-image: url('assets/front/Front/images/bg-images.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    z-index: -2;
    width: 100%;
    max-width: 1600px;
}

/* end of carousel */

.owl-item.active:has(.col-md-3.h-100.slider__item.hide) {
    display: none;
}


.owl-item:has(.col-md-3.h-100.slider__item.hide) {

    display: none;
}

.owl-item:has(.px-1.h-100.slider__item.hide) {

    display: none;
}

.owl-item.active:has(.px-1.h-100.slider__item.hide) {

    display: none;
}

.owl-item.active:has(.px-2.slider__item.hide) {

    display: none;
}

.owl-item.active:has(.px-1.h-100.slider__item.hide) {

    display: none;
}


.hide {
    display: none;
}

@media screen and (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1260px;
    }

}


/* border */
.no-border {
    border: none !important;
}

.br-1 {
    border-radius: 0.8rem;
}

/*  */

/* Display */
.p-abs {
    position: absolute;
}

.d-block {
    display: block !important;
}

@media screen and (max-width: 430px) {
    .d-sm-block {
        display: block !important;
    }
}

@media screen and (min-width: 430px) {
    .d-sm-none {
        display: none !important;
    }
}

/* End of Display */

/* Dynamic font sizes */
.fs-1 {
    font-size: calc(1rem + 1vw) !important;
}

@media screen and (max-width: 540px) {
    .fs-sm-1 {
        font-size: calc(1rem + 1vw) !important;
    }
}

.fs-2 {
    font-size: calc(1rem + 0.5vw) !important;
}

.fs-3 {
    font-size: calc(1rem + 0.25vw) !important;
}

.fs-4 {
    font-size: calc(1rem + 0.125vw) !important;
}

.fs-5 {
    font-size: 1rem !important;
}

.fs-6 {
    font-size: 0.875rem !important;
}

.fs-7 {
    font-size: 0.75rem !important;
}

.fs-8 {
    font-size: 0.625rem !important;
}

.fs-9 {
    font-size: 0.5rem !important;
}


/* left */
.left-1 {
    left: 1em;
}

.left-2 {
    left: 2em;
}

.left-3 {
    left: 3em;
}

/* end of left */


/* Margin */

/*media screen small or mobile  */
@media screen and (max-width: 540px) {

    .my-sm-1 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .my-sm-2 {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .my-sm-3 {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

    .my-sm-4 {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }

    .mx-sm-1 {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .mx-sm-2 {
        margin-left: 2rem;
        margin-right: 2rem;
    }

    .mx-sm-3 {
        margin-left: 3rem;
        margin-right: 3rem;
    }

    .mx-sm-4 {
        margin-left: 4rem;
        margin-right: 4rem;
    }

    .mt-sm-1 {
        margin-top: 1rem;
    }

    .mt-sm-2 {
        margin-top: 2rem;
    }

    .mt-sm-3 {
        margin-top: 3rem;
    }

    .mt-sm-4 {
        margin-top: 4rem;
    }

    .mb-sm-1 {
        margin-bottom: 1rem;
    }

    .mb-sm-2 {
        margin-bottom: 2rem;
    }

    .mb-sm-3 {
        margin-bottom: 3rem;
    }

    .mb-sm-4 {
        margin-bottom: 4rem;
    }
}

/* media screen large or pc */
@media screen and (min-width: 1200px) {
    .my-lg-1 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .my-lg-2 {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .my-lg-3 {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

    .my-lg-4 {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }

    .mx-lg-1 {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .mx-lg-2 {
        margin-left: 2rem;
        margin-right: 2rem;
    }

    .mx-lg-3 {
        margin-left: 3rem;
        margin-right: 3rem;
    }

    .mx-lg-4 {
        margin-left: 4rem;
        margin-right: 4rem;
    }

    .mt-lg-1 {
        margin-top: 1rem;
    }

    .mt-lg-2 {
        margin-top: 2rem;
    }

    .mt-lg-3 {
        margin-top: 3rem;
    }

    .mt-lg-4 {
        margin-top: 4rem;
    }

    .mb-lg-1 {
        margin-bottom: 1rem;
    }

    .mb-lg-2 {
        margin-bottom: 2rem;
    }

    .mb-lg-3 {
        margin-bottom: 3rem;
    }

    .mb-lg-4 {
        margin-bottom: 4rem;
    }


}

/* End of Margin */

/* Overflow */

.overflow-display-hide::-webkit-scrollbar {
    display: none !important;
}

/* End of Overflow */
/* Padding */

@media screen and (max-width: 540px) {
    .pt-sm-1 {
        padding-top: 1rem;
    }

    .pt-sm-2 {
        padding-top: 2rem;
    }

    .pt-sm-3 {
        padding-top: 3rem;
    }

    .pt-sm-4 {
        padding-top: 4rem;
    }

    .pt-sm-5 {
        padding-top: 5rem;
    }

}

@media screen and (min-width: 720px) {
    .pt-md-1 {
        padding-top: 1rem;
    }

    .pt-md-2 {
        padding-top: 2rem;
    }

    .pt-md-3 {
        padding-top: 3rem;
    }

    .pt-md-4 {
        padding-top: 4rem;
    }

    .pt-md-5 {
        padding-top: 5rem;
    }
}

@media screen and (min-width: 960px) {
    .pt-lg-1 {
        padding-top: 1rem;
    }

    .pt-lg-2 {
        padding-top: 2rem;
    }

    .pt-lg-3 {
        padding-top: 3rem;
    }

    .pt-lg-4 {
        padding-top: 4rem;
    }

    .pt-lg-5 {
        padding-top: 5rem;
    }
}


/* End of Padding */

/* text */
.text-decoration.none {
    text-decoration: none !important;
}

.text-uppercase {
    text-transform: uppercase;
}

/* end of text */
/* Position */
.pos-abs {
    position: absolute;
}


.pos-fixed {
    position: fixed;
}

.pos-rel {
    position: relative;
}


.pos-fixed {
    position: fixed;
}

.pos-sticky {
    position: sticky;
}

@media screen and (max-width: 540px) {
    .pos-sm-abs {
        position: absolute;
    }

    .pos-sm-fixed {
        position: fixed;
    }

    .pos-sm-rel {
        position: relative;
    }
}

@media screen and (min-width: 720px) {
    .pos-md-abs {
        position: absolute;
    }

    .pos-md-fixed {
        position: fixed;
    }

    .pos-md-rel {
        position: relative;
    }
}


@media screen and (min-width: 960px) {
    .pos-lg-abs {
        position: absolute;
    }

    .pos-lg-fixed {
        position: fixed;
    }

    .pos-lg-rel {
        position: relative;
    }
}

/* End of Positiom */

/* selecpicker */
.custom-selectpicker .bootstrap-select .dropdown-menu.show {
    /* Your styles go here */
    transform: none !important;
    max-height: none !important;
    /* Add more styles as needed */
}


/* end of selectpicker */

/* visibility */

.md-visibility {
    display: none;
}

@media screen and (min-width: 540px) {
    .md-visibility {
        display: block;
    }
}

/* End of Visibility */

/* Sizing */
.h-min-content {
    height: min-content;
}

.h-fit-content {
    height: fit-content;
}

.h-min-100 {
    min-height: 100% !important;
}

.w-fit {
    width: fit-content !important;
}

.w-100 {
    width: 100%;
}

.w-80 {
    width: 80%;
}

.w-60 {
    width: 60%;
}

.w-50 {
    width: 50%;
}

.w-40 {
    width: 40%;
}

.w-30 {
    width: 30%;
}

.w-25 {
    width: 25%;
}

.w-20 {
    width: 20%;

}

.w-15 {
    width: 15%;
}

.w-10 {
    width: 10%;
}

/* Media screen small / mobile */
@media screen and (max-width: 540px) {
    .w-sm-100 {
        width: 100%;
    }

    .w-sm-80 {
        width: 80%;
    }

    .w-sm-60 {
        width: 60%;
    }

    .w-sm-50 {
        width: 50%;
    }

    .w-sm-40 {
        width: 40%;
    }

    .w-sm-30 {
        width: 30%;
    }

    .w-sm-25 {
        width: 25%;
    }

    .w-sm-20 {
        width: 20%;
    }

    .w-sm-15 {
        width: 15%;
    }

    .w-sm-10 {
        width: 10%;
    }
}

/* Media screen medium / tablet */
@media screen and (min-width: 720px) {
    .w-md-100 {
        width: 100%;
    }

    .w-md-80 {
        width: 80%;
    }

    .w-md-60 {
        width: 60%;
    }

    .w-md-50 {
        width: 50%;
    }

    .w-md-40 {
        width: 40%;
    }

    .w-md-30 {
        width: 30%;
    }

    .w-md-25 {
        width: 25%;
    }

    .w-md-20 {
        width: 20%;
    }

    .w-md-15 {
        width: 15%;
    }

    .w-md-10 {
        width: 10%;
    }
}

/* Media screen large / pc */
@media screen and (min-width: 960px) {
    .w-lg-100 {
        width: 100%;
    }

    .w-lg-80 {
        width: 80%;
    }

    .w-lg-60 {
        width: 60%;
    }

    .w-lg-50 {
        width: 50%;
    }

    .w-lg-40 {
        width: 40%;
    }

    .w-lg-30 {
        width: 30%;
    }

    .w-lg-35 {
        width: 35%;
    }

    .w-lg-25 {
        width: 25%;
    }

    .w-lg-20 {
        width: 20%;
    }

    .w-lg-15 {
        width: 15%;
    }

    .w-lg-10 {
        width: 10%;
    }
}

.mw-100 {
    max-width: 100%;
}

.mw-80 {
    max-width: 80%;
}

.mw-60 {
    max-width: 60%;
}

.mw-50 {
    max-width: 50%;
}

.mw-40 {
    max-width: 40%;
}

.mw-30 {
    max-width: 30%;
}

.mw-25 {
    max-width: 25%;
}

.mw-20 {
    max-width: 20%;
}

.mw-15 {
    max-width: 15%;
}

.mw-10 {
    max-width: 10%;
}

@media screen and (max-width: 540px) {
    .mw-sm-100 {
        max-width: 100%;
    }

    .mw-sm-80 {
        max-width: 80%;
    }

    .mw-sm-60 {
        max-width: 60%;
    }

    .mw-sm-50 {
        max-width: 50%;
    }

    .mw-sm-40 {
        max-width: 40%;
    }

    .mw-sm-30 {
        max-width: 30%;
    }

    .mw-sm-25 {
        max-width: 25%;
    }

    .mw-sm-20 {
        max-width: 20%;
    }

    .mw-sm-15 {
        max-width: 15%;
    }

    .mw-sm-10 {
        max-width: 10%;
    }

}

@media screen and (min-width: 720px) {
    .mw-md-100 {
        max-width: 100%;
    }

    .mw-md-80 {
        max-width: 80%;
    }

    .mw-md-60 {
        max-width: 60%;
    }

    .mw-md-50 {
        max-width: 50%;
    }

    .mw-md-40 {
        max-width: 40%;
    }

    .mw-md-30 {
        max-width: 30%;
    }

    .mw-md-25 {
        max-width: 25%;
    }

    .mw-md-20 {
        max-width: 20%;
    }

    .mw-md-15 {
        max-width: 15%;
    }

    .mw-md-10 {
        max-width: 10%;
    }
}

@media screen and (min-width: 960px) {
    .mw-lg-100 {
        max-width: 100%;
    }

    .mw-lg-80 {
        max-width: 80%;
    }

    .mw-lg-60 {
        max-width: 60%;
    }

    .mw-lg-50 {
        max-width: 50%;
    }

    .mw-lg-45 {
        max-width: 45%;
    }

    .mw-lg-40 {
        max-width: 40%;
    }

    .mw-lg-30 {
        max-width: 30%;
    }

    .mw-lg-25 {
        max-width: 25%;
    }

    .mw-lg-20 {
        max-width: 20%;
    }

    .mw-lg-15 {
        max-width: 15%;
    }

    .mw-lg-10 {
        max-width: 10%;
    }
}

.w-1400px {
    width: 1400px;
}


/* End of Width */



.owl-item.active .slider__item.slider-hide {
    display: none !important;
}


/* Custom */

.tag.tag-ppds-primary {
    background-color: #811c1cc7 !important;
    color: #fff !important;
}

.benefit-modal-dialog {
    width: 100% !important;
    max-width: 100vw !important;
    margin: auto !important;
}

@media screen and (min-width: 720px) {
    .benefit-vidio {
        height: 80vh;
    }
}

/* 
.ytp-right-controls {
    display: none !important;
}

iframe .ytp-chrome-top.ytp-show-cards-title {
    display: none !important;
} */

#video-yt {
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Ini yang umum untuk YouTube */
}

/* Untuk layar tablet (orientasi landscape dan portrait) */
@media (max-width: 1024px) {
    #video-yt {
        height: 60vh;
    }
}

/* Untuk handphone (portrait) */
@media (max-width: 768px) {
    #video-yt {
        height: 50vh;
    }
}

/* Untuk handphone (landscape) */
@media (max-width: 768px) and (orientation: landscape) {
    #video-yt {
        height: 70vh;
    }
}

/* Untuk layar besar atau dekstop */
@media (min-width: 1025px) {
    #video-yt {
        height: 90vh;
    }
}

.ytp-youtube-button .ytp-button.ytp-youtube-button.ytp-button-reveal {
    display: none !important;
}